From f6c4331113c0b0e9ea4c54c6722556be8934df44 Mon Sep 17 00:00:00 2001 From: Kirs Imsong Date: Mon, 22 Nov 2021 17:43:42 -0500 Subject: [PATCH 1/3] Add optional controlledInputStateValue to Select component to hoist state to consumer component --- package.json | 2 +- src/hooks/index.ts | 2 +- src/hooks/useSelect/index.tsx | 18 ++++++++++++++++-- src/molecules/Select/Options/index.tsx | 2 +- src/molecules/Select/index.tsx | 7 +++++-- 5 files changed, 24 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 084b4256..ff74835b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@sofarsounds/maestro", - "version": "7.4.19", + "version": "7.4.20", "description": "The official sofar sounds react uikit library", "main": "dist/index.js", "scripts": { diff --git a/src/hooks/index.ts b/src/hooks/index.ts index aa8a4873..787c5cf9 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -5,5 +5,5 @@ export { default as usePosition } from './usePosition'; export { default as useScrollPosition } from './useScrollPosition'; export { default as useWindowSize } from './useWindowSize'; export { default as usePrev } from './usePrev'; -export { default as useSelect } from './useSelect'; +export { default as useSelect, ControlledInputStateValue } from './useSelect'; export { default as useDeviceDetector } from './useDeviceDetector'; diff --git a/src/hooks/useSelect/index.tsx b/src/hooks/useSelect/index.tsx index b514100a..c9a9dfcd 100644 --- a/src/hooks/useSelect/index.tsx +++ b/src/hooks/useSelect/index.tsx @@ -1,6 +1,11 @@ import { useEffect, useRef, useState, useCallback } from 'react'; import { useDisableScroll, useOutsideClick, useKeyDown } from '../'; +export interface ControlledInputStateValue { + inputValue: string; + setInputValue: React.Dispatch>; +} + interface Props { onChange: (option: T | null) => void; defaultValue?: T | null; @@ -10,6 +15,7 @@ interface Props { filterBy?: (option: T, query: string) => boolean; defaultOptions: T[]; value?: T | null; + controlledInputStateValue?: ControlledInputStateValue; } interface ReturnProps { @@ -33,12 +39,20 @@ const useSelect = ({ searchable, filterBy, value, - onChange + onChange, + controlledInputStateValue }: Props): ReturnProps => { const ref = useRef(); const [isOpen, setIsOpen] = useState(false); const [selected, setSelected] = useState(defaultValue); - const [inputValue, setInputValue] = useState(''); + const [uncontrolledInputValue, setUncontrolledInputValue] = useState(''); + + const inputValue = controlledInputStateValue + ? controlledInputStateValue.inputValue + : uncontrolledInputValue; + const setInputValue = controlledInputStateValue + ? controlledInputStateValue.setInputValue + : setUncontrolledInputValue; const onOptionClick = useCallback( (option: T | null) => { diff --git a/src/molecules/Select/Options/index.tsx b/src/molecules/Select/Options/index.tsx index 9718d9e7..d0419a0e 100644 --- a/src/molecules/Select/Options/index.tsx +++ b/src/molecules/Select/Options/index.tsx @@ -94,7 +94,7 @@ const Options = ({ ); } case SelectState.ready: { - if (options.length === 0) { + if (options.length === 0 && userIsSearching) { return ( No options... diff --git a/src/molecules/Select/index.tsx b/src/molecules/Select/index.tsx index e1e2f919..67ee7f2d 100644 --- a/src/molecules/Select/index.tsx +++ b/src/molecules/Select/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { useSelect } from '../../hooks'; +import { useSelect, ControlledInputStateValue } from '../../hooks'; import Input from './Input'; import Options, { OptionsListProps } from './Options'; @@ -25,6 +25,7 @@ export interface SelectProps extends OptionsListProps { hasError?: boolean; invertColor?: boolean; renderLeftIcon?: React.ReactNode; + controlledInputStateValue?: ControlledInputStateValue; // typeahead props searchable?: boolean; @@ -63,6 +64,7 @@ const Select = ({ initialWidth, state = SelectState.ready, disableScrollWhenOpen = false, + controlledInputStateValue, 'data-qaid': qaId }: SelectProps) => { const { @@ -81,7 +83,8 @@ const Select = ({ filterBy, defaultOptions, // @ts-ignore - onChange + onChange, + controlledInputStateValue }); return ( From 37780f896f6518e03630143a9a038614ba46313e Mon Sep 17 00:00:00 2001 From: Kirs Imsong Date: Mon, 22 Nov 2021 17:45:08 -0500 Subject: [PATCH 2/3] Update gitignore for VSCode --- .gitignore | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.gitignore b/.gitignore index 56c7f17d..3abaf302 100644 --- a/.gitignore +++ b/.gitignore @@ -10,6 +10,9 @@ storybook-static # Jetbrains IDEs .idea +# VS Code IDE +.vscode + .npmrc .DS_Store From bfde27d58256d59217716b7f14128ce076454f92 Mon Sep 17 00:00:00 2001 From: Kirs Imsong Date: Tue, 23 Nov 2021 12:05:15 -0500 Subject: [PATCH 3/3] Update props --- src/hooks/index.ts | 2 +- src/hooks/useSelect/index.tsx | 19 ++++++++----------- src/molecules/Select/index.tsx | 11 +++++++---- 3 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 787c5cf9..aa8a4873 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -5,5 +5,5 @@ export { default as usePosition } from './usePosition'; export { default as useScrollPosition } from './useScrollPosition'; export { default as useWindowSize } from './useWindowSize'; export { default as usePrev } from './usePrev'; -export { default as useSelect, ControlledInputStateValue } from './useSelect'; +export { default as useSelect } from './useSelect'; export { default as useDeviceDetector } from './useDeviceDetector'; diff --git a/src/hooks/useSelect/index.tsx b/src/hooks/useSelect/index.tsx index c9a9dfcd..2deb82a3 100644 --- a/src/hooks/useSelect/index.tsx +++ b/src/hooks/useSelect/index.tsx @@ -1,11 +1,6 @@ import { useEffect, useRef, useState, useCallback } from 'react'; import { useDisableScroll, useOutsideClick, useKeyDown } from '../'; -export interface ControlledInputStateValue { - inputValue: string; - setInputValue: React.Dispatch>; -} - interface Props { onChange: (option: T | null) => void; defaultValue?: T | null; @@ -15,7 +10,8 @@ interface Props { filterBy?: (option: T, query: string) => boolean; defaultOptions: T[]; value?: T | null; - controlledInputStateValue?: ControlledInputStateValue; + controlledInputValue?: string; + setControlledInputValue?: React.Dispatch>; } interface ReturnProps { @@ -40,18 +36,19 @@ const useSelect = ({ filterBy, value, onChange, - controlledInputStateValue + controlledInputValue, + setControlledInputValue }: Props): ReturnProps => { const ref = useRef(); const [isOpen, setIsOpen] = useState(false); const [selected, setSelected] = useState(defaultValue); const [uncontrolledInputValue, setUncontrolledInputValue] = useState(''); - const inputValue = controlledInputStateValue - ? controlledInputStateValue.inputValue + const inputValue = controlledInputValue + ? controlledInputValue : uncontrolledInputValue; - const setInputValue = controlledInputStateValue - ? controlledInputStateValue.setInputValue + const setInputValue = setControlledInputValue + ? setControlledInputValue : setUncontrolledInputValue; const onOptionClick = useCallback( diff --git a/src/molecules/Select/index.tsx b/src/molecules/Select/index.tsx index 67ee7f2d..2acb3b40 100644 --- a/src/molecules/Select/index.tsx +++ b/src/molecules/Select/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { useSelect, ControlledInputStateValue } from '../../hooks'; +import { useSelect } from '../../hooks'; import Input from './Input'; import Options, { OptionsListProps } from './Options'; @@ -25,7 +25,8 @@ export interface SelectProps extends OptionsListProps { hasError?: boolean; invertColor?: boolean; renderLeftIcon?: React.ReactNode; - controlledInputStateValue?: ControlledInputStateValue; + inputValue?: string; + setInputValue?: React.Dispatch>; // typeahead props searchable?: boolean; @@ -64,7 +65,8 @@ const Select = ({ initialWidth, state = SelectState.ready, disableScrollWhenOpen = false, - controlledInputStateValue, + inputValue, + setInputValue, 'data-qaid': qaId }: SelectProps) => { const { @@ -84,7 +86,8 @@ const Select = ({ defaultOptions, // @ts-ignore onChange, - controlledInputStateValue + controlledInputValue: inputValue, + setControlledInputValue: setInputValue }); return (