@carbon/ibm-products 2.65.0 → 2.66.0-rc.0

package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js

@@ -9,7 +9,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var constants = require('./constants.js');
 var react = require('@carbon/react');
 var React = require('react');
@@ -27,9 +26,9 @@ var useClickOutside = require('../../../../../global/js/hooks/useClickOutside.js
 var useSubscribeToEventEmitter = require('./hooks/useSubscribeToEventEmitter.js');
 
 var _Filter;
-var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
-var componentClass = "".concat(blockClass, "-filter-flyout");
-var defaults = {
+const blockClass = `${settings.pkg.prefix}--datagrid`;
+const componentClass = `${blockClass}-filter-flyout`;
+const defaults = {
   flyoutIconDescription: 'Open filters',
   title: 'Filter',
   primaryActionLabel: 'Apply',
@@ -38,141 +37,128 @@ var defaults = {
 };
 
 // Use same empty array every time, for benefit of useEffect() etc. dependency checking.
-var emptyArray = [];
-var FilterFlyout = function FilterFlyout(_ref) {
-  var updateMethod = _ref.updateMethod,
-    _ref$flyoutIconDescri = _ref.flyoutIconDescription,
-    flyoutIconDescription = _ref$flyoutIconDescri === void 0 ? defaults.flyoutIconDescription : _ref$flyoutIconDescri,
-    _ref$align = _ref.align,
-    align = _ref$align === void 0 ? defaults.align : _ref$align,
-    _ref$filters = _ref.filters,
-    filters = _ref$filters === void 0 ? emptyArray : _ref$filters,
-    _ref$title = _ref.title,
-    title = _ref$title === void 0 ? defaults.title : _ref$title,
-    _ref$primaryActionLab = _ref.primaryActionLabel,
-    primaryActionLabel = _ref$primaryActionLab === void 0 ? defaults.primaryActionLabel : _ref$primaryActionLab,
-    _ref$onFlyoutOpen = _ref.onFlyoutOpen,
-    onFlyoutOpen = _ref$onFlyoutOpen === void 0 ? function () {} : _ref$onFlyoutOpen,
-    _ref$onFlyoutClose = _ref.onFlyoutClose,
-    onFlyoutClose = _ref$onFlyoutClose === void 0 ? function () {} : _ref$onFlyoutClose,
-    _ref$onApply = _ref.onApply,
-    onApply = _ref$onApply === void 0 ? function () {} : _ref$onApply,
-    _ref$onCancel = _ref.onCancel,
-    onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel,
-    _ref$secondaryActionL = _ref.secondaryActionLabel,
-    secondaryActionLabel = _ref$secondaryActionL === void 0 ? defaults.secondaryActionLabel : _ref$secondaryActionL,
-    setAllFilters = _ref.setAllFilters,
-    _ref$data = _ref.data,
-    data = _ref$data === void 0 ? emptyArray : _ref$data,
-    _ref$reactTableFilter = _ref.reactTableFiltersState,
-    reactTableFiltersState = _ref$reactTableFilter === void 0 ? emptyArray : _ref$reactTableFilter;
+const emptyArray = [];
+const FilterFlyout = _ref => {
+  let {
+    updateMethod,
+    flyoutIconDescription = defaults.flyoutIconDescription,
+    align = defaults.align,
+    filters = emptyArray,
+    title = defaults.title,
+    primaryActionLabel = defaults.primaryActionLabel,
+    onFlyoutOpen = () => {},
+    onFlyoutClose = () => {},
+    onApply = () => {},
+    onCancel = () => {},
+    secondaryActionLabel = defaults.secondaryActionLabel,
+    setAllFilters,
+    data = emptyArray,
+    reactTableFiltersState = emptyArray
+  } = _ref;
   /** State */
-  var _useState = React.useState(false),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    open = _useState2[0],
-    setOpen = _useState2[1];
-  var _useState3 = React.useState(false),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    stackedLayout = _useState4[0],
-    setStackedLayout = _useState4[1];
-  var handleCancel = function handleCancel() {
+  const [open, setOpen] = React.useState(false);
+  const [stackedLayout, setStackedLayout] = React.useState(false);
+  const handleCancel = () => {
     setOpen(false);
     onCancel();
   };
-  var _useFilters = useFilters.default({
-      updateMethod: updateMethod,
-      filters: filters,
-      setAllFilters: setAllFilters,
-      variation: constants.FLYOUT,
-      reactTableFiltersState: reactTableFiltersState,
-      onCancel: handleCancel
-    }),
-    filtersState = _useFilters.filtersState,
-    prevFiltersObjectArrayRef = _useFilters.prevFiltersObjectArrayRef,
-    prevFiltersRef = _useFilters.prevFiltersRef,
-    cancel = _useFilters.cancel,
-    reset = _useFilters.reset,
-    renderFilter = _useFilters.renderFilter,
-    filtersObjectArray = _useFilters.filtersObjectArray,
-    lastAppliedFilters = _useFilters.lastAppliedFilters;
-  var width = layout.breakpoints.md.width;
-  var mdPxWidth = parseInt(width) * 16;
+  const {
+    filtersState,
+    prevFiltersObjectArrayRef,
+    prevFiltersRef,
+    cancel,
+    reset,
+    renderFilter,
+    filtersObjectArray,
+    lastAppliedFilters
+  } = useFilters.default({
+    updateMethod,
+    filters,
+    setAllFilters,
+    variation: constants.FLYOUT,
+    reactTableFiltersState,
+    onCancel: handleCancel
+  });
+  const {
+    width
+  } = layout.breakpoints.md;
+  const mdPxWidth = parseInt(width) * 16;
 
   /** Refs */
-  var filterFlyoutRef = React.useRef(null);
-  var flyoutInnerRef = React.useRef(null);
-  var flyoutFiltersContainerRef = React.useRef(null);
+  const filterFlyoutRef = React.useRef(null);
+  const flyoutInnerRef = React.useRef(null);
+  const flyoutFiltersContainerRef = React.useRef(null);
 
   /** State from hooks */
-  var _useShouldDisableButt = useShouldDisableButtons.default({
-      initialValue: true,
-      filtersState: filtersState,
-      prevFiltersRef: prevFiltersRef
-    }),
-    _useShouldDisableButt2 = _rollupPluginBabelHelpers.slicedToArray(_useShouldDisableButt, 2),
-    shouldDisableButtons = _useShouldDisableButt2[0],
-    setShouldDisableButtons = _useShouldDisableButt2[1];
+  const [shouldDisableButtons, setShouldDisableButtons] = useShouldDisableButtons.default({
+    initialValue: true,
+    filtersState,
+    prevFiltersRef
+  });
 
   // Skip resize testing
   /* istanbul ignore next */
-  var handleResize = function handleResize(current) {
-    var filterFlyoutRefPosition = flyoutInnerRef === null || flyoutInnerRef === void 0 ? void 0 : flyoutInnerRef.current.getBoundingClientRect();
-    var originalFlyoutWidth = parseInt(window.getComputedStyle(flyoutInnerRef === null || flyoutInnerRef === void 0 ? void 0 : flyoutInnerRef.current).getPropertyValue('width'));
+  const handleResize = current => {
+    const filterFlyoutRefPosition = flyoutInnerRef?.current.getBoundingClientRect();
+    const originalFlyoutWidth = parseInt(window.getComputedStyle(flyoutInnerRef?.current).getPropertyValue('width'));
     // Check to see if left value from flyout getBoundingClientRect is a negative number
     // If it is, that is the amount we need to subtract from the flyout width
     if (Math.sign(filterFlyoutRefPosition.left) === -1) {
-      var newFlyoutWidth = originalFlyoutWidth - Math.abs(filterFlyoutRefPosition.left);
+      const newFlyoutWidth = originalFlyoutWidth - Math.abs(filterFlyoutRefPosition.left);
       flyoutInnerRef.current.style.width = layout.px(newFlyoutWidth);
     }
     // Check to see if left value from flyout getBoundingClientRect is a positive number or 0
     // If it is, that is the amount we need to add to the flyout width until we reach the
     // max-width of the flyout (642)
     if (originalFlyoutWidth < 642 && Math.sign(filterFlyoutRefPosition.left) === 1 || Math.sign(filterFlyoutRefPosition.left).toString() === '0') {
-      var _newFlyoutWidth = originalFlyoutWidth + Math.abs(filterFlyoutRefPosition.left);
-      flyoutInnerRef.current.style.width = layout.px(_newFlyoutWidth);
+      const newFlyoutWidth = originalFlyoutWidth + Math.abs(filterFlyoutRefPosition.left);
+      flyoutInnerRef.current.style.width = layout.px(newFlyoutWidth);
     }
     // Begin stacking filters at this specific point
-    if ((current === null || current === void 0 ? void 0 : current.innerWidth) <= mdPxWidth + 254) {
+    if (current?.innerWidth <= mdPxWidth + 254) {
       setStackedLayout(true);
     } else {
       setStackedLayout(false);
     }
   };
-  useWindowResize.useWindowResize(function (_ref2) {
-    var current = _ref2.current;
+  useWindowResize.useWindowResize(_ref2 => {
+    let {
+      current
+    } = _ref2;
     handleResize(current);
   });
 
   /** Context */
-  var _useContext = React.useContext(FilterProvider.FilterContext),
-    localDispatch = _useContext.dispatch;
+  const {
+    dispatch: localDispatch
+  } = React.useContext(FilterProvider.FilterContext);
 
   /** Memos */
-  var showActionSet = updateMethod === constants.BATCH;
-  var carbonPrefix = react.usePrefix();
+  const showActionSet = updateMethod === constants.BATCH;
+  const carbonPrefix = react.usePrefix();
 
   /** Methods */
-  var openFlyout = function openFlyout() {
+  const openFlyout = () => {
     setOpen(true);
     onFlyoutOpen();
   };
-  var closeFlyout = function closeFlyout() {
+  const closeFlyout = () => {
     setOpen(false);
     onFlyoutClose();
     flyoutInnerRef.current.style.width = layout.px(642);
   };
-  React.useEffect(function () {
+  React.useEffect(() => {
     // Initialize flyout width
     flyoutInnerRef.current.style.width = layout.px(642);
   }, []);
-  var apply = function apply() {
+  const apply = () => {
     setAllFilters(filtersObjectArray);
     closeFlyout();
     // From the user
     onApply({
-      filtersState: filtersState,
-      filtersObjectArray: filtersObjectArray,
-      lastAppliedFilters: lastAppliedFilters
+      filtersState,
+      filtersObjectArray,
+      lastAppliedFilters
     });
     // When the user clicks apply, the action set buttons should be disabled again
     setShouldDisableButtons(true);
@@ -196,10 +182,8 @@ var FilterFlyout = function FilterFlyout(_ref) {
   };
 
   /** Renders all filters */
-  var renderFilters = function renderFilters() {
-    return filters.map(renderFilter);
-  };
-  var renderActionSet = function renderActionSet() {
+  const renderFilters = () => filters.map(renderFilter);
+  const renderActionSet = () => {
     return showActionSet && /*#__PURE__*/React.createElement(ActionSet.ActionSet, {
       actions: [{
         key: 1,
@@ -222,9 +206,9 @@ var FilterFlyout = function FilterFlyout(_ref) {
 
   /** Effects */
   // Close flyout when clicking outside
-  useClickOutside.useClickOutside(filterFlyoutRef, function (target) {
-    var hasClickedOnDatePicker = target.closest('.flatpickr-calendar');
-    var hasClickedOnDropdown = target.className === "".concat(carbonPrefix, "--list-box__menu-item__option");
+  useClickOutside.useClickOutside(filterFlyoutRef, target => {
+    const hasClickedOnDatePicker = target.closest('.flatpickr-calendar');
+    const hasClickedOnDropdown = target.className === `${carbonPrefix}--list-box__menu-item__option`;
 
     // Do not do anything if flyout is closed or if clicking on anything
     // rendered via a portal
@@ -237,31 +221,39 @@ var FilterFlyout = function FilterFlyout(_ref) {
 
   // tableId is passed in from the event emitter from the FilterSummary component
   // in  DatagridContent
-  useSubscribeToEventEmitter.default(constants.CLEAR_FILTERS, function (tableId) {
+  useSubscribeToEventEmitter.default(constants.CLEAR_FILTERS, tableId => {
     reset(tableId);
   });
   React.useEffect(function reflectLastAppliedFiltersWhenReactTableUpdates() {
     lastAppliedFilters.current = JSON.stringify(reactTableFiltersState);
   }, [reactTableFiltersState, lastAppliedFilters]);
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(componentClass, "__container"),
+    className: `${componentClass}__container`,
     ref: filterFlyoutRef
   }, /*#__PURE__*/React.createElement(react.IconButton, {
     label: flyoutIconDescription,
     kind: "ghost",
     align: align,
     onClick: open ? closeFlyout : openFlyout,
-    className: cx("".concat(componentClass, "__trigger"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(componentClass, "__trigger--open"), open)),
+    className: cx(`${componentClass}__trigger`, {
+      [`${componentClass}__trigger--open`]: open
+    }),
     disabled: data.length === 0
   }, _Filter || (_Filter = /*#__PURE__*/React.createElement(icons.Filter, null))), /*#__PURE__*/React.createElement("div", {
-    className: cx(componentClass, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(componentClass, "--open"), open), "".concat(componentClass, "--batch"), showActionSet), "".concat(componentClass, "--instant"), !showActionSet)),
+    className: cx(componentClass, {
+      [`${componentClass}--open`]: open,
+      [`${componentClass}--batch`]: showActionSet,
+      [`${componentClass}--instant`]: !showActionSet
+    }),
     ref: flyoutInnerRef
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(componentClass, "__inner-container")
+    className: `${componentClass}__inner-container`
   }, /*#__PURE__*/React.createElement("span", {
-    className: "".concat(componentClass, "__title")
+    className: `${componentClass}__title`
   }, title), /*#__PURE__*/React.createElement("div", {
-    className: cx("".concat(componentClass, "__filters"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(componentClass, "__stacked"), stackedLayout)),
+    className: cx(`${componentClass}__filters`, {
+      [`${componentClass}__stacked`]: stackedLayout
+    }),
     ref: flyoutFiltersContainerRef
   }, renderFilters())), renderActionSet()));
 };