algorithm/tech-interview-handbook
1
0
Fork 0
mirror of https://github.com/yangshun/tech-interview-handbook.git synced 2025-07-28 20:52:00 +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<{
errorMessage?: string;
monthLabel?: string;
monthRequired?: boolean;
onChange: (value: MonthYear) => void;
value: MonthYear;
yearLabel?: string;
yearRequired?: boolean;
}>;
const MONTH_OPTIONS = [
@ -82,6 +84,8 @@ export default function MonthYearPicker({
value,
onChange,
yearLabel = 'Year',
monthRequired = false,
yearRequired = false,
}: Props) {
const hasError = errorMessage != null;
const errorId = useId();
@ -89,10 +93,11 @@ export default function MonthYearPicker({
return (
<div
aria-describedby={hasError ? errorId : undefined}
className="flex space-x-4">
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 })
@ -101,6 +106,7 @@ export default function MonthYearPicker({
<Select
label={yearLabel}
options={YEAR_OPTIONS}
required={yearRequired}
value={value.year}
onChange={(newYear) =>
onChange({ month: value.month, year: Number(newYear) })