CHIEFSOFT\ameye
87 lines
1.8 KiB
React
87 lines
1.8 KiB
React
/**
|
|
* WordPress dependencies
|
|
*/
|
|
|
|
const {
|
|
__,
|
|
} = wp.i18n;
|
|
|
|
const {
|
|
Component,
|
|
} = wp.element;
|
|
|
|
const {
|
|
Icon,
|
|
Toolbar,
|
|
DropdownMenu,
|
|
} = wp.components;
|
|
|
|
|
|
/**
|
|
* Component
|
|
*/
|
|
export default class ExtendAlignmentToolbar extends Component {
|
|
constructor() {
|
|
super( ...arguments );
|
|
}
|
|
|
|
render() {
|
|
const DEFAULT_ALIGNMENT_CONTROLS = [
|
|
{
|
|
icon: <Icon icon="editor-textcolor" />,
|
|
title: __( 'Default Align Text' ),
|
|
align: 'default',
|
|
},
|
|
{
|
|
icon: <Icon icon="editor-alignleft" />,
|
|
title: __( 'Align Text Left' ),
|
|
align: 'left',
|
|
},
|
|
{
|
|
icon: <Icon icon="editor-aligncenter" />,
|
|
title: __( 'Align Text Center' ),
|
|
align: 'center',
|
|
},
|
|
{
|
|
icon: <Icon icon="editor-alignright" />,
|
|
title: __( 'Align Text Right' ),
|
|
align: 'right',
|
|
},
|
|
];
|
|
|
|
const {
|
|
value,
|
|
onChange,
|
|
alignmentControls = DEFAULT_ALIGNMENT_CONTROLS,
|
|
} = this.props;
|
|
|
|
function applyOrUnset( align ) {
|
|
return () => onChange( value === align ? undefined : align );
|
|
}
|
|
|
|
const activeAlignment = alignmentControls.find( function( control ) {
|
|
return ( value === control.align || ( 'default' === control.align && ( 'none' === value || 'default' === value || ! value ) ) );
|
|
} );
|
|
|
|
return (
|
|
<Toolbar>
|
|
<DropdownMenu
|
|
icon={ activeAlignment ? activeAlignment.icon : <Icon icon="editor-textcolor" /> }
|
|
label={ activeAlignment ? activeAlignment.title : __( 'Change text alignment' ) }
|
|
controls={ alignmentControls.map( ( control ) => {
|
|
const { align } = control;
|
|
|
|
const isActive = ( value === align || ( 'default' === align && ( 'none' === value || 'default' === value || ! value ) ) );
|
|
|
|
return {
|
|
...control,
|
|
isActive,
|
|
onClick: applyOrUnset( align ),
|
|
};
|
|
} ) }
|
|
/>
|
|
</Toolbar>
|
|
);
|
|
}
|
|
}
|