Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-virtuoso
Advanced tools
react-virtuoso - npm Package Compare versions
Comparing version 0.0.0-development to 0.0.0-prepend
| 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 @@ |
@@ -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", |
@@ -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 |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by4.84%
238440
- Lines of code
- increased by4.85%
5258
No dependency changes