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

[portal][misc] refactor typeahead props

Browse Source
This commit is contained in:
Tay Yang Shun
2022-10-31 20:24:07 +08:00
parent fcff0d663f
commit 1acb37939c
4 changed files with 73 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
apps/portal/src/components/shared/CitiesTypeahead.tsx
View File

@ -1,28 +1,32 @@
import type { ComponentProps } from 'react';
import { useState } from 'react';
import type { TypeaheadOption } from '@tih/ui';
import { Typeahead } from '@tih/ui';
import { trpc } from '~/utils/trpc';
type Props = Readonly<{
disabled?: boolean;
errorMessage?: string;
isLabelHidden?: boolean;
label?: string;
onSelect: (option: TypeaheadOption | null) => void;
placeholder?: string;
required?: boolean;
value?: TypeaheadOption | null;
}>;
type BaseProps = Pick<
ComponentProps<typeof Typeahead>,
| 'disabled'
| 'errorMessage'
| 'isLabelHidden'
| 'placeholder'
| 'required'
| 'textSize'
>;
type Props = BaseProps &
Readonly<{
label?: string;
onSelect: (option: TypeaheadOption | null) => void;
value?: TypeaheadOption | null;
}>;
export default function CitiesTypeahead({
disabled,
label = 'City',
onSelect,
isLabelHidden,
placeholder,
required,
value,
...props
}: Props) {
const [query, setQuery] = useState('');
const cities = trpc.useQuery([
@ -36,8 +40,6 @@ export default function CitiesTypeahead({
return (
<Typeahead
disabled={disabled}
isLabelHidden={isLabelHidden}
label={label}
noResultsMessage="No cities found"
nullable={true}
@ -48,12 +50,10 @@ export default function CitiesTypeahead({
value: id,
})) ?? []
}
placeholder={placeholder}
required={required}
textSize="inherit"
value={value}
onQueryChange={setQuery}
onSelect={onSelect}
{...props}
/>
);
}

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

@ -1,26 +1,30 @@
import type { ComponentProps } from 'react';
import { useState } from 'react';
import type { TypeaheadOption } from '@tih/ui';
import { Typeahead } from '@tih/ui';
import { trpc } from '~/utils/trpc';
type Props = Readonly<{
disabled?: boolean;
errorMessage?: string;
isLabelHidden?: boolean;
onSelect: (option: TypeaheadOption | null) => void;
placeholder?: string;
required?: boolean;
value?: TypeaheadOption | null;
}>;
type BaseProps = Pick<
ComponentProps<typeof Typeahead>,
| 'disabled'
| 'errorMessage'
| 'isLabelHidden'
| 'placeholder'
| 'required'
| 'textSize'
>;
type Props = BaseProps &
Readonly<{
onSelect: (option: TypeaheadOption | null) => void;
value?: TypeaheadOption | null;
}>;
export default function CompaniesTypeahead({
disabled,
onSelect,
isLabelHidden,
placeholder,
required,
value,
...props
}: Props) {
const [query, setQuery] = useState('');
const companies = trpc.useQuery([
@ -34,8 +38,6 @@ export default function CompaniesTypeahead({
return (
<Typeahead
disabled={disabled}
isLabelHidden={isLabelHidden}
label="Company"
noResultsMessage="No companies found"
nullable={true}
@ -46,12 +48,10 @@ export default function CompaniesTypeahead({
value: id,
})) ?? []
}
placeholder={placeholder}
required={required}
textSize="inherit"
value={value}
onQueryChange={setQuery}
onSelect={onSelect}
{...props}
/>
);
}

36
apps/portal/src/components/shared/CountriesTypeahead.tsx
View File

@ -1,26 +1,30 @@
import type { ComponentProps } from 'react';
import { useState } from 'react';
import type { TypeaheadOption } from '@tih/ui';
import { Typeahead } from '@tih/ui';
import { trpc } from '~/utils/trpc';
type Props = Readonly<{
disabled?: boolean;
errorMessage?: string;
isLabelHidden?: boolean;
onSelect: (option: TypeaheadOption | null) => void;
placeholder?: string;
required?: boolean;
value?: TypeaheadOption | null;
}>;
type BaseProps = Pick<
ComponentProps<typeof Typeahead>,
| 'disabled'
| 'errorMessage'
| 'isLabelHidden'
| 'placeholder'
| 'required'
| 'textSize'
>;
type Props = BaseProps &
Readonly<{
onSelect: (option: TypeaheadOption | null) => void;
value?: TypeaheadOption | null;
}>;
export default function CountriesTypeahead({
disabled,
onSelect,
isLabelHidden,
placeholder,
required,
value,
...props
}: Props) {
const [query, setQuery] = useState('');
const countries = trpc.useQuery([
@ -34,8 +38,6 @@ export default function CountriesTypeahead({
return (
<Typeahead
disabled={disabled}
isLabelHidden={isLabelHidden}
label="Country"
noResultsMessage="No countries found"
nullable={true}
@ -46,12 +48,10 @@ export default function CountriesTypeahead({
value: id,
})) ?? []
}
placeholder={placeholder}
required={required}
textSize="inherit"
value={value}
onQueryChange={setQuery}
onSelect={onSelect}
{...props}
/>
);
}

35
apps/portal/src/components/shared/JobTitlesTypahead.tsx
View File

@ -1,25 +1,30 @@
import type { ComponentProps } from 'react';
import { useState } from 'react';
import type { TypeaheadOption } from '@tih/ui';
import { Typeahead } from '@tih/ui';
import { JobTitleLabels } from './JobTitles';
type Props = Readonly<{
disabled?: boolean;
isLabelHidden?: boolean;
onSelect: (option: TypeaheadOption | null) => void;
placeholder?: string;
required?: boolean;
value?: TypeaheadOption | null;
}>;
type BaseProps = Pick<
ComponentProps<typeof Typeahead>,
| 'disabled'
| 'errorMessage'
| 'isLabelHidden'
| 'placeholder'
| 'required'
| 'textSize'
>;
type Props = BaseProps &
Readonly<{
onSelect: (option: TypeaheadOption | null) => void;
value?: TypeaheadOption | null;
}>;
export default function JobTitlesTypeahead({
disabled,
onSelect,
isLabelHidden,
placeholder,
required,
value,
...props
}: Props) {
const [query, setQuery] = useState('');
const options = Object.entries(JobTitleLabels)
@ -35,18 +40,14 @@ export default function JobTitlesTypeahead({
return (
<Typeahead
disabled={disabled}
isLabelHidden={isLabelHidden}
label="Job Title"
noResultsMessage="No available job titles."
nullable={true}
options={options}
placeholder={placeholder}
required={required}
textSize="inherit"
value={value}
onQueryChange={setQuery}
onSelect={onSelect}
{...props}
/>
);
}