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

UI components for WordPress.

"use strict";

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

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

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

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

var _lodash = require("lodash");

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

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

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

/**
 * External dependencies
 */

/**
 * Internal dependencies
 */
const allSides = ['top', 'right', 'bottom', 'left'];

function BoxInputControls({
  onChange = _lodash.noop,
  onFocus = _lodash.noop,
  onHoverOn = _lodash.noop,
  onHoverOff = _lodash.noop,
  values,
  sides,
  ...props
}) {
  const createHandleOnFocus = side => event => {
    onFocus(event, {
      side
    });
  };

  const createHandleOnHoverOn = side => () => {
    onHoverOn({
      [side]: true
    });
  };

  const createHandleOnHoverOff = side => () => {
    onHoverOff({
      [side]: false
    });
  };

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

  const createHandleOnChange = side => (next, {
    event
  }) => {
    const {
      altKey
    } = event;
    const nextValues = { ...values
    };
    nextValues[side] = next;
    /**
     * Supports changing pair sides. For example, holding the ALT key
     * when changing the TOP will also update BOTTOM.
     */

    if (altKey) {
      switch (side) {
        case 'top':
          nextValues.bottom = next;
          break;

        case 'bottom':
          nextValues.top = next;
          break;

        case 'left':
          nextValues.right = next;
          break;

        case 'right':
          nextValues.left = next;
          break;
      }
    }

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


  const filteredSides = sides !== null && sides !== void 0 && sides.length ? allSides.filter(side => sides.includes(side)) : allSides;
  const first = filteredSides[0];
  const last = filteredSides[filteredSides.length - 1];
  const only = first === last && first;
  return (0, _element.createElement)(_boxControlStyles.LayoutContainer, {
    className: "component-box-control__input-controls-wrapper"
  }, (0, _element.createElement)(_boxControlStyles.Layout, {
    gap: 0,
    align: "top",
    className: "component-box-control__input-controls"
  }, filteredSides.map(side => (0, _element.createElement)(_unitControl.default, (0, _extends2.default)({}, props, {
    isFirst: first === side,
    isLast: last === side,
    isOnly: only === side,
    value: values[side],
    onChange: createHandleOnChange(side),
    onFocus: createHandleOnFocus(side),
    onHoverOn: createHandleOnHoverOn(side),
    onHoverOff: createHandleOnHoverOff(side),
    label: _utils.LABELS.top,
    key: `box-control-${side}`
  })))));
}
//# sourceMappingURL=input-controls.js.map