[v4.14.1] feat(Table): Table 新增树形数据结构展示功能 #539 (#686) 369fa95

uiwjs · Mar 17, 2022 · f5d45c7 · f5d45c7
1 parent e8db73f
commit f5d45c7
Show file tree

Hide file tree

Showing 14 changed files with 57 additions and 38 deletions.
diff --git a/asset-manifest.json b/asset-manifest.json
@@ -1,7 +1,7 @@
 {
   "files": {
-    "main.css": "/static/css/main.3f1519bf.css",
-    "main.js": "/static/js/main.d44eb427.js",
+    "main.css": "/static/css/main.4aded231.css",
+    "main.js": "/static/js/main.c62e9700.js",
     "static/css/9200.14abaeb3.chunk.css": "/static/css/9200.14abaeb3.chunk.css",
     "static/js/9200.0a1f7353.chunk.js": "/static/js/9200.0a1f7353.chunk.js",
     "static/css/6730.4d268428.chunk.css": "/static/css/6730.4d268428.chunk.css",
@@ -197,7 +197,7 @@
     "static/js/7664.f92b74f7.chunk.js": "/static/js/7664.f92b74f7.chunk.js",
     "static/js/9961.9db8f620.chunk.js": "/static/js/9961.9db8f620.chunk.js",
     "static/js/3811.ac38cada.chunk.js": "/static/js/3811.ac38cada.chunk.js",
-    "static/js/6659.cfc5b1fb.chunk.js": "/static/js/6659.cfc5b1fb.chunk.js",
+    "static/js/6659.6079712c.chunk.js": "/static/js/6659.6079712c.chunk.js",
     "static/js/2448.1d46904a.chunk.js": "/static/js/2448.1d46904a.chunk.js",
     "static/js/207.891adb65.chunk.js": "/static/js/207.891adb65.chunk.js",
     "static/js/7861.757503f5.chunk.js": "/static/js/7861.757503f5.chunk.js",
@@ -219,8 +219,8 @@
     "static/js/782.b7fa1e08.chunk.js": "/static/js/782.b7fa1e08.chunk.js",
     "static/js/5183.ac2ca737.js": "/static/js/5183.ac2ca737.js",
     "index.html": "/index.html",
-    "main.3f1519bf.css.map": "/static/css/main.3f1519bf.css.map",
-    "main.d44eb427.js.map": "/static/js/main.d44eb427.js.map",
+    "main.4aded231.css.map": "/static/css/main.4aded231.css.map",
+    "main.c62e9700.js.map": "/static/js/main.c62e9700.js.map",
     "9200.14abaeb3.chunk.css.map": "/static/css/9200.14abaeb3.chunk.css.map",
     "9200.0a1f7353.chunk.js.map": "/static/js/9200.0a1f7353.chunk.js.map",
     "6730.4d268428.chunk.css.map": "/static/css/6730.4d268428.chunk.css.map",
@@ -416,7 +416,7 @@
     "7664.f92b74f7.chunk.js.map": "/static/js/7664.f92b74f7.chunk.js.map",
     "9961.9db8f620.chunk.js.map": "/static/js/9961.9db8f620.chunk.js.map",
     "3811.ac38cada.chunk.js.map": "/static/js/3811.ac38cada.chunk.js.map",
-    "6659.cfc5b1fb.chunk.js.map": "/static/js/6659.cfc5b1fb.chunk.js.map",
+    "6659.6079712c.chunk.js.map": "/static/js/6659.6079712c.chunk.js.map",
     "2448.1d46904a.chunk.js.map": "/static/js/2448.1d46904a.chunk.js.map",
     "207.891adb65.chunk.js.map": "/static/js/207.891adb65.chunk.js.map",
     "7861.757503f5.chunk.js.map": "/static/js/7861.757503f5.chunk.js.map",
@@ -441,7 +441,7 @@
   "entrypoints": [
     "static/js/vendors-react.a09f50fb.js",
     "static/js/5183.ac2ca737.js",
-    "static/css/main.3f1519bf.css",
-    "static/js/main.d44eb427.js"
+    "static/css/main.4aded231.css",
+    "static/js/main.c62e9700.js"
   ]
 }
diff --git a/index.html b/index.html
@@ -1 +1 @@
-<!doctype html><html xmlns="http://www.w3.org/1999/xhtml"><head><title>uiw react, A high quality UI Toolkit, A Component Library for React 16+.</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="UIW React, A high quality UI Toolkit, A Component Library for React 16+. "><meta name="keywords" content="uiw, uiw-react, uiwjs, react.js, react, component, components, ui, framework, toolkit"><script defer="defer" src="./static/js/vendors-react.a09f50fb.js"></script><script defer="defer" src="./static/js/5183.ac2ca737.js"></script><script defer="defer" src="./static/js/main.d44eb427.js"></script><link href="./static/css/main.3f1519bf.css" rel="stylesheet"></head><body><div id="root"></div></body></html>
+<!doctype html><html xmlns="http://www.w3.org/1999/xhtml"><head><title>uiw react, A high quality UI Toolkit, A Component Library for React 16+.</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="UIW React, A high quality UI Toolkit, A Component Library for React 16+. "><meta name="keywords" content="uiw, uiw-react, uiwjs, react.js, react, component, components, ui, framework, toolkit"><script defer="defer" src="./static/js/vendors-react.a09f50fb.js"></script><script defer="defer" src="./static/js/5183.ac2ca737.js"></script><script defer="defer" src="./static/js/main.c62e9700.js"></script><link href="./static/css/main.4aded231.css" rel="stylesheet"></head><body><div id="root"></div></body></html>
diff --git a/static/css/main.3f1519bf.css.map b/static/css/main.3f1519bf.css.map
diff --git a/static/css/main.3f1519bf.css → static/css/main.4aded231.css b/static/css/main.3f1519bf.css → static/css/main.4aded231.css
diff --git a/static/css/main.4aded231.css.map b/static/css/main.4aded231.css.map
diff --git a/static/js/6659.cfc5b1fb.chunk.js → static/js/6659.6079712c.chunk.js b/static/js/6659.cfc5b1fb.chunk.js → static/js/6659.6079712c.chunk.js
diff --git a/static/js/6659.cfc5b1fb.chunk.js.map → static/js/6659.6079712c.chunk.js.map b/static/js/6659.cfc5b1fb.chunk.js.map → static/js/6659.6079712c.chunk.js.map
diff --git a/static/js/main.d44eb427.js → static/js/main.c62e9700.js b/static/js/main.d44eb427.js → static/js/main.c62e9700.js
diff --git a/static/js/main.c62e9700.js.map b/static/js/main.c62e9700.js.map
diff --git a/static/js/main.d44eb427.js.map b/static/js/main.d44eb427.js.map
diff --git a/uiw.css b/uiw.css
@@ -4627,9 +4627,14 @@ a.w-list-item:hover:not(.w-disabled) {
   text-overflow: ellipsis;
   word-break: keep-all;
 }
-.w-table-has-children {
-  display: flex;
-  align-items: center;
+.w-table-tr-children-center {
+  text-align: center;
+}
+.w-table-tr-children-left {
+  text-align: left;
+}
+.w-table-tr-children-right {
+  text-align: right;
 }
 .w-table-bordered > table tr > th,
 .w-table-bordered > table tr > td,

diff --git a/uiw.js b/uiw.js
@@ -8894,9 +8894,9 @@ function TheadComponent(props) {
           thProps.className = (thProps.className || '') + " " + prefixCls + "-ellipsis";
         }
 
-        return /*#__PURE__*/(0,jsx_runtime.jsx)("th", _extends({
-          onClick: evn => onCellHead(item, colNum, rowNum, evn)
-        }, thProps, {
+        return /*#__PURE__*/(0,jsx_runtime.jsx)("th", _extends({}, thProps, {
+          className: prefixCls + "-tr-children-" + ((item == null ? void 0 : item.align) || 'left') + " " + (className || ''),
+          onClick: evn => onCellHead(item, colNum, rowNum, evn),
           children: titleNode
         }), colNum);
       })
@@ -9059,7 +9059,7 @@ function getAllColumnsKeys(data, keys) {
     if (data[i].children) {
       keys = keys.concat(getAllColumnsKeys(data[i].children || []));
     } else if (data[i].key) {
-      keys.push(data[i].key);
+      keys.push(data[i]);
     }
   }
 
@@ -9120,7 +9120,11 @@ function TableTr(props) {
     indentSize,
     childrenColumnName
   } = props;
+  var [isOpacity, setIsOpacity] = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false);
   var [expandIndex, setExpandIndex] = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)([]);
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(() => {
+    setIsOpacity(!!(data != null && data.find(it => it[childrenColumnName])));
+  }, [data]);
   var IconDom = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(() => {
     return (key, isOpacity) => {
       var flag = expandIndex.includes(key);
@@ -9129,7 +9133,9 @@ function TableTr(props) {
         style: {
           marginRight: 10,
           opacity: isOpacity ? 1 : 0,
-          marginLeft: hierarchy * indentSize
+          marginLeft: hierarchy * indentSize,
+          float: 'left',
+          marginTop: 3.24
         },
         onClick: () => {
           setExpandIndex(flag ? expandIndex.filter(it => it !== key) : [...expandIndex, key]);
@@ -9149,11 +9155,11 @@ function TableTr(props) {
         children: [/*#__PURE__*/(0,jsx_runtime.jsx)("tr", {
           children: keys.map((keyName, colNum) => {
             var objs = {
-              children: trData[keyName]
+              children: trData[keyName.key]
             };
 
-            if (render[keyName]) {
-              var child = render[keyName](trData[keyName], keyName, trData, rowNum, colNum);
+            if (render[keyName.key]) {
+              var child = render[keyName.key](trData[keyName.key], keyName.key, trData, rowNum, colNum);
 
               if ( /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().isValidElement(child)) {
                 objs.children = child;
@@ -9171,25 +9177,30 @@ function TableTr(props) {
               }
             }
 
-            if (ellipsis && ellipsis[keyName]) {
+            if (ellipsis && ellipsis[keyName.key]) {
               objs.className = prefixCls + "-ellipsis";
             }
 
             var isHasChildren = Array.isArray(trData[childrenColumnName]);
 
-            if (colNum === 0 && (hierarchy || isHasChildren)) {
-              objs.className = objs.className + " " + prefixCls + "-has-children";
+            if (colNum === 0 && (isOpacity || hierarchy || isHasChildren)) {
               objs.children = /*#__PURE__*/(0,jsx_runtime.jsxs)(jsx_runtime.Fragment, {
-                children: [IconDom(key, isHasChildren), objs.children]
+                children: [IconDom(key, isHasChildren), /*#__PURE__*/(0,jsx_runtime.jsx)("span", {
+                  style: {
+                    paddingLeft: hierarchy * indentSize
+                  }
+                }), objs.children]
               });
             }
 
             return /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.createElement)("td", _extends({}, objs, {
-              key: colNum,
+              key: colNum // style={keyName?.style}
+              ,
+              className: objs.className + " " + prefixCls + "-tr-children-" + ((keyName == null ? void 0 : keyName.align) || 'left') + "  " + (keyName.className || ''),
               onClick: evn => onCell(trData, {
                 rowNum,
                 colNum,
-                keyName
+                keyName: keyName.key
               }, evn)
             }));
           })
@@ -9294,7 +9305,10 @@ function Table(props) {
     var selfColumns = [];
 
     if (expandable != null && expandable.expandedRowRender) {
-      keys = ['uiw-expanded', ...keys];
+      keys = [{
+        key: 'uiw-expanded',
+        align: 'center'
+      }, ...keys];
       selfColumns = [{
         title: '',
         key: 'uiw-expanded',

diff --git a/uiw.min.css b/uiw.min.css
diff --git a/uiw.min.js b/uiw.min.js