@kdcloudjs/kdesign 1.6.31 → 1.6.33

package/es/_utils/getStringLength.d.ts

@@ -0,0 +1 @@
+export default function (str: string): number;

package/es/_utils/getStringLength.js

@@ -0,0 +1,14 @@
+// 计算字符串长度，中文字符占两个长度
+export default function (str) {
+  var len = 0;
+
+  for (var i = 0; i < str.length; i++) {
+    if (str.charCodeAt(i) > 127 || str.charCodeAt(i) === 94) {
+      len += 2;
+    } else {
+      len++;
+    }
+  }
+
+  return len;
+}

package/es/_utils/hooks.d.ts

@@ -50,4 +50,7 @@ interface ContentRectType {
     y: number;
 }
 export declare function useResizeObserver(element: (() => HTMLElement | null) | HTMLElement | null, handler?: (react: ContentRectType) => void): void;
+export declare function useIsFirstRender(): boolean;
+export declare function useForceUpdate(): import("react").DispatchWithoutAction;
+export declare function useStateWithPromise<T>(defaultVal: T): [T, (updater: any) => Promise<T>];
 export {};

package/es/_utils/hooks.js

@@ -6,6 +6,7 @@ import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
 
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof _Symbol !== "undefined" && _getIteratorMethod(o) || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 
@@ -13,7 +14,7 @@ function _unsupportedIterableToArray(o, minLen) { var _context2; if (!o) return;
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useRef, useReducer } from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
 import devWarning from './devwarning';
 /**
@@ -236,4 +237,52 @@ export function useResizeObserver(element, handler) {
       resizeObserver && resizeObserver.disconnect();
     };
   }, [element, handler]);
+}
+export function useIsFirstRender() {
+  var isFirst = useRef(true);
+  useEffect(function () {
+    isFirst.current = false;
+  }, []);
+  return isFirst.current;
+}
+export function useForceUpdate() {
+  var _useReducer = useReducer(function (v) {
+    return v + 1;
+  }, 0),
+      _useReducer2 = _slicedToArray(_useReducer, 2),
+      dispatch = _useReducer2[1];
+
+  return dispatch;
+}
+export function useStateWithPromise(defaultVal) {
+  var _useState3 = useState({
+    value: defaultVal,
+    resolve: function resolve(e) {
+      // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions
+      e;
+    }
+  }),
+      _useState4 = _slicedToArray(_useState3, 2),
+      state = _useState4[0],
+      setState = _useState4[1];
+
+  useEffect(function () {
+    state.resolve(state.value);
+  }, [state]);
+  return [state.value, function (updater) {
+    return new _Promise(function (resolve) {
+      setState(function (prevState) {
+        var nextVal = updater;
+
+        if (typeof updater === 'function') {
+          nextVal = updater(prevState.value);
+        }
+
+        return {
+          value: nextVal,
+          resolve: resolve
+        };
+      });
+    });
+  }];
 }

package/es/_utils/raf.d.ts

@@ -0,0 +1,3 @@
+declare let raf: any;
+declare let caf: any;
+export { raf, caf };

package/es/_utils/raf.js

@@ -0,0 +1,35 @@
+var target = typeof window === 'undefined' ? global : window;
+var vendors = ['webkit', 'ms', 'moz', 'o'];
+var raf = target.requestAnimationFrame; // eslint-disable-line
+
+var caf = target.cancelAnimationFrame; // eslint-disable-line
+
+if (!raf || !caf) {
+  vendors.some(function (prefix) {
+    raf = target["".concat(prefix, "RequestAnimationFrame")];
+    caf = target["".concat(prefix, "CancelAnimationFrame")] || target["".concat(prefix, "CancelRequestAnimationFrame")];
+    return raf && caf;
+  });
+
+  if (!raf || !caf) {
+    var lastTime = 0;
+
+    raf = function raf(cb) {
+      var currentTime = Date.now();
+      var diff = Math.max(0, 16 - (currentTime - lastTime));
+      var timer = setTimeout(function () {
+        cb();
+        lastTime = currentTime + diff;
+      }, diff);
+      return timer;
+    };
+
+    caf = function caf(timer) {
+      clearTimeout(timer);
+    };
+  }
+}
+
+raf = raf.bind(target);
+caf = caf.bind(target);
+export { raf, caf };

package/es/_utils/resizeObserver.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface ResizeProps {
+    onResize?: (entry: ResizeObserverEntry[]) => void;
+    children?: React.ReactNode;
+}
+declare class ResizeObserverComponent extends React.Component<ResizeProps> {
+    resizeObserver: any;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    componentWillUnmount: () => void;
+    createResizeObserver: () => void;
+    destroyResizeObserver: () => void;
+    render(): React.ReactNode;
+}
+export default ResizeObserverComponent;

package/es/_utils/resizeObserver.js

@@ -0,0 +1,79 @@
+import _Reflect$construct from "@babel/runtime-corejs3/core-js-stable/reflect/construct";
+import _classCallCheck from "@babel/runtime-corejs3/helpers/classCallCheck";
+import _createClass from "@babel/runtime-corejs3/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime-corejs3/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime-corejs3/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime-corejs3/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime-corejs3/helpers/getPrototypeOf";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct) return false; if (_Reflect$construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import React from 'react';
+import ResizeObserver from 'resize-observer-polyfill';
+import { findDOMNode } from 'react-dom';
+
+var ResizeObserverComponent = /*#__PURE__*/function (_React$Component) {
+  _inherits(ResizeObserverComponent, _React$Component);
+
+  var _super = _createSuper(ResizeObserverComponent);
+
+  function ResizeObserverComponent() {
+    var _this;
+
+    _classCallCheck(this, ResizeObserverComponent);
+
+    _this = _super.apply(this, arguments);
+
+    _this.componentWillUnmount = function () {
+      if (_this.resizeObserver) {
+        _this.destroyResizeObserver();
+      }
+    };
+
+    _this.createResizeObserver = function () {
+      _this.resizeObserver = new ResizeObserver(function (entry) {
+        var onResize = _this.props.onResize;
+        onResize && onResize(entry);
+      }); // eslint-disable-next-line react/no-find-dom-node
+
+      _this.resizeObserver.observe(findDOMNode(_assertThisInitialized(_this)));
+    };
+
+    _this.destroyResizeObserver = function () {
+      _this.resizeObserver && _this.resizeObserver.disconnect();
+      _this.resizeObserver = null;
+    };
+
+    return _this;
+  }
+
+  _createClass(ResizeObserverComponent, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (! /*#__PURE__*/React.isValidElement(this.props.children)) {
+        console.warn('The children of ResizeObserver is invalid.');
+      } else {
+        this.createResizeObserver();
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      // eslint-disable-next-line react/no-find-dom-node
+      if (!this.resizeObserver && findDOMNode(this)) {
+        this.createResizeObserver();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return this.props.children;
+    }
+  }]);
+
+  return ResizeObserverComponent;
+}(React.Component);
+
+export default ResizeObserverComponent;

package/es/_utils/usePopper.js

@@ -545,7 +545,7 @@ function usePopper(locatorElement, popperElement, props) {
         } else {
           if (matchTrigger('hover')) {
             mouseleaveTimer && clearTimeout(mouseleaveTimer);
-            mouseleaveTimer = window.setTimeout(hidePopper, mouseLeaveDelay * 3000);
+            mouseleaveTimer = window.setTimeout(hidePopper, mouseLeaveDelay * 1000);
           } else {
             hidePopper();
           }

package/es/date-picker/date-picker.js

@@ -85,7 +85,6 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
       onClick = datePickerProps.onClick,
       _onOk = datePickerProps.onOk; // ref
 
-  var panelDivRef = React.useRef(null);
   var inputDivRefDefault = React.useRef(null);
   var inputDivRef = ref || inputDivRefDefault;
   var popperRefDefault = React.useRef(null);
@@ -244,9 +243,7 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
     if (!openValue) {
       setSelectedValue(dateValue);
 
-      if (valueText === '') {
-        triggerTextChange('');
-      } else if (valueText !== text) {
+      if (valueText !== text) {
         resetText();
       }
     } else {
@@ -399,7 +396,7 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
 
   var inputProps = {
     inputRef: inputRef,
-    panelDivRef: panelDivRef,
+    panelDivRef: popperRef,
     id: id,
     autoFocus: autoFocus,
     allowClear: allowClear,

package/es/select/interface.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { PopperProps } from '../_utils/usePopper';
+import { AvailableVirtualListProps } from '../virtual-list';
 export declare const SelectSizes: ["large", "middle", "small"];
 export declare type SelectSize = typeof SelectSizes[number];
 export declare const BorderTypes: ["none", "underline", "bordered"];
@@ -37,6 +38,7 @@ export interface AbstractSelectProps extends PopperProps {
     filterOption?: boolean | ((inputValue: string, option?: OptionsType) => boolean);
     optionFilterProp?: string;
     optionLabelProp?: string;
+    virtualListProps?: AvailableVirtualListProps | boolean;
 }
 export interface LabeledValue {
     key?: string;

package/es/select/select.js

@@ -17,6 +17,7 @@ import { toArray } from '../_utils/react-children';
 import { Icon, Checkbox, Tag } from '../index';
 import Option from './option';
 import usePopper from '../_utils/usePopper';
+import VirtualList from '../virtual-list';
 var INPUT_MIN_WIDTH = 4; // 输入框最小宽度
 
 var InternalSelect = function InternalSelect(props, ref) {
@@ -61,7 +62,8 @@ var InternalSelect = function InternalSelect(props, ref) {
       optionLabelProp = selectProps.optionLabelProp,
       _selectProps$popperSt = selectProps.popperStyle,
       popperStyle = _selectProps$popperSt === void 0 ? {} : _selectProps$popperSt,
-      tagRender = selectProps.tagRender;
+      tagRender = selectProps.tagRender,
+      virtualListProps = selectProps.virtualListProps;
   var isMultiple = mode === 'multiple'; // 是否多选
 
   var _useMergedState = useMergedState(undefined, {
@@ -570,6 +572,7 @@ var InternalSelect = function InternalSelect(props, ref) {
         listHeight = selectProps.listHeight;
     var selectedVal = multipleRef.current.selectedVal;
     var childrenToRender = filledOptions;
+    var eleOptionList = filledOptions;
 
     if (Array.isArray(childrenToRender) && childrenToRender.length > 0) {
       childrenToRender = _mapInstanceProperty(childrenToRender).call(childrenToRender, function (item, index) {
@@ -577,6 +580,23 @@ var InternalSelect = function InternalSelect(props, ref) {
         var temp = renderOption(item, index);
         return temp;
       });
+      eleOptionList = /*#__PURE__*/React.createElement(VirtualList, _extends({
+        role: "listbox",
+        data: childrenToRender,
+        itemKey: function itemKey(child) {
+          var _a;
+
+          return (_a = child.props) === null || _a === void 0 ? void 0 : _a.value;
+        },
+        onMouseDown: function onMouseDown(e) {
+          return e === null || e === void 0 ? void 0 : e.preventDefault();
+        },
+        isStaticItemHeight: true,
+        height: listHeight || 300,
+        measureLongestItem: false
+      }, virtualListProps), function (child) {
+        return child;
+      });
     }
 
     var heightStyle = {
@@ -597,7 +617,7 @@ var InternalSelect = function InternalSelect(props, ref) {
       className: dropDownCls,
       style: dropDownStyle,
       ref: dropDownRef
-    }, !dropdownRender && childrenToRender.length > 0 && dropRender(childrenToRender, heightStyle), renderNotContent(), /*#__PURE__*/React.createElement("div", null, dropdownRender && dropdownRender(dropRender(childrenToRender, heightStyle))), isMultiple && /*#__PURE__*/React.createElement("div", {
+    }, !dropdownRender && childrenToRender.length > 0 && dropRender(eleOptionList, heightStyle), renderNotContent(), /*#__PURE__*/React.createElement("div", null, dropdownRender && dropdownRender(dropRender(childrenToRender, heightStyle))), isMultiple && /*#__PURE__*/React.createElement("div", {
       className: multipleFooterCls
     }, /*#__PURE__*/React.createElement(Checkbox, {
       style: checkboxStyle,

package/es/stepper/stepper.js

@@ -13,6 +13,7 @@ import devWarning from '../_utils/devwarning';
 import { tuple } from '../_utils/type';
 import { omit } from '../_utils/omit';
 import { useMergedState } from '../_utils/hooks';
+import { isExp } from '../_utils/numberUtil';
 export var StepTypes = tuple('embed', 'base');
 
 var InternalStepper = function InternalStepper(props, ref) {
@@ -105,7 +106,7 @@ var InternalStepper = function InternalStepper(props, ref) {
       return false;
     }
 
-    var startingNumber = parseFloat(stepperrref.current.value) || parseFloat(inputNumberProps.min) || 0;
+    var startingNumber = isExp(stepperrref.current.value) ? Big(stepperrref.current.value).valueOf() : stepperrref.current.value || parseFloat(inputNumberProps.min) || 0;
     var calculationResults = new Big(startingNumber)[type](stepNum).valueOf();
     var legalNumber = stepperrref.current.verifiValue(calculationResults);
 

package/es/table/feature/colGroupExtendable.d.ts

@@ -0,0 +1,4 @@
+import { colGroupExtendOption } from '@kdcloudjs/table/es/table/pipeline/features';
+import { TablePipeline } from '../interface';
+declare function colGroupExtendable(pipeline: TablePipeline, columnGroupExtend: colGroupExtendOption): void;
+export default colGroupExtendable;

package/es/table/feature/colGroupExtendable.js

@@ -0,0 +1,9 @@
+import { features } from '@kdcloudjs/table';
+
+function colGroupExtendable(pipeline, columnGroupExtend) {
+  if (columnGroupExtend) {
+    pipeline.use(features.colGroupExtendable(columnGroupExtend));
+  }
+}
+
+export default colGroupExtendable;

package/es/table/interface.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { TableProps as BaseTableProps, TablePipeline as TP, ArtColumnStaticPart } from '@kdcloudjs/table';
-import { SortFeatureOptions, RowDetailFeatureOptions, FilterFeatureOptions, TreeModeFeatureOptions, ColumnDragOptions, ColumnResizeOptions, ContextMenuFeatureOptions, RangeSelectionFeatureOptions } from '@kdcloudjs/table/es/table/pipeline/features';
+import { SortFeatureOptions, RowDetailFeatureOptions, FilterFeatureOptions, TreeModeFeatureOptions, ColumnDragOptions, ColumnResizeOptions, ContextMenuFeatureOptions, RangeSelectionFeatureOptions, colGroupExtendOption } from '@kdcloudjs/table/es/table/pipeline/features';
 declare type TablePropsOfComponents = Pick<BaseTableProps, 'components'> & {
     components?: {
         /** 复选框 */
@@ -31,6 +31,7 @@ export interface TableProps extends TablePropsOfExtend, TablePropsOfComponents {
     columnResize?: boolean | ColumnResizeOptions;
     contextMenu?: IContextMenu;
     rangeSelection?: TableRangeSelection;
+    columnGroupExtend?: colGroupExtendOption;
 }
 export declare type RowSelectionType = 'checkbox' | 'radio';
 export declare type RowSelectionFixed = 'start' | 'end';

package/es/table/table.js

@@ -21,6 +21,7 @@ import useRangeSelection from './feature/useRangeSelection';
 import useＭergeCellHover from './feature/mergeCellHover';
 import devWarning from '../_utils/devwarning';
 import useFooterDataSource from './feature/useFooterDataSource';
+import usecolGroupExtendable from './feature/colGroupExtendable';
 var Table = /*#__PURE__*/forwardRef(function (props, ref) {
   var columns = props.columns,
       dataSource = props.dataSource,
@@ -52,7 +53,9 @@ var Table = /*#__PURE__*/forwardRef(function (props, ref) {
       cssVariables = props.cssVariables,
       stickyScrollHeight = props.stickyScrollHeight,
       scrollbarWidth = props.scrollbarWidth,
-      scrollLoad = props.scrollLoad;
+      scrollLoad = props.scrollLoad,
+      _props$columnGroupExt = props.columnGroupExtend,
+      columnGroupExtend = _props$columnGroupExt === void 0 ? {} : _props$columnGroupExt;
 
   var _useContext = useContext(ConfigContext),
       getPrefixCls = _useContext.getPrefixCls,
@@ -106,6 +109,7 @@ var Table = /*#__PURE__*/forwardRef(function (props, ref) {
   useRangeSelection(pipeline, rangeSelection);
   useＭergeCellHover(pipeline);
   useFooterDataSource(pipeline, footerDataSource);
+  usecolGroupExtendable(pipeline, columnGroupExtend);
   /* -------------------------------------------------------------------------- */
 
   /* after useTablePipeline, merge pipeline.getProps result                     */

package/es/virtual-list/Filler.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+interface FillerProps {
+    height: number;
+    offset?: number;
+    outerStyle?: React.CSSProperties;
+    children: React.ReactNode;
+}
+declare const Filler: React.FC<FillerProps>;
+export default Filler;

package/es/virtual-list/Filler.js

@@ -0,0 +1,38 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import * as React from 'react';
+
+var Filler = function Filler(_ref) {
+  var height = _ref.height,
+      offset = _ref.offset,
+      children = _ref.children,
+      propsOuterStyle = _ref.outerStyle;
+  var outerStyle = {};
+  var innerStyle = {
+    display: 'flex',
+    flexDirection: 'column'
+  };
+
+  if (offset !== undefined) {
+    outerStyle = _extends({
+      height: height,
+      position: 'relative',
+      overflow: 'hidden',
+      zIndex: 0
+    }, propsOuterStyle);
+    innerStyle = _extends(_extends({}, innerStyle), {
+      transform: "translateY(".concat(offset, "px)"),
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      top: 0
+    });
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    style: outerStyle
+  }, /*#__PURE__*/React.createElement("div", {
+    style: innerStyle
+  }, children));
+};
+
+export default Filler;

package/es/virtual-list/index.d.ts

@@ -0,0 +1,3 @@
+import VirtualList from './virtual-list';
+export * from './virtual-list';
+export default VirtualList;

package/es/virtual-list/index.js

@@ -0,0 +1,3 @@
+import VirtualList from './virtual-list';
+export * from './virtual-list';
+export default VirtualList;

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

@@ -0,0 +1,19 @@
+import { Key } from './itemUtil';
+/**
+ * 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 declare function getIndexByStartLoc(min: number, max: number, start: number, index: number): number;
+export declare function findListDiffIndex<T>(originList: T[], targetList: T[], getKey: (item: T, index: number) => Key): {
+    index: number;
+    multiple: boolean;
+} | null;

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 {};