@elliemae/ds-date-time-picker 2.3.0-alpha.8 → 2.3.0-next.2

package/cjs/DSDateTimePicker.js

@@ -0,0 +1,193 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var reactDesc = require('react-desc');
+var moment = require('moment');
+var dsClassnames = require('@elliemae/ds-classnames');
+var dsDatePicker = require('@elliemae/ds-date-picker');
+var DateTimePickerImpl = require('./components/DateTimePickerImpl.js');
+var english = require('./lang/english.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
+
+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__default["default"](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 {
+  placeholder: placeholderDefault,
+  className: classNameDefault,
+  id: idDefault
+} = english;
+
+const DSDateTimePicker = _ref => {
+  let {
+    containerProps = {},
+    className = classNameDefault,
+    id = idDefault,
+    placeholder = placeholderDefault,
+    date,
+    clearable = false,
+    onBlur = () => null,
+    datePickerProps = {
+      disabled: false,
+      numberOfMonths: 1,
+      readOnly: false,
+      enableOutsideDays: false,
+      transitionDuration: 0,
+      firstDayOfWeek: 0,
+      keepOpenOnDateSelect: true,
+      hideKeyboardShortcutsPanel: true,
+      onPrevMonthClick: () => null,
+      onNextMonthClick: () => null,
+      onClose: () => null,
+      onchange: () => null,
+      onDateChange: () => null,
+      phrases: dsDatePicker.SingleDatePickerPhrases,
+      displayFormatDay: 'D',
+      isDayBlocked: () => false,
+      isOutsideRange: () => false,
+      isDayHighlighted: () => false,
+      zIndex: 11
+    },
+    timePickerProps = {
+      format: 'hh:mm A',
+      onChange: () => null,
+      disabledTimes: undefined,
+      minutesInterval: 1
+    },
+    dateInputProps = {
+      onDateInputDateChange: () => null
+    }
+  } = _ref;
+  const {
+    cssClassName
+  } = dsClassnames.convertPropToCssClassName('datetimepicker', className, {
+    id
+  });
+  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
+    className: cssClassName
+  }, containerProps), {}, {
+    children: /*#__PURE__*/_jsx__default["default"](DateTimePickerImpl, {
+      clearable: clearable,
+      date: date,
+      datePickerProps: datePickerProps,
+      onBlur: onBlur,
+      placeholder: placeholder,
+      timePickerProps: timePickerProps,
+      dateInputProps: dateInputProps
+    })
+  }));
+};
+
+const dateTimePickerProps = {
+  containerProps: reactDesc.PropTypes.object.description('Set of Properties attached to the main container'),
+  className: reactDesc.PropTypes.string.description('html class attribute'),
+  id: reactDesc.PropTypes.string.description('components id'),
+
+  /**
+   * on blur callback
+   */
+  onBlur: reactDesc.PropTypes.func.description('on blur callback'),
+
+  /**
+   * Initial date, by default current date
+   */
+  date: reactDesc.PropTypes.instanceOf(Date, moment__default["default"]).description('Initial date, by default current date'),
+
+  /**
+   * Flag to trigger onDateChange on error
+   */
+  clearable: reactDesc.PropTypes.bool.description('Flag to trigger onDateChange on error'),
+
+  /**
+   * DatePicker properties
+   */
+  datePickerProps: reactDesc.PropTypes.shape({
+    disabled: reactDesc.PropTypes.bool,
+    numberOfMonths: reactDesc.PropTypes.number,
+    readOnly: reactDesc.PropTypes.bool,
+    enableOutsideDays: reactDesc.PropTypes.bool,
+    transitionDuration: reactDesc.PropTypes.number,
+    firstDayOfWeek: reactDesc.PropTypes.number,
+    keepOpenOnDateSelect: reactDesc.PropTypes.bool,
+    hideKeyboardShortcutsPanel: reactDesc.PropTypes.bool,
+    onPrevMonthClick: reactDesc.PropTypes.func,
+    onNextMonthClick: reactDesc.PropTypes.func,
+    onClose: reactDesc.PropTypes.func,
+    onDateChange: reactDesc.PropTypes.func,
+    phrases: reactDesc.PropTypes.shape({
+      calendarLabel: reactDesc.PropTypes.string,
+      closeDatePicker: reactDesc.PropTypes.string,
+      clearDates: reactDesc.PropTypes.string,
+      focusStartDate: reactDesc.PropTypes.string,
+      jumpToPrevMonth: reactDesc.PropTypes.string,
+      jumpToNextMonth: reactDesc.PropTypes.string,
+      keyboardShortcuts: reactDesc.PropTypes.string,
+      showKeyboardShortcutsPanel: reactDesc.PropTypes.string,
+      hideKeyboardShortcutsPanel: reactDesc.PropTypes.string,
+      openThisPanel: reactDesc.PropTypes.string,
+      enterKey: reactDesc.PropTypes.string,
+      leftArrowRightArrow: reactDesc.PropTypes.string,
+      upArrowDownArrow: reactDesc.PropTypes.string,
+      pageUpPageDown: reactDesc.PropTypes.string,
+      homeEnd: reactDesc.PropTypes.string,
+      escape: reactDesc.PropTypes.string,
+      questionMark: reactDesc.PropTypes.string,
+      selectFocusedDate: reactDesc.PropTypes.string,
+      moveFocusByOneDay: reactDesc.PropTypes.string,
+      moveFocusByOneWeek: reactDesc.PropTypes.string,
+      moveFocusByOneMonth: reactDesc.PropTypes.string,
+      moveFocustoStartAndEndOfWeek: reactDesc.PropTypes.string,
+      returnFocusToInput: reactDesc.PropTypes.string,
+      keyboardNavigationInstructions: reactDesc.PropTypes.string,
+      chooseAvailableStartDate: reactDesc.PropTypes.func,
+      chooseAvailableEndDate: reactDesc.PropTypes.func,
+      dateIsUnavailable: reactDesc.PropTypes.func,
+      dateIsSelected: reactDesc.PropTypes.func,
+
+      /**
+       * ZIndex for the picker popup
+       */
+      zIndex: reactDesc.PropTypes.number
+    }),
+    displayFormatDay: reactDesc.PropTypes.string,
+    isDayBlocked: reactDesc.PropTypes.func,
+    isOutsideRange: reactDesc.PropTypes.func,
+    isDayHighlighted: reactDesc.PropTypes.func
+  }).description('DatePicker properties'),
+
+  /**
+   * Input placeholder
+   */
+  placeholder: reactDesc.PropTypes.string.description('Input placeholder'),
+
+  /**
+   * TimePicker properties
+   */
+  timePickerProps: reactDesc.PropTypes.shape({
+    format: reactDesc.PropTypes.string,
+    onChange: reactDesc.PropTypes.func
+  }).description('TimePicker properties'),
+  dateInputProps: reactDesc.PropTypes.shape({
+    onDateInputDateChange: reactDesc.PropTypes.func
+  }).description('DateInputProperties')
+};
+const DateTimePickerWithSchema = reactDesc.describe(DSDateTimePicker);
+DateTimePickerWithSchema.propTypes = dateTimePickerProps;
+
+exports.DateTimePickerWithSchema = DateTimePickerWithSchema;
+exports["default"] = DSDateTimePicker;

package/cjs/components/DateTimePickerImpl.js

@@ -0,0 +1,285 @@
+'use strict';
+
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var react = require('react');
+var moment = require('moment');
+var dsClassnames = require('@elliemae/ds-classnames');
+var dsDatePicker = require('@elliemae/ds-date-picker');
+var dsForm = require('@elliemae/ds-form');
+var dsUtilities = require('@elliemae/ds-utilities');
+var dsTimePicker = require('@elliemae/ds-time-picker');
+var utils = require('../utils.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
+
+const _excluded = ["onChange"];
+
+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__default["default"](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 = 'date-time-picker';
+const DateTimePickerWrapper = dsClassnames.aggregatedClasses('div')(blockName, 'wrapper');
+const TimePicker = dsClassnames.aggregatedClasses(dsTimePicker.DSTimePickerMenu)(blockName, 'time-picker');
+const TimePickerWrapper = dsClassnames.aggregatedClasses('div')(blockName, 'time-picker-wrapper'); // const DateInput = aggregatedClasses(DateInputsV2Impl)(blockName, 'date-input');
+
+const formatDate = 'MMDDYYYY';
+
+const DSDateTimePickerImpl = _ref => {
+  let {
+    onBlur = () => null,
+    placeholder,
+    date,
+    clearable,
+    datePickerProps: {
+      disabled = false,
+      numberOfMonths = 1,
+      readOnly = false,
+      enableOutsideDays = false,
+      transitionDuration = 0,
+      firstDayOfWeek = 0,
+      keepOpenOnDateSelect = true,
+      hideKeyboardShortcutsPanel = true,
+      onPrevMonthClick = () => null,
+      onNextMonthClick = () => null,
+      onClose = () => null,
+      onChange: onDatePickerChange = () => null,
+      onDateChange = () => null,
+      onError: onErrorDate = () => null,
+      phrases = dsDatePicker.SingleDatePickerPhrases,
+      displayFormatDay = 'D',
+      isDayBlocked = () => false,
+      isOutsideRange = () => false,
+      isDayHighlighted = () => false,
+      zIndex = 11
+    },
+    timePickerProps: {
+      format = 'hh:mm A',
+      onChange: onChangeTimePicker = () => null,
+      disabledTimes = undefined,
+      onError: onErrorTime = () => null,
+      minutesInterval = 1
+    },
+    dateInputProps: {
+      onDateInputDateChange = () => null
+    }
+  } = _ref;
+  const [selectedDate, setSelectedDate] = react.useState(undefined);
+  const [incompleteInput, setIncompleteInput] = react.useState(undefined);
+  const [isOpen, setIsOpen] = react.useState(false);
+  const disabledTimeRange = disabledTimes && {
+    from: dsTimePicker.convertTimeString(disabledTimes.from),
+    to: dsTimePicker.convertTimeString(disabledTimes.to)
+  };
+  const dateTimePickerWrapperRef = react.useRef();
+  const fullFormat = "".concat(formatDate, " ").concat(format);
+  react.useEffect(() => {
+    if (date) {
+      setSelectedDate(moment__default["default"](date));
+    } else if (date === null) setSelectedDate(undefined);
+  }, [date]);
+  const visiblePanels = react.useMemo(() => dsUtilities.getVisibleTimeByFormat(format), []);
+  const currentYear = moment__default["default"]().year();
+
+  const handleDatePickerChange = dateSelected => {
+    const splittedDate = utils.updateDateAndTime(dateSelected, selectedDate);
+
+    if (!readOnly) {
+      setSelectedDate(splittedDate);
+      onDateChange(splittedDate);
+    }
+  };
+
+  const onTimeChange = pickerTime => {
+    const splittedDate = utils.updateDateAndTime(selectedDate, pickerTime);
+    onChangeTimePicker(splittedDate);
+    setSelectedDate(splittedDate);
+  };
+
+  const handleInputChange = (inputValue, type) => {
+    onDatePickerChange(inputValue);
+    let timeBlocked = false;
+    const inputMoment = moment__default["default"](inputValue, fullFormat);
+    setIncompleteInput(inputValue);
+
+    if (type === 'date') {
+      const splittedDate = utils.updateDateAndTime(inputMoment, selectedDate);
+
+      if (inputValue.length < 8) {
+        onErrorDate({
+          message: 'date incomplete',
+          inputValue
+        });
+        if (clearable) onDateChange('error');
+        return;
+      }
+
+      if (inputValue.length === 8 && inputMoment.isValid()) {
+        setSelectedDate(splittedDate);
+        onChangeTimePicker(splittedDate);
+      }
+
+      onDateChange(splittedDate);
+      return;
+    }
+
+    if (disabledTimeRange) {
+      const hour = inputValue.hour();
+      const min = inputValue.minutes();
+      const {
+        from,
+        to
+      } = disabledTimeRange;
+
+      if (hour > from.hour && hour < to.hour || hour === to.hour && min < to.min) {
+        timeBlocked = true;
+      }
+    }
+
+    if (timeBlocked) onErrorTime({
+      message: 'time blocked',
+      inputValue
+    });
+    const dateBlocked = isDayBlocked(inputMoment);
+    if (dateBlocked) onErrorDate({
+      message: 'date blocked',
+      inputValue
+    });
+
+    if (!timeBlocked && !dateBlocked) {
+      onDateChange(inputValue);
+    }
+  };
+
+  const handleOutsideClick = event => {
+    if (!dateTimePickerWrapperRef.current.contains(event.target)) {
+      setIsOpen(false);
+    }
+  };
+
+  const handleClickEscape = () => setIsOpen(false);
+
+  const handleOpen = () => setIsOpen(true);
+
+  const handleContainerBlur = event => {
+    if (!isOpen && !event.currentTarget.contains(event.relatedTarget)) {
+      onBlur(event, selectedDate !== null && selectedDate !== void 0 && selectedDate.isValid() ? selectedDate : {
+        error: true,
+        message: 'incomplete input',
+        input: incompleteInput
+      });
+
+      if (clearable && !selectedDate && !!incompleteInput) {
+        const inputMoment = moment__default["default"](incompleteInput, fullFormat);
+        const splittedDate = utils.updateDateAndTime(inputMoment, selectedDate);
+        setSelectedDate(splittedDate);
+        onDateChange(splittedDate);
+      }
+    }
+  };
+
+  react.useEffect(() => {
+    if (!isOpen) onBlur({}, selectedDate !== null && selectedDate !== void 0 && selectedDate.isValid() ? selectedDate : {
+      error: true,
+      message: 'incomplete input',
+      input: incompleteInput
+    });
+  }, [isOpen]);
+  const hasSelectedDate = !!selectedDate;
+  return /*#__PURE__*/_jsx__default["default"](dsForm.DSInputGroup, {
+    containerProps: {
+      onBlur: handleContainerBlur
+    },
+    rightAddon: /*#__PURE__*/_jsx__default["default"](dsDatePicker.DatePickerDropdown, {
+      disabled: disabled,
+      isOpen: isOpen,
+      zIndex: zIndex,
+      menu: /*#__PURE__*/jsxRuntime.jsxs(DateTimePickerWrapper, {
+        ref: dateTimePickerWrapperRef,
+        "data-testid": "date-time-picker",
+        children: [/*#__PURE__*/_jsx__default["default"]("div", {
+          className: hasSelectedDate ? 'has-selected-date' : 'without-selected-date',
+          "data-testid": "date-time-picker-portal-wrapper"
+        }, void 0, /*#__PURE__*/_jsx__default["default"](dsDatePicker.DSDatePickerController, {
+          date: selectedDate,
+          displayFormatDay: displayFormatDay,
+          enableOutsideDays: enableOutsideDays,
+          firstDayOfWeek: firstDayOfWeek,
+          hideKeyboardShortcutsPanel: hideKeyboardShortcutsPanel,
+          isDayBlocked: isDayBlocked,
+          isDayHighlighted: isDayHighlighted,
+          isOutsideRange: isOutsideRange,
+          keepOpenOnDateSelect: keepOpenOnDateSelect,
+          numberOfMonths: numberOfMonths,
+          onClickEscape: handleClickEscape,
+          onClose: onClose,
+          onDateChange: handleDatePickerChange,
+          onNextMonthClick: onNextMonthClick,
+          onOutsideClick: event => handleOutsideClick(event),
+          onPrevMonthClick: onPrevMonthClick,
+          phrases: phrases,
+          transitionDuration: transitionDuration
+        })), /*#__PURE__*/_jsx__default["default"](TimePickerWrapper, {}, void 0, /*#__PURE__*/jsxRuntime.jsx(TimePicker, _objectSpread({
+          disabled: disabled,
+          disabledTimes: disabledTimeRange,
+          format: format,
+          hasHeader: true,
+          hasHeaderDisplay: true,
+          onTimeChange: onTimeChange,
+          showSeconds: false,
+          minutesInterval: minutesInterval,
+          time: selectedDate
+        }, visiblePanels)))]
+      }),
+      onClick: handleOpen,
+      readOnly: readOnly
+    })
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSInput, {
+    customInputType: _ref2 => {
+      let {
+        onChange: handleChange
+      } = _ref2,
+          restInputProps = _objectWithoutProperties__default["default"](_ref2, _excluded);
+
+      return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/_jsx__default["default"]("div", {
+          style: {
+            display: 'flex'
+          }
+        }, void 0, /*#__PURE__*/jsxRuntime.jsx(dsForm.DateInputsV2Impl, _objectSpread(_objectSpread({
+          disabled: disabled,
+          onChange: input => handleChange(input, 'date')
+        }, restInputProps), {}, {
+          onDateChange: onDateInputDateChange,
+          yearMaxRange: currentYear + 100,
+          yearMinRange: currentYear - 100,
+          time: restInputProps.value && restInputProps.value.hour && restInputProps.value.isValid() ? restInputProps.value.format(formatDate) : restInputProps.value
+        }))), /*#__PURE__*/jsxRuntime.jsx(dsForm.TimeInputImpl, _objectSpread({
+          disabled: disabled,
+          format: format,
+          onChange: time => handleChange(time, 'time')
+        }, restInputProps))]
+      });
+    },
+    isShowElipsisActive: false,
+    disabled: disabled,
+    onChange: handleInputChange,
+    placeholder: placeholder,
+    value: selectedDate
+  }));
+};
+
+module.exports = DSDateTimePickerImpl;

package/cjs/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DSDateTimePicker = require('./DSDateTimePicker.js');
+
+
+
+exports.DateTimePickerWithSchema = DSDateTimePicker.DateTimePickerWithSchema;
+exports["default"] = DSDateTimePicker["default"];

package/cjs/lang/english.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var english = {
+  placeholder: 'Select date and time',
+  className: '',
+  id: ''
+};
+
+module.exports = english;

package/cjs/utils.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var moment = require('moment');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
+
+const updateDateAndTime = (date, time) => {
+  const splittedDate = moment__default["default"]();
+  splittedDate.month(date === null || date === void 0 ? void 0 : date.get('month'));
+  splittedDate.year(date === null || date === void 0 ? void 0 : date.get('year'));
+  splittedDate.date(date === null || date === void 0 ? void 0 : date.get('date'));
+  splittedDate.hour(time === null || time === void 0 ? void 0 : time.get('hour'));
+  splittedDate.minute(time === null || time === void 0 ? void 0 : time.get('minute'));
+  splittedDate.second(time === null || time === void 0 ? void 0 : time.get('second'));
+  return splittedDate;
+};
+
+exports.updateDateAndTime = updateDateAndTime;