Skip to content

Commit

Permalink
Merge pull request #852 from buildo/datepicker-fixes
Browse files Browse the repository at this point in the history
[DateField] Allow shortcuts for null values + fix style defect
  • Loading branch information
veej authored May 16, 2024
2 parents 73c05a9 + 4a46df2 commit 9055f72
Show file tree
Hide file tree
Showing 4 changed files with 22 additions and 11 deletions.
5 changes: 3 additions & 2 deletions packages/bento-design-system/src/DateField/DateField.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,11 @@ export type ShortcutProps<Value> = {
};
type SingleDateFieldProps = {
type?: "single";
shortcuts?: ShortcutProps<Date>[];
shortcuts?: ShortcutProps<Date | null>[];
} & FieldProps<Date | null>;
type RangeDateFieldProps = {
type: "range";
shortcuts?: ShortcutProps<[Date, Date]>[];
shortcuts?: ShortcutProps<[Date, Date] | null>[];
} & FieldProps<[Date, Date] | null>;
type Props = (SingleDateFieldProps | RangeDateFieldProps) & {
minDate?: Date;
Expand Down Expand Up @@ -138,6 +138,7 @@ function RangeDateField({ disabled, readOnly, ...props }: Extract<Props, { type:
props.onChange([range.start.toDate(localTimeZone), range.end.toDate(localTimeZone)]);
}
},
shouldForceLeadingZeros: true,
} as const;
const state = useDateRangePickerState(internalProps);
const ref = useRef(null);
Expand Down
6 changes: 3 additions & 3 deletions packages/bento-design-system/src/DateField/Day.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,9 @@ function computeStyle(props: {
return "focused";
} else return "default";
} else {
if (props.isStartDate) {
if (props.isInHoverRange) {
return "inHoverRange";
} else if (props.isStartDate) {
if (props.isEndDate) {
return "selected";
}
Expand All @@ -56,8 +58,6 @@ function computeStyle(props: {
return "selectedEnd";
} else if (props.isInRange) {
return "selectedRange";
} else if (props.isInHoverRange) {
return "inHoverRange";
} else if (props.isFocused) {
return "focused";
} else {
Expand Down
17 changes: 11 additions & 6 deletions packages/bento-design-system/src/DateField/Input.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
import { CalendarDate, createCalendar } from "@internationalized/date";
import { AriaDateFieldOptions, useDateField, useDateSegment } from "@react-aria/datepicker";
import { createCalendar } from "@internationalized/date";
import {
AriaDatePickerProps,
DateValue,
useDateField,
useDateSegment,
} from "@react-aria/datepicker";
import { useLocale } from "@react-aria/i18n";
import {
DateFieldState,
Expand All @@ -25,12 +30,12 @@ import { ValidationState } from "@react-types/shared";
import { Column, Columns } from "../Layout/Columns";

type Props = (
| { type: "single"; fieldProps: AriaDateFieldOptions<CalendarDate> }
| { type: "single"; fieldProps: AriaDatePickerProps<DateValue> }
| {
type: "range";
fieldProps: {
start: AriaDateFieldOptions<CalendarDate>;
end: AriaDateFieldOptions<CalendarDate>;
start: AriaDatePickerProps<DateValue>;
end: AriaDatePickerProps<DateValue>;
};
}
) & {
Expand Down Expand Up @@ -60,7 +65,7 @@ function DateSegment({ segment, state }: { segment: DateSegmentType; state: Date
);
}

function DateField({ fieldProps }: { fieldProps: AriaDateFieldOptions<CalendarDate> }) {
function DateField({ fieldProps }: { fieldProps: AriaDatePickerProps<DateValue> }) {
const { locale } = useLocale();
const ref = useRef(null);
const state = useDateFieldState({
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ export const SingleWithShortcuts = {
args: {
value: null,
shortcuts: [
{ label: "Clear", value: null },
{
label: "Today",
value: new Date(),
Expand Down Expand Up @@ -132,6 +133,10 @@ export const RangeWithShortcuts = {
value: null,
type: "range",
shortcuts: [
{
label: "Clear all",
value: null,
},
{
label: "This Week",
value: [startOfWeek(today), endOfWeek(today)],
Expand Down

0 comments on commit 9055f72

Please sign in to comment.