@elliemae/ds-form 2.3.0-next.0 → 3.0.0-alpha.0

package/esm/DateInput/components/DateInputs.js

@@ -1,397 +0,0 @@
-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

@@ -1,205 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

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

package/esm/DateInput/props.js

@@ -1,81 +0,0 @@
-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 };