@wordpress/block-editor
Version:
81 lines (77 loc) • 2.5 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = TextAlignmentControl;
var _clsx = _interopRequireDefault(require("clsx"));
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _element = require("@wordpress/element");
var _components = require("@wordpress/components");
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
const TEXT_ALIGNMENT_OPTIONS = [{
label: (0, _i18n.__)('Align text left'),
value: 'left',
icon: _icons.alignLeft
}, {
label: (0, _i18n.__)('Align text center'),
value: 'center',
icon: _icons.alignCenter
}, {
label: (0, _i18n.__)('Align text right'),
value: 'right',
icon: _icons.alignRight
}, {
label: (0, _i18n.__)('Justify text'),
value: 'justify',
icon: _icons.alignJustify
}];
const DEFAULT_OPTIONS = ['left', 'center', 'right'];
/**
* Control to facilitate text alignment selections.
*
* @param {Object} props Component props.
* @param {string} props.className Class name to add to the control.
* @param {string} props.value Currently selected text alignment.
* @param {Function} props.onChange Handles change in text alignment selection.
* @param {string[]} props.options Array of text alignment options to display.
*
* @return {Element} Text alignment control.
*/
function TextAlignmentControl({
className,
value,
onChange,
options = DEFAULT_OPTIONS
}) {
const validOptions = (0, _element.useMemo)(() => TEXT_ALIGNMENT_OPTIONS.filter(option => options.includes(option.value)), [options]);
if (!validOptions.length) {
return null;
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControl, {
isDeselectable: true,
__nextHasNoMarginBottom: true,
__next40pxDefaultSize: true,
label: (0, _i18n.__)('Text alignment'),
className: (0, _clsx.default)('block-editor-text-alignment-control', className),
value: value,
onChange: newValue => {
onChange(newValue === value ? undefined : newValue);
},
children: validOptions.map(option => {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOptionIcon, {
value: option.value,
icon: option.icon,
label: option.label
}, option.value);
})
});
}
//# sourceMappingURL=index.js.map