react-virtuoso - npm Package Compare versions

Comparing version 0.0.0-development to 0.0.0-prepend

dist/index.d.ts

 import { default as React_2 } from 'react';
 
+export declare type CalculateViewLocation = (params: CalculateViewLocationParams) => IndexLocationWithAlign | number | null;
+
+export declare interface CalculateViewLocationParams {
+    itemTop: number;
+    itemBottom: number;
+    viewportTop: number;
+    viewportBottom: number;
+    locationParams: {
+        align?: 'start' | 'center' | 'end';
+        behavior?: 'auto' | 'smooth';
+    } & ({
+        index: number;
+    } | {
+        groupIndex: number;
+    });
+}
+
 /**
@@ -178,4 +195,4 @@ * Customize the Virtuoso rendering by passing a set of custom components.
 
-export declare interface GroupContent {
-    (index: number): React_2.ReactNode;
+export declare interface GroupContent<C> {
+    (index: number, context: C): React_2.ReactNode;
 }
@@ -208,3 +225,3 @@
      */
-    groupContent?: GroupContent;
+    groupContent?: GroupContent<C>;
     /**
@@ -214,2 +231,16 @@ * Specifies how each each item gets rendered.
     itemContent?: GroupItemContent<D, C>;
+    /**
+     * Use when implementing inverse infinite scrolling, decrease the value this property
+     * in combination with a change in `groupCounts` to prepend groups items to the top of the list.
+     * Both new groups and extending the top group is supported.
+     *
+     * The delta of the firstItemIndex should equal the amount of new items introduced, without the group themselves.
+     * As an example, if you prepend 2 groups with 20 and 30 items each, the firstItemIndex should be decreased with 50.
+     *
+     * You can also prepend more items to the first group, for example:
+     * \{ groupCounts: [20, 30], firstItemIndex: 1000 \} can become \{ groupCounts: [10, 30, 30], firstItemIndex: 980 \}
+     *
+     * Warning: the firstItemIndex should **be a positive number**, based on the total amount of items to be displayed.
+     */
+    firstItemIndex?: number;
 }
@@ -324,3 +355,30 @@
     behavior?: 'auto' | 'smooth';
+    /**
+     * Will be called when the scroll is done, or immediately if no scroll is needed.
+     */
     done?: () => void;
+    /**
+     * Use this function to fine-tune the scrollIntoView behavior.
+     * The function receives the item's top and bottom position in the viewport, and the viewport top/bottom.
+     * Return an location object to scroll, or null to prevent scrolling.
+     * Here's the default implementation:
+     * ```ts
+     const defaultCalculateViewLocation: CalculateViewLocation = ({
+     itemTop,
+     itemBottom,
+     viewportTop,
+     viewportBottom,
+     locationParams: { behavior, align, ...rest },
+     }) => {
+     if (itemTop < viewportTop) {
+     return { ...rest, behavior, align: align ?? 'start' }
+     }
+     if (itemBottom > viewportBottom) {
+     return { ...rest, behavior, align: align ?? 'end' }
+     }
+     return null
+     }
+     *```
+     */
+    calculateViewLocation?: CalculateViewLocation;
 }
@@ -338,3 +396,3 @@
     /**
-     * Callback to determine if the list should enter "scroll seek" mode.
+     * Callback to determine if the list should exit "scroll seek" mode.
      */
@@ -739,2 +797,8 @@ exit: ScrollSeekToggle;
     customScrollParent?: HTMLElement;
+    /**
+     * set to LogLevel.DEBUG to enable various diagnostics in the console, the most useful being the item measurement reports.
+     *
+     * Ensure that you have "all levels" enabled in the browser console too see the messages.
+     */
+    logLevel?: LogLevel;
 }
@@ -965,2 +1029,8 @@
     atBottomThreshold?: number;
+    /**
+     * set to LogLevel.DEBUG to enable various diagnostics in the console, the most useful being the item measurement reports.
+     *
+     * Ensure that you have "all levels" enabled in the browser console too see the messages.
+     */
+    logLevel?: LogLevel;
 }
@@ -967,0 +1037,0 @@

package.json

@@ -6,3 +6,3 @@ {
   "sideEffects": false,
-  "version": "0.0.0-development",
+  "version": "0.0.0-prepend",
   "homepage": "https://virtuoso.dev/",
@@ -9,0 +9,0 @@ "license": "MIT",

README.md

@@ -8,14 +8,14 @@ <img src="https://user-images.githubusercontent.com/13347/101237112-ec4c6000-36de-11eb-936d-4b6b7ec94976.png" width="229" />
 - Variable sized items out of the box; no manual measurements or hard-coding item heights is necessary;
-- Support for [reverse (bottom up) scrolling and prepending items](//virtuoso.dev/prepend-items/) (chat, feeds, etc);
-- [Grouped mode with sticky headers](//virtuoso.dev/grouped-by-first-letter/);
-- [Responsive grid layout](//virtuoso.dev/grid-responsive-columns/);
-- [Table Support](//virtuoso.dev/hello-table/);
-- [Automatic handling of content resize](//virtuoso.dev/auto-resizing/);
-- [Custom Header, Footer, and empty list components](//virtuoso.dev/customize-structure/);
-- [Pinned top items](//virtuoso.dev/top-items/);
-- [Endless scrolling](//virtuoso.dev/endless-scrolling/), [press to load more](//virtuoso.dev/press-to-load-more/);
-- [Initial top most item index](//virtuoso.dev/initial-index/);
-- [Scroll to index method](//virtuoso.dev/scroll-to-index/).
+- Support for [reverse (bottom up) scrolling and prepending items](https://virtuoso.dev/prepend-items/) (chat, feeds, etc);
+- [Grouped mode with sticky headers](https://virtuoso.dev/grouped-by-first-letter/);
+- [Responsive grid layout](https://virtuoso.dev/grid-responsive-columns/);
+- [Table Support](https://virtuoso.dev/hello-table/);
+- [Automatic handling of content resize](https://virtuoso.dev/auto-resizing/);
+- [Custom Header, Footer, and empty list components](https://virtuoso.dev/customize-structure/);
+- [Pinned top items](https://virtuoso.dev/top-items/);
+- [Endless scrolling](https://virtuoso.dev/endless-scrolling/), [press to load more](https://virtuoso.dev/press-to-load-more/);
+- [Initial top most item index](https://virtuoso.dev/initial-index/);
+- [Scroll to index method](https://virtuoso.dev/scroll-to-index/).
 
-For live examples and documentation, check the [documentation website](//virtuoso.dev).
+For live examples and documentation, check the [documentation website](https://virtuoso.dev).
 
@@ -44,3 +44,3 @@ ## Sponsors
 
-## [Grouped Mode](//virtuoso.dev/grouped-by-first-letter/)
+## [Grouped Mode](https://virtuoso.dev/grouped-by-first-letter/)
 
@@ -54,3 +54,3 @@ The `GroupedVirtuoso` component is a variant of the "flat" `Virtuoso`, with the following differences:
 
-## [Grid](//virtuoso.dev/grid-responsive-columns/)
+## [Grid](https://virtuoso.dev/grid-responsive-columns/)
 
@@ -60,3 +60,3 @@ The `VirtuosoGrid` component displays **same sized items** in multiple columns.
 
-## [Table](//virtuoso.dev/hello-table/)
+## [Table](https://virtuoso.dev/hello-table/)
 
@@ -68,8 +68,8 @@ The `TableVirtuoso` component works just like `Virtuoso`, but with HTML tables.
 
-You can customize the markup up to your requirements - check [the Material UI list demo](//virtuoso.dev/material-ui-endless-scrolling/).
-If you need to support reordering, [check the React Sortable HOC example](//virtuoso.dev/react-sortable-hoc/).
+You can customize the markup up to your requirements - check [the Material UI list demo](https://virtuoso.dev/material-ui-endless-scrolling/).
+If you need to support reordering, [check the React Sortable HOC example](https://virtuoso.dev/react-sortable-hoc/).
 
 ## Documentation and Demos
 
-For in-depth documentation and live examples of the supported features and live demos, check the [documentation website](//virtuoso.dev).
+For in-depth documentation and live examples of the supported features and live demos, check the [documentation website](https://virtuoso.dev).
 
@@ -76,0 +76,0 @@ ## Browser support

No alert changes

Improved metrics

Total package byte prevSize

238440

4.84%

Lines of code

5258

4.85%

No dependency changes