ds-web-all 1.0.1-beta.21 → 1.0.1-beta.22

package/lib/components/compose-manage/index.less

@@ -60,8 +60,8 @@
 
   .section-caption {
     display: flex;
-    align-items: center;
-    justify-content: flex-end;
+    flex-direction: row-reverse;
+    justify-content: space-between;
     align-items: center;
     margin: 16px 0;
   }

package/lib/components/compose-manage/vvv.js

@@ -0,0 +1,444 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VList = VList;
+exports.scrollTo = scrollTo;
+var _react = _interopRequireWildcard(require("react"));
+var _lodashEs = require("lodash-es");
+require("./style.css");
+var _excluded = ["children"],
+  _excluded2 = ["children", "style"],
+  _excluded3 = ["children"],
+  _excluded4 = ["style", "children"],
+  _excluded5 = ["width"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /* eslint-disable arrow-body-style */
+// ==============全局常量 ================== //
+var DEFAULT_VID = 'vtable';
+var vidMap = new Map();
+var debounceListRender;
+
+// ===============reducer ============== //
+var initialState = {
+  // 行高度
+  rowHeight: 0,
+  // 当前的scrollTop
+  curScrollTop: 0,
+  // 总行数
+  totalLen: 0
+};
+function reducer(state, action) {
+  var curScrollTop = action.curScrollTop,
+    rowHeight = action.rowHeight,
+    totalLen = action.totalLen,
+    ifScrollTopClear = action.ifScrollTopClear;
+  var stateScrollTop = state.curScrollTop;
+  switch (action.type) {
+    // 改变trs 即 改变渲染的列表trs
+    case 'changeTrs':
+      return _objectSpread(_objectSpread({}, state), {}, {
+        curScrollTop: curScrollTop
+      });
+    // 初始化每行的高度, 表格总高度, 渲染的条数
+    case 'initHeight':
+      return _objectSpread(_objectSpread({}, state), {}, {
+        rowHeight: rowHeight
+      });
+    // 更改totalLen
+    case 'changeTotalLen':
+      if (totalLen === 0) {
+        stateScrollTop = 0;
+      }
+      return _objectSpread(_objectSpread({}, state), {}, {
+        totalLen: totalLen,
+        curScrollTop: stateScrollTop
+      });
+    case 'reset':
+      return _objectSpread(_objectSpread({}, state), {}, {
+        curScrollTop: ifScrollTopClear ? 0 : state.curScrollTop
+      });
+    default:
+      throw new Error();
+  }
+}
+
+// ===============context ============== //
+var ScrollContext = /*#__PURE__*/(0, _react.createContext)({
+  dispatch: undefined,
+  renderLen: 1,
+  start: 0,
+  offsetStart: 0,
+  // =============
+  rowHeight: initialState.rowHeight,
+  totalLen: 0,
+  vid: DEFAULT_VID
+});
+
+// =============组件 =================== //
+
+function VCell(props) {
+  var children = props.children,
+    restProps = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/_react.default.createElement("td", restProps, /*#__PURE__*/_react.default.createElement("div", null, children));
+}
+function VRow(props, ref) {
+  var _useContext = (0, _react.useContext)(ScrollContext),
+    dispatch = _useContext.dispatch,
+    rowHeight = _useContext.rowHeight,
+    totalLen = _useContext.totalLen,
+    vid = _useContext.vid;
+  var children = props.children,
+    style = props.style,
+    restProps = _objectWithoutProperties(props, _excluded2);
+  var trRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    var initHeight = function initHeight(tempRef) {
+      var _tempRef$current;
+      if ((tempRef === null || tempRef === void 0 ? void 0 : (_tempRef$current = tempRef.current) === null || _tempRef$current === void 0 ? void 0 : _tempRef$current.offsetHeight) && !rowHeight && totalLen) {
+        var _tempRef$current$offs, _tempRef$current2;
+        var tempRowHeight = (_tempRef$current$offs = tempRef === null || tempRef === void 0 ? void 0 : (_tempRef$current2 = tempRef.current) === null || _tempRef$current2 === void 0 ? void 0 : _tempRef$current2.offsetHeight) !== null && _tempRef$current$offs !== void 0 ? _tempRef$current$offs : 0;
+        vidMap.set(vid, _objectSpread(_objectSpread({}, vidMap.get(vid)), {}, {
+          rowItemHeight: tempRowHeight
+        }));
+        dispatch({
+          type: 'initHeight',
+          rowHeight: tempRowHeight
+        });
+      }
+    };
+    initHeight(Object.prototype.hasOwnProperty.call(ref, 'current') ? ref : trRef);
+  }, [trRef, dispatch, rowHeight, totalLen, ref, vid]);
+  return /*#__PURE__*/_react.default.createElement("tr", _extends({}, restProps, {
+    ref: Object.prototype.hasOwnProperty.call(ref, 'current') ? ref : trRef,
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      height: rowHeight || 'auto',
+      boxSizing: 'border-box'
+    })
+  }), children);
+}
+function VWrapper(props) {
+  var children = props.children,
+    restProps = _objectWithoutProperties(props, _excluded3);
+  var _useContext2 = (0, _react.useContext)(ScrollContext),
+    renderLen = _useContext2.renderLen,
+    start = _useContext2.start,
+    dispatch = _useContext2.dispatch,
+    vid = _useContext2.vid,
+    totalLen = _useContext2.totalLen;
+  var contents = (0, _react.useMemo)(function () {
+    return children[1];
+  }, [children]);
+  var contentsLen = (0, _react.useMemo)(function () {
+    var _contents$length;
+    return (_contents$length = contents === null || contents === void 0 ? void 0 : contents.length) !== null && _contents$length !== void 0 ? _contents$length : 0;
+  }, [contents]);
+  (0, _react.useEffect)(function () {
+    if (totalLen !== contentsLen) {
+      dispatch({
+        type: 'changeTotalLen',
+        totalLen: contentsLen !== null && contentsLen !== void 0 ? contentsLen : 0
+      });
+    }
+  }, [contentsLen, dispatch, vid, totalLen]);
+  var tempNode = null;
+  if (Array.isArray(contents) && contents.length) {
+    tempNode = [children[0], contents.slice(start, start + (renderLen !== null && renderLen !== void 0 ? renderLen : 1)).map(function (item) {
+      if (Array.isArray(item)) {
+        // 兼容antd v4.3.5 --- rc-table 7.8.1及以下
+        return item[0];
+      }
+      // 处理antd ^v4.4.0  --- rc-table ^7.8.2
+      return item;
+    })];
+  } else {
+    tempNode = children;
+  }
+  return /*#__PURE__*/_react.default.createElement("tbody", restProps, tempNode);
+}
+function VTable(props, otherParams) {
+  var _children$1$props$dat, _children$, _children$$props, _children$$props$data, _vidMap$get2;
+  var style = props.style,
+    children = props.children,
+    rest = _objectWithoutProperties(props, _excluded4);
+  var width = style.width,
+    rest_style = _objectWithoutProperties(style, _excluded5);
+  var _ref = otherParams !== null && otherParams !== void 0 ? otherParams : {},
+    vid = _ref.vid,
+    scrollY = _ref.scrollY,
+    reachEnd = _ref.reachEnd,
+    onScroll = _ref.onScroll,
+    resetScrollTopWhenDataChange = _ref.resetScrollTopWhenDataChange;
+  var _useReducer = (0, _react.useReducer)(reducer, initialState),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  var wrap_tableRef = (0, _react.useRef)(null);
+  var tableRef = (0, _react.useRef)(null);
+
+  // 数据的总条数
+  var _useState = (0, _react.useState)((_children$1$props$dat = (_children$ = children[1]) === null || _children$ === void 0 ? void 0 : (_children$$props = _children$.props) === null || _children$$props === void 0 ? void 0 : (_children$$props$data = _children$$props.data) === null || _children$$props$data === void 0 ? void 0 : _children$$props$data.length) !== null && _children$1$props$dat !== void 0 ? _children$1$props$dat : 0),
+    _useState2 = _slicedToArray(_useState, 2),
+    totalLen = _useState2[0],
+    setTotalLen = _useState2[1];
+  (0, _react.useEffect)(function () {
+    setTotalLen(state.totalLen);
+  }, [state.totalLen]);
+
+  // 组件卸载的清除操作
+  (0, _react.useEffect)(function () {
+    return function () {
+      vidMap.delete(vid);
+    };
+  }, [vid]);
+
+  // table总高度
+  var tableHeight = (0, _react.useMemo)(function () {
+    var temp = 'auto';
+    if (state.rowHeight && totalLen) {
+      temp = state.rowHeight * totalLen;
+    }
+    return temp;
+  }, [state.rowHeight, totalLen]);
+
+  // table的scrollY值
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    tableScrollY = _useState4[0],
+    setTableScrollY = _useState4[1];
+
+  // tableScrollY 随scrollY / tableHeight 进行变更
+  (0, _react.useEffect)(function () {
+    var temp = 0;
+    if (typeof scrollY === 'string') {
+      var _offsetHeight, _wrap_tableRef$curren, _wrap_tableRef$curren2;
+      temp = (_offsetHeight = (_wrap_tableRef$curren = wrap_tableRef.current) === null || _wrap_tableRef$curren === void 0 ? void 0 : (_wrap_tableRef$curren2 = _wrap_tableRef$curren.parentNode) === null || _wrap_tableRef$curren2 === void 0 ? void 0 : _wrap_tableRef$curren2.offsetHeight) !== null && _offsetHeight !== void 0 ? _offsetHeight : 0;
+    } else {
+      temp = scrollY;
+    }
+
+    // if (isNumber(tableHeight) && tableHeight < temp) {
+    //   temp = tableHeight;
+    // }
+
+    // 处理tableScrollY <= 0的情况
+    if (temp <= 0) {
+      temp = 0;
+    }
+    setTableScrollY(temp);
+  }, [scrollY, tableHeight]);
+
+  // 渲染的条数
+  var renderLen = (0, _react.useMemo)(function () {
+    var temp = 1;
+    if (state.rowHeight && totalLen && tableScrollY) {
+      if (tableScrollY <= 0) {
+        temp = 0;
+      } else {
+        var tempRenderLen = (tableScrollY / state.rowHeight | 0) + 1 + 2;
+        // console.log('tempRenderLen', tempRenderLen)
+        // temp = tempRenderLen > totalLen ? totalLen : tempRenderLen;
+        temp = tempRenderLen;
+      }
+    }
+    return temp;
+  }, [state.rowHeight, totalLen, tableScrollY]);
+
+  // 渲染中的第一条
+  var start = state.rowHeight ? state.curScrollTop / state.rowHeight | 0 : 0;
+
+  // 偏移量
+  var offsetStart = state.rowHeight ? state.curScrollTop % state.rowHeight : 0;
+
+  // 用来优化向上滚动出现的空白
+  if (state.curScrollTop && state.rowHeight && state.curScrollTop > state.rowHeight) {
+    start -= 1;
+    offsetStart += state.rowHeight;
+  } else {
+    start = 0;
+  }
+
+  // 数据变更 操作scrollTop
+  (0, _react.useEffect)(function () {
+    var _wrap_tableRef$curren3;
+    var scrollNode = (_wrap_tableRef$curren3 = wrap_tableRef.current) === null || _wrap_tableRef$curren3 === void 0 ? void 0 : _wrap_tableRef$curren3.parentNode;
+    if (resetScrollTopWhenDataChange) {
+      // 重置scrollTop
+      if (scrollNode) {
+        scrollNode.scrollTop = 0;
+      }
+      dispatch({
+        type: 'reset',
+        ifScrollTopClear: true
+      });
+    } else {
+      // 不重置scrollTop 不清空curScrollTop
+      dispatch({
+        type: 'reset',
+        ifScrollTopClear: false
+      });
+    }
+    if (vidMap.has(vid)) {
+      vidMap.set(vid, _objectSpread(_objectSpread({}, vidMap.get(vid)), {}, {
+        scrollNode: scrollNode
+      }));
+    }
+  }, [totalLen, resetScrollTopWhenDataChange, vid, children]);
+  (0, _react.useEffect)(function () {
+    var _wrap_tableRef$curren4;
+    var throttleScroll = (0, _lodashEs.throttle)(function (e) {
+      var _vidMap$get, _e$target$scrollTop, _e$target, _e$target$scrollHeigh, _e$target2, _e$target$clientHeigh, _e$target3;
+      var historyScrollHeight = (_vidMap$get = vidMap.get(vid)) === null || _vidMap$get === void 0 ? void 0 : _vidMap$get.scrollHeight;
+      var scrollTop = (_e$target$scrollTop = e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.scrollTop) !== null && _e$target$scrollTop !== void 0 ? _e$target$scrollTop : 0;
+      var scrollHeight = (_e$target$scrollHeigh = e === null || e === void 0 ? void 0 : (_e$target2 = e.target) === null || _e$target2 === void 0 ? void 0 : _e$target2.scrollHeight) !== null && _e$target$scrollHeigh !== void 0 ? _e$target$scrollHeigh : 0;
+      var clientHeight = (_e$target$clientHeigh = e === null || e === void 0 ? void 0 : (_e$target3 = e.target) === null || _e$target3 === void 0 ? void 0 : _e$target3.clientHeight) !== null && _e$target$clientHeigh !== void 0 ? _e$target$clientHeigh : 0;
+
+      // 到底了 没有滚动条就不会触发reachEnd. 建议设置scrolly高度少点或者数据量多点.
+      if (scrollTop === scrollHeight) {
+        // reachEnd && reachEnd()
+      } else if (scrollTop + clientHeight >= scrollHeight && historyScrollHeight !== scrollHeight) {
+        // 相同的tableData情况下, 上次reachEnd执行后, scrollHeight不变, 则不会再次请求reachEnd
+        vidMap.set(vid, _objectSpread(_objectSpread({}, vidMap.get(vid)), {}, {
+          scrollHeight: scrollHeight
+        }));
+        // 有滚动条的情况
+        // eslint-disable-next-line no-unused-expressions
+        reachEnd && reachEnd();
+      }
+
+      // eslint-disable-next-line no-unused-expressions
+      onScroll && onScroll();
+
+      // 若renderLen大于totalLen, 置空curScrollTop. => table paddingTop会置空.
+      dispatch({
+        type: 'changeTrs',
+        curScrollTop: renderLen <= totalLen ? scrollTop : 0,
+        vid: vid
+      });
+    }, 60);
+    var ref = wrap_tableRef === null || wrap_tableRef === void 0 ? void 0 : (_wrap_tableRef$curren4 = wrap_tableRef.current) === null || _wrap_tableRef$curren4 === void 0 ? void 0 : _wrap_tableRef$curren4.parentNode;
+    if (ref) {
+      ref.addEventListener('scroll', throttleScroll);
+    }
+    return function () {
+      ref.removeEventListener('scroll', throttleScroll);
+    };
+  }, [onScroll, reachEnd, renderLen, totalLen, vid]);
+  debounceListRender(start, renderLen);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "virtuallist",
+    ref: wrap_tableRef,
+    style: {
+      width: '100%',
+      position: 'relative',
+      height: tableHeight,
+      boxSizing: 'border-box',
+      paddingTop: state.curScrollTop
+    }
+  }, /*#__PURE__*/_react.default.createElement(ScrollContext.Provider, {
+    value: {
+      dispatch: dispatch,
+      rowHeight: vidMap === null || vidMap === void 0 ? void 0 : (_vidMap$get2 = vidMap.get(vid)) === null || _vidMap$get2 === void 0 ? void 0 : _vidMap$get2.rowItemHeight,
+      start: start,
+      offsetStart: offsetStart,
+      renderLen: renderLen,
+      totalLen: totalLen,
+      vid: vid
+    }
+  }, /*#__PURE__*/_react.default.createElement("table", _extends({}, rest, {
+    ref: tableRef,
+    style: _objectSpread(_objectSpread({}, rest_style), {}, {
+      width: width,
+      position: 'relative',
+      transform: "translateY(-".concat(offsetStart, "px)")
+    })
+  }), children)));
+}
+
+// ================导出===================
+function VList(props) {
+  var _props$vid = props.vid,
+    vid = _props$vid === void 0 ? DEFAULT_VID : _props$vid,
+    height = props.height,
+    onReachEnd = props.onReachEnd,
+    onScroll = props.onScroll,
+    onListRender = props.onListRender,
+    debounceListRenderMS = props.debounceListRenderMS,
+    _props$resetTopWhenDa = props.resetTopWhenDataChange,
+    resetTopWhenDataChange = _props$resetTopWhenDa === void 0 ? true : _props$resetTopWhenDa;
+  var resetScrollTopWhenDataChange = onReachEnd ? false : resetTopWhenDataChange;
+  if (!vidMap.has(vid)) {
+    vidMap.set(vid, {
+      _id: vid
+    });
+  }
+  debounceListRender = onListRender ? (0, _lodashEs.debounce)(function (_start, _renderLen) {
+    onListRender({
+      start: _start,
+      renderLen: _renderLen
+    });
+  }, debounceListRenderMS !== null && debounceListRenderMS !== void 0 ? debounceListRenderMS : 300) : function () {};
+  return {
+    table: function table(p) {
+      return VTable(p, {
+        vid: vid,
+        scrollY: height,
+        reachEnd: onReachEnd,
+        onScroll: onScroll,
+        onListRender: onListRender,
+        resetScrollTopWhenDataChange: resetScrollTopWhenDataChange
+      });
+    },
+    body: {
+      wrapper: VWrapper,
+      row: VRow,
+      cell: VCell
+    }
+  };
+}
+function scrollTo(option) {
+  var row = option.row,
+    y = option.y,
+    _option$vid = option.vid,
+    vid = _option$vid === void 0 ? DEFAULT_VID : _option$vid;
+  try {
+    var _vidMap$get3 = vidMap.get(vid),
+      scrollNode = _vidMap$get3.scrollNode,
+      rowItemHeight = _vidMap$get3.rowItemHeight;
+    if (row) {
+      if (row - 1 > 0) {
+        scrollNode.scrollTop = (row - 1) * (rowItemHeight !== null && rowItemHeight !== void 0 ? rowItemHeight : 0);
+      } else {
+        scrollNode.scrollTop = 0;
+      }
+    } else {
+      scrollNode.scrollTop = y !== null && y !== void 0 ? y : 0;
+    }
+    return {
+      vid: vid,
+      rowItemHeight: rowItemHeight
+    };
+  } catch (e) {
+    console.error('dont call scrollTo before init table');
+    return {
+      vid: vid,
+      rowItemHeight: -1
+    };
+  }
+}

package/lib/components/compose-tree/hooks/use-compose-tree.js

@@ -78,7 +78,8 @@ var _default = exports.default = function _default(_ref2) {
     } : _ref2$requestDataForm,
     _ref2$moduleRoute = _ref2.moduleRoute,
     moduleRoute = _ref2$moduleRoute === void 0 ? '\\*' : _ref2$moduleRoute,
-    dataSourceFormatter = _ref2.dataSourceFormatter;
+    dataSourceFormatter = _ref2.dataSourceFormatter,
+    extraTransparentParams = _ref2.extraTransparentParams;
   var match = (0, _reactRouterDom.useRouteMatch)();
   var history = (0, _reactRouterDom.useHistory)();
   var _useUnmounted = (0, _useUnmounted3.default)(),
@@ -634,7 +635,8 @@ var _default = exports.default = function _default(_ref2) {
     generateUrlByTreePaths: generateUrlByTreePaths,
     isInTree: true,
     firstLoaded: firstLoaded,
-    updateDataSource: updateDataSource
+    updateDataSource: updateDataSource,
+    extraTransparentParams: extraTransparentParams
   };
 };
 var ComposeTreeContext = exports.ComposeTreeContext = /*#__PURE__*/_react.default.createContext(null);

package/lib/components/compose-tree/index.js

@@ -31,7 +31,7 @@ var _blank = require("../blank");
 var _useComposeTree = _interopRequireWildcard(require("./hooks/use-compose-tree"));
 require("./index.less");
 var _excluded = ["onSelect", "onUserSelect", "routerConfig", "treeColWidth", "request", "renderSearchExtra", "groupTypeList", "typeKey", "renderTree"],
-  _excluded2 = ["request", "extendModuleMap", "firstLoadAll", "expandAllTree", "typeKey", "groupTypeList", "requestDataFormatter", "moduleRoute", "dataSourceFormatter"];
+  _excluded2 = ["request", "extendModuleMap", "firstLoadAll", "expandAllTree", "typeKey", "groupTypeList", "requestDataFormatter", "moduleRoute", "dataSourceFormatter", "extraTransparentParams"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -163,6 +163,7 @@ var _default = exports.default = /*#__PURE__*/(0, _react.forwardRef)(function (_
     requestDataFormatter = _ref3.requestDataFormatter,
     moduleRoute = _ref3.moduleRoute,
     dataSourceFormatter = _ref3.dataSourceFormatter,
+    extraTransparentParams = _ref3.extraTransparentParams,
     others = _objectWithoutProperties(_ref3, _excluded2);
   var composeTreeContext = (0, _useComposeTree.default)({
     request: {
@@ -175,7 +176,8 @@ var _default = exports.default = /*#__PURE__*/(0, _react.forwardRef)(function (_
     groupTypeList: groupTypeList,
     requestDataFormatter: requestDataFormatter,
     moduleRoute: moduleRoute,
-    dataSourceFormatter: dataSourceFormatter
+    dataSourceFormatter: dataSourceFormatter,
+    extraTransparentParams: extraTransparentParams
   });
   (0, _react.useImperativeHandle)(ref, function () {
     return {

package/lib/components/splitter/Splitter.js

@@ -41,6 +41,8 @@ var Splitter = function Splitter(_ref) {
     _ref$disabledHideBar = _ref.disabledHideBar,
     disabledHideBar = _ref$disabledHideBar === void 0 ? true : _ref$disabledHideBar,
     className = _ref.className,
+    _ref$sizes = _ref.sizes,
+    sizes = _ref$sizes === void 0 ? [] : _ref$sizes,
     style = _ref.style;
   var splitterRef = (0, _react.useRef)(null);
   var _useRefState = (0, _useRefState3.default)([]),
@@ -50,19 +52,22 @@ var Splitter = function Splitter(_ref) {
     cacheSizesRef = _useRefState2[2];
   var panels = (0, _react.useMemo)(function () {
     return (Array.isArray(children) ? children : [children]).filter(_react.isValidElement).map(function (node, i) {
-      var _props$size;
       var _ref2 = node,
         props = _ref2.props;
-      return _objectSpread(_objectSpread({}, props), {}, {
-        size: (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : cacheSizes[i]
-      });
+      return _objectSpread({}, props);
+    });
+  }, [children]);
+  var propSizes = (0, _react.useMemo)(function () {
+    return panels.map(function (el, i) {
+      var _cacheSizes$i;
+      return (_cacheSizes$i = cacheSizes[i]) !== null && _cacheSizes$i !== void 0 ? _cacheSizes$i : sizes[i];
     });
-  }, [cacheSizes, children]);
+  }, [cacheSizes, sizes, panels]);
   var _useState = (0, _react.useState)(0),
     _useState2 = _slicedToArray(_useState, 2),
     containerSize = _useState2[0],
     setContainerSize = _useState2[1];
-  var _useSizes = (0, _useSize.default)(panels, containerSize),
+  var _useSizes = (0, _useSize.default)(panels, propSizes, containerSize),
     panelSizes = _useSizes.panelSizes;
   (0, _react.useEffect)(function () {
     var observer = new ResizeObserver(function (entries) {
@@ -82,7 +87,8 @@ var Splitter = function Splitter(_ref) {
   var moveBar = (0, _react.useRef)({
     oldSizePrev: 0,
     oldSizeNext: 0,
-    index: -1
+    index: -1,
+    sizes: []
   });
   var _useMouseMove = (0, _useMouseMove2.default)({
       start: function start(e, i) {
@@ -90,7 +96,8 @@ var Splitter = function Splitter(_ref) {
         moveBar.current = {
           index: i,
           oldSizePrev: panelSizes[i - 1],
-          oldSizeNext: panelSizes[i]
+          oldSizeNext: panelSizes[i],
+          sizes: _toConsumableArray(panelSizes)
         };
         return true;
       },
@@ -108,16 +115,14 @@ var Splitter = function Splitter(_ref) {
       end: function end(_ref4) {
         var changeX = _ref4.changeX,
           changeY = _ref4.changeY;
-        console.log(changeX, changeY);
         if (moveBar.current.index === -1) return;
         var changePt = layout === 'horizontal' ? changeX : changeY;
-        setCacheSizes(function (old) {
-          old[moveBar.current.index - 1] = Math.max(0, Math.min(moveBar.current.oldSizePrev + moveBar.current.oldSizeNext, moveBar.current.oldSizePrev + changePt));
-          old[moveBar.current.index] = Math.max(0, Math.min(moveBar.current.oldSizePrev + moveBar.current.oldSizeNext, moveBar.current.oldSizeNext - changePt));
-          return _toConsumableArray(old);
-        });
+        var old = _toConsumableArray(cacheSizesRef.current);
+        old[moveBar.current.index - 1] = Math.max(0, Math.min(moveBar.current.oldSizePrev + moveBar.current.oldSizeNext, moveBar.current.oldSizePrev + changePt));
+        old[moveBar.current.index] = Math.max(0, Math.min(moveBar.current.oldSizePrev + moveBar.current.oldSizeNext, moveBar.current.oldSizeNext - changePt));
+        onResize === null || onResize === void 0 ? void 0 : onResize(old);
+        setCacheSizes([]);
         moveBar.current.index = -1;
-        onResize === null || onResize === void 0 ? void 0 : onResize(cacheSizesRef.current);
       }
     }),
     _onMouseDown = _useMouseMove.onMouseDown,

package/lib/components/splitter/splitter.less

@@ -10,7 +10,19 @@
     flex: 0 0 0;
     .ss-splitter-bar-dragger {
       position: relative;
-      background-color: #f0f0f0;
+      &::before {
+        display: block;
+        content: '';
+        width: 100%;
+        height: 100%;
+        background-color: #f0f0f0;
+      }
+      &:hover {
+        background-color: var(--ant-primary-2, #e6f7ff);
+        &::before {
+          background-color: transparent;
+        }
+      }
     }
   }
   .ss-splitter-panel {
@@ -23,9 +35,14 @@
       .ss-splitter-bar-dragger {
         cursor: row-resize;
         width: 100%;
-        height: 2px;
-        top: -1px;
+        height: 6px;
+        top: -3px;
+        box-sizing: border-box;
+        padding: 2px 0;
         left: 0;
+        &::before {
+          height: 2px;
+        }
       }
     }
     .ss-splitter-panel {
@@ -39,9 +56,14 @@
       .ss-splitter-bar-dragger {
         cursor: col-resize;
         height: 100%;
-        width: 2px;
-        left: -1px;
+        width: 6px;
+        left: -3px;
+        box-sizing: border-box;
+        padding: 0 2px;
         top: 0;
+        &::before {
+          width: 2px;
+        }
       }
     }
     .ss-splitter-panel {

package/lib/components/splitter/useSize.js

@@ -11,13 +11,8 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } /* eslint-disable no-plusplus */
-var useSizes = function useSizes(panelPropList) {
-  var containerSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-  var propSizes = (0, _react.useMemo)(function () {
-    return panelPropList.map(function (el) {
-      return el.size;
-    });
-  }, [panelPropList]);
+var useSizes = function useSizes(panelPropList, propSizes) {
+  var containerSize = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   var _useState = (0, _react.useState)(function () {
       return panelPropList.map(function (el) {
         return el.defaultSize;

package/lib/components/table/index.js

@@ -30,16 +30,23 @@ var _tooltip = _interopRequireDefault(require("antd/es/tooltip"));
 var _react = _interopRequireWildcard(require("react"));
 var _icons = require("@ant-design/icons");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _virtuallistAntd = require("virtuallist-antd");
 var _loading = _interopRequireDefault(require("../loading"));
 var _comsMap = _interopRequireWildcard(require("./coms-map"));
 var _interface = require("./interface");
 require("./index.less");
 var _excluded = ["columns", "dataSource", "cellClassName", "comsMap", "checkable", "selectedRowKeys", "onSelectAll", "onSelect", "primaryKey", "onPageChange", "onEmit", "scroll", "size", "virtuallistParams", "fixFirstColumn"],
-  _excluded2 = ["name", "label", "width", "uiType", "className", "props", "cell", "render", "help", "fixed", "children"];
+  _excluded2 = ["name", "label", "width", "uiType", "className", "props", "cell", "render", "help", "fixed", "children"],
+  _excluded3 = ["children"],
+  _excluded4 = ["children"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -218,21 +225,119 @@ function CFTable(_ref2) {
       };
     }
   }, [columns]);
-  var VcComponent = (0, _react.useMemo)(function () {
-    if (virtuallistParams) {
-      return (0, _virtuallistAntd.VList)({
-        height: virtuallistParams === null || virtuallistParams === void 0 ? void 0 : virtuallistParams.height,
-        resetTopWhenDataChange: false
-      });
-    }
-  }, [virtuallistParams === null || virtuallistParams === void 0 ? void 0 : virtuallistParams.height]);
   var finalScroll = _objectSpread(_objectSpread({}, _scroll), scroll || {});
+  var scrollTopRef = (0, _react.useRef)(0);
+  var VirtualTableContext = /*#__PURE__*/(0, _react.createContext)({
+    childrenLen: 0,
+    scrollTop: 0,
+    startRowIndex: 0,
+    startOffset: 0,
+    endRowIndex: 0,
+    dispatch: function dispatch(params) {}
+  });
+  var VcComponent = (0, _react.useMemo)(function () {
+    return {
+      table: function table(_ref4) {
+        var tableChildren = _ref4.children,
+          restProps = _objectWithoutProperties(_ref4, _excluded3);
+        var _useState = (0, _react.useState)(0),
+          _useState2 = _slicedToArray(_useState, 2),
+          childrenLen = _useState2[0],
+          setChildrenLen = _useState2[1];
+        var _useState3 = (0, _react.useState)(scrollTopRef.current),
+          _useState4 = _slicedToArray(_useState3, 2),
+          scrollTop = _useState4[0],
+          setScrollTop = _useState4[1];
+        var scrollChildRef = (0, _react.useRef)(null);
+        var _useMemo = (0, _react.useMemo)(function () {
+            var _virtuallistParams$he;
+            var rowHeight = (_virtuallistParams$he = virtuallistParams === null || virtuallistParams === void 0 ? void 0 : virtuallistParams.height) !== null && _virtuallistParams$he !== void 0 ? _virtuallistParams$he : 40;
+            var startRowIndex = Math.floor(scrollTop / rowHeight);
+            var startOffset = scrollTop - startRowIndex * rowHeight;
+            var endRowIndex = Math.ceil((scrollTop + finalScroll.y) / rowHeight);
+            return [startRowIndex, startOffset, endRowIndex];
+          }, [scrollTop, virtuallistParams === null || virtuallistParams === void 0 ? void 0 : virtuallistParams.height, finalScroll.y]),
+          _useMemo2 = _slicedToArray(_useMemo, 3),
+          startRowIndex = _useMemo2[0],
+          startOffset = _useMemo2[1],
+          endRowIndex = _useMemo2[2];
+        var dispatch = function dispatch(_ref5) {
+          var type = _ref5.type,
+            payload = _ref5.payload;
+          switch (type) {
+            case 'childrenLen':
+              setChildrenLen(payload);
+              break;
+            case 'scrollTop':
+              setScrollTop(payload);
+              break;
+          }
+        };
+        var onVirtualScroll = function onVirtualScroll(e) {
+          scrollTopRef.current = e.target.scrollTop;
+          setScrollTop(e.target.scrollTop);
+        };
+        (0, _react.useEffect)(function () {
+          var _scrollChildRef$curre;
+          var scrollEle = (_scrollChildRef$curre = scrollChildRef.current) === null || _scrollChildRef$curre === void 0 ? void 0 : _scrollChildRef$curre.parentNode;
+          if (scrollEle) {
+            scrollEle.scrollTop = scrollTopRef.current;
+            scrollEle.addEventListener('scroll', onVirtualScroll);
+          }
+          return function () {
+            if (scrollEle) {
+              scrollEle.removeEventListener('scroll', onVirtualScroll);
+            }
+          };
+        }, []);
+        return /*#__PURE__*/_react.default.createElement(VirtualTableContext.Provider, {
+          value: {
+            childrenLen: childrenLen,
+            scrollTop: scrollTop,
+            startRowIndex: startRowIndex,
+            startOffset: startOffset,
+            endRowIndex: endRowIndex,
+            dispatch: dispatch
+          }
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          ref: scrollChildRef,
+          style: {
+            boxSizing: 'border-box',
+            height: ((virtuallistParams === null || virtuallistParams === void 0 ? void 0 : virtuallistParams.height) || 40) * childrenLen,
+            paddingTop: scrollTop
+          }
+        }, /*#__PURE__*/_react.default.createElement("table", _extends({}, restProps, {
+          style: _objectSpread(_objectSpread({}, restProps.style || {}), {}, {
+            minWidth: '100%',
+            tableLayout: 'fixed',
+            width: finalScroll.x,
+            transform: "translateY(-".concat(startOffset, "px)")
+          })
+        }), tableChildren)));
+      },
+      body: {
+        wrapper: function wrapper(_ref6) {
+          var wrapperChildren = _ref6.children,
+            restProps = _objectWithoutProperties(_ref6, _excluded4);
+          var _useContext = (0, _react.useContext)(VirtualTableContext),
+            dispatch = _useContext.dispatch,
+            startRowIndex = _useContext.startRowIndex,
+            endRowIndex = _useContext.endRowIndex;
+          (0, _react.useEffect)(function () {
+            var _wrapperChildren$1$le, _wrapperChildren$;
+            dispatch({
+              type: 'childrenLen',
+              payload: (_wrapperChildren$1$le = wrapperChildren === null || wrapperChildren === void 0 ? void 0 : (_wrapperChildren$ = wrapperChildren[1]) === null || _wrapperChildren$ === void 0 ? void 0 : _wrapperChildren$.length) !== null && _wrapperChildren$1$le !== void 0 ? _wrapperChildren$1$le : 0
+            });
+          }, [wrapperChildren]);
+          return /*#__PURE__*/_react.default.createElement("tbody", restProps, wrapperChildren[0], wrapperChildren[1].slice(startRowIndex, endRowIndex));
+        }
+      }
+    };
+  }, []);
   return /*#__PURE__*/_react.default.createElement(_table.default, _extends({
     components: virtuallistParams ? VcComponent : undefined,
-    scroll: virtuallistParams ? {
-      x: finalScroll === null || finalScroll === void 0 ? void 0 : finalScroll.x,
-      y: virtuallistParams.height
-    } : finalScroll,
+    scroll: finalScroll,
     dataSource: dataSource,
     loadingComponent: renderLoading,
     rowKey: primaryKey,

package/package.json

@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "ds-web-all",
-  "version": "1.0.1-beta.21",
+  "version": "1.0.1-beta.22",
   "scripts": {
     "start": "cross-env BUILD_ENV=dev && dumi dev",
     "docs:build": "cross-env BUILD_ENV=production && dumi build",
@@ -67,7 +67,6 @@
     "runes": "^0.4.3",
     "store2": "^2.13.2",
     "typescript": "^4.2.3",
-    "virtuallist-antd": "^0.8.0-beta.1",
     "wangeditor": "^4.7.15"
   },
   "devDependencies": {
@@ -77,6 +76,7 @@
     "@types/qs": "^6.9.7",
     "@types/react-redux": "^7.1.9",
     "@types/react-router-dom": "^5.1.5",
+    "@types/react-window": "^1.8.8",
     "@types/recompose": "^0.30.7",
     "@umijs/plugin-locale": "^0.14.2",
     "@umijs/test": "^3.0.5",