@bigbinary/neeto-filters-frontend 3.0.11 → 3.0.13

package/dist/index.js

@@ -5,10 +5,10 @@ import { capitalize, removeBy, findBy, isNotEmpty, humanize, hyphenate, noop as
 import { useHotKeys, useMutationWithInvalidation, useQueryParams, useDebounce, withT } from '@bigbinary/neeto-commons-frontend/react-utils';
 import { getQueryParams, dateFormat, buildUrl } from '@bigbinary/neeto-commons-frontend/utils';
 import { Tooltip, Typography, Dropdown as Dropdown$2, Button, Pane as Pane$1, Alert, Select, DatePicker, TimePicker, Input as Input$1, Accordion, Spinner } from '@bigbinary/neetoui';
-import { groupBy, anyPass, isNil, isEmpty, any, toLower, mergeLeft, identity, omit, mergeRight, toPairs, not, pluck, either, has, concat, equals, pick, modify, prop, isNotNil, append, last } from 'ramda';
+import { groupBy, anyPass, isNil, isEmpty, any, toLower, mergeLeft, identity, omit, mergeRight, toPairs, not, pluck, either, has, concat, equals, pick, modify, prop, isNotNil, append, last, mergeDeepRight } from 'ramda';
 import { useTranslation, Trans } from 'react-i18next';
 import { useHistory, useLocation } from 'react-router-dom';
-import { Close, MenuHorizontal, Down, Settings } from '@bigbinary/neeto-icons';
+import { Help, Close, MenuHorizontal, Down, Settings } from '@bigbinary/neeto-icons';
 import { Form, Input, ActionBlock } from '@bigbinary/neetoui/formik';
 import { useQuery } from 'react-query';
 import axios from 'axios';
@@ -249,6 +249,12 @@ var DEFAULT_BOOLEAN_OPTIONS = [{
   label: t$1("neetoFilters.common.no"),
   value: "false"
 }];
+var DEFAULT_HELP_ICON_PROPS = {
+  icon: Help,
+  tooltipProps: {
+    position: "right"
+  }
+};
 
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
@@ -2564,12 +2570,11 @@ var findDateOption = function findDateOption(filter, options) {
   var currentMoment = dayjs();
   var diffWithStart = Math.abs(currentMoment.diff(dayjs(value[0]), "year"));
   var diffWithEnd = Math.abs(currentMoment.diff(dayjs(value[1]), "year"));
-  var returnOption = diffWithStart < diffWithEnd ? findBy({
+  return diffWithStart < diffWithEnd ? findBy({
     value: "after"
   }, options) : findBy({
     value: "before"
   }, options);
-  return returnOption;
 };
 var buildDateValues = function buildDateValues(dates, selectedRule) {
   if (selectedRule.value === "after") {
@@ -2579,6 +2584,9 @@ var buildDateValues = function buildDateValues(dates, selectedRule) {
   }
   return dates;
 };
+var buildHelpIconProps = function buildHelpIconProps(helpIconProps) {
+  return mergeDeepRight(DEFAULT_HELP_ICON_PROPS, helpIconProps);
+};
 
 var Boolean = function Boolean(_ref) {
   var column = _ref.column,
@@ -2589,7 +2597,9 @@ var Boolean = function Boolean(_ref) {
     _column$defaultType = column.defaultType,
     defaultType = _column$defaultType === void 0 ? column.type : _column$defaultType,
     label = column.label,
-    values = column.values;
+    values = column.values,
+    _column$helpIconProps = column.helpIconProps,
+    helpIconProps = _column$helpIconProps === void 0 ? {} : _column$helpIconProps;
   var options = isNil(values) || isEmpty(values) ? DEFAULT_BOOLEAN_OPTIONS : values;
   var otherProps = getOtherProps(column);
   var value = buildDropdownValue({
@@ -2618,7 +2628,12 @@ var Boolean = function Boolean(_ref) {
     label: label,
     options: options,
     value: value,
-    isClearable: true,
+    isClearable: true
+  }, isNotEmpty(helpIconProps) && {
+    labelProps: {
+      helpIconProps: buildHelpIconProps(helpIconProps)
+    }
+  }, {
     "data-cy": "neeto-filters-".concat(hyphenate(key), "-filter"),
     strategy: "fixed",
     placeholder: t("neetoFilters.messages.selectOption", {
@@ -2643,7 +2658,9 @@ var Datetime = function Datetime(_ref) {
   var key = column.key,
     _column$defaultType = column.defaultType,
     defaultType = _column$defaultType === void 0 ? column.type : _column$defaultType,
-    label = column.label;
+    label = column.label,
+    _column$helpIconProps = column.helpIconProps,
+    helpIconProps = _column$helpIconProps === void 0 ? {} : _column$helpIconProps;
   var isDatePickerShown = filter && isCustomDateRange(filter.value);
   var otherProps = getOtherProps(column);
   var handleChange = function handleChange(option) {
@@ -2686,7 +2703,7 @@ var Datetime = function Datetime(_ref) {
   }, [filter]);
   return /*#__PURE__*/React.createElement("div", {
     className: "neeto-filters-pane-filter__item-wrapper"
-  }, /*#__PURE__*/React.createElement(Select, {
+  }, /*#__PURE__*/React.createElement(Select, _extends({
     autoFocus: autoFocus,
     label: label,
     isClearable: true,
@@ -2696,9 +2713,14 @@ var Datetime = function Datetime(_ref) {
     value: selectedRule,
     placeholder: t("neetoFilters.messages.selectResource", {
       resource: label
-    }),
+    })
+  }, isNotEmpty(helpIconProps) && {
+    labelProps: {
+      helpIconProps: buildHelpIconProps(helpIconProps)
+    }
+  }, {
     onChange: handleChange
-  }), isDatePickerShown && /*#__PURE__*/React.createElement(DatePicker, _extends({
+  })), isDatePickerShown && /*#__PURE__*/React.createElement(DatePicker, _extends({
     "data-cy": "neeto-filters-".concat(hyphenate(key), "-date-range"),
     getPopupContainer: prop("parentNode"),
     type: (selectedRule === null || selectedRule === void 0 ? void 0 : selectedRule.value) === "custom-date-range" ? "range" : "date",
@@ -2720,7 +2742,9 @@ var Dropdown = function Dropdown(_ref) {
     _column$defaultType = column.defaultType,
     defaultType = _column$defaultType === void 0 ? column.type : _column$defaultType,
     _column$isClearable = column.isClearable,
-    isClearable = _column$isClearable === void 0 ? true : _column$isClearable;
+    isClearable = _column$isClearable === void 0 ? true : _column$isClearable,
+    _column$helpIconProps = column.helpIconProps,
+    helpIconProps = _column$helpIconProps === void 0 ? {} : _column$helpIconProps;
   var otherProps = getOtherProps(column);
   var options = buildDropdownOptions({
     defaultType: defaultType,
@@ -2759,7 +2783,12 @@ var Dropdown = function Dropdown(_ref) {
     strategy: "fixed",
     placeholder: t("neetoFilters.messages.selectResource", {
       resource: label
-    }),
+    })
+  }, isNotEmpty(helpIconProps) && {
+    labelProps: {
+      helpIconProps: buildHelpIconProps(helpIconProps)
+    }
+  }, {
     onChange: handleChange
   }, otherProps));
 };
@@ -2782,7 +2811,9 @@ var SingleDatetime = function SingleDatetime(_ref) {
   var key = column.key,
     _column$defaultType = column.defaultType,
     defaultType = _column$defaultType === void 0 ? column.type : _column$defaultType,
-    label = column.label;
+    label = column.label,
+    _column$helpIconProps = column.helpIconProps,
+    helpIconProps = _column$helpIconProps === void 0 ? {} : _column$helpIconProps;
   var otherProps = getOtherProps(column);
   var datePickerType = selectedRule.value === "between" ? "range" : "date";
   var value = filter === null || filter === void 0 ? void 0 : filter.value;
@@ -2830,15 +2861,20 @@ var SingleDatetime = function SingleDatetime(_ref) {
   };
   return /*#__PURE__*/React.createElement("div", {
     className: "neeto-filters-pane-filter__item-wrapper"
-  }, /*#__PURE__*/React.createElement(Select, {
+  }, /*#__PURE__*/React.createElement(Select, _extends({
     label: label,
     "data-cy": "neeto-filters-".concat(hyphenate(key), "-filter-rule"),
     defaultValue: SINGLE_DATE_OPTIONS[0],
     options: SINGLE_DATE_OPTIONS,
     strategy: "fixed",
-    value: selectedRule,
+    value: selectedRule
+  }, isNotEmpty(helpIconProps) && {
+    labelProps: {
+      helpIconProps: buildHelpIconProps(helpIconProps)
+    }
+  }, {
     onChange: handleRuleChange
-  }), /*#__PURE__*/React.createElement(DatePicker, _extends({
+  })), /*#__PURE__*/React.createElement(DatePicker, _extends({
     autoFocus: autoFocus,
     value: value,
     "data-cy": "neeto-filters-".concat(hyphenate(key), "-filter"),
@@ -2865,7 +2901,9 @@ var SingleTime = function SingleTime(_ref) {
   var key = column.key,
     _column$defaultType = column.defaultType,
     defaultType = _column$defaultType === void 0 ? column.type : _column$defaultType,
-    label = column.label;
+    label = column.label,
+    _column$helpIconProps = column.helpIconProps,
+    helpIconProps = _column$helpIconProps === void 0 ? {} : _column$helpIconProps;
   var otherProps = getOtherProps(column);
   var timePickerType = selectedRule.value === "between" ? "range" : "time";
   var value = filter === null || filter === void 0 ? void 0 : filter.value;
@@ -2905,14 +2943,19 @@ var SingleTime = function SingleTime(_ref) {
   };
   return /*#__PURE__*/React.createElement("div", {
     className: "neeto-filters-pane-filter__item-wrapper"
-  }, /*#__PURE__*/React.createElement(Select, {
+  }, /*#__PURE__*/React.createElement(Select, _extends({
     label: label,
     defaultValue: SINGLE_TIME_OPTIONS[0],
     options: SINGLE_TIME_OPTIONS,
     strategy: "fixed",
-    value: selectedRule,
+    value: selectedRule
+  }, isNotEmpty(helpIconProps) && {
+    labelProps: {
+      helpIconProps: buildHelpIconProps(helpIconProps)
+    }
+  }, {
     onChange: handleRuleChange
-  }), /*#__PURE__*/React.createElement(TimePicker, _extends({
+  })), /*#__PURE__*/React.createElement(TimePicker, _extends({
     autoFocus: autoFocus,
     value: value,
     use12Hours: true,
@@ -2937,7 +2980,9 @@ var Text = function Text(_ref) {
     defaultType = _column$defaultType === void 0 ? column.type : _column$defaultType,
     label = column.label,
     _column$showRuleSelec = column.showRuleSelector,
-    showRuleSelector = _column$showRuleSelec === void 0 ? false : _column$showRuleSelec;
+    showRuleSelector = _column$showRuleSelec === void 0 ? false : _column$showRuleSelec,
+    _column$helpIconProps = column.helpIconProps,
+    helpIconProps = _column$helpIconProps === void 0 ? {} : _column$helpIconProps;
   var otherProps = getOtherProps(column);
   var ruleOptions = buildRuleOptions({
     defaultType: defaultType
@@ -2997,7 +3042,7 @@ var Text = function Text(_ref) {
   }, [debouncedInputValue]);
   return /*#__PURE__*/React.createElement("div", {
     className: "neeto-filters-pane-filter__item-wrapper"
-  }, showRuleSelector && /*#__PURE__*/React.createElement(Select, {
+  }, showRuleSelector && /*#__PURE__*/React.createElement(Select, _extends({
     label: label,
     "data-cy": "neeto-filters-".concat(hyphenate(key), "-filter-rule"),
     defaultValue: ruleOptions[0],
@@ -3005,12 +3050,21 @@ var Text = function Text(_ref) {
     strategy: "fixed",
     value: selectedRule,
     onChange: handleRuleChange
-  }), /*#__PURE__*/React.createElement(Input$1, _extends({
+  }, isNotEmpty(helpIconProps) && {
+    labelProps: {
+      helpIconProps: buildHelpIconProps(helpIconProps)
+    }
+  })), /*#__PURE__*/React.createElement(Input$1, _extends({
     autoFocus: autoFocus,
     "data-cy": "neeto-filters-".concat(hyphenate(key), "-filter"),
     label: !showRuleSelector && label,
     type: inputType,
-    value: inputValue,
+    value: inputValue
+  }, isNotEmpty(helpIconProps) && {
+    labelProps: {
+      helpIconProps: buildHelpIconProps(helpIconProps)
+    }
+  }, {
     placeholder: t("neetoFilters.messages.enterResource", {
       resource: label
     }),
@@ -3029,7 +3083,9 @@ var Time = function Time(_ref) {
   var key = column.key,
     _column$defaultType = column.defaultType,
     defaultType = _column$defaultType === void 0 ? column.type : _column$defaultType,
-    label = column.label;
+    label = column.label,
+    _column$helpIconProps = column.helpIconProps,
+    helpIconProps = _column$helpIconProps === void 0 ? {} : _column$helpIconProps;
   var otherProps = getOtherProps(column);
   var value = buildSingleTimeValue(filter);
   var isCustomTimeRangeShown = filter && isCustomTimeRange(filter.value);
@@ -3063,7 +3119,7 @@ var Time = function Time(_ref) {
   };
   return /*#__PURE__*/React.createElement("div", {
     className: "neeto-filters-pane-filter__item-wrapper"
-  }, /*#__PURE__*/React.createElement(Select, {
+  }, /*#__PURE__*/React.createElement(Select, _extends({
     autoFocus: autoFocus,
     label: label,
     value: value,
@@ -3073,9 +3129,14 @@ var Time = function Time(_ref) {
     strategy: "fixed",
     placeholder: t("neetoFilters.messages.selectResource", {
       resource: label
-    }),
+    })
+  }, isNotEmpty(helpIconProps) && {
+    labelProps: {
+      helpIconProps: buildHelpIconProps(helpIconProps)
+    }
+  }, {
     onChange: handleChange
-  }), isCustomTimeRangeShown && /*#__PURE__*/React.createElement(TimePicker, _extends({
+  })), isCustomTimeRangeShown && /*#__PURE__*/React.createElement(TimePicker, _extends({
     use12Hours: true,
     "data-cy": "neeto-filters-".concat(hyphenate(key), "-date-range"),
     format: "h:mm A",