@gechiui/components/build-module/box-control/all-input-control.js

UI components for GeChiUI.

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

/**
 * External dependencies
 */
import { noop } from 'lodash';
/**
 * Internal dependencies
 */

import UnitControl from './unit-control';
import { ALL_SIDES, LABELS, getAllValue, getAllUnitFallback, isValuesMixed, isValuesDefined } from './utils';
export default function AllInputControl(_ref) {
  let {
    onChange = noop,
    onFocus = noop,
    onHoverOn = noop,
    onHoverOff = noop,
    values,
    sides,
    selectedUnits,
    setSelectedUnits,
    ...props
  } = _ref;
  const allValue = getAllValue(values, sides);
  const hasValues = isValuesDefined(values);
  const isMixed = hasValues && isValuesMixed(values, sides);
  const allPlaceholder = isMixed ? LABELS.mixed : null; // Set meaningful unit selection if no allValue and user has previously
  // selected units without assigning values while controls were unlinked.

  const allUnitFallback = !allValue ? getAllUnitFallback(selectedUnits) : undefined;

  const handleOnFocus = event => {
    onFocus(event, {
      side: 'all'
    });
  }; // Applies a value to an object representing top, right, bottom and left
  // sides while taking into account any custom side configuration.


  const applyValueToSides = (currentValues, newValue) => {
    const newValues = { ...currentValues
    };

    if (sides !== null && sides !== void 0 && sides.length) {
      sides.forEach(side => {
        if (side === 'vertical') {
          newValues.top = newValue;
          newValues.bottom = newValue;
        } else if (side === 'horizontal') {
          newValues.left = newValue;
          newValues.right = newValue;
        } else {
          newValues[side] = newValue;
        }
      });
    } else {
      ALL_SIDES.forEach(side => newValues[side] = newValue);
    }

    return newValues;
  };

  const handleOnChange = next => {
    const isNumeric = !isNaN(parseFloat(next));
    const nextValue = isNumeric ? next : undefined;
    const nextValues = applyValueToSides(values, nextValue);
    onChange(nextValues);
  }; // Set selected unit so it can be used as fallback by unlinked controls
  // when individual sides do not have a value containing a unit.


  const handleOnUnitChange = unit => {
    const newUnits = applyValueToSides(selectedUnits, unit);
    setSelectedUnits(newUnits);
  };

  const handleOnHoverOn = () => {
    onHoverOn({
      top: true,
      bottom: true,
      left: true,
      right: true
    });
  };

  const handleOnHoverOff = () => {
    onHoverOff({
      top: false,
      bottom: false,
      left: false,
      right: false
    });
  };

  return createElement(UnitControl, _extends({}, props, {
    disableUnits: isMixed,
    isOnly: true,
    value: allValue,
    unit: allUnitFallback,
    onChange: handleOnChange,
    onUnitChange: handleOnUnitChange,
    onFocus: handleOnFocus,
    onHoverOn: handleOnHoverOn,
    onHoverOff: handleOnHoverOff,
    placeholder: allPlaceholder
  }));
}
//# sourceMappingURL=all-input-control.js.map