refactor(DatePicker2): convert to TypeScript, impove docs and tests, close #4579

components/date-picker2/__docs__/demo/basic/index.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-
+import { type Dayjs } from 'dayjs';
 import { DatePicker2 } from '@alifd/next';
 
 const { MonthPicker, YearPicker, WeekPicker, QuarterPicker } = DatePicker2;
 
-const onChange = (date, dateStr) => console.log(date, dateStr);
+const onChange = (date: Dayjs, dateStr: string) => console.log(date, dateStr);
 
 function App() {
     return (

components/date-picker2/__docs__/demo/default-panel/index.tsx

@@ -2,12 +2,12 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import { DatePicker2 } from '@alifd/next';
-import dayjs from 'dayjs';
+import dayjs, { type Dayjs } from 'dayjs';
 
 const { RangePicker } = DatePicker2;
 
-const onChange = (date, dateStr) => console.log(date, dateStr);
-const onPanelChange = (value, mode) => console.log(value.format('YYYY-MM-DD'), mode);
+const onChange = (date: Dayjs | Dayjs[], dateStr: string | string[]) => console.log(date, dateStr);
+const onPanelChange = (value: Dayjs, mode: string) => console.log(value.format('YYYY-MM-DD'), mode);
 
 function App() {
     return (

components/date-picker2/__docs__/demo/disabledDate/index.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { DatePicker2 } from '@alifd/next';
-import dayjs from 'dayjs';
+import dayjs, { type Dayjs } from 'dayjs';
 
 const { RangePicker, MonthPicker, YearPicker } = DatePicker2;
 const currentDate = dayjs();
 
 // Disable all dates before today
-const disabledDate = function (date, mode) {
+const disabledDate = function (date: Dayjs, mode: string) {
     switch (mode) {
         case 'date':
             return date.valueOf() <= currentDate.valueOf();

components/date-picker2/__docs__/demo/format/index.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { type Dayjs } from 'dayjs';
 
 import { DatePicker2 } from '@alifd/next';
 
 const { RangePicker } = DatePicker2;
 
 const defaultVal = '2020-02-02';
 const defaultRangeVal = ['2020-01-01', '2020-02-02'];
-function customizeFormatter(v) {
+function customizeFormatter(v: Dayjs) {
     return `DATE: ${v.format('YYYY/MM/DD')}`;
 }
 

components/date-picker2/__docs__/demo/preset/index.tsx

@@ -5,11 +5,11 @@ import { DatePicker2 } from '@alifd/next';
 import dayjs from 'dayjs';
 
 const { RangePicker } = DatePicker2;
-const RangePreset = {
+const RangePreset: object = {
     今天: [dayjs(), dayjs()],
     本月: [dayjs().startOf('month'), dayjs().endOf('month')],
 };
-const datePreset = {
+const datePreset: object = {
     此刻: () => dayjs(),
 };
 

components/date-picker2/__docs__/demo/range-picker/index.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { type Dayjs } from 'dayjs';
 
 import { DatePicker2 } from '@alifd/next';
 
 const { RangePicker } = DatePicker2;
 
-const onChange = (date, dateStr) => console.log(date, dateStr);
+const onChange = (date: Dayjs | Dayjs[], dateStr: string | string[]) => console.log(date, dateStr);
 
 const App = () => (
     <div className="app">

components/date-picker2/__docs__/demo/select-range-dates/index.tsx

@@ -1,14 +1,15 @@
 import ReactDOM from 'react-dom';
+import dayjs, { type Dayjs } from 'dayjs';
 
 import React, { useState } from 'react';
 import { DatePicker2 } from '@alifd/next';
 
 const { RangePicker } = DatePicker2;
 
 const App = () => {
-    const [dates, setDates] = useState(null);
-    const [value, setValue] = useState(null);
-    const disabledDate = current => {
+    const [dates, setDates] = useState([dayjs(), dayjs()]);
+    const [value, setValue] = useState(dayjs());
+    const disabledDate = (current: Dayjs) => {
         if (!dates) {
             return false;
         }
@@ -22,7 +23,7 @@ const App = () => {
             value={dates || value}
             disabledDate={disabledDate}
             onCalendarChange={val => {
-                setDates(val);
+                setDates(val!);
             }}
             onChange={val => {
                 setValue(val);

components/date-picker2/__docs__/demo/show-time/index.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { DatePicker2 } from '@alifd/next';
+import { type Dayjs } from 'dayjs';
 
 const { RangePicker } = DatePicker2;
-const onChange = value => console.log('onChange: ', value);
-const onOk = value => console.log('onOK: ', value.format('YYYY-MM-DD HH:mm:ss'));
-const onRangeOk = value => console.log('onOk: [%s, %s]', ...value);
+const onChange = (value: Dayjs | Dayjs[]) => console.log('onChange: ', value);
+const onOk = (value: Dayjs) => console.log('onOK: ', value.format('YYYY-MM-DD HH:mm:ss'));
+const onRangeOk = (value: Dayjs[]) => console.log('onOk: [%s, %s]', ...value);
 
 const defaultTimeValue = '09:00:00';
 

components/date-picker2/__docs__/demo/size/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { DatePicker2, Radio } from '@alifd/next';
+import { type Dayjs } from 'dayjs';
 
 const { useState } = React;
 const RadioGroup = Radio.Group;
@@ -23,23 +24,24 @@ const { RangePicker } = DatePicker2;
 
 function Demo() {
     const [size, setSize] = useState('medium');
-    const onChange = val => console.log(val);
+    const onChange = (val: Dayjs | Dayjs[]) => console.log(val);
 
     return (
         <div>
             <RadioGroup
                 shape="button"
+                // @ts-expect-error RadioGroup上不存在属性 type
                 type="primary"
                 defaultValue={size}
                 dataSource={dataSource}
-                onChange={v => setSize(v)}
+                onChange={v => setSize(v as string)}
             />
             <br />
             <br />
-            <DatePicker2 size={size} onChange={onChange} />
+            <DatePicker2 size={size as 'large' | 'medium' | 'small'} onChange={onChange} />
             <br />
             <br />
-            <RangePicker size={size} onChange={onChange} />
+            <RangePicker size={size as 'large' | 'medium' | 'small'} onChange={onChange} />
             <br />
             <br />
         </div>