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

UI components for GeChiUI.

"use strict";

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

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

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

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

var _lodash = require("lodash");

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

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

/**
 * External dependencies
 */

/**
 * Internal dependencies
 */
function AllInputControl(_ref) {
  let {
    onChange = _lodash.noop,
    onFocus = _lodash.noop,
    onHoverOn = _lodash.noop,
    onHoverOff = _lodash.noop,
    values,
    sides,
    selectedUnits,
    setSelectedUnits,
    ...props
  } = _ref;
  const allValue = (0, _utils.getAllValue)(values, sides);
  const hasValues = (0, _utils.isValuesDefined)(values);
  const isMixed = hasValues && (0, _utils.isValuesMixed)(values, sides);
  const allPlaceholder = isMixed ? _utils.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 ? (0, _utils.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 {
      _utils.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 (0, _element.createElement)(_unitControl.default, (0, _extends2.default)({}, 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