From ba3e2a74a0cd5058e77b774fb926257735f01503 Mon Sep 17 00:00:00 2001 From: Grzegorz Kastelik Date: Wed, 18 Mar 2020 10:29:57 +0100 Subject: [PATCH 1/5] Added possibility to focus search on start like its done in many selectInput components --- package.json | 14 +++++++------- src/lib/interfaces.ts | 1 + src/multi-select/index.tsx | 2 ++ src/select-panel/index.tsx | 16 ++++++++++++---- 4 files changed, 22 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index 9415653..cbe6f71 100644 --- a/package.json +++ b/package.json @@ -19,10 +19,10 @@ "build-storybook": "build-storybook" }, "dependencies": { - "@emotion/core": "^10.0.22", - "@emotion/styled": "^10.0.23", + "@emotion/core": "^10.0.28", + "@emotion/styled": "^10.0.27", "@rooks/use-outside-click": "^3.4.1", - "emotion-theming": "^10.0.19" + "emotion-theming": "^10.0.27" }, "peerDependencies": { "react": "^16.12.0", @@ -34,20 +34,20 @@ "@storybook/addon-links": "^5.2.6", "@storybook/addons": "^5.2.6", "@storybook/react": "^5.2.6", - "@types/react": "^16.9.13", - "@types/react-dom": "^16.9.4", + "@types/react": "^16.9.23", + "@types/react-dom": "^16.9.5", "awesome-typescript-loader": "^5.2.1", "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-runtime": "^6.26.0", "react": "^16.4.1", "react-dom": "^16.4.1", - "react-scripts-ts": "^3.1.0", + "react-scripts-ts": "^4.0.8", "rollup": "^1.27.5", "rollup-plugin-babel": "^4.3.3", "rollup-plugin-commonjs": "^10.1.0", "rollup-plugin-node-resolve": "^5.2.0", - "rollup-plugin-peer-deps-external": "^2.2.0", + "rollup-plugin-peer-deps-external": "^2.2.2", "rollup-plugin-postcss": "^2.0.3", "rollup-plugin-typescript2": "^0.25.2", "rollup-plugin-url": "^3.0.1", diff --git a/src/lib/interfaces.ts b/src/lib/interfaces.ts index 5d5d4e2..2506026 100644 --- a/src/lib/interfaces.ts +++ b/src/lib/interfaces.ts @@ -22,6 +22,7 @@ export interface IStyledProps { export interface ISelectProps { options: Option[]; value: Option[]; + focusSearchOnStart?: boolean; onChange?; valueRenderer?: (selected: Option[], options: Option[]) => string; ItemRenderer?: Function; diff --git a/src/multi-select/index.tsx b/src/multi-select/index.tsx index d8a2db3..7567155 100644 --- a/src/multi-select/index.tsx +++ b/src/multi-select/index.tsx @@ -15,6 +15,7 @@ const MultiSelectBox = styled.div` `; const MultiSelect = ({ + focusSearchOnStart = true, hasSelectAll = true, shouldToggleOnHover = false, options, @@ -48,6 +49,7 @@ const MultiSelect = ({ onChange, disabled, disableSearch, + focusSearchOnStart, filterOptions, overrideStrings }} diff --git a/src/select-panel/index.tsx b/src/select-panel/index.tsx index 539e0f0..299b101 100644 --- a/src/select-panel/index.tsx +++ b/src/select-panel/index.tsx @@ -16,6 +16,7 @@ interface ISelectPanelProps { ItemRenderer?: Function; options: Option[]; value: Option[]; + focusSearchOnStart: boolean; selectAllLabel?: string; onChange: (selected: Option[]) => void; disabled?: boolean; @@ -25,6 +26,11 @@ interface ISelectPanelProps { overrideStrings?: { [key: string]: string }; } +enum FocusType { + SEARCH = -1, + NONE, +} + const SelectSearchContainer = styled.div` width: 100%; border-bottom: 1px solid ${(props: any) => props.theme.border}; @@ -47,11 +53,12 @@ export const SelectPanel = (props: ISelectPanelProps) => { ItemRenderer, disabled, disableSearch, + focusSearchOnStart, hasSelectAll, overrideStrings } = props; const [searchText, setSearchText] = useState(""); - const [focusIndex, setFocusIndex] = useState(0); + const [focusIndex, setFocusIndex] = useState(focusSearchOnStart ? FocusType.SEARCH : FocusType.NONE); const selectAllOption = { label: selectAllLabel || getString("selectAll", overrideStrings), @@ -67,7 +74,7 @@ export const SelectPanel = (props: ISelectPanelProps) => { const handleSearchChange = e => { setSearchText(e.target.value); - setFocusIndex(-1); + setFocusIndex(FocusType.SEARCH); }; const handleItemClicked = (index: number) => setFocusIndex(index); @@ -78,7 +85,7 @@ export const SelectPanel = (props: ISelectPanelProps) => { if (e.altKey) { return; } - updateFocus(-1); + updateFocus(FocusType.SEARCH); break; case 40: // Down Arrow if (e.altKey) { @@ -94,7 +101,7 @@ export const SelectPanel = (props: ISelectPanelProps) => { }; const handleSearchFocus = () => { - setFocusIndex(-1); + setFocusIndex(FocusType.SEARCH); }; const allAreSelected = () => options.length === value.length; @@ -116,6 +123,7 @@ export const SelectPanel = (props: ISelectPanelProps) => { {!disableSearch && ( Date: Wed, 18 Mar 2020 10:32:44 +0100 Subject: [PATCH 2/5] Change version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index cbe6f71..c581533 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-multi-select-component", - "version": "1.3.2", + "version": "1.3.3", "description": "Simple multiple selection dropdown component with checkboxes, search and select-al`", "author": "harshzalavadiya", "license": "MIT", From 968de1b61349c07118b8f05a6f375a7f95532288 Mon Sep 17 00:00:00 2001 From: Grzegorz Kastelik Date: Thu, 19 Mar 2020 08:01:53 +0100 Subject: [PATCH 3/5] Change focusSearchOnStart to focusSearchOnOpen --- src/lib/interfaces.ts | 2 +- src/multi-select/index.tsx | 4 ++-- src/select-panel/index.tsx | 8 ++++---- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/lib/interfaces.ts b/src/lib/interfaces.ts index 2506026..0971aa7 100644 --- a/src/lib/interfaces.ts +++ b/src/lib/interfaces.ts @@ -22,7 +22,7 @@ export interface IStyledProps { export interface ISelectProps { options: Option[]; value: Option[]; - focusSearchOnStart?: boolean; + focusSearchOnOpen?: boolean; onChange?; valueRenderer?: (selected: Option[], options: Option[]) => string; ItemRenderer?: Function; diff --git a/src/multi-select/index.tsx b/src/multi-select/index.tsx index 7567155..f8932dd 100644 --- a/src/multi-select/index.tsx +++ b/src/multi-select/index.tsx @@ -15,7 +15,7 @@ const MultiSelectBox = styled.div` `; const MultiSelect = ({ - focusSearchOnStart = true, + focusSearchOnOpen = true, hasSelectAll = true, shouldToggleOnHover = false, options, @@ -49,7 +49,7 @@ const MultiSelect = ({ onChange, disabled, disableSearch, - focusSearchOnStart, + focusSearchOnOpen, filterOptions, overrideStrings }} diff --git a/src/select-panel/index.tsx b/src/select-panel/index.tsx index 299b101..42c461b 100644 --- a/src/select-panel/index.tsx +++ b/src/select-panel/index.tsx @@ -16,7 +16,7 @@ interface ISelectPanelProps { ItemRenderer?: Function; options: Option[]; value: Option[]; - focusSearchOnStart: boolean; + focusSearchOnOpen: boolean; selectAllLabel?: string; onChange: (selected: Option[]) => void; disabled?: boolean; @@ -53,12 +53,12 @@ export const SelectPanel = (props: ISelectPanelProps) => { ItemRenderer, disabled, disableSearch, - focusSearchOnStart, + focusSearchOnOpen, hasSelectAll, overrideStrings } = props; const [searchText, setSearchText] = useState(""); - const [focusIndex, setFocusIndex] = useState(focusSearchOnStart ? FocusType.SEARCH : FocusType.NONE); + const [focusIndex, setFocusIndex] = useState(focusSearchOnOpen ? FocusType.SEARCH : FocusType.NONE); const selectAllOption = { label: selectAllLabel || getString("selectAll", overrideStrings), @@ -123,7 +123,7 @@ export const SelectPanel = (props: ISelectPanelProps) => { {!disableSearch && ( Date: Thu, 19 Mar 2020 08:06:38 +0100 Subject: [PATCH 4/5] Add new prop (focusSearchOnOpen) to docs --- README.md | 31 ++++++++++++++++--------------- src/multi-select/index.tsx | 2 +- 2 files changed, 17 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 54e1119..1ebff63 100644 --- a/README.md +++ b/README.md @@ -56,21 +56,22 @@ export default App; ## 👀 Props -| Prop | Description | Type | Default | -| --------------------- | --------------------------------- | ------------------ | ------- | -| `labelledBy` | value for `aria-labelledby` | `string` | | -| `options` | options for dropdown | `[{label, value}]` | | -| `value` | pre-selected rows | `[{label, value}]` | `[]` | -| `hasSelectAll` | toggle 'Select All' option | `boolean` | `true` | -| `isLoading` | show spinner on select | `boolean` | `false` | -| `shouldToggleOnHover` | toggle dropdown on hover option | `boolean` | `false` | -| `overrideStrings` | Override default strings for i18n | `object` | | -| `onChange` | onChhange callback | `function` | | -| `disabled` | disable dropdown | `boolean` | `false` | -| `selectAllLabel` | _select all_ label | `string` | | -| `disableSearch` | hide search textbox | `boolean` | `false` | -| `filterOptions` | custom filter options | `function` | | -| `theme` | theme variables | `object` | | +| Prop | Description | Type | Default | +| --------------------- | ---------------------------------- | ------------------ | ------- | +| `labelledBy` | value for `aria-labelledby` | `string` | | +| `options` | options for dropdown | `[{label, value}]` | | +| `value` | pre-selected rows | `[{label, value}]` | `[]` | +| `focusSearchOnOpen` | focus on search input when opening | `boolean` | `true` | +| `hasSelectAll` | toggle 'Select All' option | `boolean` | `true` | +| `isLoading` | show spinner on select | `boolean` | `false` | +| `shouldToggleOnHover` | toggle dropdown on hover option | `boolean` | `false` | +| `overrideStrings` | Override default strings for i18n | `object` | | +| `onChange` | onChhange callback | `function` | | +| `disabled` | disable dropdown | `boolean` | `false` | +| `selectAllLabel` | _select all_ label | `string` | | +| `disableSearch` | hide search textbox | `boolean` | `false` | +| `filterOptions` | custom filter options | `function` | | +| `theme` | theme variables | `object` | | ## 🌐 Internationalization diff --git a/src/multi-select/index.tsx b/src/multi-select/index.tsx index f8932dd..579fa6a 100644 --- a/src/multi-select/index.tsx +++ b/src/multi-select/index.tsx @@ -15,7 +15,7 @@ const MultiSelectBox = styled.div` `; const MultiSelect = ({ - focusSearchOnOpen = true, + focusSearchOnOpen = true, hasSelectAll = true, shouldToggleOnHover = false, options, From 64128cefd8e2f6f8cf158f5a90421d2ff3efc27c Mon Sep 17 00:00:00 2001 From: Grzegorz Kastelik Date: Thu, 19 Mar 2020 08:09:38 +0100 Subject: [PATCH 5/5] Add prop (focusSearchOnOpen) mapping to storybook --- src/stories/default.stories.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/stories/default.stories.tsx b/src/stories/default.stories.tsx index 2bdfb0e..b963418 100644 --- a/src/stories/default.stories.tsx +++ b/src/stories/default.stories.tsx @@ -24,6 +24,7 @@ export const toStorybook = () => { 
{JSON.stringify(selected)}