linkmore-design 1.1.19-beta.2 → 1.1.19-beta.4

package/es/LmTable/Table.js

@@ -34,7 +34,7 @@ var _useGroupDataSource3 = _interopRequireDefault(require("./hooks/useGroupDataS
 var _useDndItems2 = _interopRequireDefault(require("./hooks/useDndItems"));
 var _HeaderCol = _interopRequireDefault(require("./components/HeaderCol"));
 var _index = require("./common/index");
-var _excluded = ["columns", "dataSource", "autoSize", "rowClick", "onDoubleClick", "checkConfig", "summary", "pagination", "hiddenPage", "loading", "virtual", "sortOpen", "colSortOpen", "resizeable", "customCheck", "components", "rowSelection", "columnsState", "onChange", "filterChange", "tableRowType", "size", "openSheet", "editSheet", "dataChange", "openColGroup", "colGroupTitle", "openRowGroup", "rowGroupTitle", "emptyProps"],
+var _excluded = ["columns", "dataSource", "autoSize", "rowClick", "onDoubleClick", "checkConfig", "summary", "pagination", "hiddenPage", "loading", "virtual", "sortOpen", "colSortOpen", "resizeable", "customCheck", "components", "rowSelection", "columnsState", "onChange", "filterChange", "tableRowType", "size", "openSheet", "editSheet", "dataChange", "openColGroup", "colGroupTitle", "openRowGroup", "rowGroupTitle", "groupWidth", "emptyProps"],
   _excluded2 = ["className", "style"],
   _excluded3 = ["onResize", "width", "dataIndex", "onResizeStop"];
 var Summary = _proTable.default.Summary;
@@ -108,6 +108,7 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     colGroupTitle = props.colGroupTitle,
     openRowGroup = props.openRowGroup,
     rowGroupTitle = props.rowGroupTitle,
+    groupWidth = props.groupWidth,
     emptyProps = props.emptyProps,
     resetProps = (0, _objectWithoutProperties2.default)(props, _excluded);
   var _resetProps$rowKey = resetProps.rowKey,
@@ -175,7 +176,6 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }),
     _useGroupDataSource2 = (0, _slicedToArray2.default)(_useGroupDataSource, 1),
     groupDataSource = _useGroupDataSource2[0];
-
   /** 列分组 */
   var _useMemo = (0, _react.useMemo)(function () {
       if (!(groupColKeys === null || groupColKeys === void 0 ? void 0 : groupColKeys.length)) {
@@ -912,7 +912,8 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         title: '分组',
         dataIndex: '_group',
         key: '_group',
-        width: 100
+        width: groupWidth || 100,
+        fixed: true
       }].concat((0, _toConsumableArray2.default)(innerColumns));
     }
     return sortOpen ? [sortDefaultColumnItem].concat((0, _toConsumableArray2.default)(innerColumns)) : innerColumns;
@@ -1290,7 +1291,9 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 /** 1: 使用scroll.x y 来控制宽高 默认都是100% */
 var ResizeSize = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$autoSizer = props.autoSizer,
-    autoSizer = _props$autoSizer === void 0 ? false : _props$autoSizer;
+    autoSizer = _props$autoSizer === void 0 ? false : _props$autoSizer,
+    openRowGroup = props.openRowGroup,
+    openColGroup = props.openColGroup;
   var _useState21 = (0, _react.useState)({
       width: '100%',
       height: '100%'
@@ -1320,6 +1323,9 @@ var ResizeSize = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }
   var resetHeight = (0, _react.useMemo)(function () {
     var height = tableSize.height;
+    if (typeof height === 'string') {
+      return height;
+    }
     // 头部高度
     var h = height - (props.size === 'middle' ? 47 : 40);
     if (!props.hiddenPage || props.customCheck) {
@@ -1330,6 +1336,9 @@ var ResizeSize = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     })) {
       h -= 32;
     }
+    if (openRowGroup || openColGroup) {
+      h -= 100;
+    }
     return h;
   }, [props.hiddenPage, props.customCheck, props.columns, tableSize]);
   var throttleSize = (0, _react.useCallback)(function () {

package/es/LmTable/components/DndContainer.js

@@ -171,6 +171,9 @@ export default function DndContainer(_ref2) {
     _useState2 = _slicedToArray(_useState, 2),
     items = _useState2[0],
     setItems = _useState2[1];
+  useEffect(function () {
+    setItems(initialItems);
+  }, [initialItems]);
   var _useState3 = useState(Object.keys(items)),
     _useState4 = _slicedToArray(_useState3, 2),
     containers = _useState4[0],

package/es/LmTable/hooks/useDndItems.js

@@ -69,9 +69,6 @@ function useDndItems(props) {
     _useState2 = _slicedToArray(_useState, 2),
     dndColumns = _useState2[0],
     setDndColumns = _useState2[1];
-  useEffect(function () {
-    setDndColumns(columns);
-  }, [columns]);
   var _useState3 = useState([]),
     _useState4 = _slicedToArray(_useState3, 2),
     groupRowKeys = _useState4[0],
@@ -100,6 +97,10 @@ function useDndItems(props) {
     _useState8 = _slicedToArray(_useState7, 2),
     items = _useState8[0],
     setItems = _useState8[1];
+  useEffect(function () {
+    setDndColumns(columns);
+    setItems(defaultItems);
+  }, [columns]);
   // 更新
   var updateItems = function updateItems(value, resume) {
     if (resume) {

package/es/LmTable/style/variables.css

@@ -60,8 +60,7 @@
 .z_container .ant-table-wrapper,
 .z_container .ant-spin-nested-loading,
 .z_container .ant-spin-container,
-.z_container .ant-table-container,
-.z_container .ant-table-body {
+.z_container .ant-table-container {
   height: 100%;
 }
 .z_container .ant-card-body,
@@ -358,8 +357,7 @@
 #lm_protable_warp .ant-table-wrapper,
 #lm_protable_warp .ant-spin-nested-loading,
 #lm_protable_warp .ant-spin-container,
-#lm_protable_warp .ant-table-container,
-#lm_protable_warp .ant-table-body {
+#lm_protable_warp .ant-table-container {
   height: 100%;
 }
 #lm_protable_warp .ant-card-body,

package/es/LmTable/testDemos/group.js

@@ -0,0 +1,115 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _linkmoreDesign = require("linkmore-design");
+var createDataSource = function createDataSource(start) {
+  var arr = [];
+  for (var i = start; i < start + 30000; i += 1) {
+    var obj = {
+      key: "key_".concat(i),
+      name: "\u5C0F\u9EC4_".concat(i),
+      id: "id_".concat(i),
+      age: "87",
+      address: "\u676D\u5DDE_".concat(i),
+      height: i,
+      favorite2: "\u7BEE\u7403_".concat(i),
+      favorite: "\u8DB3\u7403_".concat(i),
+      sex: i % 3 === 0 ? '男' : '女'
+    };
+    arr.push(obj);
+  }
+  return arr;
+};
+var columns = [{
+  title: '姓名',
+  dataIndex: 'name',
+  key: 'name',
+  width: 100
+}, {
+  title: '爱好',
+  dataIndex: 'favorite',
+  key: 'favorite',
+  width: 100
+}, {
+  title: '爱好2',
+  dataIndex: 'favorite2',
+  key: 'favorite2',
+  width: 100
+}, {
+  title: '年龄',
+  dataIndex: 'age',
+  key: 'age',
+  etype: 'number',
+  width: 100
+}, {
+  title: '薪水',
+  dataIndex: 'height',
+  key: 'height',
+  etype: 'number',
+  width: 100,
+  expression: 'sum'
+}, {
+  title: '住址',
+  dataIndex: 'address',
+  key: 'address',
+  width: 100
+}];
+var App = function App() {
+  var _useState = (0, _react.useState)([]),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    dataSource = _useState2[0],
+    setDataSource = _useState2[1];
+  (0, _react.useEffect)(function () {
+    setTimeout(function () {
+      if (dataSource.length >= 500) {
+        return;
+      }
+      var data = createDataSource(dataSource.length);
+      setDataSource([].concat((0, _toConsumableArray2.default)(dataSource), (0, _toConsumableArray2.default)(data)));
+    }, 500);
+  }, [dataSource]);
+  var dataChange = function dataChange(newDataSource) {
+    setDataSource((0, _toConsumableArray2.default)(newDataSource));
+  };
+  var config = {
+    pagination: false,
+    scroll: {
+      y: 300
+    },
+    virtual: true,
+    hiddenPage: true
+  };
+  return /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Space, {
+    direction: "vertical",
+    style: {
+      width: '100%'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", null, "\u6570\u636E\u603B\u6570\uFF1A ", dataSource.length), /*#__PURE__*/_react.default.createElement(_linkmoreDesign.LmTable, (0, _extends2.default)({}, config, {
+    dataSource: dataSource,
+    columns: columns
+    // 表格行 key 的取值，可以是字符串或一个函数
+    ,
+    rowKey: "key",
+    size: "small",
+    dataChange: dataChange,
+    resizeable: true // 表头列宽度是否可拖动
+    ,
+    openRowGroup: true // 开启行分组
+    ,
+    rowGroupTitle: "\u884C\u5206\u7EC4\u6807\u9898",
+    openColGroup: true // 开启列分组
+    ,
+    colGroupTitle: "\u5217\u5206\u7EC4\u6807\u9898"
+  })));
+};
+var _default = App;
+exports.default = _default;

package/es/styles/variables.css

@@ -10655,8 +10655,7 @@ p {
 .z_container .ant-table-wrapper,
 .z_container .ant-spin-nested-loading,
 .z_container .ant-spin-container,
-.z_container .ant-table-container,
-.z_container .ant-table-body {
+.z_container .ant-table-container {
   height: 100%;
 }
 .z_container .ant-card-body,
@@ -10953,8 +10952,7 @@ p {
 #lm_protable_warp .ant-table-wrapper,
 #lm_protable_warp .ant-spin-nested-loading,
 #lm_protable_warp .ant-spin-container,
-#lm_protable_warp .ant-table-container,
-#lm_protable_warp .ant-table-body {
+#lm_protable_warp .ant-table-container {
   height: 100%;
 }
 #lm_protable_warp .ant-card-body,

package/lib/LmTable/Table.js

@@ -34,7 +34,7 @@ var _useGroupDataSource3 = _interopRequireDefault(require("./hooks/useGroupDataS
 var _useDndItems2 = _interopRequireDefault(require("./hooks/useDndItems"));
 var _HeaderCol = _interopRequireDefault(require("./components/HeaderCol"));
 var _index = require("./common/index");
-var _excluded = ["columns", "dataSource", "autoSize", "rowClick", "onDoubleClick", "checkConfig", "summary", "pagination", "hiddenPage", "loading", "virtual", "sortOpen", "colSortOpen", "resizeable", "customCheck", "components", "rowSelection", "columnsState", "onChange", "filterChange", "tableRowType", "size", "openSheet", "editSheet", "dataChange", "openColGroup", "colGroupTitle", "openRowGroup", "rowGroupTitle", "emptyProps"],
+var _excluded = ["columns", "dataSource", "autoSize", "rowClick", "onDoubleClick", "checkConfig", "summary", "pagination", "hiddenPage", "loading", "virtual", "sortOpen", "colSortOpen", "resizeable", "customCheck", "components", "rowSelection", "columnsState", "onChange", "filterChange", "tableRowType", "size", "openSheet", "editSheet", "dataChange", "openColGroup", "colGroupTitle", "openRowGroup", "rowGroupTitle", "groupWidth", "emptyProps"],
   _excluded2 = ["className", "style"],
   _excluded3 = ["onResize", "width", "dataIndex", "onResizeStop"];
 var Summary = _proTable.default.Summary;
@@ -108,6 +108,7 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     colGroupTitle = props.colGroupTitle,
     openRowGroup = props.openRowGroup,
     rowGroupTitle = props.rowGroupTitle,
+    groupWidth = props.groupWidth,
     emptyProps = props.emptyProps,
     resetProps = (0, _objectWithoutProperties2.default)(props, _excluded);
   var _resetProps$rowKey = resetProps.rowKey,
@@ -175,7 +176,6 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }),
     _useGroupDataSource2 = (0, _slicedToArray2.default)(_useGroupDataSource, 1),
     groupDataSource = _useGroupDataSource2[0];
-
   /** 列分组 */
   var _useMemo = (0, _react.useMemo)(function () {
       if (!(groupColKeys === null || groupColKeys === void 0 ? void 0 : groupColKeys.length)) {
@@ -912,7 +912,8 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         title: '分组',
         dataIndex: '_group',
         key: '_group',
-        width: 100
+        width: groupWidth || 100,
+        fixed: true
       }].concat((0, _toConsumableArray2.default)(innerColumns));
     }
     return sortOpen ? [sortDefaultColumnItem].concat((0, _toConsumableArray2.default)(innerColumns)) : innerColumns;
@@ -1290,7 +1291,9 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 /** 1: 使用scroll.x y 来控制宽高 默认都是100% */
 var ResizeSize = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$autoSizer = props.autoSizer,
-    autoSizer = _props$autoSizer === void 0 ? false : _props$autoSizer;
+    autoSizer = _props$autoSizer === void 0 ? false : _props$autoSizer,
+    openRowGroup = props.openRowGroup,
+    openColGroup = props.openColGroup;
   var _useState21 = (0, _react.useState)({
       width: '100%',
       height: '100%'
@@ -1320,6 +1323,9 @@ var ResizeSize = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }
   var resetHeight = (0, _react.useMemo)(function () {
     var height = tableSize.height;
+    if (typeof height === 'string') {
+      return height;
+    }
     // 头部高度
     var h = height - (props.size === 'middle' ? 47 : 40);
     if (!props.hiddenPage || props.customCheck) {
@@ -1330,6 +1336,9 @@ var ResizeSize = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     })) {
       h -= 32;
     }
+    if (openRowGroup || openColGroup) {
+      h -= 100;
+    }
     return h;
   }, [props.hiddenPage, props.customCheck, props.columns, tableSize]);
   var throttleSize = (0, _react.useCallback)(function () {

package/lib/LmTable/components/DndContainer.js

@@ -177,6 +177,9 @@ function DndContainer(_ref2) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     items = _useState2[0],
     setItems = _useState2[1];
+  (0, _react.useEffect)(function () {
+    setItems(initialItems);
+  }, [initialItems]);
   var _useState3 = (0, _react.useState)(Object.keys(items)),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     containers = _useState4[0],

package/lib/LmTable/hooks/useDndItems.js

@@ -76,9 +76,6 @@ function useDndItems(props) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     dndColumns = _useState2[0],
     setDndColumns = _useState2[1];
-  (0, _react.useEffect)(function () {
-    setDndColumns(columns);
-  }, [columns]);
   var _useState3 = (0, _react.useState)([]),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     groupRowKeys = _useState4[0],
@@ -107,6 +104,10 @@ function useDndItems(props) {
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
     items = _useState8[0],
     setItems = _useState8[1];
+  (0, _react.useEffect)(function () {
+    setDndColumns(columns);
+    setItems(defaultItems);
+  }, [columns]);
   // 更新
   var updateItems = function updateItems(value, resume) {
     if (resume) {

package/lib/LmTable/style/variables.css

@@ -60,8 +60,7 @@
 .z_container .ant-table-wrapper,
 .z_container .ant-spin-nested-loading,
 .z_container .ant-spin-container,
-.z_container .ant-table-container,
-.z_container .ant-table-body {
+.z_container .ant-table-container {
   height: 100%;
 }
 .z_container .ant-card-body,
@@ -358,8 +357,7 @@
 #lm_protable_warp .ant-table-wrapper,
 #lm_protable_warp .ant-spin-nested-loading,
 #lm_protable_warp .ant-spin-container,
-#lm_protable_warp .ant-table-container,
-#lm_protable_warp .ant-table-body {
+#lm_protable_warp .ant-table-container {
   height: 100%;
 }
 #lm_protable_warp .ant-card-body,

package/lib/LmTable/testDemos/group.js

@@ -0,0 +1,115 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _linkmoreDesign = require("linkmore-design");
+var createDataSource = function createDataSource(start) {
+  var arr = [];
+  for (var i = start; i < start + 30000; i += 1) {
+    var obj = {
+      key: "key_".concat(i),
+      name: "\u5C0F\u9EC4_".concat(i),
+      id: "id_".concat(i),
+      age: "87",
+      address: "\u676D\u5DDE_".concat(i),
+      height: i,
+      favorite2: "\u7BEE\u7403_".concat(i),
+      favorite: "\u8DB3\u7403_".concat(i),
+      sex: i % 3 === 0 ? '男' : '女'
+    };
+    arr.push(obj);
+  }
+  return arr;
+};
+var columns = [{
+  title: '姓名',
+  dataIndex: 'name',
+  key: 'name',
+  width: 100
+}, {
+  title: '爱好',
+  dataIndex: 'favorite',
+  key: 'favorite',
+  width: 100
+}, {
+  title: '爱好2',
+  dataIndex: 'favorite2',
+  key: 'favorite2',
+  width: 100
+}, {
+  title: '年龄',
+  dataIndex: 'age',
+  key: 'age',
+  etype: 'number',
+  width: 100
+}, {
+  title: '薪水',
+  dataIndex: 'height',
+  key: 'height',
+  etype: 'number',
+  width: 100,
+  expression: 'sum'
+}, {
+  title: '住址',
+  dataIndex: 'address',
+  key: 'address',
+  width: 100
+}];
+var App = function App() {
+  var _useState = (0, _react.useState)([]),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    dataSource = _useState2[0],
+    setDataSource = _useState2[1];
+  (0, _react.useEffect)(function () {
+    setTimeout(function () {
+      if (dataSource.length >= 500) {
+        return;
+      }
+      var data = createDataSource(dataSource.length);
+      setDataSource([].concat((0, _toConsumableArray2.default)(dataSource), (0, _toConsumableArray2.default)(data)));
+    }, 500);
+  }, [dataSource]);
+  var dataChange = function dataChange(newDataSource) {
+    setDataSource((0, _toConsumableArray2.default)(newDataSource));
+  };
+  var config = {
+    pagination: false,
+    scroll: {
+      y: 300
+    },
+    virtual: true,
+    hiddenPage: true
+  };
+  return /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Space, {
+    direction: "vertical",
+    style: {
+      width: '100%'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", null, "\u6570\u636E\u603B\u6570\uFF1A ", dataSource.length), /*#__PURE__*/_react.default.createElement(_linkmoreDesign.LmTable, (0, _extends2.default)({}, config, {
+    dataSource: dataSource,
+    columns: columns
+    // 表格行 key 的取值，可以是字符串或一个函数
+    ,
+    rowKey: "key",
+    size: "small",
+    dataChange: dataChange,
+    resizeable: true // 表头列宽度是否可拖动
+    ,
+    openRowGroup: true // 开启行分组
+    ,
+    rowGroupTitle: "\u884C\u5206\u7EC4\u6807\u9898",
+    openColGroup: true // 开启列分组
+    ,
+    colGroupTitle: "\u5217\u5206\u7EC4\u6807\u9898"
+  })));
+};
+var _default = App;
+exports.default = _default;

package/lib/styles/variables.css

@@ -10655,8 +10655,7 @@ p {
 .z_container .ant-table-wrapper,
 .z_container .ant-spin-nested-loading,
 .z_container .ant-spin-container,
-.z_container .ant-table-container,
-.z_container .ant-table-body {
+.z_container .ant-table-container {
   height: 100%;
 }
 .z_container .ant-card-body,
@@ -10953,8 +10952,7 @@ p {
 #lm_protable_warp .ant-table-wrapper,
 #lm_protable_warp .ant-spin-nested-loading,
 #lm_protable_warp .ant-spin-container,
-#lm_protable_warp .ant-table-container,
-#lm_protable_warp .ant-table-body {
+#lm_protable_warp .ant-table-container {
   height: 100%;
 }
 #lm_protable_warp .ant-card-body,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linkmore-design",
-  "version": "1.1.19-beta.2",
+  "version": "1.1.19-beta.4",
   "author": {
     "name": "nowthen",
     "email": "rnlvwyx@gmail.com"
@@ -73,8 +73,6 @@
     "antd-img-crop": "^4.2.5",
     "axios": "^0.21.0",
     "classnames": "^2.3.1",
-    "conventional-changelog": "^3.1.25",
-    "conventional-changelog-cli": "^2.2.2",
     "dayjs": "^1.9.7",
     "echarts": "^5.4.0",
     "hex-to-rgba": "^2.0.1",
@@ -139,6 +137,8 @@
     "react-copy-to-clipboard": "^5.1.0",
     "stylelint": "^13.8.0",
     "stylelint-config-prettier": "^8.0.2",
-    "stylelint-config-standard": "^20.0.0"
+    "stylelint-config-standard": "^20.0.0",
+    "conventional-changelog": "^3.1.25",
+    "conventional-changelog-cli": "^2.2.2"
   }
 }