@elliemae/ds-form 2.2.0-alpha.4 → 3.0.0-next.2

package/esm/InputMask/mask_types/NumberInputMask.js

@@ -1,41 +1,63 @@
-import * as React from "react";
-import React2, { useCallback, useLayoutEffect, useRef, useState } from "react";
-import { PropTypes } from "react-desc";
-import { DSTextBox } from "../../TextBox";
-import { setCaretPosition } from "../utils/setCaretPosition";
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/es.string.replace.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useRef, useState, useCallback, useLayoutEffect } from 'react';
+import DSTextBox from '../../TextBox/DSTextBox.js';
+import setCaretPosition from '../utils/setCaretPosition.js';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["focus", "setFocus", "setRawMask", "cursorPosition", "setCursorPosition", "lastkey", "setLastkey", "setRawValue", "allowDecimal", "allowLeadingZeroes", "allowNegative", "autoFocus", "className", "clearable", "decimalLimit", "decimalSymbol", "disabled", "fluidWidth", "hasError", "includeThousandsSeparator", "innerRef", "integerLimit", "leftComponent", "maxLength", "minLength", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "onPaste", "placeholder", "prefix", "readOnly", "requireDecimal", "rightComponent", "style", "suffix", "thousandsSeparatorSymbol", "type", "value"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 const addThousandsSeparator = (n, thousandsSeparatorSymbol) => n.replace(/\B(?=(\d{3})+(?!\d))/g, thousandsSeparatorSymbol);
-const conformValue = (prevRawValue, prevCursorPos, lastkeycode, {
-  prefix,
-  suffix,
-  includeThousandsSeparator,
-  thousandsSeparatorSymbol,
-  allowDecimal,
-  decimalSymbol,
-  decimalLimit,
-  requireDecimal,
-  allowNegative,
-  allowLeadingZeroes,
-  integerLimit,
-  shouldCompleteDecimals
-}) => {
+
+const conformValue = (prevRawValue, prevCursorPos, lastkeycode, _ref) => {
+  var _decimal;
+
+  let {
+    prefix,
+    suffix,
+    includeThousandsSeparator,
+    thousandsSeparatorSymbol,
+    allowDecimal,
+    decimalSymbol,
+    decimalLimit,
+    requireDecimal,
+    allowNegative,
+    allowLeadingZeroes,
+    integerLimit,
+    shouldCompleteDecimals
+  } = _ref;
   const prefixIndex = prevRawValue.indexOf(prefix);
   const suffixIndex = prevRawValue.lastIndexOf(suffix);
-  const negativeIndex = prevRawValue.indexOf("-");
+  const negativeIndex = prevRawValue.indexOf('-');
   const cursorPos = prevCursorPos - (prefixIndex === -1 ? 0 : prefixIndex + prefix.length);
   const rawValue = prevRawValue.substring(prefixIndex === -1 ? 0 : prefixIndex + prefix.length, suffixIndex === -1 ? prevRawValue.length : suffixIndex);
-  const filteredRawValue = rawValue.split("").filter((char) => char >= "0" && char <= "9" || char === decimalSymbol || char === "-");
+  const filteredRawValue = rawValue.split('').filter(char => char >= '0' && char <= '9' || char === decimalSymbol || char === '-');
   let isNegative = allowNegative && negativeIndex !== -1 && (prefixIndex === -1 || negativeIndex < prefixIndex);
-  let integer = "";
-  let decimal = "";
+  let integer = '';
+  let decimal = '';
   let foundDecimalSymbol = false;
+
   const integerFits = () => integerLimit === null || integer.length < integerLimit;
+
   const decimalFits = () => decimalLimit === null || decimal.length < decimalLimit;
-  filteredRawValue.forEach((char) => {
+
+  filteredRawValue.forEach(char => {
     if (allowDecimal && !foundDecimalSymbol && char === decimalSymbol) {
       foundDecimalSymbol = true;
-    } else if (allowNegative && !integer.length && !foundDecimalSymbol && char === "-") {
+    } else if (allowNegative && !integer.length && !foundDecimalSymbol && char === '-') {
       isNegative = true;
-    } else if (char >= "0" && char <= "9") {
+    } else if (char >= '0' && char <= '9') {
       if (!foundDecimalSymbol && integerFits()) {
         integer += char;
       } else if (foundDecimalSymbol && decimalFits()) {
@@ -43,43 +65,45 @@ const conformValue = (prevRawValue, prevCursorPos, lastkeycode, {
       }
     }
   });
-  if (requireDecimal)
-    foundDecimalSymbol = true;
-  if (!requireDecimal && !decimal?.length && lastkeycode === 8) {
+  if (requireDecimal) foundDecimalSymbol = true;
+
+  if (!requireDecimal && !((_decimal = decimal) !== null && _decimal !== void 0 && _decimal.length) && lastkeycode === 8) {
     foundDecimalSymbol = false;
   }
-  if (!integer && !decimal)
-    foundDecimalSymbol = false;
+
+  if (!integer && !decimal) foundDecimalSymbol = false;
+
   if (foundDecimalSymbol && !integer && decimal) {
-    integer = "0";
+    integer = '0';
   }
+
   if (!allowLeadingZeroes) {
-    while (integer.length > 1 && integer[0] === "0")
-      integer = integer.substring(1);
+    while (integer.length > 1 && integer[0] === '0') integer = integer.substring(1);
   }
+
   let nextMaskedValue = includeThousandsSeparator ? addThousandsSeparator(integer, thousandsSeparatorSymbol) : integer;
-  nextMaskedValue += foundDecimalSymbol ? decimalSymbol : "";
-  if (shouldCompleteDecimals)
-    while (decimal.length !== decimalLimit)
-      decimal += "0";
+  nextMaskedValue += foundDecimalSymbol ? decimalSymbol : '';
+  if (shouldCompleteDecimals) while (decimal.length !== decimalLimit) decimal += '0';
   nextMaskedValue += decimal;
   let maskedPos = 0;
+
   for (let i = 0; i < cursorPos; i += 1) {
-    if (nextMaskedValue[maskedPos] === thousandsSeparatorSymbol)
-      maskedPos += 1;
-    if (nextMaskedValue[maskedPos] === rawValue[i])
-      maskedPos += 1;
+    if (nextMaskedValue[maskedPos] === thousandsSeparatorSymbol) maskedPos += 1;
+    if (nextMaskedValue[maskedPos] === rawValue[i]) maskedPos += 1;
   }
+
   if (nextMaskedValue.length || isNegative) {
     nextMaskedValue = prefix + nextMaskedValue;
     maskedPos += prefix.length;
+
     if (isNegative) {
-      if (lastkeycode !== 8 || nextMaskedValue !== prefix)
-        nextMaskedValue = `-${nextMaskedValue}`;
+      if (lastkeycode !== 8 || nextMaskedValue !== prefix) nextMaskedValue = "-".concat(nextMaskedValue);
       maskedPos += 1;
     }
+
     nextMaskedValue += suffix;
   }
+
   if (lastkeycode !== 8 && maskedPos < nextMaskedValue.length) {
     if (nextMaskedValue[maskedPos] === decimalSymbol && integer.length === integerLimit) {
       maskedPos += 1;
@@ -87,67 +111,75 @@ const conformValue = (prevRawValue, prevCursorPos, lastkeycode, {
       maskedPos += 1;
     }
   }
+
   return {
     nextMaskedValue,
     maskedPos: Math.min(maskedPos, nextMaskedValue.length - suffix.length)
   };
 };
-const NumberInputMask = ({
-  focus,
-  setFocus,
-  setRawMask,
-  cursorPosition,
-  setCursorPosition,
-  lastkey,
-  setLastkey,
-  setRawValue,
-  allowDecimal,
-  allowLeadingZeroes,
-  allowNegative,
-  autoFocus,
-  className,
-  clearable = false,
-  decimalLimit,
-  decimalSymbol,
-  disabled,
-  fluidWidth,
-  hasError,
-  includeThousandsSeparator,
-  innerRef,
-  integerLimit,
-  leftComponent,
-  maxLength,
-  minLength,
-  name,
-  onBlur,
-  onChange,
-  onClick,
-  onFocus,
-  onKeyDown,
-  onKeyUp,
-  onPaste,
-  placeholder,
-  prefix,
-  readOnly,
-  requireDecimal,
-  rightComponent,
-  style,
-  suffix,
-  thousandsSeparatorSymbol,
-  type,
-  value,
-  ...rest
-}) => {
+
+const NumberInputMask = _ref2 => {
+  let {
+    focus,
+    setFocus,
+    setRawMask,
+    cursorPosition,
+    setCursorPosition,
+    lastkey,
+    setLastkey,
+    setRawValue,
+    allowDecimal,
+    allowLeadingZeroes,
+    allowNegative,
+    autoFocus,
+    className,
+    clearable = false,
+    decimalLimit,
+    decimalSymbol,
+    disabled,
+    fluidWidth,
+    hasError,
+    includeThousandsSeparator,
+    innerRef,
+    integerLimit,
+    leftComponent,
+    maxLength,
+    minLength,
+    name,
+    onBlur,
+    onChange,
+    onClick,
+    onFocus,
+    onKeyDown,
+    onKeyUp,
+    onPaste,
+    placeholder,
+    prefix,
+    readOnly,
+    requireDecimal,
+    rightComponent,
+    style,
+    suffix,
+    thousandsSeparatorSymbol,
+    type,
+    value
+  } = _ref2,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
   const inputRef = useRef();
   const [maskedValue, setMaskedValue] = useState(value);
-  const conform = useCallback(({
-    rawValue,
-    cursorPos,
-    lastkeycode,
-    shouldUpdateCursorPos = true,
-    shouldCompleteDecimals = false
-  }) => {
-    const { nextMaskedValue, maskedPos } = conformValue(rawValue, cursorPos, lastkeycode, {
+  const conform = useCallback(_ref3 => {
+    let {
+      rawValue,
+      cursorPos,
+      lastkeycode,
+      shouldUpdateCursorPos = true,
+      shouldCompleteDecimals = false
+    } = _ref3;
+    const {
+      nextMaskedValue,
+      maskedPos
+    } = conformValue(rawValue, cursorPos, lastkeycode, {
       prefix,
       suffix,
       includeThousandsSeparator,
@@ -167,25 +199,30 @@ const NumberInputMask = ({
         originalValue: rawValue
       }
     };
-    if (onChange && nextMaskedValue !== maskedValue)
-      onChange(event);
+    if (onChange && nextMaskedValue !== maskedValue) onChange(event);
     setMaskedValue(nextMaskedValue);
     setRawValue(nextMaskedValue);
-    if (shouldUpdateCursorPos)
-      setCursorPosition({ current: maskedPos });
+    if (shouldUpdateCursorPos) setCursorPosition({
+      current: maskedPos
+    });
   }, [maskedValue, onChange]);
-  const handleOnChange = useCallback((e) => {
-    const { value: rawValue, selectionEnd } = e.target;
+  const handleOnChange = useCallback(e => {
+    const {
+      value: rawValue,
+      selectionEnd
+    } = e.target;
     setRawMask(rawValue);
     setRawValue(rawValue);
-    setCursorPosition({ current: selectionEnd });
+    setCursorPosition({
+      current: selectionEnd
+    });
     setFocus(true);
   }, [setRawMask, setRawValue, setCursorPosition, setFocus, lastkey.code]);
   useLayoutEffect(() => {
-    if (focus)
-      setCaretPosition(inputRef.current, cursorPosition.current);
+    if (focus) setCaretPosition(inputRef.current, cursorPosition.current);
   }, [focus, cursorPosition]);
   useLayoutEffect(() => {
+    // if the value changes, then re-conform the mask
     conform({
       rawValue: value,
       cursorPos: cursorPosition.current,
@@ -193,15 +230,19 @@ const NumberInputMask = ({
       shouldUpdateCursorPos: focus
     });
   }, [focus, value, cursorPosition.current]);
-  const handleKeyDown = useCallback((e) => {
+  const handleKeyDown = useCallback(e => {
     e.stopPropagation();
-    setLastkey({ key: e.key, code: e.keyCode });
+    setLastkey({
+      key: e.key,
+      code: e.keyCode
+    });
     onKeyDown(e);
   }, [onKeyDown]);
-  const handleBlur = useCallback((e) => {
+  const handleBlur = useCallback(e => {
     setFocus(false);
     onBlur(e);
-    if (requireDecimal && maskedValue !== "") {
+
+    if (requireDecimal && maskedValue !== '') {
       conform({
         rawValue: maskedValue,
         cursorPos: 0,
@@ -211,88 +252,35 @@ const NumberInputMask = ({
       });
     }
   }, [maskedValue, requireDecimal, suffix, decimalLimit, onBlur]);
-  return /* @__PURE__ */ React2.createElement(DSTextBox, {
-    ...rest,
-    className,
-    clearable,
-    disabled,
-    fluidWidth,
-    hasError,
-    innerRef: (ref) => {
+  return /*#__PURE__*/jsx(DSTextBox, _objectSpread(_objectSpread({}, rest), {}, {
+    className: className,
+    clearable: clearable,
+    disabled: disabled,
+    fluidWidth: fluidWidth,
+    hasError: hasError,
+    innerRef: ref => {
       inputRef.current = ref;
-      if (innerRef)
-        innerRef(ref);
+      if (innerRef) innerRef(ref);
     },
     isActive: focus,
-    leftComponent,
-    maxLength,
-    minLength,
-    name,
+    leftComponent: leftComponent,
+    maxLength: maxLength,
+    minLength: minLength,
+    name: name,
     onBlur: handleBlur,
     onChange: handleOnChange,
-    onClick,
-    onFocus,
+    onClick: onClick,
+    onFocus: onFocus,
     onKeyDown: handleKeyDown,
-    onKeyUp,
-    onPaste,
-    placeholder,
-    readOnly,
-    rightComponent,
-    style,
-    type,
+    onKeyUp: onKeyUp,
+    onPaste: onPaste,
+    placeholder: placeholder,
+    readOnly: readOnly,
+    rightComponent: rightComponent,
+    style: style,
+    type: type,
     value: maskedValue
-  });
-};
-NumberInputMask.propTypes = {
-  focus: PropTypes.bool,
-  setFocus: PropTypes.func,
-  setRawMask: PropTypes.func,
-  cursorPosition: PropTypes.shape({ current: PropTypes.number }),
-  setCursorPosition: PropTypes.func,
-  lastkey: PropTypes.shape({ code: PropTypes.number, key: PropTypes.string }),
-  setLastkey: PropTypes.func,
-  setRawValue: PropTypes.func,
-  allowDecimal: PropTypes.bool,
-  allowLeadingZeroes: PropTypes.bool,
-  allowNegative: PropTypes.bool,
-  autoFocus: PropTypes.bool,
-  className: PropTypes.string,
-  clearable: PropTypes.bool,
-  decimalLimit: PropTypes.number,
-  decimalSymbol: PropTypes.string,
-  disabled: PropTypes.bool,
-  fluidWidth: PropTypes.bool,
-  hasError: PropTypes.bool,
-  includeThousandsSeparator: PropTypes.bool,
-  innerRef: PropTypes.any,
-  integerLimit: PropTypes.number,
-  leftComponent: PropTypes.element,
-  mask: PropTypes.any,
-  maxLength: PropTypes.number,
-  minLength: PropTypes.number,
-  name: PropTypes.string,
-  onBlur: PropTypes.func,
-  onChange: PropTypes.func,
-  onClick: PropTypes.func,
-  onFocus: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  onKeyUp: PropTypes.func,
-  onPaste: PropTypes.func,
-  placeholder: PropTypes.string,
-  placeholderChar: PropTypes.string,
-  prefix: PropTypes.string,
-  readOnly: PropTypes.bool,
-  requireDecimal: PropTypes.bool,
-  rightComponent: PropTypes.element,
-  style: PropTypes.object,
-  suffix: PropTypes.string,
-  thousandsSeparatorSymbol: PropTypes.string,
-  type: PropTypes.string,
-  value: PropTypes.string
-};
-var NumberInputMask_default = NumberInputMask;
-export {
-  NumberInputMask,
-  NumberInputMask_default as default
+  }));
 };
-//# sourceMappingURL=NumberInputMask.js.map
+
+export { NumberInputMask as default };