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

UI components for GeChiUI.

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
Object.defineProperty(exports, "parseUnit", {
  enumerable: true,
  get: function () {
    return _utils.parseUnit;
  }
});
Object.defineProperty(exports, "useCustomUnits", {
  enumerable: true,
  get: function () {
    return _utils.useCustomUnits;
  }
});

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

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

var _lodash = require("lodash");

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

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

var _keycodes = require("@gechiui/keycodes");

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

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

var _unitControlStyles = require("./styles/unit-control-styles");

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

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

var _hooks = require("../utils/hooks");

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
 */
// eslint-disable-next-line no-restricted-imports

/**
 * GeChiUI dependencies
 */
function UnitControl(_ref, forwardedRef) {
  let {
    __unstableStateReducer: stateReducer = state => state,
    autoComplete = 'off',
    className,
    disabled = false,
    disableUnits = false,
    isPressEnterToChange = false,
    isResetValueOnUnitChange = false,
    isUnitSelectTabbable = true,
    label,
    onChange = _lodash.noop,
    onUnitChange = _lodash.noop,
    size = 'default',
    style,
    unit: unitProp,
    units: unitsProp = _utils.CSS_UNITS,
    value: valueProp,
    ...props
  } = _ref;
  const units = (0, _element.useMemo)(() => (0, _utils.getUnitsWithCurrentUnit)(valueProp, unitProp, unitsProp), [valueProp, unitProp, unitsProp]);
  const [value, initialUnit] = (0, _utils.getParsedValue)(valueProp, unitProp, units);
  const [unit, setUnit] = (0, _hooks.useControlledState)(unitProp, {
    initial: initialUnit,
    fallback: ''
  }); // Stores parsed value for hand-off in state reducer

  const refParsedValue = (0, _element.useRef)(null);
  const classes = (0, _classnames.default)('components-unit-control', className);

  const handleOnChange = (next, changeProps) => {
    if (next === '') {
      onChange('', changeProps);
      return;
    }
    /*
     * Customizing the onChange callback.
     * This allows as to broadcast a combined value+unit to onChange.
     */


    next = (0, _utils.getValidParsedUnit)(next, units, value, unit).join('');
    onChange(next, changeProps);
  };

  const handleOnUnitChange = (next, changeProps) => {
    const {
      data
    } = changeProps;
    let nextValue = `${value}${next}`;

    if (isResetValueOnUnitChange && (data === null || data === void 0 ? void 0 : data.default) !== undefined) {
      nextValue = `${data.default}${next}`;
    }

    onChange(nextValue, changeProps);
    onUnitChange(next, changeProps);
    setUnit(next);
  };

  const mayUpdateUnit = event => {
    if (!isNaN(Number(event.currentTarget.value))) {
      refParsedValue.current = null;
      return;
    }

    const [parsedValue, parsedUnit] = (0, _utils.getValidParsedUnit)(event.currentTarget.value, units, value, unit);
    refParsedValue.current = parsedValue.toString();

    if (isPressEnterToChange && parsedUnit !== unit) {
      const data = Array.isArray(units) ? units.find(option => option.value === parsedUnit) : undefined;
      const changeProps = {
        event,
        data
      };
      onChange(`${parsedValue}${parsedUnit}`, changeProps);
      onUnitChange(parsedUnit, changeProps);
      setUnit(parsedUnit);
    }
  };

  const handleOnBlur = mayUpdateUnit;

  const handleOnKeyDown = event => {
    const {
      keyCode
    } = event;

    if (keyCode === _keycodes.ENTER) {
      mayUpdateUnit(event);
    }
  };
  /**
   * "Middleware" function that intercepts updates from InputControl.
   * This allows us to tap into actions to transform the (next) state for
   * InputControl.
   *
   * @param  state  State from InputControl
   * @param  action Action triggering state change
   * @return The updated state to apply to InputControl
   */


  const unitControlStateReducer = (state, action) => {
    /*
     * On commits (when pressing ENTER and on blur if
     * isPressEnterToChange is true), if a parse has been performed
     * then use that result to update the state.
     */
    if (action.type === inputControlActionTypes.COMMIT) {
      if (refParsedValue.current !== null) {
        state.value = refParsedValue.current;
        refParsedValue.current = null;
      }
    }

    return state;
  };

  const inputSuffix = !disableUnits ? (0, _element.createElement)(_unitSelectControl.default, {
    "aria-label": (0, _i18n.__)('选择单位'),
    disabled: disabled,
    isUnitSelectTabbable: isUnitSelectTabbable,
    onChange: handleOnUnitChange,
    size: size,
    unit: unit,
    units: units
  }) : null;
  let step = props.step;
  /*
   * If no step prop has been passed, lookup the active unit and
   * try to get step from `units`, or default to a value of `1`
   */

  if (!step && units) {
    var _activeUnit$step;

    const activeUnit = units.find(option => option.value === unit);
    step = (_activeUnit$step = activeUnit === null || activeUnit === void 0 ? void 0 : activeUnit.step) !== null && _activeUnit$step !== void 0 ? _activeUnit$step : 1;
  }

  return (0, _element.createElement)(_unitControlStyles.Root, {
    className: "components-unit-control-wrapper",
    style: style
  }, (0, _element.createElement)(_unitControlStyles.ValueInput, (0, _extends2.default)({
    "aria-label": label,
    type: isPressEnterToChange ? 'text' : 'number'
  }, (0, _lodash.omit)(props, ['children']), {
    autoComplete: autoComplete,
    className: classes,
    disabled: disabled,
    disableUnits: disableUnits,
    isPressEnterToChange: isPressEnterToChange,
    label: label,
    onBlur: handleOnBlur,
    onKeyDown: handleOnKeyDown,
    onChange: handleOnChange,
    ref: forwardedRef,
    size: size,
    suffix: inputSuffix,
    value: value,
    step: step,
    __unstableStateReducer: (0, _reducer.composeStateReducers)(unitControlStateReducer, stateReducer)
  })));
}
/**
 * `UnitControl` allows the user to set a value as well as a unit (e.g. `px`).
 *
 *
 * @example
 * ```jsx
 * import { __experimentalUnitControl as UnitControl } from '@gechiui/components';
 * import { useState } from '@gechiui/element';
 *
 * const Example = () => {
 *   const [ value, setValue ] = useState( '10px' );
 *
 *   return <UnitControl onChange={ setValue } value={ value } />;
 * };
 * ```
 */


const ForwardedUnitControl = (0, _element.forwardRef)(UnitControl);
var _default = ForwardedUnitControl;
exports.default = _default;
//# sourceMappingURL=index.js.map