@elliemae/ds-datagrids 1.61.0 → 2.0.0-alpha.12

package/esm/plugins/filterable/components/filterable-menus/SingleDateFilterMenu.js

@@ -1,6 +1,6 @@
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
-import React, { useState, useCallback } from 'react';
-import PropTypes from 'prop-types';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useState, useCallback } from 'react';
 import Grid from '@elliemae/ds-grid';
 import { DSControlledDateTimePicker } from '@elliemae/ds-controlled-form';
 import DSPopper, { PopperPositions } from '@elliemae/ds-popper';
@@ -9,78 +9,61 @@ import DSButton from '@elliemae/ds-button';
 import moment from 'moment';
 import { DEFAULT_DATE_FORMAT } from './defaultDateFormat.js';
 
-var SingleDatePickerContainer = function SingleDatePickerContainer(_ref) {
-  var _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? function () {
-    return null;
-  } : _ref$onChange,
-      showHeader = _ref.showHeader;
+var _DatePicker;
 
-  var _useState = useState(''),
-      _useState2 = _slicedToArray(_useState, 2),
-      date = _useState2[0],
-      setDate = _useState2[1];
-
-  var handleDateChange = useCallback(function (data) {
+const SingleDatePickerContainer = _ref => {
+  let {
+    onChange = () => null,
+    showHeader
+  } = _ref;
+  const [date, setDate] = useState('');
+  const handleDateChange = useCallback(data => {
     if (!data.includes('_')) onChange(moment(data));
     setDate(data);
   }, [onChange]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsx("div", {
     style: {
       boxShadow: '0 6px 20px 0 rgb(0 0 0 / 24%)'
     }
-  }, showHeader && /*#__PURE__*/React.createElement(Grid, {
+  }, void 0, showHeader && /*#__PURE__*/_jsx(Grid, {
     p: "xxs"
-  }, /*#__PURE__*/React.createElement(DSControlledDateTimePicker, {
+  }, void 0, /*#__PURE__*/_jsx(DSControlledDateTimePicker, {
     date: date,
     onDateChange: handleDateChange,
     type: "date-inputs",
     isClearable: true
-  })), /*#__PURE__*/React.createElement(DSControlledDateTimePicker, {
+  })), /*#__PURE__*/_jsx(DSControlledDateTimePicker, {
     date: date,
     onDateChange: handleDateChange,
     type: "date-picker-controller-only"
   }));
 };
 
-SingleDatePickerContainer.propTypes = {
-  onChange: PropTypes.func,
-  showHeader: PropTypes.bool
-};
-
-var formatDate = function formatDate(date) {
-  var format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_DATE_FORMAT;
+const formatDate = function (date) {
+  let format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_DATE_FORMAT;
   return date.format(format);
 };
 
 function SingleDateFilterMenu(_ref2) {
-  var column = _ref2.column,
-      className = _ref2.className,
-      _ref2$isMenuOpened = _ref2.isMenuOpened,
-      isMenuOpened = _ref2$isMenuOpened === void 0 ? false : _ref2$isMenuOpened,
-      _ref2$onOpenMenu = _ref2.onOpenMenu,
-      onOpenMenu = _ref2$onOpenMenu === void 0 ? function () {
-    return null;
-  } : _ref2$onOpenMenu,
-      _ref2$placement = _ref2.placement,
-      placement = _ref2$placement === void 0 ? PopperPositions.BOTTOM_END : _ref2$placement,
-      _ref2$onAddFilter = _ref2.onAddFilter,
-      onAddFilter = _ref2$onAddFilter === void 0 ? function () {
-    return null;
-  } : _ref2$onAddFilter,
-      _ref2$dateFormatter = _ref2.dateFormatter,
-      dateFormatter = _ref2$dateFormatter === void 0 ? formatDate : _ref2$dateFormatter,
-      _ref2$showHeader = _ref2.showHeader,
-      showHeader = _ref2$showHeader === void 0 ? false : _ref2$showHeader,
-      menuProps = _ref2.menuProps;
-  return /*#__PURE__*/React.createElement(DSPopper, {
-    contentComponent: /*#__PURE__*/React.createElement("div", {
+  let {
+    column,
+    className,
+    isMenuOpened = false,
+    onOpenMenu = () => null,
+    placement = PopperPositions.BOTTOM_END,
+    onAddFilter = () => null,
+    dateFormatter = formatDate,
+    showHeader = false,
+    menuProps
+  } = _ref2;
+  return /*#__PURE__*/_jsx(DSPopper, {
+    contentComponent: /*#__PURE__*/_jsx("div", {
       className: className,
       "data-testid": "date-single__wrapper"
-    }, /*#__PURE__*/React.createElement(SingleDatePickerContainer, {
+    }, void 0, /*#__PURE__*/_jsx(SingleDatePickerContainer, {
       minimumNights: 0,
-      onChange: function onChange(date) {
-        var t = date.clone();
+      onChange: date => {
+        const t = date.clone();
         onAddFilter({
           group: column.property,
           label: column.label,
@@ -91,9 +74,7 @@ function SingleDateFilterMenu(_ref2) {
             start: date.startOf('day'),
             end: t.endOf('day')
           },
-          transformRowValue: function transformRowValue(value) {
-            return moment(value, column.dateFormat || DEFAULT_DATE_FORMAT);
-          }
+          transformRowValue: value => moment(value, column.dateFormat || DEFAULT_DATE_FORMAT)
         }, column);
         onOpenMenu(false);
       },
@@ -103,29 +84,14 @@ function SingleDateFilterMenu(_ref2) {
     onOpen: onOpenMenu,
     placement: placement,
     showArrow: false,
-    triggerComponent: /*#__PURE__*/React.createElement(DSButton, {
+    triggerComponent: /*#__PURE__*/_jsx(DSButton, {
       buttonType: "text",
-      icon: /*#__PURE__*/React.createElement(DatePicker2, null),
-      onClick: function onClick() {
-        return !isMenuOpened ? onOpenMenu(true) : onOpenMenu(false);
-      },
+      icon: _DatePicker || (_DatePicker = /*#__PURE__*/_jsx(DatePicker2, {})),
+      onClick: () => !isMenuOpened ? onOpenMenu(true) : onOpenMenu(false),
       size: "s"
     }),
     zIndex: menuProps.zIndex
   });
 }
 
-SingleDateFilterMenu.propTypes = {
-  column: PropTypes.any,
-  className: PropTypes.string,
-  isMenuOpened: PropTypes.bool,
-  onOpenMenu: PropTypes.func,
-  placement: PropTypes.string,
-  onAddFilter: PropTypes.func,
-  dateFormatter: PropTypes.any,
-  showHeader: PropTypes.bool,
-  menuProps: PropTypes.any
-};
-
 export { SingleDateFilterMenu as default };
-//# sourceMappingURL=SingleDateFilterMenu.js.map

package/esm/plugins/filterable/components/filterable-menus/SingleRangeSwitcherMenu.js

@@ -1,6 +1,6 @@
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useState, useEffect } from 'react';
 import { DSControlledCheckbox, DSControlledDateRangePicker, DSControlledDateTimePicker } from '@elliemae/ds-controlled-form';
 import DSPopper, { PopperPositions } from '@elliemae/ds-basic/Popper';
 import { DatePicker2 } from '@elliemae/ds-icons';
@@ -10,45 +10,26 @@ import moment from 'moment';
 import styled from 'styled-components';
 import { DEFAULT_DATE_FORMAT } from './defaultDateFormat.js';
 
-var StyledGridWrapper = /*#__PURE__*/styled(Grid).withConfig({
+var _DatePicker;
+const StyledGridWrapper = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-jay5xg-0"
-})([".notCurrentMonth{opacity:", ";pointer-events:", ";}"], function (props) {
-  return props.enableOutsideDays ? '1' : '0';
-}, function (props) {
-  return props.enableOutsideDays ? 'auto' : 'none';
-}); // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
+})([".notCurrentMonth{opacity:", ";pointer-events:", ";}"], props => props.enableOutsideDays ? '1' : '0', props => props.enableOutsideDays ? 'auto' : 'none'); // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
 
-var noop = function noop() {};
+const noop = function () {};
 
-var SingleRangeSwitcherContainer = function SingleRangeSwitcherContainer(_ref) {
-  var _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? noop : _ref$onChange,
-      enableOutsideDays = _ref.enableOutsideDays;
+const SingleRangeSwitcherContainer = _ref => {
+  let {
+    onChange = noop,
+    enableOutsideDays
+  } = _ref;
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState(''); // For some reason it worked like this
 
-  var _useState = useState(''),
-      _useState2 = _slicedToArray(_useState, 2),
-      startDate = _useState2[0],
-      setStartDate = _useState2[1];
-
-  var _useState3 = useState(''),
-      _useState4 = _slicedToArray(_useState3, 2),
-      endDate = _useState4[0],
-      setEndDate = _useState4[1]; // For some reason it worked like this
-
-
-  var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      lastChangeWasPicker = _useState6[0],
-      setLastChangeWasPicker = _useState6[1];
-
-  var _useState7 = useState(false),
-      _useState8 = _slicedToArray(_useState7, 2),
-      isDateRange = _useState8[0],
-      setIsDateRange = _useState8[1];
-
-  useEffect(function () {
-    var startMoment = moment(startDate);
-    var endMoment = moment(endDate);
+  const [lastChangeWasPicker, setLastChangeWasPicker] = useState(false);
+  const [isDateRange, setIsDateRange] = useState(false);
+  useEffect(() => {
+    const startMoment = moment(startDate);
+    const endMoment = moment(endDate);
 
     if (lastChangeWasPicker && startDate && !startDate.includes('_') && endDate && !endDate.includes('_') && endMoment.diff(startMoment) >= 0) {
       onChange({
@@ -58,7 +39,7 @@ var SingleRangeSwitcherContainer = function SingleRangeSwitcherContainer(_ref) {
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [startDate, endDate, lastChangeWasPicker]);
-  return /*#__PURE__*/React.createElement(StyledGridWrapper, {
+  return /*#__PURE__*/_jsx(StyledGridWrapper, {
     "data-testid": "date-single-range__wrapper",
     style: {
       backgroundColor: 'white',
@@ -69,62 +50,60 @@ var SingleRangeSwitcherContainer = function SingleRangeSwitcherContainer(_ref) {
     },
     cols: ['100%'],
     enableOutsideDays: enableOutsideDays,
-    onKeyDown: function onKeyDown(e) {
-      return e.code === 'Enter' && setLastChangeWasPicker(true);
-    }
-  }, /*#__PURE__*/React.createElement(Grid, {
+    onKeyDown: e => e.code === 'Enter' && setLastChangeWasPicker(true)
+  }, void 0, /*#__PURE__*/_jsx(Grid, {
     gutter: "xxs",
     alignItems: "center",
     p: "xxs"
-  }, /*#__PURE__*/React.createElement(DSControlledCheckbox, {
+  }, void 0, /*#__PURE__*/_jsx(DSControlledCheckbox, {
     checked: isDateRange,
     name: "Date range",
     label: "Range",
     id: "date-range-switcher-id-internal",
-    onChange: function onChange() {
+    onChange: () => {
       setIsDateRange(!isDateRange);
       setStartDate('');
       setEndDate('');
     }
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/_jsx("div", {
     style: {
       width: 'fit-content'
     }
-  }, isDateRange ? /*#__PURE__*/React.createElement(DSControlledDateRangePicker, {
+  }, void 0, isDateRange ? /*#__PURE__*/_jsx(DSControlledDateRangePicker, {
     fromDate: startDate,
-    onFromDateChange: function onFromDateChange(_start) {
+    onFromDateChange: _start => {
       setStartDate(_start);
       setLastChangeWasPicker(false);
     },
     toDate: endDate,
-    onToDateChange: function onToDateChange(_end) {
+    onToDateChange: _end => {
       setEndDate(_end);
       setLastChangeWasPicker(false);
     },
     type: "date-range-inputs"
-  }) : /*#__PURE__*/React.createElement(DSControlledDateTimePicker, {
+  }) : /*#__PURE__*/_jsx(DSControlledDateTimePicker, {
     date: startDate,
-    onDateChange: function onDateChange(_date) {
+    onDateChange: _date => {
       setLastChangeWasPicker(false);
       setStartDate(_date);
       setEndDate(_date);
     },
     type: "date-inputs"
-  }))), /*#__PURE__*/React.createElement(Grid, null, isDateRange ? /*#__PURE__*/React.createElement(DSControlledDateRangePicker, {
+  }))), /*#__PURE__*/_jsx(Grid, {}, void 0, isDateRange ? /*#__PURE__*/_jsx(DSControlledDateRangePicker, {
     fromDate: startDate,
-    onFromDateChange: function onFromDateChange(_start) {
+    onFromDateChange: _start => {
       setStartDate(_start);
       setLastChangeWasPicker(true);
     },
     toDate: endDate,
-    onToDateChange: function onToDateChange(_end) {
+    onToDateChange: _end => {
       setEndDate(_end);
       setLastChangeWasPicker(true);
     },
     type: "date-range-picker-controller-only"
-  }) : /*#__PURE__*/React.createElement(DSControlledDateTimePicker, {
+  }) : /*#__PURE__*/_jsx(DSControlledDateTimePicker, {
     date: startDate,
-    onDateChange: function onDateChange(_date) {
+    onDateChange: _date => {
       setLastChangeWasPicker(true);
       setStartDate(_date);
       setEndDate(_date);
@@ -133,53 +112,48 @@ var SingleRangeSwitcherContainer = function SingleRangeSwitcherContainer(_ref) {
   })));
 };
 
-SingleRangeSwitcherContainer.propTypes = {
-  onChange: PropTypes.func,
-  enableOutsideDays: PropTypes.bool
-};
-
-var formatRangeDate = function formatRangeDate(_ref2) {
-  var startDate = _ref2.startDate,
-      endDate = _ref2.endDate;
-  var format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_DATE_FORMAT;
-  var sameDay = startDate.isSame(endDate, 'day');
+const formatRangeDate = function (_ref2) {
+  let {
+    startDate,
+    endDate
+  } = _ref2;
+  let format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_DATE_FORMAT;
+  const sameDay = startDate.isSame(endDate, 'day');
   if (sameDay) return "".concat(endDate.format(format));
   return "".concat(startDate.format(format), " - ").concat(endDate.format(format));
 }; // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 
 
 function SingleRangeSwitcherMenu(_ref3) {
-  var column = _ref3.column,
-      className = _ref3.className,
-      _ref3$isMenuOpened = _ref3.isMenuOpened,
-      isMenuOpened = _ref3$isMenuOpened === void 0 ? false : _ref3$isMenuOpened,
-      _ref3$onOpenMenu = _ref3.onOpenMenu,
-      onOpenMenu = _ref3$onOpenMenu === void 0 ? noop : _ref3$onOpenMenu,
-      _ref3$placement = _ref3.placement,
-      placement = _ref3$placement === void 0 ? PopperPositions.BOTTOM_END : _ref3$placement,
-      _ref3$onAddFilter = _ref3.onAddFilter,
-      onAddFilter = _ref3$onAddFilter === void 0 ? noop : _ref3$onAddFilter,
-      _ref3$dateFormatter = _ref3.dateFormatter,
-      dateFormatter = _ref3$dateFormatter === void 0 ? formatRangeDate : _ref3$dateFormatter,
-      _ref3$enableOutsideDa = _ref3.enableOutsideDays,
-      enableOutsideDays = _ref3$enableOutsideDa === void 0 ? true : _ref3$enableOutsideDa,
-      menuProps = _ref3.menuProps;
-  return /*#__PURE__*/React.createElement(DSPopper, {
-    contentComponent: /*#__PURE__*/React.createElement("div", {
+  let {
+    column,
+    className,
+    isMenuOpened = false,
+    onOpenMenu = noop,
+    placement = PopperPositions.BOTTOM_END,
+    onAddFilter = noop,
+    dateFormatter = formatRangeDate,
+    enableOutsideDays = true,
+    menuProps
+  } = _ref3;
+  return /*#__PURE__*/_jsx(DSPopper, {
+    contentComponent: /*#__PURE__*/_jsx("div", {
       className: className
-    }, /*#__PURE__*/React.createElement(SingleRangeSwitcherContainer, {
+    }, void 0, /*#__PURE__*/_jsx(SingleRangeSwitcherContainer, {
       enableOutsideDays: enableOutsideDays,
-      onChange: function onChange(_ref4) {
-        var startDate = _ref4.startDate,
-            endDate = _ref4.endDate;
+      onChange: _ref4 => {
+        let {
+          startDate,
+          endDate
+        } = _ref4;
         startDate.startOf('day');
         endDate.endOf('day');
         onAddFilter({
           group: column.property,
           label: column.label,
           value: dateFormatter({
-            startDate: startDate,
-            endDate: endDate
+            startDate,
+            endDate
           }, column.format),
           type: 'date',
           // todo: create constants for filter types
@@ -187,9 +161,7 @@ function SingleRangeSwitcherMenu(_ref3) {
             start: startDate,
             end: endDate
           },
-          transformRowValue: function transformRowValue(value) {
-            return moment(value, column.dateFormat || DEFAULT_DATE_FORMAT);
-          },
+          transformRowValue: value => moment(value, column.dateFormat || DEFAULT_DATE_FORMAT),
           operator: 'range'
         }, column);
         onOpenMenu(false);
@@ -199,29 +171,14 @@ function SingleRangeSwitcherMenu(_ref3) {
     onOpen: onOpenMenu,
     placement: placement,
     showArrow: false,
-    triggerComponent: /*#__PURE__*/React.createElement(DSButton, {
+    triggerComponent: /*#__PURE__*/_jsx(DSButton, {
       buttonType: "text",
-      icon: /*#__PURE__*/React.createElement(DatePicker2, null),
-      onClick: function onClick() {
-        return !isMenuOpened ? onOpenMenu(true) : onOpenMenu(false);
-      },
+      icon: _DatePicker || (_DatePicker = /*#__PURE__*/_jsx(DatePicker2, {})),
+      onClick: () => !isMenuOpened ? onOpenMenu(true) : onOpenMenu(false),
       size: "s"
     }),
     zIndex: menuProps.zIndex
   });
 }
 
-SingleRangeSwitcherMenu.propTypes = {
-  column: PropTypes.any,
-  className: PropTypes.string,
-  isMenuOpened: PropTypes.bool,
-  onOpenMenu: PropTypes.func,
-  placement: PropTypes.string,
-  onAddFilter: PropTypes.func,
-  dateFormatter: PropTypes.any,
-  enableOutsideDays: PropTypes.bool,
-  menuProps: PropTypes.any
-};
-
 export { SingleRangeSwitcherMenu as default };
-//# sourceMappingURL=SingleRangeSwitcherMenu.js.map