linkmore-design 1.0.78 → 1.0.81

package/lib/ProTable/VList.js

@@ -1,594 +0,0 @@
-"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/objectWithoutProperties"));
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/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;