refactor(TimePicker2): convert to TypeScript, impove docs and tests, close #4616

components/time-picker2/__docs__/demo/disabled/index.tsx

@@ -6,7 +6,7 @@ const disabledHours = [1, 2, 3, 4, 5];
 const disabledMinutes = [10, 20, 30, 40, 50];
 const disabledSeconds = [10, 20, 30, 40, 50];
 
-const disabledItems = list => index => {
+const disabledItems = (list: number[]) => (index: number) => {
     return list.indexOf(index) >= 0;
 };
 
@@ -20,6 +20,12 @@ ReactDOM.render(
             disabledMinutes={disabledItems(disabledMinutes)}
             disabledSeconds={disabledItems(disabledSeconds)}
         />
+        <p>RangePicker Disable Hours/Minutes/Seconds</p>
+        <TimePicker2.RangePicker
+            disabledHours={() => disabledHours}
+            disabledMinutes={() => disabledMinutes}
+            disabledSeconds={() => disabledSeconds}
+        />
     </div>,
     mountNode
 );

components/time-picker2/__docs__/demo/field/index.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { TimePicker2, Field, Button } from '@alifd/next';
-import dayjs from 'dayjs';
+import dayjs, { type Dayjs } from 'dayjs';
 
 class Demo extends React.Component {
     field = new Field(this);
 
     onClick = () => {
-        const value = this.field.getValue('time-picker');
-        console.log(value.format('HH:mm:ss'));
+        const value: Dayjs | undefined = this.field.getValue('time-picker');
+        console.log(value!.format('HH:mm:ss'));
     };
 
     render() {

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

@@ -3,12 +3,13 @@ import ReactDOM from 'react-dom';
 import React, { useState } from 'react';
 import dayjs from 'dayjs';
 import { TimePicker2 } from '@alifd/next';
+import type { TimePickerProps, ValueType } from '@alifd/next/types/time-picker2';
 
 const nowTime = dayjs(new Date());
 const currentHour = dayjs().hour(nowTime.hour()).minute(0).second(0);
 const nextHour = currentHour.hour(currentHour.hour() + 1);
 
-const preset = [
+const preset: TimePickerProps['preset'] = [
     {
         label: '此刻',
         value: () => nowTime,
@@ -23,7 +24,7 @@ const presetRange = [
 ];
 
 function Picker() {
-    const [value, onChange] = useState(dayjs('12:00:00', 'HH:mm:ss', true));
+    const [value, onChange] = useState<ValueType>(dayjs('12:00:00', 'HH:mm:ss', true));
 
     return (
         <div>

components/time-picker2/__docs__/demo/render-menu/index.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { TimePicker2 } from '@alifd/next';
+import type { TimePickerProps } from '@alifd/next/types/time-picker2';
 
-const renderTimeMenuItems = list => {
-    return list.map(({ label, value }) => {
+const renderTimeMenuItems: TimePickerProps['renderTimeMenuItems'] = list => {
+    return list.map(({ value }) => {
         return {
             value,
             label: value > 9 ? String(value) : `0${value}`,

components/time-picker2/__docs__/demo/step/index.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { TimePicker2 } from '@alifd/next';
+import type { Dayjs } from 'dayjs';
 
 ReactDOM.render(
     <TimePicker2
-        onChange={val => console.log(val.format('HH:mm:ss'))}
+        onChange={(val: Dayjs) => console.log(val.format('HH:mm:ss'))}
         hourStep={2}
         minuteStep={5}
         secondStep={5}

components/time-picker2/__docs__/demo/value/index.tsx

@@ -1,23 +1,33 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { TimePicker2 } from '@alifd/next';
-import dayjs from 'dayjs';
+import dayjs, { type Dayjs } from 'dayjs';
+import type { TimePickerProps, ValueType } from '@alifd/next/types/time-picker2';
 
-class ControlledTimePicker2 extends React.Component {
-    constructor(props, context) {
-        super(props, context);
+interface ControlledTimePicker2Props {
+    onChange: (value: ValueType) => void;
+}
+class ControlledTimePicker2 extends React.Component<
+    ControlledTimePicker2Props,
+    {
+        value: Dayjs | null;
+        rangeValue: (Dayjs | null)[] | null;
+    }
+> {
+    constructor(props: ControlledTimePicker2Props) {
+        super(props);
         this.state = {
             value: dayjs('12:00:00', 'HH:mm:ss', true),
             rangeValue: [dayjs('14:00:00', 'HH:mm:ss'), dayjs('16:00:00', 'HH:mm:ss')],
         };
     }
 
-    onSelect = value => {
+    onSelect: TimePickerProps['onChange'] = (value: Dayjs | null) => {
         this.setState({ value });
         this.props.onChange(value);
     };
 
-    onRangeSelect = rangeValue => {
+    onRangeSelect: TimePickerProps['onChange'] = (rangeValue: (Dayjs | null)[] | null) => {
         this.setState({ rangeValue });
         this.props.onChange(rangeValue);
     };