@elliemae/ds-form 2.3.0-alpha.8 → 2.3.0-next.10

package/esm/DateInput/components/DateInputs.js

@@ -0,0 +1,397 @@
+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 = '';
+  useEffect(() => {
+    if (time) {
+      const dateValues = getDateValuesFromTime(time, format);
+      setMonth(dateValues.month);
+      setDay(dateValues.day);
+      setYear(dateValues.year);
+    }
+  }, [format, time]);
+  useEffect(() => {
+    if (!time && prevTime) {
+      setMonth('');
+      setDay('');
+      setYear('');
+      onChange('');
+    }
+
+    if (time && prevTime && time.format && time.format(format) !== prevTime.format(prevFormat)) {
+      const dateValues = getDateValuesFromTime(time, format);
+      setMonth(dateValues.month);
+      setDay(dateValues.day);
+      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]);
+  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));
+      } else if (dateValues.month !== month && isCompletedDate()) {
+        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));
+      }
+    }
+  }, [INTERNAL_V2_NO_MUTATION, day, format, isCompletedDate, month, onChange, showDay, showMonth, showYear, time, year]);
+
+  const triggerChange = () => handleCompletedDate(time, {
+    year,
+    month,
+    day
+  }, {
+    showYear,
+    showMonth,
+    showDay
+  }, INTERNAL_V2_NO_MUTATION);
+
+  const handleYearChange = e => {
+    const {
+      value
+    } = e.target;
+    const yearValue = parseTimeNumberFromText(value);
+    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 monthValue = parseTimeNumberFromText(value);
+    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 dayValue = parseTimeNumberFromText(value);
+    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);
+  }; // 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
+        }
+      })
+    };
+
+    switch (event.key) {
+      case 'ArrowLeft':
+        {
+          event.preventDefault();
+          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;
+        }
+
+      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;
+        }
+
+      case 'ArrowRight':
+        {
+          event.preventDefault();
+          focusNextInput(event.target);
+          break;
+        }
+
+      case 'Backspace':
+        {
+          event.preventDefault();
+
+          if (!value) {
+            focusPreviousInput(event.target);
+          } else {
+            // eslint-disable-next-line no-lonely-if
+            if (INTERNAL_V2_NO_MUTATION) {
+              change[name]('');
+            } else {
+              setNativeValue(event.target, '');
+            }
+          }
+
+          break;
+        }
+
+      case 'Enter':
+        {
+          if (onCustomKeyDown && isCompletedDate()) onCustomKeyDown(event, triggerChange());
+          setCurrentKey(null);
+          break;
+        }
+
+      default:
+        if (onCustomKeyDown) onCustomKeyDown(event);
+        setCurrentKey(null);
+    }
+  };
+
+  const renderMonthInput = () => {
+    if (!showMonth) return null;
+    placeholder = 'MM';
+
+    const onMonthInputBlur = e => {
+      handleMonthChange(e);
+      triggerOnBlur(e, onBlur);
+    };
+
+    return /*#__PURE__*/createElement(MonthInput, _objectSpread(_objectSpread({}, commonInputProps(digits, onKeyDown, placeholder)), {}, {
+      autocomplete: "off",
+      key: "month-input",
+      "data-testid": "month",
+      disabled: disabled,
+      name: "month",
+      onBlur: onMonthInputBlur,
+      onChange: handleMonthChange,
+      value: month
+    }));
+  };
+
+  const renderDayInput = () => {
+    if (!showDay) return null;
+    placeholder = 'DD';
+
+    const onDayInputBlur = e => {
+      handleDayChange(e);
+      triggerOnBlur(e, onBlur);
+    };
+
+    return /*#__PURE__*/createElement(DayInput, _objectSpread(_objectSpread({}, commonInputProps(digits, onKeyDown, placeholder)), {}, {
+      autocomplete: "off",
+      key: "day-input",
+      "data-testid": "day",
+      disabled: disabled,
+      name: "day",
+      onBlur: onDayInputBlur,
+      onChange: handleDayChange,
+      value: day
+    }));
+  };
+
+  const renderYearInput = () => {
+    if (!showYear) return null;
+    placeholder = 'YY';
+    digits = 4;
+
+    const onYearInputBlur = e => {
+      handleYearChange(e);
+      triggerOnBlur(e, onBlur);
+    };
+
+    return /*#__PURE__*/createElement(YearInput, _objectSpread(_objectSpread({}, commonInputProps(digits, onKeyDown, placeholder)), {}, {
+      autocomplete: "off",
+      key: "seconds-input",
+      "data-testid": "year",
+      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__*/_jsx(DateDivider, {
+      content: " / ",
+      value: input.props.value
+    }, index) : null, input]) : acc, []);
+    return [inputsWithDividers, /*#__PURE__*/React.createElement('span', {
+      key: 'span'
+    }) // hack for next/prev focus
+    ];
+  };
+
+  return /*#__PURE__*/_jsx(InputTimesGroup, {
+    innerRef: innerRef
+  }, void 0, renderDateInputs());
+};
+
+export { DateInputs as default };

package/esm/DateInput/components/utils.js

@@ -0,0 +1,205 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.some.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.some.js';
+import { parseInt, isNaN, addLeadingZeros } from '@elliemae/ds-utilities';
+import moment from 'moment';
+
+const currentYear = new Date().getFullYear();
+const isArrowIncrementDecrement = key => key === 'ArrowDown' || key === 'ArrowUp'; // TODO remove and keep `true` behavior ( PUI-4141 )
+
+const setNativeValue = (element, value) => {
+  if (!Object.getOwnPropertyDescriptor(element, 'value')) return;
+  const valueSetter = Object.getOwnPropertyDescriptor(element, 'value').set;
+  const prototype = Object.getPrototypeOf(element);
+  const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, 'value').set;
+
+  if (valueSetter && valueSetter !== prototypeValueSetter) {
+    prototypeValueSetter.call(element, value);
+  } else {
+    valueSetter.call(element, value);
+  }
+
+  element.dispatchEvent(new Event('input', {
+    bubbles: true
+  }));
+};
+
+const formatTimeNumber = (value, shouldAddLeadingZeros, leadingZeros) => {
+  if (value === null || value === undefined) return '';
+  return shouldAddLeadingZeros ? addLeadingZeros(leadingZeros)(value) : String(value);
+};
+
+const formatDay = (format, value) => {
+  const shouldAddLeadingZeros = format.indexOf('DD') > -1;
+  return formatTimeNumber(value, shouldAddLeadingZeros, 2);
+};
+const formatYear = (format, value) => {
+  const shouldAddLeadingZeros = format.indexOf('YYYY') > -1;
+  return formatTimeNumber(value, shouldAddLeadingZeros, 4);
+};
+const formatMonth = (format, value) => {
+  const shouldAddLeadingZeros = format.indexOf('MM') > -1;
+  return formatTimeNumber(value, shouldAddLeadingZeros, 2);
+};
+const parseTimeNumberFromText = stringValue => {
+  const parsedInt = parseInt(stringValue);
+  if (isNaN(parsedInt)) return null;
+  return parsedInt;
+}; // trigger onBlur for entire DateInput control if focus is not in day, month, year
+
+const triggerOnBlur = function (blurEvent) {
+  let onBlur = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => {};
+  const {
+    target: currentEl = {},
+    relatedTarget
+  } = blurEvent || {};
+  const nextElement = currentEl.nextElementSibling;
+  const {
+    nextElementSibling
+  } = nextElement || {}; // relatedTarget points to the element that is currently having focus
+
+  if (!nextElementSibling || nextElementSibling !== relatedTarget) {
+    onBlur(blurEvent);
+  }
+};
+const focusNextInput = currentEl => {
+  const nextElement = currentEl.nextElementSibling;
+
+  if (nextElement && nextElement.nextElementSibling) {
+    nextElement.nextElementSibling.focus();
+  }
+};
+const focusPreviousInput = currentEl => {
+  const previousElement = currentEl.previousElementSibling;
+
+  if (previousElement && previousElement.previousElementSibling) {
+    previousElement.previousElementSibling.focus();
+  }
+};
+const getValidTimeNumber = function (_ref, number) {
+  let {
+    min,
+    max
+  } = _ref;
+  let valueString = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+  let onError = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : () => null;
+  if (valueString === '0' || number === 0) return null;
+  if (number === undefined || number === null) return null;
+
+  if (number > max) {
+    onError();
+    return max;
+  }
+
+  if (number < min) {
+    onError();
+    return min;
+  }
+
+  return number;
+};
+const shouldFocusNextInput = function (max) {
+  let number = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  let stringValue = arguments.length > 2 ? arguments[2] : undefined;
+  if (stringValue.length > 1 && !stringValue.startsWith('0')) return true;
+  return number * 10 > max;
+};
+const getDateValuesFromTime = (time, format) => {
+  if (!time || !time.format) return {};
+  const month = time.format('MM');
+  const day = time.format('DD');
+  const year = time.format('YYYY');
+  return {
+    month: formatMonth(format, month),
+    day: formatDay(format, day),
+    year: formatYear(format, year)
+  };
+};
+const resetTimeValues = () => ({
+  month: '',
+  day: '',
+  year: ''
+});
+const onInputFocus = e => {
+  e.preventDefault();
+  e.stopPropagation();
+  e.target.select();
+};
+const getNextTimeValue = function (value, target, yearMinRange, yearMaxRange) {
+  let step = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
+  let incrementing = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : true;
+  const parsedValue = parseTimeNumberFromText(value);
+  let result = incrementing ? parsedValue + step : parsedValue - step;
+
+  if (target === 'year') {
+    if (result < yearMinRange) result = currentYear;
+    if (result > yearMaxRange) result = currentYear;
+  }
+
+  return result;
+};
+const focusNextInputIfNeeded = (currentEl, max, number, stringValue, currentKey) => {
+  if (shouldFocusNextInput(max, number, stringValue) && !isArrowIncrementDecrement(currentKey)) {
+    focusNextInput(currentEl);
+  }
+};
+const commonInputProps = function () {
+  let digits = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 2;
+  let onKeyDown = arguments.length > 1 ? arguments[1] : undefined;
+  let placeholder = arguments.length > 2 ? arguments[2] : undefined;
+  const props = {
+    pattern: '[0-9]*',
+    placeholder,
+    type: 'text',
+    onKeyDown,
+    onFocus: onInputFocus
+  };
+  if (digits === 4) props.placeholder = 'YYYY';
+  return props;
+};
+const handleCompletedDate = (time, date, show, INTERNAL_V2_NO_MUTATION) => {
+  // clone time to avoid mutation when INTERNAL_V2_NO_MUTATION is true
+  const newDate = INTERNAL_V2_NO_MUTATION ? time && moment(time) || moment() : time || moment();
+  const {
+    year,
+    month,
+    day
+  } = date;
+  const {
+    showYear,
+    showMonth,
+    showDay
+  } = show;
+  if (time && !year && !month && !day) return '';
+  newDate.value = "".concat(year, "-").concat(month, "-").concat(day);
+  if (showMonth && month) newDate.month(parseInt(month - 1, 10));
+  if (showDay && day) newDate.date(parseInt(day, 10));
+  if (showYear && year) newDate.year(parseInt(year, 10));
+  return newDate;
+};
+const isTimeCompletelySet = (date, show, range) => {
+  let neededValues = [];
+  const {
+    year,
+    month,
+    day
+  } = date;
+  if (day.length < 1 || month.length < 1) return false;
+  const {
+    showYear,
+    showMonth,
+    showDay
+  } = show;
+  const {
+    yearMinRange,
+    yearMaxRange
+  } = range;
+  if (showMonth) neededValues = [...neededValues, month || null];
+  if (showDay) neededValues = [...neededValues, day || null];
+  if (showYear) neededValues = [...neededValues, year || null];
+  const isValidYear = year < yearMaxRange && year > yearMinRange;
+  return !neededValues.some(value => !value) && isValidYear;
+};
+
+export { commonInputProps, focusNextInput, focusNextInputIfNeeded, focusPreviousInput, formatDay, formatMonth, formatYear, getDateValuesFromTime, getNextTimeValue, getValidTimeNumber, handleCompletedDate, isArrowIncrementDecrement, isTimeCompletelySet, onInputFocus, parseTimeNumberFromText, resetTimeValues, setNativeValue, shouldFocusNextInput, triggerOnBlur };

package/esm/DateInput/defaultProps.js

@@ -0,0 +1,23 @@
+const noop = () => null;
+
+const currentYear = new Date().getFullYear();
+const defaultProps = {
+  className: '',
+  style: {},
+  onFocus: noop,
+  onBlur: noop,
+  onClear: noop,
+  onChange: noop,
+  onKeyDown: noop,
+  onError: noop,
+  format: 'MM:DD:YYYY',
+  value: '',
+  clearable: true,
+  disabled: false,
+  yearMaxRange: currentYear + 100,
+  yearMinRange: currentYear - 100,
+  containerProps: {},
+  INTERNAL_V2_NO_MUTATION: false
+};
+
+export { defaultProps };

package/esm/DateInput/index.js

@@ -0,0 +1,2 @@
+export { DSDateInputWithSchema, default } from './DSDateInput.js';
+export { default as DateInputImpl } from './components/DateInputImpl.js';

package/esm/DateInput/props.js

@@ -0,0 +1,81 @@
+import { PropTypes } from 'react-desc';
+
+const props = {
+  /** props injected to date input wrapper node */
+  containerProps: PropTypes.object.description('props injected to date input wrapper node'),
+
+  /** inner ref for input wrapper */
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.any
+  })]).description('inner ref for input wrapper'),
+
+  /** class for input */
+  className: PropTypes.string.description('class for input'),
+
+  /**
+   * Set style for the date input
+   */
+  style: PropTypes.object.description('Set style for the date input'),
+
+  /**
+   * Triggers the onBlur when focus moves out of date input
+   */
+  onBlur: PropTypes.func.description('Triggers the onBlur when focus moves out of date input'),
+
+  /**
+   * Triggers the onFocus when the component gets the focus
+   */
+  onFocus: PropTypes.func.description('Triggers the onFocus when the component gets the focus'),
+
+  /**
+   * Triggers the onClear
+   */
+  onClear: PropTypes.func.description('Triggers the onClear'),
+
+  /**
+   * Triggers the onKeyDown
+   */
+  onKeyDown: PropTypes.func.description('Triggers the onKeyDown'),
+
+  /**
+   * Allows a function that is triggered once the date input changes
+   */
+  onChange: PropTypes.func.description('Allows a function that is triggered once the date input changes'),
+
+  /**
+   * Triggers the onError once one input date is wrong
+   */
+  onError: PropTypes.func.description('Triggers the onError once one input date is wrong'),
+
+  /**
+   * Format type for date input
+   */
+  format: PropTypes.string.description('Format type for date input'),
+
+  /**
+   * Default value once the component is initialized
+   */
+  value: PropTypes.string.description('Default value once the component is initialized'),
+
+  /**
+   * Whether the date input is clearable or not
+   */
+  clearable: PropTypes.bool.description('Whether the date input is clearable or not'),
+
+  /**
+   * Whether the date input is disabled or not
+   */
+  disabled: PropTypes.bool.description('Whether the date input is disabled or not'),
+
+  /**
+   * Max year that can be accepted by the date input
+   */
+  yearMaxRange: PropTypes.number.description('Max year that can be accepted by the date input'),
+
+  /**
+   * Min year that can be accepted by the date input
+   */
+  yearMinRange: PropTypes.number.description('Min year that can be accepted by the date input')
+};
+
+export { props };