mirror of
https://github.com/yangshun/tech-interview-handbook.git
synced 2025-08-01 17:35:08 +08:00
[portal][ui] allow value to be specified for comapnies and job titles typeahead
This commit is contained in:
@ -11,6 +11,7 @@ type Props = Readonly<{
|
|||||||
onSelect: (option: TypeaheadOption | null) => void;
|
onSelect: (option: TypeaheadOption | null) => void;
|
||||||
placeholder?: string;
|
placeholder?: string;
|
||||||
required?: boolean;
|
required?: boolean;
|
||||||
|
value?: TypeaheadOption | null;
|
||||||
}>;
|
}>;
|
||||||
|
|
||||||
export default function CompaniesTypeahead({
|
export default function CompaniesTypeahead({
|
||||||
@ -19,6 +20,7 @@ export default function CompaniesTypeahead({
|
|||||||
isLabelHidden,
|
isLabelHidden,
|
||||||
placeholder,
|
placeholder,
|
||||||
required,
|
required,
|
||||||
|
value,
|
||||||
}: Props) {
|
}: Props) {
|
||||||
const [query, setQuery] = useState('');
|
const [query, setQuery] = useState('');
|
||||||
const companies = trpc.useQuery([
|
const companies = trpc.useQuery([
|
||||||
@ -47,6 +49,7 @@ export default function CompaniesTypeahead({
|
|||||||
placeholder={placeholder}
|
placeholder={placeholder}
|
||||||
required={required}
|
required={required}
|
||||||
textSize="inherit"
|
textSize="inherit"
|
||||||
|
value={value}
|
||||||
onQueryChange={setQuery}
|
onQueryChange={setQuery}
|
||||||
onSelect={onSelect}
|
onSelect={onSelect}
|
||||||
/>
|
/>
|
||||||
|
@ -10,6 +10,7 @@ type Props = Readonly<{
|
|||||||
onSelect: (option: TypeaheadOption | null) => void;
|
onSelect: (option: TypeaheadOption | null) => void;
|
||||||
placeholder?: string;
|
placeholder?: string;
|
||||||
required?: boolean;
|
required?: boolean;
|
||||||
|
value?: TypeaheadOption | null;
|
||||||
}>;
|
}>;
|
||||||
|
|
||||||
export default function JobTitlesTypeahead({
|
export default function JobTitlesTypeahead({
|
||||||
@ -18,6 +19,7 @@ export default function JobTitlesTypeahead({
|
|||||||
isLabelHidden,
|
isLabelHidden,
|
||||||
placeholder,
|
placeholder,
|
||||||
required,
|
required,
|
||||||
|
value,
|
||||||
}: Props) {
|
}: Props) {
|
||||||
const [query, setQuery] = useState('');
|
const [query, setQuery] = useState('');
|
||||||
const options = Object.entries(JobTitleLabels)
|
const options = Object.entries(JobTitleLabels)
|
||||||
@ -42,6 +44,7 @@ export default function JobTitlesTypeahead({
|
|||||||
placeholder={placeholder}
|
placeholder={placeholder}
|
||||||
required={required}
|
required={required}
|
||||||
textSize="inherit"
|
textSize="inherit"
|
||||||
|
value={value}
|
||||||
onQueryChange={setQuery}
|
onQueryChange={setQuery}
|
||||||
onSelect={onSelect}
|
onSelect={onSelect}
|
||||||
/>
|
/>
|
||||||
|
@ -37,7 +37,7 @@ type Props = Readonly<{
|
|||||||
onSelect: (option: TypeaheadOption | null) => void;
|
onSelect: (option: TypeaheadOption | null) => void;
|
||||||
options: ReadonlyArray<TypeaheadOption>;
|
options: ReadonlyArray<TypeaheadOption>;
|
||||||
textSize?: TypeaheadTextSize;
|
textSize?: TypeaheadTextSize;
|
||||||
value?: TypeaheadOption;
|
value?: TypeaheadOption | null;
|
||||||
}> &
|
}> &
|
||||||
Readonly<Attributes>;
|
Readonly<Attributes>;
|
||||||
|
|
||||||
@ -90,6 +90,8 @@ export default function Typeahead({
|
|||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Combobox
|
<Combobox
|
||||||
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
// @ts-ignore
|
||||||
by="id"
|
by="id"
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
@ -104,7 +106,7 @@ export default function Typeahead({
|
|||||||
onChange={(newValue) => {
|
onChange={(newValue) => {
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
onSelect(newValue as TypeaheadOption);
|
onSelect(newValue as TypeaheadOption | null);
|
||||||
}}>
|
}}>
|
||||||
<Combobox.Label
|
<Combobox.Label
|
||||||
className={clsx(
|
className={clsx(
|
||||||
|
Reference in New Issue
Block a user