增加组件

packages/chengkaiwen_test/src/chengkaiwen_test.md

+---
+title: ProList - 测试列表11
+nav:
+  title: 组件
+  path: /components
+group:
+  path: /
+---
+
+<code src="./demos/Simple.js">

packages/chengkaiwen_test/src/demos/Basis.js

+import React from 'react';
+import { Avatar } from 'antd';
+import List from '../index';
+
+const data = [
+  '上海杨树浦一期水厂1',
+  '上海杨树浦二期水厂2',
+  '上海杨树浦三期水厂43',
+  '光谷金融港一期水厂5',
+  '光谷金融港二期水厂6',
+];
+
+export default () => {
+  return (
+    <List
+      itemLayout="horizontal"
+      dataSource={data}
+      renderItem={(item) => (
+        <List.Item>
+          <List.Item.Meta
+            avatar={
+              <Avatar src="https://g.civnet.cn:5010/web4Assets/images/icon/%E7%86%8A%E7%8C%AB%E6%96%B01.png" />
+            }
+            title={item}
+            description="杨树浦水厂始建于公元1881年8月，建成于1883年8月1日正式向外供水的杨树浦水厂隶属于上海市自来水市北有限公司。"
+          />
+        </List.Item>
+      )}
+    />
+  );
+};

packages/chengkaiwen_test/src/demos/Pagination.js

+import React from 'react';
+import List from '../index';
+// import {List} from "antd"
+
+const data = [];
+for (let i = 0; i < 23; i += 1) {
+  data.push(`上海杨树浦${i.toString()}期水厂`);
+}
+
+export default (props) => {
+  return (
+    <List
+      itemLayout="vertical"
+      size="large"
+      pagination={{
+        onChange: (page) => {
+          console.log(page);
+        },
+        pageSize: 3,
+      }}
+      dataSource={data}
+      footer={
+        <div>
+          <b>水厂统计信息:</b> footer part
+        </div>
+      }
+      renderItem={(item) => <List.Item>{item}</List.Item>}
+    />
+  );
+};

packages/chengkaiwen_test/src/demos/Simple.js

+import React from 'react';
+import { Typography, Divider } from 'antd';
+import './a.css';
+const data = [
+  '光谷智慧园一期泵房1',
+  '光谷智慧园一期泵房2',
+  '光谷智慧园一期泵房3',
+  '光谷金融港一期水厂4',
+  '光谷金融港二期水厂5',
+];
+const color = ['red', 'green', 'olive', 'blue', 'purple'];
+export default () => {
+  return (
+    <>
+      {data.map((v, i) => (
+        <div className={data[i]} title={'程恺文' + i} style={{ color: color[i] }}>
+          {i + v + '程恺文'}
+        </div>
+      ))}
+    </>
+  );
+};

packages/chengkaiwen_test/src/demos/a.css

+.光谷智慧园一期泵房1 {
+  width: 300px;
+  height: 60px;
+  background-color: brown;
+}

packages/chengkaiwen_test/src/index.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import { List } from 'antd';
+
+const PandaList = (props) => {
+  return <List {...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,
+};
+
+PandaList.propTypes = {
+  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, // 	是否展示分割线
+};
+
+PandaList.Item = List.Item;
+PandaList.Item.Meta = List.Item.Meta;
+console.log('程恺文');
+export default <h5> 程恺文 </h5>;

packages/list/src/demos/Basis.js

@@ -3,11 +3,11 @@ import { Avatar } from 'antd';
 import List from '../index';
 
 const data = [
-  '上海杨树浦一期水厂',
-  '上海杨树浦二期水厂',
-  '上海杨树浦三期水厂',
-  '光谷金融港一期水厂',
-  '光谷金融港二期水厂',
+  '上海杨树浦一期水厂1',
+  '上海杨树浦二期水厂2',
+  '上海杨树浦三期水厂43',
+  '光谷金融港一期水厂5',
+  '光谷金融港二期水厂6',
 ];
 
 export default () => {