mirror of
https://github.com/yangshun/tech-interview-handbook.git
synced 2025-07-14 18:05:55 +08:00
[portal][misc] refactor typeahead props
This commit is contained in:
@ -1,28 +1,32 @@
|
|||||||
|
import type { ComponentProps } from 'react';
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import type { TypeaheadOption } from '@tih/ui';
|
import type { TypeaheadOption } from '@tih/ui';
|
||||||
import { Typeahead } from '@tih/ui';
|
import { Typeahead } from '@tih/ui';
|
||||||
|
|
||||||
import { trpc } from '~/utils/trpc';
|
import { trpc } from '~/utils/trpc';
|
||||||
|
|
||||||
type Props = Readonly<{
|
type BaseProps = Pick<
|
||||||
disabled?: boolean;
|
ComponentProps<typeof Typeahead>,
|
||||||
errorMessage?: string;
|
| 'disabled'
|
||||||
isLabelHidden?: boolean;
|
| 'errorMessage'
|
||||||
|
| 'isLabelHidden'
|
||||||
|
| 'placeholder'
|
||||||
|
| 'required'
|
||||||
|
| 'textSize'
|
||||||
|
>;
|
||||||
|
|
||||||
|
type Props = BaseProps &
|
||||||
|
Readonly<{
|
||||||
label?: string;
|
label?: string;
|
||||||
onSelect: (option: TypeaheadOption | null) => void;
|
onSelect: (option: TypeaheadOption | null) => void;
|
||||||
placeholder?: string;
|
|
||||||
required?: boolean;
|
|
||||||
value?: TypeaheadOption | null;
|
value?: TypeaheadOption | null;
|
||||||
}>;
|
}>;
|
||||||
|
|
||||||
export default function CitiesTypeahead({
|
export default function CitiesTypeahead({
|
||||||
disabled,
|
|
||||||
label = 'City',
|
label = 'City',
|
||||||
onSelect,
|
onSelect,
|
||||||
isLabelHidden,
|
|
||||||
placeholder,
|
|
||||||
required,
|
|
||||||
value,
|
value,
|
||||||
|
...props
|
||||||
}: Props) {
|
}: Props) {
|
||||||
const [query, setQuery] = useState('');
|
const [query, setQuery] = useState('');
|
||||||
const cities = trpc.useQuery([
|
const cities = trpc.useQuery([
|
||||||
@ -36,8 +40,6 @@ export default function CitiesTypeahead({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Typeahead
|
<Typeahead
|
||||||
disabled={disabled}
|
|
||||||
isLabelHidden={isLabelHidden}
|
|
||||||
label={label}
|
label={label}
|
||||||
noResultsMessage="No cities found"
|
noResultsMessage="No cities found"
|
||||||
nullable={true}
|
nullable={true}
|
||||||
@ -48,12 +50,10 @@ export default function CitiesTypeahead({
|
|||||||
value: id,
|
value: id,
|
||||||
})) ?? []
|
})) ?? []
|
||||||
}
|
}
|
||||||
placeholder={placeholder}
|
|
||||||
required={required}
|
|
||||||
textSize="inherit"
|
|
||||||
value={value}
|
value={value}
|
||||||
onQueryChange={setQuery}
|
onQueryChange={setQuery}
|
||||||
onSelect={onSelect}
|
onSelect={onSelect}
|
||||||
|
{...props}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1,26 +1,30 @@
|
|||||||
|
import type { ComponentProps } from 'react';
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import type { TypeaheadOption } from '@tih/ui';
|
import type { TypeaheadOption } from '@tih/ui';
|
||||||
import { Typeahead } from '@tih/ui';
|
import { Typeahead } from '@tih/ui';
|
||||||
|
|
||||||
import { trpc } from '~/utils/trpc';
|
import { trpc } from '~/utils/trpc';
|
||||||
|
|
||||||
type Props = Readonly<{
|
type BaseProps = Pick<
|
||||||
disabled?: boolean;
|
ComponentProps<typeof Typeahead>,
|
||||||
errorMessage?: string;
|
| 'disabled'
|
||||||
isLabelHidden?: boolean;
|
| 'errorMessage'
|
||||||
|
| 'isLabelHidden'
|
||||||
|
| 'placeholder'
|
||||||
|
| 'required'
|
||||||
|
| 'textSize'
|
||||||
|
>;
|
||||||
|
|
||||||
|
type Props = BaseProps &
|
||||||
|
Readonly<{
|
||||||
onSelect: (option: TypeaheadOption | null) => void;
|
onSelect: (option: TypeaheadOption | null) => void;
|
||||||
placeholder?: string;
|
|
||||||
required?: boolean;
|
|
||||||
value?: TypeaheadOption | null;
|
value?: TypeaheadOption | null;
|
||||||
}>;
|
}>;
|
||||||
|
|
||||||
export default function CompaniesTypeahead({
|
export default function CompaniesTypeahead({
|
||||||
disabled,
|
|
||||||
onSelect,
|
onSelect,
|
||||||
isLabelHidden,
|
|
||||||
placeholder,
|
|
||||||
required,
|
|
||||||
value,
|
value,
|
||||||
|
...props
|
||||||
}: Props) {
|
}: Props) {
|
||||||
const [query, setQuery] = useState('');
|
const [query, setQuery] = useState('');
|
||||||
const companies = trpc.useQuery([
|
const companies = trpc.useQuery([
|
||||||
@ -34,8 +38,6 @@ export default function CompaniesTypeahead({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Typeahead
|
<Typeahead
|
||||||
disabled={disabled}
|
|
||||||
isLabelHidden={isLabelHidden}
|
|
||||||
label="Company"
|
label="Company"
|
||||||
noResultsMessage="No companies found"
|
noResultsMessage="No companies found"
|
||||||
nullable={true}
|
nullable={true}
|
||||||
@ -46,12 +48,10 @@ export default function CompaniesTypeahead({
|
|||||||
value: id,
|
value: id,
|
||||||
})) ?? []
|
})) ?? []
|
||||||
}
|
}
|
||||||
placeholder={placeholder}
|
|
||||||
required={required}
|
|
||||||
textSize="inherit"
|
|
||||||
value={value}
|
value={value}
|
||||||
onQueryChange={setQuery}
|
onQueryChange={setQuery}
|
||||||
onSelect={onSelect}
|
onSelect={onSelect}
|
||||||
|
{...props}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1,26 +1,30 @@
|
|||||||
|
import type { ComponentProps } from 'react';
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import type { TypeaheadOption } from '@tih/ui';
|
import type { TypeaheadOption } from '@tih/ui';
|
||||||
import { Typeahead } from '@tih/ui';
|
import { Typeahead } from '@tih/ui';
|
||||||
|
|
||||||
import { trpc } from '~/utils/trpc';
|
import { trpc } from '~/utils/trpc';
|
||||||
|
|
||||||
type Props = Readonly<{
|
type BaseProps = Pick<
|
||||||
disabled?: boolean;
|
ComponentProps<typeof Typeahead>,
|
||||||
errorMessage?: string;
|
| 'disabled'
|
||||||
isLabelHidden?: boolean;
|
| 'errorMessage'
|
||||||
|
| 'isLabelHidden'
|
||||||
|
| 'placeholder'
|
||||||
|
| 'required'
|
||||||
|
| 'textSize'
|
||||||
|
>;
|
||||||
|
|
||||||
|
type Props = BaseProps &
|
||||||
|
Readonly<{
|
||||||
onSelect: (option: TypeaheadOption | null) => void;
|
onSelect: (option: TypeaheadOption | null) => void;
|
||||||
placeholder?: string;
|
|
||||||
required?: boolean;
|
|
||||||
value?: TypeaheadOption | null;
|
value?: TypeaheadOption | null;
|
||||||
}>;
|
}>;
|
||||||
|
|
||||||
export default function CountriesTypeahead({
|
export default function CountriesTypeahead({
|
||||||
disabled,
|
|
||||||
onSelect,
|
onSelect,
|
||||||
isLabelHidden,
|
|
||||||
placeholder,
|
|
||||||
required,
|
|
||||||
value,
|
value,
|
||||||
|
...props
|
||||||
}: Props) {
|
}: Props) {
|
||||||
const [query, setQuery] = useState('');
|
const [query, setQuery] = useState('');
|
||||||
const countries = trpc.useQuery([
|
const countries = trpc.useQuery([
|
||||||
@ -34,8 +38,6 @@ export default function CountriesTypeahead({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Typeahead
|
<Typeahead
|
||||||
disabled={disabled}
|
|
||||||
isLabelHidden={isLabelHidden}
|
|
||||||
label="Country"
|
label="Country"
|
||||||
noResultsMessage="No countries found"
|
noResultsMessage="No countries found"
|
||||||
nullable={true}
|
nullable={true}
|
||||||
@ -46,12 +48,10 @@ export default function CountriesTypeahead({
|
|||||||
value: id,
|
value: id,
|
||||||
})) ?? []
|
})) ?? []
|
||||||
}
|
}
|
||||||
placeholder={placeholder}
|
|
||||||
required={required}
|
|
||||||
textSize="inherit"
|
|
||||||
value={value}
|
value={value}
|
||||||
onQueryChange={setQuery}
|
onQueryChange={setQuery}
|
||||||
onSelect={onSelect}
|
onSelect={onSelect}
|
||||||
|
{...props}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1,25 +1,30 @@
|
|||||||
|
import type { ComponentProps } from 'react';
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import type { TypeaheadOption } from '@tih/ui';
|
import type { TypeaheadOption } from '@tih/ui';
|
||||||
import { Typeahead } from '@tih/ui';
|
import { Typeahead } from '@tih/ui';
|
||||||
|
|
||||||
import { JobTitleLabels } from './JobTitles';
|
import { JobTitleLabels } from './JobTitles';
|
||||||
|
|
||||||
type Props = Readonly<{
|
type BaseProps = Pick<
|
||||||
disabled?: boolean;
|
ComponentProps<typeof Typeahead>,
|
||||||
isLabelHidden?: boolean;
|
| 'disabled'
|
||||||
|
| 'errorMessage'
|
||||||
|
| 'isLabelHidden'
|
||||||
|
| 'placeholder'
|
||||||
|
| 'required'
|
||||||
|
| 'textSize'
|
||||||
|
>;
|
||||||
|
|
||||||
|
type Props = BaseProps &
|
||||||
|
Readonly<{
|
||||||
onSelect: (option: TypeaheadOption | null) => void;
|
onSelect: (option: TypeaheadOption | null) => void;
|
||||||
placeholder?: string;
|
|
||||||
required?: boolean;
|
|
||||||
value?: TypeaheadOption | null;
|
value?: TypeaheadOption | null;
|
||||||
}>;
|
}>;
|
||||||
|
|
||||||
export default function JobTitlesTypeahead({
|
export default function JobTitlesTypeahead({
|
||||||
disabled,
|
|
||||||
onSelect,
|
onSelect,
|
||||||
isLabelHidden,
|
|
||||||
placeholder,
|
|
||||||
required,
|
|
||||||
value,
|
value,
|
||||||
|
...props
|
||||||
}: Props) {
|
}: Props) {
|
||||||
const [query, setQuery] = useState('');
|
const [query, setQuery] = useState('');
|
||||||
const options = Object.entries(JobTitleLabels)
|
const options = Object.entries(JobTitleLabels)
|
||||||
@ -35,18 +40,14 @@ export default function JobTitlesTypeahead({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Typeahead
|
<Typeahead
|
||||||
disabled={disabled}
|
|
||||||
isLabelHidden={isLabelHidden}
|
|
||||||
label="Job Title"
|
label="Job Title"
|
||||||
noResultsMessage="No available job titles."
|
noResultsMessage="No available job titles."
|
||||||
nullable={true}
|
nullable={true}
|
||||||
options={options}
|
options={options}
|
||||||
placeholder={placeholder}
|
|
||||||
required={required}
|
|
||||||
textSize="inherit"
|
|
||||||
value={value}
|
value={value}
|
||||||
onQueryChange={setQuery}
|
onQueryChange={setQuery}
|
||||||
onSelect={onSelect}
|
onSelect={onSelect}
|
||||||
|
{...props}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user