rc-virtual-list - npm Package Compare versions

Comparing version 3.6.0 to 3.7.0

es/Filler.d.ts

@@ -15,2 +15,3 @@ import * as React from 'react';
     rtl: boolean;
+    extra?: React.ReactNode;
 }
@@ -17,0 +18,0 @@ /**

es/Filler.js

@@ -14,3 +14,2 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     offsetX = _ref.offsetX,
-    scrollWidth = _ref.scrollWidth,
     children = _ref.children,
@@ -20,3 +19,4 @@ prefixCls = _ref.prefixCls,
     innerProps = _ref.innerProps,
-    rtl = _ref.rtl;
+    rtl = _ref.rtl,
+    extra = _ref.extra;
   var outerStyle = {};
@@ -28,16 +28,12 @@ var innerStyle = {
   if (offsetY !== undefined) {
+    var _objectSpread2;
+    // Not set `width` since this will break `sticky: right`
     outerStyle = {
       height: height,
-      width: scrollWidth,
-      minWidth: '100%',
       position: 'relative',
       overflow: 'hidden'
     };
-    innerStyle = _objectSpread(_objectSpread({}, innerStyle), {}, {
-      transform: "translate(".concat(rtl ? offsetX : -offsetX, "px, ").concat(offsetY, "px)"),
-      position: 'absolute',
-      left: 0,
-      right: 0,
-      top: 0
-    });
+    innerStyle = _objectSpread(_objectSpread({}, innerStyle), {}, (_objectSpread2 = {
+      transform: "translateY(".concat(offsetY, "px)")
+    }, _defineProperty(_objectSpread2, rtl ? 'marginRight' : 'marginLeft', -offsetX), _defineProperty(_objectSpread2, "position", 'absolute'), _defineProperty(_objectSpread2, "left", 0), _defineProperty(_objectSpread2, "right", 0), _defineProperty(_objectSpread2, "top", 0), _objectSpread2));
   }
@@ -57,5 +53,5 @@ return /*#__PURE__*/React.createElement("div", {
     ref: ref
-  }, innerProps), children)));
+  }, innerProps), children), extra));
 });
 Filler.displayName = 'Filler';
 export default Filler;

es/hooks/useChildren.d.ts

 import * as React from 'react';
 import type { SharedConfig, RenderFunc } from '../interface';
-export default function useChildren<T>(list: T[], startIndex: number, endIndex: number, setNodeRef: (item: T, element: HTMLElement) => void, renderFunc: RenderFunc<T>, { getKey }: SharedConfig<T>): React.JSX.Element[];
+export default function useChildren<T>(list: T[], startIndex: number, endIndex: number, scrollWidth: number, setNodeRef: (item: T, element: HTMLElement) => void, renderFunc: RenderFunc<T>, { getKey }: SharedConfig<T>): React.JSX.Element[];

es/hooks/useChildren.js

 import * as React from 'react';
 import { Item } from '../Item';
-export default function useChildren(list, startIndex, endIndex, setNodeRef, renderFunc, _ref) {
+export default function useChildren(list, startIndex, endIndex, scrollWidth, setNodeRef, renderFunc, _ref) {
   var getKey = _ref.getKey;
@@ -8,3 +8,5 @@ return list.slice(startIndex, endIndex + 1).map(function (item, index) {
     var node = renderFunc(item, eleIndex, {
-      // style: status === 'MEASURE_START' ? { visibility: 'hidden' } : {},
+      style: {
+        width: scrollWidth
+      }
     });
@@ -11,0 +13,0 @@ var key = getKey(item);

es/interface.d.ts

@@ -9,1 +9,12 @@ /// <reference types="react" />
 export type GetKey<T> = (item: T) => React.Key;
+export interface ExtraRenderInfo {
+    /** Virtual list start line */
+    start: number;
+    /** Virtual list end line */
+    end: number;
+    /** Is current in virtual render */
+    virtual: boolean;
+    /** Used for `scrollWidth` tell the horizontal offset */
+    offsetX: number;
+    rtl: boolean;
+}

es/List.d.ts

 import * as React from 'react';
 import type { InnerProps } from './Filler';
 import type { ScrollBarDirectionType } from './ScrollBar';
-import type { RenderFunc } from './interface';
+import type { RenderFunc, ExtraRenderInfo } from './interface';
 export type ScrollAlign = 'top' | 'bottom' | 'auto';
@@ -43,2 +43,4 @@ export type ScrollConfig = {
     innerProps?: InnerProps;
+    /** Render extra content into Filler */
+    extraRender?: (info: ExtraRenderInfo) => React.ReactNode;
 }
@@ -45,0 +47,0 @@ export declare function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>): React.JSX.Element;

es/List.js

@@ -6,3 +6,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["prefixCls", "className", "height", "itemHeight", "fullHeight", "style", "data", "children", "itemKey", "virtual", "direction", "scrollWidth", "component", "onScroll", "onVisibleChange", "innerProps"];
+var _excluded = ["prefixCls", "className", "height", "itemHeight", "fullHeight", "style", "data", "children", "itemKey", "virtual", "direction", "scrollWidth", "component", "onScroll", "onVisibleChange", "innerProps", "extraRender"];
 import * as React from 'react';
@@ -49,2 +49,3 @@ import { useRef, useState } from 'react';
     innerProps = props.innerProps,
+    extraRender = props.extraRender,
     restProps = _objectWithoutProperties(props, _excluded);
@@ -309,3 +310,10 @@ // ================================= MISC =================================
   // ================================ Render ================================
-  var listChildren = useChildren(mergedData, start, end, setInstanceRef, children, sharedConfig);
+  var listChildren = useChildren(mergedData, start, end, scrollWidth, setInstanceRef, children, sharedConfig);
+  var extraContent = extraRender === null || extraRender === void 0 ? void 0 : extraRender({
+    start: start,
+    end: end,
+    virtual: inVirtual,
+    offsetX: offsetLeft,
+    rtl: isRTL
+  });
   var componentStyle = null;
@@ -350,4 +358,5 @@ if (height) {
     innerProps: innerProps,
-    rtl: isRTL
-  }, listChildren))), useVirtual && scrollHeight > height && /*#__PURE__*/React.createElement(ScrollBar, {
+    rtl: isRTL,
+    extra: extraContent
+  }, listChildren))), inVirtual && scrollHeight > height && /*#__PURE__*/React.createElement(ScrollBar, {
     ref: verticalScrollBarRef,
@@ -363,3 +372,3 @@ prefixCls: prefixCls,
     containerSize: size.height
-  }), useVirtual && scrollWidth && /*#__PURE__*/React.createElement(ScrollBar, {
+  }), inVirtual && scrollWidth && /*#__PURE__*/React.createElement(ScrollBar, {
     ref: horizontalScrollBarRef,
@@ -366,0 +375,0 @@ prefixCls: prefixCls,

lib/Filler.d.ts

@@ -15,2 +15,3 @@ import * as React from 'react';
     rtl: boolean;
+    extra?: React.ReactNode;
 }
@@ -17,0 +18,0 @@ /**

lib/Filler.js

@@ -11,3 +11,3 @@ "use strict";
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var React = _interopRequireWildcard(require("react"));
@@ -23,3 +23,2 @@ var _rcResizeObserver = _interopRequireDefault(require("rc-resize-observer"));
     offsetX = _ref.offsetX,
-    scrollWidth = _ref.scrollWidth,
     children = _ref.children,
@@ -29,3 +28,4 @@ prefixCls = _ref.prefixCls,
     innerProps = _ref.innerProps,
-    rtl = _ref.rtl;
+    rtl = _ref.rtl,
+    extra = _ref.extra;
   var outerStyle = {};
@@ -37,16 +37,12 @@ var innerStyle = {
   if (offsetY !== undefined) {
+    var _objectSpread2;
+    // Not set `width` since this will break `sticky: right`
     outerStyle = {
       height: height,
-      width: scrollWidth,
-      minWidth: '100%',
       position: 'relative',
       overflow: 'hidden'
     };
-    innerStyle = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, innerStyle), {}, {
-      transform: "translate(".concat(rtl ? offsetX : -offsetX, "px, ").concat(offsetY, "px)"),
-      position: 'absolute',
-      left: 0,
-      right: 0,
-      top: 0
-    });
+    innerStyle = (0, _objectSpread3.default)((0, _objectSpread3.default)({}, innerStyle), {}, (_objectSpread2 = {
+      transform: "translateY(".concat(offsetY, "px)")
+    }, (0, _defineProperty2.default)(_objectSpread2, rtl ? 'marginRight' : 'marginLeft', -offsetX), (0, _defineProperty2.default)(_objectSpread2, "position", 'absolute'), (0, _defineProperty2.default)(_objectSpread2, "left", 0), (0, _defineProperty2.default)(_objectSpread2, "right", 0), (0, _defineProperty2.default)(_objectSpread2, "top", 0), _objectSpread2));
   }
@@ -66,3 +62,3 @@ return /*#__PURE__*/React.createElement("div", {
     ref: ref
-  }, innerProps), children)));
+  }, innerProps), children), extra));
 });
@@ -69,0 +65,0 @@ Filler.displayName = 'Filler';

lib/hooks/useChildren.d.ts

 import * as React from 'react';
 import type { SharedConfig, RenderFunc } from '../interface';
-export default function useChildren<T>(list: T[], startIndex: number, endIndex: number, setNodeRef: (item: T, element: HTMLElement) => void, renderFunc: RenderFunc<T>, { getKey }: SharedConfig<T>): React.JSX.Element[];
+export default function useChildren<T>(list: T[], startIndex: number, endIndex: number, scrollWidth: number, setNodeRef: (item: T, element: HTMLElement) => void, renderFunc: RenderFunc<T>, { getKey }: SharedConfig<T>): React.JSX.Element[];

lib/hooks/useChildren.js

@@ -10,3 +10,3 @@ "use strict";
 var _Item = require("../Item");
-function useChildren(list, startIndex, endIndex, setNodeRef, renderFunc, _ref) {
+function useChildren(list, startIndex, endIndex, scrollWidth, setNodeRef, renderFunc, _ref) {
   var getKey = _ref.getKey;
@@ -16,3 +16,5 @@ return list.slice(startIndex, endIndex + 1).map(function (item, index) {
     var node = renderFunc(item, eleIndex, {
-      // style: status === 'MEASURE_START' ? { visibility: 'hidden' } : {},
+      style: {
+        width: scrollWidth
+      }
     });
@@ -19,0 +21,0 @@ var key = getKey(item);

lib/interface.d.ts

@@ -9,1 +9,12 @@ /// <reference types="react" />
 export type GetKey<T> = (item: T) => React.Key;
+export interface ExtraRenderInfo {
+    /** Virtual list start line */
+    start: number;
+    /** Virtual list end line */
+    end: number;
+    /** Is current in virtual render */
+    virtual: boolean;
+    /** Used for `scrollWidth` tell the horizontal offset */
+    offsetX: number;
+    rtl: boolean;
+}

lib/List.d.ts

 import * as React from 'react';
 import type { InnerProps } from './Filler';
 import type { ScrollBarDirectionType } from './ScrollBar';
-import type { RenderFunc } from './interface';
+import type { RenderFunc, ExtraRenderInfo } from './interface';
 export type ScrollAlign = 'top' | 'bottom' | 'auto';
@@ -43,2 +43,4 @@ export type ScrollConfig = {
     innerProps?: InnerProps;
+    /** Render extra content into Filler */
+    extraRender?: (info: ExtraRenderInfo) => React.ReactNode;
 }
@@ -45,0 +47,0 @@ export declare function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>): React.JSX.Element;

lib/List.js

@@ -30,3 +30,3 @@ "use strict";
 var _rcUtil = require("rc-util");
-var _excluded = ["prefixCls", "className", "height", "itemHeight", "fullHeight", "style", "data", "children", "itemKey", "virtual", "direction", "scrollWidth", "component", "onScroll", "onVisibleChange", "innerProps"];
+var _excluded = ["prefixCls", "className", "height", "itemHeight", "fullHeight", "style", "data", "children", "itemKey", "virtual", "direction", "scrollWidth", "component", "onScroll", "onVisibleChange", "innerProps", "extraRender"];
 var EMPTY_DATA = [];
@@ -57,2 +57,3 @@ var ScrollStyle = {
     innerProps = props.innerProps,
+    extraRender = props.extraRender,
     restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
@@ -317,3 +318,10 @@ // ================================= MISC =================================
   // ================================ Render ================================
-  var listChildren = (0, _useChildren.default)(mergedData, start, end, setInstanceRef, children, sharedConfig);
+  var listChildren = (0, _useChildren.default)(mergedData, start, end, scrollWidth, setInstanceRef, children, sharedConfig);
+  var extraContent = extraRender === null || extraRender === void 0 ? void 0 : extraRender({
+    start: start,
+    end: end,
+    virtual: inVirtual,
+    offsetX: offsetLeft,
+    rtl: isRTL
+  });
   var componentStyle = null;
@@ -358,4 +366,5 @@ if (height) {
     innerProps: innerProps,
-    rtl: isRTL
-  }, listChildren))), useVirtual && scrollHeight > height && /*#__PURE__*/React.createElement(_ScrollBar.default, {
+    rtl: isRTL,
+    extra: extraContent
+  }, listChildren))), inVirtual && scrollHeight > height && /*#__PURE__*/React.createElement(_ScrollBar.default, {
     ref: verticalScrollBarRef,
@@ -371,3 +380,3 @@ prefixCls: prefixCls,
     containerSize: size.height
-  }), useVirtual && scrollWidth && /*#__PURE__*/React.createElement(_ScrollBar.default, {
+  }), inVirtual && scrollWidth && /*#__PURE__*/React.createElement(_ScrollBar.default, {
     ref: horizontalScrollBarRef,
@@ -374,0 +383,0 @@ prefixCls: prefixCls,

package.json

 {
   "name": "rc-virtual-list",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "description": "React Virtual List Component",
@@ -5,0 +5,0 @@ "engines": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

109469

increased by1.86%

Lines of code

2757

increased by1.62%

No dependency changes