woocommerce/packages/woocommerce-blocks/assets/js/editor-components/heading-toolbar/index.js
2021-12-10 12:03:04 +00:00

53 lines
1.2 KiB
JavaScript

/**
* External dependencies
*/
import { range } from 'lodash';
import { __, sprintf } from '@wordpress/i18n';
import { Component } from '@wordpress/element';
import { ToolbarGroup } from '@wordpress/components';
/**
* Internal dependencies
*/
import HeadingLevelIcon from './heading-level-icon';
/**
* HeadingToolbar component.
*
* Allows the heading level to be chosen for a title block.
*/
class HeadingToolbar extends Component {
createLevelControl( targetLevel, selectedLevel, onChange ) {
const isActive = targetLevel === selectedLevel;
return {
icon: <HeadingLevelIcon level={ targetLevel } />,
/* translators: %s: heading level e.g: "2", "3", "4" */
title: sprintf( __( 'Heading %d' ), targetLevel ),
isActive,
onClick: () => onChange( targetLevel ),
};
}
render() {
const {
isCollapsed = true,
minLevel,
maxLevel,
selectedLevel,
onChange,
} = this.props;
return (
<ToolbarGroup
isCollapsed={ isCollapsed }
icon={ <HeadingLevelIcon level={ selectedLevel } /> }
controls={ range( minLevel, maxLevel ).map( ( index ) =>
this.createLevelControl( index, selectedLevel, onChange )
) }
/>
);
}
}
export default HeadingToolbar;