@wordpress/components
Version:
UI components for WordPress.
74 lines (73 loc) • 2.33 kB
JavaScript
// packages/components/src/alignment-matrix-control/index.tsx
import clsx from "clsx";
import { __, isRTL } from "@wordpress/i18n";
import { useInstanceId } from "@wordpress/compose";
import { useCallback } from "@wordpress/element";
import Cell from "./cell";
import { Composite } from "../composite";
import { GridContainer, GridRow } from "./styles";
import AlignmentMatrixControlIcon from "./icon";
import { GRID, getItemId, getItemValue } from "./utils";
import { jsx as _jsx } from "react/jsx-runtime";
function UnforwardedAlignmentMatrixControl({
className,
id,
label = __("Alignment Matrix Control"),
defaultValue = "center center",
value,
onChange,
width = 92,
...props
}) {
const baseId = useInstanceId(UnforwardedAlignmentMatrixControl, "alignment-matrix-control", id);
const setActiveId = useCallback((nextActiveId) => {
const nextValue = getItemValue(baseId, nextActiveId);
if (nextValue) {
onChange?.(nextValue);
}
}, [baseId, onChange]);
const classes = clsx("component-alignment-matrix-control", className);
return /* @__PURE__ */ _jsx(Composite, {
defaultActiveId: getItemId(baseId, defaultValue),
activeId: getItemId(baseId, value),
setActiveId,
rtl: isRTL(),
render: /* @__PURE__ */ _jsx(GridContainer, {
...props,
"aria-label": label,
className: classes,
id: baseId,
role: "grid",
size: width
}),
children: GRID.map((cells, index) => /* @__PURE__ */ _jsx(Composite.Row, {
render: /* @__PURE__ */ _jsx(GridRow, {
role: "row"
}),
children: cells.map((cell) => /* @__PURE__ */ _jsx(Cell, {
id: getItemId(baseId, cell),
value: cell
}, cell))
}, index))
});
}
var 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(AlignmentMatrixControlIcon, {
displayName: "AlignmentMatrixControl.Icon"
})
});
var alignment_matrix_control_default = AlignmentMatrixControl;
export {
AlignmentMatrixControl,
alignment_matrix_control_default as default
};
//# sourceMappingURL=index.js.map