@wordpress/block-editor
Version:
72 lines (71 loc) • 2.29 kB
JavaScript
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { ToolbarDropdownMenu, ToolbarGroup, BottomSheetSelectControl } from '@wordpress/components';
/**
* Internal dependencies
*/
import useAvailableAlignments from './use-available-alignments';
import { BLOCK_ALIGNMENTS_CONTROLS, DEFAULT_CONTROL, POPOVER_PROPS } from './constants';
import { jsx as _jsx } from "react/jsx-runtime";
function BlockAlignmentUI({
value,
onChange,
controls,
isToolbar,
isCollapsed = true,
isBottomSheetControl = false
}) {
const enabledControls = useAvailableAlignments(controls);
const hasEnabledControls = !!enabledControls.length;
if (!hasEnabledControls) {
return null;
}
function onChangeAlignment(align) {
onChange([value, 'none'].includes(align) ? undefined : align);
}
const activeAlignmentControl = BLOCK_ALIGNMENTS_CONTROLS[value];
const defaultAlignmentControl = BLOCK_ALIGNMENTS_CONTROLS[DEFAULT_CONTROL];
const toolbarUIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;
const UIComponent = isBottomSheetControl ? BottomSheetSelectControl : toolbarUIComponent;
const commonProps = {
label: __('Align')
};
const extraProps = isBottomSheetControl ? {
options: enabledControls.map(({
name: controlName
}) => {
const control = BLOCK_ALIGNMENTS_CONTROLS[controlName];
return {
value: controlName,
label: control.title,
icon: control.icon
};
}),
value: activeAlignmentControl ? value : 'none',
onChange: align => onChangeAlignment(align)
} : {
icon: activeAlignmentControl ? activeAlignmentControl.icon : defaultAlignmentControl.icon,
isCollapsed: isToolbar ? isCollapsed : undefined,
controls: enabledControls.map(({
name: controlName
}) => {
return {
...BLOCK_ALIGNMENTS_CONTROLS[controlName],
isActive: value === controlName || !value && controlName === 'none',
onClick: () => onChangeAlignment(controlName)
};
}),
popoverProps: POPOVER_PROPS,
toggleProps: {
description: __('Change alignment')
}
};
return /*#__PURE__*/_jsx(UIComponent, {
...commonProps,
...extraProps
});
}
export default BlockAlignmentUI;
//# sourceMappingURL=ui.native.js.map