| 1 |
/** |
| 2 |
* External dependencies |
| 3 |
*/ |
| 4 |
import { range } from 'lodash'; |
| 5 |
|
| 6 |
/** |
| 7 |
* WordPress dependencies |
| 8 |
*/ |
| 9 |
import { __, sprintf } from '@wordpress/i18n'; |
| 10 |
import { Component } from '@wordpress/element'; |
| 11 |
import { ToolbarGroup } from '@wordpress/components'; |
| 12 |
|
| 13 |
/** |
| 14 |
* Internal dependencies |
| 15 |
*/ |
| 16 |
import HeadingLevelIcon from './heading-level-icon'; |
| 17 |
|
| 18 |
class HeadingToolbar extends Component { |
| 19 |
createLevelControl(targetLevel, selectedLevel, onChange) { |
| 20 |
const isActive = targetLevel === selectedLevel; |
| 21 |
return { |
| 22 |
icon: <HeadingLevelIcon level={targetLevel} isPressed={isActive} />, |
| 23 |
// translators: %s: heading level e.g: "1", "2", "3" |
| 24 |
title: sprintf(__('Heading %d'), targetLevel), |
| 25 |
isActive, |
| 26 |
onClick: () => onChange(targetLevel), |
| 27 |
}; |
| 28 |
} |
| 29 |
|
| 30 |
render() { |
| 31 |
const { |
| 32 |
isCollapsed = true, |
| 33 |
minLevel, |
| 34 |
maxLevel, |
| 35 |
selectedLevel, |
| 36 |
onChange, |
| 37 |
} = this.props; |
| 38 |
|
| 39 |
return ( |
| 40 |
<ToolbarGroup |
| 41 |
isCollapsed={isCollapsed} |
| 42 |
icon={<HeadingLevelIcon level={selectedLevel} />} |
| 43 |
controls={range(minLevel, maxLevel).map((index) => |
| 44 |
this.createLevelControl(index, selectedLevel, onChange) |
| 45 |
)} |
| 46 |
label={__('Change heading level')} |
| 47 |
/> |
| 48 |
); |
| 49 |
} |
| 50 |
} |
| 51 |
|
| 52 |
export default HeadingToolbar; |
| 53 |
|
