@gechiui/components/build/number-control/index.js

UI components for GeChiUI.

"use strict";

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

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

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

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

var _classnames = _interopRequireDefault(require("classnames"));

var _i18n = require("@gechiui/i18n");

var _numberControlStyles = require("./styles/number-control-styles");

var inputControlActionTypes = _interopRequireWildcard(require("../input-control/reducer/actions"));

var _reducer = require("../input-control/reducer/reducer");

var _math = require("../utils/math");

var _values = require("../utils/values");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

// @ts-nocheck

/**
 * External dependencies
 */

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
function NumberControl(_ref, ref) {
  let {
    __unstableStateReducer: stateReducer = state => state,
    className,
    dragDirection = 'n',
    hideHTMLArrows = false,
    isDragEnabled = true,
    isShiftStepEnabled = true,
    label,
    max = Infinity,
    min = -Infinity,
    required = false,
    shiftStep = 10,
    step = 1,
    type: typeProp = 'number',
    value: valueProp,
    ...props
  } = _ref;
  const isStepAny = step === 'any';
  const baseStep = isStepAny ? 1 : parseFloat(step);
  const baseValue = (0, _math.roundClamp)(0, min, max, baseStep);

  const constrainValue = (value, stepOverride) => {
    // When step is "any" clamp the value, otherwise round and clamp it
    return isStepAny ? Math.min(max, Math.max(min, value)) : (0, _math.roundClamp)(value, min, max, stepOverride !== null && stepOverride !== void 0 ? stepOverride : baseStep);
  };

  const autoComplete = typeProp === 'number' ? 'off' : null;
  const classes = (0, _classnames.default)('components-number-control', className);
  /**
   * "Middleware" function that intercepts updates from InputControl.
   * This allows us to tap into actions to transform the (next) state for
   * InputControl.
   *
   * @param {Object} state  State from InputControl
   * @param {Object} action Action triggering state change
   * @return {Object} The updated state to apply to InputControl
   */

  const numberControlStateReducer = (state, action) => {
    const {
      type,
      payload
    } = action;
    const event = payload === null || payload === void 0 ? void 0 : payload.event;
    const currentValue = state.value;
    /**
     * Handles custom UP and DOWN Keyboard events
     */

    if (type === inputControlActionTypes.PRESS_UP || type === inputControlActionTypes.PRESS_DOWN) {
      const enableShift = event.shiftKey && isShiftStepEnabled;
      const incrementalValue = enableShift ? parseFloat(shiftStep) * baseStep : baseStep;
      let nextValue = (0, _values.isValueEmpty)(currentValue) ? baseValue : currentValue;

      if (event !== null && event !== void 0 && event.preventDefault) {
        event.preventDefault();
      }

      if (type === inputControlActionTypes.PRESS_UP) {
        nextValue = (0, _math.add)(nextValue, incrementalValue);
      }

      if (type === inputControlActionTypes.PRESS_DOWN) {
        nextValue = (0, _math.subtract)(nextValue, incrementalValue);
      }

      state.value = constrainValue(nextValue, enableShift ? incrementalValue : null);
    }
    /**
     * Handles drag to update events
     */


    if (type === inputControlActionTypes.DRAG && isDragEnabled) {
      const [x, y] = payload.delta;
      const enableShift = payload.shiftKey && isShiftStepEnabled;
      const modifier = enableShift ? parseFloat(shiftStep) * baseStep : baseStep;
      let directionModifier;
      let delta;

      switch (dragDirection) {
        case 'n':
          delta = y;
          directionModifier = -1;
          break;

        case 'e':
          delta = x;
          directionModifier = (0, _i18n.isRTL)() ? -1 : 1;
          break;

        case 's':
          delta = y;
          directionModifier = 1;
          break;

        case 'w':
          delta = x;
          directionModifier = (0, _i18n.isRTL)() ? 1 : -1;
          break;
      }

      if (delta !== 0) {
        delta = Math.ceil(Math.abs(delta)) * Math.sign(delta);
        const distance = delta * modifier * directionModifier;
        state.value = constrainValue((0, _math.add)(currentValue, distance), enableShift ? modifier : null);
      }
    }
    /**
     * Handles commit (ENTER key press or on blur if isPressEnterToChange)
     */


    if (type === inputControlActionTypes.PRESS_ENTER || type === inputControlActionTypes.COMMIT) {
      const applyEmptyValue = required === false && currentValue === '';
      state.value = applyEmptyValue ? currentValue : constrainValue(currentValue);
    }

    return state;
  };

  return (0, _element.createElement)(_numberControlStyles.Input, (0, _extends2.default)({
    autoComplete: autoComplete,
    inputMode: "numeric"
  }, props, {
    className: classes,
    dragDirection: dragDirection,
    hideHTMLArrows: hideHTMLArrows,
    isDragEnabled: isDragEnabled,
    label: label,
    max: max,
    min: min,
    ref: ref,
    required: required,
    step: step,
    type: typeProp,
    value: valueProp,
    __unstableStateReducer: (0, _reducer.composeStateReducers)(numberControlStateReducer, stateReducer)
  }));
}

var _default = (0, _element.forwardRef)(NumberControl);

exports.default = _default;
//# sourceMappingURL=index.js.map