@usereactify/search 5.9.0 → 5.10.0-beta.1

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [5.10.0-beta.1](https://bitbucket.org/usereactify/reactify-search-ui/compare/beta-v5.10.0-beta.0...beta-v5.10.0-beta.1) (2022-10-21)
+
+
+### Features
+
+* add prefix and suffix to filter slider labels ([0eba7c2](https://bitbucket.org/usereactify/reactify-search-ui/commit/0eba7c29dd5590c1dbee7dbcaefaaf9b3cb1c886))
+* get intial slider value from URL search params ([98e5ec1](https://bitbucket.org/usereactify/reactify-search-ui/commit/98e5ec1c50735e33aea56a299557823bdec8f659))
+* improve selected filter labels ([0612f46](https://bitbucket.org/usereactify/reactify-search-ui/commit/0612f46cc136ac447552586251bcb71a7853eea3))
+
+## [5.10.0-beta.0](https://bitbucket.org/usereactify/reactify-search-ui/compare/beta-v5.9.0-beta.1...beta-v5.10.0-beta.0) (2022-10-20)
+
+
+### Features
+
+* implement custom slider filter logic ([f5ecc3a](https://bitbucket.org/usereactify/reactify-search-ui/commit/f5ecc3ae8c5e19db61b7ffbe9be4de3401c4e85c))
+* improve styling of example slider component ([1dd42dd](https://bitbucket.org/usereactify/reactify-search-ui/commit/1dd42dd6c5c4b409e538600add1074f6a114ab8e))
+* use zillow react-slider as example slider ([3be008f](https://bitbucket.org/usereactify/reactify-search-ui/commit/3be008f69d75ed5620c9b1894aa103ad5a263493))
+
 ## [5.9.0](https://bitbucket.org/usereactify/reactify-search-ui/compare/release-v5.8.2...release-v5.9.0) (2022-10-16)
 
 

package/dist/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@usereactify/search",
     "description": "React UI library for Reactify Search",
-    "version": "5.9.0",
+    "version": "5.10.0-beta.1",
     "license": "MIT",
     "main": "dist/src/index.js",
     "types": "dist/src/index.d.ts",
@@ -40,7 +40,8 @@
         "axios": "0.26.1",
         "currency.js": "2.0.4",
         "debug": "4.3.2",
-        "react-intersection-observer": "9.1.0"
+        "react-intersection-observer": "9.1.0",
+        "react-slider": "2.0.4"
     },
     "peerDependencies": {
         "@appbaseio/reactivesearch": "3.14.0",
@@ -61,6 +62,7 @@
         "@types/debug": "4.1.7",
         "@types/react": "18.0.19",
         "@types/react-dom": "18.0.6",
+        "@types/react-slider": "1.3.1",
         "babel-loader": "8.2.2",
         "husky": "4.3.8",
         "prettier": "2.4.1",

package/dist/src/components/Example/ExampleFilterSlider.js

@@ -5,16 +5,33 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExampleFilterSlider = void 0;
 const react_1 = __importDefault(require("react"));
-const DynamicRangeSlider_1 = __importDefault(require("@appbaseio/reactivesearch/lib/components/range/DynamicRangeSlider"));
-const hooks_1 = require("../../hooks");
+const react_slider_1 = __importDefault(require("react-slider"));
 const ExampleFilterSlider = (props) => {
-    const reactiveFilterSliderProps = (0, hooks_1.useReactiveFilterSliderProps)(props.filter);
+    const trackStyleEnds = {
+        top: "10px",
+        height: "8px",
+        background: "rgb(239, 239, 239)",
+        border: "1px solid rgb(179, 179, 179)",
+        borderRadius: "4px",
+    };
+    const trackStyleMiddle = Object.assign(Object.assign({}, trackStyleEnds), { background: "rgb(2, 117, 255)", border: "1px solid rgb(74, 117, 187)" });
     return (react_1.default.createElement("div", { className: "rs__filter" },
         react_1.default.createElement("h3", { className: "rs__filter__name" }, props.filter.name),
-        react_1.default.createElement(DynamicRangeSlider_1.default, Object.assign({}, reactiveFilterSliderProps, { value: () => props.filterSliderProps.value, onChange: (value) => props.filterSliderProps.handleChange({
-                start: value[0],
-                end: value[1],
-            }) }))));
+        react_1.default.createElement("div", { className: "rs__filter__slider", style: {
+                maxWidth: "300px",
+                height: "26px",
+                margin: "auto",
+                top: "6px",
+            } },
+            react_1.default.createElement(react_slider_1.default, Object.assign({ thumbClassName: "rs__filter__slider__thumb" }, props.filterSliderProps.reactSliderProps, { renderTrack: (props, state) => (react_1.default.createElement("div", Object.assign({}, props, { style: Object.assign(Object.assign({}, (state.index === 1 ? trackStyleMiddle : trackStyleEnds)), props.style) }))), renderThumb: (renderProps, state) => (react_1.default.createElement("div", Object.assign({}, renderProps, { style: Object.assign({ cursor: "grab", background: "rgb(2, 117, 255)", top: "6px", width: "16px", height: "16px", borderRadius: "100%", outline: "none" }, renderProps.style) }),
+                    react_1.default.createElement("span", { style: {
+                            position: "absolute",
+                            top: "-24px",
+                            left: "0",
+                        } },
+                        props.filter.displaySliderPrefix,
+                        state.valueNow,
+                        props.filter.displaySliderSuffix))) })))));
 };
 exports.ExampleFilterSlider = ExampleFilterSlider;
 //# sourceMappingURL=ExampleFilterSlider.js.map

package/dist/src/components/Example/ExampleFilterSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExampleFilterSlider.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleFilterSlider.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,2HAAmG;AAEnG,uCAA2D;AAOpD,MAAM,mBAAmB,GAAuC,CACrE,KAAK,EACL,EAAE;IACF,MAAM,yBAAyB,GAAG,IAAA,oCAA4B,EAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAE7E,OAAO,CACL,uCAAK,SAAS,EAAC,YAAY;QACzB,sCAAI,SAAS,EAAC,kBAAkB,IAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAM;QACzD,8BAAC,4BAAkB,oBACb,yBAAyB,IAC7B,KAAK,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,KAAK,EAC1C,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAClB,KAAK,CAAC,iBAAiB,CAAC,YAAY,CAAC;gBACnC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;gBACf,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC;aACd,CAAC,IAEJ,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AApBW,QAAA,mBAAmB,uBAoB9B","sourcesContent":["import React from \"react\";\nimport DynamicRangeSlider from \"@appbaseio/reactivesearch/lib/components/range/DynamicRangeSlider\";\n\nimport { useReactiveFilterSliderProps } from \"../../hooks\";\nimport { FilterProps } from \"../../components\";\n\nexport type ExampleFilterSliderProps = React.ComponentProps<\n  NonNullable<FilterProps[\"renderFilterSlider\"]>\n>;\n\nexport const ExampleFilterSlider: React.FC<ExampleFilterSliderProps> = (\n  props\n) => {\n  const reactiveFilterSliderProps = useReactiveFilterSliderProps(props.filter);\n\n  return (\n    <div className=\"rs__filter\">\n      <h3 className=\"rs__filter__name\">{props.filter.name}</h3>\n      <DynamicRangeSlider\n        {...reactiveFilterSliderProps}\n        value={() => props.filterSliderProps.value}\n        onChange={(value) =>\n          props.filterSliderProps.handleChange({\n            start: value[0],\n            end: value[1],\n          })\n        }\n      />\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"ExampleFilterSlider.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleFilterSlider.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,gEAAuC;AAOhC,MAAM,mBAAmB,GAAuC,CACrE,KAAK,EACL,EAAE;IACF,MAAM,cAAc,GAAG;QACrB,GAAG,EAAE,MAAM;QACX,MAAM,EAAE,KAAK;QACb,UAAU,EAAE,oBAAoB;QAChC,MAAM,EAAE,8BAA8B;QACtC,YAAY,EAAE,KAAK;KACpB,CAAC;IACF,MAAM,gBAAgB,mCACjB,cAAc,KACjB,UAAU,EAAE,kBAAkB,EAC9B,MAAM,EAAE,6BAA6B,GACtC,CAAC;IAEF,OAAO,CACL,uCAAK,SAAS,EAAC,YAAY;QACzB,sCAAI,SAAS,EAAC,kBAAkB,IAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAM;QACzD,uCACE,SAAS,EAAC,oBAAoB,EAC9B,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;gBACjB,MAAM,EAAE,MAAM;gBACd,MAAM,EAAE,MAAM;gBACd,GAAG,EAAE,KAAK;aACX;YAED,8BAAC,sBAAW,kBACV,cAAc,EAAC,2BAA2B,IACtC,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,IAC5C,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC7B,uDACM,KAAK,IACT,KAAK,kCACA,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,cAAc,CAAC,GACvD,KAAK,CAAC,KAAK,KAEX,CACR,EACD,WAAW,EAAE,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE,CAAC,CACnC,uDACM,WAAW,IACf,KAAK,kBACH,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,kBAAkB,EAC9B,GAAG,EAAE,KAAK,EACV,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,MAAM,EACpB,OAAO,EAAE,MAAM,IACZ,WAAW,CAAC,KAAK;oBAGtB,wCACE,KAAK,EAAE;4BACL,QAAQ,EAAE,UAAU;4BACpB,GAAG,EAAE,OAAO;4BACZ,IAAI,EAAE,GAAG;yBACV;wBAEA,KAAK,CAAC,MAAM,CAAC,mBAAmB;wBAChC,KAAK,CAAC,QAAQ;wBACd,KAAK,CAAC,MAAM,CAAC,mBAAmB,CAC5B,CACH,CACP,IACD,CACE,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAvEW,QAAA,mBAAmB,uBAuE9B","sourcesContent":["import React from \"react\";\nimport ReactSlider from \"react-slider\";\nimport { FilterProps } from \"../../components\";\n\nexport type ExampleFilterSliderProps = React.ComponentProps<\n  NonNullable<FilterProps[\"renderFilterSlider\"]>\n>;\n\nexport const ExampleFilterSlider: React.FC<ExampleFilterSliderProps> = (\n  props\n) => {\n  const trackStyleEnds = {\n    top: \"10px\",\n    height: \"8px\",\n    background: \"rgb(239, 239, 239)\",\n    border: \"1px solid rgb(179, 179, 179)\",\n    borderRadius: \"4px\",\n  };\n  const trackStyleMiddle = {\n    ...trackStyleEnds,\n    background: \"rgb(2, 117, 255)\",\n    border: \"1px solid rgb(74, 117, 187)\",\n  };\n\n  return (\n    <div className=\"rs__filter\">\n      <h3 className=\"rs__filter__name\">{props.filter.name}</h3>\n      <div\n        className=\"rs__filter__slider\"\n        style={{\n          maxWidth: \"300px\",\n          height: \"26px\",\n          margin: \"auto\",\n          top: \"6px\",\n        }}\n      >\n        <ReactSlider\n          thumbClassName=\"rs__filter__slider__thumb\"\n          {...props.filterSliderProps.reactSliderProps}\n          renderTrack={(props, state) => (\n            <div\n              {...props}\n              style={{\n                ...(state.index === 1 ? trackStyleMiddle : trackStyleEnds),\n                ...props.style,\n              }}\n            ></div>\n          )}\n          renderThumb={(renderProps, state) => (\n            <div\n              {...renderProps}\n              style={{\n                cursor: \"grab\",\n                background: \"rgb(2, 117, 255)\",\n                top: \"6px\",\n                width: \"16px\",\n                height: \"16px\",\n                borderRadius: \"100%\",\n                outline: \"none\",\n                ...renderProps.style,\n              }}\n            >\n              <span\n                style={{\n                  position: \"absolute\",\n                  top: \"-24px\",\n                  left: \"0\",\n                }}\n              >\n                {props.filter.displaySliderPrefix}\n                {state.valueNow}\n                {props.filter.displaySliderSuffix}\n              </span>\n            </div>\n          )}\n        />\n      </div>\n    </div>\n  );\n};\n"]}

package/dist/src/components/Example/ExampleFiltersSelected.js

@@ -5,18 +5,44 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExampleFiltersSelected = void 0;
 const react_1 = __importDefault(require("react"));
+const hooks_1 = require("../../hooks");
 const ExampleFiltersSelected = (props) => {
     return (react_1.default.createElement("div", { className: "rs__filters-selected" },
         react_1.default.createElement("h3", { className: "rs__filters-selected__name" }, "Filters Selected"),
-        react_1.default.createElement("ul", { className: "rs__filters-selected__list" }, props.selectedFilters.map((selectedFilter) => (react_1.default.createElement("li", { key: selectedFilter.key, className: "rs__filters-selected__list-item" },
-            react_1.default.createElement("label", { className: "rs__filters-selected__list-item-label", onClick: () => props.handleRemove(selectedFilter.key) },
-                react_1.default.createElement("span", { className: "rs__filters-selected__list-item-label" },
-                    selectedFilter.label,
-                    ": "),
-                react_1.default.createElement("span", { className: "rs__filters-selected__list-item-value" }, parseFromSelectedValue(selectedFilter.value)))))))));
+        react_1.default.createElement("ul", { className: "rs__filters-selected__list" }, props.selectedFilters.map((selectedFilter) => (react_1.default.createElement(ExampleFiltersSelectedItem, { selectedFilter: selectedFilter, handleRemove: props.handleRemove }))))));
 };
 exports.ExampleFiltersSelected = ExampleFiltersSelected;
-const parseFromSelectedValue = (value) => {
+const ExampleFiltersSelectedItem = (props) => {
+    const filtersHook = (0, hooks_1.useFilters)();
+    const label = react_1.default.useMemo(() => {
+        var _a;
+        return parseFromSelectedValue(props.selectedFilter.value, ((_a = filtersHook.filters) !== null && _a !== void 0 ? _a : []).find((filter) => filter.handle === props.selectedFilter.key));
+    }, [props.selectedFilter.value, filtersHook.filters]);
+    return (react_1.default.createElement("li", { key: props.selectedFilter.key, className: "rs__filters-selected__list-item" },
+        react_1.default.createElement("label", { className: "rs__filters-selected__list-item-label", onClick: () => props.handleRemove(props.selectedFilter.key) },
+            react_1.default.createElement("span", { className: "rs__filters-selected__list-item-label" },
+                props.selectedFilter.label,
+                ": "),
+            react_1.default.createElement("span", { className: "rs__filters-selected__list-item-value" }, label))));
+};
+const parseFromSelectedValue = (value, filter) => {
+    if (filter) {
+        if (filter.displayType === "single") {
+            if (filter.displayView === "range") {
+                return value.label;
+            }
+            return value;
+        }
+        if (filter.displayType === "multi") {
+            if (filter.displayView === "range") {
+                return value.map((item) => item.label).join(", ");
+            }
+            return value.join(", ");
+        }
+        if (filter.displayType === "slider") {
+            return `${filter.displaySliderPrefix}${value[0]} to ${filter.displaySliderPrefix}${value[1]}`;
+        }
+    }
     const labelString = typeof value === "string" ? value : false;
     const labelObject = !Array.isArray(value) && typeof value === "object"
         ? `${value.start}-${value.end}`.replace("-0", "+")

package/dist/src/components/Example/ExampleFiltersSelected.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExampleFiltersSelected.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleFiltersSelected.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAQnB,MAAM,sBAAsB,GAA0C,CAC3E,KAAK,EACL,EAAE;IACF,OAAO,CACL,uCAAK,SAAS,EAAC,sBAAsB;QACnC,sCAAI,SAAS,EAAC,4BAA4B,IAAE,kBAAkB,CAAM;QACpE,sCAAI,SAAS,EAAC,4BAA4B,IACvC,KAAK,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,cAAc,EAAE,EAAE,CAAC,CAC7C,sCACE,GAAG,EAAE,cAAc,CAAC,GAAG,EACvB,SAAS,EAAC,iCAAiC;YAE3C,yCACE,SAAS,EAAC,uCAAuC,EACjD,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,GAAG,CAAC;gBAErD,wCAAM,SAAS,EAAC,uCAAuC;oBACpD,cAAc,CAAC,KAAK;oBACpB,IAAI,CACA;gBACP,wCAAM,SAAS,EAAC,uCAAuC,IACpD,sBAAsB,CAAC,cAAc,CAAC,KAAK,CAAC,CACxC,CACD,CACL,CACN,CAAC,CACC,CACD,CACP,CAAC;AACJ,CAAC,CAAC;AA7BW,QAAA,sBAAsB,0BA6BjC;AAEF,MAAM,sBAAsB,GAAG,CAAC,KAAU,EAAE,EAAE;IAC5C,MAAM,WAAW,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;IAE9D,MAAM,WAAW,GACf,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,OAAO,KAAK,KAAK,QAAQ;QAChD,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC;QAClD,CAAC,CAAC,KAAK,CAAC;IAEZ,MAAM,UAAU,GACd,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,OAAO,KAAK,CAAC,CAAC,CAAC,KAAK,QAAQ;QAClD,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;QAClB,CAAC,CAAC,KAAK,CAAC;IAEZ,MAAM,gBAAgB,GACpB,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,OAAO,KAAK,CAAC,CAAC,CAAC,KAAK,QAAQ;QAClD,CAAC,CAAC,KAAK;aACF,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;aAC7D,IAAI,CAAC,IAAI,CAAC;QACf,CAAC,CAAC,KAAK,CAAC;IAEZ,OAAO,WAAW,IAAI,WAAW,IAAI,UAAU,IAAI,gBAAgB,CAAC;AACtE,CAAC,CAAC","sourcesContent":["import React from \"react\";\n\nimport { FiltersSelectedProps } from \"../../components\";\n\nexport type ExampleFiltersSelectedProps = React.ComponentProps<\n  NonNullable<FiltersSelectedProps[\"render\"]>\n>;\n\nexport const ExampleFiltersSelected: React.FC<ExampleFiltersSelectedProps> = (\n  props\n) => {\n  return (\n    <div className=\"rs__filters-selected\">\n      <h3 className=\"rs__filters-selected__name\">{\"Filters Selected\"}</h3>\n      <ul className=\"rs__filters-selected__list\">\n        {props.selectedFilters.map((selectedFilter) => (\n          <li\n            key={selectedFilter.key}\n            className=\"rs__filters-selected__list-item\"\n          >\n            <label\n              className=\"rs__filters-selected__list-item-label\"\n              onClick={() => props.handleRemove(selectedFilter.key)}\n            >\n              <span className=\"rs__filters-selected__list-item-label\">\n                {selectedFilter.label}\n                {\": \"}\n              </span>\n              <span className=\"rs__filters-selected__list-item-value\">\n                {parseFromSelectedValue(selectedFilter.value)}\n              </span>\n            </label>\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n};\n\nconst parseFromSelectedValue = (value: any) => {\n  const labelString = typeof value === \"string\" ? value : false;\n\n  const labelObject =\n    !Array.isArray(value) && typeof value === \"object\"\n      ? `${value.start}-${value.end}`.replace(\"-0\", \"+\")\n      : false;\n\n  const labelArray =\n    Array.isArray(value) && typeof value[0] === \"string\"\n      ? value.join(\", \")\n      : false;\n\n  const labelArrayObject =\n    Array.isArray(value) && typeof value[0] === \"object\"\n      ? value\n          .map((item) => `${item.start}-${item.end}`.replace(\"-0\", \"+\"))\n          .join(\", \")\n      : false;\n\n  return labelString || labelObject || labelArray || labelArrayObject;\n};\n"]}
+{"version":3,"file":"ExampleFiltersSelected.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleFiltersSelected.tsx"],"names":[],"mappings":"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","sourcesContent":["import { stringArray } from \"@appbaseio/reactivesearch/lib/types\";\nimport React from \"react\";\n\nimport { FiltersSelectedProps } from \"../../components\";\nimport { useFilters } from \"../../hooks\";\nimport { ConfigFilterOption } from \"../../types\";\n\nexport type ExampleFiltersSelectedProps = React.ComponentProps<\n  NonNullable<FiltersSelectedProps[\"render\"]>\n>;\n\nexport const ExampleFiltersSelected: React.FC<ExampleFiltersSelectedProps> = (\n  props\n) => {\n  return (\n    <div className=\"rs__filters-selected\">\n      <h3 className=\"rs__filters-selected__name\">{\"Filters Selected\"}</h3>\n      <ul className=\"rs__filters-selected__list\">\n        {props.selectedFilters.map((selectedFilter) => (\n          <ExampleFiltersSelectedItem\n            selectedFilter={selectedFilter}\n            handleRemove={props.handleRemove}\n          />\n        ))}\n      </ul>\n    </div>\n  );\n};\n\ntype ExampleFiltersSelectedItemProps = {\n  selectedFilter: {\n    label: string;\n    key: string;\n    value: Array<string> | string | { start: number; end: number };\n  };\n  handleRemove: (filterKey: string) => void;\n};\n\nconst ExampleFiltersSelectedItem: React.FC<ExampleFiltersSelectedItemProps> = (\n  props\n) => {\n  const filtersHook = useFilters();\n\n  const label = React.useMemo<string>(() => {\n    return parseFromSelectedValue(\n      props.selectedFilter.value,\n      (filtersHook.filters ?? []).find(\n        (filter) => filter.handle === props.selectedFilter.key\n      )\n    );\n  }, [props.selectedFilter.value, filtersHook.filters]);\n\n  return (\n    <li\n      key={props.selectedFilter.key}\n      className=\"rs__filters-selected__list-item\"\n    >\n      <label\n        className=\"rs__filters-selected__list-item-label\"\n        onClick={() => props.handleRemove(props.selectedFilter.key)}\n      >\n        <span className=\"rs__filters-selected__list-item-label\">\n          {props.selectedFilter.label}\n          {\": \"}\n        </span>\n        <span className=\"rs__filters-selected__list-item-value\">{label}</span>\n      </label>\n    </li>\n  );\n};\n\nconst parseFromSelectedValue = (value: any, filter?: ConfigFilterOption) => {\n  if (filter) {\n    if (filter.displayType === \"single\") {\n      if (filter.displayView === \"range\") {\n        return value.label;\n      }\n      return value;\n    }\n    if (filter.displayType === \"multi\") {\n      if (filter.displayView === \"range\") {\n        return value.map((item: any) => item.label).join(\", \");\n      }\n      return value.join(\", \");\n    }\n    if (filter.displayType === \"slider\") {\n      return `${filter.displaySliderPrefix}${value[0]} to ${filter.displaySliderPrefix}${value[1]}`;\n    }\n  }\n\n  const labelString = typeof value === \"string\" ? value : false;\n\n  const labelObject =\n    !Array.isArray(value) && typeof value === \"object\"\n      ? `${value.start}-${value.end}`.replace(\"-0\", \"+\")\n      : false;\n\n  const labelArray =\n    Array.isArray(value) && typeof value[0] === \"string\"\n      ? value.join(\", \")\n      : false;\n\n  const labelArrayObject =\n    Array.isArray(value) && typeof value[0] === \"object\"\n      ? value\n          .map((item) => `${item.start}-${item.end}`.replace(\"-0\", \"+\"))\n          .join(\", \")\n      : false;\n\n  return labelString || labelObject || labelArray || labelArrayObject;\n};\n"]}

package/dist/src/components/Filter/Filter.js

@@ -16,9 +16,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Filter = void 0;
 const react_1 = __importDefault(require("react"));
+const ReactiveComponent_1 = __importDefault(require("@appbaseio/reactivesearch/lib/components/basic/ReactiveComponent"));
 const MultiList_1 = __importDefault(require("@appbaseio/reactivesearch/lib/components/list/MultiList"));
 const SingleList_1 = __importDefault(require("@appbaseio/reactivesearch/lib/components/list/SingleList"));
-const DynamicRangeSlider_1 = __importDefault(require("@appbaseio/reactivesearch/lib/components/range/DynamicRangeSlider"));
 const SingleRange_1 = __importDefault(require("@appbaseio/reactivesearch/lib/components/range/SingleRange"));
 const MultiRange_1 = __importDefault(require("@appbaseio/reactivesearch/lib/components/range/MultiRange"));
 const hooks_1 = require("../../hooks");
@@ -80,19 +80,82 @@ const FilterRangeMulti = (props) => {
         react_1.default.createElement(RenderRangeComponent, { filterRangeProps: filterRangeProps, filter: props.filter })));
 };
 const FilterSlider = (props) => {
-    var _a;
-    const reactiveFilterSliderProps = (0, hooks_1.useReactiveFilterSliderProps)(props.filter);
-    const filterSliderProps = (0, hooks_1.useFilterSliderProps)(props.filter);
-    const RenderSliderComponent = (_a = props.renderFilterSlider) !== null && _a !== void 0 ? _a : components_1.ExampleFilterSlider;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        props.renderFilterSlider ? (react_1.default.createElement("div", { style: {
-                display: "none",
-            } },
-            react_1.default.createElement(DynamicRangeSlider_1.default, Object.assign({}, reactiveFilterSliderProps, { value: () => filterSliderProps.value, onChange: (value) => filterSliderProps.handleChange({
-                    start: value[0],
-                    end: value[1],
-                }) })))) : null,
-        react_1.default.createElement(RenderSliderComponent, { filterSliderProps: filterSliderProps, filter: props.filter })));
+    const reactiveFilterSharedProps = (0, hooks_1.useReactiveFilterSharedProps)(props.filter);
+    const [value, setValue] = react_1.default.useState();
+    return (react_1.default.createElement(ReactiveComponent_1.default, Object.assign({}, reactiveFilterSharedProps, { defaultQuery: () => ({
+            aggs: {
+                min: {
+                    min: {
+                        field: props.filter.field,
+                    },
+                },
+                max: {
+                    max: {
+                        field: props.filter.field,
+                    },
+                },
+            },
+        }), render: (reactivesearchFilterProps) => {
+            return (react_1.default.createElement(FilterSliderInner, Object.assign({}, props, { reactivesearchFilterProps: reactivesearchFilterProps })));
+        } })));
+};
+// inner component exists only so we can use memos in reactivesearch render functions
+const FilterSliderInner = (props) => {
+    var _a, _b;
+    const { filter, renderFilterSlider, reactivesearchFilterProps } = props, otherProps = __rest(props, ["filter", "renderFilterSlider", "reactivesearchFilterProps"]);
+    const filterSliderProps = (0, hooks_1.useFilterSliderProps)(filter);
+    react_1.default.useEffect(() => {
+        if (reactivesearchFilterProps.aggregations) {
+            filterSliderProps.handleRange([
+                reactivesearchFilterProps.aggregations.min.value,
+                reactivesearchFilterProps.aggregations.max.value,
+            ]);
+        }
+    }, [
+        (_a = reactivesearchFilterProps.aggregations) === null || _a === void 0 ? void 0 : _a.min.value,
+        (_b = reactivesearchFilterProps.aggregations) === null || _b === void 0 ? void 0 : _b.max.value,
+    ]);
+    react_1.default.useEffect(() => {
+        if (filterSliderProps.value[0] === 0 && filterSliderProps.value[1] === 0) {
+            return;
+        }
+        props.reactivesearchFilterProps.setQuery({
+            query: {
+                query: {
+                    bool: {
+                        must: [
+                            {
+                                bool: {
+                                    must: [
+                                        {
+                                            match: {
+                                                published: true,
+                                            },
+                                        },
+                                        {
+                                            range: {
+                                                [props.filter.field]: {
+                                                    gte: filterSliderProps.value[0],
+                                                    lte: filterSliderProps.value[1],
+                                                    boost: 2,
+                                                },
+                                            },
+                                        },
+                                    ],
+                                },
+                            },
+                        ],
+                    },
+                },
+            },
+            value: filterSliderProps.value,
+        });
+    }, [filterSliderProps.value]);
+    if (renderFilterSlider) {
+        const Component = renderFilterSlider;
+        return (react_1.default.createElement(Component, Object.assign({ filterSliderProps: filterSliderProps, filter: filter }, otherProps)));
+    }
+    return (react_1.default.createElement(components_1.ExampleFilterSlider, Object.assign({ filterSliderProps: filterSliderProps, filter: filter }, otherProps)));
 };
 // inner component exists only so we can use memos in reactivesearch render functions
 const FilterListInner = (props) => {

package/dist/src/components/Filter/Filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Filter.js","sourceRoot":"","sources":["../../../../src/components/Filter/Filter.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\nimport MultiList from \"@appbaseio/reactivesearch/lib/components/list/MultiList\";\nimport SingleList from \"@appbaseio/reactivesearch/lib/components/list/SingleList\";\nimport DynamicRangeSlider from \"@appbaseio/reactivesearch/lib/components/range/DynamicRangeSlider\";\nimport SingleRange from \"@appbaseio/reactivesearch/lib/components/range/SingleRange\";\nimport MultiRange from \"@appbaseio/reactivesearch/lib/components/range/MultiRange\";\n\nimport type {\n  ConfigFilterOption,\n  ReactivesearchFilterListProps,\n} from \"../../types\";\nimport {\n  useFilterListProps,\n  useFilterRangeProps,\n  useFilterSliderProps,\n  useReactiveFilterListProps,\n  useReactiveFilterRangeProps,\n  useReactiveFilterSliderProps,\n} from \"../../hooks\";\nimport {\n  ExampleFilterList,\n  ExampleFilterRange,\n  ExampleFilterSlider,\n} from \"../../components\";\n\nexport type FilterProps = {\n  /** The filter option being rendered */\n  filter: ConfigFilterOption;\n  /** Render method for List filters */\n  renderFilterList?: React.FC<{\n    filter: ConfigFilterOption;\n    filterListProps: ReturnType<typeof useFilterListProps>;\n  }>;\n  /** Render method for Range filters */\n  renderFilterRange?: React.FC<{\n    filter: ConfigFilterOption;\n    filterRangeProps: ReturnType<typeof useFilterRangeProps>;\n  }>;\n  /** Render method for Slider filters */\n  renderFilterSlider?: React.FC<{\n    filter: ConfigFilterOption;\n    filterSliderProps: ReturnType<typeof useFilterSliderProps>;\n  }>;\n};\n\nexport const Filter: React.FC<FilterProps> = (props) => {\n  if (\"single\" === props.filter.displayType) {\n    if (\"range\" === props.filter.displayView) {\n      return <FilterRangeSingle {...props} />;\n    }\n    return <FilterSingleList {...props} />;\n  }\n\n  if (\"multi\" === props.filter.displayType) {\n    if (\"range\" === props.filter.displayView) {\n      return <FilterRangeMulti {...props} />;\n    }\n    return <FilterMultiList {...props} />;\n  }\n\n  if (\"slider\" === props.filter.displayType) {\n    return <FilterSlider {...props} />;\n  }\n\n  // TODO: Legacy range filter, migrate to new single and multi ranges\n  if (\"range\" === props.filter.displayType) {\n    return <FilterRangeSingle {...props} />;\n  }\n\n  console.warn(\n    `filter with display type \"${props.filter.displayType}\" not yet supported`\n  );\n\n  return null;\n};\n\nconst FilterSingleList: React.FC<FilterProps> = (props) => {\n  const reactiveFilterListProps = useReactiveFilterListProps(props.filter);\n\n  return (\n    <SingleList\n      {...reactiveFilterListProps}\n      render={(reactivesearchFilterProps: ReactivesearchFilterListProps) => (\n        <FilterListInner\n          {...props}\n          reactivesearchFilterProps={reactivesearchFilterProps}\n        />\n      )}\n    />\n  );\n};\n\nconst FilterMultiList: React.FC<FilterProps> = (props) => {\n  const reactiveFilterListProps = useReactiveFilterListProps(props.filter);\n\n  return (\n    <MultiList\n      {...reactiveFilterListProps}\n      render={(reactivesearchFilterProps: ReactivesearchFilterListProps) => (\n        <FilterListInner\n          {...props}\n          reactivesearchFilterProps={reactivesearchFilterProps}\n        />\n      )}\n    />\n  );\n};\n\nconst FilterRangeSingle: React.FC<FilterProps> = (props) => {\n  const reactiveFilterRangeProps = useReactiveFilterRangeProps(props.filter);\n\n  const filterRangeProps = useFilterRangeProps(props.filter);\n\n  const RenderRangeComponent = props.renderFilterRange ?? ExampleFilterRange;\n\n  return (\n    <>\n      <div\n        style={{\n          display: \"none\",\n        }}\n      >\n        <SingleRange\n          {...reactiveFilterRangeProps}\n          value={filterRangeProps.values[0]}\n          onChange={filterRangeProps.handleChange}\n        />\n      </div>\n      <RenderRangeComponent\n        filterRangeProps={filterRangeProps}\n        filter={props.filter}\n      />\n    </>\n  );\n};\n\nconst FilterRangeMulti: React.FC<FilterProps> = (props) => {\n  const reactiveFilterRangeProps = useReactiveFilterRangeProps(props.filter);\n\n  const filterRangeProps = useFilterRangeProps(props.filter);\n\n  const RenderRangeComponent = props.renderFilterRange ?? ExampleFilterRange;\n\n  return (\n    <>\n      <div\n        style={{\n          display: \"none\",\n        }}\n      >\n        <MultiRange\n          {...reactiveFilterRangeProps}\n          value={filterRangeProps.values}\n          onChange={filterRangeProps.handleChange}\n        />\n      </div>\n      <RenderRangeComponent\n        filterRangeProps={filterRangeProps}\n        filter={props.filter}\n      />\n    </>\n  );\n};\n\nconst FilterSlider: React.FC<FilterProps> = (props) => {\n  const reactiveFilterSliderProps = useReactiveFilterSliderProps(props.filter);\n\n  const filterSliderProps = useFilterSliderProps(props.filter);\n\n  const RenderSliderComponent = props.renderFilterSlider ?? ExampleFilterSlider;\n\n  return (\n    <>\n      {props.renderFilterSlider ? (\n        <div\n          style={{\n            display: \"none\",\n          }}\n        >\n          <DynamicRangeSlider\n            {...reactiveFilterSliderProps}\n            value={() => filterSliderProps.value}\n            onChange={(value) =>\n              filterSliderProps.handleChange({\n                start: value[0],\n                end: value[1],\n              })\n            }\n          />\n        </div>\n      ) : null}\n      <RenderSliderComponent\n        filterSliderProps={filterSliderProps}\n        filter={props.filter}\n      />\n    </>\n  );\n};\n\n// inner component exists only so we can use memos in reactivesearch render functions\nconst FilterListInner: React.FC<\n  FilterProps & { reactivesearchFilterProps: ReactivesearchFilterListProps }\n> = (props) => {\n  const { filter, renderFilterList, reactivesearchFilterProps, ...otherProps } =\n    props;\n\n  const filterListProps = useFilterListProps(filter, reactivesearchFilterProps);\n\n  // hide entire filter when no options available\n  if (0 === filterListProps.options.length) {\n    return null;\n  }\n\n  if (renderFilterList) {\n    const Component = renderFilterList;\n    return (\n      <Component\n        filterListProps={filterListProps}\n        filter={filter}\n        {...otherProps}\n      />\n    );\n  }\n\n  return (\n    <ExampleFilterList\n      filterListProps={filterListProps}\n      filter={filter}\n      {...otherProps}\n    />\n  );\n};\n"]}
+{"version":3,"file":"Filter.js","sourceRoot":"","sources":["../../../../src/components/Filter/Filter.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\nimport ReactiveComponent from \"@appbaseio/reactivesearch/lib/components/basic/ReactiveComponent\";\nimport MultiList from \"@appbaseio/reactivesearch/lib/components/list/MultiList\";\nimport SingleList from \"@appbaseio/reactivesearch/lib/components/list/SingleList\";\nimport SingleRange from \"@appbaseio/reactivesearch/lib/components/range/SingleRange\";\nimport MultiRange from \"@appbaseio/reactivesearch/lib/components/range/MultiRange\";\n\nimport type {\n  ConfigFilterOption,\n  ReactivesearchFilterListProps,\n} from \"../../types\";\nimport {\n  useFilterListProps,\n  useFilterRangeProps,\n  useFilterSliderProps,\n  useReactiveFilterListProps,\n  useReactiveFilterRangeProps,\n  useReactiveFilterSharedProps,\n  useReactiveFilterSliderProps,\n} from \"../../hooks\";\nimport {\n  ExampleFilterList,\n  ExampleFilterRange,\n  ExampleFilterSlider,\n} from \"../../components\";\nimport { useReactSliderProps } from \"../../hooks/react-slider/useReactSliderProps\";\n\nexport type FilterProps = {\n  /** The filter option being rendered */\n  filter: ConfigFilterOption;\n  /** Render method for List filters */\n  renderFilterList?: React.FC<{\n    filter: ConfigFilterOption;\n    filterListProps: ReturnType<typeof useFilterListProps>;\n  }>;\n  /** Render method for Range filters */\n  renderFilterRange?: React.FC<{\n    filter: ConfigFilterOption;\n    filterRangeProps: ReturnType<typeof useFilterRangeProps>;\n  }>;\n  /** Render method for Slider filters */\n  renderFilterSlider?: React.FC<{\n    filter: ConfigFilterOption;\n    filterSliderProps: ReturnType<typeof useFilterSliderProps>;\n    // reactSliderProps: ReturnType<typeof useReactSliderProps>;\n  }>;\n};\n\nexport const Filter: React.FC<FilterProps> = (props) => {\n  if (\"single\" === props.filter.displayType) {\n    if (\"range\" === props.filter.displayView) {\n      return <FilterRangeSingle {...props} />;\n    }\n    return <FilterSingleList {...props} />;\n  }\n\n  if (\"multi\" === props.filter.displayType) {\n    if (\"range\" === props.filter.displayView) {\n      return <FilterRangeMulti {...props} />;\n    }\n    return <FilterMultiList {...props} />;\n  }\n\n  if (\"slider\" === props.filter.displayType) {\n    return <FilterSlider {...props} />;\n  }\n\n  // TODO: Legacy range filter, migrate to new single and multi ranges\n  if (\"range\" === props.filter.displayType) {\n    return <FilterRangeSingle {...props} />;\n  }\n\n  console.warn(\n    `filter with display type \"${props.filter.displayType}\" not yet supported`\n  );\n\n  return null;\n};\n\nconst FilterSingleList: React.FC<FilterProps> = (props) => {\n  const reactiveFilterListProps = useReactiveFilterListProps(props.filter);\n\n  return (\n    <SingleList\n      {...reactiveFilterListProps}\n      render={(reactivesearchFilterProps: ReactivesearchFilterListProps) => (\n        <FilterListInner\n          {...props}\n          reactivesearchFilterProps={reactivesearchFilterProps}\n        />\n      )}\n    />\n  );\n};\n\nconst FilterMultiList: React.FC<FilterProps> = (props) => {\n  const reactiveFilterListProps = useReactiveFilterListProps(props.filter);\n\n  return (\n    <MultiList\n      {...reactiveFilterListProps}\n      render={(reactivesearchFilterProps: ReactivesearchFilterListProps) => (\n        <FilterListInner\n          {...props}\n          reactivesearchFilterProps={reactivesearchFilterProps}\n        />\n      )}\n    />\n  );\n};\n\nconst FilterRangeSingle: React.FC<FilterProps> = (props) => {\n  const reactiveFilterRangeProps = useReactiveFilterRangeProps(props.filter);\n\n  const filterRangeProps = useFilterRangeProps(props.filter);\n\n  const RenderRangeComponent = props.renderFilterRange ?? ExampleFilterRange;\n\n  return (\n    <>\n      <div\n        style={{\n          display: \"none\",\n        }}\n      >\n        <SingleRange\n          {...reactiveFilterRangeProps}\n          value={filterRangeProps.values[0]}\n          onChange={filterRangeProps.handleChange}\n        />\n      </div>\n      <RenderRangeComponent\n        filterRangeProps={filterRangeProps}\n        filter={props.filter}\n      />\n    </>\n  );\n};\n\nconst FilterRangeMulti: React.FC<FilterProps> = (props) => {\n  const reactiveFilterRangeProps = useReactiveFilterRangeProps(props.filter);\n\n  const filterRangeProps = useFilterRangeProps(props.filter);\n\n  const RenderRangeComponent = props.renderFilterRange ?? ExampleFilterRange;\n\n  return (\n    <>\n      <div\n        style={{\n          display: \"none\",\n        }}\n      >\n        <MultiRange\n          {...reactiveFilterRangeProps}\n          value={filterRangeProps.values}\n          onChange={filterRangeProps.handleChange}\n        />\n      </div>\n      <RenderRangeComponent\n        filterRangeProps={filterRangeProps}\n        filter={props.filter}\n      />\n    </>\n  );\n};\n\nconst FilterSlider: React.FC<FilterProps> = (props) => {\n  const reactiveFilterSharedProps = useReactiveFilterSharedProps(props.filter);\n  const [value, setValue] = React.useState<[number, number]>();\n\n  return (\n    <ReactiveComponent\n      {...reactiveFilterSharedProps}\n      defaultQuery={() => ({\n        aggs: {\n          min: {\n            min: {\n              field: props.filter.field,\n            },\n          },\n          max: {\n            max: {\n              field: props.filter.field,\n            },\n          },\n        },\n      })}\n      render={(reactivesearchFilterProps: any) => {\n        return (\n          <FilterSliderInner\n            {...props}\n            reactivesearchFilterProps={reactivesearchFilterProps}\n          />\n        );\n      }}\n    />\n  );\n};\n\n// inner component exists only so we can use memos in reactivesearch render functions\nconst FilterSliderInner: React.FC<\n  FilterProps & { reactivesearchFilterProps: any }\n> = (props) => {\n  const {\n    filter,\n    renderFilterSlider,\n    reactivesearchFilterProps,\n    ...otherProps\n  } = props;\n\n  const filterSliderProps = useFilterSliderProps(filter);\n\n  React.useEffect(() => {\n    if (reactivesearchFilterProps.aggregations) {\n      filterSliderProps.handleRange([\n        reactivesearchFilterProps.aggregations.min.value,\n        reactivesearchFilterProps.aggregations.max.value,\n      ]);\n    }\n  }, [\n    reactivesearchFilterProps.aggregations?.min.value,\n    reactivesearchFilterProps.aggregations?.max.value,\n  ]);\n\n  React.useEffect(() => {\n    if (filterSliderProps.value[0] === 0 && filterSliderProps.value[1] === 0) {\n      return;\n    }\n\n    props.reactivesearchFilterProps.setQuery({\n      query: {\n        query: {\n          bool: {\n            must: [\n              {\n                bool: {\n                  must: [\n                    {\n                      match: {\n                        published: true,\n                      },\n                    },\n                    {\n                      range: {\n                        [props.filter.field]: {\n                          gte: filterSliderProps.value[0],\n                          lte: filterSliderProps.value[1],\n                          boost: 2,\n                        },\n                      },\n                    },\n                  ],\n                },\n              },\n            ],\n          },\n        },\n      },\n      value: filterSliderProps.value,\n    });\n  }, [filterSliderProps.value]);\n\n  if (renderFilterSlider) {\n    const Component = renderFilterSlider;\n    return (\n      <Component\n        filterSliderProps={filterSliderProps}\n        filter={filter}\n        {...otherProps}\n      />\n    );\n  }\n\n  return (\n    <ExampleFilterSlider\n      filterSliderProps={filterSliderProps}\n      filter={filter}\n      {...otherProps}\n    />\n  );\n};\n\n// inner component exists only so we can use memos in reactivesearch render functions\nconst FilterListInner: React.FC<\n  FilterProps & { reactivesearchFilterProps: ReactivesearchFilterListProps }\n> = (props) => {\n  const { filter, renderFilterList, reactivesearchFilterProps, ...otherProps } =\n    props;\n\n  const filterListProps = useFilterListProps(filter, reactivesearchFilterProps);\n\n  // hide entire filter when no options available\n  if (0 === filterListProps.options.length) {\n    return null;\n  }\n\n  if (renderFilterList) {\n    const Component = renderFilterList;\n    return (\n      <Component\n        filterListProps={filterListProps}\n        filter={filter}\n        {...otherProps}\n      />\n    );\n  }\n\n  return (\n    <ExampleFilterList\n      filterListProps={filterListProps}\n      filter={filter}\n      {...otherProps}\n    />\n  );\n};\n"]}

package/dist/src/hooks/react-slider/useReactSliderProps.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ConfigFilterOption } from "../../types";
+import ReactSlider from "react-slider";
+export declare const useReactSliderProps: (filter: ConfigFilterOption, filterValue: [number, number], filterRange: [number, number], handleChange: (value: [number, number]) => void) => Pick<React.ComponentProps<typeof ReactSlider>, "value" | "defaultValue" | "min" | "max" | "step" | "pearling" | "minDistance" | "onChange">;

package/dist/src/hooks/react-slider/useReactSliderProps.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useReactSliderProps = void 0;
+const react_1 = __importDefault(require("react"));
+const useReactSliderProps = (filter, filterValue, filterRange, handleChange) => {
+    const reactSliderProps = react_1.default.useMemo(() => {
+        var _a;
+        return {
+            value: [
+                filterValue[0] ? filterValue[0] : filterRange[0],
+                filterValue[1] ? filterValue[1] : filterRange[1],
+            ],
+            defaultValue: [filterRange[0], filterRange[1]],
+            min: filterRange[0],
+            max: filterRange[1],
+            step: parseInt((_a = filter.displaySliderStep) !== null && _a !== void 0 ? _a : "5"),
+            pearling: true,
+            minDistance: 0,
+            onChange: (value) => Array.isArray(value) ? handleChange([value[0], value[1]]) : {},
+        };
+    }, [filter.displaySliderStep, filterValue, filterRange, handleChange]);
+    return reactSliderProps;
+};
+exports.useReactSliderProps = useReactSliderProps;
+//# sourceMappingURL=useReactSliderProps.js.map

package/dist/src/hooks/react-slider/useReactSliderProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReactSliderProps.js","sourceRoot":"","sources":["../../../../src/hooks/react-slider/useReactSliderProps.ts"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAInB,MAAM,mBAAmB,GAAG,CACjC,MAA0B,EAC1B,WAA6B,EAC7B,WAA6B,EAC7B,YAA+C,EAW/C,EAAE;IACF,MAAM,gBAAgB,GAAG,eAAK,CAAC,OAAO,CAEpC,GAAG,EAAE;;QACL,OAAO;YACL,KAAK,EAAE;gBACL,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC;gBAChD,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC;aACjD;YACD,YAAY,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;YAC9C,GAAG,EAAE,WAAW,CAAC,CAAC,CAAC;YACnB,GAAG,EAAE,WAAW,CAAC,CAAC,CAAC;YACnB,IAAI,EAAE,QAAQ,CAAC,MAAA,MAAM,CAAC,iBAAiB,mCAAI,GAAG,CAAC;YAC/C,QAAQ,EAAE,IAAI;YACd,WAAW,EAAE,CAAC;YACd,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAClB,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;SACjE,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,CAAC,iBAAiB,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC,CAAC;IAEvE,OAAO,gBAAgB,CAAC;AAC1B,CAAC,CAAC;AApCW,QAAA,mBAAmB,uBAoC9B","sourcesContent":["import React from \"react\";\nimport { ConfigFilterOption } from \"../../types\";\nimport ReactSlider from \"react-slider\";\n\nexport const useReactSliderProps = (\n  filter: ConfigFilterOption,\n  filterValue: [number, number],\n  filterRange: [number, number],\n  handleChange: (value: [number, number]) => void\n): Pick<\n  React.ComponentProps<typeof ReactSlider>,\n  | \"value\"\n  | \"defaultValue\"\n  | \"min\"\n  | \"max\"\n  | \"step\"\n  | \"pearling\"\n  | \"minDistance\"\n  | \"onChange\"\n> => {\n  const reactSliderProps = React.useMemo<\n    ReturnType<typeof useReactSliderProps>\n  >(() => {\n    return {\n      value: [\n        filterValue[0] ? filterValue[0] : filterRange[0],\n        filterValue[1] ? filterValue[1] : filterRange[1],\n      ],\n      defaultValue: [filterRange[0], filterRange[1]],\n      min: filterRange[0],\n      max: filterRange[1],\n      step: parseInt(filter.displaySliderStep ?? \"5\"),\n      pearling: true,\n      minDistance: 0,\n      onChange: (value) =>\n        Array.isArray(value) ? handleChange([value[0], value[1]]) : {},\n    };\n  }, [filter.displaySliderStep, filterValue, filterRange, handleChange]);\n\n  return reactSliderProps;\n};\n"]}

package/dist/src/hooks/useFilterSliderProps.d.ts

@@ -1,12 +1,10 @@
 import { ConfigFilterOption } from "../types/config";
+import { useReactSliderProps } from "./react-slider/useReactSliderProps";
 export declare const useFilterSliderProps: (filter: ConfigFilterOption) => {
     filter: ConfigFilterOption;
-    value: {
-        start: number;
-        end: number;
-    };
-    handleChange: (value: {
-        start: number | string;
-        end: number | string;
-    }) => void;
+    value: [number, number];
+    range: [number, number];
+    handleChange: (value: [number | string, number | string]) => void;
+    handleRange: (value: [number, number]) => void;
+    reactSliderProps: ReturnType<typeof useReactSliderProps>;
 };

package/dist/src/hooks/useFilterSliderProps.js

@@ -7,12 +7,15 @@ exports.useFilterSliderProps = void 0;
 const react_1 = __importDefault(require("react"));
 const hooks_1 = require("../hooks");
 const utility_1 = require("../utility");
+const useReactSliderProps_1 = require("./react-slider/useReactSliderProps");
 const useFilterSliderProps = (filter) => {
+    var _a;
     const { track } = (0, hooks_1.useAnalytics)();
-    const [filterValue, setFilterValue] = react_1.default.useState({
-        start: 0,
-        end: 0,
-    });
+    const urlSearchParam = new URLSearchParams(window.location.search);
+    const [filterValue, setFilterValue] = react_1.default.useState(JSON.parse((_a = urlSearchParam.get(filter.handle)) !== null && _a !== void 0 ? _a : "[0,0]"));
+    const [filterRange, setFilterRange] = react_1.default.useState([
+        0, 0,
+    ]);
     const handleChange = react_1.default.useCallback((value) => {
         utility_1.debug.breadcrumb({
             category: "filter",
@@ -24,25 +27,36 @@ const useFilterSliderProps = (filter) => {
             },
         });
         utility_1.debug.log("useFilterSliderProps", "handleChange[value]", value);
-        setFilterValue({
-            start: parseInt(`${value.start}`),
-            end: parseInt(`${value.end}`),
-        });
+        setFilterValue([parseInt(`${value[0]}`), parseInt(`${value[1]}`)]);
         track({
             eventName: "filterChange",
             payload: {
                 name: filter.name,
-                value: `${value.start}:${value.end}`,
+                value: `${value[0]}:${value[1]}`,
             },
         });
     }, [filter]);
+    const handleRange = react_1.default.useCallback((value) => {
+        setFilterRange([parseInt(`${value[0]}`), parseInt(`${value[1]}`)]);
+    }, [filter]);
+    const reactSliderProps = (0, useReactSliderProps_1.useReactSliderProps)(filter, filterValue, filterRange, handleChange);
     const filterSliderProps = react_1.default.useMemo(() => {
         return {
             handleChange,
+            handleRange,
             filter,
             value: filterValue,
+            range: filterRange,
+            reactSliderProps,
         };
-    }, [filter, filterValue, handleChange]);
+    }, [
+        handleChange,
+        handleRange,
+        filter,
+        filterValue,
+        filterRange,
+        reactSliderProps,
+    ]);
     return filterSliderProps;
 };
 exports.useFilterSliderProps = useFilterSliderProps;

package/dist/src/hooks/useFilterSliderProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFilterSliderProps.js","sourceRoot":"","sources":["../../../src/hooks/useFilterSliderProps.ts"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAG1B,oCAAwC;AACxC,wCAAmC;AAE5B,MAAM,oBAAoB,GAAG,CAClC,MAA0B,EAW1B,EAAE;IACF,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,oBAAY,GAAE,CAAC;IACjC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,eAAK,CAAC,QAAQ,CAGjD;QACD,KAAK,EAAE,CAAC;QACR,GAAG,EAAE,CAAC;KACP,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,eAAK,CAAC,WAAW,CACpC,CAAC,KAAuD,EAAE,EAAE;QAC1D,eAAK,CAAC,UAAU,CAAC;YACf,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,uBAAuB;YAChC,IAAI,EAAE;gBACJ,MAAM,EAAE,MAAM,CAAC,IAAI;gBACnB,KAAK,EAAE,MAAM,CAAC,KAAK;gBACnB,KAAK,EAAE,KAAK;aACb;SACF,CAAC,CAAC;QAEH,eAAK,CAAC,GAAG,CAAC,sBAAsB,EAAE,qBAAqB,EAAE,KAAK,CAAC,CAAC;QAEhE,cAAc,CAAC;YACb,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC;YACjC,GAAG,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC;SAC9B,CAAC,CAAC;QAEH,KAAK,CAAC;YACJ,SAAS,EAAE,cAAc;YACzB,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM,CAAC,IAAI;gBACjB,KAAK,EAAE,GAAG,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,GAAG,EAAE;aACrC;SACF,CAAC,CAAC;IACL,CAAC,EACD,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,MAAM,iBAAiB,GAAG,eAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC3C,OAAO;YACL,YAAY;YACZ,MAAM;YACN,KAAK,EAAE,WAAW;SACnB,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC,CAAC;IAExC,OAAO,iBAAiB,CAAC;AAC3B,CAAC,CAAC;AA7DW,QAAA,oBAAoB,wBA6D/B","sourcesContent":["import React from \"react\";\n\nimport { ConfigFilterOption } from \"../types/config\";\nimport { useAnalytics } from \"../hooks\";\nimport { debug } from \"../utility\";\n\nexport const useFilterSliderProps = (\n  filter: ConfigFilterOption\n): {\n  filter: ConfigFilterOption;\n  value: {\n    start: number;\n    end: number;\n  };\n  handleChange: (value: {\n    start: number | string;\n    end: number | string;\n  }) => void;\n} => {\n  const { track } = useAnalytics();\n  const [filterValue, setFilterValue] = React.useState<{\n    start: number;\n    end: number;\n  }>({\n    start: 0,\n    end: 0,\n  });\n\n  const handleChange = React.useCallback(\n    (value: { start: number | string; end: number | string }) => {\n      debug.breadcrumb({\n        category: \"filter\",\n        message: \"filter option changed\",\n        data: {\n          filter: filter.name,\n          field: filter.field,\n          value: value,\n        },\n      });\n\n      debug.log(\"useFilterSliderProps\", \"handleChange[value]\", value);\n\n      setFilterValue({\n        start: parseInt(`${value.start}`),\n        end: parseInt(`${value.end}`),\n      });\n\n      track({\n        eventName: \"filterChange\",\n        payload: {\n          name: filter.name,\n          value: `${value.start}:${value.end}`,\n        },\n      });\n    },\n    [filter]\n  );\n\n  const filterSliderProps = React.useMemo(() => {\n    return {\n      handleChange,\n      filter,\n      value: filterValue,\n    };\n  }, [filter, filterValue, handleChange]);\n\n  return filterSliderProps;\n};\n"]}
+{"version":3,"file":"useFilterSliderProps.js","sourceRoot":"","sources":["../../../src/hooks/useFilterSliderProps.ts"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,oCAAwC;AACxC,wCAAmC;AACnC,4EAAyE;AAElE,MAAM,oBAAoB,GAAG,CAClC,MAA0B,EAQ1B,EAAE;;IACF,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,oBAAY,GAAE,CAAC;IAEjC,MAAM,cAAc,GAAG,IAAI,eAAe,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IACnE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,eAAK,CAAC,QAAQ,CAClD,IAAI,CAAC,KAAK,CAAC,MAAA,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,mCAAI,OAAO,CAAC,CACzD,CAAC;IACF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAmB;QACrE,CAAC,EAAE,CAAC;KACL,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,eAAK,CAAC,WAAW,CACpC,CAAC,KAAyC,EAAE,EAAE;QAC5C,eAAK,CAAC,UAAU,CAAC;YACf,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,uBAAuB;YAChC,IAAI,EAAE;gBACJ,MAAM,EAAE,MAAM,CAAC,IAAI;gBACnB,KAAK,EAAE,MAAM,CAAC,KAAK;gBACnB,KAAK,EAAE,KAAK;aACb;SACF,CAAC,CAAC;QAEH,eAAK,CAAC,GAAG,CAAC,sBAAsB,EAAE,qBAAqB,EAAE,KAAK,CAAC,CAAC;QAEhE,cAAc,CAAC,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;QAEnE,KAAK,CAAC;YACJ,SAAS,EAAE,cAAc;YACzB,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM,CAAC,IAAI;gBACjB,KAAK,EAAE,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE;aACjC;SACF,CAAC,CAAC;IACL,CAAC,EACD,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,MAAM,WAAW,GAAG,eAAK,CAAC,WAAW,CACnC,CAAC,KAAyC,EAAE,EAAE;QAC5C,cAAc,CAAC,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IACrE,CAAC,EACD,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,MAAM,gBAAgB,GAAG,IAAA,yCAAmB,EAC1C,MAAM,EACN,WAAW,EACX,WAAW,EACX,YAAY,CACb,CAAC;IAEF,MAAM,iBAAiB,GAAG,eAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC3C,OAAO;YACL,YAAY;YACZ,WAAW;YACX,MAAM;YACN,KAAK,EAAE,WAAW;YAClB,KAAK,EAAE,WAAW;YAClB,gBAAgB;SACjB,CAAC;IACJ,CAAC,EAAE;QACD,YAAY;QACZ,WAAW;QACX,MAAM;QACN,WAAW;QACX,WAAW;QACX,gBAAgB;KACjB,CAAC,CAAC;IAEH,OAAO,iBAAiB,CAAC;AAC3B,CAAC,CAAC;AAhFW,QAAA,oBAAoB,wBAgF/B","sourcesContent":["import React from \"react\";\nimport { ConfigFilterOption } from \"../types/config\";\nimport { useAnalytics } from \"../hooks\";\nimport { debug } from \"../utility\";\nimport { useReactSliderProps } from \"./react-slider/useReactSliderProps\";\n\nexport const useFilterSliderProps = (\n  filter: ConfigFilterOption\n): {\n  filter: ConfigFilterOption;\n  value: [number, number];\n  range: [number, number];\n  handleChange: (value: [number | string, number | string]) => void;\n  handleRange: (value: [number, number]) => void;\n  reactSliderProps: ReturnType<typeof useReactSliderProps>;\n} => {\n  const { track } = useAnalytics();\n\n  const urlSearchParam = new URLSearchParams(window.location.search);\n  const [filterValue, setFilterValue] = React.useState<[number, number]>(\n    JSON.parse(urlSearchParam.get(filter.handle) ?? \"[0,0]\")\n  );\n  const [filterRange, setFilterRange] = React.useState<[number, number]>([\n    0, 0,\n  ]);\n\n  const handleChange = React.useCallback(\n    (value: [number | string, number | string]) => {\n      debug.breadcrumb({\n        category: \"filter\",\n        message: \"filter option changed\",\n        data: {\n          filter: filter.name,\n          field: filter.field,\n          value: value,\n        },\n      });\n\n      debug.log(\"useFilterSliderProps\", \"handleChange[value]\", value);\n\n      setFilterValue([parseInt(`${value[0]}`), parseInt(`${value[1]}`)]);\n\n      track({\n        eventName: \"filterChange\",\n        payload: {\n          name: filter.name,\n          value: `${value[0]}:${value[1]}`,\n        },\n      });\n    },\n    [filter]\n  );\n\n  const handleRange = React.useCallback(\n    (value: [number | string, number | string]) => {\n      setFilterRange([parseInt(`${value[0]}`), parseInt(`${value[1]}`)]);\n    },\n    [filter]\n  );\n\n  const reactSliderProps = useReactSliderProps(\n    filter,\n    filterValue,\n    filterRange,\n    handleChange\n  );\n\n  const filterSliderProps = React.useMemo(() => {\n    return {\n      handleChange,\n      handleRange,\n      filter,\n      value: filterValue,\n      range: filterRange,\n      reactSliderProps,\n    };\n  }, [\n    handleChange,\n    handleRange,\n    filter,\n    filterValue,\n    filterRange,\n    reactSliderProps,\n  ]);\n\n  return filterSliderProps;\n};\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@usereactify/search",
   "description": "React UI library for Reactify Search",
-  "version": "5.9.0",
+  "version": "5.10.0-beta.1",
   "license": "MIT",
   "main": "dist/src/index.js",
   "types": "dist/src/index.d.ts",
@@ -40,7 +40,8 @@
     "axios": "0.26.1",
     "currency.js": "2.0.4",
     "debug": "4.3.2",
-    "react-intersection-observer": "9.1.0"
+    "react-intersection-observer": "9.1.0",
+    "react-slider": "2.0.4"
   },
   "peerDependencies": {
     "@appbaseio/reactivesearch": "3.14.0",
@@ -61,6 +62,7 @@
     "@types/debug": "4.1.7",
     "@types/react": "18.0.19",
     "@types/react-dom": "18.0.6",
+    "@types/react-slider": "1.3.1",
     "babel-loader": "8.2.2",
     "husky": "4.3.8",
     "prettier": "2.4.1",