@kdcloudjs/kdesign 1.6.31 → 1.6.33

package/lib/virtual-list/utils/itemUtil.js

@@ -0,0 +1,206 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GHOST_ITEM_KEY = void 0;
+exports.getCompareItemRelativeTop = getCompareItemRelativeTop;
+exports.getItemAbsoluteTop = getItemAbsoluteTop;
+exports.getItemRelativeTop = getItemRelativeTop;
+exports.getLocationItem = getLocationItem;
+exports.getLongestItemIndex = getLongestItemIndex;
+exports.getNodeHeight = getNodeHeight;
+exports.getRangeIndex = getRangeIndex;
+exports.getScrollPercentage = getScrollPercentage;
+exports.getValidScrollTop = getValidScrollTop;
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _isNan = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/number/is-nan"));
+
+var _reactDom = require("react-dom");
+
+var _getStringLength = _interopRequireDefault(require("../../_utils/getStringLength"));
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+/**
+ * 为了计算方便，定位元素的下标可能返回数组长度，代表最后一个元素
+ */
+var GHOST_ITEM_KEY = '__rc_ghost_item__';
+/**
+ * 根据滚动条当前的滚动百分比，计算出基准元素
+ * 在基准元素的上方和下方渲染可见区域的其他元素
+ */
+
+exports.GHOST_ITEM_KEY = GHOST_ITEM_KEY;
+
+function getLocationItem(scrollPtg, total) {
+  var itemIndex = Math.floor(scrollPtg * total);
+  var itemTopPtg = itemIndex / total;
+  var offsetPtg = (scrollPtg - itemTopPtg) / (1 / total);
+  return {
+    index: itemIndex,
+    offsetPtg: (0, _isNan.default)(offsetPtg) ? 0 : offsetPtg
+  };
+}
+/**
+ * 获取HTML元素高度
+ */
+
+
+function getNodeHeight(node) {
+  var needMargin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  // eslint-disable-next-line react/no-find-dom-node
+  var element = (0, _reactDom.findDOMNode)(node);
+  var marginVertical = 0;
+
+  if (needMargin) {
+    var _window$getComputedSt = window.getComputedStyle(node),
+        marginTop = _window$getComputedSt.marginTop,
+        marginBottom = _window$getComputedSt.marginBottom;
+
+    marginVertical = Number(marginTop.replace(/\D/g, '')) + Number(marginBottom.replace(/\D/g, ''));
+    marginVertical = isNaN(marginVertical) ? 0 : marginVertical;
+  }
+
+  return element ? element.offsetHeight + marginVertical : 0;
+}
+/**
+ * 获取有效的scrollTop值
+ * Safari的缓动效果会获得负值的scrollTop
+ */
+
+
+function getValidScrollTop(scrollTop, scrollRange) {
+  return scrollTop < 0 ? 0 : scrollTop > scrollRange ? scrollRange : scrollTop;
+}
+/**
+ * 视口已滚动距离 / 总可滚动距离
+ */
+
+
+function getScrollPercentage(_ref) {
+  var scrollTop = _ref.scrollTop,
+      scrollHeight = _ref.scrollHeight,
+      clientHeight = _ref.clientHeight;
+  var scrollRange = scrollHeight - clientHeight;
+  return scrollRange <= 0 ? 0 : getValidScrollTop(scrollTop, scrollRange) / scrollRange;
+}
+/**
+ * 计算需要渲染的元素的开始下标、结束下标和用于定位的元素下标
+ */
+
+
+function getRangeIndex(scrollPtg, itemCount, visibleCount) {
+  var _getLocationItem = getLocationItem(scrollPtg, itemCount),
+      index = _getLocationItem.index,
+      offsetPtg = _getLocationItem.offsetPtg;
+
+  var beforeCount = Math.ceil(scrollPtg * visibleCount);
+  var afterCount = Math.ceil((1 - scrollPtg) * visibleCount);
+  return {
+    itemIndex: index,
+    itemOffsetPtg: offsetPtg,
+    startIndex: Math.max(0, index - beforeCount),
+    endIndex: Math.min(itemCount - 1, index + afterCount)
+  };
+}
+/**
+ * 计算元素相对于视口顶部的偏移量
+ */
+
+
+function getItemRelativeTop(_ref2) {
+  var itemHeight = _ref2.itemHeight,
+      itemOffsetPtg = _ref2.itemOffsetPtg,
+      scrollPtg = _ref2.scrollPtg,
+      clientHeight = _ref2.clientHeight;
+  return Math.floor(clientHeight * scrollPtg - itemHeight * itemOffsetPtg);
+}
+/**
+ * 计算元素相对于整个滚动区域顶部的偏移量
+ */
+
+
+function getItemAbsoluteTop(_a) {
+  var scrollTop = _a.scrollTop,
+      rest = __rest(_a, ["scrollTop"]);
+
+  return scrollTop + getItemRelativeTop(rest);
+}
+/**
+ * 计算某一指定下标的元素相对于视口顶部的偏移量
+ */
+
+
+function getCompareItemRelativeTop(_ref3) {
+  var locatedItemRelativeTop = _ref3.locatedItemRelativeTop,
+      locatedItemIndex = _ref3.locatedItemIndex,
+      compareItemIndex = _ref3.compareItemIndex,
+      startIndex = _ref3.startIndex,
+      endIndex = _ref3.endIndex,
+      getItemKey = _ref3.getItemKey,
+      itemElementHeights = _ref3.itemElementHeights,
+      itemHeight = _ref3.itemHeight;
+  var compareItemTop = locatedItemRelativeTop;
+  var compareItemKey = getItemKey(compareItemIndex);
+
+  if (compareItemIndex <= locatedItemIndex) {
+    for (var index = locatedItemIndex; index >= startIndex; index -= 1) {
+      var key = getItemKey(index);
+
+      if (key === compareItemKey) {
+        break;
+      }
+
+      var prevItemKey = getItemKey(index - 1);
+      compareItemTop -= itemElementHeights[prevItemKey] || itemHeight;
+    }
+  } else {
+    for (var _index = locatedItemIndex; _index <= endIndex; _index += 1) {
+      var _key = getItemKey(_index);
+
+      if (_key === compareItemKey) {
+        break;
+      }
+
+      compareItemTop += itemElementHeights[_key] || itemHeight;
+    }
+  }
+
+  return compareItemTop;
+}
+
+function getLongestItemIndex(data) {
+  var result = -1;
+  var length = 0;
+  data.forEach(function (item, index) {
+    var _a;
+
+    item = typeof item === 'string' ? item : (_a = item.props) === null || _a === void 0 ? void 0 : _a.children;
+
+    if (typeof item === 'string') {
+      var _length = (0, _getStringLength.default)(item);
+
+      if (_length > length) {
+        length = _length;
+        result = index;
+      }
+    }
+  });
+  return result;
+}

package/lib/virtual-list/virtual-list.d.ts

@@ -0,0 +1,34 @@
+import React, { ReactNode, CSSProperties } from 'react';
+import { Key } from './utils/itemUtil';
+export declare function isNumber(obj: any): obj is number;
+export declare type RenderFunc<T> = (item: T, index: number, props: {
+    style: React.CSSProperties;
+}) => ReactNode;
+export interface VirtualListProps<T> extends Omit<React.HTMLAttributes<any>, 'children'> {
+    children: RenderFunc<T>;
+    data: T[];
+    height?: number | string;
+    itemHeight?: number;
+    wrapper?: string | React.FC<any> | React.ComponentClass<any>;
+    threshold?: number | null;
+    isStaticItemHeight?: boolean;
+    itemKey?: Key | ((item: T, index: number) => Key);
+    measureLongestItem?: boolean;
+    scrollOptions?: ScrollIntoViewOptions;
+    needFiller?: boolean;
+    outerStyle?: CSSProperties;
+    onScroll?: React.UIEventHandler<HTMLElement>;
+}
+export declare type AvailableVirtualListProps = Pick<VirtualListProps<any>, 'height' | 'itemHeight' | 'threshold' | 'isStaticItemHeight' | 'scrollOptions'>;
+export declare type VirtualListHandle = {
+    dom: HTMLElement;
+    scrollTo: (arg: number | {
+        index: number;
+        options?: ScrollIntoViewOptions;
+    } | {
+        key: Key;
+        options?: ScrollIntoViewOptions;
+    }) => void;
+};
+declare const VirtualList: React.ForwardRefExoticComponent<VirtualListProps<any> & React.RefAttributes<VirtualListHandle>>;
+export default VirtualList;