@carbon/ibm-products 1.42.1 → 1.44.0

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

@@ -19,8 +19,7 @@ var _hooks = require("../../../../../global/js/hooks");
 var _settings = require("../../../../../settings");
 var _ActionSet = require("../../../../ActionSet");
 var _constants = require("./constants");
-var _FilterProvider = require("./FilterProvider");
-var _useInitialStateFromFilters = _interopRequireDefault(require("./hooks/useInitialStateFromFilters"));
+var _hooks2 = require("./hooks");
 var _utils = require("./utils");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -50,17 +49,15 @@ var FilterFlyout = function FilterFlyout(_ref) {
     onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel,
     _ref$secondaryActionL = _ref.secondaryActionLabel,
     secondaryActionLabel = _ref$secondaryActionL === void 0 ? 'Cancel' : _ref$secondaryActionL,
-    setAllFilters = _ref.setAllFilters;
-  /** Context state and methods */
-  var _useContext = (0, _react.useContext)(_FilterProvider.FilterContext),
-    EventEmitter = _useContext.EventEmitter;
-
+    setAllFilters = _ref.setAllFilters,
+    _ref$data = _ref.data,
+    data = _ref$data === void 0 ? [] : _ref$data;
   /** State */
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
-  var _useInitialStateFromF = (0, _useInitialStateFromFilters.default)(filters),
+  var _useInitialStateFromF = (0, _hooks2.useInitialStateFromFilters)(filters, _constants.FLYOUT),
     _useInitialStateFromF2 = (0, _slicedToArray2.default)(_useInitialStateFromF, 2),
     filtersState = _useInitialStateFromF2[0],
     setFiltersState = _useInitialStateFromF2[1];
@@ -90,6 +87,7 @@ var FilterFlyout = function FilterFlyout(_ref) {
   var apply = function apply() {
     setAllFilters(filtersObjectArray);
     closeFlyout();
+    // From the user
     onApply();
 
     // updates the ref so next time the flyout opens we have records of the previous filters
@@ -106,7 +104,7 @@ var FilterFlyout = function FilterFlyout(_ref) {
   };
   var reset = function reset() {
     // Get the initial values for the filters
-    var initialFiltersState = (0, _utils.getInitialStateFromFilters)(filters);
+    var initialFiltersState = (0, _utils.getInitialStateFromFilters)(filters, _constants.FLYOUT);
     var initialFiltersObjectArray = [];
 
     // Set the state to the initial values
@@ -149,6 +147,23 @@ var FilterFlyout = function FilterFlyout(_ref) {
         type: type
       });
     }
+    if (type === _constants.CHECKBOX) {
+      /**
+      When all checkboxes of a group are all unselected the value still exists in the filtersObjectArray
+      This checks if all the checkboxes are selected = false and removes it from the array
+      */
+      var index = filtersObjectArrayCopy.findIndex(function (filter) {
+        return filter.id === column;
+      });
+
+      // If all the selected state is false remove from array
+      var shouldRemoveFromArray = filtersObjectArrayCopy[index].value.every(function (val) {
+        return val.selected === false;
+      });
+      if (shouldRemoveFromArray) {
+        filtersObjectArrayCopy.splice(index, 1);
+      }
+    }
     setFiltersObjectArray(filtersObjectArrayCopy);
 
     // Automatically apply the filters if the updateMethod is instant
@@ -160,18 +175,16 @@ var FilterFlyout = function FilterFlyout(_ref) {
   /** Effects */
   (0, _hooks.useClickOutside)(filterFlyoutRef, function (target) {
     var hasClickedOnDatePicker = target.closest('.flatpickr-calendar');
-    if (!open || hasClickedOnDatePicker) {
+    var hasClickedOnDropdown = target.className === 'bx--list-box__menu-item__option';
+    if (!open || hasClickedOnDatePicker || hasClickedOnDropdown) {
       return;
     }
     cancel();
   });
-  (0, _react.useEffect)(function subscribeToEmitter() {
-    // This event is emitted from the DatagridToolbar component when clearFilters is clicked in FilterSummary
-    EventEmitter.subscribe(_constants.CLEAR_FILTERS, reset);
-  });
+  (0, _hooks2.useSubscribeToEventEmitter)(_constants.CLEAR_FILTERS, reset);
 
   /** Render the individual filter component */
-  var renderFilter = (0, _react.useCallback)(function (_ref3) {
+  var renderFilter = function renderFilter(_ref3) {
     var type = _ref3.type,
       column = _ref3.column,
       components = _ref3.props;
@@ -179,7 +192,10 @@ var FilterFlyout = function FilterFlyout(_ref) {
       return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.DatePicker, (0, _extends2.default)({}, components.DatePicker, {
         onChange: function onChange(value) {
           var _components$DatePicke, _components$DatePicke2;
-          setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, value)));
+          setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, {
+            value: value,
+            type: type
+          })));
           applyFilters({
             column: column,
             value: value,
@@ -187,7 +203,7 @@ var FilterFlyout = function FilterFlyout(_ref) {
           });
           (_components$DatePicke = (_components$DatePicke2 = components.DatePicker).onChange) === null || _components$DatePicke === void 0 ? void 0 : _components$DatePicke.call(_components$DatePicke2, value);
         },
-        value: filtersState[column],
+        value: filtersState[column].value,
         datePickerType: "range"
       }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.DatePickerInput, (0, _extends2.default)({
         placeholder: "mm/dd/yyyy",
@@ -204,7 +220,10 @@ var FilterFlyout = function FilterFlyout(_ref) {
       }, components.NumberInput, {
         onChange: function onChange(event) {
           var _components$NumberInp, _components$NumberInp2;
-          setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, event.target.value)));
+          setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, {
+            value: event.target.value,
+            type: type
+          })));
           applyFilters({
             column: column,
             value: event.target.value,
@@ -212,24 +231,27 @@ var FilterFlyout = function FilterFlyout(_ref) {
           });
           (_components$NumberInp = (_components$NumberInp2 = components.NumberInput).onChange) === null || _components$NumberInp === void 0 ? void 0 : _components$NumberInp.call(_components$NumberInp2, event);
         },
-        value: filtersState[column]
+        value: filtersState[column].value
       }));
     } else if (type === _constants.CHECKBOX) {
-      return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.FormGroup, components.FormGroup, filtersState[column].map(function (option) {
+      return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.FormGroup, components.FormGroup, filtersState[column].value.map(function (option) {
         return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Checkbox, (0, _extends2.default)({
           key: option.labelText
         }, option, {
           onChange: function onChange(isSelected) {
             var _option$onChange;
-            var checkboxCopy = filtersState[column];
+            var checkboxCopy = filtersState[column].value;
             var foundCheckbox = checkboxCopy.find(function (checkbox) {
               return checkbox.value === option.value;
             });
             foundCheckbox.selected = isSelected;
-            setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, checkboxCopy)));
+            setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, {
+              value: checkboxCopy,
+              type: type
+            })));
             applyFilters({
               column: column,
-              value: (0, _toConsumableArray2.default)(filtersState[column]),
+              value: (0, _toConsumableArray2.default)(filtersState[column].value),
               type: type
             });
             (_option$onChange = option.onChange) === null || _option$onChange === void 0 ? void 0 : _option$onChange.call(option, isSelected);
@@ -239,10 +261,13 @@ var FilterFlyout = function FilterFlyout(_ref) {
       }));
     } else if (type === _constants.RADIO) {
       return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.FormGroup, components.FormGroup, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButtonGroup, (0, _extends2.default)({}, components.RadioButtonGroup, {
-        valueSelected: filtersState[column],
+        valueSelected: filtersState[column].value,
         onChange: function onChange(selected) {
           var _components$RadioButt, _components$RadioButt2;
-          setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, selected)));
+          setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, {
+            value: selected,
+            type: type
+          })));
           applyFilters({
             column: column,
             value: selected,
@@ -258,11 +283,14 @@ var FilterFlyout = function FilterFlyout(_ref) {
       })));
     } else if (type === _constants.DROPDOWN) {
       return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Dropdown, (0, _extends2.default)({}, components.Dropdown, {
-        selectedItem: filtersState[column],
+        selectedItem: filtersState[column].value,
         onChange: function onChange(_ref5) {
           var _components$Dropdown$, _components$Dropdown;
           var selectedItem = _ref5.selectedItem;
-          setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, selectedItem)));
+          setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, {
+            value: selectedItem,
+            type: type
+          })));
           applyFilters({
             column: column,
             value: selectedItem,
@@ -272,12 +300,12 @@ var FilterFlyout = function FilterFlyout(_ref) {
         }
       }));
     }
-  }, [filtersState, applyFilters, setFiltersState]);
+  };
 
   /** Renders all filters */
-  var renderFilters = (0, _react.useCallback)(function () {
+  var renderFilters = function renderFilters() {
     return filters.map(renderFilter);
-  }, [filters, renderFilter]);
+  };
   var renderActionSet = function renderActionSet() {
     return showActionSet && /*#__PURE__*/_react.default.createElement(_ActionSet.ActionSet, {
       actions: [{
@@ -306,7 +334,8 @@ var FilterFlyout = function FilterFlyout(_ref) {
     renderIcon: _iconsReact.Filter16,
     iconDescription: flyoutIconDescription,
     onClick: open ? closeFlyout : openFlyout,
-    className: (0, _classnames.default)("".concat(componentClass, "__trigger"), (0, _defineProperty2.default)({}, "".concat(componentClass, "__trigger--open"), open))
+    className: (0, _classnames.default)("".concat(componentClass, "__trigger"), (0, _defineProperty2.default)({}, "".concat(componentClass, "__trigger--open"), open)),
+    disabled: data.length === 0
   }), /*#__PURE__*/_react.default.createElement("div", {
     ref: filterFlyoutRef,
     className: (0, _classnames.default)(componentClass, (_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(componentClass, "--open"), open), (0, _defineProperty2.default)(_cx2, "".concat(componentClass, "--batch"), showActionSet), (0, _defineProperty2.default)(_cx2, "".concat(componentClass, "--instant"), !showActionSet), _cx2))
@@ -319,6 +348,10 @@ var FilterFlyout = function FilterFlyout(_ref) {
   }, renderFilters())), renderActionSet()));
 };
 FilterFlyout.propTypes = {
+  /**
+   * All data rows in the table
+   */
+  data: _propTypes.default.array.isRequired,
   /**
    * Array of filters to render
    */