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

package/esm/TimeInput/TimeInputs.js

@@ -1,76 +1,70 @@
-import * as React from "react";
-import React2, { useEffect, useState } from "react";
-import { aggregatedClasses } from "@elliemae/ds-classnames";
-import moment from "moment";
-import {
-  commonInputProps,
-  formatHour,
-  formatMinutes,
-  formatSeconds,
-  formatMeridiem,
-  getValidTimeNumber,
-  setNativeValue,
-  parseTimeNumberFromText,
-  focusNextInput,
-  focusPreviousInput,
-  getTimeValuesFromTime,
-  isArrowIncrementDecrement,
-  shouldFocusNextInput,
-  placeholderFormat
-} from "./utils";
-import {
-  AM,
-  PM,
-  ARROW_UP,
-  ARROW_DOWN,
-  BACKSPACE,
-  ESCAPE,
-  HOME,
-  HOUR_RANGE_12,
-  HOUR_RANGE_24,
-  GENERAL_TIME_RANGE,
-  END,
-  PLACEHOLDER_TIME,
-  SHIFT
-} from "@elliemae/ds-shared/constants";
-const blockName = "input-times-group";
-const InputTimesGroup = aggregatedClasses("div")(blockName);
-const TimeInput = aggregatedClasses("input")(blockName, "input");
-const Divider = aggregatedClasses("span")(blockName, "divider", ({ value }) => ({
-  value
-}));
-const TimeDivider = ({ content = ":", value = "" }) => /* @__PURE__ */ React2.createElement(Divider, {
-  value: !!value
-}, content);
-const TimeInputs = ({
-  time,
-  format,
-  use12Hours,
-  step = 1,
-  showHours,
-  showMinutes,
-  showSeconds,
-  onChange,
-  disabled,
-  innerRef,
-  clearable,
-  "arial-label": ariaLabel,
-  "aria-label": ariaLabel2
-}) => {
-  const [meridiem, setMeridiem] = useState("");
-  const [hours, setHours] = useState("");
-  const [minutes, setMinutes] = 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.some.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.some.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
+import React, { useState, useEffect, createElement } from 'react';
+import { aggregatedClasses } from '@elliemae/ds-classnames';
+import moment from 'moment';
+import { getTimeValuesFromTime, placeholderFormat, commonInputProps, formatMeridiem, setNativeValue, focusNextInput, focusPreviousInput, parseTimeNumberFromText, getValidTimeNumber, formatSeconds, formatMinutes, formatHour, shouldFocusNextInput, isArrowIncrementDecrement } from './utils.js';
+import { AM, PLACEHOLDER_TIME, ARROW_UP, ARROW_DOWN, PM, SHIFT, BACKSPACE, GENERAL_TIME_RANGE, END, HOME, ESCAPE, HOUR_RANGE_12, HOUR_RANGE_24 } from '@elliemae/ds-shared/constants';
+
+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-times-group';
+const InputTimesGroup = aggregatedClasses('div')(blockName);
+const TimeInput = aggregatedClasses('input')(blockName, 'input');
+const Divider = aggregatedClasses('span')(blockName, 'divider', _ref => {
+  let {
+    value
+  } = _ref;
+  return {
+    value
+  };
+}); // eslint-disable-next-line react/prop-types
+
+const TimeDivider = _ref2 => {
+  let {
+    content = ':',
+    value = ''
+  } = _ref2;
+  return /*#__PURE__*/_jsx(Divider, {
+    value: !!value
+  }, void 0, content);
+};
+
+const TimeInputs = _ref3 => {
+  let {
+    time,
+    format,
+    use12Hours,
+    step = 1,
+    showHours,
+    showMinutes,
+    showSeconds,
+    onChange,
+    disabled,
+    innerRef,
+    clearable,
+    'arial-label': ariaLabel,
+    'aria-label': ariaLabel2
+  } = _ref3;
+  const [meridiem, setMeridiem] = useState('');
+  const [hours, setHours] = useState('');
+  const [minutes, setMinutes] = useState('');
   const [hasInputValue, setHasInputValue] = useState(false);
-  const [seconds, setSeconds] = useState("");
-  const [currentKey, setCurrentKey] = useState("");
+  const [seconds, setSeconds] = useState('');
+  const [currentKey, setCurrentKey] = useState('');
   const [hasInputBeenTriggered, setHasInputBeenTriggered] = useState(false);
   const [lastTypedNumber, setLastTypedNumber] = useState(null);
-  const inputRefs = {
-    hours: null,
-    minutes: null,
-    seconds: null,
-    meridiem: null
-  };
   useEffect(() => {
     if (time && moment(time).isValid()) {
       const timeValues = getTimeValuesFromTime(time, format, use12Hours);
@@ -79,131 +73,161 @@ const TimeInputs = ({
       setMinutes(timeValues.minutes);
       setSeconds(timeValues.seconds);
     } else {
-      setMeridiem("");
-      setHours("");
-      setMinutes("");
-      setSeconds("");
+      setMeridiem('');
+      setHours('');
+      setMinutes('');
+      setSeconds('');
     }
   }, [time, format, use12Hours]);
   useEffect(() => {
     const selectedTime = time || moment();
+
     if (isTimeCompletelySet() && selectedTime.hours && hasInputBeenTriggered) {
-      if (showHours && hours)
-        selectedTime.hours(hours);
-      if (showMinutes && minutes)
-        selectedTime.minutes(minutes);
-      if (showSeconds && seconds)
-        selectedTime.seconds(seconds);
+      if (showHours && hours) selectedTime.hours(hours);
+      if (showMinutes && minutes) selectedTime.minutes(minutes);
+      if (showSeconds && seconds) selectedTime.seconds(seconds);
+
       if (use12Hours && meridiem) {
         const nextHours = meridiem.toLowerCase() === AM ? hours % 12 : hours % 12 + 12;
         selectedTime.hour(nextHours);
       }
+
       onChange(selectedTime);
       setHasInputBeenTriggered(false);
     }
   }, [hours, minutes, seconds, meridiem]);
+
   const focusNextInputIfNeeded = (currentEl, max, number) => {
     if (shouldFocusNextInput(max, number, currentEl.value) && !isArrowIncrementDecrement(currentKey) && !hasInputValue) {
       focusNextInput(currentEl);
     }
   };
-  const getNextTimeValue = (value, incrementing = true) => {
+
+  const getNextTimeValue = function (value) {
+    let incrementing = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     const parsedValue = parseTimeNumberFromText(value);
     return incrementing ? parsedValue + step : parsedValue - step;
   };
-  const onInputFocus = (e) => {
+
+  const onInputFocus = e => {
     e.preventDefault();
     e.stopPropagation();
     e.target.select();
   };
-  const onClick = (e) => {
+
+  const onClick = e => {
     if (e.target.value) {
       setHasInputValue(true);
     }
-  };
+  }; // eslint-disable-next-line max-statements
+
+
   const onKeyDown = (event, max) => {
-    const { target } = event;
-    const { value } = target;
+    const {
+      target
+    } = event;
+    const {
+      value
+    } = target;
     setLastTypedNumber(event.key);
+
     switch (event.key) {
-      case ARROW_UP: {
-        event.preventDefault();
-        setCurrentKey(event.key);
-        const incrementedValue = getNextTimeValue(value);
-        setNativeValue(event.target, incrementedValue);
-        break;
-      }
-      case ARROW_DOWN: {
-        event.preventDefault();
-        setCurrentKey(event.key);
-        const decrementedValue = getNextTimeValue(value, false);
-        setNativeValue(event.target, decrementedValue);
-        break;
-      }
-      case BACKSPACE: {
-        event.preventDefault();
-        if (!value) {
-          focusPreviousInput(event.target);
-        } else {
-          setNativeValue(event.target, "");
+      case ARROW_UP:
+        {
+          event.preventDefault();
+          setCurrentKey(event.key);
+          const incrementedValue = getNextTimeValue(value);
+          setNativeValue(event.target, incrementedValue);
+          break;
         }
-        break;
-      }
-      case ESCAPE: {
-        event.preventDefault();
-        event.target.blur();
-        break;
-      }
-      case HOME: {
-        event.preventDefault();
-        setNativeValue(event.target, String(max));
-        focusNextInput(event.target);
-        break;
-      }
-      case END: {
-        event.preventDefault();
-        setNativeValue(event.target, "00");
-        focusNextInput(event.target);
-        break;
-      }
+
+      case ARROW_DOWN:
+        {
+          event.preventDefault();
+          setCurrentKey(event.key);
+          const decrementedValue = getNextTimeValue(value, false);
+          setNativeValue(event.target, decrementedValue);
+          break;
+        }
+
+      case BACKSPACE:
+        {
+          event.preventDefault();
+
+          if (!value) {
+            focusPreviousInput(event.target);
+          } else {
+            setNativeValue(event.target, '');
+          }
+
+          break;
+        }
+
+      case ESCAPE:
+        {
+          event.preventDefault();
+          event.target.blur();
+          break;
+        }
+
+      case HOME:
+        {
+          event.preventDefault();
+          setNativeValue(event.target, String(max));
+          focusNextInput(event.target);
+          break;
+        }
+
+      case END:
+        {
+          event.preventDefault();
+          setNativeValue(event.target, '00');
+          focusNextInput(event.target);
+          break;
+        }
+
       case SHIFT:
         event.preventDefault();
         setCurrentKey(event.key);
         break;
-      default:
-        break;
     }
   };
+
   const isTimeCompletelySet = () => {
     let neededValues = [];
-    if (showHours)
-      neededValues = [...neededValues, hours || null];
-    if (showMinutes)
-      neededValues = [...neededValues, minutes || null];
-    if (showSeconds)
-      neededValues = [...neededValues, seconds || null];
-    if (use12Hours)
-      neededValues = [...neededValues, meridiem || null];
-    return !neededValues.some((value) => !value);
+    if (showHours) neededValues = [...neededValues, hours || null];
+    if (showMinutes) neededValues = [...neededValues, minutes || null];
+    if (showSeconds) neededValues = [...neededValues, seconds || null];
+    if (use12Hours) neededValues = [...neededValues, meridiem || null];
+    return !neededValues.some(value => !value);
   };
-  const handleSecondsChange = (e) => {
-    const { value } = e.target;
+
+  const handleSecondsChange = e => {
+    const {
+      value
+    } = e.target;
     const secondsHandled = parseTimeNumberFromText(value);
     const nextSeconds = getValidTimeNumber(GENERAL_TIME_RANGE, secondsHandled, lastTypedNumber);
     setSeconds(formatSeconds(format, nextSeconds));
     setHasInputBeenTriggered(true);
     focusNextInputIfNeeded(e.target, GENERAL_TIME_RANGE.max, value);
   };
-  const handleMinutesChange = (e) => {
-    const { value } = e.target;
+
+  const handleMinutesChange = e => {
+    const {
+      value
+    } = e.target;
     const minutesHandled = parseTimeNumberFromText(value);
     const nextMinutes = getValidTimeNumber(GENERAL_TIME_RANGE, minutesHandled, lastTypedNumber);
     setMinutes(formatMinutes(format, nextMinutes));
     setHasInputBeenTriggered(true);
     focusNextInputIfNeeded(e.target, GENERAL_TIME_RANGE.max, value);
   };
-  const handleHoursChange = (e) => {
-    const { value } = e.target;
+
+  const handleHoursChange = e => {
+    const {
+      value
+    } = e.target;
     const hour = parseTimeNumberFromText(value);
     const hoursRange = use12Hours ? HOUR_RANGE_12 : HOUR_RANGE_24;
     const nextHour = getValidTimeNumber(hoursRange, hour, lastTypedNumber);
@@ -211,129 +235,129 @@ const TimeInputs = ({
     setHasInputBeenTriggered(true);
     focusNextInputIfNeeded(e.target, hoursRange.max, value);
   };
-  const handleMeridiemKeyDown = (e) => {
-    if (e.key === ARROW_UP || e.key === "a") {
+
+  const handleMeridiemKeyDown = e => {
+    if (e.key === ARROW_UP || e.key === 'a') {
       setMeridiem(formatMeridiem(format, AM));
-    } else if (e.key === ARROW_DOWN || e.key === "p") {
+    } else if (e.key === ARROW_DOWN || e.key === 'p') {
       setMeridiem(formatMeridiem(format, PM));
     } else if (e.key === SHIFT) {
       setCurrentKey(e.key);
     } else if (e.key === BACKSPACE) {
-      setMeridiem("");
+      setMeridiem('');
     }
+
     setHasInputBeenTriggered(true);
   };
-  const handleMeridiemBlur = (e) => {
-    const { value } = e.target;
+
+  const handleMeridiemBlur = e => {
+    const {
+      value
+    } = e.target;
+
     if (value !== AM && value !== PM) {
-      setMeridiem("");
+      setMeridiem('');
     }
   };
-  const handleOnBlur = (event) => {
+
+  const handleOnBlur = event => {
     const selectedTime = moment();
+
     if (clearable && !event.currentTarget.contains(event.relatedTarget)) {
-      if (showHours && hours)
-        selectedTime.hours(hours);
-      if (showMinutes && minutes)
-        selectedTime.minutes(minutes);
-      if (showSeconds && seconds)
-        selectedTime.seconds(seconds);
+      if (showHours && hours) selectedTime.hours(hours);
+      if (showMinutes && minutes) selectedTime.minutes(minutes);
+      if (showSeconds && seconds) selectedTime.seconds(seconds);
+
       if (use12Hours && meridiem) {
         const nextHours = meridiem.toLowerCase() === AM ? hours % 12 : hours % 12 + 12;
         selectedTime.hour(nextHours);
       }
+
       onChange(selectedTime);
     }
   };
+
   const renderSecondsInput = () => {
-    if (!showSeconds)
-      return null;
-    return /* @__PURE__ */ React2.createElement(TimeInput, {
-      ...commonInputProps((e) => onKeyDown(e, GENERAL_TIME_RANGE.max), onInputFocus, onClick),
+    if (!showSeconds) return null;
+    return /*#__PURE__*/createElement(TimeInput, _objectSpread(_objectSpread({}, commonInputProps(e => onKeyDown(e, GENERAL_TIME_RANGE.max), onInputFocus, onClick)), {}, {
       key: "seconds-input",
       "data-testid": "ds-time-input__seconds",
-      "aria-label": ariaLabel || ariaLabel2 || "Seconds Input",
-      disabled,
-      innerRef: (node) => inputRefs.seconds = node,
+      "aria-label": ariaLabel || ariaLabel2 || 'Seconds Input',
+      disabled: disabled // eslint-disable-next-line no-return-assign
+      ,
+      innerRef: node => node,
       onChange: handleSecondsChange,
       placeholder: placeholderFormat(PLACEHOLDER_TIME.seconds, format),
       value: seconds
-    });
+    }));
   };
+
   const renderMinutesInput = () => {
-    if (!showMinutes)
-      return null;
-    return /* @__PURE__ */ React2.createElement(TimeInput, {
-      ...commonInputProps((e) => onKeyDown(e, GENERAL_TIME_RANGE.max), onInputFocus, onClick),
+    if (!showMinutes) return null;
+    return /*#__PURE__*/createElement(TimeInput, _objectSpread(_objectSpread({}, commonInputProps(e => onKeyDown(e, GENERAL_TIME_RANGE.max), onInputFocus, onClick)), {}, {
       key: "minutes-input",
       "data-testid": "ds-time-input__minutes",
-      "aria-label": ariaLabel || ariaLabel2 || "Minutes Input",
-      disabled,
-      innerRef: (node) => inputRefs.minutes = node,
+      "aria-label": ariaLabel || ariaLabel2 || 'Minutes Input',
+      disabled: disabled // eslint-disable-next-line no-return-assign
+      ,
+      innerRef: node => node,
       onChange: handleMinutesChange,
       placeholder: placeholderFormat(PLACEHOLDER_TIME.minutes, format),
       value: minutes
-    });
+    }));
   };
+
   const renderHoursInput = () => {
-    if (!showHours)
-      return null;
+    if (!showHours) return null;
     const hourFormatRange = use12Hours ? HOUR_RANGE_12 : HOUR_RANGE_24;
-    return /* @__PURE__ */ React2.createElement(TimeInput, {
-      ...commonInputProps((e) => onKeyDown(e, hourFormatRange.max), onInputFocus, onClick),
+    return /*#__PURE__*/createElement(TimeInput, _objectSpread(_objectSpread({}, commonInputProps(e => onKeyDown(e, hourFormatRange.max), onInputFocus, onClick)), {}, {
       key: "hour-input",
       "data-testid": "ds-time-input__hours",
-      "aria-label": ariaLabel || ariaLabel2 || "Hours Input",
-      disabled,
-      innerRef: (node) => inputRefs.hours = node,
+      "aria-label": ariaLabel || ariaLabel2 || 'Hours Input',
+      disabled: disabled // eslint-disable-next-line no-return-assign
+      ,
+      innerRef: node => node,
       onChange: handleHoursChange,
       placeholder: placeholderFormat(PLACEHOLDER_TIME.hour, format, use12Hours),
       value: hours
-    });
+    }));
   };
+
   const renderMeridiemInput = () => {
-    if (!use12Hours)
-      return null;
-    return /* @__PURE__ */ React2.createElement(TimeInput, {
-      ...commonInputProps,
+    if (!use12Hours) return null;
+    return /*#__PURE__*/createElement(TimeInput, _objectSpread(_objectSpread({}, commonInputProps), {}, {
       key: "meridiem-input",
       "data-testid": "ds-time-input__ampm",
-      "aria-label": ariaLabel || ariaLabel2 || "Meridiem Input",
-      disabled,
+      "aria-label": ariaLabel || ariaLabel2 || 'Meridiem Input',
+      disabled: disabled,
       onBlur: handleMeridiemBlur,
       onKeyDown: handleMeridiemKeyDown,
       placeholder: placeholderFormat(PLACEHOLDER_TIME.meridiem, format),
       value: meridiem
-    });
+    }));
   };
+
   const renderTimeInputs = () => {
-    const inputs = [
-      renderHoursInput(),
-      renderMinutesInput(),
-      renderSecondsInput()
-    ];
-    const inputsWithDividers = inputs.reduce((acc, input, index) => input ? acc.concat([
-      index ? /* @__PURE__ */ React2.createElement(TimeDivider, {
-        key: index,
-        content: ":",
-        value: input.props.value
-      }) : null,
-      input
-    ]) : acc, []);
-    return [
-      inputsWithDividers,
-      React2.createElement("span", { key: "span" }),
-      renderMeridiemInput()
-    ];
+    const inputs = [renderHoursInput(), renderMinutesInput(), renderSecondsInput()];
+    /* eslint-disable indent */
+
+    const inputsWithDividers = inputs.reduce((acc, input, index) => input ? acc.concat([index ? /*#__PURE__*/_jsx(TimeDivider // eslint-disable-next-line react/no-array-index-key
+    , {
+      content: ":",
+      value: input.props.value
+    }, index) : null, input]) : acc, []);
+    /* eslint-enable indent */
+
+    return [inputsWithDividers, /*#__PURE__*/React.createElement('span', {
+      key: 'span'
+    }), // hack for next/prev focus
+    renderMeridiemInput()];
   };
-  return /* @__PURE__ */ React2.createElement(InputTimesGroup, {
+
+  return /*#__PURE__*/_jsx(InputTimesGroup, {
     onBlur: handleOnBlur,
-    innerRef
-  }, renderTimeInputs());
-};
-var TimeInputs_default = TimeInputs;
-export {
-  TimeInputs,
-  TimeInputs_default as default
+    innerRef: innerRef
+  }, void 0, renderTimeInputs());
 };
-//# sourceMappingURL=TimeInputs.js.map
+
+export { TimeInputs as default };

package/esm/TimeInput/index.js

@@ -1,3 +1,2 @@
-import * as React from "react";
-export * from "./DSTimeInput";
-//# sourceMappingURL=index.js.map
+export { DSTimeInputWithSchema, default } from './DSTimeInput.js';
+export { default as TimeInputImpl } from './TimeInputImpl.js';