"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.NumberControl = void 0;
var _react = require("react");
var _classnames = _interopRequireDefault(require("classnames"));
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _compose = require("@wordpress/compose");
var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
var _numberControlStyles = require("./styles/number-control-styles");
var inputControlActionTypes = _interopRequireWildcard(require("../input-control/reducer/actions"));
var _math = require("../utils/math");
var _values = require("../utils/values");
var _hStack = require("../h-stack");
var _spacer = require("../spacer");
var _utils = require("../utils");
var _useDeprecatedProps = require("../utils/use-deprecated-props");
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; }
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const noop = () => {};
function UnforwardedNumberControl(props, forwardedRef) {
  const {
    __unstableStateReducer: stateReducerProp,
    className,
    dragDirection = 'n',
    hideHTMLArrows = false,
    spinControls = hideHTMLArrows ? 'none' : 'native',
    isDragEnabled = true,
    isShiftStepEnabled = true,
    label,
    max = Infinity,
    min = -Infinity,
    required = false,
    shiftStep = 10,
    step = 1,
    spinFactor = 1,
    type: typeProp = 'number',
    value: valueProp,
    size = 'default',
    suffix,
    onChange = noop,
    ...restProps
  } = (0, _useDeprecatedProps.useDeprecated36pxDefaultSizeProp)(props, 'wp.components.NumberControl', '6.4');
  if (hideHTMLArrows) {
    (0, _deprecated.default)('wp.components.NumberControl hideHTMLArrows prop ', {
      alternative: 'spinControls="none"',
      since: '6.2',
      version: '6.3'
    });
  }
  const inputRef = (0, _element.useRef)();
  const mergedRef = (0, _compose.useMergeRefs)([inputRef, forwardedRef]);
  const isStepAny = step === 'any';
  const baseStep = isStepAny ? 1 : (0, _values.ensureNumber)(step);
  const baseSpin = (0, _values.ensureNumber)(spinFactor) * baseStep;
  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.
    // Use '' + to convert to string for use in input value attribute.
    return isStepAny ? '' + Math.min(max, Math.max(min, (0, _values.ensureNumber)(value))) : '' + (0, _math.roundClamp)(value, min, max, stepOverride !== null && stepOverride !== void 0 ? stepOverride : baseStep);
  };
  const autoComplete = typeProp === 'number' ? 'off' : undefined;
  const classes = (0, _classnames.default)('components-number-control', className);
  const cx = (0, _utils.useCx)();
  const spinButtonClasses = cx(size === 'small' && _numberControlStyles.styles.smallSpinButtons);
  const spinValue = (value, direction, event) => {
    event?.preventDefault();
    const shift = event?.shiftKey && isShiftStepEnabled;
    const delta = shift ? (0, _values.ensureNumber)(shiftStep) * baseSpin : baseSpin;
    let nextValue = (0, _values.isValueEmpty)(value) ? baseValue : value;
    if (direction === 'up') {
      nextValue = (0, _math.add)(nextValue, delta);
    } else if (direction === 'down') {
      nextValue = (0, _math.subtract)(nextValue, delta);
    }
    return constrainValue(nextValue, shift ? delta : undefined);
  };

  /**
   * "Middleware" function that intercepts updates from InputControl.
   * This allows us to tap into actions to transform the (next) state for
   * InputControl.
   *
   * @return The updated state to apply to InputControl
   */
  const numberControlStateReducer = (state, action) => {
    const nextState = {
      ...state
    };
    const {
      type,
      payload
    } = action;
    const event = payload.event;
    const currentValue = nextState.value;

    /**
     * Handles custom UP and DOWN Keyboard events
     */
    if (type === inputControlActionTypes.PRESS_UP || type === inputControlActionTypes.PRESS_DOWN) {
      nextState.value = spinValue(currentValue, type === inputControlActionTypes.PRESS_UP ? 'up' : 'down', event);
    }

    /**
     * Handles drag to update events
     */
    if (type === inputControlActionTypes.DRAG && isDragEnabled) {
      const [x, y] = payload.delta;
      const enableShift = payload.shiftKey && isShiftStepEnabled;
      const modifier = enableShift ? (0, _values.ensureNumber)(shiftStep) * baseSpin : baseSpin;
      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;
        nextState.value = constrainValue(
        // @ts-expect-error TODO: Investigate if it's ok for currentValue to be undefined
        (0, _math.add)(currentValue, distance), enableShift ? modifier : undefined);
      }
    }

    /**
     * Handles commit (ENTER key press or blur)
     */
    if (type === inputControlActionTypes.PRESS_ENTER || type === inputControlActionTypes.COMMIT) {
      const applyEmptyValue = required === false && currentValue === '';
      nextState.value = applyEmptyValue ? currentValue :
      // @ts-expect-error TODO: Investigate if it's ok for currentValue to be undefined
      constrainValue(currentValue);
    }
    return nextState;
  };
  const buildSpinButtonClickHandler = direction => event => onChange(String(spinValue(valueProp, direction, event)), {
    // Set event.target to the <input> so that consumers can use
    // e.g. event.target.validity.
    event: {
      ...event,
      target: inputRef.current
    }
  });
  return (0, _react.createElement)(_numberControlStyles.Input, {
    autoComplete: autoComplete,
    inputMode: "numeric",
    ...restProps,
    className: classes,
    dragDirection: dragDirection,
    hideHTMLArrows: spinControls !== 'native',
    isDragEnabled: isDragEnabled,
    label: label,
    max: max,
    min: min,
    ref: mergedRef,
    required: required,
    step: step,
    type: typeProp
    // @ts-expect-error TODO: Resolve discrepancy between `value` types in InputControl based components
    ,
    value: valueProp,
    __unstableStateReducer: (state, action) => {
      var _stateReducerProp;
      const baseState = numberControlStateReducer(state, action);
      return (_stateReducerProp = stateReducerProp?.(baseState, action)) !== null && _stateReducerProp !== void 0 ? _stateReducerProp : baseState;
    },
    size: size,
    suffix: spinControls === 'custom' ? (0, _react.createElement)(_react.Fragment, null, suffix, (0, _react.createElement)(_spacer.Spacer, {
      marginBottom: 0,
      marginRight: 2
    }, (0, _react.createElement)(_hStack.HStack, {
      spacing: 1
    }, (0, _react.createElement)(_numberControlStyles.SpinButton, {
      className: spinButtonClasses,
      icon: _icons.plus,
      size: "small",
      label: (0, _i18n.__)('Increment'),
      onClick: buildSpinButtonClickHandler('up')
    }), (0, _react.createElement)(_numberControlStyles.SpinButton, {
      className: spinButtonClasses,
      icon: _icons.reset,
      size: "small",
      label: (0, _i18n.__)('Decrement'),
      onClick: buildSpinButtonClickHandler('down')
    })))) : suffix,
    onChange: onChange
  });
}
const NumberControl = (0, _element.forwardRef)(UnforwardedNumberControl);
exports.NumberControl = NumberControl;
var _default = NumberControl;
exports.default = _default;
//# sourceMappingURL=index.js.map