Skip to content

W
wisdom-components
Commit 4bd90d0a authored by 邓晓峰's avatar 邓晓峰
Browse files
Options

docs: test docs

parent 1b1f1793
Hide whitespace changes
Inline Side-by-side
Showing with 1 addition and 369 deletions
.fatherrc.js
View file @ 4bd90d0a
......@@ -2,7 +2,7 @@ import { readdirSync } from 'fs';
import { join } from 'path';
// utils must build before core
const headPkgs = ['card', 'list'];
const headPkgs = ['card'];
const tailPkgs = readdirSync(join(__dirname, 'packages')).filter(
(pkg) => pkg.charAt(0) !== '.' && !headPkgs.includes(pkg),
);
......
package.json
View file @ 4bd90d0a
......@@ -124,12 +124,6 @@
"limit": "100 s",
"webpack": false,
"running": false
},
{
"path": "packages/list/dist/**/*.js",
"limit": "100 s",
"webpack": false,
"running": false
}
],
"dependencies": {
......
packages/list/CHANGELOG.md deleted 100644 → 0
View file @ 1b1f1793
# Change Log
All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [1.2.0](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/pro-list@1.1.0...@wisdom-components/pro-list@1.2.0) (2021-01-22)
### Features
- gitlab ci ([72d1c40](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/72d1c402f81687833a65c1442af795e2e571a1b3))
- gitlab ci ([d635bf7](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/d635bf7b0fa24fce81d86409b3222a8ab6e8136e))
# [1.1.0](https://g.civnet.cn:8443/test/wisdom-components/compare/@wisdom-components/pro-list@1.0.1...@wisdom-components/pro-list@1.1.0) (2020-10-29)
### Features
- add list ([26122d0](https://g.civnet.cn:8443/test/wisdom-components/commits/26122d06c571c7c763f1ee89ad77d7aaf262198c))
## 1.0.1 (2020-10-26)
**Note:** Version bump only for package @wisdom-components/pro-list
packages/list/README.md deleted 100644 → 0
View file @ 1b1f1793
# 通用列表。
## 何时使用
最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。
## API
### List
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| 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
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| actions | 列表操作组，根据 `itemLayout` 的不同, 位置在卡片底部或者最右侧 | Array&lt;ReactNode> | - | |
| extra | 额外内容, 通常用在 `itemLayout` 为 `vertical` 的情况下, 展示右侧内容; `horizontal` 展示在列表元素最右侧 | ReactNode | - | |
### List.Item.Meta
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ----------- | ------------------ | --------- | ------ | ---- |
| avatar | 列表元素的图标 | ReactNode | - | |
| description | 列表元素的描述内容 | ReactNode | - | |
| title | 列表元素的标题 | ReactNode | - | |
packages/list/package.json deleted 100644 → 0
View file @ 1b1f1793
{
"name": "@wisdom-components/pro-list",
"version": "1.2.0",
"description": "@wisdom-components/pro-list",
"author": "yefei <947371421@qq.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"
},
"dependencies": {
"antd": "^4.7.3",
"prop-types": "^15.7.2",
"react": "^17.0.1"
}
}
packages/list/src/demos/Basis.js deleted 100644 → 0
View file @ 1b1f1793
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 deleted 100644 → 0
View file @ 1b1f1793
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 deleted 100644 → 0
View file @ 1b1f1793
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/index.js deleted 100644 → 0
View file @ 1b1f1793
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;
export default PandaList;
packages/list/src/list.md deleted 100644 → 0
View file @ 1b1f1793
---
title: ProList - 标准列表
nav:
title: 组件
path: /components
group:
path: /
---
# ProList 标准列表
通用列表。
# 何时使用
- 最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。.
## 简单列表
列表拥有大、中、小三种尺寸。
通过设置 `size` 为 `large` `small` 分别把按钮设为大、小尺寸。若不设置 `size`，则尺寸为中。
可通过设置 `header` 和 `footer`，来自定义列表头部和尾部。
<code src="./demos/Simple.js">
## 基础列表
基础列表。
<code src="./demos/Basis.js">
## 分页列表
分页列表。
<code src="./demos/Pagination.js">
## API
### List
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| 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
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| actions | 列表操作组，根据 `itemLayout` 的不同, 位置在卡片底部或者最右侧 | Array&lt;ReactNode> | - | |
| extra | 额外内容, 通常用在 `itemLayout` 为 `vertical` 的情况下, 展示右侧内容; `horizontal` 展示在列表元素最右侧 | ReactNode | - | |
### List.Item.Meta
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ----------- | ------------------ | --------- | ------ | ---- |
| avatar | 列表元素的图标 | ReactNode | - | |
| description | 列表元素的描述内容 | ReactNode | - | |
| title | 列表元素的标题 | ReactNode | - | |
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment