react-infinite-grid-scroller - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

package.json

		{
		"name": "react-infinite-grid-scroller",
		"version": "2.1.0",
		"version": "2.2.0",
		"description": "infinite vertical or horizontal scroll using css grid layout",
		@@ -5,0 +5,0 @@ "main": "index.js",

README.md

		# react-infinite-grid-scroller (RIGS)
		Heavy-duty vertical or horizontal infinite scroller

		[![npm](https://img.shields.io/badge/npm-2.1.0-brightgreen)](https://www.npmjs.com/package/react-infinite-grid-scroller) [![licence](https://img.shields.io/badge/licence-MIT-green)](LICENSE.md)
		[![npm](https://img.shields.io/badge/npm-2.2.0-brightgreen)](https://www.npmjs.com/package/react-infinite-grid-scroller) [![licence](https://img.shields.io/badge/licence-MIT-green)](LICENSE.md)

		@@ -97,3 +97,3 @@ # Key Features
		\|cellMinWidth:integer\| default = 25, minimum = 25, maximum = cellWidth\|used for 'variable' layout with 'horizontal' orientation. Applied to `min-width`\|
		\|gap:integer \\| []\| number of pixels between cells\|there is no gap at start or end of rows or columns; default = 0; accepts an array of integers as well as a standalone integer. Values match standard CSS order. Standalone integer = gap (in pixels) for both of column-gap (horizontal) and row-gap (vertical). 1-item array, same as integer. 2-item array = [col-gap, row-gap]\|
		\|gap:integer \\| integer[]\| number of pixels between cells\|there is no gap at start or end of rows or columns; default = 0; accepts an array of integers as well as a standalone integer. Values match standard CSS order. Standalone integer = gap (in pixels) for both of column-gap (horizontal) and row-gap (vertical). 1-item array, same as integer. 2-item array = [col-gap, row-gap]\|
		\|getItemPack(index:integer, itemID:integer, context:object): object \|host-provided function. `index` signifies position in list; session `itemID` (integer) is for tracking and matching. `context` provides an `accept` property when dnd is installed. Arguments provided by system\|required. Must return a simple object with three properties: `component` - a React component or promise of a component (`React.isValidElement`), `dndOptions` (if dnd is enabled; see Drag and Drop section), and `profile`- a simple host-defined object which gets returned to the host for identification in various contexts\|
		@@ -105,3 +105,3 @@ \|[_LIST CONFIGURATION_]\|
		\|layout:string\| 'uniform' (default), 'variable', or 'static'\|specifies handling of the height or width of cells, depending on orientation. 'uniform' is fixed cellHeight/cellWidth. 'variable' is constrained by cellHeight/cellWidth (maximum) and cellMinHeight/cellMinWidth (minimum). See the `staticComponent` property regarding the special 'static' option.\|
		\|padding:integer \\| []\| number of pixels padding the `Scrollblock`\| default = 0; accepts an array of integers as well as a standalone integer. Values match standard CSS order. Standalone integer = padding (in pixels) for all of top, right, bottom, left. 1-item array, same as integer. 2-item array = [t/b, r/l]. 3-item array = [t, r/l, b]. 4-item array = [t, r, b, l]\|
		\|padding:integer \\| integer[]\| number of pixels padding the `Scrollblock`\| default = 0; accepts an array of integers as well as a standalone integer. Values match standard CSS order. Standalone integer = padding (in pixels) for all of top, right, bottom, left. 1-item array, same as integer. 2-item array = [t/b, r/l]. 3-item array = [t, r/l, b]. 4-item array = [t, r, b, l]\|
		\|getExpansionCount(position:string, index:ingeger): integer\| function optionally provided by host. Called whenever the lowindex or highindex are loaded into the Cradle.\| `position` = "SOL" or "EOL"; index = the lowindex or highindex. Should return the number by which to expand the virtual list\|
		@@ -402,2 +402,3 @@ \|getDropEffect(sourceScrollerID, targetScrollerID, context): 'move' \\| 'copy'\\| 'none' \\| `undefined`\|function, optional, for `RigsDnd` component only\|called whenever drag `isOver` and `canDrop` are true on a list; returns drop constraint. See Drag and Drop below. \|
		- create a `getDropEffect` function if needed, and pass this to the `RigsDnd` root component
		- creat a `nativeTypeCallback` function and provide it to scroller `dndOptions` for handling of native type (file, url or text) drag and drop
		- track drag and drop transfers with `dragDropTransferCallback` if desired
		@@ -435,2 +436,3 @@
		showScrollTabs, // default = true. When set to false, suppresses the scroll tabs on the scroller during drag.
		nativeTypeCallback, // a host provided function to return the result of a native type drag and drop. See below.
		}
		@@ -516,2 +518,29 @@ ```

		## The native type drag and drop (file, url, and text)

		On desktop systems, RIGS scrollers can accept native types (file, url, and text).

		To accomplish this, first add the following to the scroller `dndOptions.accept` array:['\_\_NATIVE_FILE\_\_', '\_\_NATIVE_URL\_\_', '\_\_NATIVE_TEXT\_\_']

		Then provide a scroller `dndOptions.nativeTypeCallback` function, which RIGS uses to return the result of the drag and drop for further processing. The `nativeTypeCallback` has two parameters, `item` and `context`. `item` is data returned by `react-dnd` for further processing, and context is provided by RIGS for more information, as follows:

		```tsx
		item: { // provided by system for further processing
		dataTransfer,
		files,
		items,
		}

		context: { // provided by RIGS for further information
		contextType:'nativeType',
		internalDropResult: {
		dataType, // location type of the drop - 'cellframe' or 'viewport'
		dropEffect, // the computed drop effect at the time of drop
		target, // target data - scrollerID, and itemID and index if dataType is 'cellframe'
		},
		itemType, // the native type
		}
		```


		## Layout
		@@ -518,0 +547,0 @@

lib/build.js

Sorry, the diff of this file is too big to display

src/CellFrame/DndCellFrame.tsx