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

package/cjs/options/endTypesOptions.js

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const endTypes = {
+  NEVER: 'never',
+  ON: 'on',
+  AFTER: 'after'
+};
+const endTypesOptions = [{
+  label: 'Never',
+  value: endTypes.NEVER
+}, {
+  label: 'On',
+  value: endTypes.ON
+}, {
+  label: 'After',
+  value: endTypes.AFTER
+}];
+const endTimesOptions = [{
+  label: '1 Time',
+  value: 1
+}, {
+  label: '2 Times',
+  value: 2
+}, {
+  label: '3 Times',
+  value: 3
+}, {
+  label: '6 Times',
+  value: 6
+}, {
+  label: '12 Times',
+  value: 12
+}];
+
+exports.endTimesOptions = endTimesOptions;
+exports.endTypes = endTypes;
+exports.endTypesOptions = endTypesOptions;

package/esm/DSDateTimeRecurrenceSelector.js

@@ -0,0 +1,185 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { PropTypes, describe } from 'react-desc';
+import DateTimeRecurenceSelectorImpl from './components/DateTimeRecurenceSelectorImpl.js';
+import { dropdownPreselectedOptions } from './options/dropdownPreselectedOptions.js';
+export { dropdownPreselectedOptions } from './options/dropdownPreselectedOptions.js';
+import { dropdownRepeatOptions } from './options/dropdownRepeatOptions.js';
+export { DropdownRepeatOptionsTypes, dropdownRepeatOptions } from './options/dropdownRepeatOptions.js';
+import { dropdownDayOfWeekOptions } from './options/dropdownDayOfWeekOptions.js';
+export { dropdownDayOfWeekOptions } from './options/dropdownDayOfWeekOptions.js';
+import { dropdownDayOfMonthOptions } from './options/dropdownDayOfMonthOptions.js';
+export { dropdownDayOfMonthOptions } from './options/dropdownDayOfMonthOptions.js';
+import { dropdownDayOfYearOptions } from './options/dropdownDayOfYearOptions.js';
+export { dropdownDayOfYearOptions } from './options/dropdownDayOfYearOptions.js';
+import { endTypesOptions, endTimesOptions } from './options/endTypesOptions.js';
+export { endTimesOptions, endTypes, endTypesOptions } from './options/endTypesOptions.js';
+import CustomOptionRender from './components/CustomOptionRender/CustomOptionRender.js';
+import { dropdownTimeZoneOptions } from './options/dropdownTimeZoneOptions.js';
+export { DropdownTimeZoneTypes, dropdownTimeZoneOptions } from './options/dropdownTimeZoneOptions.js';
+
+const DSDateTimeRecurrenceSelector = _ref => {
+  let {
+    containerProps = {},
+    className = '',
+    preselectedOptions = dropdownPreselectedOptions,
+    repeatOptions = dropdownRepeatOptions,
+    endTypesOptions: endTypesOptions$1 = endTypesOptions,
+    endTimesOptions: endTimesOptions$1 = endTimesOptions,
+    dayOfWeekOptions = dropdownDayOfWeekOptions,
+    dayOfWeekOptionsEnable = true,
+    dayOfMonthOptions = dropdownDayOfMonthOptions,
+    dayOfMonthOptionsEnable = true,
+    dayOfYearOptions = dropdownDayOfYearOptions,
+    dayOfYearOptionsEnable = true,
+    displayMonthCustomOption = false,
+    displayYearCustomOption = false,
+    dayOfMonthAsCurrentDateOptions = ['numberOfMonth', 'dayOfTheWeekOfMonth'],
+    dayOfYearAsCurrentDateOptions = ['numberOfYear', 'dayOfTheMonthOfYear'],
+    onChange = () => null,
+    placeholder = 'Select Range',
+    modalSize = 'medium',
+    modalTitle = 'Report Scheduling',
+    confirmLabel = 'Apply',
+    rejectLabel = 'Cancel',
+    modalType = 'confirm',
+    onConfirmField = () => null,
+    onRejectField = () => null,
+    openModal = false,
+    appElement = '#root',
+    value = null,
+    customRange = null,
+    customOptionRender = CustomOptionRender,
+    displayCurrentMonthYear = true,
+    timeZoneOptions = dropdownTimeZoneOptions,
+    useTimezoneSelector = false,
+    allowMultipleDaysOfWeek = false,
+    advanceOption = {
+      label: 'Custom',
+      value: 'custom-range',
+      isAdvance: true
+    },
+    isValidRecurrence = () => true,
+    validationMessage = '',
+    endDayBlocked = () => false,
+    startDayBlocked = () => false,
+    repeatFrecuencyCustomProps = {}
+  } = _ref;
+  return /*#__PURE__*/_jsx(DateTimeRecurenceSelectorImpl, {
+    advanceOption: advanceOption,
+    allowMultipleDaysOfWeek: allowMultipleDaysOfWeek,
+    appElement: appElement,
+    className: className,
+    confirmLabel: confirmLabel,
+    containerProps: containerProps,
+    customOptionRender: customOptionRender,
+    customRange: customRange,
+    dayOfMonthAsCurrentDateOptions: dayOfMonthAsCurrentDateOptions,
+    dayOfMonthOptionsEnable: dayOfMonthOptionsEnable,
+    dayOfWeekOptionsEnable: dayOfWeekOptionsEnable,
+    dayOfYearAsCurrentDateOptions: dayOfYearAsCurrentDateOptions,
+    dayOfYearOptionsEnable: dayOfYearOptionsEnable,
+    displayCurrentMonthYear: displayCurrentMonthYear,
+    displayMonthCustomOption: displayMonthCustomOption,
+    displayYearCustomOption: displayYearCustomOption,
+    dropdownDayOfMonthOptions: dayOfMonthOptions,
+    dropdownDayOfWeekOptions: dayOfWeekOptions,
+    dropdownDayOfYearOptions: dayOfYearOptions,
+    dropdownPreselectedOptions: preselectedOptions,
+    dropdownRepeatOptions: repeatOptions,
+    endDayBlocked: endDayBlocked,
+    endTimesOptions: endTimesOptions$1,
+    endTypesOptions: endTypesOptions$1,
+    isValidRecurrence: isValidRecurrence,
+    modalSize: modalSize,
+    modalTitle: modalTitle,
+    modalType: modalType,
+    onChange: onChange,
+    onConfirmField: onConfirmField,
+    onRejectField: onRejectField,
+    openModal: openModal,
+    placeholder: placeholder,
+    rejectLabel: rejectLabel,
+    repeatFrecuencyCustomProps: repeatFrecuencyCustomProps,
+    startDayBlocked: startDayBlocked,
+    timeZoneOptions: timeZoneOptions,
+    useTimezoneSelector: useTimezoneSelector,
+    validationMessage: validationMessage,
+    value: value
+  });
+};
+const dateTimeRecurrenceSelectorProps = {
+  containerProps: PropTypes.shape({}).description('Set of Properties attached to the main container'),
+  className: PropTypes.string.description('html class attribute'),
+  preselectedOptions: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string,
+    value: PropTypes.string
+  })).description('pre selected options'),
+  repeatOptions: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string,
+    value: PropTypes.string
+  })).description('repeat options'),
+  endTypesOptions: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string,
+    value: PropTypes.oneOf([endTypesOptions.NEVER, endTypesOptions.ON, endTypesOptions.AFTER])
+  })).description('end types options'),
+  endTimesOptions: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string,
+    value: PropTypes.string
+  })).description('end time options'),
+  dayOfWeekOptions: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string,
+    value: PropTypes.string
+  })).defaultValue('day of week options'),
+  dayOfWeekOptionsEnable: PropTypes.bool.description('whether to enable day of week options or not').defaultValue(true),
+  dayOfMonthOptions: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string,
+    value: PropTypes.string
+  })).description('day of month options'),
+  dayOfMonthOptionsEnable: PropTypes.bool.description('whether to enable day of month options or not').defaultValue(true),
+  dayOfYearOptions: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string,
+    value: PropTypes.string
+  })).description('day of year options'),
+  dayOfYearOptionsEnable: PropTypes.bool.description('whether to enable day of month options or not').defaultValue(true),
+  displayMonthCustomOption: PropTypes.bool.description('whether to display month custom options or not').defaultValue(false),
+  displayYearCustomOption: PropTypes.bool.description('whether to display year custom options or not').defaultValue(false),
+  dayOfMonthAsCurrentDateOptions: PropTypes.oneOf(['numberOfMonth', 'dayOfTheWeekOfMonth']).description('day of month as current date options').defaultValue(['numberOfMonth', 'dayOfTheWeekOfMonth']),
+  dayOfYearAsCurrentDateOptions: PropTypes.oneOf(['numberOfYear', 'dayOfTheMonthOfYear']).description('day of year as current date options').defaultValue(['numberOfYear', 'dayOfTheMonthOfYear']),
+  onChange: PropTypes.func.description('function called on change'),
+  placeholder: PropTypes.string.description('placeholder value').defaultValue('Select Range'),
+  modalSize: PropTypes.oneOf(['medium', 'small', 'large']).description('Size of the modal').defaultValue('medium'),
+  modalTitle: PropTypes.string.description('title of the modal').defaultValue('Report Scheduling'),
+  confirmLabel: PropTypes.string.description('label of confirm button').defaultValue('Apply'),
+  rejectLabel: PropTypes.string.description('Label of reject button').defaultValue('Cancel'),
+  modalType: PropTypes.oneOf(['confirm', 'alert']).description('type of modal').defaultValue('confirm'),
+  onConfirmField: PropTypes.func.description('function called on confirm'),
+  onRejectField: PropTypes.func.description('function called on reject'),
+  openModal: PropTypes.bool.description('modal open or closed'),
+  appElement: PropTypes.string.description('app element'),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('value'),
+  customRange: PropTypes.object.description('custom range'),
+  customOptionRender: PropTypes.element.description('custom renderer of options').defaultValue(CustomOptionRender),
+  displayCurrentMonthYear: PropTypes.bool.description('display current month year or not').defaultValue(true),
+  timeZoneOptions: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string,
+    value: PropTypes.string
+  })).description('time zone dropdown options'),
+  useTimezoneSelector: PropTypes.bool.description('use time zone selector or not').defaultValue(false),
+  allowMultipleDaysOfWeek: PropTypes.bool.description('allow multiple days of week or not').defaultValue(false),
+  advanceOption: PropTypes.shape({
+    label: PropTypes.string,
+    value: PropTypes.string,
+    isAdvance: true // true is required
+
+  }).description('advanced options'),
+  isValidRecurrence: PropTypes.func.description('is valid recurrence range or nor'),
+  validationMessage: PropTypes.oneOfType([PropTypes.element, PropTypes.string]).description('validation messagge'),
+  endDayBlocked: PropTypes.func.description('block end date'),
+  startDayBlocked: PropTypes.func.description('block start date'),
+  repeatFrecuencyCustomProps: PropTypes.shape({}).description('repeat frecuency custom props')
+};
+const DateTimeRecurenceSelectorWithSchema = describe(DSDateTimeRecurrenceSelector);
+DateTimeRecurenceSelectorWithSchema.propTypes = dateTimeRecurrenceSelectorProps;
+
+export { DSDateTimeRecurrenceSelector, DateTimeRecurenceSelectorWithSchema, DSDateTimeRecurrenceSelector as default };

package/esm/__test__/DSDateTimeRecurrenceSelector.test.js

@@ -0,0 +1,24 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { render, waitFor } from '@testing-library/react';
+import { DSDateTimeRecurrenceSelector } from '../DSDateTimeRecurrenceSelector.js';
+
+var _DSDateTimeRecurrence;
+describe('DSDateTimeRecurrenceSelector', () => {
+  const root = document.createElement('div');
+  root.setAttribute('id', 'root');
+  document.body.appendChild(root);
+  const portalRoot = document.createElement('div');
+  portalRoot.setAttribute('id', 'portal-root');
+  document.body.appendChild(portalRoot);
+  test('open modal', async () => {
+    const {
+      getByText
+    } = render(_DSDateTimeRecurrence || (_DSDateTimeRecurrence = /*#__PURE__*/_jsx(DSDateTimeRecurrenceSelector, {
+      openModal: true
+    })));
+    await waitFor(() => getByText('Starts'));
+    expect(getByText('Starts')).toBeInTheDocument();
+  });
+});

package/esm/components/AlertModal/DateTimeRangeModal.js

@@ -0,0 +1,60 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import DSModal from '@elliemae/ds-modal';
+import DateTimePredefinedRangeSelectorImpl from '../DateTimeRangeModalImpl/DateTimeRangeModalImpl.js';
+
+const DateTimeRangeModal = _ref => {
+  let {
+    isOpen = false,
+    onClose = () => null,
+    modalTitle = 'Report Scheduling',
+    modalSize = 'medium ',
+    confirmLabel = 'Apply',
+    rejectLabel = 'Cancel',
+    modalType = 'confirm',
+    onConfirmField = () => null,
+    onRejectField = () => null,
+    appElement = null,
+    onCustomDateTimeRange = () => null,
+    displayCurrentMonthYear = true,
+    dropdownDayOfMonthOptions = [],
+    dropdownDayOfWeekOptions = [],
+    dropdownDayOfYearOptions = [],
+    dropdownRepeatOptions = [],
+    rangeValue = {},
+    dayOfMonthOptionsEnable = true,
+    dayOfWeekOptionsEnable = true,
+    dayOfYearOptionsEnable = true,
+    timeZoneOptions = [],
+    useTimezoneSelector = false,
+    allowMultipleDaysOfWeek = false
+  } = _ref;
+  return /*#__PURE__*/_jsx(DSModal, {
+    appElement: appElement,
+    confirmLabel: confirmLabel,
+    isOpen: isOpen,
+    modalTitle: modalTitle,
+    modalType: modalType,
+    onClose: onClose,
+    onConfirm: onConfirmField,
+    onReject: onRejectField,
+    rejectLabel: rejectLabel,
+    size: modalSize
+  }, void 0, /*#__PURE__*/_jsx(DateTimePredefinedRangeSelectorImpl, {
+    allowMultipleDaysOfWeek: allowMultipleDaysOfWeek,
+    dayOfMonthOptionsEnable: dayOfMonthOptionsEnable,
+    dayOfWeekOptionsEnable: dayOfWeekOptionsEnable,
+    dayOfYearOptionsEnable: dayOfYearOptionsEnable,
+    displayCurrentMonthYear: displayCurrentMonthYear,
+    dropdownDayOfMonthOptions: dropdownDayOfMonthOptions,
+    dropdownDayOfWeekOptions: dropdownDayOfWeekOptions,
+    dropdownDayOfYearOptions: dropdownDayOfYearOptions,
+    dropdownRepeatOptions: dropdownRepeatOptions,
+    onCustomDateTimeRange: onCustomDateTimeRange,
+    rangeValue: rangeValue,
+    timeZoneOptions: timeZoneOptions,
+    useTimezoneSelector: useTimezoneSelector
+  }));
+};
+
+export { DateTimeRangeModal as default };

package/esm/components/CustomOptionRender/CustomOptionRender.js

@@ -0,0 +1,87 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { DropdownRepeatOptionsTypes } from '../../options/dropdownRepeatOptions.js';
+import { endTypes } from '../../options/endTypesOptions.js';
+
+const typeRepeat = {
+  [DropdownRepeatOptionsTypes.DAY]: 'Daily',
+  [DropdownRepeatOptionsTypes.WEEK]: 'Weekly',
+  [DropdownRepeatOptionsTypes.MONTH]: 'Monthly',
+  [DropdownRepeatOptionsTypes.YEAR]: 'Yearly'
+};
+/**
+ * @param root0
+ * @param root0.customRange
+ * @param root0.customRange.startDateInput
+ * @param root0.customRange.startTimeInput
+ * @param root0.customRange.qtyRepeatPickerInput
+ * @param root0.customRange.typeRepeatPickerInput
+ * @param root0.customRange.dayWeekRepeatPickerInput
+ * @param root0.customRange.endDateInput
+ * @param root0.customRange.endTypeInput
+ * @param root0.customRange.endTimesInput
+ * @param root0.customRange.dayOfMonthRepeatPickerInput
+ * @param root0.customRange.dayOfYearRepeatPickerInput
+ * @param root0.customRange.timezonePickerInput
+ * @param root0.dayOfMonthOptionsEnable
+ * @param root0.dayOfWeekOptionsEnable
+ * @param root0.dayOfYearOptionsEnable
+ * @param root0.useTimezoneSelector
+ * @customRange {
+startDateInput,
+startTimeInput,
+qtyRepeatPickerInput,
+typeRepeatPickerInput,
+dayWeekRepeatPickerInput,
+endDateInput,
+endTypeInput,
+endTimesInput,
+dayOfMonthRepeatPickerInput,
+dayOfYearRepeatPickerInput,
+timezonePickerInput
+}
+ */
+
+const CustomOptionRender = _ref => {
+  let {
+    customRange: {
+      startDateInput,
+      startTimeInput,
+      qtyRepeatPickerInput,
+      typeRepeatPickerInput,
+      dayWeekRepeatPickerInput,
+      endDateInput,
+      endTypeInput,
+      endTimesInput,
+      dayOfMonthRepeatPickerInput,
+      dayOfYearRepeatPickerInput,
+      timezonePickerInput
+    },
+    dayOfMonthOptionsEnable,
+    dayOfWeekOptionsEnable,
+    dayOfYearOptionsEnable,
+    useTimezoneSelector
+  } = _ref;
+  let display = 'Custom'; // frequency
+
+  if (qtyRepeatPickerInput === 1) display = typeRepeat[typeRepeatPickerInput];else display = "every ".concat(qtyRepeatPickerInput, " ").concat(typeRepeatPickerInput, "s"); // type
+
+  if (typeRepeatPickerInput === DropdownRepeatOptionsTypes.WEEK) {
+    display += dayOfWeekOptionsEnable ? " on ".concat(dayWeekRepeatPickerInput, " ") : '';
+  } else if (typeRepeatPickerInput === DropdownRepeatOptionsTypes.MONTH) {
+    display += dayOfMonthOptionsEnable ? " ".concat(dayOfMonthRepeatPickerInput, " ") : '';
+  } else if (typeRepeatPickerInput === DropdownRepeatOptionsTypes.YEAR) {
+    display += dayOfYearOptionsEnable ? " ".concat(dayOfYearRepeatPickerInput, " ") : '';
+  } // start & end
+
+
+  if (startDateInput && startDateInput.format) {
+    display += " starting on ".concat(startDateInput.format('MM/DD/YYYY'), " at ").concat(startTimeInput.format('HH:mm A'));
+  }
+
+  if (endTypeInput === endTypes.ON) display += ", until ".concat(endDateInput.format('MM/DD/YYYY'), " ");else if (endTypeInput === endTypes.AFTER) display += ", for ".concat(endTimesInput, " times");
+  if (useTimezoneSelector && timezonePickerInput) display += " [".concat(timezonePickerInput, "]");
+  return /*#__PURE__*/_jsx("em", {}, void 0, display);
+};
+
+export { CustomOptionRender as default };

package/esm/components/DateTimeRangeModal/DateTimeRangeModal.js

@@ -0,0 +1,114 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import React from 'react';
+import DSModal from '@elliemae/ds-modal';
+import DateTimePredefinedRangeSelectorImpl from '../DateTimeRangeModalImpl/DateTimeRangeModalImpl.js';
+
+class DateTimeRangeModal extends React.Component {
+  constructor() {
+    var _this;
+
+    super(...arguments);
+    _this = this;
+    this.state = {
+      isValid: true
+    };
+
+    this.updateIsValid = function () {
+      const {
+        onCustomDateTimeRange = () => null,
+        isValidRecurrence
+      } = _this.props;
+      onCustomDateTimeRange(...arguments);
+
+      _this.setState({
+        isValid: isValidRecurrence(...arguments)
+      });
+    };
+  }
+
+  render() {
+    const {
+      isOpen = false,
+      onClose = () => null,
+      modalTitle = 'Report Scheduling',
+      // modalSize = 'medium',
+      confirmLabel = 'Apply',
+      rejectLabel = 'Cancel',
+      modalType = 'confirm',
+      onConfirmField = () => null,
+      onRejectField = () => null,
+      appElement = null,
+      displayCurrentMonthYear = true,
+      dropdownDayOfMonthOptions = [],
+      dropdownDayOfWeekOptions = [],
+      dropdownDayOfYearOptions = [],
+      dropdownRepeatOptions = [],
+      rangeValue = {},
+      dayOfMonthOptionsEnable = true,
+      dayOfWeekOptionsEnable = true,
+      dayOfYearOptionsEnable = true,
+      timeZoneOptions = [],
+      useTimezoneSelector = false,
+      allowMultipleDaysOfWeek = false,
+      endTimesOptions,
+      endTypesOptions,
+      dayOfMonthAsCurrentDateOptions,
+      dayOfYearAsCurrentDateOptions,
+      isValidRecurrence,
+      validationMessage,
+      startDayBlocked,
+      endDayBlocked,
+      repeatFrecuencyCustomProps,
+      displayMonthCustomOption,
+      displayYearCustomOption
+    } = this.props;
+    const {
+      isValid
+    } = this.state;
+    return /*#__PURE__*/_jsx(DSModal, {
+      appElement: appElement,
+      centered: false,
+      confirmLabel: confirmLabel,
+      isOpen: isOpen,
+      modalTitle: modalTitle,
+      modalType: modalType,
+      onClose: onClose,
+      onConfirm: onConfirmField,
+      onReject: onRejectField,
+      overridePropsConfirmButton: {
+        disabled: !isValid
+      },
+      rejectLabel: rejectLabel,
+      size: "small"
+    }, void 0, /*#__PURE__*/_jsx(DateTimePredefinedRangeSelectorImpl, {
+      allowMultipleDaysOfWeek: allowMultipleDaysOfWeek,
+      dayOfMonthAsCurrentDateOptions: dayOfMonthAsCurrentDateOptions,
+      dayOfMonthOptionsEnable: dayOfMonthOptionsEnable,
+      dayOfWeekOptionsEnable: dayOfWeekOptionsEnable,
+      dayOfYearAsCurrentDateOptions: dayOfYearAsCurrentDateOptions,
+      dayOfYearOptionsEnable: dayOfYearOptionsEnable,
+      displayCurrentMonthYear: displayCurrentMonthYear,
+      displayMonthCustomOption: displayMonthCustomOption,
+      displayYearCustomOption: displayYearCustomOption,
+      dropdownDayOfMonthOptions: dropdownDayOfMonthOptions,
+      dropdownDayOfWeekOptions: dropdownDayOfWeekOptions,
+      dropdownDayOfYearOptions: dropdownDayOfYearOptions,
+      dropdownRepeatOptions: dropdownRepeatOptions,
+      endDayBlocked: endDayBlocked,
+      endTimesOptions: endTimesOptions,
+      endTypesOptions: endTypesOptions,
+      isValidRecurrence: isValidRecurrence,
+      onCustomDateTimeRange: this.updateIsValid,
+      rangeValue: rangeValue,
+      repeatFrecuencyCustomProps: repeatFrecuencyCustomProps,
+      startDayBlocked: startDayBlocked,
+      timeZoneOptions: timeZoneOptions,
+      useTimezoneSelector: useTimezoneSelector,
+      validationMessage: validationMessage
+    }));
+  }
+
+}
+
+export { DateTimeRangeModal as default };