djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

replace filter method from fuzzaldrin with native filter method of javascript to fix country select issue #2751 (#2772)

Browse source 
* replace filter method from fuzzaldrin with native filter method of javascript to fix country select issue #2751

* added fuse.js and replace filter of fuzzaldrin with search of fuse.js to fix country select issue #2751

* use original array if query is empty in SingleAutocompleteSelectField, not use fusejs result
This commit is contained in:
Endo 2022-12-20 06:18:50 -07:00 committed by GitHub
parent 2327d92b41
commit 3669f45061
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 28 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
package-lock.json generated
View file

@ -40,6 +40,7 @@
"faker": "^5.1.0",
"fast-array-diff": "^0.2.0",
"find-test-names": "^1.17.1",
"fuse.js": "^6.6.2",
"fuzzaldrin": "^2.1.0",
"graphql": "^15.4.0",
"hotkeys-js": "^3.8.1",
@ -9324,6 +9325,15 @@
"integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=",
"optional": true
},
"node_modules/@storybook/ui/node_modules/fuse.js": {
"version": "3.6.1",
"resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-3.6.1.tgz",
"integrity": "sha512-hT9yh/tiinkmirKrlv4KWOjztdoZo1mx9Qh4KvWqC7isoXwdUY3PNWUxceF4/qO9R6riA2C29jdTOeQOIROjgw==",
"dev": true,
"engines": {
"node": ">=6"
}
},
"node_modules/@storybook/ui/node_modules/react": {
"version": "16.14.0",
"resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
@ -21914,12 +21924,11 @@
}
},
"node_modules/fuse.js": {
"version": "3.6.1",
"resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-3.6.1.tgz",
"integrity": "sha512-hT9yh/tiinkmirKrlv4KWOjztdoZo1mx9Qh4KvWqC7isoXwdUY3PNWUxceF4/qO9R6riA2C29jdTOeQOIROjgw==",
"optional": true,
"version": "6.6.2",
"resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-6.6.2.tgz",
"integrity": "sha512-cJaJkxCCxC8qIIcPBF9yGxY0W/tVZS3uEISDxhYIdtk8OL93pe+6Zj7LjCqVV4dzbqcriOZ+kQ/NE4RXZHsIGA==",
"engines": {
"node": ">=6"
"node": ">=10"
}
},
"node_modules/fuzzaldrin": {
@ -51560,6 +51569,12 @@
"integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=",
"optional": true
},
"fuse.js": {
"version": "3.6.1",
"resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-3.6.1.tgz",
"integrity": "sha512-hT9yh/tiinkmirKrlv4KWOjztdoZo1mx9Qh4KvWqC7isoXwdUY3PNWUxceF4/qO9R6riA2C29jdTOeQOIROjgw==",
"dev": true
},
"react": {
"version": "16.14.0",
"resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
@ -61539,10 +61554,9 @@
"devOptional": true
},
"fuse.js": {
"version": "3.6.1",
"resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-3.6.1.tgz",
"integrity": "sha512-hT9yh/tiinkmirKrlv4KWOjztdoZo1mx9Qh4KvWqC7isoXwdUY3PNWUxceF4/qO9R6riA2C29jdTOeQOIROjgw==",
"optional": true
"version": "6.6.2",
"resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-6.6.2.tgz",
"integrity": "sha512-cJaJkxCCxC8qIIcPBF9yGxY0W/tVZS3uEISDxhYIdtk8OL93pe+6Zj7LjCqVV4dzbqcriOZ+kQ/NE4RXZHsIGA=="
},
"fuzzaldrin": {
"version": "2.1.0",

1
package.json
View file

@ -47,6 +47,7 @@
"faker": "^5.1.0",
"fast-array-diff": "^0.2.0",
"find-test-names": "^1.17.1",
"fuse.js": "^6.6.2",
"fuzzaldrin": "^2.1.0",
"graphql": "^15.4.0",
"hotkeys-js": "^3.8.1",

8
src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx
View file

@ -11,7 +11,7 @@ import { ChevronIcon } from "@saleor/macaw-ui";
import { FetchMoreProps } from "@saleor/types";
import clsx from "clsx";
import Downshift from "downshift";
import { filter } from "fuzzaldrin";
import Fuse from "fuse.js";
import React from "react";
import Debounce, { DebounceProps } from "../Debounce";
@ -298,12 +298,12 @@ const SingleAutocompleteSelectField: React.FC<SingleAutocompleteSelectFieldProps
);
}
const fuse = new Fuse(choices, { keys: ["label"] });
return (
<SingleAutocompleteSelectFieldComponent
fetchChoices={q => setQuery(q || "")}
choices={filter(choices, query, {
key: "label",
})}
choices={query !== "" ? fuse.search(query).map(v => v.item) : choices}
{...rest}
/>
);