From 04acffd668340ad3c38f74babb8a1681716abf40 Mon Sep 17 00:00:00 2001 From: Rupin Khandelwal Date: Wed, 31 Aug 2022 22:04:45 -0500 Subject: [PATCH 01/23] Adding Packages - downshift and recent searches and basic code --- .../templates/library/LibrarySearchBar.tsx | 17 ++++++++++------- packages/web/package.json | 2 ++ 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/packages/web/components/templates/library/LibrarySearchBar.tsx b/packages/web/components/templates/library/LibrarySearchBar.tsx index feaa2dde6..5469faf79 100644 --- a/packages/web/components/templates/library/LibrarySearchBar.tsx +++ b/packages/web/components/templates/library/LibrarySearchBar.tsx @@ -10,8 +10,10 @@ export type LibrarySearchBarProps = { coordinator: SearchCoordinator } + export function LibrarySearchBar(props: LibrarySearchBarProps): JSX.Element { - const [searchTerm, setSearchTerm] = useState('') + const [searchTerm, setSearchTerm] = useState('') + const [recentSearches, setRecentSearches] = useState(Array([])) return ( <> @@ -62,10 +64,10 @@ export function LibrarySearchBar(props: LibrarySearchBarProps): JSX.Element { - )} - {searchTerm && ( - + + + + {({ + getInputProps, + getRootProps, + getMenuProps, + getItemProps, + getToggleButtonProps, + isOpen, + highlightedIndex, + }) => ( +
+
{ + event.preventDefault() + // props.applySearchQuery(searchTerm || '') + // inputRef.current?.blur() + }} + {...getRootProps()} + > + { + setSearchTerm(event.target.value) + }} + {...getInputProps()} + /> + + + {isOpen && + props.options?.map((item, index) => ( + + {item.value} + + ))} + + +
+ )} + + + {!searchTerm && ( - - - - )} - + + + + + )} + ) -} \ No newline at end of file +} From 0e91aeb2c70030459b1bb85a2cbfbd5a4c4d4e47 Mon Sep 17 00:00:00 2001 From: Rupin Khandelwal Date: Tue, 6 Sep 2022 15:34:22 -0600 Subject: [PATCH 04/23] adding the basic css to display the list --- .../templates/library/LibrarySearchBar.tsx | 278 +++++++++--------- packages/web/styles/menu.css | 4 +- 2 files changed, 144 insertions(+), 138 deletions(-) diff --git a/packages/web/components/templates/library/LibrarySearchBar.tsx b/packages/web/components/templates/library/LibrarySearchBar.tsx index 6afc07875..7e359013d 100644 --- a/packages/web/components/templates/library/LibrarySearchBar.tsx +++ b/packages/web/components/templates/library/LibrarySearchBar.tsx @@ -11,11 +11,13 @@ import { SearchCoordinator } from './LibraryContainer' // Styles const List = styled('ul', { - width: '65%', - alignSelf: 'center', - color: '#0A0806CC', - fontSize: 24, - fontWeight: '700', + width: '93%', + top: '65px', + left: '0', + color: 'var(--colors-utilityTextDefault)', + backgroundColor: 'var(--colors-grayBase)', + position: 'absolute', + zIndex: '2', '@smDown': { fontSize: 16, }, @@ -23,6 +25,7 @@ const List = styled('ul', { const Item = styled('li', { listStyleType: 'none', + p: '5px 5px 5px 35px', }) export type LibrarySearchBarProps = { @@ -42,152 +45,153 @@ type OptionType = { export function LibrarySearchBar(props: LibrarySearchBarProps): JSX.Element { const [searchTerm, setSearchTerm] = useState('') - const [recentSearches, setRecentSearches] = useState(['apple', 'pear', 'orange', 'grape', 'banana']) + const [recentSearches, setRecentSearches] = useState([ + 'apple', + 'pear', + 'orange', + 'grape', + 'banana', + ]) return ( <> - - - - {({ - getInputProps, - getRootProps, - getMenuProps, - getItemProps, - getToggleButtonProps, - isOpen, - highlightedIndex, - }) => ( -
-
{ - event.preventDefault() - // props.applySearchQuery(searchTerm || '') - // inputRef.current?.blur() - }} - {...getRootProps()} - > - { - setSearchTerm(event.target.value) - }} - {...getInputProps()} - /> - - - {isOpen && - props.options?.map((item, index) => ( - - {item.value} - - ))} - - -
- )} - - - {!searchTerm && ( - - )} - {searchTerm && ( + + {({ + getInputProps, + getRootProps, + getMenuProps, + getItemProps, + getToggleButtonProps, + isOpen, + highlightedIndex, + }) => ( + - + - + {searchTerm && ( + + + + + + )} + {!searchTerm && ( + + )} - )} - - + + )} + ) } diff --git a/packages/web/styles/menu.css b/packages/web/styles/menu.css index 6d03b1491..f860a896a 100644 --- a/packages/web/styles/menu.css +++ b/packages/web/styles/menu.css @@ -1,5 +1,7 @@ /* Menu Override styles */ - +.pro-sidebar { + z-index: 1; +} .pro-sidebar > .pro-sidebar-inner, .pro-menu, .pro-menu > ul > .pro-sub-menu > .pro-inner-list-item, From 89b54bc20ca553b257d4d72fc3a01dfba48e68d3 Mon Sep 17 00:00:00 2001 From: Rupin Khandelwal Date: Thu, 8 Sep 2022 14:18:01 -0600 Subject: [PATCH 05/23] updated local storage to populate search dropdown and background color for highlighted index --- .../templates/library/LibrarySearchBar.tsx | 139 +++++++++--------- 1 file changed, 73 insertions(+), 66 deletions(-) diff --git a/packages/web/components/templates/library/LibrarySearchBar.tsx b/packages/web/components/templates/library/LibrarySearchBar.tsx index 7e359013d..7f9fe16fa 100644 --- a/packages/web/components/templates/library/LibrarySearchBar.tsx +++ b/packages/web/components/templates/library/LibrarySearchBar.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react' +import { useState, useEffect } from 'react' import { Sliders, X } from 'phosphor-react' import Downshift from 'downshift' @@ -45,13 +45,19 @@ type OptionType = { export function LibrarySearchBar(props: LibrarySearchBarProps): JSX.Element { const [searchTerm, setSearchTerm] = useState('') - const [recentSearches, setRecentSearches] = useState([ - 'apple', - 'pear', - 'orange', - 'grape', - 'banana', - ]) + const [recentSearches, setRecentSearches] = useState(Array<[]>()) + + // const [searchState, setSearchState] = useState({ + // searchQuery: '', + // hits: [], + // highlightedIndex: 0, + // }) + const [optionsList, setOptionsList] = useState(Array<[]>()) + + useEffect(() => { + setRecentSearches(Object.values(localStorage)) + setOptionsList(Object.values(localStorage)) + }, []) return ( <> @@ -61,7 +67,6 @@ export function LibrarySearchBar(props: LibrarySearchBarProps): JSX.Element { getRootProps, getMenuProps, getItemProps, - getToggleButtonProps, isOpen, highlightedIndex, }) => ( @@ -105,89 +110,91 @@ export function LibrarySearchBar(props: LibrarySearchBarProps): JSX.Element { {isOpen && - recentSearches?.map((item, index) => ( + optionsList.map((item, index) => ( {item} ))} - {searchTerm && ( - - - - - - )} - {!searchTerm && ( + {/* {searchTerm && ( */} + - )} + + + + {/* )} */} + {/* {!searchTerm && ( */} + + {/* )} */} )} From 589f99b6cb59c5825bd7c1e6c2f63adc703ed4b4 Mon Sep 17 00:00:00 2001 From: Rupin Khandelwal Date: Thu, 8 Sep 2022 14:37:41 -0600 Subject: [PATCH 06/23] some more polish around the list CSS --- .../components/templates/library/LibrarySearchBar.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/web/components/templates/library/LibrarySearchBar.tsx b/packages/web/components/templates/library/LibrarySearchBar.tsx index 7f9fe16fa..17dc1805e 100644 --- a/packages/web/components/templates/library/LibrarySearchBar.tsx +++ b/packages/web/components/templates/library/LibrarySearchBar.tsx @@ -11,9 +11,9 @@ import { SearchCoordinator } from './LibraryContainer' // Styles const List = styled('ul', { - width: '93%', + width: '95%', top: '65px', - left: '0', + left: '-32px', color: 'var(--colors-utilityTextDefault)', backgroundColor: 'var(--colors-grayBase)', position: 'absolute', @@ -25,7 +25,9 @@ const List = styled('ul', { const Item = styled('li', { listStyleType: 'none', - p: '5px 5px 5px 35px', + p: '8px 8px 8px 35px', + borderRadius: '5px', + textOverflow: 'ellipsis', }) export type LibrarySearchBarProps = { @@ -57,6 +59,7 @@ export function LibrarySearchBar(props: LibrarySearchBarProps): JSX.Element { useEffect(() => { setRecentSearches(Object.values(localStorage)) setOptionsList(Object.values(localStorage)) + //localStorage.clear() }, []) return ( From 04b6d8f6ea4cf69167f5ad3134a90fbea704fa31 Mon Sep 17 00:00:00 2001 From: Rupin Khandelwal Date: Thu, 8 Sep 2022 15:01:32 -0600 Subject: [PATCH 07/23] added filter functionality to the list --- .../templates/library/LibrarySearchBar.tsx | 48 +++++++++++-------- 1 file changed, 29 insertions(+), 19 deletions(-) diff --git a/packages/web/components/templates/library/LibrarySearchBar.tsx b/packages/web/components/templates/library/LibrarySearchBar.tsx index 17dc1805e..3cbc86178 100644 --- a/packages/web/components/templates/library/LibrarySearchBar.tsx +++ b/packages/web/components/templates/library/LibrarySearchBar.tsx @@ -64,7 +64,14 @@ export function LibrarySearchBar(props: LibrarySearchBarProps): JSX.Element { return ( <> - + + console.log( + selection ? `You selected ${selection.value}` : 'Selection Cleared' + ) + } + itemToString={(item) => (item ? item.value : '')} + > {({ getInputProps, getRootProps, @@ -72,6 +79,8 @@ export function LibrarySearchBar(props: LibrarySearchBarProps): JSX.Element { getItemProps, isOpen, highlightedIndex, + inputValue, + clearSelection, }) => ( {isOpen && - optionsList.map((item, index) => ( - - {item} - - ))} + optionsList + .filter((item) => !inputValue || item.includes(inputValue)) + .map((item, index) => ( + + {item} + + ))} {/* {searchTerm && ( */} From 173f543de011bd54f70cef4b2fd282f6bd04da9b Mon Sep 17 00:00:00 2001 From: Rupin Khandelwal Date: Thu, 8 Sep 2022 17:08:12 -0600 Subject: [PATCH 08/23] CSS clean up and removing commented out code that is not needed --- .../templates/library/LibrarySearchBar.tsx | 185 ++++++++---------- 1 file changed, 83 insertions(+), 102 deletions(-) diff --git a/packages/web/components/templates/library/LibrarySearchBar.tsx b/packages/web/components/templates/library/LibrarySearchBar.tsx index 3cbc86178..5524fa6b3 100644 --- a/packages/web/components/templates/library/LibrarySearchBar.tsx +++ b/packages/web/components/templates/library/LibrarySearchBar.tsx @@ -32,33 +32,14 @@ const Item = styled('li', { export type LibrarySearchBarProps = { coordinator: SearchCoordinator - options?: OptionType[] - onChange?: (selectedItem: string) => void // this is for later } -type OptionType = { - value?: string -} - -// export type searchHistoryProps = { -// searchQuery: string, -// index: number -// } - export function LibrarySearchBar(props: LibrarySearchBarProps): JSX.Element { const [searchTerm, setSearchTerm] = useState('') const [recentSearches, setRecentSearches] = useState(Array<[]>()) - // const [searchState, setSearchState] = useState({ - // searchQuery: '', - // hits: [], - // highlightedIndex: 0, - // }) - const [optionsList, setOptionsList] = useState(Array<[]>()) - useEffect(() => { setRecentSearches(Object.values(localStorage)) - setOptionsList(Object.values(localStorage)) //localStorage.clear() }, []) @@ -104,7 +85,7 @@ export function LibrarySearchBar(props: LibrarySearchBarProps): JSX.Element { > - - - {isOpen && - optionsList - .filter((item) => !inputValue || item.includes(inputValue)) - .map((item, index) => ( - - {item} - - ))} - - - {/* {searchTerm && ( */} - - + - - - {/* )} */} - {/* {!searchTerm && ( */} - - {/* )} */} + // props.applySearchQuery('') + // inputRef.current?.blur() + }} + > + Search + + {/* )} */} + {/* {!searchTerm && ( */} + + {/* )} */} + + + + {isOpen && + recentSearches + .filter( + (item) => !inputValue || item.includes(inputValue) + ) + .map((item, index) => ( + + {item} + + ))} + + )} From 2556fda6da7980bdba855b8799c043cfab5271a1 Mon Sep 17 00:00:00 2001 From: Rupin Khandelwal Date: Thu, 8 Sep 2022 17:18:21 -0600 Subject: [PATCH 09/23] commenting out searchTerm from the file, leveraging inputValue, setting up localStorage with data, loading the data in the dropdown, selection of the field --- .../templates/library/LibrarySearchBar.tsx | 22 ++++++++++++------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/packages/web/components/templates/library/LibrarySearchBar.tsx b/packages/web/components/templates/library/LibrarySearchBar.tsx index 5524fa6b3..cbeeb6bb3 100644 --- a/packages/web/components/templates/library/LibrarySearchBar.tsx +++ b/packages/web/components/templates/library/LibrarySearchBar.tsx @@ -35,7 +35,7 @@ export type LibrarySearchBarProps = { } export function LibrarySearchBar(props: LibrarySearchBarProps): JSX.Element { - const [searchTerm, setSearchTerm] = useState('') + //const [searchTerm, setSearchTerm] = useState('') const [recentSearches, setRecentSearches] = useState(Array<[]>()) useEffect(() => { @@ -48,10 +48,10 @@ export function LibrarySearchBar(props: LibrarySearchBarProps): JSX.Element { console.log( - selection ? `You selected ${selection.value}` : 'Selection Cleared' + selection ? `You selected ${selection}` : 'Selection Cleared' ) } - itemToString={(item) => (item ? item.value : '')} + itemToString={(item) => (item ? item : '')} > {({ getInputProps, @@ -78,6 +78,7 @@ export function LibrarySearchBar(props: LibrarySearchBarProps): JSX.Element { style={{ width: '100%' }} onSubmit={(event) => { event.preventDefault() + //localStorage.setItem(inputValue, inputValue) // props.applySearchQuery(searchTerm || '') // inputRef.current?.blur() }} @@ -92,10 +93,12 @@ export function LibrarySearchBar(props: LibrarySearchBarProps): JSX.Element { }} type="text" tabIndex={0} - value={searchTerm} + value={inputValue} placeholder="Search" onChange={(event) => { - setSearchTerm(event.target.value) + event.preventDefault() + //setSearchTerm(inputValue) + }} {...getInputProps()} /> @@ -116,7 +119,7 @@ export function LibrarySearchBar(props: LibrarySearchBarProps): JSX.Element { style="plainIcon" onClick={(event) => { event.preventDefault() - setSearchTerm('') + //setSearchTerm('') clearSelection //props.applySearchQuery('') // inputRef.current?.blur() @@ -134,13 +137,16 @@ export function LibrarySearchBar(props: LibrarySearchBarProps): JSX.Element { + + - - {/* )} */} - {/* {!searchTerm && ( */} - - {/* )} */} - + + {/* )} */} + {/* {!searchTerm && ( */} + + {/* )} */} + - - {isOpen && - recentSearches - .filter( - (item) => !inputValue || item.includes(inputValue) - ) - .map((item, index) => ( - + {isOpen && + recentSearches + .filter((item) => !inputValue || item.includes(inputValue)) + .map((item, index) => ( + + + - - - {item} - - { - localStorage.removeItem(`${item}`) - setRecentSearches(Object.values(localStorage)) - }} - /> - - ))} - - - - - )} - - + {item} + + { + localStorage.removeItem(`${item}`) + setRecentSearches(Object.values(localStorage)) + }} + /> + + ))} + + + + + )} + ) } From f1e7a2ed87ad4f8a47a203c268c76d6928f23a95 Mon Sep 17 00:00:00 2001 From: Rupin Khandelwal Date: Tue, 27 Sep 2022 09:13:32 -0500 Subject: [PATCH 22/23] Adding openMenu method on focus of the Search input Field --- .../web/components/templates/library/LibrarySearchBar.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/web/components/templates/library/LibrarySearchBar.tsx b/packages/web/components/templates/library/LibrarySearchBar.tsx index 146a0c796..a0f243dd2 100644 --- a/packages/web/components/templates/library/LibrarySearchBar.tsx +++ b/packages/web/components/templates/library/LibrarySearchBar.tsx @@ -53,6 +53,7 @@ export function LibrarySearchBar(props: LibrarySearchBarProps): JSX.Element { highlightedIndex, inputValue, clearSelection, + openMenu, }) => ( { + event.preventDefault() + openMenu() + //props.applySearchQuery('') + // inputRef.current?.blur() + }} onChange={(event: any) => { event.preventDefault() }} From 9d4ce8fac6f25caf077160c7ea6ad66537619be1 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Fri, 30 Sep 2022 09:56:25 +0800 Subject: [PATCH 23/23] Add missing package to lockfile --- yarn.lock | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/yarn.lock b/yarn.lock index 97a48bba4..d2578b7ca 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12576,6 +12576,17 @@ downshift@^6.0.15: react-is "^17.0.2" tslib "^2.3.0" +downshift@^6.1.9: + version "6.1.12" + resolved "https://registry.yarnpkg.com/downshift/-/downshift-6.1.12.tgz#f14476b41a6f6fd080c340bad1ddf449f7143f6f" + integrity sha512-7XB/iaSJVS4T8wGFT3WRXmSF1UlBHAA40DshZtkrIscIN+VC+Lh363skLxFTvJwtNgHxAMDGEHT4xsyQFWL+UA== + dependencies: + "@babel/runtime" "^7.14.8" + compute-scroll-into-view "^1.0.17" + prop-types "^15.7.2" + react-is "^17.0.2" + tslib "^2.3.0" + dset@^3.1.0, dset@^3.1.1, dset@^3.1.2: version "3.1.2" resolved "https://registry.yarnpkg.com/dset/-/dset-3.1.2.tgz#89c436ca6450398396dc6538ea00abc0c54cd45a"