@wordpress/components/build/alignment-matrix-control/index.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.AlignmentMatrixControl = AlignmentMatrixControl;
exports.default = void 0;

var _element = require("@wordpress/element");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _classnames = _interopRequireDefault(require("classnames"));

var _i18n = require("@wordpress/i18n");

var _compose = require("@wordpress/compose");

var _cell = _interopRequireDefault(require("./cell"));

var _composite = require("../composite");

var _alignmentMatrixControlStyles = require("./styles/alignment-matrix-control-styles");

var _icon = _interopRequireDefault(require("./icon"));

var _utils = require("./utils");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const noop = () => {};

function useBaseId(id) {
  const instanceId = (0, _compose.useInstanceId)(AlignmentMatrixControl, 'alignment-matrix-control');
  return id || instanceId;
}
/**
 *
 * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
 *
 * ```jsx
 * import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';
 * import { useState } from '@wordpress/element';
 *
 * const Example = () => {
 * 	const [ alignment, setAlignment ] = useState( 'center center' );
 *
 * 	return (
 * 		<AlignmentMatrixControl
 * 			value={ alignment }
 * 			onChange={ setAlignment }
 * 		/>
 * 	);
 * };
 * ```
 */


function AlignmentMatrixControl(_ref) {
  let {
    className,
    id,
    label = (0, _i18n.__)('Alignment Matrix Control'),
    defaultValue = 'center center',
    value,
    onChange = noop,
    width = 92,
    ...props
  } = _ref;
  const [immutableDefaultValue] = (0, _element.useState)(value !== null && value !== void 0 ? value : defaultValue);
  const baseId = useBaseId(id);
  const initialCurrentId = (0, _utils.getItemId)(baseId, immutableDefaultValue);
  const composite = (0, _composite.useCompositeState)({
    baseId,
    currentId: initialCurrentId,
    rtl: (0, _i18n.isRTL)()
  });

  const handleOnChange = nextValue => {
    onChange(nextValue);
  };

  const {
    setCurrentId
  } = composite;
  (0, _element.useEffect)(() => {
    if (typeof value !== 'undefined') {
      setCurrentId((0, _utils.getItemId)(baseId, value));
    }
  }, [value, setCurrentId, baseId]);
  const classes = (0, _classnames.default)('component-alignment-matrix-control', className);
  return (0, _element.createElement)(_composite.Composite, (0, _extends2.default)({}, props, composite, {
    "aria-label": label,
    as: _alignmentMatrixControlStyles.Root,
    className: classes,
    role: "grid",
    size: width
  }), _utils.GRID.map((cells, index) => (0, _element.createElement)(_composite.CompositeGroup, (0, _extends2.default)({}, composite, {
    as: _alignmentMatrixControlStyles.Row,
    role: "row",
    key: index
  }), cells.map(cell => {
    const cellId = (0, _utils.getItemId)(baseId, cell);
    const isActive = composite.currentId === cellId;
    return (0, _element.createElement)(_cell.default, (0, _extends2.default)({}, composite, {
      id: cellId,
      isActive: isActive,
      key: cell,
      value: cell,
      onFocus: () => handleOnChange(cell),
      tabIndex: isActive ? 0 : -1
    }));
  }))));
}

AlignmentMatrixControl.Icon = _icon.default;
var _default = AlignmentMatrixControl;
exports.default = _default;
//# sourceMappingURL=index.js.map