├── .editorconfig ├── .gitignore ├── .travis.yml ├── HISTORY.md ├── LICENSE ├── README.md ├── examples ├── simple.html └── simple.tsx ├── index.js ├── package.json ├── src ├── config.tsx ├── index.tsx └── util.tsx └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # top-most EditorConfig file 2 | root = true 3 | 4 | # Unix-style newlines with a newline ending every file 5 | [*.{js,css}] 6 | end_of_line = lf 7 | insert_final_newline = true 8 | indent_style = space 9 | indent_size = 2 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.iml 2 | *.log 3 | *.log.* 4 | .idea/ 5 | .ipr 6 | .iws 7 | *~ 8 | ~* 9 | *.diff 10 | *.patch 11 | *.bak 12 | .DS_Store 13 | Thumbs.db 14 | .project 15 | .*proj 16 | .svn/ 17 | *.swp 18 | *.swo 19 | *.pyc 20 | *.pyo 21 | .build 22 | node_modules 23 | .cache 24 | dist 25 | assets/**/*.css 26 | build 27 | lib 28 | es 29 | /coverage 30 | yarn.lock 31 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | 3 | sudo: false 4 | 5 | notifications: 6 | email: 7 | - hust2012jiangkai@gmail.com 8 | 9 | node_js: 10 | - 6.0.0 11 | 12 | before_install: 13 | - | 14 | if ! git diff --name-only $TRAVIS_COMMIT_RANGE | grep -qvE '(\.md$)|(^(docs|examples))/' 15 | then 16 | echo "Only docs were updated, stopping build process." 17 | exit 18 | fi 19 | phantomjs --version 20 | 21 | script: 22 | - | 23 | if [ "$TEST_TYPE" = test ]; then 24 | npm test 25 | else 26 | npm run $TEST_TYPE 27 | fi 28 | 29 | env: 30 | matrix: 31 | - TEST_TYPE=lint 32 | - TEST_TYPE=test 33 | - TEST_TYPE=coverage 34 | - TEST_TYPE=saucelabs 35 | global: 36 | - secure: S1VwbaPzLnSH/IUT/wlJulxAX5VHRIDmSt53h/ycHcZsszUpWcLCJRQAe0fTVB2dAx5MdBbSZ+o+tr3tRwVB5TRAYm0oTCsYAkOZaWOB28RuUQtdGt3wf9xxTG1UiPiaLLUW3waX9zAaf3yqKBcJGf1op0RD8dksxbCFw/7xVbU= 37 | - secure: EBEDg8k///IlEsnx0AE8X3mbFl0QE5+xGKbG4AxXlGZda12uTIPUSMKJzdZQ2hVbZXduTzf1cQl9rcu9nGoSnkL/DWnIax9cvHi+1orx5+YPlxPHNWAwWByTnHosBn2MJhfy1s5paJfHC9cUzmmEL6x4fYthWxjsPUo+irEZH6E= 38 | 39 | 40 | matrix: 41 | allow_failures: 42 | - env: "TEST_TYPE=saucelabs" 43 | -------------------------------------------------------------------------------- /HISTORY.md: -------------------------------------------------------------------------------- 1 | 2 | 0.0.20 / 2018-06-04 3 | ================== 4 | 5 | * fix and refine: 6 | 1. Add the event as a gesture property, and can be exposed to consumer. E.g.: rc-swipeout need using event to prevent scroll when touch moving. 7 | 2. Fixed a bug: panMove event could be invoked by unavailable touches. Look at the image for intuitional understanding: https://gw.alipayobjects.com/zos/rmsportal/nJviUPgzjtrUGCKrvUCz.gif. 8 | * change version to 0.0.20 9 | 10 | 0.0.17 / 2018-05-24 11 | ================== 12 | 13 | * change version to 0.0.17 14 | * fix: prevent view scroll when touch moving 15 | 16 | 0.0.7 / 2017-08-30 17 | ================== 18 | 19 | * Support direction lock. 20 | 21 | 0.0.6 / 2017-08-29 22 | ================== 23 | 24 | * Use css touch-action; 25 | 26 | 0.0.4 / 2017-08-28 27 | ================== 28 | 29 | * Support pan. 30 | 31 | 0.0.3 / 2017-07-24 32 | ================== 33 | 34 | * Support onPinchIn, onPinchOut. 35 | 36 | 0.0.2 / 2017-07-21 37 | ================== 38 | 39 | * Add umd dist output. 40 | 41 | 0.0.1 / 2017-07-21 42 | ================== 43 | 44 | * Support Tap, Press, Swipe, Pinch, Rotate. 45 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | Copyright (c) 2015-present Alipay.com, https://www.alipay.com/ 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy 5 | of this software and associated documentation files (the "Software"), to deal 6 | in the Software without restriction, including without limitation the rights 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the Software is 9 | furnished to do so, subject to the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be included in 12 | all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS 15 | OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 17 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 18 | CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 19 | TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 20 | SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # rc-gesture 2 | --- 3 | 4 | Support gesture for react component, inspired by [hammer.js](https://github.com/hammerjs/hammer.js) and [AlloyFinger](https://github.com/AlloyTeam/AlloyFinger). 5 | 6 | [![NPM version][npm-image]][npm-url] 7 | [![build status][travis-image]][travis-url] 8 | [![Test coverage][coveralls-image]][coveralls-url] 9 | [![gemnasium deps][gemnasium-image]][gemnasium-url] 10 | [![node version][node-image]][node-url] 11 | [![npm download][download-image]][download-url] 12 | 13 | [npm-image]: http://img.shields.io/npm/v/rc-gesture.svg?style=flat-square 14 | [npm-url]: http://npmjs.org/package/rc-gesture 15 | [travis-image]: https://img.shields.io/travis/react-component/gesture.svg?style=flat-square 16 | [travis-url]: https://travis-ci.org/react-component/gesture 17 | [coveralls-image]: https://img.shields.io/coveralls/react-component/gesture.svg?style=flat-square 18 | [coveralls-url]: https://coveralls.io/r/react-component/gesture?branch=master 19 | [gemnasium-image]: http://img.shields.io/gemnasium/react-component/gesture.svg?style=flat-square 20 | [gemnasium-url]: https://gemnasium.com/react-component/gesture 21 | [node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square 22 | [node-url]: http://nodejs.org/download/ 23 | [download-image]: https://img.shields.io/npm/dm/rc-gesture.svg?style=flat-square 24 | [download-url]: https://npmjs.org/package/rc-gesture 25 | 26 | ## Screenshots 27 | 28 | 29 | ## Features 30 | 31 | 32 | 33 | ## Install 34 | 35 | ```bash 36 | npm install --save rc-gesture 37 | ``` 38 | 39 | [![rc-gesture](https://nodei.co/npm/rc-gesture.png)](https://npmjs.org/package/rc-gesture) 40 | 41 | ## Usage 42 | 43 | ```tsx 44 | import Gesture from 'rc-gesture'; 45 | 46 | ReactDOM.render( 47 | { console.log(gestureStatus); }} 49 | > 50 |
container
51 | , 52 | container); 53 | ``` 54 | 55 | 56 | ## API 57 | 58 | all callback funtion will have one parammeter: `type GestureHandler = (s: IGestureStatus) => void;` 59 | 60 | - gesture: the rc-gesture state object, which contain all information you may need, see [gesture](#gesture) 61 | 62 | ### props: 63 | 64 | #### common props 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 |
nametypedefaultdescription
directionstring`all`control the allowed gesture direction, could be `['all', 'vertical', 'horizontal']`
82 | 83 | #### Tap & Press 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 |
nametypedefaultdescription
onTapfunctionsingle tap callback
onPressfunctionlong tap callback
onPressOutfunctionlong tap end callback
113 | 114 | #### Swipe 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 |
nametypedefaultdescription
onSwipefunctionswipe callback, will triggered at the same time of all of below callback
onSwipeLeftfunctionswipe left callback
onSwipeRightfunctionswipe right callback
onSwipeTopfunctionswipe top callback
onSwipeBottomfunctionswipe bottom callback
157 | 158 | #### Pan 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 |
nametypedefaultdescription
onPanfunctionpan callback, will triggered at the same time of all of below callback
onPanStartfunctiondrag start callback
onPanMovefunctiondrag move callback
onPanEndfunctiondrag end callback
onPanCancelfunctiondrag cancel callback
onPanLeftfunctionpan left callback
onPanRightfunctionpan right callback
onPanTopfunctionpan top callback
onPanBottomfunctionpan bottom callback
225 | 226 | #### Pinch 227 | 228 | pinch gesture is not enabled by default, you must set `props.enablePinch = true` at first; 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 |
nametypedefaultdescription
onPinchfunctionpinch callback, will triggered at the same time of all of below callback
onPinchStartfunctionpinch start callback
onPinchMovefunctionpinch move callback
onPinchEndfunctionpinch end callback
onPanCancelfunctionpinch cancel callback
onPinchInfunctionpinch in callback
onPinchOutfunctionpinch out callback
284 | 285 | 286 | #### Rotate 287 | 288 | pinch gesture is not enabled by default, you must set `props.enableRotate = true` at first; 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 |
nametypedefaultdescription
onRotatefunctionrotate callback, will triggered at the same time of all of below callback
onRotateStartfunctionrotate start callback
onRotateMovefunctionrotate move callback
onRotateEndfunctionrotate end callback
onRotateCancelfunctionrotate cancel callback
332 | 333 | ## gesture 334 | 335 | ```tsx 336 | // http://hammerjs.github.io/api/#event-object 337 | export interface IGestureStauts { 338 | /* start status snapshot */ 339 | startTime: number; 340 | startTouches: Finger[]; 341 | 342 | startMutliFingerStatus?: MultiFingerStatus[]; 343 | 344 | /* now status snapshot */ 345 | time: number; 346 | touches: Finger[]; 347 | 348 | mutliFingerStatus?: MultiFingerStatus[]; 349 | 350 | /* delta status from touchstart to now, just for singe finger */ 351 | moveStatus?: SingeFingerMoveStatus; 352 | 353 | /* whether is a long tap */ 354 | press?: boolean; 355 | 356 | /* whether is a swipe*/ 357 | swipe?: boolean; 358 | direction?: number; 359 | 360 | /* whether is in pinch process */ 361 | pinch?: boolean; 362 | scale?: number; 363 | 364 | /* whether is in rotate process */ 365 | rotate?: boolean; 366 | rotation?: number; // Rotation (in deg) that has been done when multi-touch. 0 on a single touch. 367 | }; 368 | ``` 369 | 370 | ## Development 371 | 372 | ``` 373 | npm install 374 | npm start 375 | ``` 376 | 377 | ## Example 378 | 379 | `npm start` and then go to `http://localhost:8005/examples/` 380 | 381 | Online examples: [http://react-component.github.io/gesture/](http://react-component.github.io/gesture/) 382 | 383 | ## Test Case 384 | 385 | `http://localhost:8005/tests/runner.html?coverage` 386 | 387 | ## Coverage 388 | 389 | `http://localhost:8005/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8088/tests/runner.html?coverage` 390 | 391 | ## License 392 | 393 | `rc-gesture` is released under the MIT license. 394 | -------------------------------------------------------------------------------- /examples/simple.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-component/gesture/b47e78d8270291b5a140ed56482985c3cf152888/examples/simple.html -------------------------------------------------------------------------------- /examples/simple.tsx: -------------------------------------------------------------------------------- 1 | /* tslint:disable:no-console no-unused-expression */ 2 | 3 | import Gesture from 'rc-gesture'; 4 | import React, { Component } from 'react'; 5 | import ReactDOM from 'react-dom'; 6 | const style = ` 7 | .outter { 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | margin: 20px auto; 12 | width: 80%; 13 | height: 40px; 14 | border-width: 1px; 15 | border-color: red; 16 | border-style: solid; 17 | overflow: hidden; 18 | } 19 | .inner { 20 | width: 80%; 21 | height: 80%; 22 | background-color: black; 23 | } 24 | .swiper-container{ 25 | margin: 20px 0; 26 | } 27 | .swiper{ 28 | display: flex; 29 | align-items: center; 30 | text-align: center; 31 | background-color: #CCC; 32 | width: 100%; 33 | height: 100%; 34 | } 35 | `; 36 | 37 | class Demo extends Component { 38 | private root: any; 39 | private rootNode: any; 40 | private _scale: number; 41 | private _rotation: number; 42 | private _x: number; 43 | private _y: number; 44 | 45 | constructor(props) { 46 | super(props); 47 | } 48 | log = (type: string, keys?: string[]) => (...args) => { 49 | window.requestAnimationFrame(() => { 50 | this.doLog(type, keys, ...args); 51 | this.doTransform(type, ...args); 52 | }); 53 | } 54 | doLog = (type, keys, ...args) => { 55 | const extInfo = keys ? keys.map(key => `${key} = ${args[0][key]}`).join(', ') : ''; 56 | const logEl = this.refs.log as any; 57 | logEl.innerHTML += `

${type} ${extInfo}

`; 58 | logEl.scrollTop = logEl.scrollHeight; 59 | } 60 | doTransform = (type, ...args) => { 61 | if (type === 'onPinch') { 62 | const { scale } = args[0]; 63 | this._scale = scale; 64 | } 65 | if (type === 'onRotate') { 66 | const { rotation } = args[0]; 67 | this._rotation = rotation; 68 | } 69 | if (type === 'onPan') { 70 | const { x, y } = args[0].moveStatus; 71 | this._x = x; 72 | this._y = y; 73 | } 74 | if (type === 'onPanEnd' || type === 'onPanCancel') { 75 | const { x, y } = args[0].moveStatus; 76 | this._x = 0; 77 | this._y = 0; 78 | } 79 | let transform: any = []; 80 | this._scale && transform.push(`scale(${this._scale})`); 81 | this._rotation && transform.push(`rotate(${this._rotation}deg)`); 82 | typeof this._x === 'number' && transform.push(`translateX(${this._x}px)`); 83 | typeof this._y === 'number' && transform.push(`translateY(${this._y}px)`); 84 | transform = transform.join(' '); 85 | this.rootNode = ReactDOM.findDOMNode(this.root); 86 | this.rootNode.style.transform = transform; 87 | } 88 | moveSwiper(e) { 89 | const {srcEvent, moveStatus} = e; 90 | const {x, y} = e.moveStatus; 91 | 92 | this.swiperNode = ReactDOM.findDOMNode(this.refSwiper); 93 | this.swiperNode.style.transform = [`translateX(${x}px)`]; 94 | 95 | // preventDefault, avoid trigger scroll event when touch moving. 96 | srcEvent.preventDefault(); 97 | } 98 | 99 | resetSwiper() { 100 | this.swiperNode = ReactDOM.findDOMNode(this.refSwiper); 101 | this.swiperNode.style.transform = [`translateX(0px)`]; 102 | } 103 | 104 | render() { 105 | return ( 106 |
107 |