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

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _primitives = require("@wordpress/primitives");
var _utils = require("./utils");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const BASE_SIZE = 24;
const GRID_CELL_SIZE = 7;
const GRID_PADDING = (BASE_SIZE - 3 * GRID_CELL_SIZE) / 2;
const DOT_SIZE = 2;
const DOT_SIZE_SELECTED = 4;
function AlignmentMatrixControlIcon({
  className,
  disablePointerEvents = true,
  size,
  width,
  height,
  style = {},
  value = 'center',
  ...props
}) {
  var _ref, _ref2;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SVG, {
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: `0 0 ${BASE_SIZE} ${BASE_SIZE}`,
    width: (_ref = size !== null && size !== void 0 ? size : width) !== null && _ref !== void 0 ? _ref : BASE_SIZE,
    height: (_ref2 = size !== null && size !== void 0 ? size : height) !== null && _ref2 !== void 0 ? _ref2 : BASE_SIZE,
    role: "presentation",
    className: (0, _clsx.default)('component-alignment-matrix-control-icon', className),
    style: {
      pointerEvents: disablePointerEvents ? 'none' : undefined,
      ...style
    },
    ...props,
    children: _utils.ALIGNMENTS.map((align, index) => {
      const dotSize = (0, _utils.getAlignmentIndex)(value) === index ? DOT_SIZE_SELECTED : DOT_SIZE;
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Rect, {
        x: GRID_PADDING + index % 3 * GRID_CELL_SIZE + (GRID_CELL_SIZE - dotSize) / 2,
        y: GRID_PADDING + Math.floor(index / 3) * GRID_CELL_SIZE + (GRID_CELL_SIZE - dotSize) / 2,
        width: dotSize,
        height: dotSize,
        fill: "currentColor"
      }, align);
    })
  });
}
var _default = exports.default = AlignmentMatrixControlIcon;
//# sourceMappingURL=icon.js.map