@wordpress/block-editor/build/components/spacing-sizes-control/input-controls/axial.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = AxialInputControls;
var _spacingInputControl = _interopRequireDefault(require("./spacing-input-control"));
var _utils = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * Internal dependencies
 */

const groupedSides = ['vertical', 'horizontal'];
function AxialInputControls({
  minimumCustomValue,
  onChange,
  onMouseOut,
  onMouseOver,
  sides,
  spacingSizes,
  type,
  values
}) {
  const createHandleOnChange = side => next => {
    if (!onChange) {
      return;
    }

    // Encode the existing value into the preset value if the passed in value matches the value of one of the spacingSizes.
    const nextValues = {
      ...Object.keys(values).reduce((acc, key) => {
        acc[key] = (0, _utils.getPresetValueFromCustomValue)(values[key], spacingSizes);
        return acc;
      }, {})
    };
    if (side === 'vertical') {
      nextValues.top = next;
      nextValues.bottom = next;
    }
    if (side === 'horizontal') {
      nextValues.left = next;
      nextValues.right = next;
    }
    onChange(nextValues);
  };

  // Filter sides if custom configuration provided, maintaining default order.
  const filteredSides = sides?.length ? groupedSides.filter(side => (0, _utils.hasAxisSupport)(sides, side)) : groupedSides;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
    children: filteredSides.map(side => {
      const axisValue = side === 'vertical' ? values.top : values.left;
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_spacingInputControl.default, {
        icon: _utils.ICONS[side],
        label: _utils.LABELS[side],
        minimumCustomValue: minimumCustomValue,
        onChange: createHandleOnChange(side),
        onMouseOut: onMouseOut,
        onMouseOver: onMouseOver,
        side: side,
        spacingSizes: spacingSizes,
        type: type,
        value: axisValue,
        withInputField: false
      }, `spacing-sizes-control-${side}`);
    })
  });
}
//# sourceMappingURL=axial.js.map