@elliemae/ds-date-range-selector 2.3.1 → 3.0.0-alpha.3

package/cjs/components/DateRangeSelectorImpl.js

@@ -1,233 +0,0 @@
-'use strict';
-
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _jsx = require('@babel/runtime/helpers/jsx');
-require('core-js/modules/esnext.async-iterator.find.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.find.js');
-require('core-js/modules/web.dom-collections.iterator.js');
-require('core-js/modules/esnext.async-iterator.filter.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 reactSelect = require('react-select');
-require('react-dates/initialize');
-var reactDates = require('react-dates');
-var dsClassnames = require('@elliemae/ds-classnames');
-var dsForm = require('@elliemae/ds-form');
-var DSPopper = require('@elliemae/ds-popper');
-var dsDatePicker = require('@elliemae/ds-date-picker');
-var dsIcons = require('@elliemae/ds-icons');
-var dropdownPreselectedOptions = require('../options/dropdownPreselectedOptions.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);
-var DSPopper__default = /*#__PURE__*/_interopDefaultLegacy(DSPopper);
-
-var _div;
-
-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 START_DATE = 'startDate';
-const END_DATE = 'endDate';
-const advanceOption = {
-  label: 'Custom',
-  value: dropdownPreselectedOptions.CUSTOM_OPTION_VALUE,
-  isAdvance: true
-};
-const {
-  cssClassName,
-  classNameElement,
-  classNameBlock
-} = dsClassnames.convertPropToCssClassName('date-range-selector');
-const {
-  classNameElement: pickerNameElement
-} = dsClassnames.convertPropToCssClassName('datepicker');
-
-class DateTimeRecurenceSelectorImpl extends react.Component {
-  constructor(props) {
-    super(props);
-
-    this.onChange = () => {
-      const {
-        onChange
-      } = this.props;
-      const {
-        customRange,
-        selected
-      } = this.state;
-      onChange(selected, customRange);
-    };
-
-    this.onChangeDropdown = value => {
-      const {
-        dropdownPreselectedOptions
-      } = this.props;
-      const selected = dropdownPreselectedOptions.find(op => op.value === value);
-      const {
-        onChange
-      } = this.props;
-
-      if (!selected) {
-        this.setState({
-          selected: value
-        });
-        this.handleOpenModal();
-      } else if (selected) {
-        onChange(value);
-        this.setState({
-          selected: value,
-          openModal: false
-        });
-      }
-    };
-
-    this.handleConfirm = () => {
-      const {
-        customOptionRender: CustomOptionRender
-      } = this.props;
-      const {
-        customRange
-      } = this.state;
-      advanceOption.label = /*#__PURE__*/_jsx__default["default"](CustomOptionRender, {
-        customRange: customRange
-      });
-      this.onChange();
-      this.handleCloseModal();
-    };
-
-    this.handleOpenModal = () => this.setState({
-      openModal: true
-    });
-
-    this.handleCloseModal = () => this.setState({
-      openModal: false
-    });
-
-    const _customRange = {
-      startDate: props.startDate ? moment__default["default"](props.startDate) : moment__default["default"](),
-      endDate: props.endDate ? moment__default["default"](props.endDate) : moment__default["default"]()
-    };
-    this.state = {
-      openModal: false,
-      selected: props.value,
-      focusedInput: START_DATE,
-      customRange: _customRange
-    };
-    const {
-      customOptionRender: _CustomOptionRender
-    } = props;
-    advanceOption.label = /*#__PURE__*/_jsx__default["default"](_CustomOptionRender, {
-      customRange: _customRange
-    });
-    this.onDatesChange = this.onDatesChange.bind(this);
-    this.onFocusChange = this.onFocusChange.bind(this);
-  }
-
-  onDatesChange(_ref) {
-    let {
-      startDate,
-      endDate
-    } = _ref;
-    this.setState({
-      customRange: {
-        startDate,
-        endDate
-      }
-    }, () => {
-      this.onChange();
-    });
-  }
-
-  onFocusChange() {
-    this.setState(_ref2 => {
-      let {
-        focusedInput
-      } = _ref2;
-      return {
-        focusedInput: focusedInput === START_DATE ? END_DATE : START_DATE
-      };
-    });
-  }
-
-  render() {
-    const {
-      placeholder,
-      dropdownPreselectedOptions,
-      displayFormatDay,
-      className,
-      disableCustomOption,
-      containerProps
-    } = this.props;
-    const {
-      selected,
-      openModal,
-      focusedInput,
-      customRange: {
-        startDate,
-        endDate
-      }
-    } = this.state;
-    let options = [...dropdownPreselectedOptions];
-
-    if (!disableCustomOption) {
-      options = [...options, advanceOption]; // eslint-disable-next-line max-lines
-    }
-
-    return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({}, containerProps), {}, {
-      className: "".concat(cssClassName, " ").concat(className),
-      children: [/*#__PURE__*/_jsx__default["default"]("div", {
-        className: "".concat(classNameBlock('container-selector'))
-      }, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSComboBox, {
-        className: "".concat(classNameElement('dropdown-field-selector')),
-        components: {
-          Option: props => /*#__PURE__*/jsxRuntime.jsx(reactSelect.components.Option, _objectSpread({}, props)),
-          IndicatorSeparator: () => null
-        },
-        onChange: this.onChangeDropdown,
-        onKeyDown: this.onKeyDown,
-        options: options,
-        placeholder: placeholder,
-        value: selected,
-        keepTypedValue: false // TEMPORARY FIX
-
-      })), /*#__PURE__*/_jsx__default["default"](DSPopper__default["default"], {
-        contentComponent: /*#__PURE__*/_jsx__default["default"]("div", {
-          className: classNameBlock('wrap-day-picker')
-        }, void 0, /*#__PURE__*/_jsx__default["default"](reactDates.DayPickerRangeController, {
-          endDate: endDate,
-          focusedInput: focusedInput,
-          hideKeyboardShortcutsPanel: true,
-          navNext: /*#__PURE__*/_jsx__default["default"](dsDatePicker.DatePickerNavigation, {
-            className: pickerNameElement('navigation-next')
-          }),
-          navPrev: /*#__PURE__*/_jsx__default["default"](dsDatePicker.DatePickerNavigation, {
-            className: pickerNameElement('navigation-prev'),
-            icon: dsIcons.ChevronLeft
-          }),
-          onDatesChange: this.onDatesChange,
-          onFocusChange: this.onFocusChange,
-          onOutsideClick: this.handleConfirm,
-          renderDayContents: date => /*#__PURE__*/_jsx__default["default"](dsDatePicker.DatePickerDay, {
-            className: pickerNameElement('day-contents'),
-            date: date.format(displayFormatDay)
-          }),
-          startDate: startDate
-        })),
-        isOpen: openModal,
-        showArrow: false,
-        triggerComponent: _div || (_div = /*#__PURE__*/_jsx__default["default"]("div", {}))
-      })]
-    }));
-  }
-
-}
-
-module.exports = DateTimeRecurenceSelectorImpl;

package/cjs/index.js

@@ -1,12 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var DSDateRangeSelector = require('./DSDateRangeSelector.js');
-var dropdownPreselectedOptions = require('./options/dropdownPreselectedOptions.js');
-
-
-
-exports.DateRangeRecurrenceSelectorWithSchema = DSDateRangeSelector.DateRangeRecurrenceSelectorWithSchema;
-exports["default"] = DSDateRangeSelector["default"];
-exports.CUSTOM_OPTION_VALUE = dropdownPreselectedOptions.CUSTOM_OPTION_VALUE;

package/cjs/options/dropdownPreselectedOptions.js

@@ -1,36 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const DropdownOptionsTypes = {
-  TODAY: 'today',
-  YESTERDAY: 'yesterday',
-  LAST_7_DAYS: '7days',
-  LAST_30_DAYS: '30days',
-  THIS_MONTH: 'thismonth',
-  LAST_MONTH: 'lastmonth'
-};
-const dropdownPreselectedOptions = [{
-  label: 'Today',
-  value: DropdownOptionsTypes.TODAY
-}, {
-  label: 'Yesterday',
-  value: DropdownOptionsTypes.YESTERDAY
-}, {
-  label: 'Last 7 Days',
-  value: DropdownOptionsTypes.LAST_7_DAYS
-}, {
-  label: 'Last 30 days',
-  value: DropdownOptionsTypes.LAST_30_DAYS
-}, {
-  label: 'This month',
-  value: DropdownOptionsTypes.THIS_MONTH
-}, {
-  label: 'Last month',
-  value: DropdownOptionsTypes.LAST_MONTH
-}];
-const CUSTOM_OPTION_VALUE = 'custom-option-value';
-
-exports.CUSTOM_OPTION_VALUE = CUSTOM_OPTION_VALUE;
-exports.DropdownOptionsTypes = DropdownOptionsTypes;
-exports.dropdownPreselectedOptions = dropdownPreselectedOptions;

package/esm/DSDateRangeSelector.js

@@ -1,57 +0,0 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'react';
-import { PropTypes, describe } from 'react-desc';
-import moment from 'moment';
-import DateTimeRecurenceSelectorImpl from './components/DateRangeSelectorImpl.js';
-import { dropdownPreselectedOptions } from './options/dropdownPreselectedOptions.js';
-export { CUSTOM_OPTION_VALUE, DropdownOptionsTypes, dropdownPreselectedOptions } from './options/dropdownPreselectedOptions.js';
-import CustomOptionRender from './components/CustomOptionRender/CustomOptionRender.js';
-
-const DSDateRangeSelector = _ref => {
-  let {
-    containerProps = {},
-    className = '',
-    preselectedOptions = dropdownPreselectedOptions,
-    onChange = () => null,
-    placeholder = 'Select Range',
-    value = null,
-    customOptionRender = CustomOptionRender,
-    startDate = null,
-    endDate = null,
-    displayFormatDay = 'D',
-    disableCustomOption = false
-  } = _ref;
-  return /*#__PURE__*/_jsx(DateTimeRecurenceSelectorImpl, {
-    className: className,
-    containerProps: containerProps,
-    customOptionRender: customOptionRender,
-    disableCustomOption: disableCustomOption,
-    displayFormatDay: displayFormatDay,
-    dropdownPreselectedOptions: preselectedOptions,
-    endDate: endDate,
-    onChange: onChange,
-    placeholder: placeholder,
-    startDate: startDate,
-    value: value
-  });
-};
-const dateRangeRecurrenceSelectorProps = {
-  containerProps: PropTypes.object.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('options to display in dropdown menu'),
-  onChange: PropTypes.func.description('function executed when selection changes'),
-  placeholder: PropTypes.string.description('inputs placeholder').defaultValue('Select Range'),
-  value: PropTypes.oneOf([PropTypes.string, PropTypes.number]).description('selected value'),
-  customOptionRender: PropTypes.element.description('custom renderer for options'),
-  startDate: PropTypes.instanceOf(Date, moment).description('moment object of start date'),
-  endDate: PropTypes.instanceOf(Date, moment).description('moment object of end date'),
-  displayFormatDay: PropTypes.string.description('format to display date').defaultValue('D'),
-  disableCustomOption: PropTypes.bool.description('disables custom options').defaultValue(false)
-};
-const DateRangeRecurrenceSelectorWithSchema = describe(DSDateRangeSelector);
-DateRangeRecurrenceSelectorWithSchema.propTypes = dateRangeRecurrenceSelectorProps;
-
-export { DateRangeRecurrenceSelectorWithSchema, DSDateRangeSelector as default };

package/esm/components/CustomOptionRender/CustomOptionRender.js

@@ -1,34 +0,0 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'react';
-import { convertPropToCssClassName } from '@elliemae/ds-classnames';
-
-const {
-  cssClassName
-} = convertPropToCssClassName('date-range-selector-customoption');
-/**
- * @param root0
- * @param root0.customRange
- * @param root0.customRange.startDate
- * @param root0.customRange.endDate
- * @customRange {
-endDate
-startDate
-}
- */
-
-const CustomOptionRender = _ref => {
-  let {
-    customRange: {
-      startDate,
-      endDate
-    }
-  } = _ref;
-  const start = startDate ? startDate.format('MM/DD/YYYY') : null;
-  const end = endDate ? endDate.format('MM/DD/YYYY') : null;
-  const display = "From ".concat(start, " to ").concat(end) || 'Custom';
-  return /*#__PURE__*/_jsx("em", {
-    className: cssClassName
-  }, void 0, display);
-};
-
-export { CustomOptionRender as default };

package/esm/components/DateRangeSelectorImpl.js

@@ -1,224 +0,0 @@
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/esnext.async-iterator.find.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.find.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
-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 { Component } from 'react';
-import moment from 'moment';
-import { components } from 'react-select';
-import 'react-dates/initialize';
-import { DayPickerRangeController } from 'react-dates';
-import { convertPropToCssClassName } from '@elliemae/ds-classnames';
-import { DSComboBox } from '@elliemae/ds-form';
-import DSPopper from '@elliemae/ds-popper';
-import { DatePickerNavigation, DatePickerDay } from '@elliemae/ds-date-picker';
-import { ChevronLeft } from '@elliemae/ds-icons';
-import { CUSTOM_OPTION_VALUE } from '../options/dropdownPreselectedOptions.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var _div;
-
-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 START_DATE = 'startDate';
-const END_DATE = 'endDate';
-const advanceOption = {
-  label: 'Custom',
-  value: CUSTOM_OPTION_VALUE,
-  isAdvance: true
-};
-const {
-  cssClassName,
-  classNameElement,
-  classNameBlock
-} = convertPropToCssClassName('date-range-selector');
-const {
-  classNameElement: pickerNameElement
-} = convertPropToCssClassName('datepicker');
-
-class DateTimeRecurenceSelectorImpl extends Component {
-  constructor(props) {
-    super(props);
-
-    this.onChange = () => {
-      const {
-        onChange
-      } = this.props;
-      const {
-        customRange,
-        selected
-      } = this.state;
-      onChange(selected, customRange);
-    };
-
-    this.onChangeDropdown = value => {
-      const {
-        dropdownPreselectedOptions
-      } = this.props;
-      const selected = dropdownPreselectedOptions.find(op => op.value === value);
-      const {
-        onChange
-      } = this.props;
-
-      if (!selected) {
-        this.setState({
-          selected: value
-        });
-        this.handleOpenModal();
-      } else if (selected) {
-        onChange(value);
-        this.setState({
-          selected: value,
-          openModal: false
-        });
-      }
-    };
-
-    this.handleConfirm = () => {
-      const {
-        customOptionRender: CustomOptionRender
-      } = this.props;
-      const {
-        customRange
-      } = this.state;
-      advanceOption.label = /*#__PURE__*/_jsx(CustomOptionRender, {
-        customRange: customRange
-      });
-      this.onChange();
-      this.handleCloseModal();
-    };
-
-    this.handleOpenModal = () => this.setState({
-      openModal: true
-    });
-
-    this.handleCloseModal = () => this.setState({
-      openModal: false
-    });
-
-    const _customRange = {
-      startDate: props.startDate ? moment(props.startDate) : moment(),
-      endDate: props.endDate ? moment(props.endDate) : moment()
-    };
-    this.state = {
-      openModal: false,
-      selected: props.value,
-      focusedInput: START_DATE,
-      customRange: _customRange
-    };
-    const {
-      customOptionRender: _CustomOptionRender
-    } = props;
-    advanceOption.label = /*#__PURE__*/_jsx(_CustomOptionRender, {
-      customRange: _customRange
-    });
-    this.onDatesChange = this.onDatesChange.bind(this);
-    this.onFocusChange = this.onFocusChange.bind(this);
-  }
-
-  onDatesChange(_ref) {
-    let {
-      startDate,
-      endDate
-    } = _ref;
-    this.setState({
-      customRange: {
-        startDate,
-        endDate
-      }
-    }, () => {
-      this.onChange();
-    });
-  }
-
-  onFocusChange() {
-    this.setState(_ref2 => {
-      let {
-        focusedInput
-      } = _ref2;
-      return {
-        focusedInput: focusedInput === START_DATE ? END_DATE : START_DATE
-      };
-    });
-  }
-
-  render() {
-    const {
-      placeholder,
-      dropdownPreselectedOptions,
-      displayFormatDay,
-      className,
-      disableCustomOption,
-      containerProps
-    } = this.props;
-    const {
-      selected,
-      openModal,
-      focusedInput,
-      customRange: {
-        startDate,
-        endDate
-      }
-    } = this.state;
-    let options = [...dropdownPreselectedOptions];
-
-    if (!disableCustomOption) {
-      options = [...options, advanceOption]; // eslint-disable-next-line max-lines
-    }
-
-    return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, containerProps), {}, {
-      className: "".concat(cssClassName, " ").concat(className),
-      children: [/*#__PURE__*/_jsx("div", {
-        className: "".concat(classNameBlock('container-selector'))
-      }, void 0, /*#__PURE__*/_jsx(DSComboBox, {
-        className: "".concat(classNameElement('dropdown-field-selector')),
-        components: {
-          Option: props => /*#__PURE__*/jsx(components.Option, _objectSpread({}, props)),
-          IndicatorSeparator: () => null
-        },
-        onChange: this.onChangeDropdown,
-        onKeyDown: this.onKeyDown,
-        options: options,
-        placeholder: placeholder,
-        value: selected,
-        keepTypedValue: false // TEMPORARY FIX
-
-      })), /*#__PURE__*/_jsx(DSPopper, {
-        contentComponent: /*#__PURE__*/_jsx("div", {
-          className: classNameBlock('wrap-day-picker')
-        }, void 0, /*#__PURE__*/_jsx(DayPickerRangeController, {
-          endDate: endDate,
-          focusedInput: focusedInput,
-          hideKeyboardShortcutsPanel: true,
-          navNext: /*#__PURE__*/_jsx(DatePickerNavigation, {
-            className: pickerNameElement('navigation-next')
-          }),
-          navPrev: /*#__PURE__*/_jsx(DatePickerNavigation, {
-            className: pickerNameElement('navigation-prev'),
-            icon: ChevronLeft
-          }),
-          onDatesChange: this.onDatesChange,
-          onFocusChange: this.onFocusChange,
-          onOutsideClick: this.handleConfirm,
-          renderDayContents: date => /*#__PURE__*/_jsx(DatePickerDay, {
-            className: pickerNameElement('day-contents'),
-            date: date.format(displayFormatDay)
-          }),
-          startDate: startDate
-        })),
-        isOpen: openModal,
-        showArrow: false,
-        triggerComponent: _div || (_div = /*#__PURE__*/_jsx("div", {}))
-      })]
-    }));
-  }
-
-}
-
-export { DateTimeRecurenceSelectorImpl as default };

package/esm/index.js

@@ -1,2 +0,0 @@
-export { DateRangeRecurrenceSelectorWithSchema, default } from './DSDateRangeSelector.js';
-export { CUSTOM_OPTION_VALUE } from './options/dropdownPreselectedOptions.js';

package/esm/options/dropdownPreselectedOptions.js

@@ -1,30 +0,0 @@
-const DropdownOptionsTypes = {
-  TODAY: 'today',
-  YESTERDAY: 'yesterday',
-  LAST_7_DAYS: '7days',
-  LAST_30_DAYS: '30days',
-  THIS_MONTH: 'thismonth',
-  LAST_MONTH: 'lastmonth'
-};
-const dropdownPreselectedOptions = [{
-  label: 'Today',
-  value: DropdownOptionsTypes.TODAY
-}, {
-  label: 'Yesterday',
-  value: DropdownOptionsTypes.YESTERDAY
-}, {
-  label: 'Last 7 Days',
-  value: DropdownOptionsTypes.LAST_7_DAYS
-}, {
-  label: 'Last 30 days',
-  value: DropdownOptionsTypes.LAST_30_DAYS
-}, {
-  label: 'This month',
-  value: DropdownOptionsTypes.THIS_MONTH
-}, {
-  label: 'Last month',
-  value: DropdownOptionsTypes.LAST_MONTH
-}];
-const CUSTOM_OPTION_VALUE = 'custom-option-value';
-
-export { CUSTOM_OPTION_VALUE, DropdownOptionsTypes, dropdownPreselectedOptions };