1 |
|
2 |
|
3 | import * as React from 'react';
|
4 | import CommonProps from '../util';
|
5 | import { PopupProps } from '../overlay';
|
6 | import { InputProps } from '../input';
|
7 | import { ButtonProps } from '../button';
|
8 | import { Dayjs, ConfigType } from 'dayjs';
|
9 |
|
10 | interface IPresetType {
|
11 | label?: string;
|
12 | value?: ConfigType | (() => ConfigType);
|
13 | }
|
14 | interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
|
15 | defaultValue?: any;
|
16 | onChange?: any;
|
17 | }
|
18 |
|
19 | export interface DatePreset extends ButtonProps {
|
20 | label: string;
|
21 | // 时间值(dayjs 对象或时间字符串)或者返回时间值的函数
|
22 | value: any;
|
23 | }
|
24 |
|
25 | export interface RangePreset {
|
26 | [propName: string]: (Dayjs)[];
|
27 | }
|
28 |
|
29 | export interface TimePickerProps extends HTMLAttributesWeak, CommonProps {
|
30 | /**
|
31 | * 按钮的文案
|
32 | */
|
33 | label?: React.ReactNode;
|
34 | name?: string;
|
35 |
|
36 | /**
|
37 | * 输入框状态
|
38 | */
|
39 | state?: 'error' | 'success';
|
40 |
|
41 | /**
|
42 | * 输入框提示
|
43 | */
|
44 | placeholder?: string;
|
45 |
|
46 | /**
|
47 | * 时间值(dayjs 对象或时间字符串,受控状态使用)
|
48 | */
|
49 | value?: ConfigType;
|
50 |
|
51 | /**
|
52 | * 时间初值(dayjs 对象或时间字符串,非受控状态使用)
|
53 | */
|
54 | defaultValue?: ConfigType;
|
55 |
|
56 | /**
|
57 | * 时间选择框的尺寸
|
58 | */
|
59 | size?: 'small' | 'medium' | 'large';
|
60 |
|
61 | /**
|
62 | * 是否允许清空时间
|
63 | */
|
64 | hasClear?: boolean;
|
65 |
|
66 | /**
|
67 | * 时间的格式
|
68 | * https://dayjs.gitee.io/docs/zh-CN/display/format
|
69 | */
|
70 | format?: string;
|
71 |
|
72 | /**
|
73 | * 小时选项步长
|
74 | */
|
75 | hourStep?: number;
|
76 |
|
77 | /**
|
78 | * 分钟选项步长
|
79 | */
|
80 | minuteStep?: number;
|
81 |
|
82 | /**
|
83 | * 秒钟选项步长
|
84 | */
|
85 | secondStep?: number;
|
86 |
|
87 | /**
|
88 | * 禁用小时函数
|
89 | */
|
90 | disabledHours?: (index: number) => boolean;
|
91 |
|
92 | |
93 |
|
94 |
|
95 | disabledMinutes?: (index: number) => boolean;
|
96 |
|
97 | |
98 |
|
99 |
|
100 | disabledSeconds?: (index: number) => boolean;
|
101 |
|
102 | |
103 |
|
104 |
|
105 | visible?: boolean;
|
106 |
|
107 | |
108 |
|
109 |
|
110 | defaultVisible?: boolean;
|
111 |
|
112 | |
113 |
|
114 |
|
115 | popupContainer?: string | HTMLElement | ((target: HTMLElement) => HTMLElement);
|
116 |
|
117 | /**
|
118 | * 弹层对齐方式, 详情见Overlay 文档
|
119 | */
|
120 | popupAlign?: string;
|
121 |
|
122 | /**
|
123 | * 弹层触发方式
|
124 | */
|
125 | popupTriggerType?: 'click' | 'hover';
|
126 |
|
127 | /**
|
128 | * 弹层展示状态变化时的回调
|
129 | */
|
130 | onVisibleChange?: (visible: boolean, reason: string) => void;
|
131 |
|
132 | |
133 |
|
134 |
|
135 | popupStyle?: React.CSSProperties;
|
136 |
|
137 | |
138 |
|
139 |
|
140 | popupClassName?: string;
|
141 |
|
142 | |
143 |
|
144 |
|
145 | popupProps?: PopupProps;
|
146 |
|
147 | |
148 |
|
149 |
|
150 | disabled?: boolean;
|
151 |
|
152 | |
153 |
|
154 |
|
155 | hasBorder?: boolean;
|
156 |
|
157 | |
158 |
|
159 |
|
160 | inputProps?: InputProps;
|
161 |
|
162 | |
163 |
|
164 |
|
165 | ranges?: RangePreset | DatePreset[];
|
166 |
|
167 | |
168 |
|
169 |
|
170 | onChange?: (date: Dayjs, dateString: string) => void;
|
171 | }
|
172 |
|
173 |
|
174 | export interface RangePickerProps
|
175 | extends Omit<
|
176 | TimePickerProps,
|
177 | | 'value'
|
178 | | 'placeholder'
|
179 | | 'defaultValue'
|
180 | | 'onOk'
|
181 | | 'disabled'
|
182 | | 'onChange'
|
183 | | 'preset'
|
184 | > {
|
185 | value?: Array<ConfigType>;
|
186 | defaultValue?: Array<ConfigType>;
|
187 | onOk?: (value: Array<Dayjs>, strVal: Array<string>) => void;
|
188 | onChange?: (value: Array<Dayjs>, strVal: Array<string>) => void;
|
189 | placeholder?: string | Array<string>;
|
190 | disabled?: boolean | boolean[];
|
191 | preset?: IPresetType | IPresetType[];
|
192 | }
|
193 |
|
194 | export class RangePicker extends React.Component<RangePickerProps, any> {
|
195 | type: 'range';
|
196 | }
|
197 |
|
198 | export default class TimePicker extends React.Component<TimePickerProps, any> {
|
199 | static RangePicker: typeof RangePicker;
|
200 | }
|