Package Exports
- react-pannable
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-pannable) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
react-pannable
Simulate pan gesture and scroll view for touch devices with React
Getting started
Install react-pannable using npm.
npm install --save react-pannableExamples
Some Pannable demos
Some Pad demos
- Scrollable Content
- Locating Specified Content
- Auto Resizing with Pad
- Layout with General Content
- Layout with Grid Content
- Layout with List Content
API Reference
Pannable
Pannable provides a pan gesture simulation on recent mobile browsers for iOS and Android. It can also be used on mouse-base devices across on all evergreen browsers.
type Point = { x: number, y: number };
type PanEvent = {
translation: Point,
velocity: Point,
interval: number,
target: HTMLElement,
};Prop Types
| Property | Type | DefaultValue | Description |
|---|---|---|---|
| enabled | boolean | true | Indicate whether the gesture listener is enabled. If you change this property to false while the gesture is listening, the gesture transitions to cancel. |
| shouldStart | function | () => true | Whether to start gesture listening. : (evt: PanEvent) => void |
| onStart | function | () => {} | Callback invoked when the gesture starts listening.: (evt: PanEvent) => void |
| onMove | function | () => {} | Callback invoked when the gesture moves.: (evt: PanEvent) => void |
| onEnd | function | () => {} | Callback invoked when the gesture ended listening.: (evt: PanEvent) => void |
| onCancel | function | () => {} | Callback invoked when the gesture cancelled.: (evt: PanEvent) => void |
Pad
Pad provides a scrollable content component on which overflow scrollbars are not natively supported. It also provides paging scroll implementation and multiple content layout mode.
type Point = { x: number, y: number };
type Size = { width: number, height: number };
type Rect = { x: number, y: number, width: number, height: number };
type AlignEnum = 'auto' | 'center' | 'start' | 'end' | number;
type Align = { x: AlignEnum, y: AlignEnum } | AlignEnum;
type PadEvent = {
contentOffset: Point,
contentVelocity: Point,
size: Size,
contentSize: Size,
dragging: boolean,
decelerating: boolean,
};Prop Types
| Property | Type | DefaultValue | Description |
|---|---|---|---|
| children | element,function | null | Rendered content. Can be a render function, or a rendered element.:(pad: Pad) => element |
| width | number | 0 | The width of the bounding view. |
| height | number | 0 | The height of the bounding view. |
| scrollEnabled | boolean | true | Determines whether scrolling is enabled. |
| pagingEnabled | boolean | false | Determines whether paging is enabled. |
| directionalLockEnabled | boolean | false | Determines whether scrolling is disabled in a particular direction. |
| alwaysBounceX | boolean | true | Determines whether bouncing always occurs when horizontal scrolling reaches the end of the content. |
| alwaysBounceY | boolean | true | Determines whether bouncing always occurs when vertical scrolling reaches the end of the content. |
| onScroll | function | () => {} | Callback invoked when the content view scrolls.:(evt: PadEvent) => void |
| onDragStart | function | () => {} | Callback invoked when start dragging the content.:(evt: PadEvent) => void |
| onDragEnd | function | () => {} | Callback invoked when end dragging the content.:(evt: PadEvent) => void |
| onDecelerationStart | function | () => {} | Callback invoked when the content start decelerating.:(evt: PadEvent) => void |
| onDecelerationEnd | function | () => {} | Callback invoked when the content end decelerating.:(evt: PadEvent) => void |
| onContentResize | function | () => {} | Callback invoked when the content view resize.:(size: Size) => void |
Public Methods
scrollTo({ offset: Point, animated: boolean })
Sets the offset from the content view’s origin.
scrollToRect({ rect: Rect, align: Align, animated: boolean })
Scrolls a specific area of the content so that it is visible.
AutoResizing
AutoResizing calculates the filling size of the view automatically.
type Size = { width: number, height: number };Prop Types
| Property | Type | DefaultValue | Description |
|---|---|---|---|
| children | element,function | null | The render function passing the calculated width and height.:(size: Size) => element |
| width | number | null | The width of the content. If not specified, it calculates the filling width of the view. |
| height | number | null | The height of the content. If not specified, it calculates the filling height of the view. |
| onResize | function | () => {} | Invoked when the view resize.:(size: Size) => void |
Public Methods
getSize()
Returns the real size of the view.
calculateSize()
Calculate the size of the view manually.
ItemContent
ItemContent calculates the fitting size of the content.
type Size = { width: number, height: number };Prop Types
| Property | Type | DefaultValue | Description |
|---|---|---|---|
| width | number | null | The width of the content. If not specified, it calculates the fitting width of the content. |
| height | number | null | The width of the content. If not specified, it calculates the fitting height of the content. |
| visibleRect | Rect | { x: 0, y: 0, width: 0, height: 0 } | The area of the visible content. |
| onResize | function | () => {} | Invoked when the content resize.:(size: Size) => void |
| connectWithPad | boolean | true | Automatic synchronize the content size and visible rectangle with Pad |
Public Methods
getSize()
Returns the real size of the content.
calculateSize()
Calculate the size of the content manually.
GeneralContent
GeneralContent is similar to ItemContent. The difference between them is that GeneralContent listens the content and automatically calculates the size when the content resize.
ListContent
ListContent displays data in a single line of customizable items.
type Size = { width: number, height: number };
type Rect = { x: number, y: number, width: number, height: number };
type ItemProps = {
key: string,
hash: string,
forceRender: boolean,
style: object,
};
type Item = React.Element<ItemProps>;
type LayoutAttrs = {
itemIndex: number,
rect: Rect,
visibleRect: Rect,
needsRender: boolean,
Item: Item,
};Prop Types
| Property | Type | DefaultValue | Description |
|---|---|---|---|
| direction | 'x','y' | 'y' | The direction of the list. |
| width | number | null | The suggested width of the content. |
| height | number | null | The suggested height of the content. |
| spacing | number | 0 | The minimum spacing to use between items in the list. |
| itemCount | number | 0 | The number of items. |
| estimatedItemWidth | number | 0 | The estimated width of the item. |
| estimatedItemHeight | number | 0 | The estimated height of the item. |
| renderItem | function | () => null | The renderer of the item.:(attrs: LayoutAttrs) => element |
| visibleRect | Rect | { x: 0, y: 0, width: 0, height: 0 } | The area of the visible content. |
| onResize | function | () => {} | Callback invoked when the content resize.:(size: Size) => void |
| connectWithPad | boolean | true | Automatic synchronize the content size and visible rectangle with Pad |
Public Methods
getItemRect({ itemIndex: number })
Returns the area of item at the specified index.
GridContent
GridContent displays data in multiple rows and columns with the same size.
type Size = { width: number, height: number };
type Rect = { x: number, y: number, width: number, height: number };
type ItemProps = {
key: string,
forceRender: boolean,
style: object,
};
type Item = React.Element<ItemProps>;
type LayoutAttrs = {
itemIndex: number,
rowIndex: number,
columnIndex: number,
rect: Rect,
visibleRect: Rect,
needsRender: boolean,
Item: Item,
};Prop Types
| Property | Type | DefaultValue | Description |
|---|---|---|---|
| direction | 'x','y' | 'y' | The direction of the grid. |
| width | number | null | The suggested width of the content. |
| height | number | null | The suggested height of the content. |
| rowSpacing | number | 0 | The minimum spacing to use between rows of items in the grid. |
| columnSpacing | number | 0 | The minimum spacing to use between columns of items in the grid. |
| itemCount | number | 0 | The number of items. |
| itemWidth | number | 0 | The width of the item. |
| itemHeight | number | 0 | The height of the item. |
| renderItem | function | () => null | The renderer of the item.:(attrs: LayoutAttrs) => element |
| visibleRect | Rect | { x: 0, y: 0, width: 0, height: 0 } | The area of the visible content. |
| onResize | function | () => {} | Callback invoked when the content resize.:(size: Size) => void |
| connectWithPad | boolean | true | Automatic synchronize the content size and visible rectangle with Pad |
Public Methods
getItemRect({ itemIndex: number, rowIndex: number, columnIndex: number })
Returns the area of item at the specified indexes.