From 3166e3fb2d638113eb0446fee6914a08a1b77da9 Mon Sep 17 00:00:00 2001 From: Navin Date: Wed, 7 Oct 2020 12:56:45 +0530 Subject: [PATCH 1/2] =?UTF-8?q?refactor(date-picker):=20=E2=99=BB=EF=B8=8F?= =?UTF-8?q?=20=20added=20more=20stories?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/datepicker/DatePicker.ts | 2 +- src/datepicker/DatePickerState.ts | 8 +++++ src/datepicker/DatePickerTrigger.ts | 11 ++++++- src/datepicker/DateSegment.ts | 5 +++- src/datepicker/stories/DatePicker.stories.tsx | 29 +++++++++++++++++-- src/datepicker/stories/index.css | 5 ++++ 6 files changed, 54 insertions(+), 6 deletions(-) diff --git a/src/datepicker/DatePicker.ts b/src/datepicker/DatePicker.ts index 7d50d2edd..e6fd1a2ab 100644 --- a/src/datepicker/DatePicker.ts +++ b/src/datepicker/DatePicker.ts @@ -1,7 +1,7 @@ import { createOnKeyDown } from "reakit-utils"; import { BoxHTMLProps, BoxOptions, useBox } from "reakit"; import { createComponent, createHook } from "reakit-system"; -import { ariaAttr, callAllHandlers } from "@chakra-ui/utils"; +import { ariaAttr, callAllHandlers, dataAttr } from "@chakra-ui/utils"; import { DATE_PICKER_KEYS } from "./__keys"; import { DatePickerStateReturn } from "./DatePickerState"; diff --git a/src/datepicker/DatePickerState.ts b/src/datepicker/DatePickerState.ts index 0f5ffcc6f..802a147ed 100644 --- a/src/datepicker/DatePickerState.ts +++ b/src/datepicker/DatePickerState.ts @@ -28,6 +28,7 @@ export const useDatePickerState = (props: DatePickerStateInitialProps = {}) => { isDisabled, isReadOnly, isRequired, + autoFocus, pickerId: pickerIdProp, dialogId: dialogIdProp, formatOptions, @@ -98,6 +99,13 @@ export const useDatePickerState = (props: DatePickerStateInitialProps = {}) => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [popover.visible]); + React.useEffect(() => { + if (autoFocus) { + composite.first(); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [autoFocus, composite.first]); + return { pickerId, dialogId, diff --git a/src/datepicker/DatePickerTrigger.ts b/src/datepicker/DatePickerTrigger.ts index 65eece38d..f4c7ea03a 100644 --- a/src/datepicker/DatePickerTrigger.ts +++ b/src/datepicker/DatePickerTrigger.ts @@ -7,8 +7,10 @@ import { } from "reakit"; import { DATE_PICKER_TRIGGER_KEYS } from "./__keys"; +import { DatePickerStateReturn } from "./DatePickerState"; -export type DatePickerTriggerOptions = PopoverDisclosureOptions; +export type DatePickerTriggerOptions = PopoverDisclosureOptions & + Pick; export type DatePickerTriggerHTMLProps = PopoverDisclosureHTMLProps; @@ -23,6 +25,13 @@ export const useDatePickerTrigger = createHook< compose: usePopoverDisclosure, keys: DATE_PICKER_TRIGGER_KEYS, + useOptions(options, htmlProps) { + return { + disabled: options.isDisabled || options.isReadOnly, + ...options, + }; + }, + useProps(_, { onMouseDown: htmlOnMouseDown, ...htmlProps }) { const onMouseDown = (e: React.MouseEvent) => { e.stopPropagation(); diff --git a/src/datepicker/DateSegment.ts b/src/datepicker/DateSegment.ts index ee256a262..7da764e89 100644 --- a/src/datepicker/DateSegment.ts +++ b/src/datepicker/DateSegment.ts @@ -60,7 +60,10 @@ export const useDateSegment = createHook< useOptions(options, htmlProps) { return { - disabled: options.segment.type === "literal", + disabled: + options.isDisabled || + options.isReadOnly || + options.segment.type === "literal", ...options, }; }, diff --git a/src/datepicker/stories/DatePicker.stories.tsx b/src/datepicker/stories/DatePicker.stories.tsx index 7440f00a8..e8edfe1f2 100644 --- a/src/datepicker/stories/DatePicker.stories.tsx +++ b/src/datepicker/stories/DatePicker.stories.tsx @@ -1,6 +1,6 @@ import * as React from "react"; -import { addDays } from "date-fns"; import { Meta } from "@storybook/react"; +import { addDays, addWeeks, subWeeks } from "date-fns"; import "./index.css"; import { DatePickerStateInitialProps, DateValue } from "../index.d"; @@ -24,8 +24,6 @@ const DatePickerComp: React.FC = props => { ...props, }); - console.log("%c state", "color: #f27999", state); - return (
@@ -78,3 +76,28 @@ export const ControllableState = () => {
); }; + +export const MinMaxDate = () => ( + +); + +export const InValidDate = () => ( + +); + +export const isDisabled = () => ( + +); + +export const isReadOnly = () => ( + +); + +export const autoFocus = () => ( + // eslint-disable-next-line jsx-a11y/no-autofocus + +); diff --git a/src/datepicker/stories/index.css b/src/datepicker/stories/index.css index f4df0c8dd..aa215f0e0 100644 --- a/src/datepicker/stories/index.css +++ b/src/datepicker/stories/index.css @@ -25,6 +25,10 @@ border: 1px solid #1e65fd; } +[aria-invalid] > .datepicker__header { + border: 1px solid #c00000; +} + .datepicker__field { font-family: monospace; display: flex; @@ -34,6 +38,7 @@ padding: 2px; border-radius: 4px; } + .datepicker__field--item:focus { background-color: #1e65fd; color: white; From 6129ab1190199f641f091f7c4ef4ff5ae81d43e5 Mon Sep 17 00:00:00 2001 From: Navin Date: Wed, 7 Oct 2020 13:04:12 +0530 Subject: [PATCH 2/2] =?UTF-8?q?refactor(date-picker):=20=E2=99=BB=EF=B8=8F?= =?UTF-8?q?=20=20add=20disabled=20styles?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/datepicker/stories/DatePicker.stories.tsx | 2 +- src/datepicker/stories/index.css | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/datepicker/stories/DatePicker.stories.tsx b/src/datepicker/stories/DatePicker.stories.tsx index e8edfe1f2..644dff29c 100644 --- a/src/datepicker/stories/DatePicker.stories.tsx +++ b/src/datepicker/stories/DatePicker.stories.tsx @@ -25,7 +25,7 @@ const DatePickerComp: React.FC = props => { }); return ( - +
{state.segments.map((segment, i) => ( diff --git a/src/datepicker/stories/index.css b/src/datepicker/stories/index.css index aa215f0e0..1c71892a4 100644 --- a/src/datepicker/stories/index.css +++ b/src/datepicker/stories/index.css @@ -25,7 +25,7 @@ border: 1px solid #1e65fd; } -[aria-invalid] > .datepicker__header { +[aria-invalid="true"] > .datepicker__header { border: 1px solid #c00000; } @@ -44,3 +44,7 @@ color: white; outline: none; } + +.datepicker [aria-disabled="true"] { + opacity: 0.5; +}