Merge branch 'feature/TimeRangePicker' into 'dev'

.umirc.js

@@ -99,7 +99,7 @@ export default {
       },
       {
         title: '通用',
-        children: ['ImageSelect', 'QuotaSelect', 'MqttView'],
+        children: ['ImageSelect', 'QuotaSelect', 'TimeRangePicker', 'MqttView'],
       },
       {
         title: '数据录入',

packages/TimeRangePicker/README.md

+# `@wisdom-components/TimeRangePicker`
+
+> TODO: description
+
+## Usage
+
+```
+const timeRangePicker = require('@wisdom-components/TimeRangePicker');
+
+// TODO: DEMONSTRATE API
+```

packages/TimeRangePicker/package.json

+{
+  "name": "@wisdom-components/timerangepicker",
+  "version": "1.0.1",
+  "description": "> TODO: description",
+  "author": "tuqian <webtuqian@163.com>",
+  "homepage": "",
+  "license": "ISC",
+  "main": "lib/index.js",
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
+  "files": [
+    "lib"
+  ],
+  "publishConfig": {
+    "registry": "https://g.civnet.cn:4873/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://g.civnet.cn:8443/ReactWeb5/wisdom-components.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1"
+  }
+}

packages/TimeRangePicker/src/TimeRangePicker.md

+---
+title: TimeRangePicker - 自定义类型时间选择
+nav:
+  title: 组件
+  path: /components
+group:
+  path: /
+---
+
+# TimeRangePicker 自定义类型时间选择
+
+基础业务组件
+
+- 支持默认时间的点击
+- 支持无定义的类型过滤
+- 支持自定义时间选项的精度
+
+## 何时使用
+
+- 需要自定义类型的时间选择时。
+
+## 代码演示
+
+<code src="./demos/Basic.js">
+
+## API
+
+自定义时间选择 api 参考 Antd DatePicker 组件 https://ant.design/components/date-picker-cn/#API
+
+| 参数        | 说明                                  | 类型               | 默认值                |
+| ----------- | ------------------------------------- | ------------------ | --------------------- |
+| layout      | 布局                                  | string             | horizontal / vertical |
+| placeholder | layout 值为 vertical 时，下拉框占位符 | string             | 请选择                |
+| width       | layout 值为 vertical 时，下拉框宽度   | number             | 120                   |
+| dataSource  | 数据源                                | array              | -                     |
+| timeProps   | 自定义时间选择 api                    | object             | { }                   |
+| onChange    | 选择事件的回调，会返回选中的时间项    | function(value){ } | -                     |

packages/TimeRangePicker/src/demos/Basic.js

+import React, { useState } from 'react';
+import TimeRangePicker from '../index';
+import moment from 'moment';
+
+const Demo = () => {
+  const [value, setValue] = useState('全部');
+  const [data, setData] = useState({ startDate: '', endDate: '' });
+  const [time, setTime] = useState({ startTime: '', endTime: '' });
+
+  const onDateChange = (key, data = []) => {
+    let curData = dateList.filter((item) => item.key === key);
+    let start = '',
+      end = '';
+    switch (key) {
+      case 'all':
+        break;
+      case 'yesterday':
+        start = moment().subtract(1, 'days').format(startFormat);
+        end = moment().subtract(1, 'days').format(endFormat);
+        break;
+      case 'today':
+        start = moment().format(startFormat);
+        end = moment().format(endFormat);
+        break;
+      case 'thisWeek':
+        start = moment().subtract(6, 'days').format(startFormat);
+        end = moment().format(endFormat);
+        break;
+      case 'lastWeek':
+        start = moment().subtract(14, 'days').format(startFormat);
+        end = moment().subtract(7, 'days').format(endFormat);
+        break;
+      case 'thisMonth':
+        start = moment().startOf('month').format(startFormat);
+        end = moment().endOf('month').format(endFormat);
+        break;
+      case 'lastMonth':
+        start = moment()
+          .month(moment().month() - 1)
+          .startOf('month')
+          .format(startFormat);
+        end = moment()
+          .month(moment().month() - 1)
+          .endOf('month')
+          .format(endFormat);
+        break;
+      case 'thisYear':
+        start = moment().startOf('year').format(startFormat);
+        end = moment().endOf('year').format(endFormat);
+        break;
+      case 'lastYear':
+        start = moment()
+          .year(moment().year() - 1)
+          .startOf('year')
+          .format(startFormat);
+        end = moment()
+          .year(moment().year() - 1)
+          .endOf('year')
+          .format(endFormat);
+        break;
+      case 'customer':
+        if (data && data.length > 0) {
+          start = moment(data[0]).format(startFormat);
+          end = moment(data[1]).format(endFormat);
+        }
+        break;
+    }
+    setValue(curData[0].name);
+    setData({ startDate: start, endDate: end });
+  };
+
+  const onTimeChange = (key, data = []) => {
+    let curData = timeList.filter((item) => item.key === key);
+    let start = '',
+      end = '';
+    switch (key) {
+      case 'oneHour':
+        start = moment().subtract(1, 'hour').format(timeFormat);
+        end = moment().format(timeFormat);
+        break;
+      case 'fourHour':
+        start = moment().subtract(4, 'hour').format(timeFormat);
+        end = moment().format(timeFormat);
+        break;
+      case 'twelveHours':
+        start = moment().subtract(12, 'hour').format(timeFormat);
+        end = moment().format(timeFormat);
+        break;
+      case 'roundClock':
+        start = moment().subtract(24, 'hour').format(timeFormat);
+        end = moment().format(timeFormat);
+        break;
+      case 'yesterday':
+        start = moment().subtract(1, 'days').format(startFormat);
+        end = moment().subtract(1, 'days').format(endFormat);
+        break;
+      case 'customer':
+        if (data && data.length > 0) {
+          start = moment(data[0]).format(timeFormat);
+          end = moment(data[1]).format(timeFormat);
+        }
+        break;
+    }
+    setValue(curData[0].name);
+    setTime({ startTime: start, endTime: end });
+  };
+
+  return (
+    <>
+      <h3>horizontal</h3>
+      <TimeRangePicker onChange={onDateChange} dataSource={dateList} layout={'horizontal'} />
+      <br />
+      <h3>vertical</h3>
+      <TimeRangePicker onChange={onDateChange} dataSource={dateList} layout={'vertical'} />
+      <br />
+      <div>
+        startDate：{data.startDate}
+        <br />
+        endDate：{data.endDate}
+      </div>
+      <br />
+      <TimeRangePicker
+        onChange={onTimeChange}
+        dataSource={timeList}
+        timeProps={{ showTime: true }}
+      />
+      <br />
+      <div>
+        startTime：{time.startTime}
+        <br />
+        endTime：{time.endTime}
+      </div>
+    </>
+  );
+};
+
+export default Demo;
+
+const startFormat = 'YYYY-MM-DD 00:00:00';
+const endFormat = 'YYYY-MM-DD 23:59:59';
+
+const timeFormat = 'YYYY-MM-DD kk:mm:ss';
+
+const dateList = [
+  {
+    key: 'all',
+    name: '全部',
+  },
+  {
+    key: 'yesterday',
+    name: '昨天',
+  },
+  {
+    key: 'today',
+    name: '今天',
+  },
+  {
+    key: 'thisWeek',
+    name: '本周',
+  },
+  {
+    key: 'lastWeek',
+    name: '上周',
+  },
+  {
+    key: 'thisMonth',
+    name: '本月',
+  },
+  {
+    key: 'lastMonth',
+    name: '上月',
+  },
+  {
+    key: 'thisYear',
+    name: '今年',
+  },
+  {
+    key: 'lastYear',
+    name: '去年',
+  },
+  {
+    key: 'customer',
+    name: '自定义',
+  },
+];
+
+const timeList = [
+  {
+    key: 'oneHour',
+    name: '近1小时',
+  },
+  {
+    key: 'fourHour',
+    name: '近4小时',
+  },
+  {
+    key: 'twelveHours',
+    name: '近12小时',
+  },
+  {
+    key: 'roundClock',
+    name: '近24小时',
+  },
+  {
+    key: 'yesterday',
+    name: '昨天',
+  },
+  {
+    key: 'customer',
+    name: '自定义',
+  },
+];

packages/TimeRangePicker/src/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, placeholder, 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 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 placeholder={placeholder} 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',
+  placeholder: '请选择',
+  width: 120,
+  dataSource: [],
+  timeProps: {},
+  onChange: function (v) {},
+};
+
+TimeRangePicker.propTypes = {
+  layout: PropTypes.string,
+  placeholder: PropTypes.string,
+  width: PropTypes.number,
+  dataSource: PropTypes.array,
+  timeProps: PropTypes.object,
+  onChange: PropTypes.func,
+};
+
+export default TimeRangePicker;
+
+const CUSTOMER_NAME = '自定义';

packages/TimeRangePicker/src/index.less

+@import (reference) '~antd/es/style/themes/default';
+@time-range-picker-prefix-cls: ~'@{ant-prefix}-time-range-picker';
+
+.@{time-range-picker-prefix-cls} {
+  &-customer {
+    margin-left: 10px;
+  }
+}