diff --git a/src/components/InputDatePicker/README.mdx b/src/components/InputDatePicker/README.mdx deleted file mode 100644 index 4950c849..00000000 --- a/src/components/InputDatePicker/README.mdx +++ /dev/null @@ -1,27 +0,0 @@ -可用性:从 DateView 切换到 MonthYearsView 的时候 -需要焦点转移,反之也需要 - -- 视图管理:下拉选框分为两种视图,整体是 `Calender` 组件,显示日期的 使用 `DateView`,显示年份和月份使用 `MonthYearsView` 视图,可以相互切换,在 `Calendar` 维护 -一个状态来切换,两种视图一个共同点就是 `Header`,`Body`,`Footer`,纵向的三栏布局,所以抽象出一个 `ViewLayout` 组件,然后 -使用 `DateView`(包含 `DatePicker` 填充在 `bodyElement` ) 和 `MonthYearsView`(包含 `MonthPicker` 填充在 `bodyElement`)来做填充 - -- 状态管理:日历选择器可以看作是一个 文本框 和 日历组件的一个组合,在日历中选择日期的时候,需要把状态同步到文本框中的,同样,用户在 -文本框中输入日期,日期也会同步到日历组件中。涉及到一个 日历组件的状态管理。 所以将所有状态管理的逻辑放在 `DateManager` 的 组件中,然后包裹在日历组件和 -文本组件的外部,然后通过 `context API` 把状态提供给子组件。 - - -- 焦点管理: -遇到了个问题:点击文本框的时候,会触发文本框 的 onFocus ,然后控制日历弹出,点击日历发现自动关闭了? -正常情况下触发的顺序是文本框的 onFocus --> 日历的 onFocus,在 react 中 触发 blur 的时候,日历就关上了,dom 已经移除了,日历组件不会产生 focus 事件,只触发了 blur - -可以监听 mouseDown,来实现,但是如果后续实现键盘操作,就不是很好用了。影响组件的可用性 --> accesebility。故实现 FocusManager 管理 `组合组件` -的焦点。 - -最终实现:通常 focus 和 blur 事件在 dom 中是不会冒泡的,但在 react 16.8 中通过事件模型会冒泡, -所以监听组件根节点的 focus 和 blur 事件,对子节点触发的 focus 和 blur 事件作出反应。 - -e.persist(); 防止事件在回调函数执行之后被清空,react 17 不再用 事件池了 - -- 键盘操作:todo - -[焦点管理参考](https://medium.com/@jessebeach/dealing-with-focus-and-blur-in-a-composite-widget-in-react-90d3c3b49a9b) \ No newline at end of file diff --git a/src/components/InputDatePicker/inputDatePicker.tsx b/src/components/InputDatePicker/inputDatePicker.tsx index dfcc8632..c50fbf4a 100644 --- a/src/components/InputDatePicker/inputDatePicker.tsx +++ b/src/components/InputDatePicker/inputDatePicker.tsx @@ -26,6 +26,7 @@ export const InputDatePicker: FC = (props) => { function handleOnChange(e: ChangeEvent, payload: any) { onChange && onChange(e, payload); + console.log('payload: ', payload); if (payload.origin === "PICKER") { // TODO: 未获取到 ref ref.current && ref.current.focus(); diff --git a/src/components/InputDatePicker/utils/date-extraction.ts b/src/components/InputDatePicker/utils/date-extraction.ts index 814896ff..3648ca01 100644 --- a/src/components/InputDatePicker/utils/date-extraction.ts +++ b/src/components/InputDatePicker/utils/date-extraction.ts @@ -8,7 +8,7 @@ export function dateToStr(date: Date) { } function getDateRegexp(dateFormat: string) { - //MM-DD-YYYY [MM,DD,YYYY] + //MM-dd-YYYY [MM,dd,YYYY] const dateFormatAsRegexp = dateFormat .replace(/[A-Za-z]{4}/g, "([0-9]{4})") .replace(/[A-Za-z]{2}/g, "([0-9]{2})"); @@ -19,7 +19,7 @@ function getDateRegexp(dateFormat: string) { } function DatePickerException(code: string) { - this.code = code; + return code; } export function strToDate( @@ -31,13 +31,13 @@ export function strToDate( const dateErrors = []; if (!dateMatches) { - dateErrors.push(new DatePickerException("INVALID_DATE_FORMAT")); + dateErrors.push(DatePickerException("INVALID_DATE_FORMAT")); throw dateErrors; } const yearIndex = partsOrder.indexOf("YYYY"); const monthIndex = partsOrder.indexOf("MM"); - const dayIndex = partsOrder.indexOf("DD"); + const dayIndex = partsOrder.indexOf("dd"); const yearString = dateMatches[yearIndex + 1]; const monthString = dateMatches[monthIndex + 1]; @@ -46,17 +46,17 @@ export function strToDate( const month = parseInt(monthString, 10); if (month === 0 || month > 12) { - dateErrors.push(new DatePickerException("INVALID_MONTH_NUMBER")); + dateErrors.push(DatePickerException("INVALID_MONTH_NUMBER")); } const day = parseInt(dayString, 10); if (day === 0) { - dateErrors.push(new DatePickerException("INVALID_DAY_NUMBER")); + dateErrors.push(DatePickerException("INVALID_DAY_NUMBER")); } const year = parseInt(yearString, 10); const monthDate = new Date(year, month - 1); const lastDay = lastDayOfMonth(monthDate); if (day > getDate(lastDay)) { - dateErrors.push(new DatePickerException("INVALID_DAY_OF_MONTH")); + dateErrors.push(DatePickerException("INVALID_DAY_OF_MONTH")); } if (dateErrors.length > 0) {