@bigbinary/neeto-filters-frontend 3.0.0 → 3.0.1

package/dist/index.js

@@ -1,14 +1,14 @@
 import React, { useState, useRef, useEffect, useTransition, useMemo } from 'react';
 import classnames from 'classnames';
-import { curryN, isNil, complement, curry, isEmpty, either, groupBy, anyPass, any, toLower, mergeLeft, identity, omit, mergeRight, toPairs, concat, pluck, has as has$1, equals, pick, modify, prop, isNotNil, append, last, not } from 'ramda';
+import { curryN, isNil, complement, isEmpty, curry, either, groupBy, anyPass, any, toLower, mergeLeft, identity, omit, mergeRight, toPairs, concat, pluck, has as has$1, equals, pick, modify, prop, isNotNil, append, last, not } from 'ramda';
+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 { useTranslation, Trans } from 'react-i18next';
 import { useHistory, useLocation } from 'react-router-dom';
-import { useHotKeys, useMutationWithInvalidation, useDebounce, withT } from '@bigbinary/neeto-commons-frontend/react-utils';
 import { Close, Search, Check, MenuHorizontal, Down, Settings } from '@bigbinary/neeto-icons';
 import i18next, { t as t$1 } from 'i18next';
 import dayjs from 'dayjs';
-import { getQueryParams, dateFormat } from '@bigbinary/neeto-commons-frontend/utils';
 import * as yup from 'yup';
 import timezone from 'dayjs/plugin/timezone';
 import utc from 'dayjs/plugin/utc';
@@ -427,8 +427,8 @@ dayjs.extend(timezone);
 dayjs.extend(weekday);
 dayjs.Ls.en.weekStart = 1;
 
-function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var groupByGroup = groupBy(function (_ref) {
   var group = _ref.group;
   return group || "individual";
@@ -592,9 +592,9 @@ var buildFiltersFromSearchParams = function buildFiltersFromSearchParams(columns
       return mergeLeft({
         value: ""
       }, column);
-    } else if (isNil(value) || value === "") {
+    } else if (isNil(value) || value === "" || column.key === "keyword") {
       return null;
-    } else if (column.key === "keyword") {
+    } else if (column.key === "search_term") {
       return mergeLeft({
         value: value,
         type: "text",
@@ -721,7 +721,7 @@ var buildDatePayload = function buildDatePayload(value) {
 var buildSingleDatePayload = function buildSingleDatePayload(filter) {
   var value = filter.value;
   var filterValue = Array.isArray(value) ? value.join(",") : value;
-  return _objectSpread$5(_objectSpread$5({}, filter), {}, {
+  return _objectSpread$4(_objectSpread$4({}, filter), {}, {
     value: filterValue,
     type: "date"
   });
@@ -729,7 +729,7 @@ var buildSingleDatePayload = function buildSingleDatePayload(filter) {
 var buildSingleTimePayload = function buildSingleTimePayload(filter) {
   var value = filter.value;
   var filterValue = Array.isArray(value) ? value.join(",") : value;
-  return _objectSpread$5(_objectSpread$5({}, filter), {}, {
+  return _objectSpread$4(_objectSpread$4({}, filter), {}, {
     value: filterValue,
     type: "time"
   });
@@ -750,7 +750,7 @@ var buildFiltersPayload = function buildFiltersPayload(filters) {
   var payload = removeBy({
     value: ""
   }, filters).map(function (filter) {
-    if (filter.key === "keyword" && isMultiModelFilter(filter)) {
+    if (filter.key === "search_term" && isMultiModelFilter(filter)) {
       return splitFilter(filter);
     }
     var filterPayload = omit(["key", "label", "values", "setValue"], filter);
@@ -784,14 +784,14 @@ var buildSegmentsPayload = function buildSegmentsPayload(filters) {
   var payload = removeBy({
     value: ""
   }, filters).map(function (filter) {
-    if (filter.key === "keyword") {
+    if (filter.key === "search_term") {
       return false;
     }
     var filterPayload = omit(["label", "values", "setValue", "defaultValue"], filter);
     var _filterPayload$defaul2 = filterPayload.defaultType,
       defaultType = _filterPayload$defaul2 === void 0 ? filterPayload.type : _filterPayload$defaul2,
       value = filterPayload.value;
-    if (filter.key !== "keyword" && isMultiModelFilter(filterPayload)) {
+    if (filter.key !== "search_term" && isMultiModelFilter(filterPayload)) {
       throw i18next.t("neetoFilters.errors.cannotPassMultipleModels");
     }
     if (isMulti(defaultType)) {
@@ -893,7 +893,7 @@ var createUrlParamString = function createUrlParamString(_ref15) {
     _filter$defaultType = filter.defaultType,
     defaultType = _filter$defaultType === void 0 ? filter.type : _filter$defaultType,
     rule = filter.rule;
-  if (key === "keyword") {
+  if (key === "search_term") {
     return value;
   } else if (isDigit(defaultType) || isText(defaultType)) {
     return "".concat(value, "+rule-").concat(rule);
@@ -931,7 +931,7 @@ var buildUrlFromFilters = function buildUrlFromFilters(_ref16) {
     delete searchParams["segmentId"];
   }
   var defaultFilters = buildDefaultFilters(columns, filters);
-  delete searchParams["keyword"];
+  delete searchParams["search_term"];
   concat(filters, defaultFilters).forEach(function (filter) {
     searchParams[filter.key] = createUrlParamString({
       filter: filter,
@@ -968,9 +968,9 @@ var buildUrlFromSegment = function buildUrlFromSegment(_ref19) {
     return !defaultValue && delete searchParams[key];
   });
   var defaultFilters = buildDefaultFilters(columns, filters);
-  delete searchParams["keyword"];
-  isNotEmpty(id) && (searchParams["segmentId"] = id);
+  delete searchParams["searchTerm"];
   concat(filters, defaultFilters).forEach(function (filter) {
+    isNotEmpty(id) && (searchParams["segmentId"] = id);
     searchParams[filter.key] = createUrlParamStringForSegments({
       filter: filter,
       columns: columns
@@ -978,8 +978,8 @@ var buildUrlFromSegment = function buildUrlFromSegment(_ref19) {
   });
   return new URLSearchParams(searchParams).toString();
 };
-var getKeywordValueFromUrl = function getKeywordValueFromUrl() {
-  return getQueryParams()["keyword"] || "";
+var getSearchTermFromUrl = function getSearchTermFromUrl() {
+  return getQueryParams()["search_term"] || "";
 };
 var buildFilterColumnsFromFields = function buildFilterColumnsFromFields(_ref21) {
   var fields = _ref21.fields,
@@ -1014,7 +1014,7 @@ var buildFilterColumnsFromFields = function buildFilterColumnsFromFields(_ref21)
 };
 var getColumnsWithStandardizedType = function getColumnsWithStandardizedType(columns) {
   return columns.map(function (column) {
-    return _objectSpread$5(_objectSpread$5({}, column), {}, {
+    return _objectSpread$4(_objectSpread$4({}, column), {}, {
       type: standardizeColumnType(column.type)
     });
   });
@@ -1091,7 +1091,7 @@ var buildRuleValue = function buildRuleValue(_ref) {
   return "";
 };
 var hasOnlyKeywordFilter = function hasOnlyKeywordFilter(filters) {
-  return filters.length === 1 && filters[0].key === "keyword";
+  return filters.length === 1 && filters[0].key === "search_term";
 };
 
 var Block = function Block(_ref) {
@@ -1235,8 +1235,8 @@ var QUERY_KEYS = {
 };
 var SEGMENTS_STALE_TIME = 900000; // 15 mins
 
-function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var SEGMENTS_LIST = QUERY_KEYS.SEGMENTS_LIST;
 var useFetchSegments = function useFetchSegments(_ref) {
   var entity = _ref.entity,
@@ -1263,17 +1263,17 @@ var useShowSegment = function useShowSegment(id) {
   }, options));
 };
 var useCreateSegment = function useCreateSegment(options) {
-  return useMutationWithInvalidation(segmentsApi.create, _objectSpread$4({
+  return useMutationWithInvalidation(segmentsApi.create, _objectSpread$3({
     keysToInvalidate: [SEGMENTS_LIST]
   }, options));
 };
 var useUpdateSegment = function useUpdateSegment(options) {
-  return useMutationWithInvalidation(segmentsApi.update, _objectSpread$4({
+  return useMutationWithInvalidation(segmentsApi.update, _objectSpread$3({
     keysToInvalidate: [SEGMENTS_LIST]
   }, options));
 };
 var useDestroySegment = function useDestroySegment(options) {
-  return useMutationWithInvalidation(segmentsApi.destroy, _objectSpread$4({
+  return useMutationWithInvalidation(segmentsApi.destroy, _objectSpread$3({
     keysToInvalidate: [SEGMENTS_LIST]
   }, options));
 };
@@ -1423,8 +1423,8 @@ var Segment = function Segment(_ref) {
   }));
 };
 
-function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Bar = function Bar(_ref) {
   var entity = _ref.entity,
     className = _ref.className,
@@ -1443,14 +1443,17 @@ var Bar = function Bar(_ref) {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var initialRenderRef = useRef(true);
-  var searchParams = new URLSearchParams(window.location.search);
-  var keywordFilter = _objectSpread$3({
-    key: "keyword",
+  var searchParams = useQueryParams();
+  var keywordValue = searchParams.search_term || "";
+  var keywordFilter = _objectSpread$2(_objectSpread$2({
     type: "text",
     rule: "contains",
-    label: t("neetoFilters.labels.keyword")
-  }, keyword);
-  var filters = buildFiltersFromSearchParams(keyword.value !== "" ? [keywordFilter].concat(_toConsumableArray(columns)) : columns);
+    label: t("neetoFilters.common.searchTerm")
+  }, keyword), {}, {
+    key: "search_term",
+    value: keywordValue
+  });
+  var filters = buildFiltersFromSearchParams(isNotEmpty(keywordValue) ? [keywordFilter].concat(_toConsumableArray(columns)) : columns);
   var nonHiddenFilters = removeBy({
     hidden: true
   }, filters);
@@ -1466,11 +1469,11 @@ var Bar = function Bar(_ref) {
     return function () {
       return clearTimeout(handler);
     };
-  }, [keyword.value]);
+  }, [keywordValue]);
   var handleSubmit = function handleSubmit(newFilters, isClearAll) {
-    var params = buildUrlFromFilters(_objectSpread$3({
+    var params = buildUrlFromFilters(_objectSpread$2({
       columns: columns,
-      filters: keyword.value !== "" ? [].concat(_toConsumableArray(newFilters), [keywordFilter]) : newFilters
+      filters: isNotEmpty(getSearchTermFromUrl()) ? [].concat(_toConsumableArray(newFilters), [keywordFilter]) : newFilters
     }, isClearAll && {
       isClearAll: true,
       childrenKeys: childrenKeys
@@ -1480,15 +1483,16 @@ var Bar = function Bar(_ref) {
     });
   };
   var handleDelete = function handleDelete(key) {
-    if (key === "keyword") {
-      keyword.setValue("");
-      keyword.value = "";
+    if (key === "search_term") {
+      var params = omit(["search_term"], getQueryParams());
+      var pathname = window.location.pathname;
+      history.push(buildUrl(pathname, params));
+      return;
     }
     if (childrenKeys.includes(key)) {
-      searchParams["delete"](key);
-      history.push({
-        search: searchParams.toString()
-      });
+      var _params = omit([key], getQueryParams());
+      var _pathname = window.location.pathname;
+      history.push(buildUrl(_pathname, _params));
     }
     var newFilters = removeBy({
       key: key
@@ -1496,12 +1500,13 @@ var Bar = function Bar(_ref) {
     handleSubmit(newFilters);
   };
   var handleClearAll = function handleClearAll() {
-    keyword.setValue("");
-    keyword.value = "";
+    var params = omit(["search_term"], getQueryParams());
+    var pathname = window.location.pathname;
+    history.push(buildUrl(pathname, params));
     handleSubmit([], true);
   };
   var childrenFiltersApplied = childrenKeys.some(function (key) {
-    return searchParams.get(key);
+    return searchParams.has(key);
   });
   var hideClearButton = nonHiddenFilters.every(function (_ref2) {
     var defaultValue = _ref2.defaultValue,
@@ -1523,7 +1528,7 @@ var Bar = function Bar(_ref) {
       className: "neeto-filters-bar--separator"
     }));
   }), childrenKeys.filter(function (childKey) {
-    return searchParams.get(childKey);
+    return has$1(childKey, searchParams);
   }).map(function (childKey) {
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: childKey
@@ -4015,12 +4020,10 @@ Slider.Header = Header;
 Slider.Body = Body;
 Slider.Footer = Footer;
 
-function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var useFilters = function useFilters(_ref) {
   var onFiltersChange = _ref.onFiltersChange,
     columns = _ref.columns,
-    keyword = _ref.keyword,
+    keywordFilter = _ref.keywordFilter,
     onSelectorsChange = _ref.onSelectorsChange;
   var _useTransition = useTransition(),
     _useTransition2 = _slicedToArray(_useTransition, 2);
@@ -4032,16 +4035,10 @@ var useFilters = function useFilters(_ref) {
   var filters = buildFiltersFromSearchParams(columns, false);
   var history = useHistory();
   var defaultValuesOfColumns = JSON.stringify(pluck("defaultValue", columns));
-  var keywordFilter = _objectSpread$2({
-    key: "keyword",
-    type: "text",
-    rule: "contains",
-    label: "Keyword"
-  }, keyword);
   var handlePrecenseOfDefaultFilters = function handlePrecenseOfDefaultFilters(defaultFilters) {
     var params = buildUrlFromFilters({
       columns: columns,
-      filters: keyword.value !== "" ? [].concat(_toConsumableArray(defaultFilters), [keywordFilter]) : defaultFilters
+      filters: isNotEmpty(getSearchTermFromUrl()) ? [].concat(_toConsumableArray(defaultFilters), [keywordFilter]) : defaultFilters
     });
     history.replace({
       search: params
@@ -4061,7 +4058,7 @@ var useFilters = function useFilters(_ref) {
       return;
     }
     var newFilters = buildFiltersFromSearchParams(columns);
-    var filtersPayload = keyword.value ? append(keywordFilter, newFilters) : newFilters;
+    var filtersPayload = isNotEmpty(getSearchTermFromUrl()) ? append(keywordFilter, newFilters) : newFilters;
     handleFiltersChange(filtersPayload);
     onSelectorsChange(buildSelectorsFromURL(columns));
   };
@@ -4079,14 +4076,12 @@ var useFilters = function useFilters(_ref) {
         })
       });
       filters = buildFiltersFromSearchParams(columns, false);
-      isNil(searchParams["keyword"]) && keyword.setValue("");
     }
   };
   useEffect(function () {
     if (initialRender.current) {
       initialRender.current = false;
-      var keywordValue = getKeywordValueFromUrl();
-      keyword.setValue(keywordValue);
+      var keywordValue = getSearchTermFromUrl();
       var defaultFilters = buildDefaultFilters(columns, filters);
       isNotEmpty(defaultFilters) && handlePrecenseOfDefaultFilters(defaultFilters);
       prevFilters.current = append(mergeRight(keywordFilter, {
@@ -4798,7 +4793,7 @@ var Pane = function Pane(_ref) {
     childrenKeys = _ref$childrenKeys === void 0 ? [] : _ref$childrenKeys,
     children = _ref.children,
     otherProps = _objectWithoutProperties(_ref, _excluded);
-  var searchParams = getQueryParams();
+  var searchParams = useQueryParams();
   var _useState = useState(""),
     _useState2 = _slicedToArray(_useState, 2),
     searchTerm = _useState2[0],
@@ -4821,7 +4816,7 @@ var Pane = function Pane(_ref) {
     var isClearAll = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     var params = buildUrlFromFilters(_objectSpread$1({
       columns: columns,
-      filters: keyword.value !== "" ? [].concat(_toConsumableArray(newFilters), [keywordFilter]) : newFilters
+      filters: isNotEmpty(getSearchTermFromUrl()) ? [].concat(_toConsumableArray(newFilters), [keywordFilter]) : newFilters
     }, isClearAll && {
       isClearAll: true,
       childrenKeys: childrenKeys
@@ -4830,21 +4825,24 @@ var Pane = function Pane(_ref) {
       search: params
     });
   };
+  var keywordFilter = _objectSpread$1(_objectSpread$1({
+    type: "text",
+    rule: "contains",
+    label: t("neetoFilters.common.searchTerm")
+  }, keyword), {}, {
+    key: "search_term",
+    value: searchParams.search_term || ""
+  });
   var filters = useFilters({
     onFiltersChange: onChange,
     columns: columns,
-    keyword: keyword,
+    keywordFilter: keywordFilter,
     onSelectorsChange: onSelectorsChange
   });
-  var keywordFilter = _objectSpread$1({
-    key: "keyword",
-    type: "text",
-    rule: "contains",
-    label: t("neetoFilters.labels.keyword")
-  }, keyword);
   var handleClearAll = function handleClearAll() {
-    keyword.setValue("");
-    keyword.value = "";
+    var params = omit(["search_term"], getQueryParams());
+    var pathname = window.location.pathname;
+    history.push(buildUrl(pathname, params));
     handleChange([], true);
   };
   var handleClose = function handleClose() {