index.js 2.99 KB
Newer Older
1 2 3 4 5 6 7 8 9 10
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;

11 12 13 14 15 16 17 18
const TimeRangePicker = ({
  layout,
  value,
  defaultValue,
  width,
  dataSource,
  timeProps,
  onChange,
程恺文's avatar
程恺文 committed
19
  defaultVisible,
20
}) => {
21
  const [visible, setVisible] = useState(defaultVisible);
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
  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 (
48
      <Radio.Group value={value} defaultValue={defaultValue} onChange={onRadioChange}>
49 50 51 52 53 54 55 56 57 58 59
        {dataSource.map((item) => (
          <Radio.Button key={item.key} value={item.key}>
            {item.name}
          </Radio.Button>
        ))}
      </Radio.Group>
    );
  };

  const renderVertical = () => {
    return !!dataSource.length ? (
60 61 62 63 64 65
      <Select
        value={value}
        defaultValue={defaultValue}
        style={{ width: width }}
        onChange={onSelectChange}
      >
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
        {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',
102 103
  value: '',
  defaultValue: '',
104 105 106 107
  width: 120,
  dataSource: [],
  timeProps: {},
  onChange: function (v) {},
程恺文's avatar
程恺文 committed
108
  defaultVisible: false,
109 110 111 112
};

TimeRangePicker.propTypes = {
  layout: PropTypes.string,
113 114
  value: PropTypes.string,
  defaultValue: PropTypes.string,
115 116 117 118
  width: PropTypes.number,
  dataSource: PropTypes.array,
  timeProps: PropTypes.object,
  onChange: PropTypes.func,
程恺文's avatar
程恺文 committed
119
  defaultVisible: PropTypes.bool,
120 121 122 123 124
};

export default TimeRangePicker;

const CUSTOMER_NAME = '自定义';