index.js

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 = '自定义';