Package Exports

rc-gesture

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 (rc-gesture) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

rc-gesture

Support gesture for react component, inspired by hammer.js and AlloyFinger.

Screenshots

Features

Install

npm install --save rc-gesture

Usage

import Gesture from 'rc-gesture';

ReactDOM.render(
  <Gesture
    onTap={(gestureStatus) => { console.log(gestureStatus); }}
  >
    <div>container</div>
  </Gesture>,
container);

API

all callback funtion will have one parammeter: type GestureHandler = (s: IGestureStatus) => void;

gesture: the rc-gesture state object, which contain all information you may need, see gesture

props:

common props

name	type	default	description
direction	string	`all`	control the allowed gesture direction, could be `['all', 'vertical', 'horizontal']`

Tap & Press

name	type	description
onTap	function	single tap callback
onPress	function	long tap callback
onPressOut	function	long tap end callback

Swipe

name	type	description
onSwipe	function	swipe callback, will triggered at the same time of all of below callback
onSwipeLeft	function	swipe left callback
onSwipeRight	function	swipe right callback
onSwipeTop	function	swipe top callback
onSwipeBottom	function	swipe bottom callback

Pan

name	type	description
onPan	function	pan callback, will triggered at the same time of all of below callback
onPanStart	function	drag start callback
onPanMove	function	drag move callback
onPanEnd	function	drag end callback
onPanCancel	function	drag cancel callback
onPanLeft	function	pan left callback
onPanRight	function	pan right callback
onPanTop	function	pan top callback
onPanBottom	function	pan bottom callback

Pinch

pinch gesture is not enabled by default, you must set props.enablePinch = true at first;

name	type	description
onPinch	function	pinch callback, will triggered at the same time of all of below callback
onPinchStart	function	pinch start callback
onPinchMove	function	pinch move callback
onPinchEnd	function	pinch end callback
onPanCancel	function	pinch cancel callback
onPinchIn	function	pinch in callback
onPinchOut	function	pinch out callback

Rotate

pinch gesture is not enabled by default, you must set props.enableRotate = true at first;

name	type	description
onRotate	function	rotate callback, will triggered at the same time of all of below callback
onRotateStart	function	rotate start callback
onRotateMove	function	rotate move callback
onRotateEnd	function	rotate end callback
onRotateCancel	function	rotate cancel callback

gesture

// http://hammerjs.github.io/api/#event-object
export interface IGestureStauts {
    /* start status snapshot */
    startTime: number;
    startTouches: Finger[];

    startMutliFingerStatus?: MultiFingerStatus[];

    /* now status snapshot */
    time: number;
    touches: Finger[];

    mutliFingerStatus?: MultiFingerStatus[];

    /* delta status from touchstart to now, just for singe finger */
    moveStatus?: SingeFingerMoveStatus;

    /* whether is a long tap */
    press?: boolean;

    /* whether is a swipe*/
    swipe?: boolean;
    direction?: number;

    /* whether is in pinch process */
    pinch?: boolean;
    scale?: number;

    /* whether is in rotate process */
    rotate?: boolean;
    rotation?: number; // Rotation (in deg) that has been done when multi-touch. 0 on a single touch.
};

Development

npm install
npm start

Example

npm start and then go to http://localhost:8005/examples/

Online examples: http://react-component.github.io/gesture/

Test Case

http://localhost:8005/tests/runner.html?coverage

Coverage

http://localhost:8005/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8088/tests/runner.html?coverage

License

rc-gesture is released under the MIT license.