{"_id":"@cantonjs/react-pan-responder","_rev":"2-1c4ee50d1b3d3a6590087465d1511df1","name":"@cantonjs/react-pan-responder","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@cantonjs/react-pan-responder","version":"0.1.0","description":"React low level pan gesture component for DOM","repository":{"type":"git","url":"git+https://github.com/Cap32/react-pan-responder.git"},"scripts":{"start":"cross-env BUILD_EXAMPLE=true webpack-dev-server","watch":"cross-env BABEL_ENV=cjs jest --watchAll","test":"cross-env BABEL_ENV=cjs jest","coverage":"cross-env BABEL_ENV=cjs jest --coverage","coveralls":"cat ./coverage/lcov.info | coveralls","rimraf":"rimraf ./dist ./lib ./es","mkdir":"mkdirp ./dist ./lib ./es","prebuild":"run-s rimraf mkdir","build:cjs":"cross-env BABEL_ENV=cjs babel src -d lib --ignore __tests__","build:es":"cross-env BABEL_ENV=es babel src -d es --ignore __tests__","build:umd":"cross-env NODE_ENV=production webpack","build:min":"cross-env NODE_ENV=production webpack --env.minify","build":"run-p build:*","prettier":"prettier-eslint --write \"+(src|test)/**/*.js\"","deploy:build":"cross-env NODE_ENV=production BUILD_EXAMPLE=true webpack --env.minify","deploy:github":"git-directory-deploy --directory example","deploy":"run-s deploy:*","preversion":"npm test && npm run build"},"files":["README.md","LICENSE.md","lib","es","dist"],"main":"lib/index.js","module":"es/index.js","jsnext:main":"es/index.js","keywords":["responder","react","pan","gesture","touch","mouse","dom"],"author":{"name":"cap32"},"license":"MIT","peerDependencies":{"react":"^15.0.0-0 || ^16.0.0-0","react-dom":"^15.0.0-0 || ^16.0.0-0"},"dependencies":{"detect-passive-events":"^1.0.2","prop-types":"^15.5.7"},"devDependencies":{"animated":"^0.2.2","autoprefixer":"^7.1.2","babel-cli":"^6.26.0","babel-core":"^6.26.3","babel-eslint":"^7.2.3","babel-jest":"^23.2.0","babel-loader":"^7.1.1","babel-plugin-add-module-exports":"^0.2.1","babel-plugin-system-import-transformer":"^2.4.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","babel-register":"^6.24.1","coveralls":"^2.13.1","cross-env":"^3.1.3","css-loader":"^0.28.4","delay":"^2.0.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"4.x","eslint-config-cantonjs":"^1.0.0","eslint-config-standard":"^11.0.0","eslint-import-resolver-webpack":"^0.10.1","eslint-plugin-import":"^2.13.0","eslint-plugin-jest":"^21.17.0","eslint-plugin-node":"^6.0.1","eslint-plugin-promise":"^3.8.0","eslint-plugin-react":"^7.10.0","eslint-plugin-standard":"^3.1.0","get-my-ip":"^0.0.1","git-directory-deploy":"^1.5.1","granim":"^1.0.6","jest":"^23.3.0","jsdom":"^11.11.0","lodash.camelcase":"^4.3.0","mkdirp":"^0.5.1","node-sass":"^4.5.3","npm-run-all":"^4.0.2","postcss-loader":"^2.0.6","prettier-eslint-cli":"^4.7.1","raw-loader":"^0.5.1","react":"^16.4.1","react-dom":"^16.4.1","react-feather":"^1.0.7","react-test-renderer":"^16.4.1","rimraf":"^2.5.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","webpack":"^3.1.0","webpack-dev-server":"^2.5.1"},"jest":{"collectCoverageFrom":["src/**/*.js"],"modulePathIgnorePatterns":["node_modules","lib"]},"gitHead":"c0079554fb1e6d6c52f740062674ad479d006eb5","bugs":{"url":"https://github.com/Cap32/react-pan-responder/issues"},"homepage":"https://github.com/Cap32/react-pan-responder#readme","_id":"@cantonjs/react-pan-responder@0.1.0","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"cap32","email":"webb.png@gmail.com"},"dist":{"integrity":"sha512-VCJ75FuHRf6AdowN4za2HfAJPwnd1VzmBGnOzj+Yt029dUINNFJrXykX5fz71b8mgJmrKiLVtwrnYGXlVggsww==","shasum":"7e463e734b099c09dde3341f95c78b5ee505f338","tarball":"https://registry.npmjs.org/@cantonjs/react-pan-responder/-/react-pan-responder-0.1.0.tgz","fileCount":18,"unpackedSize":138648,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbSEzCCRA9TVsSAnZWagAAwlEP/3TlxkN+HF8ClB+fnT5M\nJ07CCe5Hj3EVIhnRn+ncONjlqjM/d4thnlsrMwLnHUS+iw30x2SgwWmOIY5/\n1/GARB8IUOPz1w63I7ExvvBGL6CZ7QBLWilW4HzLpx8P6wMgp80BFHMDpFJU\np5kPxoauv4P/bqjIg9UuJBzXDDE2iHc5i9rcZhuCeAaBdLtOJ/napwBUmqeQ\nL4+KOHy7LrEX0bhmbj89iX+KHvcGGusOWiSANZr0rppCfKrp94G4iCghe17s\n0xPpZ4O9VWWE2rTibN+0T6kU9PeDGBS4uG3oa9yu3zEEI6IMpTgJufHaduWC\nE61DkNpagxdVTdRXEITm6zV4SlvnmDLLW25pI0/UNdO233UJ3jz12MdEA07Z\nDLf+4wIXqzYFDfU64jRXijWjYC8sQFdVS/Rcp0/X/SM+ZEQy1a9MZgRpysZ/\nbV6ZST/ta7IvPCZ4vhx3i3rDqo1SeNuHooNdR1qfQig55L58MnxdCsvuUDDx\nsXO2y4p46lBorU09UdGhjNnaeScVFMVfvmK9pLDTVpBkMOWv70qkT1bm2yFk\nkyevy57sOIcp4nH5d5uOW5fZnAUu898EBLW7oyk3WEIiP+KqXnZmsdMavb8S\nCNM/vNl2nvDKPdW871xKDE12kcTlQn1d6aNDrY1CAN2T6CsFmtHMknCTwkDZ\nQ8c+\r\n=yk84\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCEeZgkITm0oXgPLhdVWgvKwX0VfXp/WMiMQfSFlgBspQIhAIueOy7e34QNLYV+hOObHlSjpL2J16isel/QXToP3iA/"}]},"maintainers":[{"name":"cap32","email":"webb.png@gmail.com"},{"name":"jaceechan","email":"jaceeqq@163.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-pan-responder_0.1.0_1531464898763_0.6684199481362643"},"_hasShrinkwrap":false},"0.1.1":{"name":"@cantonjs/react-pan-responder","version":"0.1.1","description":"React low level pan gesture component for DOM","repository":{"type":"git","url":"git+https://github.com/Cap32/react-pan-responder.git"},"scripts":{"start":"cross-env BUILD_EXAMPLE=true webpack-dev-server","watch":"cross-env BABEL_ENV=cjs jest --watchAll","test":"cross-env BABEL_ENV=cjs jest","coverage":"cross-env BABEL_ENV=cjs jest --coverage","coveralls":"cat ./coverage/lcov.info | coveralls","rimraf":"rimraf ./dist ./lib ./es","mkdir":"mkdirp ./dist ./lib ./es","prebuild":"run-s rimraf mkdir","build:cjs":"cross-env BABEL_ENV=cjs babel src -d lib --ignore __tests__","build:es":"cross-env BABEL_ENV=es babel src -d es --ignore __tests__","build:umd":"cross-env NODE_ENV=production webpack","build:min":"cross-env NODE_ENV=production webpack --env.minify","build":"run-p build:*","prettier":"prettier-eslint --write \"+(src|test)/**/*.js\"","deploy:build":"cross-env NODE_ENV=production BUILD_EXAMPLE=true webpack --env.minify","deploy:github":"git-directory-deploy --directory example","deploy":"run-s deploy:*","preversion":"npm test && npm run build"},"files":["README.md","LICENSE.md","lib","es","dist"],"main":"lib/index.js","module":"es/index.js","jsnext:main":"es/index.js","keywords":["responder","react","pan","gesture","touch","mouse","dom"],"author":{"name":"cap32"},"license":"MIT","peerDependencies":{"react":"^15.0.0-0 || ^16.0.0-0","react-dom":"^15.0.0-0 || ^16.0.0-0"},"dependencies":{"detect-passive-events":"^1.0.2","prop-types":"^15.5.7"},"devDependencies":{"animated":"^0.2.2","autoprefixer":"^7.1.2","babel-cli":"^6.26.0","babel-core":"^6.26.3","babel-eslint":"^7.2.3","babel-jest":"^23.2.0","babel-loader":"^7.1.1","babel-plugin-add-module-exports":"^0.2.1","babel-plugin-system-import-transformer":"^2.4.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","babel-register":"^6.24.1","coveralls":"^2.13.1","cross-env":"^3.1.3","css-loader":"^0.28.4","delay":"^2.0.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"4.x","eslint-config-cantonjs":"^1.0.0","eslint-config-standard":"^11.0.0","eslint-import-resolver-webpack":"^0.10.1","eslint-plugin-import":"^2.13.0","eslint-plugin-jest":"^21.17.0","eslint-plugin-node":"^6.0.1","eslint-plugin-promise":"^3.8.0","eslint-plugin-react":"^7.10.0","eslint-plugin-standard":"^3.1.0","get-my-ip":"^0.0.1","git-directory-deploy":"^1.5.1","granim":"^1.0.6","jest":"^23.3.0","jsdom":"^11.11.0","lodash.camelcase":"^4.3.0","mkdirp":"^0.5.1","node-sass":"^4.5.3","npm-run-all":"^4.0.2","postcss-loader":"^2.0.6","prettier-eslint-cli":"^4.7.1","raw-loader":"^0.5.1","react":"^16.4.1","react-dom":"^16.4.1","react-feather":"^1.0.7","react-test-renderer":"^16.4.1","rimraf":"^2.5.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","webpack":"^3.1.0","webpack-dev-server":"^2.5.1"},"jest":{"collectCoverageFrom":["src/**/*.js"],"modulePathIgnorePatterns":["node_modules","lib"]},"gitHead":"d0936f455781c398eab495bde4059362617bfb11","bugs":{"url":"https://github.com/Cap32/react-pan-responder/issues"},"homepage":"https://github.com/Cap32/react-pan-responder#readme","_id":"@cantonjs/react-pan-responder@0.1.1","_npmVersion":"5.6.0","_nodeVersion":"8.11.3","_npmUser":{"name":"cap32","email":"webb.png@gmail.com"},"dist":{"integrity":"sha512-38XvU4isyqu6OJ1RF1cm4McHkyB9mbJ3o41ag/UOJoOH5H4QWXnTVKc2C/8i1jCSnHRuXli12ueJfdrixazKAg==","shasum":"109d3aef5ff51b1630b98052d63cf14ebe882318","tarball":"https://registry.npmjs.org/@cantonjs/react-pan-responder/-/react-pan-responder-0.1.1.tgz","fileCount":18,"unpackedSize":138874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbYAS3CRA9TVsSAnZWagAAyQwQAJs4veXIYAiZWLwME60l\nEjpiZynwp5ADd0eIhD7cDRJd0alcam9TJ1bPQAFFsgxurcCjHCYFOLimXuH0\nRrGg3usyPtOee5+gLu04KkD/8ZE+r+SQyIwLqj957BtGv2Azv4AitOX6TD3z\ne5U8Y2Mvm/rqFVxw1OHZJLGmWJVoroIgepTGsOaQc0tFdlUFDBuBt9DBMXKL\nX8xQPMwEpS2Xw9kgTtz1nw7z+iWyhAWCXnk19F0VGtkzVyuUIbAZBiHIzPsT\nNMuO2qc4FYl/nRwGb0mwJZUrz740aHPLo91Y0r7Khr7Htop4CQ2ctJ6kRXlJ\nhEHf0+Sv8kyNVVBxozlPNFp6dzcRhcKs1AioQrY983sj3+Z71xeVMo9OHgB+\nKZeS7FY7HDWy/GttkP/0DmF40zgsFqXsPSEZQG6KRFTwEq6+YXuTW2dAWokF\nKHMlmb1Q6S5USmto9hms/02K4e1PqhH/HhJzuyNFJPMPzxOsqblxdkQWYyg4\n2DfsIls/eP8ynFgyWHpaqKVIXYIwZdGwJocPPM21JK11fB+/n/Aej+2kBGNs\nymnr+jzDu567zPeT3oSfkZnbPL7OoXx2gcjMlMNkJpxEamjr1ZVf2zYpJvIr\nSIkYNuZG5TUvU+nT+kgsD/ZA+lHpFAVIjRCphs2ezEpyvAwVINQGB0UOUCsG\n0bAS\r\n=Mjfn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDs8rXkQLjLNOv99rxA8RauSqz/yoDpWA6LDGAW8wDWlQIhAJx6tVQwKPOKnEs6KS5raSgd/PX6DWEOwjVfdeutkrH1"}]},"maintainers":[{"name":"cap32","email":"webb.png@gmail.com"},{"name":"jaceechan","email":"jaceeqq@163.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-pan-responder_0.1.1_1533019319517_0.7833220818306978"},"_hasShrinkwrap":false}},"time":{"created":"2018-07-13T06:54:58.517Z","0.1.0":"2018-07-13T06:54:58.849Z","modified":"2022-04-04T21:39:35.920Z","0.1.1":"2018-07-31T06:41:59.648Z"},"maintainers":[{"name":"cap32","email":"webb.png@gmail.com"},{"name":"jaceechan","email":"jaceeqq@163.com"}],"description":"React low level pan gesture component for DOM","homepage":"https://github.com/Cap32/react-pan-responder#readme","keywords":["responder","react","pan","gesture","touch","mouse","dom"],"repository":{"type":"git","url":"git+https://github.com/Cap32/react-pan-responder.git"},"author":{"name":"cap32"},"bugs":{"url":"https://github.com/Cap32/react-pan-responder/issues"},"license":"MIT","readme":"# react-pan-responder\n\n[![Build Status](https://travis-ci.org/Cap32/react-pan-responder.svg?branch=master)](https://travis-ci.org/Cap32/react-pan-responder) [![Coverage Status](https://coveralls.io/repos/github/Cap32/react-pan-responder/badge.svg?branch=master)](https://coveralls.io/github/Cap32/react-pan-responder?branch=master) [![License](https://img.shields.io/badge/license-MIT_License-blue.svg?style=flat)](https://github.com/Cap32/react-pan-responder/blob/master/LICENSE.md)\n\nLow level pan gesture responder React component for DOM. This library is highly inspired by [React Native PanResponder](http://facebook.github.io/react-native/docs/panresponder.html).\n\n## Table of Contents\n\n- [Table of Contents](#table-of-contents)\n- [Features](#features)\n- [Getting Started](#getting-started)\n  - [Installation](#installation)\n  - [Example](#example)\n  - [Demo](#demo)\n- [Responder Lifecycle](#responder-lifecycle)\n- [Responder Handlers](#responder-handlers)\n  - [Event](#event)\n  - [GestureState](#gesturestate)\n- [Properties](#properties)\n  - [onStartShouldSet](#onstartshouldset)\n  - [onStartShouldSetCapture](#onstartshouldsetcapture)\n  - [onMoveShouldSet](#onmoveshouldset)\n  - [onMoveShouldSetCapture](#onmoveshouldsetcapture)\n  - [onGrant](#ongrant)\n  - [onReject](#onreject)\n  - [onStart](#onstart)\n  - [onMove](#onmove)\n  - [onEnd](#onend)\n  - [onRelease](#onrelease)\n  - [onTerminationRequest](#onterminationrequest)\n  - [onTerminate](#onterminate)\n  - [touchAction](#touchaction)\n  - [innerRef](#innerref)\n- [License](#license)\n\n\n## Features\n\n- Provides `gestureState` helper object\n- Reconciles several touches into a single gesture\n- Reconciles move and end events outside target element\n- Compatible with mouse event\n\n\n## Getting Started\n\n### Installation\n\n```bash\n$ yarn add @cantonjs/react-pan-responder\n```\n\n\n### Example\n\n```js\nimport React, { Component } from 'react';\nimport PanResponder from '@cantonjs/react-pan-responder';\n\nexport default class MyApp extends Component {\n  render() {\n    <PanResponder\n      onStartShouldSet={(event, gestureState) => true}\n      onGrant={(event, gestureState) => {}}\n      onMove={(event, gestureState) => {}}\n      onRelease={(event, gestureState) => {}}\n    >\n      {(ref) =>\n        <div ref={ref}>Awesome</div>\n      }\n    </PanResponder>\n  }\n}\n```\n\n### Demo\n\n[https://cap32.github.io/react-pan-responder/](https://cap32.github.io/react-pan-responder/)\n\n\n## Responder Lifecycle\n\nA view can become the touch responder by implementing the correct negotiation methods. There are two methods to ask the view if it wants to become responder:\n\n* `View.props.onStartShouldSet: (event, gestureState) => true`, - Does this view want to become responder on the start of a touch?\n* `View.props.onMoveShouldSet: (event, gestureState) => true`, - Called for every touch move on the View when it is not the responder: does this view want to \"claim\" touch responsiveness?\n\nIf the View returns true and attempts to become the responder, one of the following will happen:\n\n* `View.props.onGrant: (event, gestureState) => {}` - The View is now responding for touch events. This is the time to highlight and show the user what is happening\n* `View.props.onReject: (event, gestureState) => {}`  - Something else is the responder right now and will not release it\n\nIf the view is responding, the following handlers can be called:\n\n* `View.props.onMove: (event, gestureState) => {}` - The user is moving their finger\n* `View.props.onRelease: (event, gestureState) => {}` - Fired at the end of the touch, i.e. \"touchUp\"\n* `View.props.onTerminationRequest: (event, gestureState) => true` - Something else wants to become responder. Should this view release the responder? Returning `true` allows release\n* `View.props.onTerminate: (event, gestureState) => {}` - The responder has been taken by other views after a call to `onTerminationRequest`\n\n\n## Responder Handlers\n\nIt provides a predictable wrapper of the responder handlers provided by the gesture responder system. For each handler, it provides a new `gestureState` object alongside the native event object:\n\n```js\nonMove: (event, gestureState) => {}\n```\n\n### Event\n\nThe native event that binding to `window` object. **This is NOT a [Synthetic Event](https://facebook.github.io/react/docs/events.html)**\n\n### GestureState\n\nA gestureState object has the following:\n\n* stateID - ID of the gestureState- persisted as long as there at least one touch on screen\n* moveX - the latest screen coordinates of the recently-moved touch\n* moveY - the latest screen coordinates of the recently-moved touch\n* x0 - the screen coordinates of the responder grant\n* y0 - the screen coordinates of the responder grant\n* dx - accumulated distance of the gesture since the touch started\n* dy - accumulated distance of the gesture since the touch started\n* vx - current velocity of the gesture\n* vy - current velocity of the gesture\n* numberActiveTouches - Number of touches currently on screen\n\n\n## Properties\n\n*All properties are optional*\n\n### onStartShouldSet\n\n`boolean|function`\n\nDeciding this component to become responder on the start of a touch. Defaults to `false`. If giving a function, it should return a `boolean`.\n\n\n### onStartShouldSetCapture\n\n`boolean|function`\n\nJust like `onStartShouldSet`, but using capture. Defaults to `false`.\n\n\n### onMoveShouldSet\n\n`boolean|function`\n\nDeciding this component to become responder on every touch move on the View when it is not the responder. Defaults to `false`.\n\n\n### onMoveShouldSetCapture\n\n`boolean|function`\n\nJust like `onMoveShouldSet`, but using capture. Defaults to `false`.\n\n\n### onGrant\n\n`function`\n\nFired when this component is now responding for touch events. This is the time to highlight and show the user what is happening.\n\n### onReject\n\n`function`\n\nFired when something else is the responder right now and will not release it\n\n\n### onStart\n\n`function`\n\nFired for every touch start when it is the responder.\n\n\n### onMove\n\n`function`\n\nFired for every touch move when it is the responder.\n\n\n### onEnd\n\n`function`\n\nFired for every touch end when it is the responder.\n\n\n### onRelease\n\n`function`\n\nFired at the end of the touch, i.e. \"touchUp\".\n\n### onTerminationRequest\n\n`boolean|function`\n\nFired when something else wants to become responder. Should this view release the responder? Returning `true` allows release.\n\n### onTerminate\n\n`function`\n\nFired when responder has been taken by other views after a call to `onTerminationRequest`.\n\n### touchAction\n\n`string`\n\nDefining responder panning action. The value could be one of following string:\n\n- `none`: Disable browser handling of all panning gestures (default).\n- `x`: Enable single-finger horizontal panning gestures for browser handling.\n- `y`: Enable single-finger vertical panning gestures for browser handling.\n\n### innerRef\n\n`function`\n\nUse this to access the internal component ref.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}