algorithm/tech-interview-handbook
1
0
Fork 0
mirror of https://github.com/yangshun/tech-interview-handbook.git synced 2025-07-29 21:23:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ui][companies typeahead] Add isLabelHidden and placeHolder props (#361)

Browse Source 
* [ui][companies typeahead] add isLabelHidden and placeHolder props

* [ui][companies typeahead] add isLabelHidden and placeHolder props
This commit is contained in:
Ai Ling
2022-10-11 19:53:21 +08:00
committed by GitHub
parent 73e1f76570
commit 325a2d1f7c
2 changed files with 13 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
apps/portal/src/components/shared/CompaniesTypeahead.tsx
View File

@ -6,10 +6,17 @@ import { trpc } from '~/utils/trpc';
type Props = Readonly<{ type Props = Readonly<{
disabled?: boolean; disabled?: boolean;
isLabelHidden?: boolean;
onSelect: (option: TypeaheadOption) => void; onSelect: (option: TypeaheadOption) => void;
placeHolder?: string;
}>; }>;
export default function CompaniesTypeahead({ disabled, onSelect }: Props) { export default function CompaniesTypeahead({
disabled,
onSelect,
isLabelHidden,
placeHolder,
}: Props) {
const [query, setQuery] = useState(''); const [query, setQuery] = useState('');
const companies = trpc.useQuery([ const companies = trpc.useQuery([
'companies.list', 'companies.list',
@ -23,6 +30,7 @@ export default function CompaniesTypeahead({ disabled, onSelect }: Props) {
return ( return (
<Typeahead <Typeahead
disabled={disabled} disabled={disabled}
isLabelHidden={isLabelHidden}
label="Company" label="Company"
noResultsMessage="No companies found" noResultsMessage="No companies found"
nullable={true} nullable={true}
@ -33,6 +41,7 @@ export default function CompaniesTypeahead({ disabled, onSelect }: Props) {
value: id, value: id,
})) ?? [] })) ?? []
} }
placeholder={placeHolder}
onQueryChange={setQuery} onQueryChange={setQuery}
onSelect={onSelect} onSelect={onSelect}
/> />

3
packages/ui/src/Typeahead/Typeahead.tsx
View File

@ -22,6 +22,7 @@ type Props = Readonly<{
) => void; ) => void;
onSelect: (option: TypeaheadOption) => void; onSelect: (option: TypeaheadOption) => void;
options: ReadonlyArray<TypeaheadOption>; options: ReadonlyArray<TypeaheadOption>;
placeholder?: string;
value?: TypeaheadOption; value?: TypeaheadOption;
}>; }>;
@ -35,6 +36,7 @@ export default function Typeahead({
onQueryChange, onQueryChange,
value, value,
onSelect, onSelect,
placeholder,
}: Props) { }: Props) {
const [query, setQuery] = useState(''); const [query, setQuery] = useState('');
return ( return (
@ -77,6 +79,7 @@ export default function Typeahead({
displayValue={(option) => displayValue={(option) =>
(option as unknown as TypeaheadOption)?.label (option as unknown as TypeaheadOption)?.label
} }
placeholder={placeholder}
onChange={(event) => { onChange={(event) => {
setQuery(event.target.value); setQuery(event.target.value);
onQueryChange(event.target.value, event); onQueryChange(event.target.value, event);