@dnb/eufemia/cjs/extensions/forms/Field/Number/Number.js

DNB Eufemia Design System UI Library

"use strict";
"use client";

require("core-js/modules/web.dom-collections.iterator.js");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("core-js/modules/es.string.replace.js");
var _react = _interopRequireWildcard(require("react"));
var _components = require("../../../../components");
var _Context = _interopRequireDefault(require("../../../../shared/Context"));
var _FieldBlockContext = _interopRequireDefault(require("../../FieldBlock/FieldBlockContext"));
var _classnames = _interopRequireDefault(require("classnames"));
var _FieldBlock = _interopRequireDefault(require("../../FieldBlock"));
var _hooks = require("../../hooks");
var _utils = require("../../../../components/flex/utils");
var _SliderHelpers = require("../../../../components/slider/SliderHelpers");
var _Context2 = _interopRequireDefault(require("../../DataContext/Context"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
const defaultMinimum = Number.MIN_SAFE_INTEGER;
const defaultMaximum = Number.MAX_SAFE_INTEGER;
function NumberComponent(props) {
  var _props$width, _props$innerRef, _dataContext$props2, _sharedContext$transl, _sharedContext$transl2;
  const dataContext = (0, _react.useContext)(_Context2.default);
  const fieldBlockContext = (0, _react.useContext)(_FieldBlockContext.default);
  const sharedContext = (0, _react.useContext)(_Context.default);
  const {
    currency,
    currencyDisplay,
    percent,
    mask,
    step = 1,
    decimalLimit = 12,
    allowNegative = true,
    disallowLeadingZeroes = false,
    prefix: prefixProp,
    suffix: suffixProp,
    showStepControls
  } = props;
  const schema = (0, _react.useMemo)(() => {
    var _props$schema, _props$minimum, _props$maximum;
    return (_props$schema = props.schema) !== null && _props$schema !== void 0 ? _props$schema : {
      type: 'number',
      minimum: (_props$minimum = props.minimum) !== null && _props$minimum !== void 0 ? _props$minimum : defaultMinimum,
      maximum: (_props$maximum = props.maximum) !== null && _props$maximum !== void 0 ? _props$maximum : defaultMaximum,
      exclusiveMinimum: props.exclusiveMinimum,
      exclusiveMaximum: props.exclusiveMaximum,
      multipleOf: props.multipleOf
    };
  }, [props.schema, props.minimum, props.maximum, props.exclusiveMinimum, props.exclusiveMaximum, props.multipleOf]);
  const toInput = (0, _react.useCallback)(external => {
    if (external === undefined) {
      return null;
    }
    return external;
  }, []);
  const fromInput = (0, _react.useCallback)(_ref => {
    let {
      value,
      numberValue
    } = _ref;
    if (value === '') {
      return props.emptyValue;
    }
    return numberValue;
  }, [props.emptyValue]);
  const ref = (0, _react.useRef)();
  const preparedProps = _objectSpread(_objectSpread({
    valueType: 'number'
  }, props), {}, {
    schema,
    toInput,
    fromInput,
    width: (_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : fieldBlockContext !== null && fieldBlockContext !== void 0 && fieldBlockContext.composition ? 'stretch' : 'medium',
    innerRef: (_props$innerRef = props.innerRef) !== null && _props$innerRef !== void 0 ? _props$innerRef : ref
  });
  const {
    id,
    name,
    className,
    innerRef,
    inputClassName,
    autoComplete,
    placeholder,
    value,
    startWith = null,
    minimum = defaultMinimum,
    maximum = defaultMaximum,
    disabled,
    htmlAttributes,
    hasError,
    size,
    width,
    align,
    handleFocus,
    handleBlur,
    handleChange,
    setDisplayValue
  } = (0, _hooks.useFieldProps)(preparedProps);
  (0, _react.useEffect)(() => {
    var _innerRef$current;
    setDisplayValue((_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.value);
  }, [innerRef, setDisplayValue, value]);
  const {
    handleSubmit
  } = dataContext !== null && dataContext !== void 0 ? dataContext : {};
  const onKeyDownHandler = (0, _react.useCallback)(e => {
    var _dataContext$props;
    const {
      event
    } = e;
    if (dataContext !== null && dataContext !== void 0 && (_dataContext$props = dataContext.props) !== null && _dataContext$props !== void 0 && _dataContext$props.isolate && event.key === 'Enter') {
      var _event$preventDefault;
      handleSubmit();
      (_event$preventDefault = event.preventDefault) === null || _event$preventDefault === void 0 ? void 0 : _event$preventDefault.call(event);
    }
    if (!showStepControls) {
      return;
    }
    let numberValue = null;
    switch (event.key) {
      case 'ArrowUp':
        numberValue = (0, _SliderHelpers.clamp)((value !== null && value !== void 0 ? value : startWith) + step, minimum, maximum);
        break;
      case 'ArrowDown':
        numberValue = (0, _SliderHelpers.clamp)((value !== null && value !== void 0 ? value : startWith) - step, minimum, maximum);
        break;
    }
    if (numberValue !== null) {
      event.persist();
      event.preventDefault();
      handleChange({
        numberValue
      });
    }
  }, [dataContext === null || dataContext === void 0 ? void 0 : (_dataContext$props2 = dataContext.props) === null || _dataContext$props2 === void 0 ? void 0 : _dataContext$props2.isolate, handleChange, handleSubmit, maximum, minimum, showStepControls, startWith, step, value]);
  const fieldBlockProps = _objectSpread({
    forId: id,
    className: (0, _classnames.default)("dnb-forms-field-number dnb-input__border--tokens", className),
    contentClassName: (0, _classnames.default)('dnb-forms-field-number__contents', showStepControls && 'dnb-forms-field-number__contents--has-controls', hasError && 'dnb-input__status--error', disabled && 'dnb-input--disabled'),
    width: (width === 'stretch' || fieldBlockContext !== null && fieldBlockContext !== void 0 && fieldBlockContext.composition) && !showStepControls ? width : undefined,
    contentWidth: width !== false ? width : undefined
  }, (0, _utils.pickSpacingProps)(props));
  const increaseClickHandler = (0, _react.useCallback)(() => {
    handleChange({
      numberValue: (0, _SliderHelpers.clamp)((value !== null && value !== void 0 ? value : startWith) + step, minimum, maximum)
    });
  }, [handleChange, maximum, minimum, startWith, step, value]);
  const increaseProps = showStepControls && {
    'aria-hidden': true,
    className: 'dnb-button--control-after',
    variant: 'secondary',
    icon: 'add',
    size: size || 'small',
    tabIndex: -1,
    disabled: disabled || value >= maximum,
    onClick: increaseClickHandler,
    title: sharedContext === null || sharedContext === void 0 ? void 0 : (_sharedContext$transl = sharedContext.translation.Slider.addTitle) === null || _sharedContext$transl === void 0 ? void 0 : _sharedContext$transl.replace('%s', String(value + step))
  };
  const decreaseClickHandler = (0, _react.useCallback)(() => {
    handleChange({
      numberValue: (0, _SliderHelpers.clamp)((value !== null && value !== void 0 ? value : startWith) - step, minimum, maximum)
    });
  }, [handleChange, maximum, minimum, startWith, step, value]);
  const decreaseProps = showStepControls && _objectSpread(_objectSpread({}, increaseProps), {}, {
    className: 'dnb-button--control-before',
    icon: 'subtract',
    size: size || 'small',
    disabled: disabled || value <= minimum,
    onClick: decreaseClickHandler,
    title: sharedContext === null || sharedContext === void 0 ? void 0 : (_sharedContext$transl2 = sharedContext.translation.Slider.subtractTitle) === null || _sharedContext$transl2 === void 0 ? void 0 : _sharedContext$transl2.replace('%s', String(value - step))
  });
  const prefix = typeof prefixProp === 'function' ? prefixProp(value) : prefixProp;
  const suffix = typeof suffixProp === 'function' ? suffixProp(value) : suffixProp;
  const maskProps = (0, _react.useMemo)(() => {
    const mask_options = {
      prefix,
      suffix,
      decimalLimit,
      allowNegative,
      disallowLeadingZeroes
    };
    if (currency) {
      return {
        as_currency: currency,
        mask_options,
        currency_mask: {
          currencyDisplay,
          decimalLimit
        }
      };
    }
    if (percent) {
      return {
        as_percent: percent,
        mask_options
      };
    }
    return {
      as_number: true,
      mask,
      number_mask: _objectSpread({}, mask_options)
    };
  }, [currency, currencyDisplay, decimalLimit, mask, percent, prefix, suffix, allowNegative, disallowLeadingZeroes]);
  const ariaParams = showStepControls && {
    role: 'spinbutton',
    'aria-valuemin': String(minimum),
    'aria-valuemax': String(maximum),
    'aria-valuenow': String(value),
    'aria-valuetext': String(value)
  };
  const inputProps = _objectSpread(_objectSpread(_objectSpread({
    id,
    name,
    inner_ref: innerRef,
    autoComplete,
    className: (0, _classnames.default)(`dnb-forms-field-number__input dnb-input--${size}`, inputClassName),
    step: showStepControls ? step : undefined,
    placeholder,
    value,
    align: showStepControls ? 'center' : align,
    onKeyDown: onKeyDownHandler,
    onFocus: handleFocus,
    onBlur: handleBlur,
    onChange: handleChange,
    disabled,
    status: hasError ? 'error' : undefined,
    stretch: Boolean(width)
  }, maskProps), htmlAttributes), ariaParams);
  if (showStepControls) {
    return _react.default.createElement(_FieldBlock.default, _extends({}, fieldBlockProps, {
      asFieldset: false
    }), _react.default.createElement("span", {
      className: "dnb-input__border dnb-input__border--root"
    }, _react.default.createElement(_components.Button, decreaseProps), _react.default.createElement(_components.InputMasked, inputProps), _react.default.createElement(_components.Button, increaseProps)));
  }
  return _react.default.createElement(_FieldBlock.default, _extends({}, fieldBlockProps, {
    asFieldset: false
  }), _react.default.createElement(_components.InputMasked, inputProps));
}
NumberComponent._supportsSpacingProps = true;
var _default = exports.default = NumberComponent;
//# sourceMappingURL=Number.js.map