@innoways/drip-form-theme-antd 6.0.0 → 6.1.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Change Log
 
+## 6.1.1
+
+### Patch Changes
+
+- modified tree table styles
+- Updated dependencies
+  - @innoways/hooks@6.1.1
+  - @innoways/utils@6.1.1
+
+## 6.1.0
+
+### Minor Changes
+
+- Added tree table feature
+
+### Patch Changes
+
+- Updated dependencies
+  - @innoways/hooks@6.1.0
+  - @innoways/utils@6.1.0
+
 ## 6.0.0
 
 ### Major Changes

package/dist/index.css

@@ -16,6 +16,20 @@
   font-size: 12px;
   color: rgb(0 0, 0);
 }
+.drip_table_field_tree .ant-table {
+  background: transparent;
+}
+.drip_table_field_tree .ant-table-cell {
+  border: none;
+  background: transparent;
+}
+.drip_table_field_tree .ant-table-thead > tr > th {
+  background: transparent;
+}
+.drip_table_field_tree .ant-table-row:hover > td,
+.drip_table_field_tree .ant-table-cell-row-hover {
+  background: none !important;
+}
 
 .drip-form--colorpicker {
   display: flex;

package/dist/index.js

@@ -23498,12 +23498,21 @@ var config$1 = {
   },
   propertyConfig: {
     styleSchema: [{
+      fieldKey: 'searchVisible',
+      type: 'boolean',
+      title: 'Is search visible',
+      "default": true,
+      ui: {
+        type: 'switch'
+      }
+    }, {
       fieldKey: 'advanceSearch',
       type: 'boolean',
       title: 'Advance Search',
       "default": false,
       ui: {
-        type: 'switch'
+        type: 'switch',
+        vcontrol: 'return props.formData.ui.searchVisible === true'
       }
     }, {
       type: 'string',
@@ -23670,6 +23679,44 @@ var config$1 = {
         vcontrol: 'return props.formData.ui.optionData === "dynamicData"'
       },
       fieldKey: 'primaryColumnId'
+    }, {
+      type: 'string',
+      title: 'Table Mode',
+      "default": 'normal',
+      ui: {
+        type: 'radio',
+        vcontrol: 'return props.formData.ui.optionData === "dynamicData"',
+        options: [{
+          value: 'normal',
+          label: 'Normal'
+        }, {
+          value: 'tree',
+          label: 'Tree'
+        }]
+      },
+      fieldKey: 'tableMode'
+    }, {
+      type: 'string',
+      title: 'Child key name',
+      "default": 'children',
+      ui: {
+        type: 'text',
+        theme: 'antd',
+        placeholder: 'child key name',
+        vcontrol: 'return props.formData.ui.optionData === "dynamicData" && props.formData.ui.tableMode === "tree"'
+      },
+      fieldKey: 'childrenColumnName'
+    }, {
+      type: 'string',
+      title: 'Child Primary Key',
+      "default": '',
+      ui: {
+        type: 'text',
+        theme: 'antd',
+        placeholder: 'child primary key',
+        vcontrol: 'return props.formData.ui.optionData === "dynamicData"'
+      },
+      fieldKey: 'childPrimaryKey'
     }, {
       type: 'array',
       title: 'Columns & Value Key',
@@ -23791,7 +23838,7 @@ var config$1 = {
   }
 };
 
-var _excluded$2 = ["disabled", "onChange", "fieldData", "fieldKey", "dispatch", "style", "asyncValidate", "getKey", "columns", "columnsDataIndex", "values", "formMode", "optionData", "pagination", "amountOfDataPerPage", "url", "method", "jsonkey", "headers", "showAdd", "showEdit", "showDelete", "primaryColumnId"];
+var _excluded$2 = ["disabled", "onChange", "fieldData", "fieldKey", "dispatch", "style", "asyncValidate", "getKey", "columns", "columnsDataIndex", "values", "formMode", "optionData", "pagination", "amountOfDataPerPage", "url", "method", "jsonkey", "headers", "showAdd", "showEdit", "showDelete", "primaryColumnId", "childrenColumnName", "childPrimaryKey", "tableMode", "searchVisible"];
 
 function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -23833,7 +23880,15 @@ var TableField = function TableField(_ref) {
       _ref$showDelete = _ref.showDelete,
       showDelete = _ref$showDelete === void 0 ? true : _ref$showDelete,
       _ref$primaryColumnId = _ref.primaryColumnId,
-      primaryColumnId = _ref$primaryColumnId === void 0 ? '' : _ref$primaryColumnId,
+      primaryColumnId = _ref$primaryColumnId === void 0 ? 'key' : _ref$primaryColumnId,
+      _ref$childrenColumnNa = _ref.childrenColumnName,
+      childrenColumnName = _ref$childrenColumnNa === void 0 ? 'children' : _ref$childrenColumnNa,
+      _ref$childPrimaryKey = _ref.childPrimaryKey,
+      childPrimaryKey = _ref$childPrimaryKey === void 0 ? '' : _ref$childPrimaryKey,
+      _ref$tableMode = _ref.tableMode,
+      tableMode = _ref$tableMode === void 0 ? 'normal' : _ref$tableMode,
+      _ref$searchVisible = _ref.searchVisible,
+      searchVisible = _ref$searchVisible === void 0 ? true : _ref$searchVisible,
       restProps = _objectWithoutProperties(_ref, _excluded$2);
 
   var _useState = useState([]),
@@ -23846,6 +23901,16 @@ var TableField = function TableField(_ref) {
       openModal = _useState4[0],
       setOpenModal = _useState4[1];
 
+  var _React$useState = React.useState([]),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      expandedRowKeys = _React$useState2[0],
+      setExpandedRowKeys = _React$useState2[1];
+
+  var _React$useState3 = React.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      loading = _React$useState4[0],
+      setLoading = _React$useState4[1];
+
   useField({
     fieldKey: fieldKey,
     onChange: onChange,
@@ -23895,16 +23960,17 @@ var TableField = function TableField(_ref) {
       preparedColumns = columnsDataIndex.filter(function (item) {
         return !!(item !== null && item !== void 0 && item.column);
       }).map(function (column, i) {
-        return {
+        return _objectSpread$1({
           title: (column === null || column === void 0 ? void 0 : column.column) || '',
           dataIndex: (column === null || column === void 0 ? void 0 : column.dataIndex) || i,
-          key: (column === null || column === void 0 ? void 0 : column.dataIndex) || i,
+          key: (column === null || column === void 0 ? void 0 : column.dataIndex) || i
+        }, tableMode !== 'tree' ? {
           sorter: function sorter(a, b) {
             var _a$column$dataIndex;
 
             return (_a$column$dataIndex = a[column === null || column === void 0 ? void 0 : column.dataIndex]) === null || _a$column$dataIndex === void 0 ? void 0 : _a$column$dataIndex.localeCompare(b[column === null || column === void 0 ? void 0 : column.dataIndex]);
           }
-        };
+        } : {});
       });
 
       if (preparedColumns.length && (showEdit || showDelete)) {
@@ -23951,6 +24017,22 @@ var TableField = function TableField(_ref) {
     });
   };
 
+  var setChildPrimaryKey = function setChildPrimaryKey(record, parentIndex) {
+    var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+
+    if (Array.isArray(record[childrenColumnName]) && record[childrenColumnName].length) {
+      record[childrenColumnName] = record[childrenColumnName].map(function (item, index) {
+        var _objectSpread2;
+
+        var childPrimaryvalue = setChildPrimaryKey(item, level + 1, index)[childPrimaryKey];
+        return _objectSpread$1(_objectSpread$1({}, item), {}, (_objectSpread2 = {}, _defineProperty(_objectSpread2, primaryColumnId, childPrimaryKey && childPrimaryvalue ? childPrimaryvalue : ''), _defineProperty(_objectSpread2, "".concat(primaryColumnId, "_unique"), "".concat(parentIndex).concat(level, ".").concat(index + 1)), _objectSpread2));
+      });
+    }
+
+    record["".concat(primaryColumnId, "_unique")] = "".concat(level, ".").concat(parentIndex + 1);
+    return record;
+  };
+
   useEffect(function () {
     if (optionData === 'staticData' && formMode !== 'generator' && Array.isArray(values) && values.length && Array.isArray(columns) && columns.filter(function (item) {
       return !!item;
@@ -23982,14 +24064,32 @@ var TableField = function TableField(_ref) {
         headers: configHeaders,
         jsonkey: jsonkey
       };
+      setLoading(true);
       fetchFnJsonKey({
         config: config,
-        dataSetter: setDynamicValues
+        dataSetter: function dataSetter(data) {
+          if (Array.isArray(data) && tableMode === 'tree') {
+            var ids = data.filter(function (md) {
+              return md[childrenColumnName];
+            }).map(function (md) {
+              return md[primaryColumnId];
+            });
+            setExpandedRowKeys(ids);
+            setDynamicValues(data.map(function (item, index) {
+              return setChildPrimaryKey(item, index);
+            }));
+          } else {
+            setDynamicValues(data);
+          }
+        },
+        doFinally: function doFinally() {
+          setLoading(false);
+        }
       });
     } else if (optionData === 'dynamicData') {
       setDynamicValues([]);
     }
-  }, [optionData, formMode, url, columns, values, method, jsonkey]);
+  }, [optionData, formMode, url, columns, values, method, jsonkey, tableMode]);
 
   var handleAdd = function handleAdd() {
     if (restProps !== null && restProps !== void 0 && restProps.addApiUrl && isValidHttpUrl(restProps.addApiUrl)) {
@@ -24011,7 +24111,7 @@ var TableField = function TableField(_ref) {
       onClick: function onClick() {
         return handleAdd();
       }
-    }, "Add")), restProps !== null && restProps !== void 0 && restProps.advanceSearch ? /*#__PURE__*/React.createElement(_Button, {
+    }, "Add")), searchVisible ? restProps !== null && restProps !== void 0 && restProps.advanceSearch ? /*#__PURE__*/React.createElement(_Button, {
       onClick: function onClick() {
         return setOpenModal(true);
       }
@@ -24020,7 +24120,32 @@ var TableField = function TableField(_ref) {
       style: {
         width: '200px'
       }
-    }));
+    }) : /*#__PURE__*/React.createElement(React.Fragment, null));
+  };
+
+  function getDepth(arr, item) {
+    var depth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+
+    for (var i = 0; i < arr.length; i++) {
+      if (arr[i][primaryColumnId] === item[primaryColumnId] && arr[i]["".concat(primaryColumnId, "_unique")] === item["".concat(primaryColumnId, "_unique")]) {
+        return "".concat(depth).concat(i + 1, ". ");
+      }
+
+      if (arr[i][childrenColumnName] && arr[i][childrenColumnName].length) {
+        var childDepth = getDepth(arr[i][childrenColumnName], item, "".concat(depth).concat(i + 1, "."));
+
+        if (childDepth) {
+          return "".concat(childDepth);
+        }
+      }
+    }
+
+    return ''; // Item not found
+  }
+
+  var renderPrefix = function renderPrefix(record) {
+    var depth = getDepth(dynamicValues, record);
+    return depth;
   };
 
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Modal, {
@@ -24034,11 +24159,26 @@ var TableField = function TableField(_ref) {
       return setOpenModal(false);
     }
   }), renderActions(), /*#__PURE__*/React.createElement(_Table, _extends({
+    className: tableMode === 'tree' ? 'drip_table_field_tree' : '',
     pagination: pagination === 'yes' ? {
       pageSize: Number(amountOfDataPerPage) || 20
     } : false,
+    rowKey: primaryColumnId,
     dataSource: dynamicValues,
     columns: columnSource()
+  }, tableMode === 'tree' ? {
+    expandable: {
+      childrenColumnName: childrenColumnName,
+      expandedRowKeys: expandedRowKeys,
+      expandIcon: function expandIcon(_ref2) {
+        _ref2.expanded;
+            _ref2.onExpand;
+            var record = _ref2.record;
+        return /*#__PURE__*/React.createElement(React.Fragment, null, renderPrefix(record));
+      }
+    }
+  } : {}, {
+    loading: loading
   }, restProps)));
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@innoways/drip-form-theme-antd",
-	"version": "6.0.0",
+	"version": "6.1.1",
 	"author": "JDFED",
 	"description": "drip-form antd主题包",
 	"main": "dist/index.js",
@@ -31,8 +31,8 @@
 	"dependencies": {
 		"@ant-design/icons": "^4.7.0",
 		"@babel/runtime": "^7.10.2",
-		"@innoways/hooks": "^6.0.0",
-		"@innoways/utils": "^6.0.0",
+		"@innoways/hooks": "^6.1.1",
+		"@innoways/utils": "^6.1.1",
 		"moment": "^2.26.0",
 		"react-color": "^2.18.1",
 		"use-immer": "^0.6.0"