feat: test

docs/index.md

@@ -14,4 +14,3 @@ hero:
 
 | 组件 | 下载量 | 版本 |
 | ---- | ------ | ---- |
-

packages/test_cqj/src/demos/doublePickers.js

+// eslint-disable-next-line no-unused-vars
+import React, { useState } from 'react';
+import { Row, Col, Button, notification } from 'antd';
+import moment from 'moment';
+import TimePicker from '../index';
+
+const TestDemo = () => {
+  const [startTime, setStartTime] = useState(moment().startOf('day')); // 默认值当天0点
+  const [endTime, setEndTime] = useState(
+    moment(new Date(), 'YYYY-MM-DD HH:mm:ss'), // 默认值当前时间
+  );
+  // 计算时间间隔（分钟）
+  // const start = new Date(startTime.format('YYYY-MM-DD HH:mm:ss')).getTime();
+  // const end = new Date(endTime.format('YYYY-MM-DD HH:mm:ss')).getTime();
+  // const minuteInterval = (end - start);
+  // if (minuteInterval <= 0) {
+  //   notification.error({
+  //     message: '时间设置有误',
+  //     description: '起始时间应该早于结束时间',
+  //   });
+  // }
+  // DatePicker改变点击确定时
+  const changeStartTime = (time) => {
+    setStartTime(time);
+  };
+  const changeEndTime = (time) => {
+    setEndTime(time);
+  };
+  // 近1/6/12/24小时
+  const setTime = (time) => {
+    setEndTime(moment(new Date(), 'YYYY-MM-DD HH:mm:ss'));
+    setStartTime(
+      moment(new Date(new Date().getTime() - time * 60 * 60 * 1000), 'YYYY-MM-DD HH:mm:ss'),
+    );
+  };
+  function onChange(value, dateString) {
+    console.log('Selected Time: ', value);
+    console.log('Formatted Selected Time: ', dateString);
+  }
+
+  function onOk(value) {
+    console.log('onOk: ', value);
+  }
+
+  return (
+    <>
+      <div>
+        <Row>
+          <Col span={24}>
+            <span style={{ lineHeight: 2 }}>时间：</span>
+            <TimePicker placeholder="起始时间" value={startTime} onChange={changeStartTime} />
+            --
+            <TimePicker
+              placeholder="结束时间"
+              value={endTime}
+              onChange={changeEndTime}
+              style={{ marginRight: '10px' }}
+            />
+            {/* <RangePicker
+              picker="quarter"
+              showTime={{ format: 'HH:mm' }}
+              format="YYYY-MM-DD HH:mm"
+              onChange={onChange}
+              onOk={onOk}
+            /> */}
+          </Col>
+        </Row>
+        <Row style={{ marginTop: '10px' }}>
+          <Col span={24}>
+            <Button onClick={() => setTime(1)}>近1小时</Button>
+            <Button onClick={() => setTime(6)}>近6小时</Button>
+            <Button onClick={() => setTime(24)}>近1天</Button>
+            <Button onClick={() => setTime(24 * 7)}>近1周</Button>
+            <Button onClick={() => setTime(14 * 24)}>近2周</Button>
+            <Button onClick={() => setTime(30 * 24)}>近1月</Button>
+          </Col>
+        </Row>
+      </div>
+    </>
+  );
+};
+export default TestDemo;

packages/test_cqj/src/demos/month.js

+// eslint-disable-next-line no-unused-vars
+import React from 'react';
+// eslint-disable-next-line no-unused-vars
+import TimePicker from '../index';
+
+const noTime = () => {
+  return <TimePicker format="YYYY-MM" showTime="false" picker="month" />;
+};
+
+export default noTime;

packages/test_cqj/src/demos/noTime.js

+// eslint-disable-next-line no-unused-vars
+import React from 'react';
+// eslint-disable-next-line no-unused-vars
+import TimePicker from '../index';
+
+const noTime = () => {
+  return <TimePicker format="YYYY-MM-DD" showTime="false" />;
+};
+
+export default noTime;

packages/test_cqj/src/index.js

 // eslint-disable-next-line no-unused-vars
 import React from 'react';
 import PropTypes from 'prop-types';
-import { List } from 'antd';
-
-const PandaList = (props) => {
-
-  
-
-
-  return <List {...props} />;
+// eslint-disable-next-line no-unused-vars
+import { DatePicker } from 'antd';
 
+const TimePicker = (props) => {
+  return <DatePicker {...props} />;
 };
 
-PandaList.defaultProps = {
-  bordered: false,
-  className: 'panda-list',
-  dataSource: [],
-  footer: <div className="panda-list-footer" />,
-  grid: undefined,
-  header: <div className="panda-list-header" />,
-  itemLayout: undefined,
-  loading: false,
-  loadMore: undefined,
-  locale: { emptyText: '暂无数据' },
-  pagination: false,
-  renderItem: (item, index) => <List.Item key={index}>{item}</List.Item>,
-  size: 'default',
-  split: false,
+TimePicker.defaultProps = {
+  allowClear: true,
+  bordered: true,
+  className: 'panda-TimePicker',
+  format: 'YYYY-MM-DD HH:mm:ss',
+  showTime: true,
 };
 
-PandaList.propTypes = {
+TimePicker.propTypes = {
+  allowClear: PropTypes.bool, // 是否展示清除按钮
   bordered: PropTypes.bool, // 是否显示边框
   className: PropTypes.string, // 类名称
-  dataSource: PropTypes.array, // 列表数据源
-  footer: PropTypes.element, // 列表尾部
-  grid: PropTypes.object, // 列表栅格配置
-  header: PropTypes.element, // 列表头部
-  itemLayout: PropTypes.string, // 	设置 List.Item 布局, 设置成 vertical 则竖直样式显示, 默认横排
-  loading: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]), // 当卡片内容还在加载中时，可以用 loading 展示一个占位
-  loadMore: PropTypes.element, // 加载更多
-  locale: PropTypes.object, // 默认文案设置，目前包括空数据文案
-  pagination: PropTypes.object, // 对应的 pagination 配置, 设置 false 不显示
-  renderItem: PropTypes.func, // 列表元素展示钩子
-  size: PropTypes.oneOf(['small', 'default', 'large']), // 	list 的尺寸
-  split: PropTypes.bool, // 	是否展示分割线
+  format: PropTypes.string, // 格式
+  showTime: PropTypes.bool, // 是否增加具体时间选择功能
 };
 
-PandaList.Item = List.Item;
-PandaList.Item.Meta = List.Item.Meta;
-
-export default PandaList;
+export default TimePicker;

packages/test_cqj/src/test_cqj.md

 ---
-title: ProList - 标准列表
+title: TimePicker - 时间选择器
 nav:
   title: 组件
   path: /components
@@ -7,90 +7,45 @@ group:
   path: /
 ---
 
-# ProList 标准列表
+# TimePicker 时间选择器
 
-通用列表。
+起止时间选择。
 
 # 何时使用
 
-- 最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。.
+- 完整的时间控件，支持多种时间格式，以及按照 `天`、`周`、`月`、`季度`展示 。
 
-## 简单列表
+## 日期+时间
 
-列表拥有大、中、小三种尺寸。
+时间格式按照`YYYY-MM-DD HH:mm:ss`展示。
 
-通过设置 `size` 为 `large` `small` 分别把按钮设为大、小尺寸。若不设置 `size`，则尺寸为中。
+<code src="./index.js">
 
-可通过设置 `header` 和 `footer`，来自定义列表头部和尾部。
+## 不展示时间
 
-<code src="./demos/Simple.js">
+时间格式按照`YYYY-MM-DD`展示。
 
-## 基础列表
+<code src="./demos/noTime.js">
 
-基础列表。
+## 按月展示
 
-<code src="./demos/Basis.js">
+时间格式按照`YYYY-MM`展示。
 
-## 分页列表
+<code src="./demos/month.js">
 
-分页列表。
+## 起止时间选择
 
-<code src="./demos/Pagination.js">
+起止时间选择。
 
-## API
+<code src="./demos/doublePickers.js">
 
-### List
+## API
 
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| bordered | 是否展示边框 | boolean | false |  |
-| dataSource | 列表数据源 | any\[] | - |  |
-| footer | 列表底部 | ReactNode | - |  |
-| grid | 列表栅格配置 | [object](#List-grid-props) | - |  |
-| header | 列表头部 | ReactNode | - |  |
-| itemLayout | 设置 `List.Item` 布局, 设置成 `vertical` 则竖直样式显示, 默认横排 | string | - |  |
-| loading | 当卡片内容还在加载中时，可以用 `loading` 展示一个占位 | boolean \| [object](/components/spin/#API) ([更多](https://github.com/ant-design/ant-design/issues/8659)) | false |  |
-| loadMore | 加载更多 | ReactNode | - |  |
-| locale | 默认文案设置，目前包括空数据文案 | object | {emptyText: `暂无数据`} |  |
-| pagination | 对应的 `pagination` 配置, 设置 false 不显示 | boolean \| object | false |  |
-| renderItem | 当使用 dataSource 时，可以用 `renderItem` 自定义渲染列表项 | (item) => ReactNode | - |  |
-| size | list 的尺寸 | `default` \| `large` \| `small` | `default` |  |
-| split | 是否展示分割线 | boolean | true |  |
-
-### pagination
-
-分页的配置项。
-
-| 参数     | 说明               | 类型                        | 默认值   |
-| -------- | ------------------ | --------------------------- | -------- |
-| position | 指定分页显示的位置 | `top` \| `bottom` \| `both` | `bottom` |
-
-更多配置项，请查看 [`Pagination`](/components/pagination/)。
-
-### List grid props
-
-| 参数   | 说明                 | 类型   | 默认值 | 版本 |
-| ------ | -------------------- | ------ | ------ | ---- |
-| column | 列数                 | number | -      |      |
-| gutter | 栅格间隔             | number | 0      |      |
-| xs     | `<576px` 展示的列数  | number | -      |      |
-| sm     | `≥576px` 展示的列数  | number | -      |      |
-| md     | `≥768px` 展示的列数  | number | -      |      |
-| lg     | `≥992px` 展示的列数  | number | -      |      |
-| xl     | `≥1200px` 展示的列数 | number | -      |      |
-| xxl    | `≥1600px` 展示的列数 | number | -      |      |
-
-### List.Item
+### TimePicker
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| actions | 列表操作组，根据 `itemLayout` 的不同, 位置在卡片底部或者最右侧 | Array&lt;ReactNode> | - |  |
-| extra | 额外内容, 通常用在 `itemLayout` 为 `vertical` 的情况下, 展示右侧内容; `horizontal` 展示在列表元素最右侧 | ReactNode | - |  |
-
-### List.Item.Meta
-
-| 参数        | 说明               | 类型      | 默认值 | 版本 |
-| ----------- | ------------------ | --------- | ------ | ---- |
-| avatar      | 列表元素的图标     | ReactNode | -      |      |
-| description | 列表元素的描述内容 | ReactNode | -      |      |
-| title       | 列表元素的标题     | ReactNode | -      |      |
+| allowClear | 是否展示清除按钮 | boolean | true |  |
+| bordered | 是否展示边框 | boolean | true |  |
+| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 <a href="http://momentjs.com/">moment.js</a>，支持自定义格式 | string | YYYY-MM-DD HH:mm:ss |  |
+| showTime | 是否展示边框 | boolean | true |  |