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

[ui][monthYearPicker] Add required props and align bottom (#369)

Browse Source
This commit is contained in:
Ai Ling
2022-10-12 21:14:56 +08:00
committed by GitHub
parent 335413fdcd
commit 9787ff8f34
1 changed files with 7 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/portal/src/components/shared/MonthYearPicker.tsx
View File

@ -11,9 +11,11 @@ export type MonthYear = Readonly<{
type Props = Readonly<{ type Props = Readonly<{
errorMessage?: string; errorMessage?: string;
monthLabel?: string; monthLabel?: string;
monthRequired?: boolean;
onChange: (value: MonthYear) => void; onChange: (value: MonthYear) => void;
value: MonthYear; value: MonthYear;
yearLabel?: string; yearLabel?: string;
yearRequired?: boolean;
}>; }>;
const MONTH_OPTIONS = [ const MONTH_OPTIONS = [
@ -82,6 +84,8 @@ export default function MonthYearPicker({
value, value,
onChange, onChange,
yearLabel = 'Year', yearLabel = 'Year',
monthRequired = false,
yearRequired = false,
}: Props) { }: Props) {
const hasError = errorMessage != null; const hasError = errorMessage != null;
const errorId = useId(); const errorId = useId();
@ -89,10 +93,11 @@ export default function MonthYearPicker({
return ( return (
<div <div
aria-describedby={hasError ? errorId : undefined} aria-describedby={hasError ? errorId : undefined}
className="flex space-x-4"> className="flex items-end space-x-4">
<Select <Select
label={monthLabel} label={monthLabel}
options={MONTH_OPTIONS} options={MONTH_OPTIONS}
required={monthRequired}
value={value.month} value={value.month}
onChange={(newMonth) => onChange={(newMonth) =>
onChange({ month: Number(newMonth) as Month, year: value.year }) onChange({ month: Number(newMonth) as Month, year: value.year })
@ -101,6 +106,7 @@ export default function MonthYearPicker({
<Select <Select
label={yearLabel} label={yearLabel}
options={YEAR_OPTIONS} options={YEAR_OPTIONS}
required={yearRequired}
value={value.year} value={value.year}
onChange={(newYear) => onChange={(newYear) =>
onChange({ month: value.month, year: Number(newYear) }) onChange({ month: value.month, year: Number(newYear) })