@bigbinary/neeto-filters-frontend 3.3.1 → 3.3.3

package/README.md

@@ -432,8 +432,8 @@ this case, all the users whose email address contains `bigbinary` in the
 ### Adding a new type
 
 - `NeetoFiltersEngine` provides the following types: `text`, `number`,
-  `single_option`, `multi_option`, `date`, `time`, `datetime`, `date_range`, and
-  `time_range`.
+  `single_option`, `multi_option`, `date`, `time`, `datetime`, `date_range`,
+  `time_range`, and `tree_select`.
 - Sometimes we need to filter attributes that are not present in the available
   types. In this case a new type needs to be created.
 - In this case, the type needs to be specified to the NPM package by passing the

package/dist/index.cjs.js

@@ -384,6 +384,16 @@ var DEFAULT_BOOLEAN_OPTIONS = [{
   label: i18next.t("neetoFilters.common.no"),
   value: "false"
 }];
+var TREE_SELECT_RULES = [{
+  label: i18next.t("neetoFilters.rules.in"),
+  value: "in"
+}, {
+  label: i18next.t("neetoFilters.rules.notIn"),
+  value: "not_in"
+}, {
+  label: i18next.t("neetoFilters.rules.isEmpty"),
+  value: "is_unknown"
+}];
 var DEFAULT_HELP_ICON_PROPS = {
   icon: neetoIcons.Help,
   tooltipProps: {
@@ -439,6 +449,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 !ramda.pluck("value", DATE_OPTIONS).includes(value);
 };
@@ -553,6 +566,11 @@ var buildUpdatedFilter = function buildUpdatedFilter(_ref8) {
       value: option.value,
       rule: rule
     });
+  } else if (isTreeSelect(defaultType)) {
+    return ramda.mergeLeft(filter, {
+      value: option,
+      rule: rule
+    });
   }
   return ramda.mergeLeft(filter, {
     value: option.value,
@@ -582,7 +600,7 @@ var buildFiltersFromSearchParams = function buildFiltersFromSearchParams(columns
       return ramda.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],
@@ -753,7 +771,7 @@ var buildFiltersPayload = function buildFiltersPayload(filters) {
     }
     if (isDate(defaultType)) {
       return ramda.mergeRight(filterPayload, buildDatePayload(value));
-    } else if (isMulti(defaultType)) {
+    } else if (isMulti(defaultType) || isTreeSelect(defaultType)) {
       return ramda.mergeRight(filterPayload, {
         value: buildMultiOptionPayload(value)
       });
@@ -891,7 +909,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);
@@ -1031,7 +1049,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);
@@ -1769,6 +1787,100 @@ var Time = function Time(_ref) {
 };
 var Time$1 = /*#__PURE__*/React__default["default"].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 = neetoCist.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 = React.useState(initialRule),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedRule = _useState2[0],
+    setSelectedRule = _useState2[1];
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var selectedOption = buildDropdownValue({
+    defaultType: defaultType,
+    filter: filter,
+    options: options
+  });
+  var handleChange = function handleChange(option) {
+    if (neetoCist.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 && neetoCist.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__default["default"].createElement("div", {
+    className: "neeto-filters-pane-filter__item-wrapper"
+  }, showRuleSelector && /*#__PURE__*/React__default["default"].createElement(neetoui.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__default["default"].createElement(neetoui.TreeSelect, _extends({
+    autoFocus: autoFocus,
+    multiple: true,
+    showSearch: true,
+    treeDataSimpleMode: true,
+    allowClear: !defaultValue && isClearable,
+    "data-cy": "neeto-filters-".concat(neetoCist.hyphenate(key), "-filter"),
+    label: !showRuleSelector && label,
+    treeData: options,
+    value: selectedOption,
+    placeholder: t("neetoFilters.messages.selectResource", {
+      resource: label
+    }),
+    onChange: handleChange
+  }, neetoCist.isNotEmpty(helpIconProps) && {
+    labelProps: {
+      helpIconProps: buildHelpIconProps(helpIconProps)
+    }
+  }, getOtherProps(column))));
+};
+var TreeSelect$1 = /*#__PURE__*/React__default["default"].memo(TreeSelect);
+
 var Item = function Item(_ref) {
   var column = _ref.column,
     filters = _ref.filters,
@@ -1843,6 +1955,14 @@ var Item = function Item(_ref) {
       handleApplyFilter: handleApplyFilter
     });
   }
+  if (isTreeSelect(defaultType)) {
+    return /*#__PURE__*/React__default["default"].createElement(TreeSelect$1, {
+      autoFocus: autoFocus,
+      column: column,
+      filter: filter,
+      handleApplyFilter: handleApplyFilter
+    });
+  }
   return /*#__PURE__*/React__default["default"].createElement(Dropdown$1, {
     autoFocus: autoFocus,
     column: column,
@@ -2167,7 +2287,7 @@ var buildFilterValue = function buildFilterValue(filter) {
     return value.map(utils.dateFormat.time).join(" - ");
   } else if (isDate(defaultType) || isTime(defaultType)) {
     return neetoCist.humanize(value);
-  } else if (isMulti(defaultType)) {
+  } else if (isMulti(defaultType) || isTreeSelect(defaultType)) {
     return value.map(function (value) {
       var _findBy;
       return ((_findBy = neetoCist.findBy({
@@ -2207,7 +2327,7 @@ var buildRuleValue = function buildRuleValue(_ref) {
     return neetoCist.findBy({
       value: rule
     }, SINGLE_TIME_OPTIONS).label;
-  } else if (isMulti(defaultType) || isSingle(defaultType)) {
+  } else if (isMulti(defaultType) || isSingle(defaultType) || isTreeSelect(defaultType)) {
     return isRuleEmpty(rule) ? i18next.t("neetoFilters.rules.isEmpty") : "";
   }
   return "";