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

UI components for WordPress.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement } from "@wordpress/element";

/**
 * Internal dependencies
 */
import UnitControl from './unit-control';
import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
import { ALL_SIDES, LABELS } from './utils';
import { LayoutContainer, Layout } from './styles/box-control-styles';

const noop = () => {};

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

  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, _ref2) => {
    let {
      event
    } = _ref2;
    const nextValues = { ...values
    };
    const isNumeric = next !== undefined && !isNaN(parseFloat(next));
    const nextValue = isNumeric ? next : undefined;
    nextValues[side] = nextValue;
    /**
     * Supports changing pair sides. For example, holding the ALT key
     * when changing the TOP will also update BOTTOM.
     */
    // @ts-expect-error - TODO: event.altKey is only present when the change event was
    // triggered by a keyboard event. Should this feature be implemented differently so
    // it also works with drag events?

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

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

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

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

    handleOnChange(nextValues);
  };

  const createHandleOnUnitChange = side => next => {
    const newUnits = { ...selectedUnits
    };
    newUnits[side] = next;
    setSelectedUnits(newUnits);
  }; // Filter sides if custom configuration provided, maintaining default order.


  const filteredSides = sides !== null && sides !== void 0 && sides.length ? ALL_SIDES.filter(side => sides.includes(side)) : ALL_SIDES;
  const first = filteredSides[0];
  const last = filteredSides[filteredSides.length - 1];
  const only = first === last && first;
  return createElement(LayoutContainer, {
    className: "component-box-control__input-controls-wrapper"
  }, createElement(Layout, {
    gap: 0,
    align: "top",
    className: "component-box-control__input-controls"
  }, filteredSides.map(side => {
    const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(values[side]);
    const computedUnit = values[side] ? parsedUnit : selectedUnits[side];
    return createElement(UnitControl, _extends({}, props, {
      isFirst: first === side,
      isLast: last === side,
      isOnly: only === side,
      value: [parsedQuantity, computedUnit].join(''),
      onChange: createHandleOnChange(side),
      onUnitChange: createHandleOnUnitChange(side),
      onFocus: createHandleOnFocus(side),
      onHoverOn: createHandleOnHoverOn(side),
      onHoverOff: createHandleOnHoverOff(side),
      label: LABELS[side],
      key: `box-control-${side}`
    }));
  })));
}
//# sourceMappingURL=input-controls.js.map