Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

admin(ui): SearchableSelect - differentiate between loading and no items

Browse source
This commit is contained in:
Matthew Penner 2021-02-16 13:23:24 -07:00
parent 224943cc85
commit dc003a6ada
3 changed files with 11 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
resources/scripts/components/admin/nodes/DatabaseSelect.tsx
View file

@ -8,7 +8,7 @@ export default ({ selected }: { selected: Database | null }) => {
const context = useFormikContext(); const context = useFormikContext();
const [ database, setDatabase ] = useState<Database | null>(selected); const [ database, setDatabase ] = useState<Database | null>(selected);
const [ databases, setDatabases ] = useState<Database[]>([]); const [ databases, setDatabases ] = useState<Database[] | null>(null);
const onSearch = (query: string): Promise<void> => { const onSearch = (query: string): Promise<void> => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
@ -40,7 +40,7 @@ export default ({ selected }: { selected: Database | null }) => {
getSelectedText={getSelectedText} getSelectedText={getSelectedText}
nullable nullable
> >
{databases.map(d => ( {databases?.map(d => (
<Option key={d.id} selectId="database" id={d.id} item={d} active={d.id === database?.id}> <Option key={d.id} selectId="database" id={d.id} item={d} active={d.id === database?.id}>
{d.name} {d.name}
</Option> </Option>

4
resources/scripts/components/admin/nodes/LocationSelect.tsx
View file

@ -8,7 +8,7 @@ export default ({ selected }: { selected: Location | null }) => {
const context = useFormikContext(); const context = useFormikContext();
const [ location, setLocation ] = useState<Location | null>(selected); const [ location, setLocation ] = useState<Location | null>(selected);
const [ locations, setLocations ] = useState<Location[]>([]); const [ locations, setLocations ] = useState<Location[] | null>(null);
const onSearch = (query: string): Promise<void> => { const onSearch = (query: string): Promise<void> => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
@ -40,7 +40,7 @@ export default ({ selected }: { selected: Location | null }) => {
getSelectedText={getSelectedText} getSelectedText={getSelectedText}
nullable nullable
> >
{locations.map(d => ( {locations?.map(d => (
<Option key={d.id} selectId="location" id={d.id} item={d} active={d.id === location?.id}> <Option key={d.id} selectId="location" id={d.id} item={d} active={d.id === location?.id}>
{d.short} {d.short}
</Option> </Option>

14
resources/scripts/components/elements/SearchableSelect.tsx
View file

@ -18,8 +18,8 @@ interface SearchableSelectProps<T> {
selected: T | null; selected: T | null;
items: T[]; items: T[] | null;
setItems: (items: T[]) => void; setItems: (items: T[] | null) => void;
onSearch: (query: string) => Promise<void>; onSearch: (query: string) => Promise<void>;
onSelect: (item: T | null) => void; onSelect: (item: T | null) => void;
@ -40,7 +40,7 @@ function SearchableSelect<T> ({ id, name, selected, items, setItems, onSearch, o
const onFocus = () => { const onFocus = () => {
setInputText(''); setInputText('');
setItems([]); setItems(null);
setExpanded(true); setExpanded(true);
}; };
@ -55,13 +55,13 @@ function SearchableSelect<T> ({ id, name, selected, items, setItems, onSearch, o
} }
if (query === '' || query.length < 2) { if (query === '' || query.length < 2) {
setItems([]); setItems(null);
return; return;
} }
setLoading(true); setLoading(true);
onSearch(query).then(() => setLoading(false)); onSearch(query).then(() => setLoading(false));
}, 1000); }, 250);
useEffect(() => { useEffect(() => {
setInputText(getSelectedText(selected) || ''); setInputText(getSelectedText(selected) || '');
@ -151,8 +151,8 @@ function SearchableSelect<T> ({ id, name, selected, items, setItems, onSearch, o
</div> </div>
<Dropdown ref={itemsList} expanded={expanded}> <Dropdown ref={itemsList} expanded={expanded}>
{ items.length < 1 ? { items === null || items.length < 1 ?
inputText.length < 2 ? items === null || inputText.length < 2 ?
<div css={tw`flex flex-row items-center h-10 px-3`}> <div css={tw`flex flex-row items-center h-10 px-3`}>
<p css={tw`text-sm`}>Please type 2 or more characters.</p> <p css={tw`text-sm`}>Please type 2 or more characters.</p>
</div> </div>