1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import React, { useContext, useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { Select, DatePicker, Radio, ConfigProvider } from 'antd';
import Empty from '@wisdom-components/empty';
import './index.less';
const { RangePicker } = DatePicker;
const { Option } = Select;
const TimeRangePicker = ({
layout,
value,
defaultValue,
width,
dataSource,
timeProps,
onChange,
}) => {
const [visible, setVisible] = useState(false);
const [visibleKey, setVisibleKey] = useState(null);
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls('time-range-picker');
useEffect(() => {
let data = dataSource.filter((item) => item.name === CUSTOMER_NAME);
setVisibleKey(data.length > 0 ? data[0].key : null);
}, []);
const onRadioChange = (e) => {
setVisible(e.target.value === visibleKey);
onChange && onChange(e.target.value);
};
const onTimeChange = (dates) => {
onChange && onChange(visibleKey, dates);
};
const onSelectChange = (value) => {
setVisible(value === visibleKey);
onChange && onChange(value);
};
const renderHorizontal = () => {
return (
<Radio.Group value={value} defaultValue={defaultValue} onChange={onRadioChange}>
{dataSource.map((item) => (
<Radio.Button key={item.key} value={item.key}>
{item.name}
</Radio.Button>
))}
</Radio.Group>
);
};
const renderVertical = () => {
return !!dataSource.length ? (
<Select
value={value}
defaultValue={defaultValue}
style={{ width: width }}
onChange={onSelectChange}
>
{dataSource.map((item) => (
<Option key={item.key} value={item.key}>
{item.name}
</Option>
))}
</Select>
) : (
renderEmpty()
);
};
const renderEmpty = () => {
return (
<ConfigProvider renderEmpty={() => <Empty size={'small'} description={'暂无数据'} />}>
<Select style={{ width: width }} />
</ConfigProvider>
);
};
return (
<div className={classNames(prefixCls)}>
{layout === 'horizontal' && renderHorizontal()}
{layout === 'vertical' && renderVertical()}
{visible && (
<RangePicker
className={classNames(`${prefixCls}-customer`)}
onChange={onTimeChange}
{...timeProps}
/>
)}
</div>
);
};
TimeRangePicker.defaultProps = {
layout: 'horizontal',
value: '',
defaultValue: '',
width: 120,
dataSource: [],
timeProps: {},
onChange: function (v) {},
};
TimeRangePicker.propTypes = {
layout: PropTypes.string,
value: PropTypes.string,
defaultValue: PropTypes.string,
width: PropTypes.number,
dataSource: PropTypes.array,
timeProps: PropTypes.object,
onChange: PropTypes.func,
};
export default TimeRangePicker;
const CUSTOMER_NAME = '自定义';