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, defaultVisible, }) => { const [visible, setVisible] = useState(defaultVisible); 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) {}, defaultVisible: false, }; TimeRangePicker.propTypes = { layout: PropTypes.string, value: PropTypes.string, defaultValue: PropTypes.string, width: PropTypes.number, dataSource: PropTypes.array, timeProps: PropTypes.object, onChange: PropTypes.func, defaultVisible: PropTypes.bool, }; export default TimeRangePicker; const CUSTOMER_NAME = '自定义';