admin(ui): fix remaining problems with SearchableSelect.tsx
This commit is contained in:
Matthew Penner
parent
3971c4499d
commit
93be6db530
7 changed files with 118 additions and 161 deletions
|
|
@ -1,10 +1,10 @@
|
|||
import React, { useState } from 'react';
|
||||
import SearchableSelect, { Option } from '@/components/elements/SearchableSelect';
|
||||
import searchDatabases from '@/api/admin/databases/searchDatabases';
|
||||
import { Database } from '@/api/admin/databases/getDatabases';
|
||||
import searchDatabases from '@/api/admin/databases/searchDatabases';
|
||||
import SearchableSelect, { Option } from '@/components/elements/SearchableSelect';
|
||||
|
||||
export default ({ selected }: { selected?: Database | null }) => {
|
||||
const [ database, setDatabase ] = useState<Database | null>(selected || null);
|
||||
export default ({ selected }: { selected: Database | null }) => {
|
||||
const [ database, setDatabase ] = useState<Database | null>(selected);
|
||||
const [ databases, setDatabases ] = useState<Database[]>([]);
|
||||
|
||||
const onSearch = (query: string): Promise<void> => {
|
||||
|
|
@ -37,7 +37,7 @@ export default ({ selected }: { selected?: Database | null }) => {
|
|||
nullable
|
||||
>
|
||||
{databases.map(d => (
|
||||
<Option key={d.id} 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}
|
||||
</Option>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -1,140 +1,46 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import styled from 'styled-components/macro';
|
||||
import tw from 'twin.macro';
|
||||
import Input from '@/components/elements/Input';
|
||||
import Label from '@/components/elements/Label';
|
||||
import React, { useState } from 'react';
|
||||
import { Location } from '@/api/admin/locations/getLocations';
|
||||
import searchLocations from '@/api/admin/locations/searchLocations';
|
||||
import InputSpinner from '@/components/elements/InputSpinner';
|
||||
import { debounce } from 'debounce';
|
||||
import SearchableSelect, { Option } from '@/components/elements/SearchableSelect';
|
||||
|
||||
const Dropdown = styled.div<{ expanded: boolean }>`
|
||||
${tw`absolute mt-1 w-full rounded-md bg-neutral-900 shadow-lg z-10`};
|
||||
${props => !props.expanded && tw`hidden`};
|
||||
`;
|
||||
|
||||
export default ({ defaultLocation }: { defaultLocation: Location | null }) => {
|
||||
const [ loading, setLoading ] = useState(false);
|
||||
const [ expanded, setExpanded ] = useState(false);
|
||||
const [ location, setLocation ] = useState<Location | null>(defaultLocation);
|
||||
export default ({ selected }: { selected: Location | null }) => {
|
||||
const [ location, setLocation ] = useState<Location | null>(selected);
|
||||
const [ locations, setLocations ] = useState<Location[]>([]);
|
||||
|
||||
const [ inputText, setInputText ] = useState('');
|
||||
|
||||
const onFocus = () => {
|
||||
setInputText('');
|
||||
setLocations([]);
|
||||
setExpanded(true);
|
||||
const onSearch = (query: string): Promise<void> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
searchLocations({ short: query }).then((locations) => {
|
||||
setLocations(locations);
|
||||
return resolve();
|
||||
}).catch(reject);
|
||||
});
|
||||
};
|
||||
|
||||
const search = debounce((query: string) => {
|
||||
if (!expanded) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (query === '' || query.length < 2) {
|
||||
setLocations([]);
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
searchLocations({ short: query }).then((locations) => {
|
||||
setLocations(locations);
|
||||
}).then(() => setLoading(false));
|
||||
}, 250);
|
||||
|
||||
const selectLocation = (location: Location) => {
|
||||
const onSelect = (location: Location) => {
|
||||
setLocation(location);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setInputText(location?.short || '');
|
||||
setExpanded(false);
|
||||
}, [ location ]);
|
||||
|
||||
useEffect(() => {
|
||||
const handler = (e: KeyboardEvent) => {
|
||||
if (e.key !== 'Escape') {
|
||||
return;
|
||||
}
|
||||
|
||||
setInputText(location?.short || '');
|
||||
setExpanded(false);
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', handler);
|
||||
return () => {
|
||||
window.removeEventListener('keydown', handler);
|
||||
};
|
||||
}, [ expanded ]);
|
||||
const getSelectedText = (location: Location | null): string => {
|
||||
return location?.short || '';
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Label htmlFor="listbox-label">Location</Label>
|
||||
|
||||
<div css={tw`mt-1 relative`}>
|
||||
<InputSpinner visible={loading}>
|
||||
<Input type="text" className="ignoreReadOnly" value={inputText} readOnly={!expanded} onFocus={onFocus} onChange={e => {
|
||||
setInputText(e.currentTarget.value);
|
||||
search(e.currentTarget.value);
|
||||
}}
|
||||
/>
|
||||
</InputSpinner>
|
||||
|
||||
<div css={tw`ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none`}>
|
||||
<svg css={tw`h-5 w-5 text-neutral-400`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path clipRule="evenodd" fillRule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<Dropdown expanded={expanded}>
|
||||
{locations.length < 1 ?
|
||||
inputText.length < 2 ?
|
||||
<div css={tw`h-10 flex flex-row items-center px-3`}>
|
||||
<p css={tw`text-sm`}>Please type 2 or more characters.</p>
|
||||
</div>
|
||||
:
|
||||
<div css={tw`h-10 flex flex-row items-center px-3`}>
|
||||
<p css={tw`text-sm`}>No results found.</p>
|
||||
</div>
|
||||
:
|
||||
<ul tabIndex={-1} role="listbox" aria-labelledby="listbox-label" aria-activedescendant="listbox-item-3" css={tw`max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm`}>
|
||||
{locations.map(l => (
|
||||
l.id === location?.id ?
|
||||
<li key={l.id} id={'listbox-item-' + l.id} role="option" css={tw`text-neutral-200 cursor-pointer select-none relative py-2 pl-3 pr-9 hover:bg-neutral-700`} onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
selectLocation(l);
|
||||
}}
|
||||
>
|
||||
<div css={tw`flex items-center`}>
|
||||
<span css={tw`block font-medium truncate`}>
|
||||
{l.short}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span css={tw`absolute inset-y-0 right-0 flex items-center pr-4`}>
|
||||
<svg css={tw`h-5 w-5 text-primary-400`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path clipRule="evenodd" fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/>
|
||||
</svg>
|
||||
</span>
|
||||
</li>
|
||||
:
|
||||
<li key={l.id} id={'listbox-item-' + l.id} role="option" css={tw`text-neutral-200 cursor-pointer select-none relative py-2 pl-3 pr-9 hover:bg-neutral-700`} onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
selectLocation(l);
|
||||
}}
|
||||
>
|
||||
<div css={tw`flex items-center`}>
|
||||
<span css={tw`block font-normal truncate`}>
|
||||
{l.short}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
}
|
||||
</Dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<SearchableSelect
|
||||
id="location"
|
||||
name="Location"
|
||||
items={locations}
|
||||
selected={location}
|
||||
setItems={setLocations}
|
||||
onSearch={onSearch}
|
||||
onSelect={onSelect}
|
||||
getSelectedText={getSelectedText}
|
||||
nullable
|
||||
>
|
||||
{locations.map(d => (
|
||||
<Option key={d.id} selectId="location" id={d.id} item={d} active={d.id === location?.id}>
|
||||
{d.short}
|
||||
</Option>
|
||||
))}
|
||||
</SearchableSelect>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -98,11 +98,11 @@ export default () => {
|
|||
</div>
|
||||
|
||||
<div css={tw`mb-6`}>
|
||||
<LocationSelect defaultLocation={node?.relations.location || null}/>
|
||||
<LocationSelect selected={node?.relations.location || null}/>
|
||||
</div>
|
||||
|
||||
<div css={tw`mb-6`}>
|
||||
<DatabaseSelect selected={node?.relations.databaseHost}/>
|
||||
<DatabaseSelect selected={node?.relations.databaseHost || null}/>
|
||||
</div>
|
||||
|
||||
<div css={tw`mb-6`}>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue