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

package/esm/DateInput/components/DateInputs.js

@@ -1,62 +1,73 @@
-import * as React from "react";
-import React2, { useState, useEffect, useCallback } from "react";
-import PropTypes from "prop-types";
-import Moment from "moment";
-import { aggregatedClasses } from "@elliemae/ds-classnames";
-import { usePrevious } from "@elliemae/ds-utilities";
-import {
-  formatMonth,
-  formatDay,
-  formatYear,
-  getValidTimeNumber,
-  setNativeValue,
-  parseTimeNumberFromText,
-  focusNextInput,
-  focusPreviousInput,
-  getDateValuesFromTime,
-  getNextTimeValue,
-  focusNextInputIfNeeded,
-  commonInputProps,
-  handleCompletedDate,
-  triggerOnBlur,
-  isTimeCompletelySet
-} from "./utils";
-const blockName = "input-date-group";
-const InputTimesGroup = aggregatedClasses("div")(blockName);
-const MonthInput = aggregatedClasses("input")(blockName, "input input-month");
-const DayInput = aggregatedClasses("input")(blockName, "input input-day");
-const YearInput = aggregatedClasses("input")(blockName, "input input-year");
-const Divider = aggregatedClasses("span")(blockName, "divider", ({ value }) => ({
-  value
-}));
-const DateDivider = ({ content = ":", value = "" }) => /* @__PURE__ */ React2.createElement(Divider, {
-  value: !!value
-}, content);
-const DateInputs = ({
-  innerRef,
-  onBlur,
-  onChange,
-  onCustomKeyDown,
-  onError,
-  format = "",
-  showMonth = true,
-  showDay = true,
-  showYear = true,
-  step = 1,
-  yearMaxRange,
-  disabled,
-  yearMinRange,
-  time,
-  INTERNAL_V2_NO_MUTATION
-}) => {
-  const [currentKey, setCurrentKey] = useState("ArrowUp");
-  const [month, setMonth] = useState("");
-  const [day, setDay] = useState("");
-  const [year, setYear] = useState("");
+import 'core-js/modules/esnext.async-iterator.filter.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 _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
+import React, { useState, useEffect, useCallback, createElement } from 'react';
+import { aggregatedClasses } from '@elliemae/ds-classnames';
+import { usePrevious } from '@elliemae/ds-utilities';
+import { getDateValuesFromTime, isTimeCompletelySet, handleCompletedDate, commonInputProps, focusPreviousInput, setNativeValue, focusNextInput, getNextTimeValue, parseTimeNumberFromText, getValidTimeNumber, formatYear, focusNextInputIfNeeded, formatMonth, formatDay, triggerOnBlur } from './utils.js';
+
+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 blockName = 'input-date-group';
+const InputTimesGroup = aggregatedClasses('div')(blockName);
+const MonthInput = aggregatedClasses('input')(blockName, 'input input-month');
+const DayInput = aggregatedClasses('input')(blockName, 'input input-day');
+const YearInput = aggregatedClasses('input')(blockName, 'input input-year');
+const Divider = aggregatedClasses('span')(blockName, 'divider', _ref => {
+  let {
+    value
+  } = _ref;
+  return {
+    value
+  };
+}); // eslint-disable-next-line react/prop-types
+
+const DateDivider = _ref2 => {
+  let {
+    content = ':',
+    value = ''
+  } = _ref2;
+  return /*#__PURE__*/_jsx(Divider, {
+    value: !!value
+  }, void 0, content);
+};
+
+const DateInputs = _ref3 => {
+  let {
+    innerRef,
+    onBlur,
+    onChange,
+    onCustomKeyDown,
+    onError,
+    format = '',
+    showMonth = true,
+    showDay = true,
+    showYear = true,
+    step = 1,
+    yearMaxRange,
+    disabled,
+    yearMinRange,
+    time,
+    // TODO remove and keep `true` behavior ( PUI-4141 )
+    INTERNAL_V2_NO_MUTATION // eslint-disable-line react/prop-types
+
+  } = _ref3;
+  const [currentKey, setCurrentKey] = useState('ArrowUp');
+  const [month, setMonth] = useState('');
+  const [day, setDay] = useState('');
+  const [year, setYear] = useState('');
   const prevTime = usePrevious(time);
   const prevFormat = usePrevious(format);
   let digits = 2;
-  let placeholder = "";
+  let placeholder = '';
   useEffect(() => {
     if (time) {
       const dateValues = getDateValuesFromTime(time, format);
@@ -67,11 +78,12 @@ const DateInputs = ({
   }, [format, time]);
   useEffect(() => {
     if (!time && prevTime) {
-      setMonth("");
-      setDay("");
-      setYear("");
-      onChange("");
+      setMonth('');
+      setDay('');
+      setYear('');
+      onChange('');
     }
+
     if (time && prevTime && time.format && time.format(format) !== prevTime.format(prevFormat)) {
       const dateValues = getDateValuesFromTime(time, format);
       setMonth(dateValues.month);
@@ -79,231 +91,307 @@ const DateInputs = ({
       setYear(dateValues.year);
     }
   }, [time, prevTime, format, prevFormat, onChange]);
-  const isCompletedDate = useCallback(() => isTimeCompletelySet({ year, month, day }, { showYear, showMonth, showDay }, { yearMinRange, yearMaxRange }), [day, month, showDay, showMonth, showYear, year, yearMaxRange, yearMinRange]);
+  const isCompletedDate = useCallback(() => isTimeCompletelySet({
+    year,
+    month,
+    day
+  }, {
+    showYear,
+    showMonth,
+    showDay
+  }, {
+    yearMinRange,
+    yearMaxRange
+  }), [day, month, showDay, showMonth, showYear, year, yearMaxRange, yearMinRange]);
   useEffect(() => {
     if (INTERNAL_V2_NO_MUTATION) {
       const dateValues = getDateValuesFromTime(time, format);
+
       if (dateValues.day !== day && isCompletedDate()) {
-        onChange(handleCompletedDate(time, { year, month, day }, { showYear, showMonth, showDay }, INTERNAL_V2_NO_MUTATION));
+        onChange(handleCompletedDate(time, {
+          year,
+          month,
+          day
+        }, {
+          showYear,
+          showMonth,
+          showDay
+        }, INTERNAL_V2_NO_MUTATION));
       } else if (dateValues.month !== month && isCompletedDate()) {
-        onChange(handleCompletedDate(time, { year, month, day }, { showYear, showMonth, showDay }, INTERNAL_V2_NO_MUTATION));
+        onChange(handleCompletedDate(time, {
+          year,
+          month,
+          day
+        }, {
+          showYear,
+          showMonth,
+          showDay
+        }, INTERNAL_V2_NO_MUTATION));
       } else if (dateValues.year !== year && isCompletedDate()) {
-        onChange(handleCompletedDate(time, { year, month, day }, { showYear, showMonth, showDay }, INTERNAL_V2_NO_MUTATION));
+        onChange(handleCompletedDate(time, {
+          year,
+          month,
+          day
+        }, {
+          showYear,
+          showMonth,
+          showDay
+        }, INTERNAL_V2_NO_MUTATION));
       }
     }
-  }, [
-    INTERNAL_V2_NO_MUTATION,
-    day,
-    format,
-    isCompletedDate,
+  }, [INTERNAL_V2_NO_MUTATION, day, format, isCompletedDate, month, onChange, showDay, showMonth, showYear, time, year]);
+
+  const triggerChange = () => handleCompletedDate(time, {
+    year,
     month,
-    onChange,
-    showDay,
-    showMonth,
+    day
+  }, {
     showYear,
-    time,
-    year
-  ]);
-  const triggerChange = () => handleCompletedDate(time, { year, month, day }, { showYear, showMonth, showDay }, INTERNAL_V2_NO_MUTATION);
-  const handleYearChange = (e) => {
-    const { value } = e.target;
+    showMonth,
+    showDay
+  }, INTERNAL_V2_NO_MUTATION);
+
+  const handleYearChange = e => {
+    const {
+      value
+    } = e.target;
     const yearValue = parseTimeNumberFromText(value);
-    const yearRange = { min: 1, max: 9999 };
+    const yearRange = {
+      min: 1,
+      max: 9999
+    };
     const nextYear = getValidTimeNumber(yearRange, yearValue, value, onError);
     setYear(formatYear(format, nextYear));
+
     if (isCompletedDate() && !INTERNAL_V2_NO_MUTATION) {
       onChange(triggerChange());
     }
+
     focusNextInputIfNeeded(e.target, yearRange.max, nextYear, value, currentKey);
   };
-  const handleMonthChange = (e) => {
-    const { value } = e.target;
+
+  const handleMonthChange = e => {
+    const {
+      value
+    } = e.target;
     const monthValue = parseTimeNumberFromText(value);
-    const monthRange = { min: 1, max: 12 };
+    const monthRange = {
+      min: 1,
+      max: 12
+    };
     const nextMonth = getValidTimeNumber(monthRange, monthValue, value, onError);
     setMonth(formatMonth(format, nextMonth));
+
     if (isCompletedDate() && !INTERNAL_V2_NO_MUTATION) {
       onChange(triggerChange());
     }
+
     focusNextInputIfNeeded(e.target, monthRange.max, nextMonth, value, currentKey);
   };
-  const handleDayChange = (e) => {
-    const { value } = e.target;
+
+  const handleDayChange = e => {
+    const {
+      value
+    } = e.target;
     const dayValue = parseTimeNumberFromText(value);
-    const dayRange = { min: 1, max: 31 };
+    const dayRange = {
+      min: 1,
+      max: 31
+    };
     const nextDay = getValidTimeNumber(dayRange, dayValue, value, onError);
     setDay(formatDay(format, nextDay));
+
     if (isCompletedDate() && !INTERNAL_V2_NO_MUTATION) {
       onChange(triggerChange());
     }
-    if (value !== day)
-      focusNextInputIfNeeded(e.target, dayRange.max, nextDay, value, currentKey);
-  };
-  const onKeyDown = (event, shouldIncrementDecrement = true) => {
-    const { value, name } = event.target;
+
+    if (value !== day) focusNextInputIfNeeded(e.target, dayRange.max, nextDay, value, currentKey);
+  }; // eslint-disable-next-line complexity
+
+
+  const onKeyDown = function (event) {
+    let shouldIncrementDecrement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    const {
+      value,
+      name
+    } = event.target;
     const change = {
-      day: (v) => handleDayChange({ target: { value: v } }),
-      month: (v) => handleMonthChange({ target: { value: v } }),
-      year: (v) => handleYearChange({ target: { value: v } })
+      day: v => handleDayChange({
+        target: {
+          value: v
+        }
+      }),
+      month: v => handleMonthChange({
+        target: {
+          value: v
+        }
+      }),
+      year: v => handleYearChange({
+        target: {
+          value: v
+        }
+      })
     };
+
     switch (event.key) {
-      case "ArrowLeft": {
-        event.preventDefault();
-        focusPreviousInput(event.target);
-        break;
-      }
-      case "ArrowUp": {
-        if (shouldIncrementDecrement) {
+      case 'ArrowLeft':
+        {
           event.preventDefault();
-          setCurrentKey(event.key);
-          const incrementedValue = getNextTimeValue(value, name, yearMinRange, yearMaxRange, step, true);
-          if (INTERNAL_V2_NO_MUTATION) {
-            change[name](incrementedValue);
-          } else {
-            setNativeValue(event.target, incrementedValue);
+          focusPreviousInput(event.target);
+          break;
+        }
+
+      case 'ArrowUp':
+        {
+          if (shouldIncrementDecrement) {
+            event.preventDefault();
+            setCurrentKey(event.key);
+            const incrementedValue = getNextTimeValue(value, name, yearMinRange, yearMaxRange, step, true);
+
+            if (INTERNAL_V2_NO_MUTATION) {
+              change[name](incrementedValue);
+            } else {
+              setNativeValue(event.target, incrementedValue);
+            }
           }
+
+          break;
         }
-        break;
-      }
-      case "ArrowDown": {
-        if (shouldIncrementDecrement) {
-          event.preventDefault();
-          setCurrentKey(event.key);
-          const decrementedValue = getNextTimeValue(value, name, yearMinRange, yearMaxRange, step, false);
-          if (INTERNAL_V2_NO_MUTATION) {
-            change[name](decrementedValue);
-          } else {
-            setNativeValue(event.target, decrementedValue);
+
+      case 'ArrowDown':
+        {
+          if (shouldIncrementDecrement) {
+            event.preventDefault();
+            setCurrentKey(event.key);
+            const decrementedValue = getNextTimeValue(value, name, yearMinRange, yearMaxRange, step, false);
+
+            if (INTERNAL_V2_NO_MUTATION) {
+              change[name](decrementedValue);
+            } else {
+              setNativeValue(event.target, decrementedValue);
+            }
           }
+
+          break;
         }
-        break;
-      }
-      case "ArrowRight": {
-        event.preventDefault();
-        focusNextInput(event.target);
-        break;
-      }
-      case "Backspace": {
-        event.preventDefault();
-        if (!value) {
-          focusPreviousInput(event.target);
-        } else {
-          if (INTERNAL_V2_NO_MUTATION) {
-            change[name]("");
+
+      case 'ArrowRight':
+        {
+          event.preventDefault();
+          focusNextInput(event.target);
+          break;
+        }
+
+      case 'Backspace':
+        {
+          event.preventDefault();
+
+          if (!value) {
+            focusPreviousInput(event.target);
           } else {
-            setNativeValue(event.target, "");
+            // eslint-disable-next-line no-lonely-if
+            if (INTERNAL_V2_NO_MUTATION) {
+              change[name]('');
+            } else {
+              setNativeValue(event.target, '');
+            }
           }
+
+          break;
         }
-        break;
-      }
-      case "Enter": {
-        if (onCustomKeyDown && isCompletedDate())
-          onCustomKeyDown(event, triggerChange());
-        setCurrentKey(null);
-        break;
-      }
+
+      case 'Enter':
+        {
+          if (onCustomKeyDown && isCompletedDate()) onCustomKeyDown(event, triggerChange());
+          setCurrentKey(null);
+          break;
+        }
+
       default:
-        if (onCustomKeyDown)
-          onCustomKeyDown(event);
+        if (onCustomKeyDown) onCustomKeyDown(event);
         setCurrentKey(null);
     }
   };
+
   const renderMonthInput = () => {
-    if (!showMonth)
-      return null;
-    placeholder = "MM";
-    const onMonthInputBlur = (e) => {
+    if (!showMonth) return null;
+    placeholder = 'MM';
+
+    const onMonthInputBlur = e => {
       handleMonthChange(e);
       triggerOnBlur(e, onBlur);
     };
-    return /* @__PURE__ */ React2.createElement(MonthInput, {
-      ...commonInputProps(digits, onKeyDown, placeholder),
+
+    return /*#__PURE__*/createElement(MonthInput, _objectSpread(_objectSpread({}, commonInputProps(digits, onKeyDown, placeholder)), {}, {
       autocomplete: "off",
       key: "month-input",
       "data-testid": "month",
-      disabled,
+      disabled: disabled,
       name: "month",
       onBlur: onMonthInputBlur,
       onChange: handleMonthChange,
       value: month
-    });
+    }));
   };
+
   const renderDayInput = () => {
-    if (!showDay)
-      return null;
-    placeholder = "DD";
-    const onDayInputBlur = (e) => {
+    if (!showDay) return null;
+    placeholder = 'DD';
+
+    const onDayInputBlur = e => {
       handleDayChange(e);
       triggerOnBlur(e, onBlur);
     };
-    return /* @__PURE__ */ React2.createElement(DayInput, {
-      ...commonInputProps(digits, onKeyDown, placeholder),
+
+    return /*#__PURE__*/createElement(DayInput, _objectSpread(_objectSpread({}, commonInputProps(digits, onKeyDown, placeholder)), {}, {
       autocomplete: "off",
       key: "day-input",
       "data-testid": "day",
-      disabled,
+      disabled: disabled,
       name: "day",
       onBlur: onDayInputBlur,
       onChange: handleDayChange,
       value: day
-    });
+    }));
   };
+
   const renderYearInput = () => {
-    if (!showYear)
-      return null;
-    placeholder = "YY";
+    if (!showYear) return null;
+    placeholder = 'YY';
     digits = 4;
-    const onYearInputBlur = (e) => {
+
+    const onYearInputBlur = e => {
       handleYearChange(e);
       triggerOnBlur(e, onBlur);
     };
-    return /* @__PURE__ */ React2.createElement(YearInput, {
-      ...commonInputProps(digits, onKeyDown, placeholder),
+
+    return /*#__PURE__*/createElement(YearInput, _objectSpread(_objectSpread({}, commonInputProps(digits, onKeyDown, placeholder)), {}, {
       autocomplete: "off",
       key: "seconds-input",
       "data-testid": "year",
-      disabled,
+      disabled: disabled,
       name: "year",
       onBlur: onYearInputBlur,
       onChange: handleYearChange,
       value: year
-    });
+    }));
   };
+
   const renderDateInputs = () => {
     const inputs = [renderMonthInput(), renderDayInput(), renderYearInput()];
-    const inputsWithDividers = inputs.reduce((acc, input, index) => input ? acc.concat([index ? /* @__PURE__ */ React2.createElement(DateDivider, {
-      key: index,
+    const inputsWithDividers = inputs.reduce((acc, input, index) => input ? acc.concat([index ? /*#__PURE__*/_jsx(DateDivider, {
       content: " / ",
       value: input.props.value
-    }) : null, input]) : acc, []);
-    return [
-      inputsWithDividers,
-      React2.createElement("span", { key: "span" })
+    }, index) : null, input]) : acc, []);
+    return [inputsWithDividers, /*#__PURE__*/React.createElement('span', {
+      key: 'span'
+    }) // hack for next/prev focus
     ];
   };
-  return /* @__PURE__ */ React2.createElement(InputTimesGroup, {
-    innerRef
-  }, renderDateInputs());
-};
-DateInputs.propTypes = {
-  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),
-  onBlur: PropTypes.bool,
-  onChange: PropTypes.func,
-  onCustomKeyDown: PropTypes.func,
-  onError: PropTypes.func,
-  format: PropTypes.string,
-  showMonth: PropTypes.bool,
-  showDay: PropTypes.bool,
-  showYear: PropTypes.bool,
-  step: PropTypes.number,
-  yearMaxRange: PropTypes.number,
-  disabled: PropTypes.bool,
-  yearMinRange: PropTypes.number,
-  time: PropTypes.instanceOf(Moment)
-};
-var DateInputs_default = DateInputs;
-export {
-  DateInputs,
-  DateInputs_default as default
+
+  return /*#__PURE__*/_jsx(InputTimesGroup, {
+    innerRef: innerRef
+  }, void 0, renderDateInputs());
 };
-//# sourceMappingURL=DateInputs.js.map
+
+export { DateInputs as default };