mirror of
https://github.com/yangshun/tech-interview-handbook.git
synced 2025-07-27 20:22:33 +08:00
[portal] add way to clear month year picker
This commit is contained in:
@ -103,9 +103,9 @@ export default function ContributeQuestionForm({
|
||||
year: field.value.getFullYear(),
|
||||
}}
|
||||
yearRequired={true}
|
||||
onChange={({ month, year }) =>
|
||||
field.onChange(startOfMonth(new Date(year, month - 1)))
|
||||
}
|
||||
onChange={({ month, year }) => {
|
||||
field.onChange(startOfMonth(new Date(year!, month! - 1)));
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
@ -87,15 +87,17 @@ export default function CreateQuestionEncounterForm({
|
||||
)}
|
||||
{step === 3 && (
|
||||
<MonthYearPicker
|
||||
// TODO: Add label and hide label on Select instead.
|
||||
monthLabel=""
|
||||
value={{
|
||||
month: ((selectedDate?.getMonth() ?? 0) + 1) as Month,
|
||||
year: selectedDate?.getFullYear() as number,
|
||||
}}
|
||||
// TODO: Add label and hide label on Select instead.
|
||||
yearLabel=""
|
||||
onChange={(value) => {
|
||||
setSelectedDate(
|
||||
startOfMonth(new Date(value.year, value.month - 1)),
|
||||
startOfMonth(new Date(value.year!, value.month! - 1)),
|
||||
);
|
||||
}}
|
||||
/>
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { useId } from 'react';
|
||||
import { useEffect, useId, useState } from 'react';
|
||||
import { Select } from '@tih/ui';
|
||||
|
||||
export type Month = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
||||
@ -8,12 +8,17 @@ export type MonthYear = Readonly<{
|
||||
year: number;
|
||||
}>;
|
||||
|
||||
export type MonthYearOptional = Readonly<{
|
||||
month: Month | null;
|
||||
year: number | null;
|
||||
}>;
|
||||
|
||||
type Props = Readonly<{
|
||||
errorMessage?: string;
|
||||
monthLabel?: string;
|
||||
monthRequired?: boolean;
|
||||
onChange: (value: MonthYear) => void;
|
||||
value: MonthYear;
|
||||
onChange: (value: MonthYearOptional) => void;
|
||||
value: MonthYearOptional;
|
||||
yearLabel?: string;
|
||||
yearRequired?: boolean;
|
||||
}>;
|
||||
@ -89,29 +94,45 @@ export default function MonthYearPicker({
|
||||
}: Props) {
|
||||
const hasError = errorMessage != null;
|
||||
const errorId = useId();
|
||||
const [monthCounter, setMonthCounter] = useState<number>(0);
|
||||
const [yearCounter, setYearCounter] = useState<number>(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (value.month == null) {
|
||||
setMonthCounter((val) => val + 1);
|
||||
}
|
||||
|
||||
if (value.year == null) {
|
||||
setYearCounter((val) => val + 1);
|
||||
}
|
||||
}, [value.month, value.year]);
|
||||
|
||||
return (
|
||||
<div
|
||||
aria-describedby={hasError ? errorId : undefined}
|
||||
className="flex items-end space-x-4">
|
||||
<Select
|
||||
label={monthLabel}
|
||||
options={MONTH_OPTIONS}
|
||||
required={monthRequired}
|
||||
value={value.month}
|
||||
onChange={(newMonth) =>
|
||||
onChange({ month: Number(newMonth) as Month, year: value.year })
|
||||
}
|
||||
/>
|
||||
<Select
|
||||
label={yearLabel}
|
||||
options={YEAR_OPTIONS}
|
||||
required={yearRequired}
|
||||
value={value.year}
|
||||
onChange={(newYear) =>
|
||||
onChange({ month: value.month, year: Number(newYear) })
|
||||
}
|
||||
/>
|
||||
<div aria-describedby={hasError ? errorId : undefined}>
|
||||
<div className="flex items-end space-x-2">
|
||||
<Select
|
||||
key={`month:${monthCounter}`}
|
||||
label={monthLabel}
|
||||
options={MONTH_OPTIONS}
|
||||
placeholder="Select month"
|
||||
required={monthRequired}
|
||||
value={value.month}
|
||||
onChange={(newMonth) =>
|
||||
onChange({ month: Number(newMonth) as Month, year: value.year })
|
||||
}
|
||||
/>
|
||||
<Select
|
||||
key={`year:${yearCounter}`}
|
||||
label={yearLabel}
|
||||
options={YEAR_OPTIONS}
|
||||
placeholder="Select year"
|
||||
required={yearRequired}
|
||||
value={value.year}
|
||||
onChange={(newYear) =>
|
||||
onChange({ month: value.month, year: Number(newYear) })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
{errorMessage && (
|
||||
<p className="text-danger-600 mt-2 text-sm" id={errorId}>
|
||||
{errorMessage}
|
||||
|
@ -6,7 +6,10 @@ import { HorizontalDivider } from '@tih/ui';
|
||||
|
||||
import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead';
|
||||
import JobTitlesTypeahead from '~/components/shared/JobTitlesTypahead';
|
||||
import type { Month, MonthYear } from '~/components/shared/MonthYearPicker';
|
||||
import type {
|
||||
Month,
|
||||
MonthYearOptional,
|
||||
} from '~/components/shared/MonthYearPicker';
|
||||
import MonthYearPicker from '~/components/shared/MonthYearPicker';
|
||||
|
||||
export default function HomePage() {
|
||||
@ -14,7 +17,8 @@ export default function HomePage() {
|
||||
useState<TypeaheadOption | null>(null);
|
||||
const [selectedJobTitle, setSelectedJobTitle] =
|
||||
useState<TypeaheadOption | null>(null);
|
||||
const [monthYear, setMonthYear] = useState<MonthYear>({
|
||||
|
||||
const [monthYear, setMonthYear] = useState<MonthYearOptional>({
|
||||
month: (new Date().getMonth() + 1) as Month,
|
||||
year: new Date().getFullYear(),
|
||||
});
|
||||
@ -38,7 +42,24 @@ export default function HomePage() {
|
||||
/>
|
||||
<pre>{JSON.stringify(selectedJobTitle, null, 2)}</pre>
|
||||
<HorizontalDivider />
|
||||
<MonthYearPicker value={monthYear} onChange={setMonthYear} />
|
||||
<MonthYearPicker
|
||||
errorMessage={
|
||||
monthYear.month == null || monthYear.year == null
|
||||
? 'Incomplete date'
|
||||
: undefined
|
||||
}
|
||||
value={monthYear}
|
||||
onChange={setMonthYear}
|
||||
/>
|
||||
<Button
|
||||
label="Clear dates"
|
||||
size="sm"
|
||||
variant="tertiary"
|
||||
onClick={() => {
|
||||
setMonthYear({ month: null, year: null });
|
||||
}}
|
||||
/>
|
||||
<pre>{JSON.stringify(monthYear, null, 2)}</pre>
|
||||
<HorizontalDivider />
|
||||
<Button
|
||||
label="Add toast"
|
||||
|
Reference in New Issue
Block a user