From cdd75c20adfc4374a8cf01584dcbe7245f8e01b5 Mon Sep 17 00:00:00 2001 From: Sasha Khamkov Date: Thu, 29 Oct 2020 23:41:50 +0300 Subject: [PATCH] Revert "FIX (searchFn)[#101] searchFn callback should only call once when typing in the search bar (#131)" This reverts commit 12164f95e5e152a6eb8643f6700186e8611530b4. --- __tests__/__snapshots__/index.spec.js.snap | 143 --------------------- __tests__/components/Dropdown.spec.js | 3 +- __tests__/index.spec.js | 25 +--- docs/src/examples/WithSearchFn.js | 37 ------ docs/src/pages/examples.js | 5 - docs/src/pages/state.md | 2 - package-lock.json | 9 +- src/components/Dropdown.js | 27 ++-- src/index.js | 15 +-- 9 files changed, 25 insertions(+), 241 deletions(-) delete mode 100644 docs/src/examples/WithSearchFn.js diff --git a/__tests__/__snapshots__/index.spec.js.snap b/__tests__/__snapshots__/index.spec.js.snap index 17932a7f..c252d780 100644 --- a/__tests__/__snapshots__/index.spec.js.snap +++ b/__tests__/__snapshots__/index.spec.js.snap @@ -453,149 +453,6 @@ exports[` renders with clearable 1`] = ` `; -exports[` renders with custom search function 1`] = ` -.emotion-6 { - box-sizing: border-box; - position: relative; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - border: 1px solid #ccc; - width: 100%; - border-radius: 2px; - padding: 2px 5px; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - direction: ltr; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - cursor: pointer; - min-height: 36px; - pointer-events: all; -} - -.emotion-6:hover, -.emotion-6:focus-within { - border-color: #0074D9; -} - -.emotion-6:focus, -.emotion-6:focus-within { - outline: 0; - box-shadow: 0 0 0 3px rgba(0,116,217,0.2); -} - -.emotion-6 * { - box-sizing: border-box; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; -} - -.emotion-0 { - line-height: inherit; - border: none; - margin-left: 5px; - background: transparent; - font-size: smaller; -} - -.emotion-0:focus { - outline: none; -} - -.emotion-4 { - text-align: center; - pointer-events: none; - margin: 0 0 0 5px; - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); - cursor: pointer; -} - -.emotion-4 svg { - width: 16px; - height: 16px; -} - -.emotion-4:hover path { - stroke: #0074D9; -} - -.emotion-4:focus { - outline: none; -} - -.emotion-4:focus path { - stroke: #0074D9; -} - -
-
-
- -
-
- - - -
-
-
-`; - exports[` renders with loading 1`] = ` .emotion-8 { box-sizing: border-box; diff --git a/__tests__/components/Dropdown.spec.js b/__tests__/components/Dropdown.spec.js index 19ad3452..5e43dace 100644 --- a/__tests__/components/Dropdown.spec.js +++ b/__tests__/components/Dropdown.spec.js @@ -10,8 +10,7 @@ const props = { dropdownHeight: '300px' }, state: { - selectBounds: {}, - searchResults: [], + selectBounds: {} }, methods: { searchResults: () => [], diff --git a/__tests__/index.spec.js b/__tests__/index.spec.js index b64c2a21..235cefb7 100644 --- a/__tests__/index.spec.js +++ b/__tests__/index.spec.js @@ -1,6 +1,5 @@ import React from 'react'; import TestRenderer from 'react-test-renderer'; -import { LIB_NAME } from '../src/constants'; import Select from '../src/index'; @@ -60,31 +59,9 @@ describe(' renders with custom search function', () => { - const options = [ - { id: 0, name: 'Zero' }, - { id: 1, name: 'One' }, - { id: 2, name: 'Two' }, - ]; - - const searchFn = ({ props, state }) => { - return props.options.filter(({ name }) => new RegExp(state.search).test(name) ); - }; - - const component = selectWithProps( is disabled', () => { const tree = selectWithProps( - - ); -}; - -WithSearchFn.propTypes = {}; - -export default WithSearchFn; diff --git a/docs/src/pages/examples.js b/docs/src/pages/examples.js index 48d2399b..9dcb34d2 100644 --- a/docs/src/pages/examples.js +++ b/docs/src/pages/examples.js @@ -28,7 +28,6 @@ import ExternalClear from '../examples/ExternalClear'; import AccessDataByPath from '../examples/AccessDataByPath'; import CustomDropdownHandle from '../examples/CustomDropdownHandle'; import WithAnimation from '../examples/WithAnimation'; -import WithSearchFn from '../examples/WithSearchFn'; const demoOptions = options.map((option) => ({ ...option, @@ -117,10 +116,6 @@ const Examples = () => ( - - - -


diff --git a/docs/src/pages/state.md b/docs/src/pages/state.md index b03f0c84..680ae084 100644 --- a/docs/src/pages/state.md +++ b/docs/src/pages/state.md @@ -11,6 +11,4 @@ Access to current state of <Select/> component | dropdown | boolean | check if dropdown is open | | values | array | selected value(s) | | search | string | current search string | -| searchResults| string | Filtered search results -| | selectBounds | object | current `getBoundingClientRect()` of <Select/> | diff --git a/package-lock.json b/package-lock.json index 48b10492..f059a96b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4139,8 +4139,7 @@ }, "minimist": { "version": "1.2.0", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", - "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", + "resolved": "", "dev": true }, "schema-utils": { @@ -12783,8 +12782,7 @@ }, "minimist": { "version": "1.2.0", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", - "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", + "resolved": "", "dev": true }, "tapable": { @@ -12853,8 +12851,7 @@ }, "minimist": { "version": "1.2.0", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", - "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", + "resolved": "", "dev": true }, "string-width": { diff --git a/src/components/Dropdown.js b/src/components/Dropdown.js index 407d0618..10a23829 100644 --- a/src/components/Dropdown.js +++ b/src/components/Dropdown.js @@ -49,7 +49,7 @@ const Dropdown = ({ props, state, methods }) => ( {props.createNewLabel.replace('{search}', `"${state.search}"`)} )} - {state.searchResults.length === 0 ? ( + {methods.searchResults().length === 0 ? ( ( methods={methods} /> ) : ( - state.searchResults - .map((item, itemIndex) => ( - - )) - )} + methods + .searchResults() + .map((item, itemIndex) => ( + + )) + )} )} diff --git a/src/index.js b/src/index.js index 1b5dbba8..5c1d88ba 100644 --- a/src/index.js +++ b/src/index.js @@ -74,8 +74,7 @@ export class Select extends Component { values: props.values, search: '', selectBounds: {}, - cursor: null, - searchResults: props.options, + cursor: null }; this.methods = { @@ -290,9 +289,7 @@ export class Select extends Component { }); this.setState({ - search: event.target.value, - }, () => { - this.setState({ searchResults: this.searchResults() }) + search: event.target.value }); }; @@ -394,7 +391,7 @@ export class Select extends Component { }; handleKeyDownFn = ({ event, state, props, methods, setState }) => { - const { cursor, searchResults } = state; + const { cursor } = state; const escape = event.key === 'Escape'; const enter = event.key === 'Enter'; const arrowUp = event.key === 'ArrowUp'; @@ -426,7 +423,7 @@ export class Select extends Component { } if (enter) { - const currentItem = searchResults[cursor]; + const currentItem = methods.searchResults()[cursor]; if (currentItem && !currentItem.disabled) { if (props.create && valueExistInSelected(state.search, state.values, props)) { return null; @@ -436,7 +433,7 @@ export class Select extends Component { } } - if ((arrowDown || (tab && state.dropdown)) && searchResults.length === cursor) { + if ((arrowDown || (tab && state.dropdown)) && methods.searchResults().length === cursor) { return setState({ cursor: 0 }); @@ -456,7 +453,7 @@ export class Select extends Component { if ((arrowUp || (shiftTab && state.dropdown)) && cursor === 0) { setState({ - cursor: searchResults.length + cursor: methods.searchResults().length }); }