@kdcloudjs/kdesign 1.6.30 → 1.6.32

package/es/virtual-list/utils/algorithmUtil.js

@@ -0,0 +1,79 @@
+/**
+ * Get index with specific start index one by one. e.g.
+ * min: 3, max: 9, start: 6
+ *
+ * Return index is:
+ * [0]: 6
+ * [1]: 7
+ * [2]: 5
+ * [3]: 8
+ * [4]: 4
+ * [5]: 9
+ * [6]: 3
+ */
+export function getIndexByStartLoc(min, max, start, index) {
+  var beforeCount = start - min;
+  var afterCount = max - start;
+  var balanceCount = Math.min(beforeCount, afterCount) * 2;
+
+  if (index <= balanceCount) {
+    var stepIndex = Math.floor(index / 2);
+
+    if (index % 2) {
+      return start + stepIndex + 1;
+    }
+
+    return start - stepIndex;
+  }
+
+  if (beforeCount > afterCount) {
+    return start - (index - afterCount);
+  }
+
+  return start + (index - beforeCount);
+}
+export function findListDiffIndex(originList, targetList, getKey) {
+  var originLen = originList.length;
+  var targetLen = targetList.length;
+  var shortList;
+  var longList;
+
+  if (originLen === 0 && targetLen === 0) {
+    return null;
+  }
+
+  if (originLen < targetLen) {
+    shortList = originList;
+    longList = targetList;
+  } else {
+    shortList = targetList;
+    longList = originList;
+  }
+
+  var notExistKey = {
+    __EMPTY_ITEM__: true
+  };
+
+  function getItemKey(item, index) {
+    return item !== undefined ? getKey(item, index) : notExistKey;
+  }
+
+  var diffIndex = null;
+  var multiple = Math.abs(originLen - targetLen) !== 1;
+
+  for (var i = 0; i < longList.length; i += 1) {
+    var shortKey = getItemKey(shortList[i], i);
+    var longKey = getItemKey(longList[i], i);
+
+    if (shortKey !== longKey) {
+      diffIndex = i;
+      multiple = multiple || shortKey !== getItemKey(longList[i + 1], i + 1);
+      break;
+    }
+  }
+
+  return diffIndex === null ? null : {
+    index: diffIndex,
+    multiple: multiple
+  };
+}

package/es/virtual-list/utils/itemUtil.d.ts

@@ -0,0 +1,75 @@
+/**
+ * 为了计算方便，定位元素的下标可能返回数组长度，代表最后一个元素
+ */
+export declare const GHOST_ITEM_KEY = "__rc_ghost_item__";
+export declare type Key = string | number;
+interface LocationItemResult {
+    /** 用于定位的元素的下标 */
+    index: number;
+    /** 定位元素自身需要补充的偏移量 */
+    offsetPtg: number;
+}
+/**
+ * 根据滚动条当前的滚动百分比，计算出基准元素
+ * 在基准元素的上方和下方渲染可见区域的其他元素
+ */
+export declare function getLocationItem(scrollPtg: number, total: number): LocationItemResult;
+/**
+ * 获取HTML元素高度
+ */
+export declare function getNodeHeight(node: HTMLElement, needMargin?: boolean): number;
+/**
+ * 获取有效的scrollTop值
+ * Safari的缓动效果会获得负值的scrollTop
+ */
+export declare function getValidScrollTop(scrollTop: number, scrollRange: number): number;
+/**
+ * 视口已滚动距离 / 总可滚动距离
+ */
+export declare function getScrollPercentage({ scrollTop, scrollHeight, clientHeight, }: {
+    scrollTop: number;
+    scrollHeight: number;
+    clientHeight: number;
+}): number;
+/**
+ * 计算需要渲染的元素的开始下标、结束下标和用于定位的元素下标
+ */
+export declare function getRangeIndex(scrollPtg: number, itemCount: number, visibleCount: number): {
+    itemIndex: number;
+    itemOffsetPtg: number;
+    startIndex: number;
+    endIndex: number;
+};
+interface ItemTopConfig {
+    itemHeight: number;
+    itemOffsetPtg: number;
+    scrollTop: number;
+    scrollPtg: number;
+    clientHeight: number;
+}
+/**
+ * 计算元素相对于视口顶部的偏移量
+ */
+export declare function getItemRelativeTop({ itemHeight, itemOffsetPtg, scrollPtg, clientHeight, }: Omit<ItemTopConfig, 'scrollTop'>): number;
+/**
+ * 计算元素相对于整个滚动区域顶部的偏移量
+ */
+export declare function getItemAbsoluteTop({ scrollTop, ...rest }: ItemTopConfig): number;
+interface CompareItemConfig {
+    locatedItemRelativeTop: number;
+    locatedItemIndex: number;
+    compareItemIndex: number;
+    getItemKey: (index: number) => Key;
+    startIndex: number;
+    endIndex: number;
+    itemElementHeights: {
+        [key: string]: number;
+    };
+    itemHeight: number;
+}
+/**
+ * 计算某一指定下标的元素相对于视口顶部的偏移量
+ */
+export declare function getCompareItemRelativeTop({ locatedItemRelativeTop, locatedItemIndex, compareItemIndex, startIndex, endIndex, getItemKey, itemElementHeights, itemHeight, }: CompareItemConfig): number;
+export declare function getLongestItemIndex(data: Array<any>): number;
+export {};

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

@@ -0,0 +1,176 @@
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Number$isNaN from "@babel/runtime-corejs3/core-js-stable/number/is-nan";
+
+var __rest = this && this.__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 _Object$getOwnPropertySymbols === "function") for (var i = 0, p = _Object$getOwnPropertySymbols(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;
+};
+
+import { findDOMNode } from 'react-dom';
+import getStringLength from '../../_utils/getStringLength';
+/**
+ * 为了计算方便，定位元素的下标可能返回数组长度，代表最后一个元素
+ */
+
+export var GHOST_ITEM_KEY = '__rc_ghost_item__';
+/**
+ * 根据滚动条当前的滚动百分比，计算出基准元素
+ * 在基准元素的上方和下方渲染可见区域的其他元素
+ */
+
+export function getLocationItem(scrollPtg, total) {
+  var itemIndex = Math.floor(scrollPtg * total);
+  var itemTopPtg = itemIndex / total;
+  var offsetPtg = (scrollPtg - itemTopPtg) / (1 / total);
+  return {
+    index: itemIndex,
+    offsetPtg: _Number$isNaN(offsetPtg) ? 0 : offsetPtg
+  };
+}
+/**
+ * 获取HTML元素高度
+ */
+
+export 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 = 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
+ */
+
+export function getValidScrollTop(scrollTop, scrollRange) {
+  return scrollTop < 0 ? 0 : scrollTop > scrollRange ? scrollRange : scrollTop;
+}
+/**
+ * 视口已滚动距离 / 总可滚动距离
+ */
+
+export 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;
+}
+/**
+ * 计算需要渲染的元素的开始下标、结束下标和用于定位的元素下标
+ */
+
+export 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)
+  };
+}
+/**
+ * 计算元素相对于视口顶部的偏移量
+ */
+
+export function getItemRelativeTop(_ref2) {
+  var itemHeight = _ref2.itemHeight,
+      itemOffsetPtg = _ref2.itemOffsetPtg,
+      scrollPtg = _ref2.scrollPtg,
+      clientHeight = _ref2.clientHeight;
+  return Math.floor(clientHeight * scrollPtg - itemHeight * itemOffsetPtg);
+}
+/**
+ * 计算元素相对于整个滚动区域顶部的偏移量
+ */
+
+export function getItemAbsoluteTop(_a) {
+  var scrollTop = _a.scrollTop,
+      rest = __rest(_a, ["scrollTop"]);
+
+  return scrollTop + getItemRelativeTop(rest);
+}
+/**
+ * 计算某一指定下标的元素相对于视口顶部的偏移量
+ */
+
+export 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;
+}
+export 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 = getStringLength(item);
+
+      if (_length > length) {
+        length = _length;
+        result = index;
+      }
+    }
+  });
+  return result;
+}

package/es/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;