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

package/cjs/plugins/filterable/components/FilterableHeader.js

@@ -1,153 +1,120 @@
 'use strict';
 
-var _extends = require('@babel/runtime/helpers/extends');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+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/es.string.replace.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 PropTypes = require('prop-types');
 var dsClassnames = require('@elliemae/ds-classnames');
 var dsUtilities = require('@elliemae/ds-utilities');
 var dsSystem = require('@elliemae/ds-system');
-var plugins_filterable_components_filterableMenus_getFilterMenuByType = require('./filterable-menus/getFilterMenuByType.js');
-require('./filterable-menus/DateRangeFilterMenu.js');
-require('@elliemae/ds-controlled-form');
-require('@elliemae/ds-popper');
-require('@elliemae/ds-icons');
-require('@elliemae/ds-button');
-require('moment');
-require('./filterable-menus/defaultDateFormat.js');
-require('./filterable-menus/SingleDateFilterMenu.js');
-require('@elliemae/ds-grid');
-require('./filterable-menus/SingleRangeSwitcherMenu.js');
-require('@elliemae/ds-basic/Popper');
-require('@elliemae/ds-basic/Button');
-require('styled-components');
-require('./filterable-menus/TextFilterMenu.js');
-require('@babel/runtime/helpers/defineProperty');
-require('@babel/runtime/helpers/toConsumableArray');
-require('@babel/runtime/helpers/objectWithoutProperties');
-require('lodash');
-require('@elliemae/ds-dropdownmenu');
-require('@elliemae/ds-menu');
+var getFilterMenuByType = require('./filterable-menus/getFilterMenuByType.js');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
-var blockName = 'data-grid-filter-header';
-var Container = dsClassnames.aggregatedClasses('div')(blockName, null, function (_ref) {
-  var showFilter = _ref.showFilter;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+const blockName = 'data-grid-filter-header';
+const Container = dsClassnames.aggregatedClasses('div')(blockName, null, _ref => {
+  let {
+    showFilter
+  } = _ref;
   return {
     'show-filter': showFilter
   };
 });
-var FilterHeaderValue = dsClassnames.aggregatedClasses('div')(blockName, 'value');
-var FilterHeaderButton = dsClassnames.aggregatedClasses('div')(blockName, 'button');
+const FilterHeaderValue = dsClassnames.aggregatedClasses('div')(blockName, 'value');
+const FilterHeaderButton = dsClassnames.aggregatedClasses('div')(blockName, 'button');
 function FilterableHeader(_ref2) {
-  var column = _ref2.column,
-      value = _ref2.value,
-      columnData = _ref2.columnData,
-      onAddFilter = _ref2.onAddFilter,
-      onRemoveFilter = _ref2.onRemoveFilter,
-      filterMenuRef = _ref2.filterMenuRef,
-      onFilterMenuClose = _ref2.onFilterMenuClose,
-      onFilterMenuOpen = _ref2.onFilterMenuOpen,
-      filters = _ref2.filters,
-      isMulti = _ref2.isMulti;
-
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray__default['default'](_useState, 2),
-      isMenuOpened = _useState2[0],
-      setMenuOpened = _useState2[1];
-
-  var _useState3 = React.useState(),
-      _useState4 = _slicedToArray__default['default'](_useState3, 2),
-      headerWidth = _useState4[0],
-      setHeaderWidth = _useState4[1];
+  let {
+    column,
+    value,
+    columnData,
+    onAddFilter,
+    onRemoveFilter,
+    filterMenuRef,
+    onFilterMenuClose,
+    onFilterMenuOpen,
+    filters,
+    isMulti
+  } = _ref2;
+  const [isMenuOpened, setMenuOpened] = React.useState(false);
+  const [headerWidth, setHeaderWidth] = React.useState();
+  const debouncedWidthSetter = dsUtilities.debounce(setHeaderWidth, 200);
+  const {
+    filterMenuMinWidth,
+    filterMenuMaxWidth
+  } = column;
+  const theme = dsSystem.useTheme();
+  const dropdownMinWidth = filterMenuMinWidth || Number(theme.space.xl.replace('px', '')) * 2;
 
-  var debouncedWidthSetter = dsUtilities.debounce(setHeaderWidth, 200);
-  var filterMenuMinWidth = column.filterMenuMinWidth,
-      filterMenuMaxWidth = column.filterMenuMaxWidth;
-  var theme = dsSystem.useTheme();
-  var dropdownMinWidth = filterMenuMinWidth || Number(theme.space.xl.replace('px', '')) * 2;
-
-  var defineHeaderWidth = function defineHeaderWidth(_ref3) {
-    var width = _ref3.width;
-    var nextWidth = width + 16; // todo: use dimsum space once we convert it to JS
+  const defineHeaderWidth = _ref3 => {
+    let {
+      width
+    } = _ref3;
+    let nextWidth = width + 16; // todo: use dimsum space once we convert it to JS
 
     if (nextWidth < dropdownMinWidth) nextWidth = dropdownMinWidth;
     if (filterMenuMaxWidth && nextWidth > filterMenuMaxWidth) nextWidth = filterMenuMaxWidth;
     return !isMenuOpened ? debouncedWidthSetter(nextWidth) : setHeaderWidth(nextWidth);
   };
 
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (filterMenuRef) {
       filterMenuRef.current = {
-        toggleMenu: function toggleMenu() {
-          return setMenuOpened(function (prevState) {
-            return !prevState;
-          });
-        }
+        toggleMenu: () => setMenuOpened(prevState => !prevState)
       };
     }
   }, [filterMenuRef]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (!isMenuOpened) onFilterMenuClose(column);else onFilterMenuOpen(column);
   });
-
-  var _useResizeObserver = dsUtilities.useResizeObserver(defineHeaderWidth),
-      _useResizeObserver2 = _slicedToArray__default['default'](_useResizeObserver, 1),
-      ref = _useResizeObserver2[0];
-
-  var handleOpenMenu = React.useCallback(function (open) {
+  const [ref] = dsUtilities.useResizeObserver(defineHeaderWidth);
+  const handleOpenMenu = React.useCallback(open => {
     setMenuOpened(open);
     if (open) onFilterMenuOpen();
   }, []);
-  var FilterMenuComponent = plugins_filterable_components_filterableMenus_getFilterMenuByType(dsUtilities.get(column, ['filter', 'type']));
-  return /*#__PURE__*/React__default['default'].createElement(Container, {
+  const FilterMenuComponent = getFilterMenuByType(dsUtilities.get(column, ['filter', 'type']));
+  return /*#__PURE__*/jsxRuntime.jsxs(Container, {
     ref: ref,
     classProps: {
       showFilter: isMenuOpened
-    }
-  }, /*#__PURE__*/React__default['default'].createElement(FilterHeaderValue, {
-    className: "header-value"
-  }, value), /*#__PURE__*/React__default['default'].createElement(FilterHeaderButton, {
-    "data-testid": "data-grid-filter-header__button"
-  }, /*#__PURE__*/React__default['default'].createElement(FilterMenuComponent, _extends__default['default']({
-    className: "filter-header-menu",
-    column: column,
-    filters: filters,
-    isMenuOpened: isMenuOpened,
-    isMulti: isMulti,
-    menuProps: {
-      options: columnData || [],
-      style: {
-        minWidth: headerWidth,
-        maxWidth: filterMenuMaxWidth
-      },
-      zIndex: 100
     },
-    onAddFilter: onAddFilter,
-    onRemoveFilter: onRemoveFilter,
-    onOpenMenu: handleOpenMenu,
-    onClose: onFilterMenuClose,
-    width: headerWidth
-  }, dsUtilities.get(column, ['filter'], {})))));
+    children: [/*#__PURE__*/_jsx__default["default"](FilterHeaderValue, {
+      className: "header-value"
+    }, void 0, value), /*#__PURE__*/_jsx__default["default"](FilterHeaderButton, {
+      "data-testid": "data-grid-filter-header__button"
+    }, void 0, /*#__PURE__*/jsxRuntime.jsx(FilterMenuComponent, _objectSpread({
+      className: "filter-header-menu",
+      column: column,
+      filters: filters,
+      isMenuOpened: isMenuOpened,
+      isMulti: isMulti,
+      menuProps: {
+        options: columnData || [],
+        style: {
+          minWidth: headerWidth,
+          maxWidth: filterMenuMaxWidth
+        },
+        zIndex: 100
+      },
+      onAddFilter: onAddFilter,
+      onRemoveFilter: onRemoveFilter,
+      onOpenMenu: handleOpenMenu,
+      onClose: onFilterMenuClose,
+      width: headerWidth
+    }, dsUtilities.get(column, ['filter'], {}))))]
+  });
 }
-FilterableHeader.propTypes = {
-  column: PropTypes__default['default'].any,
-  value: PropTypes__default['default'].any,
-  columnData: PropTypes__default['default'].any,
-  onAddFilter: PropTypes__default['default'].func,
-  onRemoveFilter: PropTypes__default['default'].func,
-  filterMenuRef: PropTypes__default['default'].any,
-  onFilterMenuClose: PropTypes__default['default'].func,
-  onFilterMenuOpen: PropTypes__default['default'].func,
-  filters: PropTypes__default['default'].arrayOf(PropTypes__default['default'].shape({})),
-  isMulti: PropTypes__default['default'].bool
-};
 
 module.exports = FilterableHeader;
-//# sourceMappingURL=FilterableHeader.js.map

package/cjs/plugins/filterable/components/filterable-menus/DateRangeFilterMenu.js

@@ -1,55 +1,40 @@
 'use strict';
 
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
-var PropTypes = require('prop-types');
 var dsControlledForm = require('@elliemae/ds-controlled-form');
 var DSPopper = require('@elliemae/ds-popper');
 var dsIcons = require('@elliemae/ds-icons');
 var DSButton = require('@elliemae/ds-button');
 var moment = require('moment');
 var dsClassnames = require('@elliemae/ds-classnames');
-var plugins_filterable_components_filterableMenus_defaultDateFormat = require('./defaultDateFormat.js');
+var defaultDateFormat = require('./defaultDateFormat.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var DSPopper__default = /*#__PURE__*/_interopDefaultLegacy(DSPopper);
 var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
 
-var blockname = 'date-range';
-var Wrapper = dsClassnames.aggregatedClasses('div')(blockname, 'wrapper');
-var Header = dsClassnames.aggregatedClasses('div')(blockname, 'header'); // const randomString = (maxLength = 5) => Math.random().toString(36).slice(-maxLength);
+var _DatePicker;
+const blockname = 'date-range';
+const Wrapper = dsClassnames.aggregatedClasses('div')(blockname, 'wrapper');
+const Header = dsClassnames.aggregatedClasses('div')(blockname, 'header'); // const randomString = (maxLength = 5) => Math.random().toString(36).slice(-maxLength);
 
-var DateRangePickerContainer = function DateRangePickerContainer(_ref) {
-  var _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? function () {
-    return null;
-  } : _ref$onChange,
-      showHeader = _ref.showHeader;
+const DateRangePickerContainer = _ref => {
+  let {
+    onChange = () => null,
+    showHeader
+  } = _ref;
+  const [startDate, setStartDate] = React.useState('');
+  const [endDate, setEndDate] = React.useState(''); // For some reason it worked like this
 
-  var _useState = React.useState(''),
-      _useState2 = _slicedToArray__default['default'](_useState, 2),
-      startDate = _useState2[0],
-      setStartDate = _useState2[1];
-
-  var _useState3 = React.useState(''),
-      _useState4 = _slicedToArray__default['default'](_useState3, 2),
-      endDate = _useState4[0],
-      setEndDate = _useState4[1]; // For some reason it worked like this
-
-
-  var _useState5 = React.useState(false),
-      _useState6 = _slicedToArray__default['default'](_useState5, 2),
-      lastChangeWasPicker = _useState6[0],
-      setLastChangeWasPicker = _useState6[1];
-
-  React.useEffect(function () {
-    var startMoment = moment__default['default'](startDate);
-    var endMoment = moment__default['default'](endDate);
+  const [lastChangeWasPicker, setLastChangeWasPicker] = React.useState(false);
+  React.useEffect(() => {
+    const startMoment = moment__default["default"](startDate);
+    const endMoment = moment__default["default"](endDate);
 
     if (lastChangeWasPicker && startDate && !startDate.includes('_') && endDate && !endDate.includes('_') && endMoment.diff(startMoment) >= 0) {
       onChange({
@@ -59,42 +44,40 @@ var DateRangePickerContainer = function DateRangePickerContainer(_ref) {
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [startDate, endDate, lastChangeWasPicker]);
-  return /*#__PURE__*/React__default['default'].createElement(Wrapper, {
+  return /*#__PURE__*/_jsx__default["default"](Wrapper, {
     "data-testid": "date-range__wrapper",
-    onKeyDown: function onKeyDown(e) {
-      return e.code === 'Enter' && setLastChangeWasPicker(true);
-    },
+    onKeyDown: e => e.code === 'Enter' && setLastChangeWasPicker(true),
     style: {
       backgroundColor: 'white',
       boxShadow: '0 6px 20px 0 rgb(0 0 0 / 24%)',
       width: '261px'
     }
-  }, showHeader && /*#__PURE__*/React__default['default'].createElement(Header, {
+  }, void 0, showHeader && /*#__PURE__*/_jsx__default["default"](Header, {
     style: {
       padding: '8px',
       display: 'flex',
       justifyContent: 'center'
     }
-  }, /*#__PURE__*/React__default['default'].createElement(dsControlledForm.DSControlledDateRangePicker, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsControlledForm.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__default['default'].createElement(dsControlledForm.DSControlledDateRangePicker, {
+  })), /*#__PURE__*/_jsx__default["default"](dsControlledForm.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);
     },
@@ -102,56 +85,47 @@ var DateRangePickerContainer = function DateRangePickerContainer(_ref) {
   }));
 };
 
-DateRangePickerContainer.propTypes = {
-  onChange: PropTypes__default['default'].func,
-  showHeader: PropTypes__default['default'].bool
-};
-
-var formatRangeDate = function formatRangeDate(_ref2) {
-  var startDate = _ref2.startDate,
-      endDate = _ref2.endDate;
-  var format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : plugins_filterable_components_filterableMenus_defaultDateFormat.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] : defaultDateFormat.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));
 };
 
 function DateRangeFilterMenu(_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 ? function () {
-    return null;
-  } : _ref3$onOpenMenu,
-      _ref3$placement = _ref3.placement,
-      placement = _ref3$placement === void 0 ? DSPopper.PopperPositions.BOTTOM_END : _ref3$placement,
-      _ref3$onAddFilter = _ref3.onAddFilter,
-      onAddFilter = _ref3$onAddFilter === void 0 ? function () {
-    return null;
-  } : _ref3$onAddFilter,
-      _ref3$dateFormatter = _ref3.dateFormatter,
-      dateFormatter = _ref3$dateFormatter === void 0 ? formatRangeDate : _ref3$dateFormatter,
-      _ref3$showHeader = _ref3.showHeader,
-      showHeader = _ref3$showHeader === void 0 ? true : _ref3$showHeader,
-      menuProps = _ref3.menuProps;
-  return /*#__PURE__*/React__default['default'].createElement(DSPopper__default['default'], {
-    contentComponent: /*#__PURE__*/React__default['default'].createElement("div", {
+  let {
+    column,
+    className,
+    isMenuOpened = false,
+    onOpenMenu = () => null,
+    placement = DSPopper.PopperPositions.BOTTOM_END,
+    onAddFilter = () => null,
+    dateFormatter = formatRangeDate,
+    showHeader = true,
+    menuProps
+  } = _ref3;
+  return /*#__PURE__*/_jsx__default["default"](DSPopper__default["default"], {
+    contentComponent: /*#__PURE__*/_jsx__default["default"]("div", {
       className: className
-    }, /*#__PURE__*/React__default['default'].createElement(DateRangePickerContainer, {
+    }, void 0, /*#__PURE__*/_jsx__default["default"](DateRangePickerContainer, {
       minimumNights: 0,
-      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
           }),
           type: 'date',
           // todo: create constants for filter types
@@ -159,9 +133,7 @@ function DateRangeFilterMenu(_ref3) {
             start: startDate,
             end: endDate
           },
-          transformRowValue: function transformRowValue(value) {
-            return moment__default['default'](value, column.dateFormat || plugins_filterable_components_filterableMenus_defaultDateFormat.DEFAULT_DATE_FORMAT);
-          },
+          transformRowValue: value => moment__default["default"](value, column.dateFormat || defaultDateFormat.DEFAULT_DATE_FORMAT),
           operator: 'range'
         }, column);
         onOpenMenu(false);
@@ -172,29 +144,14 @@ function DateRangeFilterMenu(_ref3) {
     onOpen: onOpenMenu,
     placement: placement,
     showArrow: false,
-    triggerComponent: /*#__PURE__*/React__default['default'].createElement(DSButton__default['default'], {
+    triggerComponent: /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
       buttonType: "text",
-      icon: /*#__PURE__*/React__default['default'].createElement(dsIcons.DatePicker2, null),
-      onClick: function onClick() {
-        return !isMenuOpened ? onOpenMenu(true) : onOpenMenu(false);
-      },
+      icon: _DatePicker || (_DatePicker = /*#__PURE__*/_jsx__default["default"](dsIcons.DatePicker2, {})),
+      onClick: () => !isMenuOpened ? onOpenMenu(true) : onOpenMenu(false),
       size: "s"
     }),
     zIndex: menuProps.zIndex
   });
 }
 
-DateRangeFilterMenu.propTypes = {
-  column: PropTypes__default['default'].any,
-  className: PropTypes__default['default'].string,
-  isMenuOpened: PropTypes__default['default'].bool,
-  onOpenMenu: PropTypes__default['default'].func,
-  placement: PropTypes__default['default'].string,
-  onAddFilter: PropTypes__default['default'].func,
-  dateFormatter: PropTypes__default['default'].any,
-  showHeader: PropTypes__default['default'].bool,
-  menuProps: PropTypes__default['default'].any
-};
-
 module.exports = DateRangeFilterMenu;
-//# sourceMappingURL=DateRangeFilterMenu.js.map