@7shifts/sous-chef 3.31.0 → 3.31.1-beta2

package/dist/index.modern.js

@@ -8945,6 +8945,117 @@ var useDateFieldControllers = function useDateFieldControllers(_ref) {
 
 var inputStyles = {"text-field":"_10EFd","date-field":"_33Mhr","text-field--invalid":"_3iXEe","date-field--invalid":"_iupg8","text-field--prefixed":"_2lxID","date-field--prefixed":"_Ukc0m","text-field--suffixed":"_2AI5V","date-field--suffixed":"_3P7jE"};
 
+var DEFAULT_SLOTS = 'dMy';
+var maskfy = function maskfy(params) {
+  var value = params.value,
+    format = params.format,
+    _params$slots = params.slots,
+    slots = _params$slots === void 0 ? DEFAULT_SLOTS : _params$slots,
+    cursorPosition = params.cursorPosition;
+  var formatCursorPosition = format[cursorPosition.selectionStart];
+  var isInAnchorPosition = !slots.includes(formatCursorPosition);
+  var isDeletingAnchor = value.length < format.length && isInAnchorPosition;
+  var _calculateCursorPosit = calculateCursorPosition(_extends({}, params, {
+      isDeletingAnchor: isDeletingAnchor
+    })),
+    selectionStart = _calculateCursorPosit[0],
+    selectionEnd = _calculateCursorPosit[1];
+  return {
+    maskedValue: calculateMask(_extends({}, params, {
+      isDeletingAnchor: isDeletingAnchor
+    })),
+    cursorPosition: {
+      selectionStart: selectionStart,
+      selectionEnd: selectionEnd
+    }
+  };
+};
+var calculateMask = function calculateMask(_ref) {
+  var value = _ref.value,
+    format = _ref.format,
+    _ref$slots = _ref.slots,
+    slots = _ref$slots === void 0 ? DEFAULT_SLOTS : _ref$slots,
+    isDeletingAnchor = _ref.isDeletingAnchor,
+    cursorPosition = _ref.cursorPosition;
+  var slotsSet = new Set(slots);
+  var accept = new RegExp('\\d', 'g');
+  var inputMatches = value.match(accept) || [];
+  var _calculateDigitReplac = calculateDigitReplacement(slots, format, inputMatches.length, cursorPosition),
+    isReplacingDigit = _calculateDigitReplac.isReplacingDigit,
+    isReplacingAt = _calculateDigitReplac.isReplacingAt;
+  if (isReplacingDigit) {
+    inputMatches.splice(isReplacingAt, 1);
+  }
+  if (isDeletingAnchor) {
+    inputMatches.pop();
+  }
+  var maskedValue = Array.from(format, function (character) {
+    return inputMatches[0] === character || slotsSet.has(character) ? inputMatches.shift() || character : character;
+  });
+  return maskedValue.join('');
+};
+var calculateCursorPosition = function calculateCursorPosition(params) {
+  var value = params.value,
+    format = params.format,
+    cursorPosition = params.cursorPosition,
+    _params$slots2 = params.slots,
+    slots = _params$slots2 === void 0 ? DEFAULT_SLOTS : _params$slots2;
+  var slotsSet = new Set(slots);
+  var prev = function (j) {
+    return Array.from(format, function (c, i) {
+      return slotsSet.has(c) ? j = i + 1 : j;
+    });
+  }(0);
+  var first = [].concat(format).findIndex(function (c) {
+    return slotsSet.has(c);
+  });
+  var calculatedCursorRange = [cursorPosition.selectionStart, cursorPosition.selectionEnd].map(function (position) {
+    var valueCharacters = calculateMask(_extends({}, params, {
+      value: value.slice(0, position)
+    })).split('');
+    var slotIndex = valueCharacters.findIndex(function (character) {
+      return slotsSet.has(character);
+    });
+    if (slotIndex < 0) {
+      return prev[prev.length - 1];
+    }
+    return slotIndex;
+  });
+  return calculatedCursorRange;
+};
+var calculateDigitReplacement = function calculateDigitReplacement(slots, format, amountOfDigitsTyped, cursorPosition) {
+  var slotsRegExp = new RegExp("[" + slots.split('').join('|') + "]", 'g');
+  var slotsMatches = format.match(slotsRegExp) || [];
+  var isReplacingDigit = amountOfDigitsTyped > slotsMatches.length;
+  var getCharacterPosition = function getCharacterPosition() {
+    var formatUntilTheCursorPoint = format.slice(0, cursorPosition.selectionStart);
+    var slotsFormatSlicedMatches = formatUntilTheCursorPoint.match(slotsRegExp) || [];
+    return slotsFormatSlicedMatches.length;
+  };
+  return {
+    isReplacingDigit: isReplacingDigit,
+    isReplacingAt: isReplacingDigit ? getCharacterPosition() : 0
+  };
+};
+
+var useFieldMask = function useFieldMask(format) {
+  var maskfyField = function maskfyField(input) {
+    var _maskfy = maskfy({
+        value: input.value,
+        format: format,
+        cursorPosition: {
+          selectionStart: input.selectionStart,
+          selectionEnd: input.selectionEnd
+        }
+      }),
+      maskedValue = _maskfy.maskedValue,
+      cursorPosition = _maskfy.cursorPosition;
+    input.value = maskedValue.toUpperCase();
+    input.setSelectionRange(cursorPosition.selectionStart, cursorPosition.selectionEnd);
+  };
+  return maskfyField;
+};
+
 var DateField = function DateField(_ref) {
   var _classnames;
   var name = _ref.name,
@@ -8967,6 +9078,7 @@ var DateField = function DateField(_ref) {
     onMonthChange = _ref.onMonthChange,
     testId = _ref.testId,
     weekStart = _ref.weekStart;
+  var maskfy = useFieldMask(format);
   var inputRef = useRef(null);
   var _useState = useState(false),
     showCalendar = _useState[0],
@@ -8979,17 +9091,15 @@ var DateField = function DateField(_ref) {
     onBlur: onBlur,
     error: error
   });
-  var _useState2 = useState(function () {
-      if (defaultValue) {
-        return formatDate(defaultValue, format);
-      }
-      if (controllers.value) {
-        return formatDate(controllers.value, format);
-      }
-      return '';
-    }),
-    inputValue = _useState2[0],
-    setInputValue = _useState2[1];
+  var getDefaultValue = function getDefaultValue() {
+    if (defaultValue) {
+      return formatDate(defaultValue, format);
+    }
+    if (controllers.value) {
+      return formatDate(controllers.value, format);
+    }
+    return '';
+  };
   var hasError = controllers.error;
   var fieldProps = {
     name: name,
@@ -9009,10 +9119,11 @@ var DateField = function DateField(_ref) {
     return undefined;
   };
   useEffect(function () {
-    if (!controllers.value && !!inputValue) {
-      setInputValue('');
+    if (!controllers.value && inputRef.current) {
+      inputRef.current.value = '';
     }
   }, [controllers.value]);
+  var selectedDate = getSelectedDate();
   return React__default.createElement(Field, _extends({}, fieldProps), React__default.createElement(AffixContainer, {
     prefix: React__default.createElement(IconCalendarAlt, {
       size: "medium"
@@ -9028,31 +9139,37 @@ var DateField = function DateField(_ref) {
     ref: inputRef,
     readOnly: readOnly,
     disabled: disabled,
-    onFocus: function onFocus() {
-      return setShowCalendar(true);
+    onFocus: function onFocus(e) {
+      setShowCalendar(true);
+      maskfy(e.target);
+      setTimeout(function () {
+        e.target.setSelectionRange(0, 0);
+      }, 10);
     },
     onClick: function onClick() {
       return setShowCalendar(true);
     },
     placeholder: placeholder || format.toUpperCase(),
     onChange: function onChange(event) {
+      maskfy(event.target);
       var parsedDate = parseDate(event.target.value, format);
       if (parsedDate) {
         controllers.onChange(parsedDate);
       }
-      setInputValue(event.target.value);
     },
     onBlur: controllers.onBlur,
-    maxLength: format.length,
-    value: inputValue
+    defaultValue: getDefaultValue()
   })), showCalendar && React__default.createElement(Calendar, {
     onSelect: function onSelect(date) {
       var _inputRef$current;
-      setInputValue(formatDate(date, format));
+      if (!inputRef.current) {
+        return;
+      }
+      inputRef.current.value = formatDate(date, format);
       controllers.onChange(date);
       (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
     },
-    selected: getSelectedDate(),
+    selected: selectedDate,
     anchorRef: inputRef,
     onClickOutside: function onClickOutside() {
       return setShowCalendar(false);
@@ -9062,7 +9179,8 @@ var DateField = function DateField(_ref) {
     },
     initialMonth: initialMonth,
     onMonthChange: onMonthChange,
-    weekStart: weekStart
+    weekStart: weekStart,
+    key: selectedDate ? formatDate(selectedDate, format) : ''
   }));
 };