linkmore-design 1.0.18 → 1.0.21

package/es/LmTable/VList.js

@@ -0,0 +1,594 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.scrollTo = exports.VList = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _lodash = require("lodash");
+
+var _reactResizable = require("react-resizable");
+
+var _context = _interopRequireDefault(require("./context"));
+
+var _excluded = ["width", "onResize", "children"],
+    _excluded2 = ["children"],
+    _excluded3 = ["children", "style"],
+    _excluded4 = ["children"],
+    _excluded5 = ["style", "children"],
+    _excluded6 = ["width"];
+// ===============reducer ============== //
+var initialState = {
+  // 行高度
+  rowHeight: 0,
+  // 当前的scrollTop
+  curScrollTop: 0,
+  // 总行数
+  totalLen: 0
+};
+
+function reducer(state, action) {
+  var curScrollTop = action.curScrollTop,
+      curScrollLeft = action.curScrollLeft,
+      rowHeight = action.rowHeight,
+      totalLen = action.totalLen,
+      ifScrollTopClear = action.ifScrollTopClear,
+      isScrolling = action.isScrolling;
+  var stateScrollTop = state.curScrollTop;
+
+  switch (action.type) {
+    // 滚动条是否滚动中
+    case 'changeScrolling':
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        isScrolling: isScrolling
+      });
+
+    case 'changeTrs':
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        curScrollTop: curScrollTop
+      });
+    // 滚动横向滚动条 即 改变渲染的列表operate
+
+    case 'changeOperate':
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        curScrollLeft: curScrollLeft
+      });
+    // 初始化每行的高度, 表格总高度, 渲染的条数
+
+    case 'initHeight':
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        rowHeight: rowHeight
+      });
+    // 更改totalLen
+
+    case 'changeTotalLen':
+      if (totalLen === 0) {
+        stateScrollTop = 0;
+      }
+
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        totalLen: totalLen,
+        curScrollTop: stateScrollTop
+      });
+
+    case 'reset':
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        curScrollTop: ifScrollTopClear ? 0 : state.curScrollTop
+      });
+
+    default:
+      throw new Error();
+  }
+} // ============== 全局常量 ================== //
+
+
+var DEFAULT_VID = 'vtable';
+var vidMap = new Map(); // =============== context ============== //
+
+var ScrollContext = /*#__PURE__*/(0, _react.createContext)({
+  dispatch: undefined,
+  renderLen: 1,
+  start: 0,
+  offsetStart: 0,
+  // =============
+  rowHeight: initialState.rowHeight,
+  totalLen: 0,
+  vid: DEFAULT_VID
+});
+var HeaderContext = /*#__PURE__*/(0, _react.createContext)(); // ============= 组件 =================== //
+
+var HeaderWrapper = function HeaderWrapper(props) {
+  var _useState = (0, _react.useState)(),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      useKeys = _useState2[0],
+      setKeys = _useState2[1];
+
+  var _useContext = (0, _react.useContext)(_context.default),
+      width = _useContext.width;
+
+  var changeKeys = function changeKeys() {
+    setKeys(Date.now());
+  };
+
+  (0, _react.useEffect)(function () {
+    changeKeys();
+  }, [width]); // console.log('每列的偏移', props.children[0].props.stickyOffsets);
+
+  return /*#__PURE__*/_react.default.createElement(HeaderContext.Provider, {
+    value: {
+      changeKeys: changeKeys
+    }
+  }, /*#__PURE__*/_react.default.createElement("thead", (0, _extends2.default)({
+    key: useKeys
+  }, props)));
+};
+
+var HeaderCell = function HeaderCell(props) {
+  var width = props.width,
+      onResize = props.onResize,
+      children = props.children,
+      restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+
+  var _useState3 = (0, _react.useState)(width || 0),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      useWidth = _useState4[0],
+      setWidth = _useState4[1];
+
+  var _useContext2 = (0, _react.useContext)(HeaderContext),
+      changeKeys = _useContext2.changeKeys;
+
+  var handleResize = function handleResize(e, _ref) {
+    var size = _ref.size;
+    var nValue = size.width;
+    setWidth(nValue);
+  };
+
+  var handleResizeStop = function handleResizeStop(e, _ref2) {
+    var size = _ref2.size;
+    var nValue = size.width; // const sc = width - nValue > 0 ? width - nValue : 1;
+
+    onResize === null || onResize === void 0 ? void 0 : onResize(width, nValue); // 触发重新渲染列头单元格，重新计算拖拽位置
+
+    changeKeys === null || changeKeys === void 0 ? void 0 : changeKeys();
+  };
+
+  if (!width) {
+    return /*#__PURE__*/_react.default.createElement("th", restProps, /*#__PURE__*/_react.default.createElement("div", {
+      className: "text-overflow"
+    }, children));
+  }
+
+  return /*#__PURE__*/_react.default.createElement("th", restProps, /*#__PURE__*/_react.default.createElement("div", {
+    className: "text-overflow"
+  }, children), /*#__PURE__*/_react.default.createElement(_reactResizable.ResizableBox, {
+    className: "yf_resizable_bar",
+    width: useWidth,
+    height: 0,
+    handle: /*#__PURE__*/_react.default.createElement("div", {
+      className: "react-resizable-handle",
+      onClick: function onClick(e) {
+        e.stopPropagation();
+      }
+    }),
+    onResize: handleResize,
+    onResizeStop: handleResizeStop,
+    minConstraints: [40, 0] // draggableOpts={{ enableUserSelectHack: false }}
+
+  }));
+};
+
+var VCell = function VCell(props) {
+  var children = props.children,
+      restProps = (0, _objectWithoutProperties2.default)(props, _excluded2);
+  return /*#__PURE__*/_react.default.createElement("td", restProps, children);
+};
+
+var VRow = function VRow(props, ref) {
+  var _useContext3 = (0, _react.useContext)(ScrollContext),
+      dispatch = _useContext3.dispatch,
+      rowHeight = _useContext3.rowHeight,
+      totalLen = _useContext3.totalLen,
+      vid = _useContext3.vid;
+
+  var children = props.children,
+      style = props.style,
+      restProps = (0, _objectWithoutProperties2.default)(props, _excluded3);
+  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, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, 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", (0, _extends2.default)({}, restProps, {
+    ref: Object.prototype.hasOwnProperty.call(ref, 'current') ? ref : trRef,
+    style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, style), {}, {
+      height: rowHeight || 'auto',
+      boxSizing: 'border-box'
+    })
+  }), children);
+};
+
+var VWrapper = function VWrapper(props) {
+  var children = props.children,
+      restProps = (0, _objectWithoutProperties2.default)(props, _excluded4);
+
+  var _useContext4 = (0, _react.useContext)(ScrollContext),
+      renderLen = _useContext4.renderLen,
+      start = _useContext4.start,
+      dispatch = _useContext4.dispatch,
+      vid = _useContext4.vid,
+      totalLen = _useContext4.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)) // contents.slice(start, start + (renderLen ?? 1)).map((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);
+};
+
+var VTable = function VTable(props, otherParams) {
+  var _children$1$props$dat, _children$, _children$$props, _children$$props$data;
+
+  var style = props.style,
+      children = props.children,
+      rest = (0, _objectWithoutProperties2.default)(props, _excluded5);
+  var width = style.width,
+      restStyle = (0, _objectWithoutProperties2.default)(style, _excluded6);
+
+  var _ref3 = otherParams !== null && otherParams !== void 0 ? otherParams : {},
+      vid = _ref3.vid,
+      scrollY = _ref3.scrollY,
+      reachEnd = _ref3.reachEnd,
+      onScroll = _ref3.onScroll,
+      resetScrollTopWhenDataChange = _ref3.resetScrollTopWhenDataChange;
+
+  var _useReducer = (0, _react.useReducer)(reducer, initialState),
+      _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
+      state = _useReducer2[0],
+      dispatch = _useReducer2[1];
+
+  var wrapTableRef = (0, _react.useRef)(null);
+  var tableRef = (0, _react.useRef)(null);
+  var ifChangeRef = (0, _react.useRef)(false); // 数据的总条数
+
+  var _useState5 = (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),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      totalLen = _useState6[0],
+      setTotalLen = _useState6[1];
+
+  (0, _react.useEffect)(function () {
+    setTotalLen(state.totalLen);
+  }, [state.totalLen]);
+  (0, _react.useEffect)(function () {
+    return function () {
+      vidMap.delete(vid);
+    };
+  }, [vid]); // 数据变更
+
+  (0, _react.useEffect)(function () {
+    var _children$2, _children$2$props, _children$2$props$dat;
+
+    ifChangeRef.current = true;
+
+    if ((0, _lodash.isNumber)((_children$2 = children[1]) === null || _children$2 === void 0 ? void 0 : (_children$2$props = _children$2.props) === null || _children$2$props === void 0 ? void 0 : (_children$2$props$dat = _children$2$props.data) === null || _children$2$props$dat === void 0 ? void 0 : _children$2$props$dat.length)) {
+      var _children$1$props$dat2, _children$3, _children$3$props, _children$3$props$dat;
+
+      dispatch({
+        type: 'changeTotalLen',
+        totalLen: (_children$1$props$dat2 = (_children$3 = children[1]) === null || _children$3 === void 0 ? void 0 : (_children$3$props = _children$3.props) === null || _children$3$props === void 0 ? void 0 : (_children$3$props$dat = _children$3$props.data) === null || _children$3$props$dat === void 0 ? void 0 : _children$3$props$dat.length) !== null && _children$1$props$dat2 !== void 0 ? _children$1$props$dat2 : 0
+      });
+    }
+  }, [children[1].props.data]); // 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 _useState7 = (0, _react.useState)(0),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      tableScrollY = _useState8[0],
+      setTableScrollY = _useState8[1]; // tableScrollY 随scrollY / tableHeight 进行变更
+
+
+  (0, _react.useEffect)(function () {
+    var temp = 0;
+
+    if (typeof scrollY === 'string') {
+      var _wrapTableRef$current, _wrapTableRef$current2, _wrapTableRef$current3;
+
+      temp = (_wrapTableRef$current = (_wrapTableRef$current2 = wrapTableRef.current) === null || _wrapTableRef$current2 === void 0 ? void 0 : (_wrapTableRef$current3 = _wrapTableRef$current2.parentNode) === null || _wrapTableRef$current3 === void 0 ? void 0 : _wrapTableRef$current3.offsetHeight) !== null && _wrapTableRef$current !== void 0 ? _wrapTableRef$current : 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 + 20; // 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 _wrapTableRef$current4;
+
+    var scrollNode = (_wrapTableRef$current4 = wrapTableRef.current) === null || _wrapTableRef$current4 === void 0 ? void 0 : _wrapTableRef$current4.parentNode;
+
+    if (ifChangeRef === null || ifChangeRef === void 0 ? void 0 : ifChangeRef.current) {
+      ifChangeRef.current = false;
+
+      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, {
+        scrollNode: scrollNode
+      });
+    }
+  }, [totalLen, resetScrollTopWhenDataChange, vid, children]);
+  (0, _react.useEffect)(function () {
+    var _wrapTableRef$current5;
+
+    var timer = null;
+    var timeout = 100;
+    var throttleScroll = (0, _lodash.throttle)(function (e) {
+      var _e$target$scrollLeft, _e$target, _e$target$scrollTop, _e$target2, _e$target$scrollHeigh, _e$target3, _e$target$clientHeigh, _e$target4;
+
+      var scrollLeft = (_e$target$scrollLeft = e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.scrollLeft) !== null && _e$target$scrollLeft !== void 0 ? _e$target$scrollLeft : 0;
+      var scrollTop = (_e$target$scrollTop = e === null || e === void 0 ? void 0 : (_e$target2 = e.target) === null || _e$target2 === void 0 ? void 0 : _e$target2.scrollTop) !== null && _e$target$scrollTop !== void 0 ? _e$target$scrollTop : 0;
+      var scrollHeight = (_e$target$scrollHeigh = e === null || e === void 0 ? void 0 : (_e$target3 = e.target) === null || _e$target3 === void 0 ? void 0 : _e$target3.scrollHeight) !== null && _e$target$scrollHeigh !== void 0 ? _e$target$scrollHeigh : 0;
+      var clientHeight = (_e$target$clientHeigh = e === null || e === void 0 ? void 0 : (_e$target4 = e.target) === null || _e$target4 === void 0 ? void 0 : _e$target4.clientHeight) !== null && _e$target$clientHeigh !== void 0 ? _e$target$clientHeigh : 0; // 到底了 没有滚动条就不会触发reachEnd. 建议设置scrolly高度少点或者数据量多点.
+
+      if (scrollTop === scrollHeight) {// reachEnd && reachEnd()
+      } else if (scrollTop + clientHeight >= scrollHeight) {
+        // 有滚动条的情况
+        reachEnd && reachEnd();
+      }
+
+      onScroll && onScroll(scrollTop, scrollLeft);
+
+      if (!timer) {
+        dispatch({
+          type: 'changeScrolling',
+          isScrolling: true
+        });
+      } else {
+        clearTimeout(timer);
+        timer = null;
+      }
+
+      timer = setTimeout(function () {
+        dispatch({
+          type: 'changeScrolling',
+          isScrolling: false
+        });
+        timer = null;
+      }, timeout);
+      dispatch({
+        type: 'changeScrolling',
+        isScrolling: true
+      });
+      dispatch({
+        type: 'changeTrs',
+        curScrollTop: scrollTop
+      });
+      dispatch({
+        type: 'changeOperate',
+        curScrollLeft: scrollLeft
+      });
+    }, 60);
+    var ref = wrapTableRef === null || wrapTableRef === void 0 ? void 0 : (_wrapTableRef$current5 = wrapTableRef.current) === null || _wrapTableRef$current5 === void 0 ? void 0 : _wrapTableRef$current5.parentNode;
+
+    if (ref) {
+      ref.addEventListener('scroll', throttleScroll);
+    }
+
+    return function () {
+      ref.removeEventListener('scroll', throttleScroll);
+    };
+  }, [onScroll, reachEnd]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "virtuallist",
+    ref: wrapTableRef,
+    style: {
+      width: '100%',
+      position: 'relative',
+      height: tableHeight,
+      boxSizing: 'border-box',
+      paddingTop: state.curScrollTop
+    }
+  }, /*#__PURE__*/_react.default.createElement(ScrollContext.Provider, {
+    value: {
+      dispatch: dispatch,
+      rowHeight: state.rowHeight,
+      start: start,
+      offsetStart: offsetStart,
+      scrollLeft: state.curScrollLeft,
+      renderLen: renderLen,
+      totalLen: totalLen,
+      vid: vid
+    }
+  }, /*#__PURE__*/_react.default.createElement("table", (0, _extends2.default)({}, rest, {
+    ref: tableRef,
+    style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, restStyle), {}, {
+      width: width,
+      position: 'relative',
+      transform: "translateY(-".concat(offsetStart, "px)"),
+      pointerEvents: state.isScrolling ? 'none' : 'initial'
+    })
+  }), children)));
+}; // ================导出===================
+
+
+var VList = 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,
+      _props$resetTopWhenDa = props.resetTopWhenDataChange,
+      resetTopWhenDataChange = _props$resetTopWhenDa === void 0 ? true : _props$resetTopWhenDa;
+  var resetScrollTopWhenDataChange = onReachEnd ? false : resetTopWhenDataChange;
+
+  if (!vidMap.has(vid)) {
+    vidMap.set(vid, {});
+  }
+
+  return {
+    table: function table(p) {
+      return VTable(p, {
+        vid: vid,
+        scrollY: height,
+        reachEnd: onReachEnd,
+        onScroll: onScroll,
+        resetScrollTopWhenDataChange: resetScrollTopWhenDataChange
+      });
+    },
+    body: {
+      wrapper: VWrapper,
+      row: VRow,
+      cell: function cell(cellProps) {
+        return /*#__PURE__*/_react.default.createElement(VCell, cellProps);
+      }
+    },
+    header: {
+      wrapper: HeaderWrapper,
+      cell: HeaderCell
+    }
+  };
+};
+
+exports.VList = VList;
+
+var scrollTo = function scrollTo(option) {
+  var row = option.row,
+      y = option.y,
+      _option$vid = option.vid,
+      vid = _option$vid === void 0 ? DEFAULT_VID : _option$vid;
+
+  var _vidMap$get = vidMap.get(vid),
+      scrollNode = _vidMap$get.scrollNode,
+      rowItemHeight = _vidMap$get.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;
+  }
+};
+
+exports.scrollTo = scrollTo;