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

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

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