refactor: 优化&修复bug

src/components/InputDatePicker/README.mdx

@@ -0,0 +1,2 @@
+可用性：从 DateView 切换到 MonthYearsView 的时候
+需要焦点转移，反之也需要

src/components/InputDatePicker/calendar.tsx

@@ -9,13 +9,13 @@ export interface CalendarProps {
   selectedDate: Date;
   onSelectDate: (
     e: MouseEvent<HTMLElement>,
-    date: Date | string | number
+    date: Date
   ) => void;
 }
 
 function Calendar(props: CalendarProps) {
   const { selectedDate, onSelectDate } = props;
-  const [isDateView, setDateView] = useState(true);
+  const [isDateView, setDateView] = useState(false);
   const calendarRef = useRef(null);
 
   const today = new Date();
@@ -36,6 +36,7 @@ function Calendar(props: CalendarProps) {
   const onSetDateView = setDateView.bind(null, true);
 
   useEffect(() => {
+    // 处理 MonthYearView 展示后聚焦操作
     if (calendarRef) {
       calendarRef.current.focus();
     }

src/components/InputDatePicker/datePicker.stories.tsx

@@ -6,7 +6,7 @@ import { actions } from "@storybook/addon-actions";
 const BaseInputDatePicker = (props: InputDatePickerProps) => {
   return (
     <div style={{ width: 300 }}>
-      <InputDatePicker onChange={actions("onChange")} />
+      <InputDatePicker onChange={()=>actions('onChange')} />
     </div>
   );
 };

src/components/InputDatePicker/datePicker.tsx

@@ -55,9 +55,11 @@ export const DatePicker: FC<DatePickerProps & CalendarProps> = (props) => {
   return (
     <table className={classNames(sc("wrapper"))}>
       <thead className={classNames(sc("header"))}>
-        {dayNames.map((dayName, i) => (
-          <th key={i}>{exchangeDayNames(dayName)}</th>
-        ))}
+        <tr>
+          {dayNames.map((dayName, i) => (
+            <th key={i}>{exchangeDayNames(dayName)}</th>
+          ))}
+        </tr>
       </thead>
 
       <tbody className={classNames("weeks")}>

src/components/InputDatePicker/dateView.tsx

@@ -1,4 +1,4 @@
-import React, {MouseEvent, Dispatch, SetStateAction } from "react";
+import React, { MouseEvent, Dispatch, SetStateAction } from "react";
 import { ViewLayout } from "./viewLayout";
 import DatePicker, { CalendarType } from "./datePicker";
 import { Button } from "../Button/button";
@@ -26,7 +26,7 @@ function DateView(props: DateViewProps & CalendarProps) {
     onTitleClick,
     selectedDate,
     onSelectDate,
-    onClickToday
+    onClickToday,
   } = props;
 
   function incrementMonthIndex(increment: number) {
@@ -54,17 +54,19 @@ function DateView(props: DateViewProps & CalendarProps) {
       header={{
         leftElement: <Icon icon="arrow-left" onClick={goToPreviousMonth} />,
         middleElement: (
-          <p>
-            <HeaderTitle
-              year={year}
-              monthIndex={monthIndex}
-              onTitleClick={onTitleClick}
-            />
-          </p>
+          <HeaderTitle
+            year={year}
+            monthIndex={monthIndex}
+            onTitleClick={onTitleClick}
+          />
         ),
         rightElement: <Icon icon="arrow-right" onClick={goToNextMonth} />,
       }}
-      footerElement={<Button btnType="ghost" onClick={onClickToday}> 今天 </Button>}
+      footerElement={
+        <Button btnType="ghost" onClick={onClickToday}>
+          今天
+        </Button>
+      }
     ></ViewLayout>
   );
 }

src/components/InputDatePicker/input.tsx

@@ -1,10 +1,11 @@
-import React, { useContext } from "react";
+import React, { useContext, useState } from "react";
 import { DateContext, IPickerContext } from "./dateManager";
 import { Input } from "../inputs/input";
 
 function InputComponent() {
   const { value } = useContext<IPickerContext>(DateContext);
-  return <Input size="sm" value={value.textInput} />;
+
+  return <Input size="sm" value={value.textInput}/>;
 }
 
 export default InputComponent;

src/components/InputDatePicker/inputDatePicker.tsx

@@ -12,21 +12,25 @@ export const InputDatePicker: FC<InputDatePickerProps> = (props) => {
   const [showPicker, setShowPicker] = useState(false);
   const openPicker = setShowPicker.bind(null, true);
   const closePicker = setShowPicker.bind(null, false);
+
   function onFocus() {
     openPicker();
   }
+
   function onBlur() {
     closePicker();
   }
+
+  // tabIndex 使 div 可以聚焦，从而可以使用 onFocus/onBlur
   return (
-    <FocusManager onFocus={onFocus} onBlur={onBlur}>
+    <FocusManager onFocus={onFocus} onBlur={onBlur} tabIndex={0}>
       <DateManager onChange={props.onChange}>
         <InputComponent />
-        {showPicker && <Picker />}
+        {/* {showPicker && <Picker />} */}
+        {<Picker />}
       </DateManager>
     </FocusManager>
   );
 };
-InputDatePicker.defaultProps = {};
 
 export default InputDatePicker;

src/components/InputDatePicker/monthPicker.tsx

@@ -20,26 +20,28 @@ function MonthPicker(props: MonthPickerProps) {
   const { selectedMonthIndex, onSelect } = props;
   return (
     <table className={sc("wrapper")}>
-      {months.map((row: MonthOfYear[], i: number) => (
-        <tr key={i}>
-          {row.map((month: MonthOfYear, j: number) => {
-            const isSelected = month.index === selectedMonthIndex;
-            return (
-              <td className={sc("cell")} key={j}>
-                <Button
-                  className={classNames(sc("ghost"), {
-                    [`${sc("is-selected")}`]: isSelected,
-                  })}
-                  btnType="ghost"
-                  onClick={() => onSelect && onSelect(month.index)}
-                >
-                  {month.name}
-                </Button>
-              </td>
-            );
-          })}
-        </tr>
-      ))}
+      <tbody>
+        {months.map((row: MonthOfYear[], i: number) => (
+          <tr key={i}>
+            {row.map((month: MonthOfYear, j: number) => {
+              const isSelected = month.index === selectedMonthIndex;
+              return (
+                <td className={sc("cell")} key={j}>
+                  <Button
+                    className={classNames(sc("ghost"), {
+                      [`${sc("is-selected")}`]: isSelected,
+                    })}
+                    btnType="ghost"
+                    onClick={() => onSelect && onSelect(month.index)}
+                  >
+                    {month.name}
+                  </Button>
+                </td>
+              );
+            })}
+          </tr>
+        ))}
+      </tbody>
     </table>
   );
 }

src/components/InputDatePicker/style.scss

@@ -14,9 +14,24 @@
 
   &-header {
     text-align: center;
+
+    tr>th {
+      padding-bottom: $picker-padding;
+    }
+
+    &::after {
+      content: "";
+      width: 100%;
+      border-bottom: 0.1rem solid #edeeef;
+      position: absolute;
+      left: 0;
+      top: 2.2rem;
+    }
   }
 
-  &-weeks {}
+  &-weeks {
+    cursor: pointer;
+  }
 
   &-weeks-item {
     text-align: center;
@@ -55,7 +70,6 @@
   &-container {
     display: flex;
     flex-direction: column;
-
   }
 
   &-header {
@@ -110,6 +124,7 @@
   &-wrapper {
     display: flex;
     align-items: center;
+
     >span {
       margin-right: $picker-padding;
     }

src/components/InputDatePicker/yearPicker.tsx

@@ -16,7 +16,7 @@ function YearPicker(props: YearPickerProps) {
     <div>
       <Select defaultValue={defaultValue} style={{ width: 100 }} onChange={(value) => onSelectYear(Number(value))}>
         {years.map((year: number, i: number) => (
-          <Option value={year.toString()} >{year}</Option>
+          <Option value={year.toString()} key={i}>{year}</Option>
         ))}
       </Select>
       {/* <ul>

src/components/icons/style.scss

@@ -6,4 +6,8 @@
   .icon-#{$key} {
     color: $val;
   }
+}
+
+.chocolate-icon {
+  cursor: pointer;
 }