Merge pull request #16 from kne-union/linzp

添加CentralContent
kne-union · Oct 22, 2024 · 54fafc1 · 54fafc1
2 parents 1116525 + a809aba
commit 54fafc1
Show file tree

Hide file tree

Showing 14 changed files with 722 additions and 166 deletions.
diff --git a/README.md b/README.md
@@ -221,15 +221,15 @@ render(<BaseExample />);
 
 ```
 
-- TableView
+- CentralContent
 - 请尽量使用该组件代替Descriptions组件。该组件比Descriptions组件添加了数据格式化和灵活的空判断和自定义空展示，并且优化了排列，可以实现任何栅格大小的数据项复杂组合。实现了尾行优化，使你不必担心末尾项的宽度问题，程序会自动计算并占满该行。
 - _InfoPage(@kne/current-lib_info-page),(@kne/current-lib_info-page/dist/index.css),antd(antd)
 
 ```jsx
-const { TableView } = _InfoPage;
+const { CentralContent } = _InfoPage;
 
 const BaseExample = () => {
-  return (<TableView dataSource={{
+  return (<CentralContent dataSource={{
     id: 'RC00101',
     name: '张三',
     birthday: '2020-03-03',
@@ -263,15 +263,106 @@ const BaseExample = () => {
     name: 'description', title: '描述'
   }, {
     name: 'description2', title: '描述'
-  }, {
-    name: 'end', title: '尾行优化'
   }]} />);
 };
 
 render(<BaseExample />);
 
 ```
 
+- TableView
+- 
+- _InfoPage(@kne/current-lib_info-page),(@kne/current-lib_info-page/dist/index.css),antd(antd)
+
+```jsx
+const { TableView } = _InfoPage;
+const { Flex } = antd;
+const { useState } = React;
+
+const dataSource = [{
+  id: 'RC00101',
+  name: '张三',
+  birthday: '2020-03-03',
+  addTime: new Date(),
+  count: 2000.1322,
+  count2: 0.01234565,
+  count3: 1234523,
+  description: `描述描述描述描述描述描述描述描述`
+}, {
+  id: 'RC00102',
+  name: '李四',
+  birthday: '2020-03-03',
+  addTime: new Date(),
+  count: 2000.1322,
+  count2: 0.01234565,
+  count3: 1234523,
+  description: `描述描述描述描述描述描述描述描述`
+}, {
+  id: 'RC00103',
+  name: '王五',
+  birthday: '2020-03-03',
+  addTime: new Date(),
+  count: 2000.1322,
+  count2: 0.01234565,
+  count3: 1234523,
+  description: `描述描述描述描述描述描述描述描述`
+}, {
+  id: 'RC00104',
+  name: '马七',
+  birthday: '2020-03-03',
+  addTime: new Date(),
+  count: 2000.1322,
+  count2: 0.01234565,
+  count3: 1234523,
+  description: `描述描述描述描述描述描述描述描述`
+}];
+
+const columns = [{
+  name: 'id', title: 'ID'
+}, {
+  name: 'name', title: '姓名'
+}, {
+  name: 'birthday', title: '出生日期', format: 'date'
+}, {
+  name: 'addTime', title: '添加时间', format: 'datetime'
+}, {
+  name: 'count', title: '数量', format: 'number'
+}, {
+  name: 'description', title: '描述', span: 10
+}];
+
+const WithCheckbox = () => {
+  const [selectKeys, setSelectKeys] = useState([]);
+  return <TableView dataSource={dataSource} columns={columns} rowSelection={{
+    type: 'checkbox', allowSelectedAll: true, selectedRowKeys: selectKeys, onChange: setSelectKeys
+  }} />;
+};
+
+const WithSelected = () => {
+  const [selectKeys, setSelectKeys] = useState([]);
+  return <TableView dataSource={dataSource} columns={columns} rowSelection={{
+    selectedRowKeys: selectKeys, onChange: setSelectKeys
+  }} />;
+};
+
+const BaseExample = () => {
+  return <Flex vertical gap={10}>
+    <TableView dataSource={dataSource} columns={columns} />
+    <WithCheckbox />
+    <WithSelected />
+    <TableView dataSource={[]} columns={columns} />
+    <div style={{
+      height: '200px', overflowY: 'scroll'
+    }}>
+      <TableView dataSource={dataSource} columns={columns} sticky/>
+    </div>
+  </Flex>;
+};
+
+render(<BaseExample />);
+
+```
+
 
 ### API
 

diff --git a/doc/central-content.js b/doc/central-content.js
@@ -0,0 +1,41 @@
+const { CentralContent } = _InfoPage;
+
+const BaseExample = () => {
+  return (<CentralContent dataSource={{
+    id: 'RC00101',
+    name: '张三',
+    birthday: '2020-03-03',
+    addTime: new Date(),
+    count: 2000.1322,
+    count2: 0.01234565,
+    count3: 1234523,
+    description: `描述描述描述描述描述描述描述描述\n描述描述描述描述描述描述描述描述\n描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述`,
+    description2: `描述描述描述描述描述描述描述描述`
+  }} col={3} columns={[{
+    name: 'id', title: 'ID', block: true
+  }, {
+    name: 'name', title: '姓名', span: 10
+  }, {
+    name: 'birthday', title: '出生日期', format: 'date'
+  }, {
+    name: 'addTime', title: '添加时间', format: 'datetime'
+  }, {
+    name: 'count', title: '数量', format: 'number'
+  }, {
+    name: 'count2', title: '百分比', format: 'number-percent money-百分比'
+  }, {
+    name: 'count3', title: '万元', format: 'number--10000', render: (value) => `${value}万元`
+  }, {
+    name: 'empty', title: '空值显示'
+  }, {
+    name: 'empty2', title: '空值显示2', placeholder: '空'
+  }, {
+    name: 'empty3', title: '空值显示3', emptyIsPlaceholder: false
+  }, {
+    name: 'description', title: '描述'
+  }, {
+    name: 'description2', title: '描述'
+  }]} />);
+};
+
+render(<BaseExample />);
diff --git a/doc/example.json b/doc/example.json
@@ -56,8 +56,26 @@
       ]
     },
     {
-      "title": "TableView",
+      "title": "CentralContent",
       "description": "请尽量使用该组件代替Descriptions组件。该组件比Descriptions组件添加了数据格式化和灵活的空判断和自定义空展示，并且优化了排列，可以实现任何栅格大小的数据项复杂组合。实现了尾行优化，使你不必担心末尾项的宽度问题，程序会自动计算并占满该行。",
+      "code": "./central-content.js",
+      "scope": [
+        {
+          "name": "_InfoPage",
+          "packageName": "@kne/current-lib_info-page"
+        },
+        {
+          "packageName": "@kne/current-lib_info-page/dist/index.css"
+        },
+        {
+          "name": "antd",
+          "packageName": "antd"
+        }
+      ]
+    },
+    {
+      "title": "TableView",
+      "description": "",
       "code": "./table-view.js",
       "scope": [
         {

diff --git a/doc/table-view.js b/doc/table-view.js
@@ -1,43 +1,85 @@
 const { TableView } = _InfoPage;
+const { Flex } = antd;
+const { useState } = React;
+
+const dataSource = [{
+  id: 'RC00101',
+  name: '张三',
+  birthday: '2020-03-03',
+  addTime: new Date(),
+  count: 2000.1322,
+  count2: 0.01234565,
+  count3: 1234523,
+  description: `描述描述描述描述描述描述描述描述`
+}, {
+  id: 'RC00102',
+  name: '李四',
+  birthday: '2020-03-03',
+  addTime: new Date(),
+  count: 2000.1322,
+  count2: 0.01234565,
+  count3: 1234523,
+  description: `描述描述描述描述描述描述描述描述`
+}, {
+  id: 'RC00103',
+  name: '王五',
+  birthday: '2020-03-03',
+  addTime: new Date(),
+  count: 2000.1322,
+  count2: 0.01234565,
+  count3: 1234523,
+  description: `描述描述描述描述描述描述描述描述`
+}, {
+  id: 'RC00104',
+  name: '马七',
+  birthday: '2020-03-03',
+  addTime: new Date(),
+  count: 2000.1322,
+  count2: 0.01234565,
+  count3: 1234523,
+  description: `描述描述描述描述描述描述描述描述`
+}];
+
+const columns = [{
+  name: 'id', title: 'ID'
+}, {
+  name: 'name', title: '姓名'
+}, {
+  name: 'birthday', title: '出生日期', format: 'date'
+}, {
+  name: 'addTime', title: '添加时间', format: 'datetime'
+}, {
+  name: 'count', title: '数量', format: 'number'
+}, {
+  name: 'description', title: '描述', span: 10
+}];
+
+const WithCheckbox = () => {
+  const [selectKeys, setSelectKeys] = useState([]);
+  return <TableView dataSource={dataSource} columns={columns} rowSelection={{
+    type: 'checkbox', allowSelectedAll: true, selectedRowKeys: selectKeys, onChange: setSelectKeys
+  }} />;
+};
+
+const WithSelected = () => {
+  const [selectKeys, setSelectKeys] = useState([]);
+  return <TableView dataSource={dataSource} columns={columns} rowSelection={{
+    selectedRowKeys: selectKeys, onChange: setSelectKeys
+  }} />;
+};
 
 const BaseExample = () => {
-  return (<TableView dataSource={{
-    id: 'RC00101',
-    name: '张三',
-    birthday: '2020-03-03',
-    addTime: new Date(),
-    count: 2000.1322,
-    count2: 0.01234565,
-    count3: 1234523,
-    description: `描述描述描述描述描述描述描述描述\n描述描述描述描述描述描述描述描述\n描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述`,
-    description2: `描述描述描述描述描述描述描述描述`
-  }} col={3} columns={[{
-    name: 'id', title: 'ID', block: true
-  }, {
-    name: 'name', title: '姓名', span: 10
-  }, {
-    name: 'birthday', title: '出生日期', format: 'date'
-  }, {
-    name: 'addTime', title: '添加时间', format: 'datetime'
-  }, {
-    name: 'count', title: '数量', format: 'number'
-  }, {
-    name: 'count2', title: '百分比', format: 'number-percent money-百分比'
-  }, {
-    name: 'count3', title: '万元', format: 'number--10000', render: (value) => `${value}万元`
-  }, {
-    name: 'empty', title: '空值显示'
-  }, {
-    name: 'empty2', title: '空值显示2', placeholder: '空'
-  }, {
-    name: 'empty3', title: '空值显示3', emptyIsPlaceholder: false
-  }, {
-    name: 'description', title: '描述'
-  }, {
-    name: 'description2', title: '描述'
-  }, {
-    name: 'end', title: '尾行优化'
-  }]} />);
+  return <Flex vertical gap={10}>
+    <TableView dataSource={dataSource} columns={columns} />
+    <WithCheckbox />
+    <WithSelected />
+    <TableView dataSource={[]} columns={columns} />
+    <div style={{
+      height: '200px', overflowY: 'scroll'
+    }}>
+      <TableView dataSource={dataSource} columns={columns} sticky/>
+    </div>
+  </Flex>;
 };
 
 render(<BaseExample />);
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kne/info-page",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "一般用在复杂的详情展示页面，InfoPage提供了一个标准的展示信息的格式",
   "syntax": {
     "esmodules": true
@@ -77,7 +77,6 @@
   "devDependencies": {
     "@kne/microbundle": "^0.15.5",
     "@kne/modules-dev": "^2.0.14",
-    "classnames": "^2.5.1",
     "cross-env": "^7.0.3",
     "husky": "^9.0.11",
     "npm-run-all": "^4.1.5",
@@ -87,6 +86,8 @@
   },
   "dependencies": {
     "@kne/is-empty": "^1.0.1",
-    "dayjs": "^1.11.13"
+    "classnames": "^2.5.1",
+    "dayjs": "^1.11.13",
+    "lodash": "^4.17.21"
   }
 }
diff --git a/src/TableView/boxComputed.js → src/CentralContent/boxComputed.js b/src/TableView/boxComputed.js → src/CentralContent/boxComputed.js