@wordpress/components/build/box-control/axial-input-controls.js

UI components for WordPress.

"use strict";

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

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

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

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

var _utils = require("../unit-control/utils");

var _unitControl = _interopRequireDefault(require("./unit-control"));

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

var _boxControlStyles = require("./styles/box-control-styles");

/**
 * Internal dependencies
 */
const groupedSides = ['vertical', 'horizontal'];

function AxialInputControls(_ref) {
  let {
    onChange,
    onFocus,
    onHoverOn,
    onHoverOff,
    values,
    selectedUnits,
    setSelectedUnits,
    sides,
    ...props
  } = _ref;

  const createHandleOnFocus = side => event => {
    if (!onFocus) {
      return;
    }

    onFocus(event, {
      side
    });
  };

  const createHandleOnHoverOn = side => () => {
    if (!onHoverOn) {
      return;
    }

    if (side === 'vertical') {
      onHoverOn({
        top: true,
        bottom: true
      });
    }

    if (side === 'horizontal') {
      onHoverOn({
        left: true,
        right: true
      });
    }
  };

  const createHandleOnHoverOff = side => () => {
    if (!onHoverOff) {
      return;
    }

    if (side === 'vertical') {
      onHoverOff({
        top: false,
        bottom: false
      });
    }

    if (side === 'horizontal') {
      onHoverOff({
        left: false,
        right: false
      });
    }
  };

  const createHandleOnChange = side => next => {
    if (!onChange) {
      return;
    }

    const nextValues = { ...values
    };
    const isNumeric = next !== undefined && !isNaN(parseFloat(next));
    const nextValue = isNumeric ? next : undefined;

    if (side === 'vertical') {
      nextValues.top = nextValue;
      nextValues.bottom = nextValue;
    }

    if (side === 'horizontal') {
      nextValues.left = nextValue;
      nextValues.right = nextValue;
    }

    onChange(nextValues);
  };

  const createHandleOnUnitChange = side => next => {
    const newUnits = { ...selectedUnits
    };

    if (side === 'vertical') {
      newUnits.top = next;
      newUnits.bottom = next;
    }

    if (side === 'horizontal') {
      newUnits.left = next;
      newUnits.right = next;
    }

    setSelectedUnits(newUnits);
  }; // Filter sides if custom configuration provided, maintaining default order.


  const filteredSides = sides !== null && sides !== void 0 && sides.length ? groupedSides.filter(side => sides.includes(side)) : groupedSides;
  const first = filteredSides[0];
  const last = filteredSides[filteredSides.length - 1];
  const only = first === last && first;
  return (0, _element.createElement)(_boxControlStyles.Layout, {
    gap: 0,
    align: "top",
    className: "component-box-control__vertical-horizontal-input-controls"
  }, filteredSides.map(side => {
    const [parsedQuantity, parsedUnit] = (0, _utils.parseQuantityAndUnitFromRawValue)(side === 'vertical' ? values.top : values.left);
    const selectedUnit = side === 'vertical' ? selectedUnits.top : selectedUnits.left;
    return (0, _element.createElement)(_unitControl.default, (0, _extends2.default)({}, props, {
      isFirst: first === side,
      isLast: last === side,
      isOnly: only === side,
      value: [parsedQuantity, selectedUnit !== null && selectedUnit !== void 0 ? selectedUnit : parsedUnit].join(''),
      onChange: createHandleOnChange(side),
      onUnitChange: createHandleOnUnitChange(side),
      onFocus: createHandleOnFocus(side),
      onHoverOn: createHandleOnHoverOn(side),
      onHoverOff: createHandleOnHoverOff(side),
      label: _utils2.LABELS[side],
      key: side
    }));
  }));
}
//# sourceMappingURL=axial-input-controls.js.map