├── .gitignore ├── .prettierrc.yaml ├── .vscode └── settings.json ├── LICENCE ├── README.md ├── docs ├── asset-manifest.json ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json ├── precache-manifest.002c0dcead9105f8546174db786b7469.js ├── precache-manifest.01cf629cab662f971c7599ebe88f6dab.js ├── precache-manifest.1b1c09b5287b3c5de1d83d3060a460e2.js ├── precache-manifest.2a1d4cb30f002bc6fed4969d364b9330.js ├── precache-manifest.32eb72f71ec0ad5f13a0fd056d8a62ea.js ├── precache-manifest.409be7e9ef7f20ee559ccb0411611cfc.js ├── precache-manifest.4eeed1c17041057ff4d8d13a6a8e720e.js ├── precache-manifest.5616aa284d6ed4511e3249f01616738e.js ├── precache-manifest.581823661a0500329e0ddcff1b1caa6b.js ├── precache-manifest.60ae62bd984225d9d6756ee99408105f.js ├── precache-manifest.6f8b33acd54c2a9acb61d0beaf009590.js ├── precache-manifest.75aca241657b25843a06b85b18aa7fd2.js ├── precache-manifest.836ae0097c5f1aac4c6a28a99385bcd0.js ├── precache-manifest.a0c61d87f54193ad0e92e6c67433dcf7.js ├── precache-manifest.d2dcbfd571f0f167a73d9e08866a6dba.js ├── precache-manifest.d944fe3be93f12a45300e4083b4081a6.js ├── precache-manifest.db32af7bb8fdb6eae62fd9fd83578331.js ├── precache-manifest.e1d30e97e339f2b88ce5728af299e878.js ├── precache-manifest.e2b167acef1e86a3019e7221c5fe65ed.js ├── precache-manifest.fef0e41f6f03ce2eeb9e823693d76cc6.js ├── robots.txt ├── service-worker.js └── static │ ├── css │ ├── main.0388a0eb.css │ ├── main.0388a0eb.css.map │ ├── main.2c36170d.chunk.css │ ├── main.2c36170d.chunk.css.map │ ├── main.4ed805f0.chunk.css │ ├── main.4ed805f0.chunk.css.map │ ├── main.609cc2a1.chunk.css │ ├── main.609cc2a1.chunk.css.map │ ├── main.8aa9810e.chunk.css │ └── main.8aa9810e.chunk.css.map │ └── js │ ├── 2.ce7fa3e7.chunk.js │ ├── 2.ce7fa3e7.chunk.js.map │ ├── 2.fa031f80.chunk.js │ ├── 2.fa031f80.chunk.js.map │ ├── main.028fee3e.chunk.js │ ├── main.028fee3e.chunk.js.map │ ├── main.100e47c1.chunk.js │ ├── main.100e47c1.chunk.js.map │ ├── main.1fffc8d5.chunk.js │ ├── main.1fffc8d5.chunk.js.map │ ├── main.222dcf33.chunk.js │ ├── main.222dcf33.chunk.js.map │ ├── main.29b5d833.chunk.js │ ├── main.29b5d833.chunk.js.map │ ├── main.36aacf2c.chunk.js │ ├── main.36aacf2c.chunk.js.map │ ├── main.37c8f8f4.chunk.js │ ├── main.37c8f8f4.chunk.js.map │ ├── main.3a61f424.chunk.js │ ├── main.3a61f424.chunk.js.map │ ├── main.3f02033c.chunk.js │ ├── main.3f02033c.chunk.js.map │ ├── main.524f22fd.chunk.js │ ├── main.524f22fd.chunk.js.map │ ├── main.539afb7b.chunk.js │ ├── main.539afb7b.chunk.js.map │ ├── main.568b43db.chunk.js │ ├── main.568b43db.chunk.js.map │ ├── main.5818df09.chunk.js │ ├── main.5818df09.chunk.js.map │ ├── main.60752506.chunk.js │ ├── main.60752506.chunk.js.map │ ├── main.60884689.chunk.js │ ├── main.60884689.chunk.js.map │ ├── main.7c3992f0.js │ ├── main.7c3992f0.js.LICENSE.txt │ ├── main.7c3992f0.js.map │ ├── main.9bf6d823.chunk.js │ ├── main.9bf6d823.chunk.js.map │ ├── main.b28d2740.chunk.js │ ├── main.b28d2740.chunk.js.map │ ├── main.b6ce14fd.chunk.js │ ├── main.b6ce14fd.chunk.js.map │ ├── main.ea161887.chunk.js │ ├── main.ea161887.chunk.js.map │ ├── main.f34627b8.chunk.js │ ├── main.f34627b8.chunk.js.map │ ├── runtime-main.dd9dbc43.js │ └── runtime-main.dd9dbc43.js.map ├── package-lock.json ├── package.json ├── playground ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.test.tsx │ ├── App.tsx │ ├── commands │ │ ├── commands.css │ │ └── commands.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── pull-to-refresh │ │ ├── components │ │ │ ├── pull-to-refresh.d.ts │ │ │ ├── pulling-content.d.ts │ │ │ └── refreshing-content.d.ts │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── isScrollable.d.ts │ │ └── types.d.ts │ ├── react-app-env.d.ts │ └── serviceWorker.ts ├── tsconfig.json └── yarn.lock ├── rollup.config.js ├── src ├── components │ ├── pull-to-refresh.tsx │ ├── pulling-content.tsx │ └── refreshing-content.tsx ├── index.ts ├── isScrollable.ts ├── styles │ ├── main.scss │ └── refreshing-content.scss └── types.ts └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | /node_modules 3 | 4 | # production 5 | /build 6 | 7 | # misc 8 | .DS_Store 9 | .ideas 10 | /.idea 11 | 12 | npm-debug.log* 13 | yarn-debug.log* 14 | yarn-error.log* 15 | 16 | #rollup 17 | /build 18 | .env 19 | -------------------------------------------------------------------------------- /.prettierrc.yaml: -------------------------------------------------------------------------------- 1 | printWidth: 110 2 | tabWidth: 2 3 | useTabs: false 4 | semi: true 5 | singleQuote: true 6 | quoteProps: 'consistent' 7 | jsxSingleQuote: false 8 | trailingComma: 'es5' 9 | bracketSpacing: true 10 | jsxBracketSameLine: false 11 | arrowParens: 'avoid' 12 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "workbench.colorCustomizations": { 3 | "titleBar.activeForeground": "#61dafb", 4 | "titleBar.inactiveForeground": "#53b7d3", 5 | "titleBar.activeBackground": "#20232a", 6 | "titleBar.inactiveBackground": "#0a0e16" 7 | }, 8 | "editor.formatOnSave": true, 9 | "files.insertFinalNewline": true, 10 | "editor.tabSize": 2 11 | } 12 | -------------------------------------------------------------------------------- /LICENCE: -------------------------------------------------------------------------------- 1 | Copyright 2019 GUIBERT THOMAS 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-simple-pull-to-refresh 2 | 3 | [![npm version](https://badge.fury.io/js/react-simple-pull-to-refresh.svg)](https://badge.fury.io/js/react-simple-pull-to-refresh) 4 | [![license](https://img.shields.io/github/license/thmsgbrt/react-simple-pull-to-refresh.svg)](https://github.com/thmsgbrt/react-simple-pull-to-refresh/blob/master/LICENSE) 5 | ![](https://badgen.net/npm/types/react-simple-pull-to-refresh) 6 | ![](https://badgen.net/badge/maintained/yes/green) 7 | 8 | A Simple Pull-To-Refresh Component for React Application with 0 dependency. 9 | Works for Mobile and Desktop. 10 | 11 | ## Contributing 12 | 13 | ⚠️ I don't have much time to take care of the issues at the moment. 14 | 15 | 🙏 Any help and contribution is greatly appreciated. 16 | 17 | ## Demo 18 | 19 | [Click here 👍](https://thmsgbrt.github.io/react-simple-pull-to-refresh) 20 | 21 | ## Installation 22 | 23 | `npm i react-simple-pull-to-refresh` 24 | 25 | ## Usage 26 | 27 | ```jsx 28 | import PullToRefresh from 'react-simple-pull-to-refresh'; 29 | ``` 30 | 31 | Pull To Refresh only 32 | 33 | ```jsx 34 | // ... 35 | 36 | return ( 37 | 38 | 43 | 44 | ); 45 | 46 | // ... 47 | ``` 48 | 49 | Pull To Refresh and Fetch More enabled 50 | 51 | ```jsx 52 | // ... 53 | 54 | return ( 55 | 56 | 61 | 62 | ); 63 | 64 | // ... 65 | ``` 66 | 67 | ## Props Matrix 68 | 69 | | Name | Type | Required | Default | Description | 70 | | :-----------------: | :-------------------: | :------: | :-------------------: | ---------------------------------------------------------------------------- | 71 | | isPullable | boolean | false | true | Enable or disable pulling feature | 72 | | onRefresh | () => Promise | true | | Function called when Refresh Event has been trigerred | 73 | | pullDownThreshold | number | false | 67 | Distance in pixel to pull to trigger a Refresh Event | 74 | | maxPullDownDistance | number | false | 95 | Maximum transitionY applied to Children when dragging | 75 | | resistance | number | false | 1 | Scale of difficulty to pull down | 76 | | refreshingContent | JSX.Element or string | false | | Content displayed when Pulling or Fetch more has been trigerred | 77 | | pullingContent | JSX.Element or string | false | | Content displayed when Pulling | 78 | | canFetchMore | boolean | false | false | Enable or disable fetching more feature | 79 | | onFetchMore | () => Promise | false | | Function called when Fetch more Event has been trigerred | 80 | | fetchMoreThreshold | number | false | 100 | Distance in pixel from bottom of the container to trigger a Fetch more Event | 81 | | backgroundColor | string | false | | Apply a backgroundColor | 82 | | className | string | false | | | 83 | 84 | ## Changelog 85 | 86 | 1.3.3: Update package.json peerDependencies to support react 18 - (From: [@mjauernig](https://github.com/mjauernig)) 87 | 88 | 1.3.2: Fix build issue encountered with 1.3.1 89 | 90 | 1.3.1: Fix issue preventing fixed elements to work properly - (From: [@ManuDoni](https://github.com/ManuDoni)) 91 | 92 | 1.3.0: Add a _resistance_ prop, that allows to adjust the pull down difficulty - (From: [@joshuahiggins](https://github.com/joshuahiggins)) 93 | 94 | 1.2.5: Fix event listenter leaks - (From: [@d-s-x](https://github.com/d-s-x)) 95 | 96 | 1.2.4: Fix overscroll on iOS Safari - (From: [@d-s-x](https://github.com/d-s-x)) 97 | 98 | 1.2.3: Add React 17+ as valid peer dependencies - (From: [@Felixmosh](https://github.com/felixmosh)) 99 | 100 | 1.2.2: Remove non-null assertion operators from ref.current + TouchEvent check for Mozilla - (From: [@HamAndRock](https://github.com/HamAndRock)) 101 | 102 | 1.2.1: Remove unnecessary z-index 103 | 104 | 1.2.0: onRefresh and onFetchMore now require to be of type () => Promise 105 | 106 | 1.1.2: Bind Scroll event to Window 107 | 108 | 1.1.0: Check for "canFetchMore" value for each scroll events. 109 | 110 | 1.1.0: Add a Fetch More feature 111 | -------------------------------------------------------------------------------- /docs/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": { 3 | "main.css": "/react-simple-pull-to-refresh/static/css/main.0388a0eb.css", 4 | "main.js": "/react-simple-pull-to-refresh/static/js/main.7c3992f0.js", 5 | "index.html": "/react-simple-pull-to-refresh/index.html", 6 | "main.0388a0eb.css.map": "/react-simple-pull-to-refresh/static/css/main.0388a0eb.css.map", 7 | "main.7c3992f0.js.map": "/react-simple-pull-to-refresh/static/js/main.7c3992f0.js.map" 8 | }, 9 | "entrypoints": [ 10 | "static/css/main.0388a0eb.css", 11 | "static/js/main.7c3992f0.js" 12 | ] 13 | } -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thmsgbrt/react-simple-pull-to-refresh/b91b3eff46210b5c5e7e95d6b02a83e0d1a4eb45/docs/favicon.ico -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | React App
-------------------------------------------------------------------------------- /docs/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thmsgbrt/react-simple-pull-to-refresh/b91b3eff46210b5c5e7e95d6b02a83e0d1a4eb45/docs/logo192.png -------------------------------------------------------------------------------- /docs/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thmsgbrt/react-simple-pull-to-refresh/b91b3eff46210b5c5e7e95d6b02a83e0d1a4eb45/docs/logo512.png -------------------------------------------------------------------------------- /docs/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /docs/precache-manifest.002c0dcead9105f8546174db786b7469.js: -------------------------------------------------------------------------------- 1 | self.__precacheManifest = (self.__precacheManifest || []).concat([ 2 | { 3 | "revision": "7d44d2cd7f4b9d9cd85221b2d28eb190", 4 | "url": "/react-simple-pull-to-refresh/index.html" 5 | }, 6 | { 7 | "revision": "d05ecb56c5c597cafb30", 8 | "url": "/react-simple-pull-to-refresh/static/css/main.609cc2a1.chunk.css" 9 | }, 10 | { 11 | "revision": "b87cefe09418f566e8b6", 12 | "url": "/react-simple-pull-to-refresh/static/js/2.fa031f80.chunk.js" 13 | }, 14 | { 15 | "revision": "d05ecb56c5c597cafb30", 16 | "url": "/react-simple-pull-to-refresh/static/js/main.1fffc8d5.chunk.js" 17 | }, 18 | { 19 | "revision": "e74c4cb01b298f907401", 20 | "url": "/react-simple-pull-to-refresh/static/js/runtime-main.dd9dbc43.js" 21 | } 22 | ]); -------------------------------------------------------------------------------- /docs/precache-manifest.01cf629cab662f971c7599ebe88f6dab.js: -------------------------------------------------------------------------------- 1 | self.__precacheManifest = (self.__precacheManifest || []).concat([ 2 | { 3 | "revision": "380081c043be70b7b460bc5a0de751a2", 4 | "url": "/react-simple-pull-to-refresh/index.html" 5 | }, 6 | { 7 | "revision": "23891c9ccff4ecfe5e06", 8 | "url": "/react-simple-pull-to-refresh/static/css/main.609cc2a1.chunk.css" 9 | }, 10 | { 11 | "revision": "b87cefe09418f566e8b6", 12 | "url": "/react-simple-pull-to-refresh/static/js/2.fa031f80.chunk.js" 13 | }, 14 | { 15 | "revision": "23891c9ccff4ecfe5e06", 16 | "url": "/react-simple-pull-to-refresh/static/js/main.222dcf33.chunk.js" 17 | }, 18 | { 19 | "revision": "e74c4cb01b298f907401", 20 | "url": "/react-simple-pull-to-refresh/static/js/runtime-main.dd9dbc43.js" 21 | } 22 | ]); -------------------------------------------------------------------------------- /docs/precache-manifest.1b1c09b5287b3c5de1d83d3060a460e2.js: -------------------------------------------------------------------------------- 1 | self.__precacheManifest = (self.__precacheManifest || []).concat([ 2 | { 3 | "revision": "c12dd199702d474f521e95cdd7aaa2dc", 4 | "url": "/react-simple-pull-to-refresh/index.html" 5 | }, 6 | { 7 | "revision": "0c55809f6cc1f8e185e9", 8 | "url": "/react-simple-pull-to-refresh/static/css/main.4ed805f0.chunk.css" 9 | }, 10 | { 11 | "revision": "4eb5ba97362c21187cdb", 12 | "url": "/react-simple-pull-to-refresh/static/js/2.ce7fa3e7.chunk.js" 13 | }, 14 | { 15 | "revision": "0c55809f6cc1f8e185e9", 16 | "url": "/react-simple-pull-to-refresh/static/js/main.29b5d833.chunk.js" 17 | }, 18 | { 19 | "revision": "e74c4cb01b298f907401", 20 | "url": "/react-simple-pull-to-refresh/static/js/runtime-main.dd9dbc43.js" 21 | } 22 | ]); -------------------------------------------------------------------------------- /docs/precache-manifest.2a1d4cb30f002bc6fed4969d364b9330.js: -------------------------------------------------------------------------------- 1 | self.__precacheManifest = (self.__precacheManifest || []).concat([ 2 | { 3 | "revision": "d26e4359df6833568a4b3aefa4aab370", 4 | "url": "/react-simple-pull-to-refresh/index.html" 5 | }, 6 | { 7 | "revision": "f95e8a317ffc8d6d6c45", 8 | "url": "/react-simple-pull-to-refresh/static/css/main.2c36170d.chunk.css" 9 | }, 10 | { 11 | "revision": "b87cefe09418f566e8b6", 12 | "url": "/react-simple-pull-to-refresh/static/js/2.fa031f80.chunk.js" 13 | }, 14 | { 15 | "revision": "f95e8a317ffc8d6d6c45", 16 | "url": "/react-simple-pull-to-refresh/static/js/main.9bf6d823.chunk.js" 17 | }, 18 | { 19 | "revision": "e74c4cb01b298f907401", 20 | "url": "/react-simple-pull-to-refresh/static/js/runtime-main.dd9dbc43.js" 21 | } 22 | ]); -------------------------------------------------------------------------------- /docs/precache-manifest.32eb72f71ec0ad5f13a0fd056d8a62ea.js: -------------------------------------------------------------------------------- 1 | self.__precacheManifest = (self.__precacheManifest || []).concat([ 2 | { 3 | "revision": "b8d68c8ba2647c6cdd65a158de32d809", 4 | "url": "/react-simple-pull-to-refresh/index.html" 5 | }, 6 | { 7 | "revision": "b16349a12bebae034001", 8 | "url": "/react-simple-pull-to-refresh/static/css/main.4ed805f0.chunk.css" 9 | }, 10 | { 11 | "revision": "4eb5ba97362c21187cdb", 12 | "url": "/react-simple-pull-to-refresh/static/js/2.ce7fa3e7.chunk.js" 13 | }, 14 | { 15 | "revision": "b16349a12bebae034001", 16 | "url": "/react-simple-pull-to-refresh/static/js/main.36aacf2c.chunk.js" 17 | }, 18 | { 19 | "revision": "e74c4cb01b298f907401", 20 | "url": "/react-simple-pull-to-refresh/static/js/runtime-main.dd9dbc43.js" 21 | } 22 | ]); -------------------------------------------------------------------------------- /docs/precache-manifest.409be7e9ef7f20ee559ccb0411611cfc.js: -------------------------------------------------------------------------------- 1 | self.__precacheManifest = (self.__precacheManifest || []).concat([ 2 | { 3 | "revision": "92cce5cdd1b42157dd56b9b3b754bb31", 4 | "url": "/react-simple-pull-to-refresh/index.html" 5 | }, 6 | { 7 | "revision": "c46260c2f8c7be219a0e", 8 | "url": "/react-simple-pull-to-refresh/static/css/main.4ed805f0.chunk.css" 9 | }, 10 | { 11 | "revision": "4eb5ba97362c21187cdb", 12 | "url": "/react-simple-pull-to-refresh/static/js/2.ce7fa3e7.chunk.js" 13 | }, 14 | { 15 | "revision": "c46260c2f8c7be219a0e", 16 | "url": "/react-simple-pull-to-refresh/static/js/main.60884689.chunk.js" 17 | }, 18 | { 19 | "revision": "e74c4cb01b298f907401", 20 | "url": "/react-simple-pull-to-refresh/static/js/runtime-main.dd9dbc43.js" 21 | } 22 | ]); -------------------------------------------------------------------------------- /docs/precache-manifest.4eeed1c17041057ff4d8d13a6a8e720e.js: -------------------------------------------------------------------------------- 1 | self.__precacheManifest = (self.__precacheManifest || []).concat([ 2 | { 3 | "revision": "946be0af5ffbded8dd516ba903598285", 4 | "url": "/react-simple-pull-to-refresh/index.html" 5 | }, 6 | { 7 | "revision": "4165949779918b1c4ec7", 8 | "url": "/react-simple-pull-to-refresh/static/css/main.8aa9810e.chunk.css" 9 | }, 10 | { 11 | "revision": "4eb5ba97362c21187cdb", 12 | "url": "/react-simple-pull-to-refresh/static/js/2.ce7fa3e7.chunk.js" 13 | }, 14 | { 15 | "revision": "4165949779918b1c4ec7", 16 | "url": "/react-simple-pull-to-refresh/static/js/main.3a61f424.chunk.js" 17 | }, 18 | { 19 | "revision": "e74c4cb01b298f907401", 20 | "url": "/react-simple-pull-to-refresh/static/js/runtime-main.dd9dbc43.js" 21 | } 22 | ]); -------------------------------------------------------------------------------- /docs/precache-manifest.5616aa284d6ed4511e3249f01616738e.js: -------------------------------------------------------------------------------- 1 | self.__precacheManifest = (self.__precacheManifest || []).concat([ 2 | { 3 | "revision": "89b815570abcc82283a4d2577aa1a6c8", 4 | "url": "/react-simple-pull-to-refresh/index.html" 5 | }, 6 | { 7 | "revision": "64c4bdd8e790f6831dd2", 8 | "url": "/react-simple-pull-to-refresh/static/css/main.4ed805f0.chunk.css" 9 | }, 10 | { 11 | "revision": "4eb5ba97362c21187cdb", 12 | "url": "/react-simple-pull-to-refresh/static/js/2.ce7fa3e7.chunk.js" 13 | }, 14 | { 15 | "revision": "64c4bdd8e790f6831dd2", 16 | "url": "/react-simple-pull-to-refresh/static/js/main.ea161887.chunk.js" 17 | }, 18 | { 19 | "revision": "e74c4cb01b298f907401", 20 | "url": "/react-simple-pull-to-refresh/static/js/runtime-main.dd9dbc43.js" 21 | } 22 | ]); -------------------------------------------------------------------------------- /docs/precache-manifest.581823661a0500329e0ddcff1b1caa6b.js: -------------------------------------------------------------------------------- 1 | self.__precacheManifest = (self.__precacheManifest || []).concat([ 2 | { 3 | "revision": "ef5c5696cf9bd1cd01bf2c6bf76ab239", 4 | "url": "/react-simple-pull-to-refresh/index.html" 5 | }, 6 | { 7 | "revision": "c1abed539c7fd50f976d", 8 | "url": "/react-simple-pull-to-refresh/static/css/main.609cc2a1.chunk.css" 9 | }, 10 | { 11 | "revision": "b87cefe09418f566e8b6", 12 | "url": "/react-simple-pull-to-refresh/static/js/2.fa031f80.chunk.js" 13 | }, 14 | { 15 | "revision": "c1abed539c7fd50f976d", 16 | "url": "/react-simple-pull-to-refresh/static/js/main.3f02033c.chunk.js" 17 | }, 18 | { 19 | "revision": "e74c4cb01b298f907401", 20 | "url": "/react-simple-pull-to-refresh/static/js/runtime-main.dd9dbc43.js" 21 | } 22 | ]); -------------------------------------------------------------------------------- /docs/precache-manifest.60ae62bd984225d9d6756ee99408105f.js: -------------------------------------------------------------------------------- 1 | self.__precacheManifest = (self.__precacheManifest || []).concat([ 2 | { 3 | "revision": "699d2ac367428db7adc621d6d45ab6ca", 4 | "url": "/react-simple-pull-to-refresh/index.html" 5 | }, 6 | { 7 | "revision": "92d8461652e9ff7e3dd9", 8 | "url": "/react-simple-pull-to-refresh/static/css/main.4ed805f0.chunk.css" 9 | }, 10 | { 11 | "revision": "4eb5ba97362c21187cdb", 12 | "url": "/react-simple-pull-to-refresh/static/js/2.ce7fa3e7.chunk.js" 13 | }, 14 | { 15 | "revision": "92d8461652e9ff7e3dd9", 16 | "url": "/react-simple-pull-to-refresh/static/js/main.568b43db.chunk.js" 17 | }, 18 | { 19 | "revision": "e74c4cb01b298f907401", 20 | "url": "/react-simple-pull-to-refresh/static/js/runtime-main.dd9dbc43.js" 21 | } 22 | ]); -------------------------------------------------------------------------------- /docs/precache-manifest.6f8b33acd54c2a9acb61d0beaf009590.js: -------------------------------------------------------------------------------- 1 | self.__precacheManifest = (self.__precacheManifest || []).concat([ 2 | { 3 | "revision": "789e655d69e2b23f5af255a819acbab4", 4 | "url": "/react-simple-pull-to-refresh/index.html" 5 | }, 6 | { 7 | "revision": "fbf728a345df4ad34411", 8 | "url": "/react-simple-pull-to-refresh/static/css/main.609cc2a1.chunk.css" 9 | }, 10 | { 11 | "revision": "b87cefe09418f566e8b6", 12 | "url": "/react-simple-pull-to-refresh/static/js/2.fa031f80.chunk.js" 13 | }, 14 | { 15 | "revision": "fbf728a345df4ad34411", 16 | "url": "/react-simple-pull-to-refresh/static/js/main.539afb7b.chunk.js" 17 | }, 18 | { 19 | "revision": "e74c4cb01b298f907401", 20 | "url": "/react-simple-pull-to-refresh/static/js/runtime-main.dd9dbc43.js" 21 | } 22 | ]); -------------------------------------------------------------------------------- /docs/precache-manifest.75aca241657b25843a06b85b18aa7fd2.js: -------------------------------------------------------------------------------- 1 | self.__precacheManifest = (self.__precacheManifest || []).concat([ 2 | { 3 | "revision": "8779c752248886287ecc63f5a1da98d6", 4 | "url": "/react-simple-pull-to-refresh/index.html" 5 | }, 6 | { 7 | "revision": "7a7124d7da89a345db39", 8 | "url": "/react-simple-pull-to-refresh/static/css/main.609cc2a1.chunk.css" 9 | }, 10 | { 11 | "revision": "b87cefe09418f566e8b6", 12 | "url": "/react-simple-pull-to-refresh/static/js/2.fa031f80.chunk.js" 13 | }, 14 | { 15 | "revision": "7a7124d7da89a345db39", 16 | "url": "/react-simple-pull-to-refresh/static/js/main.60752506.chunk.js" 17 | }, 18 | { 19 | "revision": "e74c4cb01b298f907401", 20 | "url": "/react-simple-pull-to-refresh/static/js/runtime-main.dd9dbc43.js" 21 | } 22 | ]); -------------------------------------------------------------------------------- /docs/precache-manifest.836ae0097c5f1aac4c6a28a99385bcd0.js: -------------------------------------------------------------------------------- 1 | self.__precacheManifest = (self.__precacheManifest || []).concat([ 2 | { 3 | "revision": "274fccac0ac081e8685f556a3da96060", 4 | "url": "/react-simple-pull-to-refresh/index.html" 5 | }, 6 | { 7 | "revision": "c066fd873e7645e7f9e7", 8 | "url": "/react-simple-pull-to-refresh/static/css/main.609cc2a1.chunk.css" 9 | }, 10 | { 11 | "revision": "b87cefe09418f566e8b6", 12 | "url": "/react-simple-pull-to-refresh/static/js/2.fa031f80.chunk.js" 13 | }, 14 | { 15 | "revision": "c066fd873e7645e7f9e7", 16 | "url": "/react-simple-pull-to-refresh/static/js/main.100e47c1.chunk.js" 17 | }, 18 | { 19 | "revision": "e74c4cb01b298f907401", 20 | "url": "/react-simple-pull-to-refresh/static/js/runtime-main.dd9dbc43.js" 21 | } 22 | ]); -------------------------------------------------------------------------------- /docs/precache-manifest.a0c61d87f54193ad0e92e6c67433dcf7.js: -------------------------------------------------------------------------------- 1 | self.__precacheManifest = (self.__precacheManifest || []).concat([ 2 | { 3 | "revision": "b85abdaf6ac16383d6836128b5814a06", 4 | "url": "/react-simple-pull-to-refresh/index.html" 5 | }, 6 | { 7 | "revision": "edaf7c18b867400e056c", 8 | "url": "/react-simple-pull-to-refresh/static/css/main.4ed805f0.chunk.css" 9 | }, 10 | { 11 | "revision": "4eb5ba97362c21187cdb", 12 | "url": "/react-simple-pull-to-refresh/static/js/2.ce7fa3e7.chunk.js" 13 | }, 14 | { 15 | "revision": "edaf7c18b867400e056c", 16 | "url": "/react-simple-pull-to-refresh/static/js/main.5818df09.chunk.js" 17 | }, 18 | { 19 | "revision": "e74c4cb01b298f907401", 20 | "url": "/react-simple-pull-to-refresh/static/js/runtime-main.dd9dbc43.js" 21 | } 22 | ]); -------------------------------------------------------------------------------- /docs/precache-manifest.d2dcbfd571f0f167a73d9e08866a6dba.js: -------------------------------------------------------------------------------- 1 | self.__precacheManifest = (self.__precacheManifest || []).concat([ 2 | { 3 | "revision": "ef2ea89fa06b2b0e817317f13c24e8cf", 4 | "url": "/react-simple-pull-to-refresh/index.html" 5 | }, 6 | { 7 | "revision": "9cf7b44a0ac1c0ba777f", 8 | "url": "/react-simple-pull-to-refresh/static/css/main.609cc2a1.chunk.css" 9 | }, 10 | { 11 | "revision": "b87cefe09418f566e8b6", 12 | "url": "/react-simple-pull-to-refresh/static/js/2.fa031f80.chunk.js" 13 | }, 14 | { 15 | "revision": "9cf7b44a0ac1c0ba777f", 16 | "url": "/react-simple-pull-to-refresh/static/js/main.37c8f8f4.chunk.js" 17 | }, 18 | { 19 | "revision": "e74c4cb01b298f907401", 20 | "url": "/react-simple-pull-to-refresh/static/js/runtime-main.dd9dbc43.js" 21 | } 22 | ]); -------------------------------------------------------------------------------- /docs/precache-manifest.d944fe3be93f12a45300e4083b4081a6.js: -------------------------------------------------------------------------------- 1 | self.__precacheManifest = (self.__precacheManifest || []).concat([ 2 | { 3 | "revision": "26dce3a866d855df790db4c109a9f6b1", 4 | "url": "/react-simple-pull-to-refresh/index.html" 5 | }, 6 | { 7 | "revision": "0ec4bcf07207eea47265", 8 | "url": "/react-simple-pull-to-refresh/static/css/main.609cc2a1.chunk.css" 9 | }, 10 | { 11 | "revision": "b87cefe09418f566e8b6", 12 | "url": "/react-simple-pull-to-refresh/static/js/2.fa031f80.chunk.js" 13 | }, 14 | { 15 | "revision": "0ec4bcf07207eea47265", 16 | "url": "/react-simple-pull-to-refresh/static/js/main.028fee3e.chunk.js" 17 | }, 18 | { 19 | "revision": "e74c4cb01b298f907401", 20 | "url": "/react-simple-pull-to-refresh/static/js/runtime-main.dd9dbc43.js" 21 | } 22 | ]); -------------------------------------------------------------------------------- /docs/precache-manifest.db32af7bb8fdb6eae62fd9fd83578331.js: -------------------------------------------------------------------------------- 1 | self.__precacheManifest = (self.__precacheManifest || []).concat([ 2 | { 3 | "revision": "7941419d8e5ed6c66865396002e62a5f", 4 | "url": "/react-simple-pull-to-refresh/index.html" 5 | }, 6 | { 7 | "revision": "34f3a7d9e91becb9cd73", 8 | "url": "/react-simple-pull-to-refresh/static/css/main.609cc2a1.chunk.css" 9 | }, 10 | { 11 | "revision": "b87cefe09418f566e8b6", 12 | "url": "/react-simple-pull-to-refresh/static/js/2.fa031f80.chunk.js" 13 | }, 14 | { 15 | "revision": "34f3a7d9e91becb9cd73", 16 | "url": "/react-simple-pull-to-refresh/static/js/main.f34627b8.chunk.js" 17 | }, 18 | { 19 | "revision": "e74c4cb01b298f907401", 20 | "url": "/react-simple-pull-to-refresh/static/js/runtime-main.dd9dbc43.js" 21 | } 22 | ]); -------------------------------------------------------------------------------- /docs/precache-manifest.e1d30e97e339f2b88ce5728af299e878.js: -------------------------------------------------------------------------------- 1 | self.__precacheManifest = (self.__precacheManifest || []).concat([ 2 | { 3 | "revision": "e4c0f72225267e48095d7c6619a293f4", 4 | "url": "/react-simple-pull-to-refresh/index.html" 5 | }, 6 | { 7 | "revision": "cab036de5abd1707d45f", 8 | "url": "/react-simple-pull-to-refresh/static/css/main.4ed805f0.chunk.css" 9 | }, 10 | { 11 | "revision": "4eb5ba97362c21187cdb", 12 | "url": "/react-simple-pull-to-refresh/static/js/2.ce7fa3e7.chunk.js" 13 | }, 14 | { 15 | "revision": "cab036de5abd1707d45f", 16 | "url": "/react-simple-pull-to-refresh/static/js/main.b6ce14fd.chunk.js" 17 | }, 18 | { 19 | "revision": "e74c4cb01b298f907401", 20 | "url": "/react-simple-pull-to-refresh/static/js/runtime-main.dd9dbc43.js" 21 | } 22 | ]); -------------------------------------------------------------------------------- /docs/precache-manifest.e2b167acef1e86a3019e7221c5fe65ed.js: -------------------------------------------------------------------------------- 1 | self.__precacheManifest = (self.__precacheManifest || []).concat([ 2 | { 3 | "revision": "c9da8ea263edb0a71fd9c73fa9a3bf9f", 4 | "url": "/react-simple-pull-to-refresh/index.html" 5 | }, 6 | { 7 | "revision": "1753a60b0964d8ee6d6b", 8 | "url": "/react-simple-pull-to-refresh/static/css/main.4ed805f0.chunk.css" 9 | }, 10 | { 11 | "revision": "4eb5ba97362c21187cdb", 12 | "url": "/react-simple-pull-to-refresh/static/js/2.ce7fa3e7.chunk.js" 13 | }, 14 | { 15 | "revision": "1753a60b0964d8ee6d6b", 16 | "url": "/react-simple-pull-to-refresh/static/js/main.b28d2740.chunk.js" 17 | }, 18 | { 19 | "revision": "e74c4cb01b298f907401", 20 | "url": "/react-simple-pull-to-refresh/static/js/runtime-main.dd9dbc43.js" 21 | } 22 | ]); -------------------------------------------------------------------------------- /docs/precache-manifest.fef0e41f6f03ce2eeb9e823693d76cc6.js: -------------------------------------------------------------------------------- 1 | self.__precacheManifest = (self.__precacheManifest || []).concat([ 2 | { 3 | "revision": "efd13898e4b9fcd8d05cb207353fc80e", 4 | "url": "/react-simple-pull-to-refresh/index.html" 5 | }, 6 | { 7 | "revision": "283f743af568b1fda081", 8 | "url": "/react-simple-pull-to-refresh/static/css/main.4ed805f0.chunk.css" 9 | }, 10 | { 11 | "revision": "4eb5ba97362c21187cdb", 12 | "url": "/react-simple-pull-to-refresh/static/js/2.ce7fa3e7.chunk.js" 13 | }, 14 | { 15 | "revision": "283f743af568b1fda081", 16 | "url": "/react-simple-pull-to-refresh/static/js/main.524f22fd.chunk.js" 17 | }, 18 | { 19 | "revision": "e74c4cb01b298f907401", 20 | "url": "/react-simple-pull-to-refresh/static/js/runtime-main.dd9dbc43.js" 21 | } 22 | ]); -------------------------------------------------------------------------------- /docs/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /docs/service-worker.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Welcome to your Workbox-powered service worker! 3 | * 4 | * You'll need to register this file in your web app and you should 5 | * disable HTTP caching for this file too. 6 | * See https://goo.gl/nhQhGp 7 | * 8 | * The rest of the code is auto-generated. Please don't update this file 9 | * directly; instead, make changes to your Workbox build configuration 10 | * and re-run your build process. 11 | * See https://goo.gl/2aRDsh 12 | */ 13 | 14 | importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js"); 15 | 16 | importScripts( 17 | "/react-simple-pull-to-refresh/precache-manifest.5616aa284d6ed4511e3249f01616738e.js" 18 | ); 19 | 20 | self.addEventListener('message', (event) => { 21 | if (event.data && event.data.type === 'SKIP_WAITING') { 22 | self.skipWaiting(); 23 | } 24 | }); 25 | 26 | workbox.core.clientsClaim(); 27 | 28 | /** 29 | * The workboxSW.precacheAndRoute() method efficiently caches and responds to 30 | * requests for URLs in the manifest. 31 | * See https://goo.gl/S9QRab 32 | */ 33 | self.__precacheManifest = [].concat(self.__precacheManifest || []); 34 | workbox.precaching.precacheAndRoute(self.__precacheManifest, {}); 35 | 36 | workbox.routing.registerNavigationRoute(workbox.precaching.getCacheKeyForURL("/react-simple-pull-to-refresh/index.html"), { 37 | 38 | blacklist: [/^\/_/,/\/[^/?]+\.[^/]+$/], 39 | }); 40 | -------------------------------------------------------------------------------- /docs/static/css/main.0388a0eb.css: -------------------------------------------------------------------------------- 1 | body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0}body,code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}h1,h2{margin:.3rem}h1{font-size:2rem}h2{font-size:1rem}.App-header{align-items:center;background-color:#282c34;color:#fff;display:flex;flex-direction:column;font-size:calc(10px + 2vmin);height:15vh;justify-content:center;text-align:center}.App-ptr{height:100%}.App-commands{background:linear-gradient(35deg,#64b6ac,#3c6b7c 100%)}.commands{display:flex;overflow-x:auto;padding:15px 20px}.command__group{align-items:center;display:flex;font-size:1rem;margin:10px}input[type=number]{background:#fff;background-position:0 15px;background-repeat:no-repeat;background-size:15px 15px;border:2px solid transparent;border-radius:3px;color:salmon;font-weight:700;line-height:15px;margin-right:1rem;padding:5px;width:35px}input[type=checkbox]{height:20px;margin-right:1rem;position:relative;width:20px}input[type=checkbox]:after{background:#fff;background-image:url(https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-21-32.png);background-position:0 15px;background-repeat:no-repeat;background-size:15px 15px;border:2px solid transparent;border-radius:3px;color:transparent;content:"\00D7";display:block;height:15px;left:0;line-height:15px;pointer-events:none;position:absolute;top:0;transition:all .25s ease-in-out;width:15px}input[type=checkbox]:checked:after{background-color:salmon;background-position:0 0}input[type=checkbox]:hover:after{border-color:salmon}button{background:transparent;border:1px solid #fff;border-radius:3px;color:#fff;padding:10px} 2 | /*# sourceMappingURL=main.0388a0eb.css.map*/ -------------------------------------------------------------------------------- /docs/static/css/main.0388a0eb.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"static/css/main.0388a0eb.css","mappings":"AAAA,KAGE,kCAAmC,CACnC,iCAAkC,CAHlC,QAIF,CAEA,UALE,uEAOF,CAEA,MAEE,YACF,CAEA,GACE,cACF,CAEA,GACE,cACF,CCtBA,YAME,kBAAmB,CAJnB,wBAAyB,CAOzB,UAAY,CALZ,YAAa,CACb,qBAAsB,CAGtB,4BAA6B,CAL7B,WAAY,CAIZ,sBAAuB,CANvB,iBASF,CAEA,SACE,WACF,CAEA,cACE,sDACF,CClBA,UACE,YAAa,CACb,eAAgB,CAChB,iBACF,CAEA,gBAEE,kBAAmB,CADnB,YAAa,CAGb,cAAe,CADf,WAEF,CAEA,mBACE,eAAiB,CAGjB,0BAA2B,CAC3B,2BAA4B,CAC5B,yBAA0B,CAG1B,4BAAyB,CAPzB,iBAAkB,CAQlB,YAAa,CACb,eAAiB,CARjB,gBAAiB,CAUjB,iBAAkB,CADlB,WAAY,CAEZ,UACF,CAEA,qBACE,WAAY,CAGZ,iBAAkB,CADlB,iBAAkB,CADlB,UAGF,CAEA,2BAGE,eAAiB,CACjB,0GAA6G,CAW7G,0BAA2B,CAC3B,2BAA4B,CAC5B,yBAA0B,CAG1B,4BAAyB,CAPzB,iBAAkB,CAFlB,iBAAkB,CAVlB,eAAgB,CAChB,aAAc,CAOd,WAAY,CADZ,MAAO,CAMP,gBAAiB,CATjB,mBAAoB,CACpB,iBAAkB,CAClB,KAAM,CAKN,+BAAiC,CAFjC,UAWF,CACA,mCACE,uBAAwB,CACxB,uBACF,CACA,iCACE,mBACF,CAEA,OACE,sBAAuB,CACvB,qBAAuB,CACvB,iBAAkB,CAElB,UAAY,CADZ,YAEF","sources":["index.css","App.css","commands/commands.css"],"sourcesContent":["body {\n margin: 0;\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;\n}\n\nh1,\nh2 {\n margin: 0.3rem;\n}\n\nh1  {\n font-size: 2rem;\n}\n\nh2 {\n font-size: 1rem;\n}\n",".App-header {\n text-align: center;\n background-color: #282c34;\n height: 15vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: calc(10px + 2vmin);\n color: white;\n}\n\n.App-ptr {\n height: 100%;\n}\n\n.App-commands {\n background: linear-gradient(35deg, #64b6ac, #3c6b7c 100%);\n}\n",".commands {\n display: flex;\n overflow-x: auto;\n padding: 15px 20px;\n}\n\n.command__group {\n display: flex;\n align-items: center;\n margin: 10px;\n font-size: 1rem;\n}\n\ninput[type='number'] {\n background: white;\n border-radius: 3px;\n line-height: 15px;\n background-position: 0 15px;\n background-repeat: no-repeat;\n background-size: 15px 15px;\n border-width: 2px;\n border-style: solid;\n border-color: transparent;\n color: salmon;\n font-weight: bold;\n padding: 5px;\n margin-right: 1rem;\n width: 35px;\n}\n\ninput[type='checkbox'] {\n height: 20px;\n width: 20px;\n position: relative;\n margin-right: 1rem;\n}\n\ninput[type='checkbox']:after {\n content: '\\00D7';\n display: block;\n background: white;\n background-image: url('https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-21-32.png');\n pointer-events: none;\n position: absolute;\n top: 0;\n left: 0;\n height: 15px;\n width: 15px;\n color: transparent;\n transition: 0.25s all ease-in-out;\n border-radius: 3px;\n line-height: 15px;\n background-position: 0 15px;\n background-repeat: no-repeat;\n background-size: 15px 15px;\n border-width: 2px;\n border-style: solid;\n border-color: transparent;\n}\ninput[type='checkbox']:checked:after {\n background-color: salmon;\n background-position: 0 0;\n}\ninput[type='checkbox']:hover:after {\n border-color: salmon;\n}\n\nbutton {\n background: transparent;\n border: 1px solid white;\n border-radius: 3px;\n padding: 10px;\n color: white;\n}\n"],"names":[],"sourceRoot":""} -------------------------------------------------------------------------------- /docs/static/css/main.2c36170d.chunk.css: -------------------------------------------------------------------------------- 1 | body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App-header{text-align:center;background-color:#282c34;height:15vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(10px + 2vmin);color:#fff} 2 | /*# sourceMappingURL=main.2c36170d.chunk.css.map */ -------------------------------------------------------------------------------- /docs/static/css/main.2c36170d.chunk.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["index.css","App.css"],"names":[],"mappings":"AAAA,KACE,QAAS,CACT,mIAEY,CACZ,kCAAmC,CACnC,iCACF,CAEA,KACE,uEAEF,CCZA,YACE,iBAAkB,CAClB,wBAAyB,CACzB,WAAY,CACZ,YAAa,CACb,qBAAsB,CACtB,kBAAmB,CACnB,sBAAuB,CACvB,4BAA6B,CAC7B,UACF","file":"main.2c36170d.chunk.css","sourcesContent":["body {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n monospace;\n}\n",".App-header {\n text-align: center;\n background-color: #282c34;\n height: 15vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: calc(10px + 2vmin);\n color: white;\n}\n"]} -------------------------------------------------------------------------------- /docs/static/css/main.4ed805f0.chunk.css: -------------------------------------------------------------------------------- 1 | body{margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body,code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}h1,h2{margin:.3rem}h1{font-size:2rem}h2{font-size:1rem}.App-header{text-align:center;background-color:#282c34;height:15vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(10px + 2vmin);color:#fff}.App-ptr{height:100%}.App-commands{background:linear-gradient(35deg,#64b6ac,#3c6b7c 100%)}.commands{display:flex;overflow-x:auto;padding:15px 20px}.command__group{display:flex;align-items:center;margin:10px;font-size:1rem}input[type=number]{background:#fff;border-radius:3px;line-height:15px;background-position:0 15px;background-repeat:no-repeat;background-size:15px 15px;border:2px solid transparent;color:salmon;font-weight:700;padding:5px;margin-right:1rem;width:35px}input[type=checkbox]{height:20px;width:20px;position:relative;margin-right:1rem}input[type=checkbox]:after{content:"\00D7";display:block;background:#fff;background-image:url(https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-21-32.png);pointer-events:none;position:absolute;top:0;left:0;height:15px;width:15px;color:transparent;-webkit-transition:all .25s ease-in-out;transition:all .25s ease-in-out;border-radius:3px;line-height:15px;background-position:0 15px;background-repeat:no-repeat;background-size:15px 15px;border:2px solid transparent}input[type=checkbox]:checked:after{background-color:salmon;background-position:0 0}input[type=checkbox]:hover:after{border-color:salmon}button{background:transparent;border:1px solid #fff;border-radius:3px;padding:10px;color:#fff} 2 | /*# sourceMappingURL=main.4ed805f0.chunk.css.map */ -------------------------------------------------------------------------------- /docs/static/css/main.4ed805f0.chunk.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["index.css","App.css","commands.css"],"names":[],"mappings":"AAAA,KACE,QAAS,CAET,kCAAmC,CACnC,iCACF,CAEA,UALE,uEAOF,CAEA,MAEE,YACF,CAEA,GACE,cACF,CAEA,GACE,cACF,CCtBA,YACE,iBAAkB,CAClB,wBAAyB,CACzB,WAAY,CACZ,YAAa,CACb,qBAAsB,CACtB,kBAAmB,CACnB,sBAAuB,CACvB,4BAA6B,CAC7B,UACF,CAEA,SACE,WACF,CAEA,cACE,sDACF,CClBA,UACE,YAAa,CACb,eAAgB,CAChB,iBACF,CAEA,gBACE,YAAa,CACb,kBAAmB,CACnB,WAAY,CACZ,cACF,CAEA,mBACE,eAAiB,CACjB,iBAAkB,CAClB,gBAAiB,CACjB,0BAA2B,CAC3B,2BAA4B,CAC5B,yBAA0B,CAG1B,4BAAyB,CACzB,YAAa,CACb,eAAiB,CACjB,WAAY,CACZ,iBAAkB,CAClB,UACF,CAEA,qBACE,WAAY,CACZ,UAAW,CACX,iBAAkB,CAClB,iBACF,CAEA,2BACE,eAAgB,CAChB,aAAc,CACd,eAAiB,CACjB,0GAA6G,CAC7G,mBAAoB,CACpB,iBAAkB,CAClB,KAAM,CACN,MAAO,CACP,WAAY,CACZ,UAAW,CACX,iBAAkB,CAClB,uCAAiC,CAAjC,+BAAiC,CACjC,iBAAkB,CAClB,gBAAiB,CACjB,0BAA2B,CAC3B,2BAA4B,CAC5B,yBAA0B,CAG1B,4BACF,CACA,mCACE,uBAAwB,CACxB,uBACF,CACA,iCACE,mBACF,CAEA,OACE,sBAAuB,CACvB,qBAAuB,CACvB,iBAAkB,CAClB,YAAa,CACb,UACF","file":"main.4ed805f0.chunk.css","sourcesContent":["body {\n margin: 0;\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;\n}\n\nh1,\nh2 {\n margin: 0.3rem;\n}\n\nh1  {\n font-size: 2rem;\n}\n\nh2 {\n font-size: 1rem;\n}\n",".App-header {\n text-align: center;\n background-color: #282c34;\n height: 15vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: calc(10px + 2vmin);\n color: white;\n}\n\n.App-ptr {\n height: 100%;\n}\n\n.App-commands {\n background: linear-gradient(35deg, #64b6ac, #3c6b7c 100%);\n}\n",".commands {\n display: flex;\n overflow-x: auto;\n padding: 15px 20px;\n}\n\n.command__group {\n display: flex;\n align-items: center;\n margin: 10px;\n font-size: 1rem;\n}\n\ninput[type='number'] {\n background: white;\n border-radius: 3px;\n line-height: 15px;\n background-position: 0 15px;\n background-repeat: no-repeat;\n background-size: 15px 15px;\n border-width: 2px;\n border-style: solid;\n border-color: transparent;\n color: salmon;\n font-weight: bold;\n padding: 5px;\n margin-right: 1rem;\n width: 35px;\n}\n\ninput[type='checkbox'] {\n height: 20px;\n width: 20px;\n position: relative;\n margin-right: 1rem;\n}\n\ninput[type='checkbox']:after {\n content: '\\00D7';\n display: block;\n background: white;\n background-image: url('https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-21-32.png');\n pointer-events: none;\n position: absolute;\n top: 0;\n left: 0;\n height: 15px;\n width: 15px;\n color: transparent;\n transition: 0.25s all ease-in-out;\n border-radius: 3px;\n line-height: 15px;\n background-position: 0 15px;\n background-repeat: no-repeat;\n background-size: 15px 15px;\n border-width: 2px;\n border-style: solid;\n border-color: transparent;\n}\ninput[type='checkbox']:checked:after {\n background-color: salmon;\n background-position: 0 0;\n}\ninput[type='checkbox']:hover:after {\n border-color: salmon;\n}\n\nbutton {\n background: transparent;\n border: 1px solid white;\n border-radius: 3px;\n padding: 10px;\n color: white;\n}\n"]} -------------------------------------------------------------------------------- /docs/static/css/main.609cc2a1.chunk.css: -------------------------------------------------------------------------------- 1 | body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{height:100vh}.App-header{text-align:center;background-color:#282c34;height:15vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(10px + 2vmin);color:#fff} 2 | /*# sourceMappingURL=main.609cc2a1.chunk.css.map */ -------------------------------------------------------------------------------- /docs/static/css/main.609cc2a1.chunk.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["index.css","App.css"],"names":[],"mappings":"AAAA,KACE,QAAS,CACT,mIAEY,CACZ,kCAAmC,CACnC,iCACF,CAEA,KACE,uEAEF,CCZA,KACE,YACF,CAEA,YACE,iBAAkB,CAClB,wBAAyB,CACzB,WAAY,CACZ,YAAa,CACb,qBAAsB,CACtB,kBAAmB,CACnB,sBAAuB,CACvB,4BAA6B,CAC7B,UACF","file":"main.609cc2a1.chunk.css","sourcesContent":["body {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n monospace;\n}\n",".App {\n height: 100vh;\n}\n\n.App-header {\n text-align: center;\n background-color: #282c34;\n height: 15vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: calc(10px + 2vmin);\n color: white;\n}\n"]} -------------------------------------------------------------------------------- /docs/static/css/main.8aa9810e.chunk.css: -------------------------------------------------------------------------------- 1 | body{margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body,code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}h1,h2{margin:.3rem}h1{font-size:2rem}h2{font-size:1rem}.App-header{text-align:center;background-color:#282c34;height:15vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(10px + 2vmin);color:#fff}.App-ptr{height:100%}.App-commands{background:linear-gradient(35deg,#64b6ac,#3c6b7c 100%)}.commands{display:flex;overflow-x:auto;padding:15px 20px}.command__group{display:flex;align-items:center;margin:10px;font-size:1rem}input[type=number]{background:#fff;border-radius:3px;line-height:15px;background-position:0 15px;background-repeat:no-repeat;background-size:15px 15px;border:2px solid transparent;color:salmon;font-weight:700;padding:5px;margin-right:1rem;width:35px}input[type=checkbox]{height:20px;width:20px;position:relative;margin-right:1rem}input[type=checkbox]:after{content:"\00D7";display:block;background:#fff;background-image:url(https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-21-32.png);pointer-events:none;position:absolute;top:0;left:0;height:15px;width:15px;color:transparent;-webkit-transition:all .25s ease-in-out;transition:all .25s ease-in-out;border-radius:3px;line-height:15px;background-position:0 15px;background-repeat:no-repeat;background-size:15px 15px;border:2px solid transparent}input[type=checkbox]:checked:after{background-color:salmon;background-position:0 0}input[type=checkbox]:hover:after{border-color:salmon}button{background:transparent;border:1px solid #fff;border-radius:3px;padding:10px;color:#fff} 2 | /*# sourceMappingURL=main.8aa9810e.chunk.css.map */ -------------------------------------------------------------------------------- /docs/static/css/main.8aa9810e.chunk.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["index.css","App.css","commands.css"],"names":[],"mappings":"AAAA,KACE,QAAS,CAET,kCAAmC,CACnC,iCACF,CAEA,UALE,uEAOF,CAEA,MAEE,YACF,CAEA,GACE,cACF,CAEA,GACE,cACF,CCtBA,YACE,iBAAkB,CAClB,wBAAyB,CACzB,WAAY,CACZ,YAAa,CACb,qBAAsB,CACtB,kBAAmB,CACnB,sBAAuB,CACvB,4BAA6B,CAC7B,UACF,CAEA,SACE,WACF,CAEA,cACE,sDACF,CClBA,UACE,YAAa,CACb,eAAgB,CAChB,iBACF,CAEA,gBACE,YAAa,CACb,kBAAmB,CACnB,WAAY,CACZ,cACF,CAEA,mBACE,eAAiB,CACjB,iBAAkB,CAClB,gBAAiB,CACjB,0BAA2B,CAC3B,2BAA4B,CAC5B,yBAA0B,CAG1B,4BAAyB,CACzB,YAAa,CACb,eAAiB,CACjB,WAAY,CACZ,iBAAkB,CAClB,UACF,CAEA,qBACE,WAAY,CACZ,UAAW,CACX,iBAAkB,CAClB,iBACF,CAEA,2BACE,eAAgB,CAChB,aAAc,CACd,eAAiB,CACjB,0GAA6G,CAC7G,mBAAoB,CACpB,iBAAkB,CAClB,KAAM,CACN,MAAO,CACP,WAAY,CACZ,UAAW,CACX,iBAAkB,CAClB,uCAAiC,CAAjC,+BAAiC,CACjC,iBAAkB,CAClB,gBAAiB,CACjB,0BAA2B,CAC3B,2BAA4B,CAC5B,yBAA0B,CAG1B,4BACF,CACA,mCACE,uBAAwB,CACxB,uBACF,CACA,iCACE,mBACF,CAEA,OACE,sBAAuB,CACvB,qBAAuB,CACvB,iBAAkB,CAClB,YAAa,CACb,UACF","file":"main.8aa9810e.chunk.css","sourcesContent":["body {\r\n margin: 0;\r\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n}\r\n\r\ncode {\r\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;\r\n}\r\n\r\nh1,\r\nh2 {\r\n margin: 0.3rem;\r\n}\r\n\r\nh1  {\r\n font-size: 2rem;\r\n}\r\n\r\nh2 {\r\n font-size: 1rem;\r\n}\r\n",".App-header {\r\n text-align: center;\r\n background-color: #282c34;\r\n height: 15vh;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: calc(10px + 2vmin);\r\n color: white;\r\n}\r\n\r\n.App-ptr {\r\n height: 100%;\r\n}\r\n\r\n.App-commands {\r\n background: linear-gradient(35deg, #64b6ac, #3c6b7c 100%);\r\n}\r\n",".commands {\r\n display: flex;\r\n overflow-x: auto;\r\n padding: 15px 20px;\r\n}\r\n\r\n.command__group {\r\n display: flex;\r\n align-items: center;\r\n margin: 10px;\r\n font-size: 1rem;\r\n}\r\n\r\ninput[type='number'] {\r\n background: white;\r\n border-radius: 3px;\r\n line-height: 15px;\r\n background-position: 0 15px;\r\n background-repeat: no-repeat;\r\n background-size: 15px 15px;\r\n border-width: 2px;\r\n border-style: solid;\r\n border-color: transparent;\r\n color: salmon;\r\n font-weight: bold;\r\n padding: 5px;\r\n margin-right: 1rem;\r\n width: 35px;\r\n}\r\n\r\ninput[type='checkbox'] {\r\n height: 20px;\r\n width: 20px;\r\n position: relative;\r\n margin-right: 1rem;\r\n}\r\n\r\ninput[type='checkbox']:after {\r\n content: '\\00D7';\r\n display: block;\r\n background: white;\r\n background-image: url('https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-21-32.png');\r\n pointer-events: none;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n height: 15px;\r\n width: 15px;\r\n color: transparent;\r\n transition: 0.25s all ease-in-out;\r\n border-radius: 3px;\r\n line-height: 15px;\r\n background-position: 0 15px;\r\n background-repeat: no-repeat;\r\n background-size: 15px 15px;\r\n border-width: 2px;\r\n border-style: solid;\r\n border-color: transparent;\r\n}\r\ninput[type='checkbox']:checked:after {\r\n background-color: salmon;\r\n background-position: 0 0;\r\n}\r\ninput[type='checkbox']:hover:after {\r\n border-color: salmon;\r\n}\r\n\r\nbutton {\r\n background: transparent;\r\n border: 1px solid white;\r\n border-radius: 3px;\r\n padding: 10px;\r\n color: white;\r\n}\r\n"]} -------------------------------------------------------------------------------- /docs/static/js/main.028fee3e.chunk.js: -------------------------------------------------------------------------------- 1 | (this["webpackJsonpreact-simple-pull-to-refresh-playground"]=this["webpackJsonpreact-simple-pull-to-refresh-playground"]||[]).push([[0],[,,,,,function(e,n,t){e.exports=t(12)},,,,,function(e,n,t){},function(e,n,t){},function(e,n,t){"use strict";t.r(n);var r,l=t(0),i=t.n(l),o=t(2),a=t.n(o),s=(t(10),t(3)),c=t(4);t(11);function u(e,n){if(!function(e){var n=getComputedStyle(e).overflowY;return e===document.scrollingElement&&"visible"===n||("scroll"===n||"auto"===n)}(e))return!1;if(n===r.DOWN)return e.scrollTop+e.clientHeight0;throw new Error("unsupported direction")}function d(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!==typeof document){var r=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===t&&r.firstChild?r.insertBefore(l,r.firstChild):r.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}!function(e){e[e.UP=-1]="UP",e[e.DOWN=1]="DOWN"}(r||(r={}));d(".lds-ellipsis {\n display: inline-block;\n position: relative;\n width: 64px;\n height: 64px; }\n\n.lds-ellipsis div {\n position: absolute;\n top: 27px;\n width: 11px;\n height: 11px;\n border-radius: 50%;\n background: #363636;\n animation-timing-function: cubic-bezier(0, 1, 1, 0); }\n\n.lds-ellipsis div:nth-child(1) {\n left: 6px;\n animation: lds-ellipsis1 0.6s infinite; }\n\n.lds-ellipsis div:nth-child(2) {\n left: 6px;\n animation: lds-ellipsis2 0.6s infinite; }\n\n.lds-ellipsis div:nth-child(3) {\n left: 26px;\n animation: lds-ellipsis2 0.6s infinite; }\n\n.lds-ellipsis div:nth-child(4) {\n left: 45px;\n animation: lds-ellipsis3 0.6s infinite; }\n\n@keyframes lds-ellipsis1 {\n 0% {\n transform: scale(0); }\n 100% {\n transform: scale(1); } }\n\n@keyframes lds-ellipsis3 {\n 0% {\n transform: scale(1); }\n 100% {\n transform: scale(0); } }\n\n@keyframes lds-ellipsis2 {\n 0% {\n transform: translate(0, 0); }\n 100% {\n transform: translate(19px, 0); } }\n");var p=function(){return i.a.createElement("div",{className:"lds-ellipsis"},i.a.createElement("div",null),i.a.createElement("div",null),i.a.createElement("div",null),i.a.createElement("div",null))},m=function(){return i.a.createElement("div",null,i.a.createElement("p",null,"\u21a7\xa0\xa0pull to refresh\xa0\xa0\u21a7"))};d(".ptr,\n.ptr__children {\n height: 100%;\n overflow: hidden;\n -webkit-overflow-scrolling: touch;\n position: relative;\n z-index: 1; }\n\n.ptr__children,\n.ptr__pull-down {\n transition: transform 0.2s cubic-bezier(0, 0, 0.31, 1); }\n\n.ptr__pull-down {\n position: absolute;\n overflow: hidden;\n left: 0;\n right: 0;\n top: 0;\n visibility: hidden;\n text-align: center; }\n .ptr__pull-down > div {\n margin: 0 auto; }\n .ptr__pull-down > .ptr__pull-down--loading {\n display: none;\n text-align: center;\n margin: 0 auto; }\n .ptr__pull-down > .ptr__pull-down--pull-more {\n display: none;\n text-align: center;\n margin: 0 auto; }\n\n.ptr--dragging.ptr--treshold-breached .ptr__pull-down--pull-more {\n display: none; }\n\n.ptr--dragging .ptr__pull-down--pull-more {\n display: block; }\n\n.ptr--treshold-breached .ptr__pull-down {\n opacity: 1 !important; }\n\n.ptr--treshold-breached .ptr__pull-down--loading {\n display: block; }\n");var f=function(e){var n=e.refreshingContent,t=void 0===n?i.a.createElement(p,null):n,o=e.pullingContent,a=void 0===o?i.a.createElement(m,null):o,s=e.pullDownThreshold,c=void 0===s?67:s,d=e.maxPullDownDistance,f=void 0===d?95:d,v=e.onRefresh,h=e.backgroundColor,g=e.isPullable,b=void 0===g||g,E=e.children,y=e.className,w=void 0===y?"":y,_=Object(l.useRef)(null),x=Object(l.useRef)(null),L=Object(l.useRef)(null),k=!1,N=!1,O=0,C=0;Object(l.useEffect)((function(){if(b&&x&&x.current)return x.current.addEventListener("touchstart",j,{passive:!0}),x.current.addEventListener("mousedown",j),x.current.addEventListener("touchmove",z,{passive:!1}),x.current.addEventListener("mousemove",z),x.current.addEventListener("touchend",P),x.current.addEventListener("mouseup",P),document.body.addEventListener("mouseleave",P),function(){b&&x&&x.current&&(x.current.removeEventListener("touchstart",j),x.current.removeEventListener("mousedown",j),x.current.removeEventListener("touchmove",z),x.current.removeEventListener("mousemove",z),x.current.removeEventListener("touchend",P),x.current.removeEventListener("mouseup",P),document.body.removeEventListener("mouseleave",P))}}),[b,v,c,f]),Object(l.useEffect)((function(){T()}),[E]);var T=function(){requestAnimationFrame((function(){x.current&&(x.current.style.overflowX="hidden",x.current.style.overflowY="auto",x.current.style.transform="translate(0px, 0px)"),L.current&&(L.current.style.opacity="0"),_.current&&(_.current.classList.remove("ptr--treshold-breached"),_.current.classList.remove("ptr--dragging"))}))},j=function(e){N=!1,e instanceof MouseEvent&&(O=e.pageY),e instanceof TouchEvent&&(O=e.touches[0].pageY),C=O,"touchstart"===e.type&&function e(n,t){return!!u(n,t)||null!=n.parentElement&&e(n.parentElement,t)}(e.target,r.UP)||x.current.getBoundingClientRect().top<0||(N=!0)},z=function(e){N&&(C=e instanceof TouchEvent?e.touches[0].pageY:e.pageY,_.current.classList.add("ptr--dragging"),C=c?(N=!0,k=!0,_.current.classList.remove("ptr--dragging"),_.current.classList.add("ptr--treshold-breached")):(k=!1,_.current.classList.remove("ptr--treshold-breached")),C-O>f||(L.current.style.opacity=((C-O)/65).toString(),x.current.style.overflow="visible",x.current.style.transform="translate(0px, "+(C-O)+"px)",L.current.style.visibility="visible")))},P=function(){if(N=!1,O=0,C=0,!k)return L.current.style.visibility="hidden",void T();x.current.style.overflow="visible",x.current.style.transform="translate(0px, "+c+"px)",k=!1,v()};return i.a.createElement("div",{className:"ptr "+w,style:{backgroundColor:h},ref:_},i.a.createElement("div",{className:"ptr__pull-down",ref:L},i.a.createElement("div",{className:"ptr__pull-down--loading"},t),i.a.createElement("div",{className:"ptr__pull-down--pull-more"},a)),i.a.createElement("div",{className:"ptr__children",ref:x},E))},v=function(){var e=["foo","bar","baz","foo","foo","bar","baz","foo","foo","bar","baz","foo","foo","bar","baz","foo"],n=Object(l.useState)(e),t=Object(c.a)(n,2),r=t[0],o=t[1];return i.a.createElement("div",{className:"App"},i.a.createElement(f,{onRefresh:function(){setTimeout((function(){o([].concat(Object(s.a)(r),e))}),1500)}},i.a.createElement(i.a.Fragment,null,i.a.createElement("header",{className:"App-header"},"Pull To Refresh"),i.a.createElement("div",{className:"App-container"},i.a.createElement("ul",null,r.map((function(e,n){return i.a.createElement("li",{key:n},n," - ",e)})))))))};Boolean("localhost"===window.location.hostname||"[::1]"===window.location.hostname||window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/));a.a.render(i.a.createElement(v,null),document.getElementById("root")),"serviceWorker"in navigator&&navigator.serviceWorker.ready.then((function(e){e.unregister()}))}],[[5,1,2]]]); 2 | //# sourceMappingURL=main.028fee3e.chunk.js.map -------------------------------------------------------------------------------- /docs/static/js/main.100e47c1.chunk.js: -------------------------------------------------------------------------------- 1 | (this["webpackJsonpreact-simple-pull-to-refresh-playground"]=this["webpackJsonpreact-simple-pull-to-refresh-playground"]||[]).push([[0],[,,,,,function(e,n,t){e.exports=t(12)},,,,,function(e,n,t){},function(e,n,t){},function(e,n,t){"use strict";t.r(n);var r,l=t(0),i=t.n(l),o=t(2),a=t.n(o),s=(t(10),t(3)),c=t(4);t(11);function u(e,n){if(!function(e){var n=getComputedStyle(e).overflowY;return e===document.scrollingElement&&"visible"===n||("scroll"===n||"auto"===n)}(e))return!1;if(n===r.DOWN)return e.scrollTop+e.clientHeight0;throw new Error("unsupported direction")}function d(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!==typeof document){var r=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===t&&r.firstChild?r.insertBefore(l,r.firstChild):r.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}!function(e){e[e.UP=-1]="UP",e[e.DOWN=1]="DOWN"}(r||(r={}));d(".lds-ellipsis {\n display: inline-block;\n position: relative;\n width: 64px;\n height: 64px; }\n\n.lds-ellipsis div {\n position: absolute;\n top: 27px;\n width: 11px;\n height: 11px;\n border-radius: 50%;\n background: #363636;\n animation-timing-function: cubic-bezier(0, 1, 1, 0); }\n\n.lds-ellipsis div:nth-child(1) {\n left: 6px;\n animation: lds-ellipsis1 0.6s infinite; }\n\n.lds-ellipsis div:nth-child(2) {\n left: 6px;\n animation: lds-ellipsis2 0.6s infinite; }\n\n.lds-ellipsis div:nth-child(3) {\n left: 26px;\n animation: lds-ellipsis2 0.6s infinite; }\n\n.lds-ellipsis div:nth-child(4) {\n left: 45px;\n animation: lds-ellipsis3 0.6s infinite; }\n\n@keyframes lds-ellipsis1 {\n 0% {\n transform: scale(0); }\n 100% {\n transform: scale(1); } }\n\n@keyframes lds-ellipsis3 {\n 0% {\n transform: scale(1); }\n 100% {\n transform: scale(0); } }\n\n@keyframes lds-ellipsis2 {\n 0% {\n transform: translate(0, 0); }\n 100% {\n transform: translate(19px, 0); } }\n");var p=function(){return i.a.createElement("div",{className:"lds-ellipsis"},i.a.createElement("div",null),i.a.createElement("div",null),i.a.createElement("div",null),i.a.createElement("div",null))},m=function(){return i.a.createElement("div",null,i.a.createElement("p",null,"\u21a7\xa0\xa0pull to refresh\xa0\xa0\u21a7"))};d(".ptr,\n.ptr__children {\n height: 100%;\n width: 100%;\n overflow: hidden;\n -webkit-overflow-scrolling: touch;\n position: relative;\n z-index: 1; }\n\n.ptr__children,\n.ptr__pull-down {\n transition: transform 0.2s cubic-bezier(0, 0, 0.31, 1); }\n\n.ptr__pull-down {\n position: absolute;\n overflow: hidden;\n left: 0;\n right: 0;\n top: 0;\n visibility: hidden;\n text-align: center; }\n .ptr__pull-down > div {\n margin: 0 auto; }\n .ptr__pull-down > .ptr__pull-down--loading {\n display: none;\n text-align: center;\n margin: 0 auto; }\n .ptr__pull-down > .ptr__pull-down--pull-more {\n display: none;\n text-align: center;\n margin: 0 auto; }\n\n.ptr--dragging.ptr--treshold-breached .ptr__pull-down--pull-more {\n display: none; }\n\n.ptr--dragging .ptr__pull-down--pull-more {\n display: block; }\n\n.ptr--treshold-breached .ptr__pull-down {\n opacity: 1 !important; }\n\n.ptr--treshold-breached .ptr__pull-down--loading {\n display: block; }\n");var f=function(e){var n=e.refreshingContent,t=void 0===n?i.a.createElement(p,null):n,o=e.pullingContent,a=void 0===o?i.a.createElement(m,null):o,s=e.pullDownThreshold,c=void 0===s?67:s,d=e.maxPullDownDistance,f=void 0===d?95:d,v=e.onRefresh,h=e.backgroundColor,g=e.isPullable,b=void 0===g||g,E=e.children,y=e.className,w=void 0===y?"":y,_=Object(l.useRef)(null),x=Object(l.useRef)(null),L=Object(l.useRef)(null),k=!1,N=!1,O=0,C=0;Object(l.useEffect)((function(){if(b&&x&&x.current)return x.current.addEventListener("touchstart",j,{passive:!0}),x.current.addEventListener("mousedown",j),x.current.addEventListener("touchmove",z,{passive:!1}),x.current.addEventListener("mousemove",z),x.current.addEventListener("touchend",P),x.current.addEventListener("mouseup",P),document.body.addEventListener("mouseleave",P),function(){b&&x&&x.current&&(x.current.removeEventListener("touchstart",j),x.current.removeEventListener("mousedown",j),x.current.removeEventListener("touchmove",z),x.current.removeEventListener("mousemove",z),x.current.removeEventListener("touchend",P),x.current.removeEventListener("mouseup",P),document.body.removeEventListener("mouseleave",P))}}),[b,v,c,f]),Object(l.useEffect)((function(){T()}),[E]);var T=function(){requestAnimationFrame((function(){x.current&&(x.current.style.overflowX="hidden",x.current.style.overflowY="auto",x.current.style.transform="translate(0px, 0px)"),L.current&&(L.current.style.opacity="0"),_.current&&(_.current.classList.remove("ptr--treshold-breached"),_.current.classList.remove("ptr--dragging"))}))},j=function(e){N=!1,e instanceof MouseEvent&&(O=e.pageY),e instanceof TouchEvent&&(O=e.touches[0].pageY),C=O,"touchstart"===e.type&&function e(n,t){return!!u(n,t)||null!=n.parentElement&&e(n.parentElement,t)}(e.target,r.UP)||x.current.getBoundingClientRect().top<0||(N=!0)},z=function(e){N&&(C=e instanceof TouchEvent?e.touches[0].pageY:e.pageY,_.current.classList.add("ptr--dragging"),C=c?(N=!0,k=!0,_.current.classList.remove("ptr--dragging"),_.current.classList.add("ptr--treshold-breached")):(k=!1,_.current.classList.remove("ptr--treshold-breached")),C-O>f||(L.current.style.opacity=((C-O)/65).toString(),x.current.style.overflow="visible",x.current.style.transform="translate(0px, "+(C-O)+"px)",L.current.style.visibility="visible")))},P=function(){if(N=!1,O=0,C=0,!k)return L.current.style.visibility="hidden",void T();x.current.style.overflow="visible",x.current.style.transform="translate(0px, "+c+"px)",k=!1,v()};return i.a.createElement("div",{className:"ptr "+w,style:{backgroundColor:h},ref:_},i.a.createElement("div",{className:"ptr__pull-down",ref:L},i.a.createElement("div",{className:"ptr__pull-down--loading"},t),i.a.createElement("div",{className:"ptr__pull-down--pull-more"},a)),i.a.createElement("div",{className:"ptr__children",ref:x},E))},v=function(){var e=["foo","bar","baz","foo","foo","bar","baz","foo","foo","bar","baz","foo","foo","bar","baz","foo"],n=Object(l.useState)(e),t=Object(c.a)(n,2),r=t[0],o=t[1];return i.a.createElement("div",{className:"App"},i.a.createElement(f,{onRefresh:function(){setTimeout((function(){o([].concat(Object(s.a)(r),e))}),1500)}},i.a.createElement(i.a.Fragment,null,i.a.createElement("header",{className:"App-header"},"Pull To Refresh"),i.a.createElement("div",{className:"App-container"},i.a.createElement("ul",null,r.map((function(e,n){return i.a.createElement("li",{key:n},n," - ",e)})))))))};Boolean("localhost"===window.location.hostname||"[::1]"===window.location.hostname||window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/));a.a.render(i.a.createElement(v,null),document.getElementById("root")),"serviceWorker"in navigator&&navigator.serviceWorker.ready.then((function(e){e.unregister()}))}],[[5,1,2]]]); 2 | //# sourceMappingURL=main.100e47c1.chunk.js.map -------------------------------------------------------------------------------- /docs/static/js/main.1fffc8d5.chunk.js: -------------------------------------------------------------------------------- 1 | (this["webpackJsonpreact-simple-pull-to-refresh-playground"]=this["webpackJsonpreact-simple-pull-to-refresh-playground"]||[]).push([[0],[,,,,,function(e,n,t){e.exports=t(12)},,,,,function(e,n,t){},function(e,n,t){},function(e,n,t){"use strict";t.r(n);var r,l=t(0),i=t.n(l),o=t(2),a=t.n(o),s=(t(10),t(3)),c=t(4);t(11);function u(e,n){if(!function(e){var n=getComputedStyle(e).overflowY;return e===document.scrollingElement&&"visible"===n||("scroll"===n||"auto"===n)}(e))return!1;if(n===r.DOWN)return e.scrollTop+e.clientHeight0;throw new Error("unsupported direction")}function d(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!==typeof document){var r=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===t&&r.firstChild?r.insertBefore(l,r.firstChild):r.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}!function(e){e[e.UP=-1]="UP",e[e.DOWN=1]="DOWN"}(r||(r={}));d(".lds-ellipsis {\n display: inline-block;\n position: relative;\n width: 64px;\n height: 64px; }\n\n.lds-ellipsis div {\n position: absolute;\n top: 27px;\n width: 11px;\n height: 11px;\n border-radius: 50%;\n background: #363636;\n animation-timing-function: cubic-bezier(0, 1, 1, 0); }\n\n.lds-ellipsis div:nth-child(1) {\n left: 6px;\n animation: lds-ellipsis1 0.6s infinite; }\n\n.lds-ellipsis div:nth-child(2) {\n left: 6px;\n animation: lds-ellipsis2 0.6s infinite; }\n\n.lds-ellipsis div:nth-child(3) {\n left: 26px;\n animation: lds-ellipsis2 0.6s infinite; }\n\n.lds-ellipsis div:nth-child(4) {\n left: 45px;\n animation: lds-ellipsis3 0.6s infinite; }\n\n@keyframes lds-ellipsis1 {\n 0% {\n transform: scale(0); }\n 100% {\n transform: scale(1); } }\n\n@keyframes lds-ellipsis3 {\n 0% {\n transform: scale(1); }\n 100% {\n transform: scale(0); } }\n\n@keyframes lds-ellipsis2 {\n 0% {\n transform: translate(0, 0); }\n 100% {\n transform: translate(19px, 0); } }\n");var p=function(){return i.a.createElement("div",{className:"lds-ellipsis"},i.a.createElement("div",null),i.a.createElement("div",null),i.a.createElement("div",null),i.a.createElement("div",null))},m=function(){return i.a.createElement("div",null,i.a.createElement("p",null,"\u21a7\xa0\xa0pull to refresh\xa0\xa0\u21a7"))};d(".ptr,\n.ptr__children {\n height: 100%;\n overflow: hidden;\n -webkit-overflow-scrolling: touch;\n position: relative;\n z-index: 1; }\n\n.ptr__children,\n.ptr__pull-down {\n transition: transform 0.2s cubic-bezier(0, 0, 0.31, 1); }\n\n.ptr__pull-down {\n position: absolute;\n overflow: hidden;\n left: 0;\n right: 0;\n top: 0;\n visibility: 'hidden';\n text-align: center; }\n .ptr__pull-down > div {\n margin: 0 auto; }\n .ptr__pull-down > .ptr__pull-down--loading {\n display: none;\n text-align: center;\n margin: 0 auto; }\n .ptr__pull-down > .ptr__pull-down--pull-more {\n display: none;\n text-align: center;\n margin: 0 auto; }\n\n.ptr--dragging.ptr--treshold-breached .ptr__pull-down--pull-more {\n display: none; }\n\n.ptr--dragging .ptr__pull-down--pull-more {\n display: block; }\n\n.ptr--treshold-breached .ptr__pull-down {\n opacity: 1 !important; }\n\n.ptr--treshold-breached .ptr__pull-down--loading {\n display: block; }\n");var v=function(e){var n=e.refreshingContent,t=void 0===n?i.a.createElement(p,null):n,o=e.pullingContent,a=void 0===o?i.a.createElement(m,null):o,s=e.pullDownThreshold,c=void 0===s?67:s,d=e.maxPullDownDistance,v=void 0===d?95:d,f=e.onRefresh,h=e.backgroundColor,g=e.isPullable,E=void 0===g||g,y=e.children,b=e.className,w=void 0===b?"":b,_=Object(l.useRef)(null),x=Object(l.useRef)(null),L=Object(l.useRef)(null),k=!1,N=!1,O=0,C=0;Object(l.useEffect)((function(){if(E&&x&&x.current)return x.current.addEventListener("touchstart",j,{passive:!0}),x.current.addEventListener("mousedown",j),x.current.addEventListener("touchmove",D,{passive:!1}),x.current.addEventListener("mousemove",D),x.current.addEventListener("touchend",P),x.current.addEventListener("mouseup",P),document.body.addEventListener("mouseleave",P),function(){E&&x&&x.current&&(x.current.removeEventListener("touchstart",j),x.current.removeEventListener("mousedown",j),x.current.removeEventListener("touchmove",D),x.current.removeEventListener("mousemove",D),x.current.removeEventListener("touchend",P),x.current.removeEventListener("mouseup",P),document.body.removeEventListener("mouseleave",P))}}),[E]),Object(l.useEffect)((function(){T()}),[y]);var T=function(){requestAnimationFrame((function(){x.current.style.overflowX="hidden",x.current.style.overflowY="auto",x.current.style.transform="translate(0px, 0px)",L.current.style.opacity="0",_.current.classList.remove("ptr--treshold-breached"),_.current.classList.remove("ptr--dragging")}))},j=function(e){N=!1,e instanceof MouseEvent&&(O=e.pageY),e instanceof TouchEvent&&(O=e.touches[0].pageY),C=O,"touchstart"===e.type&&function e(n,t){return!!u(n,t)||null!=n.parentElement&&e(n.parentElement,t)}(e.target,r.UP)||x.current.getBoundingClientRect().top<0||(N=!0)},D=function(e){e.preventDefault(),N&&(C=e instanceof TouchEvent?e.touches[0].pageY:e.pageY,_.current.classList.add("ptr--dragging"),C=c&&(N=!0,k=!0,_.current.classList.remove("ptr--dragging"),_.current.classList.add("ptr--treshold-breached")),C-O>v||(L.current.style.opacity=((C-O)/65).toString(),x.current.style.overflow="visible",x.current.style.transform="translate(0px, "+(C-O)+"px)",L.current.style.visibility="visible")))},P=function(){if(N=!1,O=0,C=0,!k)return L.current.style.visibility="hidden",void T();x.current.style.overflow="visible",x.current.style.transform="translate(0px, "+c+"px)",k=!1,f()};return i.a.createElement("div",{className:"ptr "+w,style:{backgroundColor:h},ref:_},i.a.createElement("div",{className:"ptr__pull-down",ref:L},i.a.createElement("div",{className:"ptr__pull-down--loading"},t),i.a.createElement("div",{className:"ptr__pull-down--pull-more"},a)),i.a.createElement("div",{className:"ptr__children",ref:x},y))},f=function(){var e=["foo","bar","baz","foo"],n=Object(l.useState)(e),t=Object(c.a)(n,2),r=t[0],o=t[1];return i.a.createElement("div",{className:"App"},i.a.createElement(v,{onRefresh:function(){setTimeout((function(){o([].concat(Object(s.a)(r),e))}),15e3)}},i.a.createElement(i.a.Fragment,null,i.a.createElement("header",{className:"App-header"},"Pull To Refresh"),i.a.createElement("div",{className:"App-container"},i.a.createElement("ul",null,r.map((function(e,n){return i.a.createElement("li",{key:n},e)})))))))};Boolean("localhost"===window.location.hostname||"[::1]"===window.location.hostname||window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/));a.a.render(i.a.createElement(f,null),document.getElementById("root")),"serviceWorker"in navigator&&navigator.serviceWorker.ready.then((function(e){e.unregister()}))}],[[5,1,2]]]); 2 | //# sourceMappingURL=main.1fffc8d5.chunk.js.map -------------------------------------------------------------------------------- /docs/static/js/main.222dcf33.chunk.js: -------------------------------------------------------------------------------- 1 | (this["webpackJsonpreact-simple-pull-to-refresh-playground"]=this["webpackJsonpreact-simple-pull-to-refresh-playground"]||[]).push([[0],[,,,,,function(e,n,t){e.exports=t(12)},,,,,function(e,n,t){},function(e,n,t){},function(e,n,t){"use strict";t.r(n);var r,l=t(0),o=t.n(l),i=t(2),s=t.n(i),a=(t(10),t(3)),c=t(4);t(11);function d(e,n){if(!function(e){var n=getComputedStyle(e).overflowY;return e===document.scrollingElement&&"visible"===n||("scroll"===n||"auto"===n)}(e))return!1;if(n===r.DOWN)return e.scrollTop+e.clientHeight0;throw new Error("unsupported direction")}function u(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!==typeof document){var r=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===t&&r.firstChild?r.insertBefore(l,r.firstChild):r.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}!function(e){e[e.UP=-1]="UP",e[e.DOWN=1]="DOWN"}(r||(r={}));u(".lds-ellipsis {\n display: inline-block;\n position: relative;\n width: 64px;\n height: 64px; }\n\n.lds-ellipsis div {\n position: absolute;\n top: 27px;\n width: 11px;\n height: 11px;\n border-radius: 50%;\n background: #363636;\n animation-timing-function: cubic-bezier(0, 1, 1, 0); }\n\n.lds-ellipsis div:nth-child(1) {\n left: 6px;\n animation: lds-ellipsis1 0.6s infinite; }\n\n.lds-ellipsis div:nth-child(2) {\n left: 6px;\n animation: lds-ellipsis2 0.6s infinite; }\n\n.lds-ellipsis div:nth-child(3) {\n left: 26px;\n animation: lds-ellipsis2 0.6s infinite; }\n\n.lds-ellipsis div:nth-child(4) {\n left: 45px;\n animation: lds-ellipsis3 0.6s infinite; }\n\n@keyframes lds-ellipsis1 {\n 0% {\n transform: scale(0); }\n 100% {\n transform: scale(1); } }\n\n@keyframes lds-ellipsis3 {\n 0% {\n transform: scale(1); }\n 100% {\n transform: scale(0); } }\n\n@keyframes lds-ellipsis2 {\n 0% {\n transform: translate(0, 0); }\n 100% {\n transform: translate(19px, 0); } }\n");var p=function(){return o.a.createElement("div",{className:"lds-ellipsis"},o.a.createElement("div",null),o.a.createElement("div",null),o.a.createElement("div",null),o.a.createElement("div",null))},m=function(){return o.a.createElement("div",null,o.a.createElement("p",null,"\u21a7\xa0\xa0pull to refresh\xa0\xa0\u21a7"))};u(".ptr,\n.ptr__children {\n height: 100%;\n width: 100%;\n overflow: hidden;\n -webkit-overflow-scrolling: touch;\n position: relative;\n z-index: 1; }\n\n.ptr.ptr--fetch-more-treshold-breached .ptr__fetch-more {\n display: block; }\n\n.ptr__fetch-more {\n display: none; }\n\n/**\n * Pull down transition \n */\n.ptr__children,\n.ptr__pull-down {\n transition: transform 0.2s cubic-bezier(0, 0, 0.31, 1); }\n\n.ptr__pull-down {\n position: absolute;\n overflow: hidden;\n left: 0;\n right: 0;\n top: 0;\n visibility: hidden; }\n .ptr__pull-down > div {\n display: none; }\n\n.ptr--dragging {\n /**\n * Hide PullMore content is treshold breached\n */\n /**\n * Otherwize, display content\n */ }\n .ptr--dragging.ptr--pull-down-treshold-breached .ptr__pull-down--pull-more {\n display: none; }\n .ptr--dragging .ptr__pull-down--pull-more {\n display: block; }\n\n.ptr--pull-down-treshold-breached {\n /**\n * Force opacity to 1 is pull down trashold breached\n */\n /**\n * And display loader\n */ }\n .ptr--pull-down-treshold-breached .ptr__pull-down {\n opacity: 1 !important; }\n .ptr--pull-down-treshold-breached .ptr__pull-down--loading {\n display: block; }\n\n.ptr__loader {\n margin: 0 auto;\n text-align: center; }\n");var h=function(e){var n=e.isPullable,t=void 0===n||n,i=e.canFetchMore,s=void 0!==i&&i,a=e.onRefresh,c=e.onFetchMore,u=e.refreshingContent,h=void 0===u?o.a.createElement(p,null):u,f=e.pullingContent,v=void 0===f?o.a.createElement(m,null):f,b=e.children,g=e.pullDownThreshold,E=void 0===g?67:g,w=e.fetchMoreThreshold,y=void 0===w?100:w,_=e.maxPullDownDistance,L=void 0===_?95:_,x=e.backgroundColor,N=e.className,k=void 0===N?"":N,O=Object(l.useRef)(null),T=Object(l.useRef)(null),j=Object(l.useRef)(null),C=Object(l.useRef)(null),P=!1,z=!1,R=!1,F=0,M=0;Object(l.useEffect)((function(){if(t&&T&&T.current)return T.current.addEventListener("touchstart",Y,{passive:!0}),T.current.addEventListener("mousedown",Y),T.current.addEventListener("touchmove",B,{passive:!1}),T.current.addEventListener("mousemove",B),T.current.addEventListener("scroll",H),T.current.addEventListener("touchend",S),T.current.addEventListener("mouseup",S),document.body.addEventListener("mouseleave",S),function(){t&&T&&T.current&&(T.current.removeEventListener("touchstart",Y),T.current.removeEventListener("mousedown",Y),T.current.removeEventListener("touchmove",B),T.current.removeEventListener("mousemove",B),T.current.removeEventListener("scroll",H),T.current.removeEventListener("touchend",S),T.current.removeEventListener("mouseup",S),document.body.removeEventListener("mouseleave",S))}}),[b,t,a,E,L,s,y]),Object(l.useEffect)((function(){D()}),[b]),Object(l.useEffect)((function(){s&&A()=E?(R=!0,P=!0,O.current.classList.remove("ptr--dragging"),O.current.classList.add("ptr--pull-down-treshold-breached")):(P=!1,O.current.classList.remove("ptr--pull-down-treshold-breached")),M-F>L||(j.current.style.opacity=((M-F)/65).toString(),T.current.style.overflow="visible",T.current.style.transform="translate(0px, "+(M-F)+"px)",j.current.style.visibility="visible")))},H=function(e){z||(A()0;throw new Error("unsupported direction")}function d(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!==typeof document){var r=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===n&&r.firstChild?r.insertBefore(l,r.firstChild):r.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}!function(e){e[e.UP=-1]="UP",e[e.DOWN=1]="DOWN"}(r||(r={}));d(".lds-ellipsis {\n display: inline-block;\n position: relative;\n width: 64px;\n height: 64px; }\n\n.lds-ellipsis div {\n position: absolute;\n top: 27px;\n width: 11px;\n height: 11px;\n border-radius: 50%;\n background: #363636;\n animation-timing-function: cubic-bezier(0, 1, 1, 0); }\n\n.lds-ellipsis div:nth-child(1) {\n left: 6px;\n animation: lds-ellipsis1 0.6s infinite; }\n\n.lds-ellipsis div:nth-child(2) {\n left: 6px;\n animation: lds-ellipsis2 0.6s infinite; }\n\n.lds-ellipsis div:nth-child(3) {\n left: 26px;\n animation: lds-ellipsis2 0.6s infinite; }\n\n.lds-ellipsis div:nth-child(4) {\n left: 45px;\n animation: lds-ellipsis3 0.6s infinite; }\n\n@keyframes lds-ellipsis1 {\n 0% {\n transform: scale(0); }\n 100% {\n transform: scale(1); } }\n\n@keyframes lds-ellipsis3 {\n 0% {\n transform: scale(1); }\n 100% {\n transform: scale(0); } }\n\n@keyframes lds-ellipsis2 {\n 0% {\n transform: translate(0, 0); }\n 100% {\n transform: translate(19px, 0); } }\n");var m=function(){return a.a.createElement("div",{className:"lds-ellipsis"},a.a.createElement("div",null),a.a.createElement("div",null),a.a.createElement("div",null),a.a.createElement("div",null))},p=function(){return a.a.createElement("div",null,a.a.createElement("p",null,"\u21a7\xa0\xa0pull to refresh\xa0\xa0\u21a7"))};d(".ptr,\n.ptr__children {\n height: 100%;\n width: 100%;\n overflow: hidden;\n -webkit-overflow-scrolling: touch;\n position: relative;\n z-index: 1; }\n\n.ptr.ptr--fetch-more-treshold-breached .ptr__fetch-more {\n display: block; }\n\n.ptr__fetch-more {\n display: none; }\n\n/**\n * Pull down transition \n */\n.ptr__children,\n.ptr__pull-down {\n transition: transform 0.2s cubic-bezier(0, 0, 0.31, 1); }\n\n.ptr__pull-down {\n position: absolute;\n overflow: hidden;\n left: 0;\n right: 0;\n top: 0;\n visibility: hidden; }\n .ptr__pull-down > div {\n display: none; }\n\n.ptr--dragging {\n /**\n * Hide PullMore content is treshold breached\n */\n /**\n * Otherwize, display content\n */ }\n .ptr--dragging.ptr--pull-down-treshold-breached .ptr__pull-down--pull-more {\n display: none; }\n .ptr--dragging .ptr__pull-down--pull-more {\n display: block; }\n\n.ptr--pull-down-treshold-breached {\n /**\n * Force opacity to 1 is pull down trashold breached\n */\n /**\n * And display loader\n */ }\n .ptr--pull-down-treshold-breached .ptr__pull-down {\n opacity: 1 !important; }\n .ptr--pull-down-treshold-breached .ptr__pull-down--loading {\n display: block; }\n\n.ptr__loader {\n margin: 0 auto;\n text-align: center; }\n");var h=function(e){var t=e.isPullable,n=void 0===t||t,o=e.canFetchMore,c=void 0!==o&&o,s=e.onRefresh,i=e.onFetchMore,d=e.refreshingContent,h=void 0===d?a.a.createElement(m,null):d,f=e.pullingContent,v=void 0===f?a.a.createElement(p,null):f,b=e.children,E=e.pullDownThreshold,g=void 0===E?67:E,w=e.fetchMoreThreshold,y=void 0===w?100:w,_=e.maxPullDownDistance,x=void 0===_?95:_,D=e.backgroundColor,T=e.className,L=void 0===T?"":T,N=Object(l.useRef)(null),P=Object(l.useRef)(null),M=Object(l.useRef)(null),O=Object(l.useRef)(null),k=!1,j=!1,F=!1,C=0,R=0;Object(l.useEffect)((function(){if(n&&P&&P.current)return P.current.addEventListener("touchstart",z,{passive:!0}),P.current.addEventListener("mousedown",z),P.current.addEventListener("touchmove",Y,{passive:!1}),P.current.addEventListener("mousemove",Y),P.current.addEventListener("scroll",B),P.current.addEventListener("touchend",H),P.current.addEventListener("mouseup",H),document.body.addEventListener("mouseleave",H),function(){n&&P&&P.current&&(P.current.removeEventListener("touchstart",z),P.current.removeEventListener("mousedown",z),P.current.removeEventListener("touchmove",Y),P.current.removeEventListener("mousemove",Y),P.current.removeEventListener("scroll",B),P.current.removeEventListener("touchend",H),P.current.removeEventListener("mouseup",H),document.body.removeEventListener("mouseleave",H))}}),[b,n,s,g,x,c,y]),Object(l.useEffect)((function(){A()}),[b]),Object(l.useEffect)((function(){c&&S()=g?(F=!0,k=!0,N.current.classList.remove("ptr--dragging"),N.current.classList.add("ptr--pull-down-treshold-breached")):(k=!1,N.current.classList.remove("ptr--pull-down-treshold-breached")),R-C>x||(M.current.style.opacity=((R-C)/65).toString(),P.current.style.overflow="visible",P.current.style.transform="translate(0px, "+(R-C)+"px)",M.current.style.visibility="visible")))},B=function(e){j||(c&&S()0;throw new Error("unsupported direction")}function d(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!==typeof document){var r=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===n&&r.firstChild?r.insertBefore(l,r.firstChild):r.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}!function(e){e[e.UP=-1]="UP",e[e.DOWN=1]="DOWN"}(r||(r={}));d(".lds-ellipsis {\n display: inline-block;\n position: relative;\n width: 64px;\n height: 64px; }\n\n.lds-ellipsis div {\n position: absolute;\n top: 27px;\n width: 11px;\n height: 11px;\n border-radius: 50%;\n background: #363636;\n animation-timing-function: cubic-bezier(0, 1, 1, 0); }\n\n.lds-ellipsis div:nth-child(1) {\n left: 6px;\n animation: lds-ellipsis1 0.6s infinite; }\n\n.lds-ellipsis div:nth-child(2) {\n left: 6px;\n animation: lds-ellipsis2 0.6s infinite; }\n\n.lds-ellipsis div:nth-child(3) {\n left: 26px;\n animation: lds-ellipsis2 0.6s infinite; }\n\n.lds-ellipsis div:nth-child(4) {\n left: 45px;\n animation: lds-ellipsis3 0.6s infinite; }\n\n@keyframes lds-ellipsis1 {\n 0% {\n transform: scale(0); }\n 100% {\n transform: scale(1); } }\n\n@keyframes lds-ellipsis3 {\n 0% {\n transform: scale(1); }\n 100% {\n transform: scale(0); } }\n\n@keyframes lds-ellipsis2 {\n 0% {\n transform: translate(0, 0); }\n 100% {\n transform: translate(19px, 0); } }\n");var m=function(){return a.a.createElement("div",{className:"lds-ellipsis"},a.a.createElement("div",null),a.a.createElement("div",null),a.a.createElement("div",null),a.a.createElement("div",null))},p=function(){return a.a.createElement("div",null,a.a.createElement("p",null,"\u21a7\xa0\xa0pull to refresh\xa0\xa0\u21a7"))};d(".ptr,\n.ptr__children {\n height: 100%;\n width: 100%;\n overflow: hidden;\n -webkit-overflow-scrolling: touch;\n position: relative;\n z-index: 1; }\n\n.ptr.ptr--fetch-more-treshold-breached .ptr__fetch-more {\n display: block; }\n\n.ptr__fetch-more {\n display: none; }\n\n/**\n * Pull down transition \n */\n.ptr__children,\n.ptr__pull-down {\n transition: transform 0.2s cubic-bezier(0, 0, 0.31, 1); }\n\n.ptr__pull-down {\n position: absolute;\n overflow: hidden;\n left: 0;\n right: 0;\n top: 0;\n visibility: hidden; }\n .ptr__pull-down > div {\n display: none; }\n\n.ptr--dragging {\n /**\n * Hide PullMore content is treshold breached\n */\n /**\n * Otherwize, display content\n */ }\n .ptr--dragging.ptr--pull-down-treshold-breached .ptr__pull-down--pull-more {\n display: none; }\n .ptr--dragging .ptr__pull-down--pull-more {\n display: block; }\n\n.ptr--pull-down-treshold-breached {\n /**\n * Force opacity to 1 is pull down trashold breached\n */\n /**\n * And display loader\n */ }\n .ptr--pull-down-treshold-breached .ptr__pull-down {\n opacity: 1 !important; }\n .ptr--pull-down-treshold-breached .ptr__pull-down--loading {\n display: block; }\n\n.ptr__loader {\n margin: 0 auto;\n text-align: center; }\n");var h=function(e){var t=e.isPullable,n=void 0===t||t,o=e.canFetchMore,c=void 0!==o&&o,i=e.onRefresh,s=e.onFetchMore,d=e.refreshingContent,h=void 0===d?a.a.createElement(m,null):d,f=e.pullingContent,v=void 0===f?a.a.createElement(p,null):f,b=e.children,E=e.pullDownThreshold,g=void 0===E?67:E,w=e.fetchMoreThreshold,y=void 0===w?100:w,_=e.maxPullDownDistance,x=void 0===_?95:_,D=e.backgroundColor,T=e.className,L=void 0===T?"":T,N=Object(l.useRef)(null),P=Object(l.useRef)(null),M=Object(l.useRef)(null),O=Object(l.useRef)(null),k=!1,j=!1,F=!1,C=0,R=0;Object(l.useEffect)((function(){if(n&&P&&P.current)return P.current.addEventListener("touchstart",z,{passive:!0}),P.current.addEventListener("mousedown",z),P.current.addEventListener("touchmove",Y,{passive:!1}),P.current.addEventListener("mousemove",Y),window.addEventListener("scroll",B),P.current.addEventListener("touchend",H),P.current.addEventListener("mouseup",H),document.body.addEventListener("mouseleave",H),function(){n&&P&&P.current&&(P.current.removeEventListener("touchstart",z),P.current.removeEventListener("mousedown",z),P.current.removeEventListener("touchmove",Y),P.current.removeEventListener("mousemove",Y),window.removeEventListener("scroll",B),P.current.removeEventListener("touchend",H),P.current.removeEventListener("mouseup",H),document.body.removeEventListener("mouseleave",H))}}),[b,n,i,g,x,c,y]),Object(l.useEffect)((function(){A()}),[b]),Object(l.useEffect)((function(){c&&S()=g?(F=!0,k=!0,N.current.classList.remove("ptr--dragging"),N.current.classList.add("ptr--pull-down-treshold-breached")):(k=!1,N.current.classList.remove("ptr--pull-down-treshold-breached")),R-C>x||(M.current.style.opacity=((R-C)/65).toString(),P.current.style.overflow="visible",P.current.style.transform="translate(0px, "+(R-C)+"px)",M.current.style.visibility="visible")))},B=function(e){j||(c&&S()0;throw new Error("unsupported direction")}function d(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!==typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}!function(e){e[e.UP=-1]="UP",e[e.DOWN=1]="DOWN"}(r||(r={}));d(".lds-ellipsis {\n display: inline-block;\n position: relative;\n width: 64px;\n height: 64px; }\n\n.lds-ellipsis div {\n position: absolute;\n top: 27px;\n width: 11px;\n height: 11px;\n border-radius: 50%;\n background: #363636;\n animation-timing-function: cubic-bezier(0, 1, 1, 0); }\n\n.lds-ellipsis div:nth-child(1) {\n left: 6px;\n animation: lds-ellipsis1 0.6s infinite; }\n\n.lds-ellipsis div:nth-child(2) {\n left: 6px;\n animation: lds-ellipsis2 0.6s infinite; }\n\n.lds-ellipsis div:nth-child(3) {\n left: 26px;\n animation: lds-ellipsis2 0.6s infinite; }\n\n.lds-ellipsis div:nth-child(4) {\n left: 45px;\n animation: lds-ellipsis3 0.6s infinite; }\n\n@keyframes lds-ellipsis1 {\n 0% {\n transform: scale(0); }\n 100% {\n transform: scale(1); } }\n\n@keyframes lds-ellipsis3 {\n 0% {\n transform: scale(1); }\n 100% {\n transform: scale(0); } }\n\n@keyframes lds-ellipsis2 {\n 0% {\n transform: translate(0, 0); }\n 100% {\n transform: translate(19px, 0); } }\n");var p=function(){return l.a.createElement("div",{className:"lds-ellipsis"},l.a.createElement("div",null),l.a.createElement("div",null),l.a.createElement("div",null),l.a.createElement("div",null))},f=function(){return l.a.createElement("div",null,l.a.createElement("p",null,"\u21a7\xa0\xa0pull to refresh\xa0\xa0\u21a7"))};d(".ptr,\n.ptr__children {\n height: 100%;\n overflow: hidden;\n -webkit-overflow-scrolling: touch;\n position: relative;\n z-index: 1; }\n\n.ptr__children,\n.ptr__pull-down {\n transition: transform 0.2s cubic-bezier(0, 0, 0.31, 1); }\n\n.ptr__pull-down {\n position: absolute;\n overflow: hidden;\n left: 0;\n right: 0;\n top: 0;\n visibility: hidden;\n text-align: center; }\n .ptr__pull-down > div {\n margin: 0 auto; }\n .ptr__pull-down > .ptr__pull-down--loading {\n display: none;\n text-align: center;\n margin: 0 auto; }\n .ptr__pull-down > .ptr__pull-down--pull-more {\n display: none;\n text-align: center;\n margin: 0 auto; }\n\n.ptr--dragging.ptr--treshold-breached .ptr__pull-down--pull-more {\n display: none; }\n\n.ptr--dragging .ptr__pull-down--pull-more {\n display: block; }\n\n.ptr--treshold-breached .ptr__pull-down {\n opacity: 1 !important; }\n\n.ptr--treshold-breached .ptr__pull-down--loading {\n display: block; }\n");var m=function(e){var n=e.refreshingContent,t=void 0===n?l.a.createElement(p,null):n,i=e.pullingContent,a=void 0===i?l.a.createElement(f,null):i,s=e.pullDownThreshold,c=void 0===s?67:s,d=e.maxPullDownDistance,m=void 0===d?95:d,v=e.onRefresh,h=e.backgroundColor,b=e.isPullable,g=void 0===b||b,E=e.children,y=e.className,w=void 0===y?"":y,_=Object(o.useRef)(null),x=Object(o.useRef)(null),L=Object(o.useRef)(null),z=!1,k=!1,N=0,O=0;Object(o.useEffect)((function(){if(g&&x&&x.current)return x.current.addEventListener("touchstart",T,{passive:!0}),x.current.addEventListener("mousedown",T),x.current.addEventListener("touchmove",j,{passive:!1}),x.current.addEventListener("mousemove",j),x.current.addEventListener("touchend",P),x.current.addEventListener("mouseup",P),document.body.addEventListener("mouseleave",P),function(){g&&x&&x.current&&(x.current.removeEventListener("touchstart",T),x.current.removeEventListener("mousedown",T),x.current.removeEventListener("touchmove",j),x.current.removeEventListener("mousemove",j),x.current.removeEventListener("touchend",P),x.current.removeEventListener("mouseup",P),document.body.removeEventListener("mouseleave",P))}}),[g]),Object(o.useEffect)((function(){C()}),[E]);var C=function(){requestAnimationFrame((function(){x.current&&(x.current.style.overflowX="hidden",x.current.style.overflowY="auto",x.current.style.transform="translate(0px, 0px)"),L.current&&(L.current.style.opacity="0"),_.current&&(_.current.classList.remove("ptr--treshold-breached"),_.current.classList.remove("ptr--dragging"))}))},T=function(e){k=!1,e instanceof MouseEvent&&(N=e.pageY),e instanceof TouchEvent&&(N=e.touches[0].pageY),O=N,"touchstart"===e.type&&function e(n,t){return!!u(n,t)||null!=n.parentElement&&e(n.parentElement,t)}(e.target,r.UP)||x.current.getBoundingClientRect().top<0||(k=!0)},j=function(e){k&&(O=e instanceof TouchEvent?e.touches[0].pageY:e.pageY,_.current.classList.add("ptr--dragging"),O=c?(k=!0,z=!0,_.current.classList.remove("ptr--dragging"),_.current.classList.add("ptr--treshold-breached")):(z=!1,_.current.classList.remove("ptr--treshold-breached")),O-N>m||(L.current.style.opacity=((O-N)/65).toString(),x.current.style.overflow="visible",x.current.style.transform="translate(0px, "+(O-N)+"px)",L.current.style.visibility="visible")))},P=function(){if(k=!1,N=0,O=0,!z)return L.current.style.visibility="hidden",void C();x.current.style.overflow="visible",x.current.style.transform="translate(0px, "+c+"px)",z=!1,v()};return l.a.createElement("div",{className:"ptr "+w,style:{backgroundColor:h},ref:_},l.a.createElement("div",{className:"ptr__pull-down",ref:L},l.a.createElement("div",{className:"ptr__pull-down--loading"},t),l.a.createElement("div",{className:"ptr__pull-down--pull-more"},a)),l.a.createElement("div",{className:"ptr__children",ref:x},E))},v=function(){var e=["foo","bar","baz","foo","foo","bar","baz","foo","foo","bar","baz","foo","foo","bar","baz","foo","foo","bar","baz","foo","foo","bar","baz","foo","foo","bar","baz","foo","foo","bar","baz","foo","foo","bar","baz","foo","foo","bar","baz","foo","foo","bar","baz","foo","foo","bar","baz","foo","foo","bar","baz","foo"],n=Object(o.useState)(e),t=Object(c.a)(n,2),r=t[0],i=t[1];return l.a.createElement("div",{className:"App"},l.a.createElement(m,{onRefresh:function(){setTimeout((function(){i([].concat(Object(s.a)(r),e))}),1500)}},l.a.createElement(l.a.Fragment,null,l.a.createElement("header",{className:"App-header"},"Pull To Refresh"),l.a.createElement("div",{className:"App-container"},l.a.createElement("ul",null,r.map((function(e,n){return l.a.createElement("li",{key:n},e)})))))))};Boolean("localhost"===window.location.hostname||"[::1]"===window.location.hostname||window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/));a.a.render(l.a.createElement(v,null),document.getElementById("root")),"serviceWorker"in navigator&&navigator.serviceWorker.ready.then((function(e){e.unregister()}))}],[[5,1,2]]]); 2 | //# sourceMappingURL=main.37c8f8f4.chunk.js.map -------------------------------------------------------------------------------- /docs/static/js/main.3f02033c.chunk.js: -------------------------------------------------------------------------------- 1 | (this["webpackJsonpreact-simple-pull-to-refresh-playground"]=this["webpackJsonpreact-simple-pull-to-refresh-playground"]||[]).push([[0],[,,,,,function(e,n,t){e.exports=t(12)},,,,,function(e,n,t){},function(e,n,t){},function(e,n,t){"use strict";t.r(n);var r,l=t(0),i=t.n(l),o=t(2),s=t.n(o),a=(t(10),t(3)),c=t(4);t(11);function u(e,n){if(!function(e){var n=getComputedStyle(e).overflowY;return e===document.scrollingElement&&"visible"===n||("scroll"===n||"auto"===n)}(e))return!1;if(n===r.DOWN)return e.scrollTop+e.clientHeight0;throw new Error("unsupported direction")}function d(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!==typeof document){var r=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===t&&r.firstChild?r.insertBefore(l,r.firstChild):r.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}!function(e){e[e.UP=-1]="UP",e[e.DOWN=1]="DOWN"}(r||(r={}));d(".lds-ellipsis {\n display: inline-block;\n position: relative;\n width: 64px;\n height: 64px; }\n\n.lds-ellipsis div {\n position: absolute;\n top: 27px;\n width: 11px;\n height: 11px;\n border-radius: 50%;\n background: #363636;\n animation-timing-function: cubic-bezier(0, 1, 1, 0); }\n\n.lds-ellipsis div:nth-child(1) {\n left: 6px;\n animation: lds-ellipsis1 0.6s infinite; }\n\n.lds-ellipsis div:nth-child(2) {\n left: 6px;\n animation: lds-ellipsis2 0.6s infinite; }\n\n.lds-ellipsis div:nth-child(3) {\n left: 26px;\n animation: lds-ellipsis2 0.6s infinite; }\n\n.lds-ellipsis div:nth-child(4) {\n left: 45px;\n animation: lds-ellipsis3 0.6s infinite; }\n\n@keyframes lds-ellipsis1 {\n 0% {\n transform: scale(0); }\n 100% {\n transform: scale(1); } }\n\n@keyframes lds-ellipsis3 {\n 0% {\n transform: scale(1); }\n 100% {\n transform: scale(0); } }\n\n@keyframes lds-ellipsis2 {\n 0% {\n transform: translate(0, 0); }\n 100% {\n transform: translate(19px, 0); } }\n");var p=function(){return i.a.createElement("div",{className:"lds-ellipsis"},i.a.createElement("div",null),i.a.createElement("div",null),i.a.createElement("div",null),i.a.createElement("div",null))},m=function(){return i.a.createElement("div",null,i.a.createElement("p",null,"\u21a7\xa0\xa0pull to refresh\xa0\xa0\u21a7"))};d(".ptr,\n.ptr__children {\n height: 100%;\n overflow: hidden;\n -webkit-overflow-scrolling: touch;\n position: relative;\n z-index: 1; }\n\n.ptr__children,\n.ptr__pull-down {\n transition: transform 0.2s cubic-bezier(0, 0, 0.31, 1); }\n\n.ptr__pull-down {\n position: absolute;\n overflow: hidden;\n left: 0;\n right: 0;\n top: 0;\n visibility: hidden;\n text-align: center; }\n .ptr__pull-down > div {\n margin: 0 auto; }\n .ptr__pull-down > .ptr__pull-down--loading {\n display: none;\n text-align: center;\n margin: 0 auto; }\n .ptr__pull-down > .ptr__pull-down--pull-more {\n display: none;\n text-align: center;\n margin: 0 auto; }\n\n.ptr--dragging.ptr--treshold-breached .ptr__pull-down--pull-more {\n display: none; }\n\n.ptr--dragging .ptr__pull-down--pull-more {\n display: block; }\n\n.ptr--treshold-breached .ptr__pull-down {\n opacity: 1 !important; }\n\n.ptr--treshold-breached .ptr__pull-down--loading {\n display: block; }\n");var v=function(e){var n=e.refreshingContent,t=void 0===n?i.a.createElement(p,null):n,o=e.pullingContent,s=void 0===o?i.a.createElement(m,null):o,a=e.pullDownThreshold,c=void 0===a?67:a,d=e.maxPullDownDistance,v=void 0===d?95:d,f=e.onRefresh,h=e.backgroundColor,g=e.isPullable,E=void 0===g||g,b=e.children,y=e.className,w=void 0===y?"":y,_=Object(l.useRef)(null),x=Object(l.useRef)(null),L=Object(l.useRef)(null),k=!1,N=!1,O=0,C=0;Object(l.useEffect)((function(){if(E&&x&&x.current)return x.current.addEventListener("touchstart",j,{passive:!0}),x.current.addEventListener("mousedown",j),x.current.addEventListener("touchmove",D,{passive:!1}),x.current.addEventListener("mousemove",D),x.current.addEventListener("touchend",P),x.current.addEventListener("mouseup",P),document.body.addEventListener("mouseleave",P),function(){E&&x&&x.current&&(x.current.removeEventListener("touchstart",j),x.current.removeEventListener("mousedown",j),x.current.removeEventListener("touchmove",D),x.current.removeEventListener("mousemove",D),x.current.removeEventListener("touchend",P),x.current.removeEventListener("mouseup",P),document.body.removeEventListener("mouseleave",P))}}),[E]),Object(l.useEffect)((function(){T()}),[b]);var T=function(){requestAnimationFrame((function(){x.current&&(x.current.style.overflowX="hidden",x.current.style.overflowY="auto",x.current.style.transform="translate(0px, 0px)"),L.current&&(L.current.style.opacity="0"),_.current&&(_.current.classList.remove("ptr--treshold-breached"),_.current.classList.remove("ptr--dragging"))}))},j=function(e){N=!1,e instanceof MouseEvent&&(O=e.pageY),e instanceof TouchEvent&&(O=e.touches[0].pageY),C=O,"touchstart"===e.type&&function e(n,t){return!!u(n,t)||null!=n.parentElement&&e(n.parentElement,t)}(e.target,r.UP)||x.current.getBoundingClientRect().top<0||(N=!0)},D=function(e){e.preventDefault(),N&&(C=e instanceof TouchEvent?e.touches[0].pageY:e.pageY,_.current.classList.add("ptr--dragging"),C=c?(N=!0,k=!0,_.current.classList.remove("ptr--dragging"),_.current.classList.add("ptr--treshold-breached")):(k=!1,_.current.classList.remove("ptr--treshold-breached")),C-O>v||(L.current.style.opacity=((C-O)/65).toString(),x.current.style.overflow="visible",x.current.style.transform="translate(0px, "+(C-O)+"px)",L.current.style.visibility="visible")))},P=function(){if(N=!1,O=0,C=0,!k)return L.current.style.visibility="hidden",void T();x.current.style.overflow="visible",x.current.style.transform="translate(0px, "+c+"px)",k=!1,f()};return i.a.createElement("div",{className:"ptr "+w,style:{backgroundColor:h},ref:_},i.a.createElement("div",{className:"ptr__pull-down",ref:L},i.a.createElement("div",{className:"ptr__pull-down--loading"},t),i.a.createElement("div",{className:"ptr__pull-down--pull-more"},s)),i.a.createElement("div",{className:"ptr__children",ref:x},b))},f=function(){var e=["foo","bar","baz","foo"],n=Object(l.useState)(e),t=Object(c.a)(n,2),r=t[0],o=t[1];return i.a.createElement("div",{className:"App"},i.a.createElement(v,{onRefresh:function(){setTimeout((function(){o([].concat(Object(a.a)(r),e))}),1500)}},i.a.createElement(i.a.Fragment,null,i.a.createElement("header",{className:"App-header"},"Pull To Refresh"),i.a.createElement("div",{className:"App-container"},i.a.createElement("ul",null,r.map((function(e,n){return i.a.createElement("li",{key:n},e)})))))))};Boolean("localhost"===window.location.hostname||"[::1]"===window.location.hostname||window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/));s.a.render(i.a.createElement(f,null),document.getElementById("root")),"serviceWorker"in navigator&&navigator.serviceWorker.ready.then((function(e){e.unregister()}))}],[[5,1,2]]]); 2 | //# sourceMappingURL=main.3f02033c.chunk.js.map -------------------------------------------------------------------------------- /docs/static/js/main.539afb7b.chunk.js: -------------------------------------------------------------------------------- 1 | (this["webpackJsonpreact-simple-pull-to-refresh-playground"]=this["webpackJsonpreact-simple-pull-to-refresh-playground"]||[]).push([[0],[,,,,,function(e,n,t){e.exports=t(12)},,,,,function(e,n,t){},function(e,n,t){},function(e,n,t){"use strict";t.r(n);var r,l=t(0),i=t.n(l),o=t(2),a=t.n(o),s=(t(10),t(3)),c=t(4);t(11);function u(e,n){if(!function(e){var n=getComputedStyle(e).overflowY;return e===document.scrollingElement&&"visible"===n||("scroll"===n||"auto"===n)}(e))return!1;if(n===r.DOWN)return e.scrollTop+e.clientHeight0;throw new Error("unsupported direction")}function d(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!==typeof document){var r=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===t&&r.firstChild?r.insertBefore(l,r.firstChild):r.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}!function(e){e[e.UP=-1]="UP",e[e.DOWN=1]="DOWN"}(r||(r={}));d(".lds-ellipsis {\n display: inline-block;\n position: relative;\n width: 64px;\n height: 64px; }\n\n.lds-ellipsis div {\n position: absolute;\n top: 27px;\n width: 11px;\n height: 11px;\n border-radius: 50%;\n background: #363636;\n animation-timing-function: cubic-bezier(0, 1, 1, 0); }\n\n.lds-ellipsis div:nth-child(1) {\n left: 6px;\n animation: lds-ellipsis1 0.6s infinite; }\n\n.lds-ellipsis div:nth-child(2) {\n left: 6px;\n animation: lds-ellipsis2 0.6s infinite; }\n\n.lds-ellipsis div:nth-child(3) {\n left: 26px;\n animation: lds-ellipsis2 0.6s infinite; }\n\n.lds-ellipsis div:nth-child(4) {\n left: 45px;\n animation: lds-ellipsis3 0.6s infinite; }\n\n@keyframes lds-ellipsis1 {\n 0% {\n transform: scale(0); }\n 100% {\n transform: scale(1); } }\n\n@keyframes lds-ellipsis3 {\n 0% {\n transform: scale(1); }\n 100% {\n transform: scale(0); } }\n\n@keyframes lds-ellipsis2 {\n 0% {\n transform: translate(0, 0); }\n 100% {\n transform: translate(19px, 0); } }\n");var p=function(){return i.a.createElement("div",{className:"lds-ellipsis"},i.a.createElement("div",null),i.a.createElement("div",null),i.a.createElement("div",null),i.a.createElement("div",null))},m=function(){return i.a.createElement("div",null,i.a.createElement("p",null,"\u21a7\xa0\xa0pull to refresh\xa0\xa0\u21a7"))};d(".ptr,\n.ptr__children {\n height: 100%;\n overflow: hidden;\n -webkit-overflow-scrolling: touch;\n position: relative;\n z-index: 1; }\n\n.ptr__children,\n.ptr__pull-down {\n transition: transform 0.2s cubic-bezier(0, 0, 0.31, 1); }\n\n.ptr__pull-down {\n position: absolute;\n overflow: hidden;\n left: 0;\n right: 0;\n top: 0;\n visibility: hidden;\n text-align: center; }\n .ptr__pull-down > div {\n margin: 0 auto; }\n .ptr__pull-down > .ptr__pull-down--loading {\n display: none;\n text-align: center;\n margin: 0 auto; }\n .ptr__pull-down > .ptr__pull-down--pull-more {\n display: none;\n text-align: center;\n margin: 0 auto; }\n\n.ptr--dragging.ptr--treshold-breached .ptr__pull-down--pull-more {\n display: none; }\n\n.ptr--dragging .ptr__pull-down--pull-more {\n display: block; }\n\n.ptr--treshold-breached .ptr__pull-down {\n opacity: 1 !important; }\n\n.ptr--treshold-breached .ptr__pull-down--loading {\n display: block; }\n");var v=function(e){var n=e.refreshingContent,t=void 0===n?i.a.createElement(p,null):n,o=e.pullingContent,a=void 0===o?i.a.createElement(m,null):o,s=e.pullDownThreshold,c=void 0===s?67:s,d=e.maxPullDownDistance,v=void 0===d?95:d,f=e.onRefresh,h=e.backgroundColor,g=e.isPullable,E=void 0===g||g,y=e.children,b=e.className,w=void 0===b?"":b,_=Object(l.useRef)(null),x=Object(l.useRef)(null),L=Object(l.useRef)(null),k=!1,N=!1,O=0,C=0;Object(l.useEffect)((function(){if(E&&x&&x.current)return x.current.addEventListener("touchstart",j,{passive:!0}),x.current.addEventListener("mousedown",j),x.current.addEventListener("touchmove",D,{passive:!1}),x.current.addEventListener("mousemove",D),x.current.addEventListener("touchend",P),x.current.addEventListener("mouseup",P),document.body.addEventListener("mouseleave",P),function(){E&&x&&x.current&&(x.current.removeEventListener("touchstart",j),x.current.removeEventListener("mousedown",j),x.current.removeEventListener("touchmove",D),x.current.removeEventListener("mousemove",D),x.current.removeEventListener("touchend",P),x.current.removeEventListener("mouseup",P),document.body.removeEventListener("mouseleave",P))}}),[E]),Object(l.useEffect)((function(){T()}),[y]);var T=function(){requestAnimationFrame((function(){x.current&&(x.current.style.overflowX="hidden",x.current.style.overflowY="auto",x.current.style.transform="translate(0px, 0px)"),L.current&&(L.current.style.opacity="0"),_.current&&(_.current.classList.remove("ptr--treshold-breached"),_.current.classList.remove("ptr--dragging"))}))},j=function(e){N=!1,e instanceof MouseEvent&&(O=e.pageY),e instanceof TouchEvent&&(O=e.touches[0].pageY),C=O,"touchstart"===e.type&&function e(n,t){return!!u(n,t)||null!=n.parentElement&&e(n.parentElement,t)}(e.target,r.UP)||x.current.getBoundingClientRect().top<0||(N=!0)},D=function(e){e.preventDefault(),N&&(C=e instanceof TouchEvent?e.touches[0].pageY:e.pageY,_.current.classList.add("ptr--dragging"),C=c&&(N=!0,k=!0,_.current.classList.remove("ptr--dragging"),_.current.classList.add("ptr--treshold-breached")),C-O>v||(L.current.style.opacity=((C-O)/65).toString(),x.current.style.overflow="visible",x.current.style.transform="translate(0px, "+(C-O)+"px)",L.current.style.visibility="visible")))},P=function(){if(N=!1,O=0,C=0,!k)return L.current.style.visibility="hidden",void T();x.current.style.overflow="visible",x.current.style.transform="translate(0px, "+c+"px)",k=!1,f()};return i.a.createElement("div",{className:"ptr "+w,style:{backgroundColor:h},ref:_},i.a.createElement("div",{className:"ptr__pull-down",ref:L},i.a.createElement("div",{className:"ptr__pull-down--loading"},t),i.a.createElement("div",{className:"ptr__pull-down--pull-more"},a)),i.a.createElement("div",{className:"ptr__children",ref:x},y))},f=function(){var e=["foo","bar","baz","foo"],n=Object(l.useState)(e),t=Object(c.a)(n,2),r=t[0],o=t[1];return i.a.createElement("div",{className:"App"},i.a.createElement(v,{onRefresh:function(){setTimeout((function(){o([].concat(Object(s.a)(r),e))}),15e3)}},i.a.createElement(i.a.Fragment,null,i.a.createElement("header",{className:"App-header"},"Pull To Refresh"),i.a.createElement("div",{className:"App-container"},i.a.createElement("ul",null,r.map((function(e,n){return i.a.createElement("li",{key:n},e)})))))))};Boolean("localhost"===window.location.hostname||"[::1]"===window.location.hostname||window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/));a.a.render(i.a.createElement(f,null),document.getElementById("root")),"serviceWorker"in navigator&&navigator.serviceWorker.ready.then((function(e){e.unregister()}))}],[[5,1,2]]]); 2 | //# sourceMappingURL=main.539afb7b.chunk.js.map -------------------------------------------------------------------------------- /docs/static/js/main.568b43db.chunk.js: -------------------------------------------------------------------------------- 1 | (this["webpackJsonpreact-simple-pull-to-refresh-playground"]=this["webpackJsonpreact-simple-pull-to-refresh-playground"]||[]).push([[0],[,,,,,function(e,t,n){e.exports=n(13)},,,,,function(e,t,n){},function(e,t,n){},function(e,t,n){},function(e,t,n){"use strict";n.r(t);var r,l=n(0),a=n.n(l),o=n(3),c=n.n(o),i=(n(10),n(4)),s=n(1);n(11);function u(e,t){if(!function(e){var t=getComputedStyle(e).overflowY;return e===document.scrollingElement&&"visible"===t||("scroll"===t||"auto"===t)}(e))return!1;if(t===r.DOWN)return e.scrollTop+e.clientHeight0;throw new Error("unsupported direction")}function d(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!==typeof document){var r=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===n&&r.firstChild?r.insertBefore(l,r.firstChild):r.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}!function(e){e[e.UP=-1]="UP",e[e.DOWN=1]="DOWN"}(r||(r={}));d(".lds-ellipsis {\n display: inline-block;\n position: relative;\n width: 64px;\n height: 64px; }\n\n.lds-ellipsis div {\n position: absolute;\n top: 27px;\n width: 11px;\n height: 11px;\n border-radius: 50%;\n background: #363636;\n animation-timing-function: cubic-bezier(0, 1, 1, 0); }\n\n.lds-ellipsis div:nth-child(1) {\n left: 6px;\n animation: lds-ellipsis1 0.6s infinite; }\n\n.lds-ellipsis div:nth-child(2) {\n left: 6px;\n animation: lds-ellipsis2 0.6s infinite; }\n\n.lds-ellipsis div:nth-child(3) {\n left: 26px;\n animation: lds-ellipsis2 0.6s infinite; }\n\n.lds-ellipsis div:nth-child(4) {\n left: 45px;\n animation: lds-ellipsis3 0.6s infinite; }\n\n@keyframes lds-ellipsis1 {\n 0% {\n transform: scale(0); }\n 100% {\n transform: scale(1); } }\n\n@keyframes lds-ellipsis3 {\n 0% {\n transform: scale(1); }\n 100% {\n transform: scale(0); } }\n\n@keyframes lds-ellipsis2 {\n 0% {\n transform: translate(0, 0); }\n 100% {\n transform: translate(19px, 0); } }\n");var m=function(){return a.a.createElement("div",{className:"lds-ellipsis"},a.a.createElement("div",null),a.a.createElement("div",null),a.a.createElement("div",null),a.a.createElement("div",null))},p=function(){return a.a.createElement("div",null,a.a.createElement("p",null,"\u21a7\xa0\xa0pull to refresh\xa0\xa0\u21a7"))};d(".ptr,\n.ptr__children {\n height: 100%;\n width: 100%;\n overflow: hidden;\n -webkit-overflow-scrolling: touch;\n position: relative; }\n\n.ptr.ptr--fetch-more-treshold-breached .ptr__fetch-more {\n display: block; }\n\n.ptr__fetch-more {\n display: none; }\n\n/**\n * Pull down transition \n */\n.ptr__children,\n.ptr__pull-down {\n transition: transform 0.2s cubic-bezier(0, 0, 0.31, 1); }\n\n.ptr__pull-down {\n position: absolute;\n overflow: hidden;\n left: 0;\n right: 0;\n top: 0;\n visibility: hidden; }\n .ptr__pull-down > div {\n display: none; }\n\n.ptr--dragging {\n /**\n * Hide PullMore content is treshold breached\n */\n /**\n * Otherwize, display content\n */ }\n .ptr--dragging.ptr--pull-down-treshold-breached .ptr__pull-down--pull-more {\n display: none; }\n .ptr--dragging .ptr__pull-down--pull-more {\n display: block; }\n\n.ptr--pull-down-treshold-breached {\n /**\n * Force opacity to 1 is pull down trashold breached\n */\n /**\n * And display loader\n */ }\n .ptr--pull-down-treshold-breached .ptr__pull-down {\n opacity: 1 !important; }\n .ptr--pull-down-treshold-breached .ptr__pull-down--loading {\n display: block; }\n\n.ptr__loader {\n margin: 0 auto;\n text-align: center; }\n");var h=function(e){var t=e.isPullable,n=void 0===t||t,o=e.canFetchMore,c=void 0!==o&&o,i=e.onRefresh,s=e.onFetchMore,d=e.refreshingContent,h=void 0===d?a.a.createElement(m,null):d,f=e.pullingContent,v=void 0===f?a.a.createElement(p,null):f,b=e.children,E=e.pullDownThreshold,g=void 0===E?67:E,w=e.fetchMoreThreshold,y=void 0===w?100:w,_=e.maxPullDownDistance,x=void 0===_?95:_,D=e.backgroundColor,T=e.className,N=void 0===T?"":T,P=Object(l.useRef)(null),L=Object(l.useRef)(null),M=Object(l.useRef)(null),O=Object(l.useRef)(null),k=!1,j=!1,F=!1,C=0,R=0;Object(l.useEffect)((function(){if(n&&L&&L.current)return L.current.addEventListener("touchstart",z,{passive:!0}),L.current.addEventListener("mousedown",z),L.current.addEventListener("touchmove",Y,{passive:!1}),L.current.addEventListener("mousemove",Y),window.addEventListener("scroll",B),L.current.addEventListener("touchend",H),L.current.addEventListener("mouseup",H),document.body.addEventListener("mouseleave",H),function(){n&&L&&L.current&&(L.current.removeEventListener("touchstart",z),L.current.removeEventListener("mousedown",z),L.current.removeEventListener("touchmove",Y),L.current.removeEventListener("mousemove",Y),window.removeEventListener("scroll",B),L.current.removeEventListener("touchend",H),L.current.removeEventListener("mouseup",H),document.body.removeEventListener("mouseleave",H))}}),[b,n,i,g,x,c,y]),Object(l.useEffect)((function(){var e;(null===(e=P)||void 0===e?void 0:e.current)&&(P.current.classList.contains("ptr--fetch-more-treshold-breached")||c&&S()=g&&(F=!0,k=!0,P.current.classList.remove("ptr--dragging"),P.current.classList.add("ptr--pull-down-treshold-breached")),R-C>x||(M.current.style.opacity=((R-C)/65).toString(),L.current.style.overflow="visible",L.current.style.transform="translate(0px, "+(R-C)+"px)",M.current.style.visibility="visible")))},B=function(e){j||c&&S()0;throw new Error("unsupported direction")}function d(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!==typeof document){var r=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===t&&r.firstChild?r.insertBefore(l,r.firstChild):r.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}!function(e){e[e.UP=-1]="UP",e[e.DOWN=1]="DOWN"}(r||(r={}));d(".lds-ellipsis {\n display: inline-block;\n position: relative;\n width: 64px;\n height: 64px; }\n\n.lds-ellipsis div {\n position: absolute;\n top: 27px;\n width: 11px;\n height: 11px;\n border-radius: 50%;\n background: #363636;\n animation-timing-function: cubic-bezier(0, 1, 1, 0); }\n\n.lds-ellipsis div:nth-child(1) {\n left: 6px;\n animation: lds-ellipsis1 0.6s infinite; }\n\n.lds-ellipsis div:nth-child(2) {\n left: 6px;\n animation: lds-ellipsis2 0.6s infinite; }\n\n.lds-ellipsis div:nth-child(3) {\n left: 26px;\n animation: lds-ellipsis2 0.6s infinite; }\n\n.lds-ellipsis div:nth-child(4) {\n left: 45px;\n animation: lds-ellipsis3 0.6s infinite; }\n\n@keyframes lds-ellipsis1 {\n 0% {\n transform: scale(0); }\n 100% {\n transform: scale(1); } }\n\n@keyframes lds-ellipsis3 {\n 0% {\n transform: scale(1); }\n 100% {\n transform: scale(0); } }\n\n@keyframes lds-ellipsis2 {\n 0% {\n transform: translate(0, 0); }\n 100% {\n transform: translate(19px, 0); } }\n");var p=function(){return i.a.createElement("div",{className:"lds-ellipsis"},i.a.createElement("div",null),i.a.createElement("div",null),i.a.createElement("div",null),i.a.createElement("div",null))},m=function(){return i.a.createElement("div",null,i.a.createElement("p",null,"\u21a7\xa0\xa0pull to refresh\xa0\xa0\u21a7"))};d(".ptr,\n.ptr__children {\n height: 100%;\n overflow: hidden;\n -webkit-overflow-scrolling: touch;\n position: relative;\n z-index: 1; }\n\n.ptr__children,\n.ptr__pull-down {\n transition: transform 0.2s cubic-bezier(0, 0, 0.31, 1); }\n\n.ptr__pull-down {\n position: absolute;\n overflow: hidden;\n left: 0;\n right: 0;\n top: 0;\n visibility: hidden;\n text-align: center; }\n .ptr__pull-down > div {\n margin: 0 auto; }\n .ptr__pull-down > .ptr__pull-down--loading {\n display: none;\n text-align: center;\n margin: 0 auto; }\n .ptr__pull-down > .ptr__pull-down--pull-more {\n display: none;\n text-align: center;\n margin: 0 auto; }\n\n.ptr--dragging.ptr--treshold-breached .ptr__pull-down--pull-more {\n display: none; }\n\n.ptr--dragging .ptr__pull-down--pull-more {\n display: block; }\n\n.ptr--treshold-breached .ptr__pull-down {\n opacity: 1 !important; }\n\n.ptr--treshold-breached .ptr__pull-down--loading {\n display: block; }\n");var f=function(e){var n=e.refreshingContent,t=void 0===n?i.a.createElement(p,null):n,o=e.pullingContent,a=void 0===o?i.a.createElement(m,null):o,s=e.pullDownThreshold,c=void 0===s?67:s,d=e.maxPullDownDistance,f=void 0===d?95:d,v=e.onRefresh,h=e.backgroundColor,g=e.isPullable,b=void 0===g||g,E=e.children,y=e.className,w=void 0===y?"":y,_=Object(l.useRef)(null),x=Object(l.useRef)(null),L=Object(l.useRef)(null),k=!1,N=!1,O=0,C=0;Object(l.useEffect)((function(){if(b&&x&&x.current)return x.current.addEventListener("touchstart",j,{passive:!0}),x.current.addEventListener("mousedown",j),x.current.addEventListener("touchmove",z,{passive:!1}),x.current.addEventListener("mousemove",z),x.current.addEventListener("touchend",P),x.current.addEventListener("mouseup",P),document.body.addEventListener("mouseleave",P),function(){b&&x&&x.current&&(x.current.removeEventListener("touchstart",j),x.current.removeEventListener("mousedown",j),x.current.removeEventListener("touchmove",z),x.current.removeEventListener("mousemove",z),x.current.removeEventListener("touchend",P),x.current.removeEventListener("mouseup",P),document.body.removeEventListener("mouseleave",P))}}),[b,v]),Object(l.useEffect)((function(){T()}),[E]);var T=function(){requestAnimationFrame((function(){x.current&&(x.current.style.overflowX="hidden",x.current.style.overflowY="auto",x.current.style.transform="translate(0px, 0px)"),L.current&&(L.current.style.opacity="0"),_.current&&(_.current.classList.remove("ptr--treshold-breached"),_.current.classList.remove("ptr--dragging"))}))},j=function(e){N=!1,e instanceof MouseEvent&&(O=e.pageY),e instanceof TouchEvent&&(O=e.touches[0].pageY),C=O,"touchstart"===e.type&&function e(n,t){return!!u(n,t)||null!=n.parentElement&&e(n.parentElement,t)}(e.target,r.UP)||x.current.getBoundingClientRect().top<0||(N=!0)},z=function(e){N&&(C=e instanceof TouchEvent?e.touches[0].pageY:e.pageY,_.current.classList.add("ptr--dragging"),C=c?(N=!0,k=!0,_.current.classList.remove("ptr--dragging"),_.current.classList.add("ptr--treshold-breached")):(k=!1,_.current.classList.remove("ptr--treshold-breached")),C-O>f||(L.current.style.opacity=((C-O)/65).toString(),x.current.style.overflow="visible",x.current.style.transform="translate(0px, "+(C-O)+"px)",L.current.style.visibility="visible")))},P=function(){if(N=!1,O=0,C=0,!k)return L.current.style.visibility="hidden",void T();x.current.style.overflow="visible",x.current.style.transform="translate(0px, "+c+"px)",k=!1,v()};return i.a.createElement("div",{className:"ptr "+w,style:{backgroundColor:h},ref:_},i.a.createElement("div",{className:"ptr__pull-down",ref:L},i.a.createElement("div",{className:"ptr__pull-down--loading"},t),i.a.createElement("div",{className:"ptr__pull-down--pull-more"},a)),i.a.createElement("div",{className:"ptr__children",ref:x},E))},v=function(){var e=["foo","bar","baz","foo","foo","bar","baz","foo","foo","bar","baz","foo","foo","bar","baz","foo"],n=Object(l.useState)(e),t=Object(c.a)(n,2),r=t[0],o=t[1];return i.a.createElement("div",{className:"App"},i.a.createElement(f,{onRefresh:function(){setTimeout((function(){o([].concat(Object(s.a)(r),e))}),1500)}},i.a.createElement(i.a.Fragment,null,i.a.createElement("header",{className:"App-header"},"Pull To Refresh"),i.a.createElement("div",{className:"App-container"},i.a.createElement("ul",null,r.map((function(e,n){return i.a.createElement("li",{key:n},n," - ",e)})))))))};Boolean("localhost"===window.location.hostname||"[::1]"===window.location.hostname||window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/));a.a.render(i.a.createElement(v,null),document.getElementById("root")),"serviceWorker"in navigator&&navigator.serviceWorker.ready.then((function(e){e.unregister()}))}],[[5,1,2]]]); 2 | //# sourceMappingURL=main.60752506.chunk.js.map -------------------------------------------------------------------------------- /docs/static/js/main.7c3992f0.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /** 2 | * @license React 3 | * react-dom.production.min.js 4 | * 5 | * Copyright (c) Facebook, Inc. and its affiliates. 6 | * 7 | * This source code is licensed under the MIT license found in the 8 | * LICENSE file in the root directory of this source tree. 9 | */ 10 | 11 | /** 12 | * @license React 13 | * react-jsx-runtime.production.min.js 14 | * 15 | * Copyright (c) Facebook, Inc. and its affiliates. 16 | * 17 | * This source code is licensed under the MIT license found in the 18 | * LICENSE file in the root directory of this source tree. 19 | */ 20 | 21 | /** 22 | * @license React 23 | * react.production.min.js 24 | * 25 | * Copyright (c) Facebook, Inc. and its affiliates. 26 | * 27 | * This source code is licensed under the MIT license found in the 28 | * LICENSE file in the root directory of this source tree. 29 | */ 30 | 31 | /** 32 | * @license React 33 | * scheduler.production.min.js 34 | * 35 | * Copyright (c) Facebook, Inc. and its affiliates. 36 | * 37 | * This source code is licensed under the MIT license found in the 38 | * LICENSE file in the root directory of this source tree. 39 | */ 40 | -------------------------------------------------------------------------------- /docs/static/js/main.9bf6d823.chunk.js: -------------------------------------------------------------------------------- 1 | (this["webpackJsonpreact-simple-pull-to-refresh-playground"]=this["webpackJsonpreact-simple-pull-to-refresh-playground"]||[]).push([[0],[,,,,,function(e,n,t){e.exports=t(12)},,,,,function(e,n,t){},function(e,n,t){},function(e,n,t){"use strict";t.r(n);var r,l=t(0),i=t.n(l),o=t(2),s=t.n(o),a=(t(10),t(3)),c=t(4);t(11);function u(e,n){if(!function(e){var n=getComputedStyle(e).overflowY;return e===document.scrollingElement&&"visible"===n||("scroll"===n||"auto"===n)}(e))return!1;if(n===r.DOWN)return e.scrollTop+e.clientHeight0;throw new Error("unsupported direction")}function d(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!==typeof document){var r=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===t&&r.firstChild?r.insertBefore(l,r.firstChild):r.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}!function(e){e[e.UP=-1]="UP",e[e.DOWN=1]="DOWN"}(r||(r={}));d(".lds-ellipsis {\n display: inline-block;\n position: relative;\n width: 64px;\n height: 64px; }\n\n.lds-ellipsis div {\n position: absolute;\n top: 27px;\n width: 11px;\n height: 11px;\n border-radius: 50%;\n background: #363636;\n animation-timing-function: cubic-bezier(0, 1, 1, 0); }\n\n.lds-ellipsis div:nth-child(1) {\n left: 6px;\n animation: lds-ellipsis1 0.6s infinite; }\n\n.lds-ellipsis div:nth-child(2) {\n left: 6px;\n animation: lds-ellipsis2 0.6s infinite; }\n\n.lds-ellipsis div:nth-child(3) {\n left: 26px;\n animation: lds-ellipsis2 0.6s infinite; }\n\n.lds-ellipsis div:nth-child(4) {\n left: 45px;\n animation: lds-ellipsis3 0.6s infinite; }\n\n@keyframes lds-ellipsis1 {\n 0% {\n transform: scale(0); }\n 100% {\n transform: scale(1); } }\n\n@keyframes lds-ellipsis3 {\n 0% {\n transform: scale(1); }\n 100% {\n transform: scale(0); } }\n\n@keyframes lds-ellipsis2 {\n 0% {\n transform: translate(0, 0); }\n 100% {\n transform: translate(19px, 0); } }\n");var p=function(){return i.a.createElement("div",{className:"lds-ellipsis"},i.a.createElement("div",null),i.a.createElement("div",null),i.a.createElement("div",null),i.a.createElement("div",null))},m=function(){return i.a.createElement("div",null,i.a.createElement("p",null,"\u21a7\xa0\xa0Pull To Refresh\xa0\xa0\u21a7"))};d(".ptr,\n.ptr__children {\n height: 100%;\n overflow: hidden;\n -webkit-overflow-scrolling: touch;\n position: relative;\n z-index: 1; }\n\n.ptr__children,\n.ptr__pull-down {\n transition: transform 0.2s cubic-bezier(0, 0, 0.31, 1); }\n\n.ptr__pull-down {\n position: absolute;\n overflow: hidden;\n left: 0;\n right: 0;\n top: 0;\n visibility: 'hidden';\n text-align: center; }\n .ptr__pull-down > div {\n margin: 0 auto; }\n .ptr__pull-down > .ptr__pull-down--loading {\n display: none; }\n .ptr__pull-down > .ptr__pull-down--pull-more {\n display: none; }\n\n.ptr--dragging.ptr--treshold-breached .ptr__pull-down--pull-more {\n display: none; }\n\n.ptr--dragging .ptr__pull-down--pull-more {\n display: block; }\n\n.ptr--treshold-breached .ptr__pull-down {\n opacity: 1 !important; }\n\n.ptr--treshold-breached .ptr__pull-down--loading {\n display: block; }\n");var v=function(e){var n=e.refreshingContent,t=void 0===n?i.a.createElement(p,null):n,o=e.pullingContent,s=void 0===o?i.a.createElement(m,null):o,a=e.pullDownThreshold,c=void 0===a?67:a,d=e.maxPullDownDistance,v=void 0===d?95:d,f=e.onRefresh,h=e.backgroundColor,g=e.isPullable,E=void 0===g||g,y=e.children,b=e.className,w=void 0===b?"":b,_=Object(l.useRef)(null),x=Object(l.useRef)(null),L=Object(l.useRef)(null),k=!1,N=!1,O=0,T=0;Object(l.useEffect)((function(){if(E&&x&&x.current)return x.current.addEventListener("touchstart",j,{passive:!0}),x.current.addEventListener("mousedown",j),x.current.addEventListener("touchmove",P,{passive:!1}),x.current.addEventListener("mousemove",P),x.current.addEventListener("touchend",R),x.current.addEventListener("mouseup",R),document.body.addEventListener("mouseleave",R),function(){E&&x&&x.current&&(x.current.removeEventListener("touchstart",j),x.current.removeEventListener("mousedown",j),x.current.removeEventListener("touchmove",P),x.current.removeEventListener("mousemove",P),x.current.removeEventListener("touchend",R),x.current.removeEventListener("mouseup",R),document.body.removeEventListener("mouseleave",R))}}),[E]),Object(l.useEffect)((function(){C()}),[y]);var C=function(){requestAnimationFrame((function(){x.current.style.overflowX="hidden",x.current.style.overflowY="auto",x.current.style.transform="translate(0px, 0px)",L.current.style.opacity="0",_.current.classList.remove("ptr--treshold-breached"),_.current.classList.remove("ptr--dragging")}))},j=function(e){N=!1,e instanceof MouseEvent&&(O=e.pageY),e instanceof TouchEvent&&(O=e.touches[0].pageY),T=O,"touchstart"===e.type&&function e(n,t){return!!u(n,t)||null!=n.parentElement&&e(n.parentElement,t)}(e.target,r.UP)||x.current.getBoundingClientRect().top<0||(N=!0)},P=function(e){e.preventDefault(),N&&(T=e instanceof TouchEvent?e.touches[0].pageY:e.pageY,_.current.classList.add("ptr--dragging"),T=c&&(N=!0,k=!0,_.current.classList.remove("ptr--dragging"),_.current.classList.add("ptr--treshold-breached")),T-O>v||(L.current.style.opacity=((T-O)/65).toString(),x.current.style.overflow="visible",x.current.style.transform="translate(0px, "+(T-O)+"px)",L.current.style.visibility="visible")))},R=function(){if(N=!1,O=0,T=0,!k)return L.current.style.visibility="hidden",void C();x.current.style.overflow="visible",x.current.style.transform="translate(0px, "+c+"px)",k=!1,f()};return i.a.createElement("div",{className:"ptr "+w,style:{backgroundColor:h},ref:_},i.a.createElement("div",{className:"ptr__pull-down",ref:L},i.a.createElement("div",{className:"ptr__pull-down--loading"},t),i.a.createElement("div",{className:"ptr__pull-down--pull-more"},s)),i.a.createElement("div",{className:"ptr__children",ref:x},y))},f=function(){var e=["foo","bar","baz","foo"],n=Object(l.useState)(e),t=Object(c.a)(n,2),r=t[0],o=t[1];return i.a.createElement("div",{className:"App"},i.a.createElement(v,{onRefresh:function(){setTimeout((function(){o([].concat(Object(a.a)(r),e))}),1500)}},i.a.createElement(i.a.Fragment,null,i.a.createElement("header",{className:"App-header"},"Pull To Refresh"),i.a.createElement("div",{className:"App-container"},i.a.createElement("ul",null,r.map((function(e,n){return i.a.createElement("li",{key:n},e)})))))))};Boolean("localhost"===window.location.hostname||"[::1]"===window.location.hostname||window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/));s.a.render(i.a.createElement(f,null),document.getElementById("root")),"serviceWorker"in navigator&&navigator.serviceWorker.ready.then((function(e){e.unregister()}))}],[[5,1,2]]]); 2 | //# sourceMappingURL=main.9bf6d823.chunk.js.map -------------------------------------------------------------------------------- /docs/static/js/main.f34627b8.chunk.js: -------------------------------------------------------------------------------- 1 | (this["webpackJsonpreact-simple-pull-to-refresh-playground"]=this["webpackJsonpreact-simple-pull-to-refresh-playground"]||[]).push([[0],[,,,,,function(e,n,t){e.exports=t(12)},,,,,function(e,n,t){},function(e,n,t){},function(e,n,t){"use strict";t.r(n);var r,l=t(0),i=t.n(l),o=t(2),a=t.n(o),s=(t(10),t(3)),c=t(4);t(11);function u(e,n){if(!function(e){var n=getComputedStyle(e).overflowY;return e===document.scrollingElement&&"visible"===n||("scroll"===n||"auto"===n)}(e))return!1;if(n===r.DOWN)return e.scrollTop+e.clientHeight0;throw new Error("unsupported direction")}function d(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!==typeof document){var r=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===t&&r.firstChild?r.insertBefore(l,r.firstChild):r.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}!function(e){e[e.UP=-1]="UP",e[e.DOWN=1]="DOWN"}(r||(r={}));d(".lds-ellipsis {\n display: inline-block;\n position: relative;\n width: 64px;\n height: 64px; }\n\n.lds-ellipsis div {\n position: absolute;\n top: 27px;\n width: 11px;\n height: 11px;\n border-radius: 50%;\n background: #363636;\n animation-timing-function: cubic-bezier(0, 1, 1, 0); }\n\n.lds-ellipsis div:nth-child(1) {\n left: 6px;\n animation: lds-ellipsis1 0.6s infinite; }\n\n.lds-ellipsis div:nth-child(2) {\n left: 6px;\n animation: lds-ellipsis2 0.6s infinite; }\n\n.lds-ellipsis div:nth-child(3) {\n left: 26px;\n animation: lds-ellipsis2 0.6s infinite; }\n\n.lds-ellipsis div:nth-child(4) {\n left: 45px;\n animation: lds-ellipsis3 0.6s infinite; }\n\n@keyframes lds-ellipsis1 {\n 0% {\n transform: scale(0); }\n 100% {\n transform: scale(1); } }\n\n@keyframes lds-ellipsis3 {\n 0% {\n transform: scale(1); }\n 100% {\n transform: scale(0); } }\n\n@keyframes lds-ellipsis2 {\n 0% {\n transform: translate(0, 0); }\n 100% {\n transform: translate(19px, 0); } }\n");var p=function(){return i.a.createElement("div",{className:"lds-ellipsis"},i.a.createElement("div",null),i.a.createElement("div",null),i.a.createElement("div",null),i.a.createElement("div",null))},m=function(){return i.a.createElement("div",null,i.a.createElement("p",null,"\u21a7\xa0\xa0pull to refresh\xa0\xa0\u21a7"))};d(".ptr,\n.ptr__children {\n height: 100%;\n overflow: hidden;\n -webkit-overflow-scrolling: touch;\n position: relative;\n z-index: 1; }\n\n.ptr__children,\n.ptr__pull-down {\n transition: transform 0.2s cubic-bezier(0, 0, 0.31, 1); }\n\n.ptr__pull-down {\n position: absolute;\n overflow: hidden;\n left: 0;\n right: 0;\n top: 0;\n visibility: hidden;\n text-align: center; }\n .ptr__pull-down > div {\n margin: 0 auto; }\n .ptr__pull-down > .ptr__pull-down--loading {\n display: none;\n text-align: center;\n margin: 0 auto; }\n .ptr__pull-down > .ptr__pull-down--pull-more {\n display: none;\n text-align: center;\n margin: 0 auto; }\n\n.ptr--dragging.ptr--treshold-breached .ptr__pull-down--pull-more {\n display: none; }\n\n.ptr--dragging .ptr__pull-down--pull-more {\n display: block; }\n\n.ptr--treshold-breached .ptr__pull-down {\n opacity: 1 !important; }\n\n.ptr--treshold-breached .ptr__pull-down--loading {\n display: block; }\n");var v=function(e){var n=e.refreshingContent,t=void 0===n?i.a.createElement(p,null):n,o=e.pullingContent,a=void 0===o?i.a.createElement(m,null):o,s=e.pullDownThreshold,c=void 0===s?67:s,d=e.maxPullDownDistance,v=void 0===d?95:d,f=e.onRefresh,h=e.backgroundColor,g=e.isPullable,E=void 0===g||g,y=e.children,b=e.className,w=void 0===b?"":b,_=Object(l.useRef)(null),x=Object(l.useRef)(null),L=Object(l.useRef)(null),k=!1,N=!1,O=0,C=0;Object(l.useEffect)((function(){if(E&&x&&x.current)return x.current.addEventListener("touchstart",j,{passive:!0}),x.current.addEventListener("mousedown",j),x.current.addEventListener("touchmove",D,{passive:!1}),x.current.addEventListener("mousemove",D),x.current.addEventListener("touchend",P),x.current.addEventListener("mouseup",P),document.body.addEventListener("mouseleave",P),function(){E&&x&&x.current&&(x.current.removeEventListener("touchstart",j),x.current.removeEventListener("mousedown",j),x.current.removeEventListener("touchmove",D),x.current.removeEventListener("mousemove",D),x.current.removeEventListener("touchend",P),x.current.removeEventListener("mouseup",P),document.body.removeEventListener("mouseleave",P))}}),[E]),Object(l.useEffect)((function(){T()}),[y]);var T=function(){requestAnimationFrame((function(){x.current&&(x.current.style.overflowX="hidden",x.current.style.overflowY="auto",x.current.style.transform="translate(0px, 0px)"),L.current&&(L.current.style.opacity="0"),_.current&&(_.current.classList.remove("ptr--treshold-breached"),_.current.classList.remove("ptr--dragging"))}))},j=function(e){N=!1,e instanceof MouseEvent&&(O=e.pageY),e instanceof TouchEvent&&(O=e.touches[0].pageY),C=O,"touchstart"===e.type&&function e(n,t){return!!u(n,t)||null!=n.parentElement&&e(n.parentElement,t)}(e.target,r.UP)||x.current.getBoundingClientRect().top<0||(N=!0)},D=function(e){e.preventDefault(),N&&(C=e instanceof TouchEvent?e.touches[0].pageY:e.pageY,_.current.classList.add("ptr--dragging"),C=c&&(N=!0,k=!0,_.current.classList.remove("ptr--dragging"),_.current.classList.add("ptr--treshold-breached")),C-O>v||(L.current.style.opacity=((C-O)/65).toString(),x.current.style.overflow="visible",x.current.style.transform="translate(0px, "+(C-O)+"px)",L.current.style.visibility="visible")))},P=function(){if(N=!1,O=0,C=0,!k)return L.current.style.visibility="hidden",void T();x.current.style.overflow="visible",x.current.style.transform="translate(0px, "+c+"px)",k=!1,f()};return i.a.createElement("div",{className:"ptr "+w,style:{backgroundColor:h},ref:_},i.a.createElement("div",{className:"ptr__pull-down",ref:L},i.a.createElement("div",{className:"ptr__pull-down--loading"},t),i.a.createElement("div",{className:"ptr__pull-down--pull-more"},a)),i.a.createElement("div",{className:"ptr__children",ref:x},y))},f=function(){var e=["foo","bar","baz","foo"],n=Object(l.useState)(e),t=Object(c.a)(n,2),r=t[0],o=t[1];return i.a.createElement("div",{className:"App"},i.a.createElement(v,{onRefresh:function(){setTimeout((function(){o([].concat(Object(s.a)(r),e))}),1500)}},i.a.createElement(i.a.Fragment,null,i.a.createElement("header",{className:"App-header"},"Pull To Refresh"),i.a.createElement("div",{className:"App-container"},i.a.createElement("ul",null,r.map((function(e,n){return i.a.createElement("li",{key:n},e)})))))))};Boolean("localhost"===window.location.hostname||"[::1]"===window.location.hostname||window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/));a.a.render(i.a.createElement(f,null),document.getElementById("root")),"serviceWorker"in navigator&&navigator.serviceWorker.ready.then((function(e){e.unregister()}))}],[[5,1,2]]]); 2 | //# sourceMappingURL=main.f34627b8.chunk.js.map -------------------------------------------------------------------------------- /docs/static/js/runtime-main.dd9dbc43.js: -------------------------------------------------------------------------------- 1 | !function(e){function r(r){for(var n,u,p=r[0],a=r[1],f=r[2],c=0,s=[];c 10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `npm test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `npm run build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `npm run eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 35 | 36 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 37 | 38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | -------------------------------------------------------------------------------- /playground/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-simple-pull-to-refresh-playground", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@types/jest": "24.0.19", 7 | "@types/node": "^18.6.4", 8 | "@types/react": "^18.0.15", 9 | "@types/react-dom": "^18.0.6", 10 | "react": "^18.2.0", 11 | "react-dom": "^18.2.0", 12 | "react-scripts": "5.0.1", 13 | "styled-components": "^4.4.0", 14 | "typescript": "3.6.4" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test", 20 | "eject": "react-scripts eject" 21 | }, 22 | "eslintConfig": { 23 | "extends": "react-app" 24 | }, 25 | "browserslist": { 26 | "production": [ 27 | ">0.2%", 28 | "not dead", 29 | "not op_mini all" 30 | ], 31 | "development": [ 32 | "last 1 chrome version", 33 | "last 1 firefox version", 34 | "last 1 safari version" 35 | ] 36 | }, 37 | "homepage": "https://thmsgbrt.github.io/react-simple-pull-to-refresh" 38 | } 39 | -------------------------------------------------------------------------------- /playground/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thmsgbrt/react-simple-pull-to-refresh/b91b3eff46210b5c5e7e95d6b02a83e0d1a4eb45/playground/public/favicon.ico -------------------------------------------------------------------------------- /playground/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /playground/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thmsgbrt/react-simple-pull-to-refresh/b91b3eff46210b5c5e7e95d6b02a83e0d1a4eb45/playground/public/logo192.png -------------------------------------------------------------------------------- /playground/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thmsgbrt/react-simple-pull-to-refresh/b91b3eff46210b5c5e7e95d6b02a83e0d1a4eb45/playground/public/logo512.png -------------------------------------------------------------------------------- /playground/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /playground/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /playground/src/App.css: -------------------------------------------------------------------------------- 1 | .App-header { 2 | text-align: center; 3 | background-color: #282c34; 4 | height: 15vh; 5 | display: flex; 6 | flex-direction: column; 7 | align-items: center; 8 | justify-content: center; 9 | font-size: calc(10px + 2vmin); 10 | color: white; 11 | } 12 | 13 | .App-ptr { 14 | height: 100%; 15 | } 16 | 17 | .App-commands { 18 | background: linear-gradient(35deg, #64b6ac, #3c6b7c 100%); 19 | } 20 | -------------------------------------------------------------------------------- /playground/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /playground/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import './App.css'; 3 | import PullToRefresh from './pull-to-refresh'; 4 | import Commands from './commands/commands'; 5 | 6 | const DEFAULT_VALUES = { 7 | isPullable: true, 8 | canFetchMore: false, 9 | fetchMoreThreshold: 100, 10 | pullDownThreshold: 67, 11 | maxPullDownDistance: 95, 12 | resistance: 1, 13 | }; 14 | 15 | const App: React.FC = () => { 16 | // prettier-ignore 17 | const FAKE_LIST = ['foo','bar','baz','foo','foo','bar','baz','foo','foo','bar','baz','foo','foo','bar','baz']; 18 | const [list, setList] = useState(FAKE_LIST); 19 | const [isPullable, setIsPullable] = useState(DEFAULT_VALUES.isPullable); 20 | const [canFetchMore, setCanFetchMore] = useState(DEFAULT_VALUES.canFetchMore); 21 | const [fetchMoreThreshold, setFetchMoreThreshold] = useState(DEFAULT_VALUES.fetchMoreThreshold); 22 | const [pullDownThreshold, setPullDownThreshold] = useState(DEFAULT_VALUES.pullDownThreshold); 23 | const [maxPullDownDistance, setMaxPullDownDistance] = useState(DEFAULT_VALUES.maxPullDownDistance); 24 | const [resistance, setResistance] = useState(DEFAULT_VALUES.resistance); 25 | 26 | const handleReset = (): void => { 27 | setIsPullable(DEFAULT_VALUES.isPullable); 28 | setCanFetchMore(DEFAULT_VALUES.canFetchMore); 29 | setFetchMoreThreshold(DEFAULT_VALUES.fetchMoreThreshold); 30 | setPullDownThreshold(DEFAULT_VALUES.pullDownThreshold); 31 | setMaxPullDownDistance(DEFAULT_VALUES.maxPullDownDistance); 32 | setResistance(DEFAULT_VALUES.resistance); 33 | }; 34 | 35 | const getNewData = (): Promise => { 36 | return new Promise(res => { 37 | setTimeout(() => { 38 | res(setList([...list, ...FAKE_LIST])); 39 | }, 1500); 40 | }); 41 | }; 42 | 43 | return ( 44 |
45 |
46 | setCanFetchMore(!canFetchMore)} 49 | isPullable={isPullable} 50 | setIsPullable={() => setIsPullable(!isPullable)} 51 | fetchMoreThreshold={fetchMoreThreshold} 52 | setFetchMoreThreshold={(n: number) => setFetchMoreThreshold(n)} 53 | pullDownThreshold={pullDownThreshold} 54 | setPullDownThreshold={(n: number) => setPullDownThreshold(n)} 55 | maxPullDownDistance={maxPullDownDistance} 56 | setMaxPullDownDistance={(n: number) => setMaxPullDownDistance(n)} 57 | resistance={resistance} 58 | setResistance={(n: number) => setResistance(n)} 59 | onReset={handleReset} 60 | /> 61 |
62 |
63 | 74 | <> 75 |
76 |

Demo App

77 |

Pull To Refresh

78 |
79 |
80 |
    81 | {list.map((item: string, index: number) => ( 82 |
  • 83 | {index + 1} - {item} 84 |
    • 85 | ))} 86 |
87 |
88 | 89 | 90 |
91 |
92 | ); 93 | }; 94 | 95 | export default App; 96 | -------------------------------------------------------------------------------- /playground/src/commands/commands.css: -------------------------------------------------------------------------------- 1 | .commands { 2 | display: flex; 3 | overflow-x: auto; 4 | padding: 15px 20px; 5 | } 6 | 7 | .command__group { 8 | display: flex; 9 | align-items: center; 10 | margin: 10px; 11 | font-size: 1rem; 12 | } 13 | 14 | input[type='number'] { 15 | background: white; 16 | border-radius: 3px; 17 | line-height: 15px; 18 | background-position: 0 15px; 19 | background-repeat: no-repeat; 20 | background-size: 15px 15px; 21 | border-width: 2px; 22 | border-style: solid; 23 | border-color: transparent; 24 | color: salmon; 25 | font-weight: bold; 26 | padding: 5px; 27 | margin-right: 1rem; 28 | width: 35px; 29 | } 30 | 31 | input[type='checkbox'] { 32 | height: 20px; 33 | width: 20px; 34 | position: relative; 35 | margin-right: 1rem; 36 | } 37 | 38 | input[type='checkbox']:after { 39 | content: '\00D7'; 40 | display: block; 41 | background: white; 42 | background-image: url('https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-21-32.png'); 43 | pointer-events: none; 44 | position: absolute; 45 | top: 0; 46 | left: 0; 47 | height: 15px; 48 | width: 15px; 49 | color: transparent; 50 | transition: 0.25s all ease-in-out; 51 | border-radius: 3px; 52 | line-height: 15px; 53 | background-position: 0 15px; 54 | background-repeat: no-repeat; 55 | background-size: 15px 15px; 56 | border-width: 2px; 57 | border-style: solid; 58 | border-color: transparent; 59 | } 60 | input[type='checkbox']:checked:after { 61 | background-color: salmon; 62 | background-position: 0 0; 63 | } 64 | input[type='checkbox']:hover:after { 65 | border-color: salmon; 66 | } 67 | 68 | button { 69 | background: transparent; 70 | border: 1px solid white; 71 | border-radius: 3px; 72 | padding: 10px; 73 | color: white; 74 | } 75 | -------------------------------------------------------------------------------- /playground/src/commands/commands.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './commands.css'; 3 | 4 | interface Props { 5 | canFetchMore: boolean; 6 | isPullable: boolean; 7 | fetchMoreThreshold: number; 8 | pullDownThreshold: number; 9 | maxPullDownDistance: number; 10 | resistance: number; 11 | setCanFetchMore: Function; 12 | setIsPullable: Function; 13 | setFetchMoreThreshold: Function; 14 | setPullDownThreshold: Function; 15 | setMaxPullDownDistance: Function; 16 | setResistance: Function; 17 | onReset: Function; 18 | } 19 | 20 | const Commands = ({ 21 | canFetchMore, 22 | isPullable, 23 | setCanFetchMore, 24 | setIsPullable, 25 | setFetchMoreThreshold, 26 | fetchMoreThreshold, 27 | setPullDownThreshold, 28 | pullDownThreshold, 29 | setMaxPullDownDistance, 30 | maxPullDownDistance, 31 | resistance, 32 | setResistance, 33 | onReset, 34 | }: Props) => { 35 | return ( 36 |
37 |
38 |
39 | 42 |
43 |
44 | setIsPullable()} /> 45 | 48 |
49 |
50 | setCanFetchMore()} /> 51 | 54 |
55 |
56 |
57 |
58 | setFetchMoreThreshold(e.target.value)} 63 | /> 64 | 67 |
68 |
69 | setPullDownThreshold(e.target.value)} 74 | /> 75 | 78 |
79 |
80 | setMaxPullDownDistance(e.target.value)} 85 | /> 86 | 89 |
90 |
91 | setResistance(e.target.value)} 96 | /> 97 | 100 |
101 |
102 |
103 | ); 104 | }; 105 | 106 | export default Commands; 107 | -------------------------------------------------------------------------------- /playground/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; 4 | -webkit-font-smoothing: antialiased; 5 | -moz-osx-font-smoothing: grayscale; 6 | } 7 | 8 | code { 9 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; 10 | } 11 | 12 | h1, 13 | h2 { 14 | margin: 0.3rem; 15 | } 16 | 17 | h1  { 18 | font-size: 2rem; 19 | } 20 | 21 | h2 { 22 | font-size: 1rem; 23 | } 24 | -------------------------------------------------------------------------------- /playground/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { createRoot } from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | const container = document.getElementById('root'); 8 | const root = createRoot(container!); 9 | root.render(); 10 | 11 | // If you want your app to work offline and load faster, you can change 12 | // unregister() to register() below. Note this comes with some pitfalls. 13 | // Learn more about service workers: https://bit.ly/CRA-PWA 14 | serviceWorker.unregister(); 15 | -------------------------------------------------------------------------------- /playground/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /playground/src/pull-to-refresh/components/pull-to-refresh.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import '../styles/main.scss'; 3 | interface PullToRefreshProps { 4 | isPullable?: boolean; 5 | canFetchMore?: boolean; 6 | onRefresh: () => Promise; 7 | onFetchMore?: () => Promise; 8 | refreshingContent?: JSX.Element | string; 9 | pullingContent?: JSX.Element | string; 10 | children: JSX.Element; 11 | pullDownThreshold?: number; 12 | fetchMoreThreshold?: number; 13 | maxPullDownDistance?: number; 14 | resistance?: number; 15 | backgroundColor?: string; 16 | className?: string; 17 | } 18 | declare const PullToRefresh: React.FC; 19 | export default PullToRefresh; 20 | -------------------------------------------------------------------------------- /playground/src/pull-to-refresh/components/pulling-content.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | declare const PullingContent: () => JSX.Element; 3 | export default PullingContent; 4 | -------------------------------------------------------------------------------- /playground/src/pull-to-refresh/components/refreshing-content.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | import '../styles/refreshing-content.scss'; 3 | declare const RefreshingContent: () => JSX.Element; 4 | export default RefreshingContent; 5 | -------------------------------------------------------------------------------- /playground/src/pull-to-refresh/index.d.ts: -------------------------------------------------------------------------------- 1 | import PullToRefresh from './components/pull-to-refresh'; 2 | export default PullToRefresh; 3 | -------------------------------------------------------------------------------- /playground/src/pull-to-refresh/isScrollable.d.ts: -------------------------------------------------------------------------------- 1 | import { DIRECTION } from './types'; 2 | /** 3 | * Returns whether a given element or any of its ancestors (up to rootElement) is scrollable in a given direction. 4 | */ 5 | export declare function isTreeScrollable(element: HTMLElement, direction: DIRECTION): boolean; 6 | -------------------------------------------------------------------------------- /playground/src/pull-to-refresh/types.d.ts: -------------------------------------------------------------------------------- 1 | export declare enum DIRECTION { 2 | UP = -1, 3 | DOWN = 1 4 | } 5 | -------------------------------------------------------------------------------- /playground/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /playground/src/serviceWorker.ts: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.1/8 is considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | type Config = { 24 | onSuccess?: (registration: ServiceWorkerRegistration) => void; 25 | onUpdate?: (registration: ServiceWorkerRegistration) => void; 26 | }; 27 | 28 | export function register(config?: Config) { 29 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 30 | // The URL constructor is available in all browsers that support SW. 31 | const publicUrl = new URL( 32 | (process as { env: { [key: string]: string } }).env.PUBLIC_URL, 33 | window.location.href 34 | ); 35 | if (publicUrl.origin !== window.location.origin) { 36 | // Our service worker won't work if PUBLIC_URL is on a different origin 37 | // from what our page is served on. This might happen if a CDN is used to 38 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 39 | return; 40 | } 41 | 42 | window.addEventListener('load', () => { 43 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 44 | 45 | if (isLocalhost) { 46 | // This is running on localhost. Let's check if a service worker still exists or not. 47 | checkValidServiceWorker(swUrl, config); 48 | 49 | // Add some additional logging to localhost, pointing developers to the 50 | // service worker/PWA documentation. 51 | navigator.serviceWorker.ready.then(() => { 52 | console.log( 53 | 'This web app is being served cache-first by a service ' + 54 | 'worker. To learn more, visit https://bit.ly/CRA-PWA' 55 | ); 56 | }); 57 | } else { 58 | // Is not localhost. Just register service worker 59 | registerValidSW(swUrl, config); 60 | } 61 | }); 62 | } 63 | } 64 | 65 | function registerValidSW(swUrl: string, config?: Config) { 66 | navigator.serviceWorker 67 | .register(swUrl) 68 | .then(registration => { 69 | registration.onupdatefound = () => { 70 | const installingWorker = registration.installing; 71 | if (installingWorker == null) { 72 | return; 73 | } 74 | installingWorker.onstatechange = () => { 75 | if (installingWorker.state === 'installed') { 76 | if (navigator.serviceWorker.controller) { 77 | // At this point, the updated precached content has been fetched, 78 | // but the previous service worker will still serve the older 79 | // content until all client tabs are closed. 80 | console.log( 81 | 'New content is available and will be used when all ' + 82 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' 83 | ); 84 | 85 | // Execute callback 86 | if (config && config.onUpdate) { 87 | config.onUpdate(registration); 88 | } 89 | } else { 90 | // At this point, everything has been precached. 91 | // It's the perfect time to display a 92 | // "Content is cached for offline use." message. 93 | console.log('Content is cached for offline use.'); 94 | 95 | // Execute callback 96 | if (config && config.onSuccess) { 97 | config.onSuccess(registration); 98 | } 99 | } 100 | } 101 | }; 102 | }; 103 | }) 104 | .catch(error => { 105 | console.error('Error during service worker registration:', error); 106 | }); 107 | } 108 | 109 | function checkValidServiceWorker(swUrl: string, config?: Config) { 110 | // Check if the service worker can be found. If it can't reload the page. 111 | fetch(swUrl) 112 | .then(response => { 113 | // Ensure service worker exists, and that we really are getting a JS file. 114 | const contentType = response.headers.get('content-type'); 115 | if ( 116 | response.status === 404 || 117 | (contentType != null && contentType.indexOf('javascript') === -1) 118 | ) { 119 | // No service worker found. Probably a different app. Reload the page. 120 | navigator.serviceWorker.ready.then(registration => { 121 | registration.unregister().then(() => { 122 | window.location.reload(); 123 | }); 124 | }); 125 | } else { 126 | // Service worker found. Proceed as normal. 127 | registerValidSW(swUrl, config); 128 | } 129 | }) 130 | .catch(() => { 131 | console.log( 132 | 'No internet connection found. App is running in offline mode.' 133 | ); 134 | }); 135 | } 136 | 137 | export function unregister() { 138 | if ('serviceWorker' in navigator) { 139 | navigator.serviceWorker.ready.then(registration => { 140 | registration.unregister(); 141 | }); 142 | } 143 | } 144 | -------------------------------------------------------------------------------- /playground/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "module": "esnext", 16 | "moduleResolution": "node", 17 | "resolveJsonModule": true, 18 | "isolatedModules": true, 19 | "noEmit": true, 20 | "jsx": "react" 21 | }, 22 | "include": [ 23 | "src" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import typescript from 'rollup-plugin-typescript2'; 2 | import del from 'rollup-plugin-delete'; 3 | import postcss from 'rollup-plugin-postcss'; 4 | import pkg from './package.json'; 5 | 6 | export default [ 7 | { 8 | input: 'src/index.ts', 9 | output: [ 10 | { 11 | file: 'playground/src/pull-to-refresh/index.js', 12 | format: 'esm', 13 | banner: '/* eslint-disable */', 14 | }, 15 | { file: pkg.main, format: 'cjs' }, 16 | { file: pkg.module, format: 'esm' }, 17 | ], 18 | plugins: [ 19 | del({ targets: ['build/*', 'playground/src/pull-to-refresh'] }), 20 | typescript(), 21 | postcss({ 22 | plugins: [], 23 | }), 24 | ], 25 | external: Object.keys(pkg.peerDependencies || {}), 26 | }, 27 | ]; 28 | -------------------------------------------------------------------------------- /src/components/pull-to-refresh.tsx: -------------------------------------------------------------------------------- 1 | import React, { useRef, useEffect } from 'react'; 2 | import { isTreeScrollable } from '../isScrollable'; 3 | import RefreshingContent from './refreshing-content'; 4 | import PullingContent from './pulling-content'; 5 | import { DIRECTION } from '../types'; 6 | import '../styles/main.scss'; 7 | 8 | interface PullToRefreshProps { 9 | isPullable?: boolean; 10 | canFetchMore?: boolean; 11 | onRefresh: () => Promise; 12 | onFetchMore?: () => Promise; 13 | refreshingContent?: JSX.Element | string; 14 | pullingContent?: JSX.Element | string; 15 | children: JSX.Element; 16 | pullDownThreshold?: number; 17 | fetchMoreThreshold?: number; 18 | maxPullDownDistance?: number; 19 | resistance?: number; 20 | backgroundColor?: string; 21 | className?: string; 22 | } 23 | 24 | const PullToRefresh: React.FC = ({ 25 | isPullable = true, 26 | canFetchMore = false, 27 | onRefresh, 28 | onFetchMore, 29 | refreshingContent = , 30 | pullingContent = , 31 | children, 32 | pullDownThreshold = 67, 33 | fetchMoreThreshold = 100, 34 | maxPullDownDistance = 95, // max distance to scroll to trigger refresh 35 | resistance = 1, 36 | backgroundColor, 37 | className = '', 38 | }) => { 39 | const containerRef = useRef(null); 40 | const childrenRef = useRef(null); 41 | const pullDownRef = useRef(null); 42 | const fetchMoreRef = useRef(null); 43 | let pullToRefreshThresholdBreached: boolean = false; 44 | let fetchMoreTresholdBreached: boolean = false; // if true, fetchMore loader is displayed 45 | let isDragging: boolean = false; 46 | let startY: number = 0; 47 | let currentY: number = 0; 48 | 49 | useEffect(() => { 50 | if (!isPullable || !childrenRef || !childrenRef.current) return; 51 | const childrenEl = childrenRef.current; 52 | childrenEl.addEventListener('touchstart', onTouchStart, { passive: true }); 53 | childrenEl.addEventListener('mousedown', onTouchStart); 54 | childrenEl.addEventListener('touchmove', onTouchMove, { passive: false }); 55 | childrenEl.addEventListener('mousemove', onTouchMove); 56 | window.addEventListener('scroll', onScroll); 57 | childrenEl.addEventListener('touchend', onEnd); 58 | childrenEl.addEventListener('mouseup', onEnd); 59 | document.body.addEventListener('mouseleave', onEnd); 60 | 61 | return () => { 62 | childrenEl.removeEventListener('touchstart', onTouchStart); 63 | childrenEl.removeEventListener('mousedown', onTouchStart); 64 | childrenEl.removeEventListener('touchmove', onTouchMove); 65 | childrenEl.removeEventListener('mousemove', onTouchMove); 66 | window.removeEventListener('scroll', onScroll); 67 | childrenEl.removeEventListener('touchend', onEnd); 68 | childrenEl.removeEventListener('mouseup', onEnd); 69 | document.body.removeEventListener('mouseleave', onEnd); 70 | }; 71 | }, [ 72 | children, 73 | isPullable, 74 | onRefresh, 75 | pullDownThreshold, 76 | maxPullDownDistance, 77 | canFetchMore, 78 | fetchMoreThreshold, 79 | ]); 80 | 81 | /** 82 | * Check onMount / canFetchMore becomes true 83 | * if fetchMoreThreshold is already breached 84 | */ 85 | useEffect(() => { 86 | /** 87 | * Check if it is already in fetching more state 88 | */ 89 | if (!containerRef?.current) return; 90 | const isAlreadyFetchingMore = containerRef.current.classList.contains( 91 | 'ptr--fetch-more-treshold-breached' 92 | ); 93 | if (isAlreadyFetchingMore) return; 94 | /** 95 | * Proceed 96 | */ 97 | if (canFetchMore && getScrollToBottomValue() < fetchMoreThreshold && onFetchMore) { 98 | containerRef.current.classList.add('ptr--fetch-more-treshold-breached'); 99 | fetchMoreTresholdBreached = true; 100 | onFetchMore().then(initContainer).catch(initContainer); 101 | } 102 | }, [canFetchMore, children]); 103 | 104 | /** 105 | * Returns distance to bottom of the container 106 | */ 107 | const getScrollToBottomValue = (): number => { 108 | if (!childrenRef || !childrenRef.current) return -1; 109 | const scrollTop = window.scrollY; // is the pixels hidden in top due to the scroll. With no scroll its value is 0. 110 | const scrollHeight = childrenRef.current.scrollHeight; // is the pixels of the whole container 111 | return scrollHeight - scrollTop - window.innerHeight; 112 | }; 113 | 114 | const initContainer = (): void => { 115 | requestAnimationFrame(() => { 116 | /** 117 | * Reset Styles 118 | */ 119 | if (childrenRef.current) { 120 | childrenRef.current.style.overflowX = 'hidden'; 121 | childrenRef.current.style.overflowY = 'auto'; 122 | childrenRef.current.style.transform = `unset`; 123 | } 124 | if (pullDownRef.current) { 125 | pullDownRef.current.style.opacity = '0'; 126 | } 127 | if (containerRef.current) { 128 | containerRef.current.classList.remove('ptr--pull-down-treshold-breached'); 129 | containerRef.current.classList.remove('ptr--dragging'); 130 | containerRef.current.classList.remove('ptr--fetch-more-treshold-breached'); 131 | } 132 | 133 | if (pullToRefreshThresholdBreached) pullToRefreshThresholdBreached = false; 134 | if (fetchMoreTresholdBreached) fetchMoreTresholdBreached = false; 135 | }); 136 | }; 137 | 138 | const onTouchStart = (e: MouseEvent | TouchEvent): void => { 139 | isDragging = false; 140 | if (e instanceof MouseEvent) { 141 | startY = e.pageY; 142 | } 143 | if (window.TouchEvent && e instanceof TouchEvent) { 144 | startY = e.touches[0].pageY; 145 | } 146 | currentY = startY; 147 | // Check if element can be scrolled 148 | if (e.type === 'touchstart' && isTreeScrollable(e.target as HTMLElement, DIRECTION.UP)) { 149 | return; 150 | } 151 | // Top non visible so cancel 152 | if (childrenRef.current!.getBoundingClientRect().top < 0) { 153 | return; 154 | } 155 | isDragging = true; 156 | }; 157 | 158 | const onTouchMove = (e: MouseEvent | TouchEvent): void => { 159 | if (!isDragging) { 160 | return; 161 | } 162 | 163 | if (window.TouchEvent && e instanceof TouchEvent) { 164 | currentY = e.touches[0].pageY; 165 | } else { 166 | currentY = (e as MouseEvent).pageY; 167 | } 168 | 169 | containerRef.current!.classList.add('ptr--dragging'); 170 | 171 | if (currentY < startY) { 172 | isDragging = false; 173 | return; 174 | } 175 | 176 | if (e.cancelable) { 177 | e.preventDefault(); 178 | } 179 | 180 | const yDistanceMoved = Math.min((currentY - startY) / resistance, maxPullDownDistance); 181 | 182 | // Limit to trigger refresh has been breached 183 | if (yDistanceMoved >= pullDownThreshold) { 184 | isDragging = true; 185 | pullToRefreshThresholdBreached = true; 186 | containerRef.current!.classList.remove('ptr--dragging'); 187 | containerRef.current!.classList.add('ptr--pull-down-treshold-breached'); 188 | } 189 | 190 | // maxPullDownDistance breached, stop the animation 191 | if (yDistanceMoved >= maxPullDownDistance) { 192 | return; 193 | } 194 | pullDownRef.current!.style.opacity = ((yDistanceMoved) / 65).toString(); 195 | childrenRef.current!.style.overflow = 'visible'; 196 | childrenRef.current!.style.transform = `translate(0px, ${yDistanceMoved}px)`; 197 | pullDownRef.current!.style.visibility = 'visible'; 198 | }; 199 | 200 | const onScroll = (e: Event): void => { 201 | /** 202 | * Check if component has already called onFetchMore 203 | */ 204 | if (fetchMoreTresholdBreached) return; 205 | /** 206 | * Check if user breached fetchMoreThreshold 207 | */ 208 | if (canFetchMore && getScrollToBottomValue() < fetchMoreThreshold && onFetchMore) { 209 | fetchMoreTresholdBreached = true; 210 | containerRef.current!.classList.add('ptr--fetch-more-treshold-breached'); 211 | onFetchMore().then(initContainer).catch(initContainer); 212 | } 213 | }; 214 | 215 | const onEnd = (): void => { 216 | isDragging = false; 217 | startY = 0; 218 | currentY = 0; 219 | 220 | // Container has not been dragged enough, put it back to it's initial state 221 | if (!pullToRefreshThresholdBreached) { 222 | if (pullDownRef.current) pullDownRef.current.style.visibility = 'hidden'; 223 | initContainer(); 224 | return; 225 | } 226 | 227 | if (childrenRef.current) { 228 | childrenRef.current.style.overflow = 'visible'; 229 | childrenRef.current.style.transform = `translate(0px, ${pullDownThreshold}px)`; 230 | } 231 | onRefresh().then(initContainer).catch(initContainer); 232 | }; 233 | 234 | return ( 235 |
236 |
237 |
{refreshingContent}
238 |
{pullingContent}
239 |
240 |
241 | {children} 242 |
243 |
{refreshingContent}
244 |
245 |
246 |
247 | ); 248 | }; 249 | 250 | export default PullToRefresh; 251 | -------------------------------------------------------------------------------- /src/components/pulling-content.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const PullingContent = () => { 4 | return ( 5 |
6 |

↧  pull to refresh  ↧

7 |
8 | ); 9 | }; 10 | 11 | export default PullingContent; 12 | -------------------------------------------------------------------------------- /src/components/refreshing-content.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import '../styles/refreshing-content.scss'; 3 | 4 | // Source: https://loading.io/css/ 5 | 6 | const RefreshingContent = () => { 7 | return ( 8 |
9 |
10 |
11 |
12 |
13 |
14 | ); 15 | }; 16 | 17 | export default RefreshingContent; 18 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import PullToRefresh from './components/pull-to-refresh'; 2 | export default PullToRefresh; 3 | -------------------------------------------------------------------------------- /src/isScrollable.ts: -------------------------------------------------------------------------------- 1 | import { DIRECTION } from './types'; 2 | 3 | function isOverflowScrollable(element: HTMLElement): boolean { 4 | const overflowType: string = getComputedStyle(element).overflowY; 5 | if (element === document.scrollingElement && overflowType === 'visible') { 6 | return true; 7 | } 8 | 9 | if (overflowType !== 'scroll' && overflowType !== 'auto') { 10 | return false; 11 | } 12 | 13 | return true; 14 | } 15 | 16 | function isScrollable(element: HTMLElement, direction: DIRECTION): boolean { 17 | if (!isOverflowScrollable(element)) { 18 | return false; 19 | } 20 | 21 | if (direction === DIRECTION.DOWN) { 22 | const bottomScroll = element.scrollTop + element.clientHeight; 23 | return bottomScroll < element.scrollHeight; 24 | } 25 | 26 | if (direction === DIRECTION.UP) { 27 | return element.scrollTop > 0; 28 | } 29 | 30 | throw new Error('unsupported direction'); 31 | } 32 | 33 | /** 34 | * Returns whether a given element or any of its ancestors (up to rootElement) is scrollable in a given direction. 35 | */ 36 | export function isTreeScrollable(element: HTMLElement, direction: DIRECTION): boolean { 37 | if (isScrollable(element, direction)) { 38 | return true; 39 | } 40 | 41 | if (element.parentElement == null) { 42 | return false; 43 | } 44 | 45 | return isTreeScrollable(element.parentElement, direction); 46 | } 47 | -------------------------------------------------------------------------------- /src/styles/main.scss: -------------------------------------------------------------------------------- 1 | .ptr, 2 | .ptr__children { 3 | height: 100%; 4 | width: 100%; 5 | overflow: hidden; 6 | -webkit-overflow-scrolling: touch; 7 | position: relative; 8 | } 9 | 10 | .ptr { 11 | &.ptr--fetch-more-treshold-breached { 12 | .ptr__fetch-more { 13 | display: block; 14 | } 15 | } 16 | } 17 | 18 | .ptr__fetch-more { 19 | display: none; 20 | } 21 | 22 | /** 23 | * Pull down transition 24 | */ 25 | .ptr__children, 26 | .ptr__pull-down { 27 | transition: transform 0.2s cubic-bezier(0, 0, 0.31, 1); 28 | } 29 | 30 | .ptr__pull-down { 31 | position: absolute; 32 | overflow: hidden; 33 | left: 0; 34 | right: 0; 35 | top: 0; 36 | visibility: hidden; 37 | > div { 38 | display: none; 39 | } 40 | } 41 | 42 | .ptr--dragging { 43 | /** 44 | * Hide PullMore content is treshold breached 45 | */ 46 | &.ptr--pull-down-treshold-breached { 47 | .ptr__pull-down--pull-more { 48 | display: none; 49 | } 50 | } 51 | /** 52 | * Otherwize, display content 53 | */ 54 | .ptr__pull-down--pull-more { 55 | display: block; 56 | } 57 | } 58 | 59 | .ptr--pull-down-treshold-breached { 60 | /** 61 | * Force opacity to 1 is pull down trashold breached 62 | */ 63 | .ptr__pull-down { 64 | opacity: 1 !important; 65 | } 66 | /** 67 | * And display loader 68 | */ 69 | .ptr__pull-down--loading { 70 | display: block; 71 | } 72 | } 73 | 74 | .ptr__loader { 75 | margin: 0 auto; 76 | text-align: center; 77 | } 78 | -------------------------------------------------------------------------------- /src/styles/refreshing-content.scss: -------------------------------------------------------------------------------- 1 | .lds-ellipsis { 2 | display: inline-block; 3 | position: relative; 4 | width: 64px; 5 | height: 64px; 6 | } 7 | .lds-ellipsis div { 8 | position: absolute; 9 | top: 27px; 10 | width: 11px; 11 | height: 11px; 12 | border-radius: 50%; 13 | background: rgb(54, 54, 54); 14 | animation-timing-function: cubic-bezier(0, 1, 1, 0); 15 | } 16 | .lds-ellipsis div:nth-child(1) { 17 | left: 6px; 18 | animation: lds-ellipsis1 0.6s infinite; 19 | } 20 | .lds-ellipsis div:nth-child(2) { 21 | left: 6px; 22 | animation: lds-ellipsis2 0.6s infinite; 23 | } 24 | .lds-ellipsis div:nth-child(3) { 25 | left: 26px; 26 | animation: lds-ellipsis2 0.6s infinite; 27 | } 28 | .lds-ellipsis div:nth-child(4) { 29 | left: 45px; 30 | animation: lds-ellipsis3 0.6s infinite; 31 | } 32 | @keyframes lds-ellipsis1 { 33 | 0% { 34 | transform: scale(0); 35 | } 36 | 100% { 37 | transform: scale(1); 38 | } 39 | } 40 | @keyframes lds-ellipsis3 { 41 | 0% { 42 | transform: scale(1); 43 | } 44 | 100% { 45 | transform: scale(0); 46 | } 47 | } 48 | @keyframes lds-ellipsis2 { 49 | 0% { 50 | transform: translate(0, 0); 51 | } 52 | 100% { 53 | transform: translate(19px, 0); 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /src/types.ts: -------------------------------------------------------------------------------- 1 | export enum DIRECTION { 2 | UP = -0b01, 3 | DOWN = 0b01, 4 | } 5 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Basic Options */ 4 | // "incremental": true, /* Enable incremental compilation */ 5 | "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */, 6 | "module": "ESNext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */, 7 | // "lib": [], /* Specify library files to be included in the compilation. */ 8 | // "allowJs": true, /* Allow javascript files to be compiled. */ 9 | // "checkJs": true, /* Report errors in .js files. */ 10 | "jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */, 11 | "declaration": true /* Generates corresponding '.d.ts' file. */, 12 | // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ 13 | // "sourceMap": true, /* Generates corresponding '.map' file. */ 14 | // "outFile": "./", /* Concatenate and emit output to single file. */ 15 | "outDir": "./build" /* Redirect output structure to the directory. */, 16 | // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ 17 | // "composite": true, /* Enable project compilation */ 18 | // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */ 19 | // "removeComments": true, /* Do not emit comments to output. */ 20 | // "noEmit": true, /* Do not emit outputs. */ 21 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */ 22 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ 23 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ 24 | 25 | /* Strict Type-Checking Options */ 26 | "strict": true /* Enable all strict type-checking options. */, 27 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ 28 | // "strictNullChecks": true, /* Enable strict null checks. */ 29 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */ 30 | // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ 31 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ 32 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ 33 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ 34 | 35 | /* Additional Checks */ 36 | // "noUnusedLocals": true, /* Report errors on unused locals. */ 37 | // "noUnusedParameters": true, /* Report errors on unused parameters. */ 38 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 39 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 40 | 41 | /* Module Resolution Options */ 42 | "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */, 43 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ 44 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ 45 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ 46 | // "typeRoots": [], /* List of folders to include type definitions from. */ 47 | // "types": [], /* Type declaration files to be included in compilation. */ 48 | // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ 49 | "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ 50 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ 51 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ 52 | 53 | /* Source Map Options */ 54 | // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ 55 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 56 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ 57 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ 58 | 59 | /* Experimental Options */ 60 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ 61 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ 62 | }, 63 | "include": ["src/**/*", "src/.styled.ts"] 64 | } 65 | --------------------------------------------------------------------------------