@wordpress/block-editor
Version:
91 lines (88 loc) • 2.9 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _i18n = require("@wordpress/i18n");
var _keycodes = require("@wordpress/keycodes");
var _components = require("@wordpress/components");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
const noop = () => {};
/**
* The alignment matrix control allows users to quickly adjust inner block alignment.
*
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-alignment-matrix-control/README.md
*
* @example
* ```jsx
* function Example() {
* return (
* <BlockControls>
* <BlockAlignmentMatrixControl
* label={ __( 'Change content position' ) }
* value="center"
* onChange={ ( nextPosition ) =>
* setAttributes( { contentPosition: nextPosition } )
* }
* />
* </BlockControls>
* );
* }
* ```
*
* @param {Object} props Component props.
* @param {string} props.label Label for the control. Defaults to 'Change matrix alignment'.
* @param {Function} props.onChange Function to execute upon change of matrix state.
* @param {string} props.value Content alignment location. One of: 'center', 'center center',
* 'center left', 'center right', 'top center', 'top left',
* 'top right', 'bottom center', 'bottom left', 'bottom right'.
* @param {boolean} props.isDisabled Whether the control should be disabled.
* @return {Element} The BlockAlignmentMatrixControl component.
*/
function BlockAlignmentMatrixControl(props) {
const {
label = (0, _i18n.__)('Change matrix alignment'),
onChange = noop,
value = 'center',
isDisabled
} = props;
const icon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.AlignmentMatrixControl.Icon, {
value: value
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Dropdown, {
popoverProps: {
placement: 'bottom-start'
},
renderToggle: ({
onToggle,
isOpen
}) => {
const openOnArrowDown = event => {
if (!isOpen && event.keyCode === _keycodes.DOWN) {
event.preventDefault();
onToggle();
}
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
onClick: onToggle,
"aria-haspopup": "true",
"aria-expanded": isOpen,
onKeyDown: openOnArrowDown,
label: label,
icon: icon,
showTooltip: true,
disabled: isDisabled
});
},
renderContent: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.AlignmentMatrixControl, {
hasFocusBorder: false,
onChange: onChange,
value: value
})
});
}
var _default = exports.default = BlockAlignmentMatrixControl;
//# sourceMappingURL=index.js.map