@wordpress/components
Version:
UI components for WordPress.
107 lines (102 loc) • 3.25 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.AlignmentMatrixControl = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _i18n = require("@wordpress/i18n");
var _compose = require("@wordpress/compose");
var _element = require("@wordpress/element");
var _cell = _interopRequireDefault(require("./cell"));
var _composite = require("../composite");
var _styles = require("./styles");
var _icon = _interopRequireDefault(require("./icon"));
var _utils = require("./utils");
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function UnforwardedAlignmentMatrixControl({
className,
id,
label = (0, _i18n.__)('Alignment Matrix Control'),
defaultValue = 'center center',
value,
onChange,
width = 92,
...props
}) {
const baseId = (0, _compose.useInstanceId)(UnforwardedAlignmentMatrixControl, 'alignment-matrix-control', id);
const setActiveId = (0, _element.useCallback)(nextActiveId => {
const nextValue = (0, _utils.getItemValue)(baseId, nextActiveId);
if (nextValue) {
onChange?.(nextValue);
}
}, [baseId, onChange]);
const classes = (0, _clsx.default)('component-alignment-matrix-control', className);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_composite.Composite, {
defaultActiveId: (0, _utils.getItemId)(baseId, defaultValue),
activeId: (0, _utils.getItemId)(baseId, value),
setActiveId: setActiveId,
rtl: (0, _i18n.isRTL)(),
render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.GridContainer, {
...props,
"aria-label": label,
className: classes,
id: baseId,
role: "grid",
size: width
}),
children: _utils.GRID.map((cells, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_composite.Composite.Row, {
render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.GridRow, {
role: "row"
}),
children: cells.map(cell => /*#__PURE__*/(0, _jsxRuntime.jsx)(_cell.default, {
id: (0, _utils.getItemId)(baseId, cell),
value: cell
}, cell))
}, index))
});
}
/**
* AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
*
* ```jsx
* import { AlignmentMatrixControl } from '@wordpress/components';
* import { useState } from '@wordpress/element';
*
* const Example = () => {
* const [ alignment, setAlignment ] = useState( 'center center' );
*
* return (
* <AlignmentMatrixControl
* value={ alignment }
* onChange={ setAlignment }
* />
* );
* };
* ```
*/
const AlignmentMatrixControl = exports.AlignmentMatrixControl = Object.assign(UnforwardedAlignmentMatrixControl, {
/**
* Render an alignment matrix as an icon.
*
* ```jsx
* import { AlignmentMatrixControl } from '@wordpress/components';
*
* <Icon icon={<AlignmentMatrixControl.Icon value="top left" />} />
* ```
*/
Icon: Object.assign(_icon.default, {
displayName: 'AlignmentMatrixControl.Icon'
})
});
var _default = exports.default = AlignmentMatrixControl;
//# sourceMappingURL=index.js.map