@usereactify/search 5.10.0-beta.0 → 5.10.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +9 -0
- package/dist/package.json +1 -1
- package/dist/src/components/Example/ExampleFilterSlider.js +5 -2
- package/dist/src/components/Example/ExampleFilterSlider.js.map +1 -1
- package/dist/src/components/Example/ExampleFiltersSelected.js +33 -7
- package/dist/src/components/Example/ExampleFiltersSelected.js.map +1 -1
- package/dist/src/hooks/useFilterSliderProps.js +3 -3
- package/dist/src/hooks/useFilterSliderProps.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,15 @@
|
|
|
2
2
|
|
|
3
3
|
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.
|
|
4
4
|
|
|
5
|
+
## [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)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
* add prefix and suffix to filter slider labels ([0eba7c2](https://bitbucket.org/usereactify/reactify-search-ui/commit/0eba7c29dd5590c1dbee7dbcaefaaf9b3cb1c886))
|
|
11
|
+
* get intial slider value from URL search params ([98e5ec1](https://bitbucket.org/usereactify/reactify-search-ui/commit/98e5ec1c50735e33aea56a299557823bdec8f659))
|
|
12
|
+
* improve selected filter labels ([0612f46](https://bitbucket.org/usereactify/reactify-search-ui/commit/0612f46cc136ac447552586251bcb71a7853eea3))
|
|
13
|
+
|
|
5
14
|
## [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)
|
|
6
15
|
|
|
7
16
|
|
package/dist/package.json
CHANGED
|
@@ -23,12 +23,15 @@ const ExampleFilterSlider = (props) => {
|
|
|
23
23
|
margin: "auto",
|
|
24
24
|
top: "6px",
|
|
25
25
|
} },
|
|
26
|
-
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: (
|
|
26
|
+
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) }),
|
|
27
27
|
react_1.default.createElement("span", { style: {
|
|
28
28
|
position: "absolute",
|
|
29
29
|
top: "-24px",
|
|
30
30
|
left: "0",
|
|
31
|
-
} },
|
|
31
|
+
} },
|
|
32
|
+
props.filter.displaySliderPrefix,
|
|
33
|
+
state.valueNow,
|
|
34
|
+
props.filter.displaySliderSuffix))) })))));
|
|
32
35
|
};
|
|
33
36
|
exports.ExampleFilterSlider = ExampleFilterSlider;
|
|
34
37
|
//# sourceMappingURL=ExampleFilterSlider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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,
|
|
1
|
+
{"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"]}
|
|
@@ -5,18 +5,44 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.ExampleFiltersSelected = void 0;
|
|
7
7
|
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const hooks_1 = require("../../hooks");
|
|
8
9
|
const ExampleFiltersSelected = (props) => {
|
|
9
10
|
return (react_1.default.createElement("div", { className: "rs__filters-selected" },
|
|
10
11
|
react_1.default.createElement("h3", { className: "rs__filters-selected__name" }, "Filters Selected"),
|
|
11
|
-
react_1.default.createElement("ul", { className: "rs__filters-selected__list" }, props.selectedFilters.map((selectedFilter) => (react_1.default.createElement(
|
|
12
|
-
react_1.default.createElement("label", { className: "rs__filters-selected__list-item-label", onClick: () => props.handleRemove(selectedFilter.key) },
|
|
13
|
-
react_1.default.createElement("span", { className: "rs__filters-selected__list-item-label" },
|
|
14
|
-
selectedFilter.label,
|
|
15
|
-
": "),
|
|
16
|
-
react_1.default.createElement("span", { className: "rs__filters-selected__list-item-value" }, parseFromSelectedValue(selectedFilter.value)))))))));
|
|
12
|
+
react_1.default.createElement("ul", { className: "rs__filters-selected__list" }, props.selectedFilters.map((selectedFilter) => (react_1.default.createElement(ExampleFiltersSelectedItem, { selectedFilter: selectedFilter, handleRemove: props.handleRemove }))))));
|
|
17
13
|
};
|
|
18
14
|
exports.ExampleFiltersSelected = ExampleFiltersSelected;
|
|
19
|
-
const
|
|
15
|
+
const ExampleFiltersSelectedItem = (props) => {
|
|
16
|
+
const filtersHook = (0, hooks_1.useFilters)();
|
|
17
|
+
const label = react_1.default.useMemo(() => {
|
|
18
|
+
var _a;
|
|
19
|
+
return parseFromSelectedValue(props.selectedFilter.value, ((_a = filtersHook.filters) !== null && _a !== void 0 ? _a : []).find((filter) => filter.handle === props.selectedFilter.key));
|
|
20
|
+
}, [props.selectedFilter.value, filtersHook.filters]);
|
|
21
|
+
return (react_1.default.createElement("li", { key: props.selectedFilter.key, className: "rs__filters-selected__list-item" },
|
|
22
|
+
react_1.default.createElement("label", { className: "rs__filters-selected__list-item-label", onClick: () => props.handleRemove(props.selectedFilter.key) },
|
|
23
|
+
react_1.default.createElement("span", { className: "rs__filters-selected__list-item-label" },
|
|
24
|
+
props.selectedFilter.label,
|
|
25
|
+
": "),
|
|
26
|
+
react_1.default.createElement("span", { className: "rs__filters-selected__list-item-value" }, label))));
|
|
27
|
+
};
|
|
28
|
+
const parseFromSelectedValue = (value, filter) => {
|
|
29
|
+
if (filter) {
|
|
30
|
+
if (filter.displayType === "single") {
|
|
31
|
+
if (filter.displayView === "range") {
|
|
32
|
+
return value.label;
|
|
33
|
+
}
|
|
34
|
+
return value;
|
|
35
|
+
}
|
|
36
|
+
if (filter.displayType === "multi") {
|
|
37
|
+
if (filter.displayView === "range") {
|
|
38
|
+
return value.map((item) => item.label).join(", ");
|
|
39
|
+
}
|
|
40
|
+
return value.join(", ");
|
|
41
|
+
}
|
|
42
|
+
if (filter.displayType === "slider") {
|
|
43
|
+
return `${filter.displaySliderPrefix}${value[0]} to ${filter.displaySliderPrefix}${value[1]}`;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
20
46
|
const labelString = typeof value === "string" ? value : false;
|
|
21
47
|
const labelObject = !Array.isArray(value) && typeof value === "object"
|
|
22
48
|
? `${value.start}-${value.end}`.replace("-0", "+")
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExampleFiltersSelected.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleFiltersSelected.tsx"],"names":[],"mappings":";;;;;;
|
|
1
|
+
{"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"]}
|
|
@@ -9,10 +9,10 @@ const hooks_1 = require("../hooks");
|
|
|
9
9
|
const utility_1 = require("../utility");
|
|
10
10
|
const useReactSliderProps_1 = require("./react-slider/useReactSliderProps");
|
|
11
11
|
const useFilterSliderProps = (filter) => {
|
|
12
|
+
var _a;
|
|
12
13
|
const { track } = (0, hooks_1.useAnalytics)();
|
|
13
|
-
const
|
|
14
|
-
|
|
15
|
-
]);
|
|
14
|
+
const urlSearchParam = new URLSearchParams(window.location.search);
|
|
15
|
+
const [filterValue, setFilterValue] = react_1.default.useState(JSON.parse((_a = urlSearchParam.get(filter.handle)) !== null && _a !== void 0 ? _a : "[0,0]"));
|
|
16
16
|
const [filterRange, setFilterRange] = react_1.default.useState([
|
|
17
17
|
0, 0,
|
|
18
18
|
]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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
|
|
1
|
+
{"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"]}
|