feat: add list

.gitignore

@@ -37,4 +37,8 @@ functions/mock
 screenshot
 .firebase
 .eslintcache
-.changelog
\ No newline at end of file
+.changelog
+
+# devServer-host
+host/
+webpack.host.js
\ No newline at end of file

package.json

@@ -19,7 +19,8 @@
     "test": "umi-test",
     "test:coverage": "umi-test --coverage",
     "test:update": "umi-test --updateSnapshot",
-    "update:deps": "yarn upgrade-interactive --latest"
+    "update:deps": "yarn upgrade-interactive --latest",
+    "dev": "webpack-dev-server --config webpack.host.js"
   },
   "browserslist": [
     "last 2 versions",
@@ -58,6 +59,7 @@
     "father-build": "^1.18.1",
     "gh-pages": "^3.1.0",
     "glob": "^7.1.6",
+    "html-webpack-plugin": "^4.5.0",
     "jest": "^26.2.2",
     "jest-fetch-mock": "^3.0.3",
     "jsdom": "^16.4.0",
@@ -96,6 +98,7 @@
     "umi-types": "^0.5.11",
     "webpack-bundle-analyzer": "^3.6.0",
     "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0",
     "write-pkg": "^4.0.0",
     "xhr-mock": "^2.5.1",
     "yorkie": "^2.0.0"

packages/card/src/card.md

@@ -17,7 +17,3 @@ group:
 - 需要多个卡片栅格，gutter 布局时。
 - 需要进行卡片内切分布局时。
 - 需要卡片可折叠时。
-
-
-
-

packages/list/src/demos/Basis.js

+import React from 'react';
+import { Avatar } from 'antd';
+import List from '../index';
+
+const data = [
+  '上海杨树浦一期水厂',
+  '上海杨树浦二期水厂',
+  '上海杨树浦三期水厂',
+  '光谷金融港一期水厂',
+  '光谷金融港二期水厂',
+];
+
+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/list/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/list/src/demos/Simple.js

+import React from 'react';
+import { Typography, Divider } from 'antd';
+import List from '../index';
+
+const data = [
+  '光谷智慧园一期泵房',
+  '光谷智慧园一期泵房',
+  '光谷智慧园一期泵房',
+  '光谷金融港一期水厂',
+  '光谷金融港二期水厂',
+];
+
+export default () => {
+  return (
+    <>
+      <Divider orientation="left">Default Size</Divider>
+      <List
+        header={<div>Header</div>}
+        footer={<div>Footer</div>}
+        bordered
+        dataSource={data}
+        renderItem={(item, index) => (
+          <List.Item key={index}>
+            <Typography.Text mark>[ITEM]</Typography.Text> {item}
+          </List.Item>
+        )}
+      />
+      <Divider orientation="left">Small Size</Divider>
+      <List
+        size="small"
+        header={<div>Header</div>}
+        footer={<div>Footer</div>}
+        bordered
+        dataSource={data}
+        renderItem={(item) => <List.Item>{item}</List.Item>}
+      />
+      <Divider orientation="left">Large Size</Divider>
+      <List
+        size="large"
+        header={<div>Header</div>}
+        footer={<div>Footer</div>}
+        bordered
+        dataSource={data}
+        renderItem={(item) => <List.Item>{item}</List.Item>}
+      />
+    </>
+  );
+};

packages/list/src/demos/index.js

-import React from 'react';
-import List from '../index';
-
-export default () => {
-  return <List />;
-};

packages/list/src/index.js

 import React from 'react';
+import PropTypes from 'prop-types';
+import { List } from 'antd';
 
-class List extends React.Component {
-  constructor(props) {
-    super(props);
+const PandaList = (props) => {
+  return <List {...props} />;
+};
 
-    this.state = {
-      // eslint-disable-next-line react/no-unused-state
-      name: 'list',
-    };
-  }
+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,
+};
 
-  render() {
-    return <>list</>;
-  }
-}
+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, // 	是否展示分割线
+};
 
-export default List;
+PandaList.Item = List.Item;
+PandaList.Item.Meta = List.Item.Meta;
+
+export default PandaList;

packages/list/src/list.md

@@ -9,13 +9,30 @@ group:
 
 # ProList 标准列表
 
-页内容器卡片，提供标准卡片样式，卡片切分以及栅格布局能力。
+通用列表。
 
-## 何时使用
+# 何时使用
 
-- 需要一个标准卡片容纳内容时。
-- 需要多个卡片栅格，gutter 布局时。
-- 需要进行卡片内切分布局时。
-- 需要卡片可折叠时。
+- 最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。
 
-<code src="./demos/index.js">
+## 简单列表
+
+列表拥有大、中、小三种尺寸。
+
+通过设置 `size` 为 `large` `small` 分别把按钮设为大、小尺寸。若不设置 `size`，则尺寸为中。
+
+可通过设置 `header` 和 `footer`，来自定义列表头部和尾部。
+
+<code src="./demos/Simple.js">
+
+## 基础列表
+
+基础列表。
+
+<code src="./demos/Basis.js">
+
+## 分页列表
+
+分页列表。
+
+<code src="./demos/Pagination.js">

scripts/release.js

@@ -75,10 +75,9 @@ async function release() {
       logStep('build');
       try {
         await exec('npm', ['run', 'build']);
-      } catch(error) {
-        console.log(error)
+      } catch (error) {
+        console.log(error);
       }
-      
     } else {
       logStep('build is skipped, since args.skipBuild is supplied');
     }

scripts/utils/exec.js

@@ -2,7 +2,10 @@ const { spawn } = require('child_process');
 const spawnWin = require('cross-spawn');
 module.exports = function exec(command, args, opts) {
   return new Promise((resolve, reject) => {
-    const child = process.platform === 'win32' ? spawnWin(command, args, Object.assign({ stdio: 'inherit', env: process.env }, opts)): spawn(command, args, Object.assign({ stdio: 'inherit', env: process.env }, opts));
+    const child =
+      process.platform === 'win32'
+        ? spawnWin(command, args, Object.assign({ stdio: 'inherit', env: process.env }, opts))
+        : spawn(command, args, Object.assign({ stdio: 'inherit', env: process.env }, opts));
     child.once('error', (err) => {
       console.log(err);
       reject(err);