@bigbinary/neeto-filters-frontend 3.3.1 → 3.3.3

package/dist/index.js

@@ -6,7 +6,7 @@ import { useDebounce, useQueryParams, useMutationWithInvalidation, withT } from
 import { groupBy, anyPass, isNil, isEmpty, any, concat, omit, mergeLeft, toLower, identity, mergeRight, toPairs, pluck, either, not, has, equals, pick, last, modify, append, mergeDeepRight, prop, assoc, reject, sortBy, project } from 'ramda';
 import { useQuery, useQueryClient } from 'react-query';
 import { Help, Delete as Delete$1, Plus, Close, Down } from '@bigbinary/neeto-icons';
-import { Select, DatePicker, TimePickerInput, Input, Button, Pane as Pane$1, Typography, Accordion, Tooltip, Dropdown as Dropdown$2, Alert, Spinner } from '@bigbinary/neetoui';
+import { Select, DatePicker, TimePickerInput, Input, TreeSelect as TreeSelect$2, Button, Pane as Pane$1, Typography, Accordion, Tooltip, Dropdown as Dropdown$2, Alert, Spinner } from '@bigbinary/neetoui';
 import { Form, Input as Input$1, ActionBlock } from '@bigbinary/neetoui/formik';
 import { useTranslation, Trans } from 'react-i18next';
 import { useHistory } from 'react-router-dom/cjs/react-router-dom.min';
@@ -350,6 +350,16 @@ var DEFAULT_BOOLEAN_OPTIONS = [{
   label: t$1("neetoFilters.common.no"),
   value: "false"
 }];
+var TREE_SELECT_RULES = [{
+  label: t$1("neetoFilters.rules.in"),
+  value: "in"
+}, {
+  label: t$1("neetoFilters.rules.notIn"),
+  value: "not_in"
+}, {
+  label: t$1("neetoFilters.rules.isEmpty"),
+  value: "is_unknown"
+}];
 var DEFAULT_HELP_ICON_PROPS = {
   icon: Help,
   tooltipProps: {
@@ -405,6 +415,9 @@ var isText = function isText(type) {
 var isDigit = function isDigit(type) {
   return ["number", "decimal", "custom.decimal", "custom.number"].includes(type);
 };
+var isTreeSelect = function isTreeSelect(type) {
+  return type === "tree_select";
+};
 var isCustomDateRange = function isCustomDateRange(value) {
   return !pluck("value", DATE_OPTIONS).includes(value);
 };
@@ -519,6 +532,11 @@ var buildUpdatedFilter = function buildUpdatedFilter(_ref8) {
       value: option.value,
       rule: rule
     });
+  } else if (isTreeSelect(defaultType)) {
+    return mergeLeft(filter, {
+      value: option,
+      rule: rule
+    });
   }
   return mergeLeft(filter, {
     value: option.value,
@@ -548,7 +566,7 @@ var buildFiltersFromSearchParams = function buildFiltersFromSearchParams(columns
       return mergeLeft({
         value: value
       }, column);
-    } else if (isMulti(defaultType)) {
+    } else if (isMulti(defaultType) || isTreeSelect(defaultType)) {
       var _value$split = value.split("+rule-"),
         _value$split2 = _slicedToArray(_value$split, 2),
         filterValue = _value$split2[0],
@@ -719,7 +737,7 @@ var buildFiltersPayload = function buildFiltersPayload(filters) {
     }
     if (isDate(defaultType)) {
       return mergeRight(filterPayload, buildDatePayload(value));
-    } else if (isMulti(defaultType)) {
+    } else if (isMulti(defaultType) || isTreeSelect(defaultType)) {
       return mergeRight(filterPayload, {
         value: buildMultiOptionPayload(value)
       });
@@ -857,7 +875,7 @@ var createUrlParamString = function createUrlParamString(_ref15) {
     return "".concat(value, "+rule-").concat(rule);
   } else if (isSingleDate(defaultType) || isSingleTime(defaultType)) {
     return value && "".concat(value, "+rule-").concat(rule) || value;
-  } else if (isMulti(defaultType)) {
+  } else if (isMulti(defaultType) || isTreeSelect(defaultType)) {
     return "".concat(value.join("|"), "+rule-").concat(rule);
   } else if (isSingle(defaultType)) {
     return "".concat(value, "+rule-").concat(rule);
@@ -997,7 +1015,7 @@ var buildDropdownValue = function buildDropdownValue(_ref) {
     filter = _ref.filter,
     options = _ref.options;
   if (!filter) return null;
-  if (isMulti(defaultType)) {
+  if (isMulti(defaultType) || isTreeSelect(defaultType)) {
     return options.filter(function (_ref2) {
       var value = _ref2.value;
       return filter.value.includes(value);
@@ -1735,6 +1753,100 @@ var Time = function Time(_ref) {
 };
 var Time$1 = /*#__PURE__*/React.memo(Time);
 
+var TreeSelect = function TreeSelect(_ref) {
+  var _findBy;
+  var autoFocus = _ref.autoFocus,
+    column = _ref.column,
+    filter = _ref.filter,
+    handleApplyFilter = _ref.handleApplyFilter;
+  var key = column.key,
+    label = column.label,
+    _column$defaultType = column.defaultType,
+    defaultType = _column$defaultType === void 0 ? column.type : _column$defaultType,
+    defaultValue = column.defaultValue,
+    _column$helpIconProps = column.helpIconProps,
+    helpIconProps = _column$helpIconProps === void 0 ? {} : _column$helpIconProps,
+    _column$isClearable = column.isClearable,
+    isClearable = _column$isClearable === void 0 ? true : _column$isClearable,
+    _column$showRuleSelec = column.showRuleSelector,
+    showRuleSelector = _column$showRuleSelec === void 0 ? false : _column$showRuleSelec,
+    options = column.values;
+  var initialRule = (_findBy = findBy({
+    value: filter === null || filter === void 0 ? void 0 : filter.rule
+  }, TREE_SELECT_RULES)) !== null && _findBy !== void 0 ? _findBy : TREE_SELECT_RULES[0];
+  var _useState = useState(initialRule),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedRule = _useState2[0],
+    setSelectedRule = _useState2[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var selectedOption = buildDropdownValue({
+    defaultType: defaultType,
+    filter: filter,
+    options: options
+  });
+  var handleChange = function handleChange(option) {
+    if (isNotPresent(option)) return handleApplyFilter({
+      _delete: true
+    });
+    var updatedFilter = buildUpdatedFilter({
+      column: column,
+      defaultType: defaultType,
+      option: option,
+      rule: selectedRule.value
+    });
+    return handleApplyFilter(updatedFilter);
+  };
+  var handleRuleChange = function handleRuleChange(rule) {
+    var isPreviousRuleEmpty = isRuleEmpty(selectedRule.value);
+    var isNewRuleEmpty = isRuleEmpty(rule.value);
+    setSelectedRule(rule);
+    if (isPreviousRuleEmpty || !isNewRuleEmpty && isNotPresent(filter === null || filter === void 0 ? void 0 : filter.value)) {
+      return handleApplyFilter({
+        _delete: true
+      });
+    }
+    var updatedFilter = buildUpdatedFilter({
+      column: column,
+      defaultType: defaultType,
+      option: isNewRuleEmpty ? [options[0]] : selectedOption,
+      rule: rule.value
+    });
+    return handleApplyFilter(updatedFilter);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "neeto-filters-pane-filter__item-wrapper"
+  }, showRuleSelector && /*#__PURE__*/React.createElement(Select, {
+    label: label,
+    defaultValue: TREE_SELECT_RULES[0],
+    options: TREE_SELECT_RULES,
+    value: selectedRule,
+    onChange: handleRuleChange
+  }), !isRuleEmpty(selectedRule.value) &&
+  /*#__PURE__*/
+  // eslint-disable-next-line @bigbinary/neeto/merge-spread-attributes
+  React.createElement(TreeSelect$2, _extends({
+    autoFocus: autoFocus,
+    multiple: true,
+    showSearch: true,
+    treeDataSimpleMode: true,
+    allowClear: !defaultValue && isClearable,
+    "data-cy": "neeto-filters-".concat(hyphenate(key), "-filter"),
+    label: !showRuleSelector && label,
+    treeData: options,
+    value: selectedOption,
+    placeholder: t("neetoFilters.messages.selectResource", {
+      resource: label
+    }),
+    onChange: handleChange
+  }, isNotEmpty(helpIconProps) && {
+    labelProps: {
+      helpIconProps: buildHelpIconProps(helpIconProps)
+    }
+  }, getOtherProps(column))));
+};
+var TreeSelect$1 = /*#__PURE__*/React.memo(TreeSelect);
+
 var Item = function Item(_ref) {
   var column = _ref.column,
     filters = _ref.filters,
@@ -1809,6 +1921,14 @@ var Item = function Item(_ref) {
       handleApplyFilter: handleApplyFilter
     });
   }
+  if (isTreeSelect(defaultType)) {
+    return /*#__PURE__*/React.createElement(TreeSelect$1, {
+      autoFocus: autoFocus,
+      column: column,
+      filter: filter,
+      handleApplyFilter: handleApplyFilter
+    });
+  }
   return /*#__PURE__*/React.createElement(Dropdown$1, {
     autoFocus: autoFocus,
     column: column,
@@ -2133,7 +2253,7 @@ var buildFilterValue = function buildFilterValue(filter) {
     return value.map(dateFormat.time).join(" - ");
   } else if (isDate(defaultType) || isTime(defaultType)) {
     return humanize(value);
-  } else if (isMulti(defaultType)) {
+  } else if (isMulti(defaultType) || isTreeSelect(defaultType)) {
     return value.map(function (value) {
       var _findBy;
       return ((_findBy = findBy({
@@ -2173,7 +2293,7 @@ var buildRuleValue = function buildRuleValue(_ref) {
     return findBy({
       value: rule
     }, SINGLE_TIME_OPTIONS).label;
-  } else if (isMulti(defaultType) || isSingle(defaultType)) {
+  } else if (isMulti(defaultType) || isSingle(defaultType) || isTreeSelect(defaultType)) {
     return isRuleEmpty(rule) ? t$1("neetoFilters.rules.isEmpty") : "";
   }
   return "";