├── .nvmrc ├── index.js ├── .eslintignore ├── demo.gif ├── .babelrc ├── .gitattributes ├── src ├── enzymeSetup.js ├── item.js ├── expectUtils.js ├── __snapshots__ │ └── index.spec.jsx.snap ├── Hint.css ├── touch.svg ├── generateStyles.js ├── index.jsx └── index.spec.jsx ├── .gitignore ├── .eslintrc.json ├── webpack.config.js ├── LICENSE ├── .travis.yml ├── package.json ├── CHANGELOG.md └── README.md /.nvmrc: -------------------------------------------------------------------------------- 1 | lts/* -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./dist/index'); -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | dist/index.js 2 | src/enzymeSetup.js 3 | __snapshots__/ -------------------------------------------------------------------------------- /demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darenju/react-flip-page/HEAD/demo.gif -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env", "@babel/preset-react"] 3 | } 4 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=lf 2 | *.js text eol=lf 3 | *.json text eol=lf 4 | *.sh text eol=lf 5 | *.env text eol=lf 6 | *.md text eol=lf -------------------------------------------------------------------------------- /src/enzymeSetup.js: -------------------------------------------------------------------------------- 1 | import { configure } from 'enzyme'; 2 | import Adapter from 'enzyme-adapter-react-16'; 3 | 4 | configure({ adapter: new Adapter() }); 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.swp 2 | *~ 3 | *.iml 4 | .*.haste_cache.* 5 | .DS_Store 6 | .idea 7 | npm-debug.log 8 | node_modules 9 | dist/ 10 | coverage/ 11 | __snapshots__ 12 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "airbnb", 3 | "parser": "babel-eslint", 4 | "env": { 5 | "browser": true, 6 | "jest": true 7 | }, 8 | "rules": { 9 | "react/destructuring-assignment": 0 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/item.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | class FlipPageItem extends React.PureComponent { 5 | render() { 6 | const { component } = this.props; 7 | return component; 8 | } 9 | } 10 | 11 | FlipPageItem.propTypes = { 12 | component: PropTypes.node.isRequired, 13 | }; 14 | 15 | export default FlipPageItem; 16 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const TerserPlugin = require('terser-webpack-plugin'); 3 | 4 | module.exports = { 5 | context: path.resolve('src'), 6 | entry: { 7 | app: './index.jsx' 8 | }, 9 | mode: 'production', 10 | output: { 11 | path: path.resolve('dist'), 12 | filename: 'index.js', 13 | libraryTarget: 'umd', 14 | library: 'ReactFlipPage' 15 | }, 16 | optimization: { 17 | minimize: true, 18 | minimizer: [new TerserPlugin()], 19 | }, 20 | module: { 21 | rules: [ 22 | { 23 | test: /\.jsx?$/, 24 | include: [/src/], 25 | exclude: /node_modules/, 26 | loader: 'babel-loader' 27 | }, 28 | { 29 | test: /\.css$/, 30 | use: ['style-loader', 'css-loader'] 31 | }, 32 | { 33 | test: /\.svg$/, 34 | use: { 35 | loader: 'svg-url-loader', 36 | options: { 37 | stripdeclarations: true 38 | } 39 | } 40 | } 41 | ] 42 | }, 43 | externals: { 44 | 'react': 'react' 45 | } 46 | }; 47 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2018 Julien Fradin 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/expectUtils.js: -------------------------------------------------------------------------------- 1 | module.exports.expectTurnRight = (wrapper) => { 2 | let state = wrapper.state(); 3 | expect(state.secondHalfStyle.transform).toMatch(/rotateY\(-180deg\)$/); 4 | 5 | jest.runOnlyPendingTimers(); 6 | state = wrapper.state(); 7 | 8 | expect(state.secondHalfStyle).toEqual({}); 9 | }; 10 | 11 | module.exports.expectTurnLeft = (wrapper) => { 12 | let state = wrapper.state(); 13 | expect(state.firstHalfStyle.transform).toMatch(/rotateY\(180deg\)$/); 14 | 15 | jest.runOnlyPendingTimers(); 16 | state = wrapper.state(); 17 | 18 | expect(state.firstHalfStyle).toEqual({}); 19 | }; 20 | 21 | 22 | module.exports.expectTurnTop = (wrapper) => { 23 | let state = wrapper.state(); 24 | expect(state.firstHalfStyle.transform).toMatch(/rotateX\(-180deg\)$/); 25 | 26 | jest.runOnlyPendingTimers(); 27 | state = wrapper.state(); 28 | 29 | expect(state.firstHalfStyle).toEqual({}); 30 | }; 31 | module.exports.expectTurnBottom = (wrapper) => { 32 | let state = wrapper.state(); 33 | expect(state.secondHalfStyle.transform).toMatch(/rotateX\(180deg\)$/); 34 | 35 | jest.runOnlyPendingTimers(); 36 | state = wrapper.state(); 37 | 38 | expect(state.secondHalfStyle).toEqual({}); 39 | }; 40 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | os: linux 4 | cache: 5 | directories: 6 | - node_modules 7 | before_install: 8 | - "[[ $(node -v) =~ ^v9.*$ ]] || npm install -g npm@latest" 9 | - npm install -g greenkeeper-lockfile@1 10 | - npm install 11 | before_script: greenkeeper-lockfile-update 12 | after_script: greenkeeper-lockfile-upload 13 | script: 14 | - npm run lint 15 | - npm test -- --coverage 16 | - bash <(curl -s https://codecov.io/bash) || echo 'Codecov failed to upload' 17 | - npm run build 18 | deploy: 19 | provider: npm 20 | skip_cleanup: true 21 | email: julien@frad.in 22 | api_key: 23 | secure: MkPT9UrpFHHQGuacivNcaiPsRaButLLuA3TemtvGpkz7vc4vhJaJQZLx/uFqmxogiVr1We5RcGC4KPQsLQd1T9mLXgDTgnhhDdmdlJ8AxOeYMGWWg5MKOdO6yWbdQVyWk3Ae3+GZvDUVlIYZi+595Qczgq5fWJb8HM9cOGqRuBgoK3O/S6VZ0tNxrTytDLvIr78eWuu9oiyNHz08PYSx8hkHlcoZpZgWUA6N0HJQcwwhRysgU1BkQw0B8pVAhdXfvRolgtCyui/cZOmVPhMtpnnOrQ3XRbqT0dMVllwxf0YGz3sg9eTwlSbx3zMaB0IZsfY/rlnzxJKSV1S2ZEqAGXlDnrFigtU27xLsHZwzlb0cTDeK+iKc/Or4qE5UKVFptHC0l0d7S00Sj9q/rKWjgRncBqJzPflB6EPT7kJbq0sXloitWZz6Ns8W7xSBxtXUbhZQx/1cVPadn6rVvRgu9Yo0wf/Eni9ySSuQmTeaTpQ8IXsmhzHlIwAP7eerjJZeo7nkf2ctTR+o+mDp9h6xtEG3mszTF6T2dJt7XHGz97f21Ybdg9pFlOJwyz8uG5k5f1Afe4FinaYXCuX3p5YY68J4waLf2hukX/HDi+yldjPsC3mxnLGESi7bm+A6Z/Qd5dg/YSs/0/7DkoP4of2NBNDLSz41AGWdXGMCIcVAf9M= 24 | on: 25 | tags: true 26 | notifications: 27 | email: false 28 | -------------------------------------------------------------------------------- /src/__snapshots__/index.spec.jsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[` renders without crashing 1`] = `"
"`; 4 | 5 | exports[` should include two touch zones 1`] = `"
"`; 6 | 7 | exports[` should include a touch hint element 1`] = `"
"`; 8 | 9 | exports[` should not have gradient elements 1`] = `"
"`; 10 | 11 | exports[` should allow "horizontal" as an orientation entry 1`] = `"
"`; 12 | 13 | exports[` should allow "vertical" as an orientation entry 1`] = `"
"`; 14 | 15 | exports[` should include a swipe hint element 1`] = `"
"`; 16 | 17 | exports[` should not include a touch hint element 1`] = `"
"`; 18 | -------------------------------------------------------------------------------- /src/Hint.css: -------------------------------------------------------------------------------- 1 | .rfp-swipeHint { 2 | animation: 2s ease-in-out rfp-swipeHint-vertical 2; 3 | background-color: rgba(255,255,255,0.5); 4 | border-radius: 15px; 5 | box-sizing: border-box; 6 | height: 30px; 7 | opacity: 0; 8 | pointer-events: none; 9 | position: absolute; 10 | width: 30px; 11 | } 12 | .rfp-swipeHint--vertical { 13 | animation-name: rfp-swipeHint-vertical; 14 | bottom: 20%; 15 | left: 50%; 16 | margin-left: -15px; 17 | } 18 | .rfp-swipeHint--horizontal { 19 | animation-name: rfp-swipeHint-horizontal; 20 | margin-top: -15px; 21 | right: 20%; 22 | top: 50%; 23 | } 24 | .rfp-swipeHint:before { 25 | border-radius: 15px; 26 | border: 3px double rgba(255,255,255,0.5); 27 | box-sizing: border-box; 28 | content: ''; 29 | height: 28px; 30 | position: absolute; 31 | width: 28px; 32 | } 33 | .rfp-swipeHint--vertical:before { 34 | left: 50%; 35 | margin-left: -14px; 36 | top: 1px; 37 | } 38 | .rfp-swipeHint--horizontal:before { 39 | left: 1px; 40 | top: 1px; 41 | } 42 | .rfp-touchHint { 43 | animation: 2s ease-in-out rfp-touchHint 2; 44 | opacity: 0; 45 | pointer-events: none; 46 | position: absolute; 47 | z-index: 5; 48 | } 49 | .rfp-touchHint--vertical { 50 | bottom: 5px; 51 | left: 50%; 52 | margin-left: -12px; 53 | } 54 | .rfp-touchHint--horizontal { 55 | margin-top: -14px; 56 | right: 5px; 57 | top: 50%; 58 | } 59 | .rfp-touchHint:after, .rfp-swipeHint:after { 60 | content: url(./touch.svg); 61 | } 62 | .rfp-swipeHint:after { 63 | position: absolute; 64 | top: 11px; 65 | left: 6px; 66 | } 67 | @keyframes rfp-swipeHint-vertical { 68 | 0% { 69 | opacity: 0; 70 | height: 30px; 71 | } 72 | 20%, 40% { 73 | opacity: 1; 74 | height: 30px; 75 | } 76 | 60%, 80% { 77 | opacity: 1; 78 | height: 60%; 79 | } 80 | 100% { 81 | opacity: 0; 82 | height: 60%; 83 | } 84 | } 85 | @keyframes rfp-swipeHint-horizontal { 86 | 0% { 87 | opacity: 0; 88 | width: 30px; 89 | } 90 | 20%, 40% { 91 | opacity: 1; 92 | width: 30px; 93 | } 94 | 60%, 80% { 95 | opacity: 1; 96 | width: 60%; 97 | } 98 | 100% { 99 | opacity: 0; 100 | width: 60%; 101 | } 102 | } 103 | @keyframes rfp-touchHint { 104 | 0% { 105 | opacity: 0; 106 | } 107 | 20% { 108 | opacity: 1; 109 | } 110 | 40%,60% { 111 | transform: scale(0.75); 112 | } 113 | 80% { 114 | opacity: 1; 115 | } 116 | 100% { 117 | opacity: 0; 118 | } 119 | } 120 | -------------------------------------------------------------------------------- /src/touch.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | touch 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-flip-page", 3 | "version": "1.6.4", 4 | "description": "A React.js implementation of the Flipboard page swipe.", 5 | "main": "dist/index.js", 6 | "files": [ 7 | "dist/" 8 | ], 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/darenju/react-flip-page.git" 12 | }, 13 | "author": "Julien Fradin", 14 | "contributors": [ 15 | "Everton Nikolas de Oliveira (https://br.linkedin.com/in/enikolas/en)", 16 | "Dmitry Buravtsov (https://github.com/DimaBur)", 17 | "slevy85 (https://github.com/slevy85)", 18 | "Konstantin Komelin (https://komelin.com/)" 19 | ], 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/darenju/react-flip-page/issues" 23 | }, 24 | "homepage": "https://github.com/darenju/react-flip-page", 25 | "keywords": [ 26 | "react-component", 27 | "react", 28 | "flip", 29 | "flip-page", 30 | "page", 31 | "flipboard" 32 | ], 33 | "scripts": { 34 | "prebuild": "check-dependencies", 35 | "pretest": "check-dependencies", 36 | "build": "webpack", 37 | "lint": "eslint --ext .jsx --ext .js --ignore-pattern *spec* --quiet src/", 38 | "test": "jest -u", 39 | "test:coverage": "jest --coverage" 40 | }, 41 | "precommit": [ 42 | "lint", 43 | "test" 44 | ], 45 | "jest": { 46 | "setupTestFrameworkScriptFile": "/src/enzymeSetup.js", 47 | "moduleNameMapper": { 48 | "\\.(css|svg)$": "identity-obj-proxy" 49 | }, 50 | "coverageDirectory": "coverage", 51 | "coveragePathIgnorePatterns": [ 52 | "/dist/", 53 | "/src/enzymeSetup.js" 54 | ], 55 | "testURL": "http://localhost" 56 | }, 57 | "dependencies": { 58 | "prop-types": "^15.6.2", 59 | "react": "^16.8.4", 60 | "react-dom": "^16.8.4" 61 | }, 62 | "devDependencies": { 63 | "@babel/core": "^7.9.0", 64 | "@babel/preset-env": "^7.9.5", 65 | "@babel/preset-react": "^7.9.4", 66 | "@babel/register": "^7.9.0", 67 | "babel-core": "^7.0.0-bridge.0", 68 | "babel-eslint": "^10.0.1", 69 | "babel-jest": "^23.6.0", 70 | "babel-loader": "8.1.0", 71 | "check-dependencies": "^1.1.0", 72 | "css-loader": "^3.0.0", 73 | "enzyme": "^3.6.0", 74 | "enzyme-adapter-react-16": "^1.5.0", 75 | "eslint": "^6.0.0", 76 | "eslint-config-airbnb": "^18.0.1", 77 | "eslint-plugin-import": "^2.13.0", 78 | "eslint-plugin-jsx-a11y": "^6.1.0", 79 | "eslint-plugin-react": "^7.10.0", 80 | "identity-obj-proxy": "^3.0.0", 81 | "jest": "^23.5.0", 82 | "path": "^0.12.7", 83 | "pre-commit": "^1.2.2", 84 | "style-loader": "^1.0.0", 85 | "svg-url-loader": "^5.0.0", 86 | "terser-webpack-plugin": "^3.0.2", 87 | "webpack": "^4.15.1", 88 | "webpack-cli": "^3.0.0" 89 | }, 90 | "peerDependencies": { 91 | "react-dom": "^16.2.0" 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /src/generateStyles.js: -------------------------------------------------------------------------------- 1 | const makeGradient = (direction) => `linear-gradient(to ${direction}, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 50px)`; 2 | 3 | export default ( 4 | currentPage, 5 | key, 6 | direction, 7 | rotate, 8 | uncutPages, 9 | orientation, 10 | maskOpacity, 11 | pageBackground, 12 | animationDuration, 13 | ) => ({ 14 | container: { 15 | display: currentPage === key ? 'block' : 'none', 16 | height: '100%', 17 | overflow: uncutPages === false ? 'hidden' : '', 18 | position: 'relative', 19 | touchAction: 'none', 20 | width: '100%', 21 | }, 22 | part: { 23 | position: 'absolute', 24 | }, 25 | visiblePart: { 26 | transformStyle: 'preserve-3d', 27 | }, 28 | firstHalf: { 29 | bottom: orientation === 'vertical' ? '50%' : 0, 30 | left: 0, 31 | right: orientation === 'vertical' ? 0 : '50%', 32 | top: 0, 33 | transformOrigin: orientation === 'vertical' ? 'bottom center' : 'right center', 34 | }, 35 | secondHalf: { 36 | bottom: 0, 37 | left: orientation === 'vertical' ? 0 : '50%', 38 | right: 0, 39 | top: orientation === 'vertical' ? '50%' : 0, 40 | transformOrigin: orientation === 'vertical' ? 'top center' : 'left center', 41 | }, 42 | face: { 43 | backfaceVisibility: 'hidden', 44 | WebkitBackfaceVisibility: 'hidden', 45 | bottom: 0, 46 | left: 0, 47 | overflow: 'hidden', 48 | position: 'absolute', 49 | right: 0, 50 | top: 0, 51 | transformStyle: 'preserve-3d', 52 | }, 53 | back: { 54 | transform: orientation === 'vertical' ? 'rotateX(180deg)' : 'rotateY(180deg)', 55 | }, 56 | before: { 57 | bottom: 0, 58 | left: 0, 59 | right: 0, 60 | top: 0, 61 | }, 62 | after: { 63 | bottom: 0, 64 | left: orientation === 'vertical' ? 0 : '50%', 65 | right: 0, 66 | top: orientation === 'vertical' ? '50%' : 0, 67 | }, 68 | cut: { 69 | background: pageBackground, 70 | bottom: 0, 71 | left: 0, 72 | overflow: 'hidden', 73 | position: 'absolute', 74 | right: 0, 75 | top: 0, 76 | }, 77 | firstCut: { 78 | right: orientation === 'vertical' ? 0 : '-100%', 79 | }, 80 | pull: { 81 | left: orientation === 'vertical' ? 0 : '-100%', 82 | position: 'absolute', 83 | height: '100%', 84 | right: 0, 85 | top: orientation === 'vertical' ? '-100%' : 0, 86 | }, 87 | gradient: { 88 | bottom: 0, 89 | left: 0, 90 | pointerEvents: 'none', 91 | position: 'absolute', 92 | right: 0, 93 | top: 0, 94 | transition: `opacity ${animationDuration / 1000}s ease-in-out`, 95 | opacity: (() => { 96 | if (direction) { 97 | return 1; 98 | } 99 | return 0; 100 | })(), 101 | }, 102 | gradientBefore: { 103 | background: (() => { 104 | if (direction === 'right') { 105 | return makeGradient('left'); 106 | } 107 | if (direction === 'down') { 108 | return makeGradient('top'); 109 | } 110 | 111 | return ''; 112 | })(), 113 | width: (() => { 114 | if (orientation === 'horizontal') { 115 | return '50%'; 116 | } 117 | return '100%'; 118 | })(), 119 | height: (() => { 120 | if (orientation === 'vertical') { 121 | return '50%'; 122 | } 123 | return '100%'; 124 | })(), 125 | }, 126 | gradientAfter: { 127 | background: (() => { 128 | if (direction === 'left') { 129 | return makeGradient('right'); 130 | } 131 | if (direction === 'up') { 132 | return makeGradient('bottom'); 133 | } 134 | 135 | return ''; 136 | })(), 137 | }, 138 | gradientFirstHalf: { 139 | background: (() => { 140 | if (direction === 'left') { 141 | return makeGradient('left'); 142 | } if (direction === 'up') { 143 | return makeGradient('top'); 144 | } 145 | 146 | return ''; 147 | })(), 148 | }, 149 | gradientSecondHalf: { 150 | background: (() => { 151 | if (direction === 'right') { 152 | return makeGradient('right'); 153 | } if (direction === 'down') { 154 | return makeGradient('bottom'); 155 | } 156 | 157 | return ''; 158 | })(), 159 | }, 160 | mask: { 161 | backgroundColor: '#000', 162 | bottom: 0, 163 | left: 0, 164 | opacity: direction !== '' ? Math.max(maskOpacity - ((Math.abs(rotate) / 90) * maskOpacity), 0) : 0, 165 | pointerEvents: 'none', 166 | position: 'absolute', 167 | right: 0, 168 | top: 0, 169 | }, 170 | maskReverse: { 171 | opacity: direction !== '' ? Math.max(((Math.abs(rotate) / 90) * maskOpacity) - maskOpacity, 0) : 0, 172 | }, 173 | }); 174 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | 2 | # Changelog 3 | 4 | All notable changes to this project will be documented in this file. 5 | 6 | The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) 7 | and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). 8 | 9 | ## 1.6.0 10 | 11 | ### Added 12 | 13 | - Added a `noShadow` property that disables the inset drop shadow (which is in fact a gradient) on the inside of the flipping pages. 14 | 15 | ## 1.5.3 16 | 17 | ### Fixed 18 | 19 | - Fixed the method to get the mouse/touch position. 20 | 21 | ## 1.5.2 22 | 23 | ### Fixed 24 | 25 | - Fixed an event confusion in the `swipeImmune` feature. 26 | 27 | ## 1.5.1 28 | 29 | ### Fixed 30 | 31 | - Fixed the `swipeImmune` detection condition. 32 | 33 | ## 1.5.0 34 | 35 | ### Added 36 | 37 | - Added a `swipeImmune` property thanks to **@slevy85**. This property is an arary of CSS classes that makes the elements targeted by those classes immune to the swipe. This means the user can not initiate a swipe gesture from those elements. 38 | 39 | ### Fixed 40 | 41 | - The `flipOnTouch` buttons were not working anymore due to some asynchronous refactoring. 42 | 43 | ## 1.4.0 44 | 45 | ### Added 46 | 47 | - Added a `reverse` property thanks to **@slevy85**. The property allows the user to swipe pages in reverse order: the first page is visible, to see the second page, he has to swipe down instead of up. 48 | 49 | ### Fixed 50 | 51 | - Tests were not working anymore. Added `babel-core@^7.0.0-bridge.0` and `babel-jest` in `devDependencies`. 52 | 53 | ## 1.3.0 54 | 55 | ### Fixed 56 | 57 | - Fixed the swiping not being correctly registered. 58 | 59 | ## 1.2.2 60 | 61 | ### Fixed 62 | 63 | - Fixed `gotoPreviousPage` & `gotoNextPage` method spam. 64 | - Fixed right side of component being cut off. 65 | 66 | ## 1.2.1 67 | 68 | ### Fixed 69 | 70 | - Condition in `gotoPage` method for checking inbounds of index was wrong, did not allow to go to first page (index `0`). 71 | 72 | ## 1.2.0 73 | 74 | ### Changed 75 | 76 | - Call `onStartSwiping` after treshold is reached. 77 | 78 | ## 1.1.0 79 | 80 | ### Added 81 | 82 | - Added `onStartPageChange` event. This event is triggered when the move gesture begins, in opposition to `onPageChange` event which is triggered after the gesture is complete. 83 | 84 | ## 1.0.0 85 | 86 | ### Added 87 | 88 | - Added the list of contributors to the project, finalizing v1.0.0. 89 | 90 | ## 0.18.0 91 | 92 | ### Added 93 | 94 | - Added a `gotoPage` method that takes an index of page in parameter. Places the component to the correct page. 95 | 96 | ## 0.17.0 97 | 98 | ### Changed 99 | 100 | - Changed the way page components are rendered. To limit number of renders, the component now uses `PureComponent`s wrapper (higher-order components) for actual pages. 101 | 102 | ## 0.16.0 103 | 104 | ### Added 105 | 106 | - New property `startAt`. 107 | 108 | ## 0.15.1 109 | 110 | ### Fixed 111 | 112 | - Fixed `onPageChange` not passing the correct page number. 113 | 114 | ## 0.15.0 115 | 116 | ### Added 117 | 118 | - Improve code coverage for `` from `74%` to `99%`. 119 | - `onStartSwiping` and `onEndSwiping` callback. 120 | 121 | ## 0.14.2 122 | 123 | ### Added 124 | 125 | - Improve code coverage for `` from `59%` to `74%`: 126 | - `mouseLeave()`: 100% covered 127 | - `reset()`: 100% covered 128 | - `props.orientation`: 100% covered 129 | - `moveGesture()`: 90% covered (WIP) 130 | 131 | ### Changed 132 | 133 | - Change `eslintrc` run config, as it was given different error outputs based on the OS of the developer. It was basically change `eslint src/**/*.js* --quiet` to `eslint --ext .jsx --ext .js --quiet src/`. 134 | 135 | ## 0.14.1 136 | 137 | ### Fixed 138 | 139 | - `button`s and `a` were not clickable. 140 | 141 | ## 0.14.0 142 | 143 | ### Added 144 | 145 | - `responsive` property (default to `false`) to enable responsive mode. 146 | - Improve code coverage for ``: 147 | - `getHeight()`: 100% covered 148 | - `getHalfHeight()`: 100% covered 149 | - `getWidth()`: 100% covered 150 | - `getHalfWidth()`: 100% covered 151 | - `isLastPage()`: 100% covered 152 | - `isFirstPage()`: 100% covered 153 | - `incrementPage()`: 100% covered 154 | - `decrementPage()`: 100% covered 155 | - `doNotMove()`: 100% covered 156 | - `startMoving()`: 100% covered 157 | - Fix some lint issues on `index.jsx` 158 | - Add codecov to the project (@darenju still needs setup it to his github repository) 159 | 160 | ### Fixed 161 | 162 | - Replace the code style badge url fron `standardjs` to `airbnb`. 163 | 164 | ## 0.13.1 165 | ### Added 166 | 167 | - Added mask on previous/next parts. This way if you go to the drop area, you will see the shadow of the page. This only happened when lifting the page. 168 | 169 | ### Fixed 170 | 171 | - Shadows were not displayed on some parts when swiping. The fix for non-clickable links had caused this. 172 | 173 | ## 0.13.0 174 | ### Added 175 | 176 | - `showTouchHint` property that shows a pointer indicating where to click or touch to switch pages. 177 | 178 | ### Changed 179 | 180 | - `flipOnTouchAllowDrag` has been renamed to `disableSwipe`. By default, the swipe is always allowed with `flipOnTouch`, unless `disableSwipe` is specified. 181 | - `showTouchHint` has been renamed to `showSwipeHint` to avoid confusion. 182 | - Changed default `flipOnTouchZone` from `20` to `10`. 183 | 184 | ### Removed 185 | 186 | - Removed `touchHintTimeout`, `touchHintTimeoutTimer`, `showTouchHint`, `hintVisible` as they were useless. 187 | 188 | ## 0.12.2 189 | ### Added 190 | 191 | - `flipOnTouchAllowDrag` propery allowing the user to keep the dragging feature even though `flipOnTouch` 192 | is active. 193 | 194 | ## 0.12.1 195 | ### Added 196 | 197 | - Class names on touch zones. 198 | 199 | ## 0.12.0 200 | ### Added 201 | 202 | - Add `flipOnTouch` feature. Zones to touch/click are defined by the `flipOnTouchZone` property. 203 | 204 | ## 0.11.8 205 | ### Added 206 | 207 | - Add `.gitattributes` for windows developers 208 | - Add Jest setup 209 | - Add Enzyme setup 210 | - Add `code coverage` report file 211 | - Add `check-dependencies` to `prebuild` and `pretest` lifecycle. This lib checks if the developer has the up-to-date dependencies inside its node_modules directory, as described in the `package.json` file. 212 | - Add TravisCI and Greenkeeper initial setup (@darenju still needs to setup each of these in his repository) 213 | - Add `pre-commit` which runs lint before each commit 214 | 215 | ### Removed 216 | 217 | - Remove generated code from VCS, as a good practice. The generated code should not be versioned, as it can be checked at [Best Practices for Node.js Development](https://devcenter.heroku.com/articles/node-best-practices#only-git-the-important-bits) 218 | 219 | ### Fixed 220 | 221 | - Temporaly disables lint for a specific line: `src/index.jsx:577:3`. Style is a pretty generic prop, receiving any style the user needs. Ideally, this eslint should be disable if you still have the intent of using this props. Or, the code should be refactored, to match the proper [eslint rule](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/forbid-prop-types.md) 222 | 223 | ## 0.10.3 - 2018-01-29 224 | ### Fixed 225 | - Issue causing the package to switch back to first page all the time. Issue was because package was not updated to react@16. 226 | 227 | ## 0.10.1 - 2017-09-24 228 | ### Fixed 229 | - Adjusted properties types. 230 | 231 | ## 0.10.0 - 2017-09-14 232 | ### Changed 233 | - Now using eslint as code style. 234 | 235 | ## 0.9.1 - 2017-09-04 236 | ### Fixed 237 | - Fixed `showTouchHint` always displaying despite property being defined to `false`. 238 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![npm version](https://badge.fury.io/js/react-flip-page.svg)](https://badge.fury.io/js/react-flip-page) 2 | [![Build Status](https://travis-ci.org/darenju/react-flip-page.svg?branch=master)](https://travis-ci.org/darenju/react-flip-page) 3 | [![codecov](https://codecov.io/gh/darenju/react-flip-page/branch/master/graph/badge.svg)](https://codecov.io/gh/darenju/react-flip-page) 4 | [![Greenkeeper badge](https://badges.greenkeeper.io/darenju/react-flip-page.svg)](https://greenkeeper.io/) 5 | [![JavaScript Style Guide](https://img.shields.io/badge/code%20style-airbnb-brightgreen.svg)](https://github.com/airbnb/javascript) 6 | 7 | # react-flip-page 8 | 9 | > **DISCLAIMER**: This package is in no way related to nor endorsed by Flipboard, Inc. nor [flipboard.com](http://www.flipboard.com). This is just a showcase of HTML5 & CSS3 effect implemented with React. 10 | 11 | This package allows you to use the cool Flipboard page swipe effect in your React.js apps. 12 | 13 | > Please keep in mind that static content will work best with this component. Content like videos and related can produce undesired effects. 14 | 15 | It has a `responsive` option, so you can possibly cover your entire page with it! 16 | 17 | ![Demo GIF](https://raw.githubusercontent.com/darenju/react-flip-page/master/demo.gif) 18 | 19 | You can play with [this demo](http://darenju.me/react-flip-page/). 20 | 21 | ## Install 22 | 23 | Installation is pretty straight-forward, as you just have to `npm install` this package: 24 | 25 | ``` 26 | npm install --save react-flip-page 27 | ``` 28 | 29 | Then, you can require the module with any way you like, let it be webpack or something else. 30 | 31 | ## Usage 32 | 33 | This package consists of one single component that does all the work. Simply throw a `FlipPage` component with some children that will be the content. 34 | 35 | ```html 36 | 37 |
38 |

My awesome first article

39 |

My awesome first content

40 |
41 |
42 |

My wonderful second article

43 |

My wonderful second content

44 |
45 |
46 |

My excellent third article

47 |

My excellent third content

48 |
49 | 50 | ``` 51 | 52 | ### Props 53 | 54 | There are a few properties that define the behaviour of the component, here they are: 55 | 56 | | Prop | Type | Default | Role | 57 | |------|------|---------|------| 58 | | `orientation` | `string` | `vertical` | Orientation of swipes. `vertical` or `horizontal` for respectively up/down swipes and left/right swipes | 59 | | `uncutPages` | `boolean` | `false` | If `true`, the pages will be allowed to overflow through the container. The original effect is to keep everything inside the container, but you can set this to `true` to have a more "bookish" effect. | 60 | | `animationDuration` | `number` | `200` | Duration in ms of the fold/unfold animation | 61 | | `treshold` | `number` | `10` | Distance in px to swipe before the gesture is activated | 62 | | `maxAngle` | `number` | `45` | Angle of the page when there's nothing to display before/after | 63 | | `maskOpacity` | `number` | `0.4` | Opacity of the masks that covers the underneath content | 64 | | `perspective` | `string` | `130em` | Perspective value of the page fold effect. The bigger, the less noticeable | 65 | | `pageBackground` | `string` | `#fff` | Background of the pages. This can be overriden in individual pages by styling the component | 66 | | `firstComponent` | `element` | `null` | Component that will be displayed under the first page | 67 | | `lastComponent` | `element` | `null` | Component that will be displayed under the last page | 68 | | `showHint` | `bool` | `false` | Indicates if the component must hint the user on how it works. Setting this to `true` will lift the bottom of the page 1s after the component is mounted, for 1s | 69 | | `showSwipeHint` | `bool` | `false` | Indicates if the component must hint the user on how it works. Setting this to `true` will show an example of gesture to switch pages | 70 | | `showTouchHint` | `bool` | `false` | Indicates if the component must hint the user on how it works. Setting this to `true` will show a pointer indicating where to click to switch pages. Works with 71 | `flipOnTouch` | 72 | | `style` | `object` | `{}` | Additional style for the flipboard | 73 | | `height` | `number` | `480` | Height for the flipboard | 74 | | `width` | `number` | `320` | Width for the flipboard | 75 | | `onPageChange` | `function` | | Callback when the page has been changed. Parameters: `pageIndex`, `direction` | 76 | | `onStartPageChange` | `function` | | Callback when the page starts to change. Parameters: `oldPageIndex`, `direction` | 77 | | `onStartSwiping` | `function` | | Callback when the user starts swiping | 78 | | `onStopSwiping` | `function` | | Callback when the user stops swiping | 79 | | `className` | `string` | `''` | Optional CSS class to be applied on the container | 80 | | `loopForever` | `boolean` | `false` | If `true` flipping after the last page will return to the first (and visa-versa) | 81 | | `flipOnTouch` | `boolean` | `false` | If `true`, the user can flip pages by touching/clicking a top/bottom or left/right zone. These zones have CSS classes: `rfp-touchZone`, `rfp-touchZone-previous` and `rfp-touchZone-next` so that you can style them | 82 | | `flipOnTouchZone` | `number` | `210` | Percentage of dimensions of the zone to touch/click to flip pages | 83 | | `disableSwipe` | `boolean` | `false` | If `true`, users can't use the swipe feature to switch pages while `flipOnTouch` is enabled. Make sure you enable `flipOnTouch` so they can switch pages, or provide buttons binded to Methods | 84 | | `responsive` | `boolean` | `false` | If `true`, the component will be responsive, meaning it will take all the available space. Place the component in a container before to make sure it is visible | 85 | | `startAt` | `number` | `0` | Default start position of the component | 86 | | `reverse` | `boolean` | `false` | If `true`, the user must swip in reverse order: he must swipe down/right to see the next page, and up/left to see the previous page. | 87 | | `swipeImmune` | `array` | `[]` | This array holds the CSS class names that the user can not initiate a swipe gesture from. | 88 | | `noShadow` | `boolean` | `false` | This disables the inset drop shadow on the inside of the flipping pages. | 89 | 90 | ## Methods 91 | 92 | There are currently three methods that can be called on the component. To call them, you can use the 93 | `ref` attribute in React: 94 | 95 | ```javascript 96 | { this.flipPage = component; }}> 97 | ... 98 | 99 | 100 | this.flipPage.gotoPreviousPage(); 101 | ``` 102 | 103 | ### `gotoPreviousPage()` 104 | 105 | This method triggers the effect and switches to the previous page, if possible. 106 | 107 | ### `gotoNextPage()` 108 | 109 | This method triggers the effect and switches to the next page, if possible. 110 | 111 | ### `gotoPage(page)` 112 | 113 | This methods positions the component to the wanted page index. The `page` argument should be between `0` and the number of pages. If not, a `RangeError` will be thrown. Also note that this does **not** call the `onPageChange` nor the `onStartPageChange` callback. 114 | 115 | ## Contribute 116 | 117 | Since this is an open source project and it's far from perfect, contribution is welcome. Fork the repository and start working on your fix or new feature. Remember, it's good practice to work in your own branch, to avoid painful merge conflicts. 118 | 119 | Once you think your work is ready, fire a [pull request](https://github.com/darenju/react-flip-page/pulls) with an understandable description of what you're bringing to the project. If it's alright, chances are high your work will be merged! 120 | 121 | ## Donate 122 | 123 | This project takes some of my time, and I do it for free. If you're kind enough, you can show your support for my work by making a small donation here: 124 | 125 | [![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](darenju@live.com) 126 | 127 | I would very much appreciate it! 128 | -------------------------------------------------------------------------------- /src/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component, Children } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import FlipPageItem from './item'; 4 | import './Hint.css'; 5 | import generateStyles from './generateStyles'; 6 | 7 | const m = (...objs) => Object.assign({}, ...objs); 8 | 9 | const doNotMove = (e) => { 10 | e.preventDefault(); 11 | }; 12 | 13 | const getPosition = (e) => ({ 14 | posX: e.pageX || e.clientX || (e.touches && e.touches[0].pageX), 15 | posY: e.pageY || e.clientY || (e.touches && e.touches[0].pageY), 16 | }); 17 | 18 | class FlipPage extends Component { 19 | constructor(props) { 20 | super(props); 21 | 22 | this.state = { 23 | page: props.startAt, // current index of page 24 | startY: -1, // start position of swipe 25 | diffY: 0, // diffYerence between last swipe position and current position 26 | timestamp: 0, // time elapsed between two swipes 27 | angle: 0, // rotate angle of half page 28 | rotate: 0, // absolute value of above, limited to 45° if necessary 29 | direction: '', // original swipe direction 30 | lastDirection: '', // last registered swipe direction 31 | secondHalfStyle: {}, // transform style of bottom half 32 | firstHalfStyle: {}, // transform style of top half 33 | canAnimate: true, // should the component animate with the methods? 34 | }; 35 | 36 | // binding events 37 | this.startMoving = this.startMoving.bind(this); 38 | this.moveGesture = this.moveGesture.bind(this); 39 | this.stopMoving = this.stopMoving.bind(this); 40 | this.reset = this.reset.bind(this); 41 | this.mouseLeave = this.mouseLeave.bind(this); 42 | this.incrementPage = this.incrementPage.bind(this); 43 | this.decrementPage = this.decrementPage.bind(this); 44 | this.hasNextPage = this.hasNextPage.bind(this); 45 | this.hasPreviousPage = this.hasPreviousPage.bind(this); 46 | this.turnRightOrDown = this.turnRightOrDown.bind(this); 47 | this.turnLeftOrUp = this.turnLeftOrUp.bind(this); 48 | 49 | this.transition = `transform ${this.props.animationDuration / 1000}s ease-in-out`; 50 | this.onStartSwipingCalled = false; 51 | } 52 | 53 | componentDidMount() { 54 | const { showHint, showSwipeHint } = this.props; 55 | 56 | if (showHint) { 57 | this.hintTimeout = setTimeout(() => this.showHint(), showSwipeHint ? 1800 : 1000); 58 | } 59 | } 60 | 61 | componentWillUnmount() { 62 | clearTimeout(this.hintTimeout); 63 | clearTimeout(this.hintHideTimeout); 64 | } 65 | 66 | getHeight() { 67 | const { responsive } = this.props; 68 | return !responsive ? `${this.props.height}px` : '100%'; 69 | } 70 | 71 | getWidth() { 72 | const { responsive } = this.props; 73 | return !responsive ? `${this.props.width}px` : '100%'; 74 | } 75 | 76 | flatChildren() { 77 | return Array.prototype.flat.call(this.props.children); 78 | } 79 | 80 | isLastPage() { 81 | return this.state.page + 1 === Children.count(this.flatChildren()); 82 | } 83 | 84 | isFirstPage() { 85 | return this.state.page === 0; 86 | } 87 | 88 | showHint() { 89 | const { orientation, perspective } = this.props; 90 | const { transition } = this; 91 | 92 | this.setState({ secondHalfStyle: { transition } }, () => { 93 | this.setState({ 94 | secondHalfStyle: { 95 | transition, 96 | transform: orientation === 'vertical' ? `perspective(${perspective}) rotateX(30deg)` : `perspective(${perspective}) rotateY(-30deg)`, 97 | }, 98 | }); 99 | 100 | const callback = () => this.setState({ secondHalfStyle: { transition } }); 101 | this.hintHideTimeout = setTimeout(callback, 1000); 102 | }); 103 | } 104 | 105 | incrementPage() { 106 | const lastPage = Children.count(this.flatChildren()); 107 | const { page } = this.state; 108 | this.setState({ 109 | page: (page + 1) % lastPage, 110 | }, () => this.props.onPageChange(this.state.page, 'next')); 111 | } 112 | 113 | decrementPage() { 114 | const lastPage = Children.count(this.flatChildren()); 115 | const { page } = this.state; 116 | let nextPage; 117 | 118 | if (this.isFirstPage()) { 119 | nextPage = lastPage - 1; 120 | } else { 121 | nextPage = page - 1; 122 | } 123 | this.setState({ 124 | page: nextPage, 125 | }, () => this.props.onPageChange(this.state.page, 'prev')); 126 | } 127 | 128 | hasNextPage() { 129 | const { loopForever } = this.props; 130 | return !this.isLastPage() || loopForever; 131 | } 132 | 133 | hasPreviousPage() { 134 | const { loopForever } = this.props; 135 | return !this.isFirstPage() || loopForever; 136 | } 137 | 138 | startMoving(e) { 139 | // prevent the button's and a's to not be clickable. 140 | const { tagName, className } = e.target; 141 | 142 | if (tagName === 'BUTTON' || tagName === 'A') { 143 | return; 144 | } 145 | 146 | doNotMove(e); 147 | 148 | const { swipeImmune } = this.props; 149 | const cancel = swipeImmune.some((testedClassName) => className.indexOf(testedClassName) !== -1); 150 | 151 | if (cancel) { 152 | return; 153 | } 154 | 155 | const { posX, posY } = getPosition(e); 156 | 157 | this.setState({ 158 | startX: posX, 159 | startY: posY, 160 | canAnimate: false, 161 | }); 162 | } 163 | 164 | moveGesture(e) { 165 | e.preventDefault(); 166 | 167 | const { posX, posY } = getPosition(e); 168 | 169 | const { 170 | orientation, treshold, maxAngle, perspective, reverse, 171 | } = this.props; 172 | const { 173 | startX, startY, diffX, diffY, direction, lastDirection, 174 | } = this.state; 175 | 176 | if (startY !== -1) { 177 | const newDiffY = posY - startY; 178 | const newDiffX = posX - startX; 179 | const diffToUse = (direction === 'up' || direction === 'down') ? newDiffY : newDiffX; 180 | const angle = (diffToUse / 250) * 180; 181 | let useMaxAngle = false; 182 | if (direction === 'up' || direction === 'left') { 183 | useMaxAngle = reverse ? !this.hasPreviousPage() : !this.hasNextPage(); 184 | } else if (direction === 'down' || direction === 'right') { 185 | useMaxAngle = reverse ? !this.hasNextPage() : !this.hasPreviousPage(); 186 | } 187 | 188 | const rotate = Math.min(Math.abs(angle), useMaxAngle ? maxAngle : 180); 189 | const aboveTreshold = (Math.abs(newDiffX) > treshold || Math.abs(newDiffY) > treshold); 190 | 191 | let nextDirection = ''; 192 | 193 | if (!this.onStartSwipingCalled && aboveTreshold) { 194 | this.props.onStartSwiping(); 195 | this.onStartSwipingCalled = true; 196 | } 197 | 198 | // determine direction to prevent two-directions swipe 199 | if (direction === '' && aboveTreshold) { 200 | if (newDiffY < 0 && orientation === 'vertical') { 201 | nextDirection = 'up'; 202 | } else if (newDiffY > 0 && orientation === 'vertical') { 203 | nextDirection = 'down'; 204 | } else if (newDiffX < 0 && orientation === 'horizontal') { 205 | nextDirection = 'left'; 206 | } else if (newDiffX > 0 && orientation === 'horizontal') { 207 | nextDirection = 'right'; 208 | } 209 | 210 | this.setState({ direction: nextDirection }); 211 | } 212 | 213 | // set the last direction 214 | let nextLastDirection = lastDirection; 215 | if (diffY > newDiffY) { 216 | nextLastDirection = 'up'; 217 | } else if (diffY < newDiffY) { 218 | nextLastDirection = 'down'; 219 | } else if (diffX > newDiffX) { 220 | nextLastDirection = 'right'; 221 | } else if (diffX < newDiffX) { 222 | nextLastDirection = 'left'; 223 | } 224 | 225 | this.setState({ 226 | angle, 227 | rotate, 228 | timestamp: Date.now(), 229 | diffY: newDiffY, 230 | diffX: newDiffX, 231 | lastDirection: nextLastDirection, 232 | }); 233 | 234 | // flip bottom 235 | if (newDiffY < 0 && this.state.direction === 'up') { 236 | this.setState({ 237 | angle, 238 | secondHalfStyle: { 239 | transform: `perspective(${perspective}) rotateX(${rotate}deg)`, 240 | }, 241 | }); 242 | } else if (newDiffY > 0 && this.state.direction === 'down') { 243 | this.setState({ 244 | angle, 245 | firstHalfStyle: { 246 | transform: `perspective(${perspective}) rotateX(-${rotate}deg)`, 247 | zIndex: 2, // apply a z-index to pop over the back face 248 | }, 249 | }); 250 | } else if (newDiffX < 0 && this.state.direction === 'left') { 251 | this.setState({ 252 | angle, 253 | secondHalfStyle: { 254 | transform: `perspective(${perspective}) rotateY(-${rotate}deg)`, 255 | }, 256 | }); 257 | } else if (newDiffX > 0 && this.state.direction === 'right') { 258 | this.setState({ 259 | angle, 260 | firstHalfStyle: { 261 | transform: `perspective(${perspective}) rotateY(${rotate}deg)`, 262 | zIndex: 2, // apply a z-index to pop over the back face 263 | }, 264 | }); 265 | } 266 | } 267 | } 268 | 269 | turnRightOrDown(callback) { 270 | const { 271 | perspective, orientation, animationDuration, 272 | } = this.props; 273 | const { transition } = this; 274 | let secondHalfTransform = `perspective(${perspective}) `; 275 | 276 | if (orientation === 'vertical') { 277 | secondHalfTransform += 'rotateX(180deg)'; 278 | } else { 279 | secondHalfTransform += 'rotateY(-180deg)'; 280 | } 281 | 282 | this.setState({ 283 | firstHalfStyle: { 284 | transition, 285 | transform: '', 286 | zIndex: 'auto', 287 | }, 288 | 289 | secondHalfStyle: { 290 | transition, 291 | transform: secondHalfTransform, 292 | }, 293 | 294 | canAnimate: false, 295 | }, () => { 296 | setTimeout(() => { 297 | callback(); 298 | this.setState({ 299 | secondHalfStyle: {}, 300 | canAnimate: true, 301 | }); 302 | }, animationDuration); 303 | }); 304 | } 305 | 306 | turnLeftOrUp(callback) { 307 | const { 308 | perspective, orientation, animationDuration, 309 | } = this.props; 310 | const { transition } = this; 311 | let firstHalfTransform = `perspective(${perspective}) `; 312 | 313 | if (orientation === 'vertical') { 314 | firstHalfTransform += 'rotateX(-180deg)'; 315 | } else { 316 | firstHalfTransform += 'rotateY(180deg)'; 317 | } 318 | 319 | this.setState({ 320 | firstHalfStyle: { 321 | transition, 322 | transform: firstHalfTransform, 323 | zIndex: 2, 324 | }, 325 | 326 | secondHalfStyle: { 327 | transition, 328 | transform: '', 329 | }, 330 | 331 | canAnimate: false, 332 | }, () => { 333 | setTimeout(() => { 334 | callback(); 335 | this.setState({ 336 | firstHalfStyle: {}, 337 | canAnimate: true, 338 | }); 339 | }, animationDuration); 340 | }); 341 | } 342 | 343 | gotoNextPage() { 344 | if (!this.hasNextPage() || !this.state.canAnimate) return; 345 | 346 | const { onStartPageChange, reverse } = this.props; 347 | // Send an event before the end of the change page animation 348 | onStartPageChange(this.state.page, 'next'); 349 | // We separe the next/previous logic to the right/left logic 350 | if (!reverse) this.turnRightOrDown(this.incrementPage); 351 | else this.turnLeftOrUp(this.incrementPage); 352 | } 353 | 354 | gotoPreviousPage() { 355 | if (!this.hasPreviousPage() || !this.state.canAnimate) return; 356 | 357 | const { onStartPageChange, reverse } = this.props; 358 | 359 | // Send an event before the end of the change page animation 360 | onStartPageChange(this.state.page, 'prev'); 361 | // We separe the next/previous logic to the right/left logic 362 | if (!reverse) this.turnLeftOrUp(this.decrementPage); 363 | else this.turnRightOrDown(this.decrementPage); 364 | } 365 | 366 | gotoPage(page) { 367 | const children = this.flatChildren(); 368 | const { onPageChange } = this.props; 369 | 370 | if (page >= 0 && page < children.length) { 371 | this.setState({ page }, () => { 372 | onPageChange(page, 'set'); 373 | }); 374 | } else { 375 | throw new RangeError('`page` argument is out of bounds.'); 376 | } 377 | } 378 | 379 | stopMoving(cb) { 380 | const { reverse, onStopSwiping } = this.props; 381 | const { 382 | timestamp, angle, direction, lastDirection, 383 | } = this.state; 384 | const delay = Date.now() - timestamp; 385 | 386 | // We don't check hasNextPage because it is done in gotoNextPage 387 | const goUpOrRight = angle <= -90 388 | || (delay <= 20 && direction === 'up' && lastDirection === 'up') 389 | || (delay <= 20 && direction === 'right' && lastDirection === 'right'); 390 | 391 | const goDownOrLeft = angle >= 90 392 | || (delay <= 20 && direction === 'down' && lastDirection === 'down') 393 | || (delay <= 20 && direction === 'left' && lastDirection === 'left'); 394 | 395 | // reset everything 396 | this.reset(() => { 397 | onStopSwiping(); 398 | 399 | if (goUpOrRight) { 400 | if (!reverse) this.gotoNextPage(); 401 | else this.gotoPreviousPage(); 402 | } 403 | 404 | if (goDownOrLeft) { 405 | if (!reverse) this.gotoPreviousPage(); 406 | else this.gotoNextPage(); 407 | } 408 | 409 | if (typeof cb === 'function') { 410 | cb(); 411 | } 412 | }); 413 | } 414 | 415 | beforeItem() { 416 | const lastPage = Children.count(this.props.children); 417 | const { firstComponent, loopForever } = this.props; 418 | const children = this.flatChildren(); 419 | 420 | if (!this.isFirstPage()) { 421 | return children[this.state.page - 1]; 422 | } 423 | 424 | return loopForever ? children[lastPage - 1] : firstComponent; 425 | } 426 | 427 | afterItem() { 428 | const { lastComponent, loopForever } = this.props; 429 | const children = this.flatChildren(); 430 | 431 | if (!this.isLastPage()) { 432 | return children[this.state.page + 1]; 433 | } 434 | 435 | return loopForever ? children[0] : lastComponent; 436 | } 437 | 438 | mouseLeave() { 439 | if (this.props.flipOnLeave) { 440 | this.stopMoving(); 441 | } else { 442 | this.reset(); 443 | } 444 | } 445 | 446 | reset(callback) { 447 | const { transition } = this; 448 | this.onStartSwipingCalled = false; 449 | 450 | this.setState({ 451 | startY: -1, 452 | startX: -1, 453 | angle: 0, 454 | rotate: 0, 455 | direction: '', 456 | lastDirection: '', 457 | secondHalfStyle: { transition }, 458 | firstHalfStyle: { transition }, 459 | canAnimate: true, 460 | }, callback); 461 | } 462 | 463 | renderPage(_page, key) { 464 | const activeItem = key === this.state.page; 465 | 466 | const { page, direction, rotate } = this.state; 467 | const { 468 | orientation, 469 | uncutPages, 470 | maskOpacity, 471 | pageBackground, 472 | animationDuration, 473 | flipOnTouch, 474 | disableSwipe, 475 | reverse, 476 | noShadow, 477 | } = this.props; 478 | 479 | const style = generateStyles( 480 | page, 481 | key, 482 | direction, 483 | rotate, 484 | uncutPages, 485 | orientation, 486 | maskOpacity, 487 | pageBackground, 488 | animationDuration, 489 | ); 490 | 491 | const { 492 | container, 493 | part, 494 | visiblePart, 495 | firstHalf, 496 | secondHalf, 497 | face, 498 | back, 499 | before, 500 | after, 501 | cut, 502 | firstCut, 503 | pull, 504 | gradient, 505 | gradientBefore, 506 | gradientAfter, 507 | gradientSecondHalf, 508 | gradientFirstHalf, 509 | mask, 510 | maskReverse, 511 | } = style; 512 | 513 | const pageItem = ( 514 | 518 | ); 519 | 520 | const beforeItem = reverse ? this.afterItem() : this.beforeItem(); 521 | const afterItem = reverse ? this.beforeItem() : this.afterItem(); 522 | 523 | const clonedBeforeItem = beforeItem ? ( 524 | 528 | ) : null; 529 | const clonedAfterItem = afterItem ? ( 530 | 534 | ) : null; 535 | 536 | const allowSwipe = (flipOnTouch && !disableSwipe) || !flipOnTouch; 537 | const onStartTouching = allowSwipe ? this.startMoving : doNotMove; 538 | 539 | return ( 540 |
552 |
553 | {clonedBeforeItem} 554 |
555 |
556 |
557 |
558 |
559 | {clonedAfterItem} 560 |
561 |
562 |
563 |
564 |
565 |
566 |
567 | {pageItem} 568 |
569 |
570 | {!noShadow &&
} 571 |
572 |
573 |
574 |
575 | {clonedBeforeItem} 576 |
577 |
578 |
579 |
580 |
581 |
582 |
583 |
584 | {pageItem} 585 |
586 |
587 |
588 | {!noShadow &&
} 589 |
590 |
591 |
592 | {clonedAfterItem} 593 |
594 |
595 |
596 |
597 | ); 598 | } 599 | 600 | render() { 601 | const { 602 | style, 603 | className, 604 | orientation, 605 | showSwipeHint, 606 | showTouchHint, 607 | flipOnTouch, 608 | flipOnTouchZone, 609 | disableSwipe, 610 | reverse, 611 | } = this.props; 612 | 613 | const children = this.flatChildren(); 614 | 615 | const containerStyle = m(style, { 616 | height: this.getHeight(), 617 | position: 'relative', 618 | width: this.getWidth(), 619 | }); 620 | 621 | const touchZoneStyle = { 622 | height: orientation === 'vertical' ? `${flipOnTouchZone}%` : '100%', 623 | position: 'absolute', 624 | touchAction: 'none', 625 | width: orientation === 'vertical' ? '100%' : `${flipOnTouchZone}%`, 626 | zIndex: 3, 627 | }; 628 | 629 | const leftZone = { left: 0, top: 0 }; 630 | const rightZone = { bottom: 0, right: 0 }; 631 | 632 | const previousPageTouchZoneStyle = m(touchZoneStyle, reverse ? rightZone : leftZone); 633 | const nextPageTouchZoneStyle = m(touchZoneStyle, reverse ? leftZone : rightZone); 634 | 635 | const onStartTouching = !disableSwipe ? this.startMoving : doNotMove; 636 | const gotoPreviousPage = () => { 637 | this.stopMoving(() => this.gotoPreviousPage()); 638 | }; 639 | const gotoNextPage = () => { 640 | this.stopMoving(() => this.gotoNextPage()); 641 | }; 642 | 643 | // all the pages are rendered once, to prevent glitching 644 | // (React would reload the child page and cause a image glitch) 645 | return ( 646 |
647 | {Children.map(children, (page, key) => this.renderPage(page, key))} 648 | {showSwipeHint &&
} 649 | { 650 | flipOnTouch && ( 651 |
652 |
664 |
676 | {showTouchHint &&
} 677 |
678 | ) 679 | } 680 |
681 | ); 682 | } 683 | } 684 | 685 | FlipPage.defaultProps = { 686 | children: [], 687 | orientation: 'vertical', 688 | animationDuration: 200, 689 | treshold: 10, 690 | maxAngle: 45, 691 | maskOpacity: 0.4, 692 | perspective: '130em', 693 | pageBackground: '#fff', 694 | firstComponent: null, 695 | lastComponent: null, 696 | showHint: false, 697 | showSwipeHint: false, 698 | showTouchHint: false, 699 | uncutPages: false, 700 | style: {}, 701 | height: 480, 702 | width: 320, 703 | onPageChange: () => {}, 704 | onStartPageChange: () => {}, 705 | onStartSwiping: () => {}, 706 | onStopSwiping: () => {}, 707 | className: '', 708 | flipOnLeave: false, 709 | loopForever: false, // loop back to first page after last one 710 | flipOnTouch: false, 711 | flipOnTouchZone: 10, 712 | disableSwipe: false, 713 | responsive: false, 714 | startAt: 0, 715 | reverse: false, 716 | swipeImmune: [], 717 | noShadow: false, 718 | }; 719 | 720 | FlipPage.propTypes = { 721 | children: PropTypes.oneOfType([ 722 | PropTypes.arrayOf(PropTypes.node), 723 | PropTypes.node, 724 | ]), 725 | orientation: PropTypes.oneOf(['vertical', 'horizontal']), 726 | animationDuration: PropTypes.number, 727 | treshold: PropTypes.number, 728 | maxAngle: PropTypes.number, 729 | maskOpacity: PropTypes.number, 730 | perspective: PropTypes.string, 731 | pageBackground: PropTypes.string, 732 | firstComponent: PropTypes.element, 733 | flipOnLeave: PropTypes.bool, 734 | lastComponent: PropTypes.element, 735 | showHint: PropTypes.bool, 736 | showSwipeHint: PropTypes.bool, 737 | showTouchHint: PropTypes.bool, 738 | uncutPages: PropTypes.bool, 739 | style: PropTypes.object, // eslint-disable-line react/forbid-prop-types 740 | height: PropTypes.number, 741 | width: PropTypes.number, 742 | onPageChange: PropTypes.func, 743 | onStartPageChange: PropTypes.func, 744 | onStartSwiping: PropTypes.func, 745 | onStopSwiping: PropTypes.func, 746 | className: PropTypes.string, 747 | loopForever: PropTypes.bool, 748 | flipOnTouch: PropTypes.bool, 749 | flipOnTouchZone: PropTypes.number, 750 | disableSwipe: PropTypes.bool, 751 | responsive: PropTypes.bool, 752 | startAt: PropTypes.number, 753 | reverse: PropTypes.bool, 754 | swipeImmune: PropTypes.arrayOf(PropTypes.string), 755 | noShadow: PropTypes.bool, 756 | }; 757 | 758 | export default FlipPage; 759 | -------------------------------------------------------------------------------- /src/index.spec.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | 4 | import FlipPage from './index'; 5 | import { expectTurnBottom, expectTurnTop, expectTurnLeft, expectTurnRight } from './expectUtils'; 6 | 7 | jest.useFakeTimers(); 8 | 9 | const getState = wrapper => wrapper.instance().state; 10 | 11 | describe('', () => { 12 | it('renders without crashing', () => { 13 | const wrapper = shallow(); 14 | expect(wrapper.html()).toMatchSnapshot(); 15 | }); 16 | 17 | describe('componentDidMount()', () => { 18 | it('should start a timer', () => { 19 | const wrapper = shallow(); 20 | const result = wrapper.instance().hintTimeout; 21 | expect(result).not.toBeNull(); 22 | }); 23 | }); 24 | 25 | describe('componentWillUnmount()', () => { 26 | it('should end two timers', () => { 27 | const wrapper = shallow(); 28 | wrapper.unmount(); 29 | expect(clearTimeout).toHaveBeenCalledTimes(2); 30 | }); 31 | }); 32 | 33 | describe('showHint()', () => { 34 | it('should update state', () => { 35 | const wrapper = shallow(); 36 | wrapper.instance().showHint(); 37 | 38 | expect(Object.keys(getState(wrapper).secondHalfStyle)).toEqual(['transition', 'transform']); 39 | expect(setTimeout).toHaveBeenCalled(); 40 | 41 | jest.runOnlyPendingTimers(); 42 | 43 | expect(Object.keys(getState(wrapper).secondHalfStyle)).toEqual(['transition']); 44 | }); 45 | }); 46 | 47 | describe('hasNextPage()', () => { 48 | it('should return FALSE if already on last page and `loopForever` is FALSE', () => { 49 | const wrapper = shallow(
); 50 | wrapper.setState({ page: 1 }); 51 | const result = wrapper.instance().hasNextPage(); 52 | expect(result).toEqual(false); 53 | }); 54 | 55 | it('should return TRUE if already on last page and `loopForever` is TRUE', () => { 56 | const wrapper = shallow(
); 57 | wrapper.setState({ page: 1 }); 58 | const result = wrapper.instance().hasNextPage(); 59 | expect(result).toEqual(true); 60 | }); 61 | }); 62 | 63 | describe('hasPreviousPage()', () => { 64 | it('should return FALSE if already on first page and `loopForever` is FALSE', () => { 65 | const wrapper = shallow(
); 66 | const result = wrapper.instance().hasPreviousPage(); 67 | expect(result).toEqual(false); 68 | }); 69 | 70 | it('should return TRUE if already on first page and `loopForever` is TRUE', () => { 71 | const wrapper = shallow(
); 72 | const result = wrapper.instance().hasPreviousPage(); 73 | expect(result).toEqual(true); 74 | }); 75 | }); 76 | 77 | describe('getHeight()', () => { 78 | it('should return the height with pixel unit', () => { 79 | const target = 123; 80 | const wrapper = shallow(); 81 | const result = wrapper.instance().getHeight(); 82 | 83 | expect(result).toEqual(`${target}px`); 84 | }); 85 | }); 86 | 87 | describe('getWidth()', () => { 88 | it('should return the width with pixel unit', () => { 89 | const target = 123; 90 | const wrapper = shallow(); 91 | const result = wrapper.instance().getWidth(); 92 | 93 | expect(result).toEqual(`${target}px`); 94 | }); 95 | }); 96 | 97 | describe('isLastPage()', () => { 98 | let wrapper; 99 | 100 | beforeEach(() => { 101 | wrapper = shallow(
); 102 | }); 103 | 104 | it('should return FALSE when state.page === 0', () => { 105 | wrapper.setState({ page: 0 }); 106 | const result = wrapper.instance().isLastPage(); 107 | expect(result).toBeFalsy(); 108 | }); 109 | 110 | it('should return TRUE when state.page === 1', () => { 111 | wrapper.setState({ page: 1 }); 112 | const result = wrapper.instance().isLastPage(); 113 | expect(result).toBeTruthy(); 114 | }); 115 | }); 116 | 117 | describe('isFirstPage()', () => { 118 | let wrapper; 119 | 120 | beforeEach(() => { 121 | wrapper = shallow(
); 122 | }); 123 | 124 | it('should return TRUE when state.page === 0', () => { 125 | wrapper.setState({ page: 0 }); 126 | const result = wrapper.instance().isFirstPage(); 127 | expect(result).toBeTruthy(); 128 | }); 129 | 130 | it('should return FALSE when state.page === 1', () => { 131 | wrapper.setState({ page: 1 }); 132 | const result = wrapper.instance().isFirstPage(); 133 | expect(result).toBeFalsy(); 134 | }); 135 | }); 136 | 137 | describe('incrementPage()', () => { 138 | let wrapper; 139 | 140 | beforeEach(() => { 141 | const onPageChange = jest.fn(); 142 | wrapper = shallow(
); 143 | }); 144 | 145 | it('should increment the page by one', () => { 146 | wrapper.setState({ page: 0 }); 147 | wrapper.instance().incrementPage(); 148 | expect(wrapper.state().page).toEqual(1); 149 | expect(wrapper.instance().props.onPageChange).toHaveBeenCalledWith(1, 'next'); 150 | }); 151 | 152 | it('should return FIRST PAGE when incrementing the last page', () => { 153 | wrapper.setState({ page: 1 }); 154 | wrapper.instance().incrementPage(); 155 | expect(wrapper.state().page).toEqual(0); 156 | expect(wrapper.instance().props.onPageChange).toHaveBeenCalledWith(0, 'next'); 157 | }); 158 | }); 159 | 160 | describe('decrementPage()', () => { 161 | let wrapper; 162 | 163 | beforeEach(() => { 164 | const onPageChange = jest.fn(); 165 | wrapper = shallow(
); 166 | }); 167 | 168 | it('should decrement the page by one', () => { 169 | wrapper.setState({ page: 1 }); 170 | wrapper.instance().decrementPage(); 171 | expect(wrapper.state().page).toEqual(0); 172 | expect(wrapper.instance().props.onPageChange).toHaveBeenCalledWith(0, 'prev'); 173 | }); 174 | 175 | it('should return LAST PAGE when decrementing the first page', () => { 176 | wrapper.setState({ page: 0 }); 177 | wrapper.instance().decrementPage(); 178 | expect(wrapper.state().page).toEqual(1); 179 | expect(wrapper.instance().props.onPageChange).toHaveBeenCalledWith(1, 'prev'); 180 | }); 181 | }); 182 | 183 | describe('startMoving()', () => { 184 | let wrapper; 185 | let event; 186 | 187 | it('should stop if event is on a button or a link', () => { 188 | wrapper = shallow(); 189 | event = { 190 | preventDefault: jest.fn(), 191 | target: { 192 | tagName: 'A', 193 | }, 194 | }; 195 | 196 | const ret = wrapper.instance().startMoving(event); 197 | 198 | expect(ret).toEqual(undefined); 199 | expect(event.preventDefault).not.toHaveBeenCalled(); 200 | }); 201 | 202 | beforeEach(() => { 203 | wrapper = shallow(); 204 | event = { 205 | preventDefault: jest.fn(), 206 | pageX: 1, 207 | pageY: 2, 208 | target: { 209 | tagName: 'div', 210 | }, 211 | touches: [{ 212 | pageX: 3, 213 | pageY: 4, 214 | }], 215 | }; 216 | }); 217 | 218 | it('should call event.preventDefault()', () => { 219 | wrapper.instance().startMoving(event); 220 | expect(event.preventDefault).toHaveBeenCalledTimes(1); 221 | }); 222 | 223 | it('should setState as event.pageX and event.pageY', () => { 224 | wrapper.instance().startMoving(event); 225 | expect(wrapper.state().startX).toEqual(event.pageX); 226 | expect(wrapper.state().startY).toEqual(event.pageY); 227 | }); 228 | 229 | it('should setState as event.touches[0].pageX and event.touches[0].pageY', () => { 230 | event.pageX = 0; 231 | event.pageY = NaN; 232 | wrapper.instance().startMoving(event); 233 | expect(wrapper.state().startX).toEqual(event.touches[0].pageX); 234 | expect(wrapper.state().startY).toEqual(event.touches[0].pageY); 235 | }); 236 | }); 237 | 238 | describe.each([[false], [true]])('moveGesture when reverse is %s', (reverse) => { 239 | let wrapper; 240 | let event; 241 | 242 | beforeEach(() => { 243 | wrapper = shallow(); 244 | event = { 245 | preventDefault: jest.fn(), 246 | pageX: 1, 247 | pageY: 1, 248 | }; 249 | }); 250 | 251 | it('should not change state when startY is -1', () => { 252 | wrapper.instance().moveGesture(event); 253 | const initialState = { ...wrapper.state() }; 254 | expect(event.preventDefault).toHaveBeenCalledTimes(1); 255 | expect(wrapper.state()).toEqual(initialState); 256 | }); 257 | 258 | it('should use maxAngle when on first page', () => { 259 | wrapper.setState({ 260 | direction: !reverse ? 'down' : 'up', 261 | startY: 1, 262 | }); 263 | 264 | wrapper.instance().hasPreviousPage = jest.fn(); 265 | wrapper.instance().moveGesture(event); 266 | 267 | expect(wrapper.instance().hasPreviousPage).toHaveBeenCalled(); 268 | }); 269 | 270 | it('should call NOT onStartSwiping if under treshold', () => { 271 | wrapper.setState({ 272 | direction: 'down', 273 | startY: 0, 274 | }); 275 | 276 | const onStartSwiping = jest.fn(); 277 | 278 | wrapper.setProps({ onStartSwiping }); 279 | wrapper.instance().moveGesture(event); 280 | 281 | expect(onStartSwiping).not.toHaveBeenCalled(); 282 | }); 283 | 284 | it('should call onStartSwiping if over treshold', () => { 285 | wrapper.setState({ 286 | direction: 'down', 287 | startY: 0, 288 | }); 289 | 290 | const onStartSwiping = jest.fn(); 291 | 292 | wrapper.setProps({ onStartSwiping }); 293 | wrapper.instance().moveGesture({ 294 | preventDefault: jest.fn(), 295 | pageX: 1, 296 | pageY: 20, 297 | }); 298 | 299 | expect(onStartSwiping).toHaveBeenCalled(); 300 | }); 301 | 302 | it('should use maxAngle when on last page', () => { 303 | wrapper.setState({ 304 | direction: !reverse ? 'up' : 'down', 305 | startY: 300, 306 | }); 307 | 308 | wrapper.instance().hasNextPage = jest.fn(); 309 | wrapper.instance().moveGesture(event); 310 | 311 | expect(wrapper.instance().hasNextPage).toHaveBeenCalled(); 312 | }); 313 | 314 | describe('Horizontal', () => { 315 | beforeEach(() => { 316 | wrapper.setProps({ orientation: 'horizontal' }); 317 | }); 318 | 319 | it('should move LEFT with an angle of -180deg', () => { 320 | wrapper.setState({ 321 | canAnimate: false, // Simulate the onStartSwiping behavior. 322 | startX: 251, 323 | startY: 1, 324 | }); 325 | wrapper.instance().moveGesture(event); 326 | 327 | const { timestamp, ...timelessState } = wrapper.state(); 328 | expect(timelessState).toEqual({ 329 | angle: -180, 330 | diffX: -250, 331 | diffY: 0, 332 | direction: 'left', 333 | firstHalfStyle: {}, 334 | lastDirection: '', 335 | page: 0, 336 | rotate: 180, 337 | secondHalfStyle: { 338 | transform: 'perspective(130em) rotateY(-180deg)', 339 | }, 340 | startX: 251, 341 | startY: 1, 342 | canAnimate: false, 343 | }); 344 | }); 345 | 346 | it('should move RIGHT with an angle of 90deg', () => { 347 | wrapper.setState({ 348 | canAnimate: false, // Simulate the onStartSwiping behavior. 349 | startX: -124, 350 | startY: 1, 351 | }); 352 | wrapper.instance().moveGesture(event); 353 | 354 | const { timestamp, ...timelessState } = wrapper.state(); 355 | expect(timelessState).toEqual({ 356 | angle: 90, 357 | diffX: 125, 358 | diffY: 0, 359 | direction: 'right', 360 | firstHalfStyle: { 361 | transform: 'perspective(130em) rotateY(90deg)', 362 | zIndex: 2, 363 | }, 364 | lastDirection: '', 365 | page: 0, 366 | rotate: 90, 367 | secondHalfStyle: {}, 368 | startX: -124, 369 | startY: 1, 370 | canAnimate: false, 371 | }); 372 | }); 373 | }); 374 | 375 | describe('Vertical', () => { 376 | beforeEach(() => { 377 | wrapper.setProps({ orientation: 'vertical' }); 378 | }); 379 | 380 | it('should move UP with an angle of -135deg', () => { 381 | wrapper.setState({ 382 | canAnimate: false, // Simulate the onStartSwiping behavior. 383 | startX: 1, 384 | startY: 188.5, 385 | }); 386 | wrapper.instance().moveGesture(event); 387 | 388 | const { timestamp, ...timelessState } = wrapper.state(); 389 | expect(timelessState).toEqual({ 390 | angle: 0, 391 | diffX: 0, 392 | diffY: -187.5, 393 | direction: 'up', 394 | firstHalfStyle: {}, 395 | lastDirection: 'up', 396 | page: 0, 397 | rotate: 0, 398 | secondHalfStyle: { 399 | transform: 'perspective(130em) rotateX(0deg)', 400 | }, 401 | startX: 1, 402 | startY: 188.5, 403 | canAnimate: false, 404 | }); 405 | }); 406 | 407 | it('should move DOWN with an angle of 45deg', () => { 408 | wrapper.setState({ 409 | canAnimate: false, // Simulate the onStartSwiping behavior. 410 | startX: 1, 411 | startY: -61.5, 412 | }); 413 | wrapper.instance().moveGesture(event); 414 | 415 | const { timestamp, ...timelessState } = wrapper.state(); 416 | expect(timelessState).toEqual({ 417 | angle: 0, 418 | diffX: 0, 419 | diffY: 62.5, 420 | direction: 'down', 421 | firstHalfStyle: { 422 | transform: 'perspective(130em) rotateX(-0deg)', 423 | zIndex: 2, 424 | }, 425 | lastDirection: 'down', 426 | page: 0, 427 | rotate: 0, 428 | secondHalfStyle: {}, 429 | startX: 1, 430 | startY: -61.5, 431 | canAnimate: false, 432 | }); 433 | }); 434 | }); 435 | }); 436 | 437 | describe.each([[false], [true]])('gotoNextPage when reverse is %s', (reverse) => { 438 | let wrapper; 439 | 440 | it('should return when no next page', () => { 441 | wrapper = shallow(
); 442 | wrapper.instance().hasNextPage = jest.fn(); 443 | 444 | const ret = wrapper.instance().gotoNextPage(); 445 | 446 | expect(ret).toEqual(undefined); 447 | expect(wrapper.instance().hasNextPage).toHaveBeenCalled(); 448 | }); 449 | 450 | beforeEach(() => { 451 | wrapper = shallow(
); 452 | wrapper.instance().incrementPage = jest.fn(); 453 | wrapper.instance().decrementPage = jest.fn(); 454 | }); 455 | 456 | it('should call onStartPageChange', () => { 457 | const onStartPageChange = jest.fn(); 458 | 459 | wrapper = shallow(
); 460 | 461 | wrapper.instance().gotoNextPage(); 462 | 463 | expect(onStartPageChange).toHaveBeenCalledWith(0, 'next'); 464 | }); 465 | 466 | describe('Vertical', () => { 467 | it(`should flip the ${reverse ? 'top' : 'bottom'} part`, () => { 468 | wrapper.instance().gotoNextPage(); 469 | if (reverse) expectTurnTop(wrapper); 470 | else expectTurnBottom(wrapper); 471 | 472 | expect(wrapper.instance().incrementPage).toHaveBeenCalled(); 473 | }); 474 | }); 475 | 476 | describe('Horizontal', () => { 477 | it(`should flip the ${reverse ? 'left' : 'right'} part`, () => { 478 | wrapper.setProps({ orientation: 'horizontal' }); 479 | wrapper.instance().gotoNextPage(); 480 | 481 | if (reverse) expectTurnLeft(wrapper); 482 | else expectTurnRight(wrapper); 483 | 484 | expect(wrapper.instance().incrementPage).toHaveBeenCalled(); 485 | }); 486 | }); 487 | }); 488 | 489 | describe.each([[false], [true]])('gotoPreviousPage when reverse is %s', (reverse) => { 490 | let wrapper; 491 | 492 | it('should return when no previous page', () => { 493 | wrapper = shallow(
); 494 | wrapper.instance().hasPreviousPage = jest.fn(); 495 | 496 | const ret = wrapper.instance().gotoPreviousPage(); 497 | 498 | expect(ret).toEqual(undefined); 499 | expect(wrapper.instance().hasPreviousPage).toHaveBeenCalled(); 500 | }); 501 | 502 | beforeEach(() => { 503 | wrapper = shallow(
); 504 | wrapper.setState({ page: 1 }); 505 | wrapper.instance().incrementPage = jest.fn(); 506 | wrapper.instance().decrementPage = jest.fn(); 507 | }); 508 | 509 | it('should call onStartPageChange', () => { 510 | const onStartPageChange = jest.fn(); 511 | 512 | wrapper = shallow(
); 513 | wrapper.setState({ page: 1 }); 514 | 515 | wrapper.instance().gotoPreviousPage(); 516 | 517 | expect(onStartPageChange).toHaveBeenCalledWith(1, 'prev'); 518 | }); 519 | 520 | describe('Vertical', () => { 521 | it(`should flip the ${reverse ? 'bottom' : 'top'} part`, () => { 522 | wrapper.instance().gotoPreviousPage(); 523 | 524 | if (reverse) expectTurnBottom(wrapper); 525 | else expectTurnTop(wrapper); 526 | 527 | expect(wrapper.instance().decrementPage).toHaveBeenCalled(); 528 | }); 529 | }); 530 | 531 | describe('Horizontal', () => { 532 | it(`should flip the ${reverse ? 'right' : 'left'} part`, () => { 533 | wrapper.setProps({ orientation: 'horizontal' }); 534 | wrapper.instance().gotoPreviousPage(); 535 | 536 | if (reverse) expectTurnRight(wrapper); 537 | else expectTurnLeft(wrapper); 538 | 539 | expect(wrapper.instance().decrementPage).toHaveBeenCalled(); 540 | }); 541 | }); 542 | }); 543 | 544 | describe('gotoPage', () => { 545 | let wrapper; 546 | 547 | beforeEach(() => { 548 | wrapper = shallow(
); 549 | }); 550 | 551 | it('should go to correct page', () => { 552 | wrapper.instance().gotoPage(1); 553 | 554 | let state = wrapper.state(); 555 | expect(state.page).toEqual(1); 556 | }); 557 | 558 | it('should throw RangeError when out of bounds (< 0)', () => { 559 | expect(() => { 560 | wrapper.instance().gotoPage(-1); 561 | }).toThrow(RangeError); 562 | }); 563 | 564 | it('should throw RangeError when out of bounds (> children length)', () => { 565 | expect(() => { 566 | wrapper.instance().gotoPage(2); 567 | }).toThrow(RangeError); 568 | }); 569 | }); 570 | 571 | describe.each([[false], [true]])('stopMoving when reverse is %s', (reverse) => { 572 | let wrapper; 573 | 574 | beforeEach(() => { 575 | wrapper = shallow(
); 576 | wrapper.instance().gotoNextPage = jest.fn(); 577 | wrapper.instance().gotoPreviousPage = jest.fn(); 578 | wrapper.instance().reset = jest.fn(cb => cb()); // Reset just executes its callback 579 | }); 580 | 581 | it('should go to next page if possible', () => { 582 | wrapper.setState({ 583 | angle: reverse ? 90 : -90, 584 | timestamp: Date.now(), 585 | direction: reverse ? 'down' : 'up', 586 | lastDirection: reverse ? 'down' : 'up', 587 | }); 588 | 589 | wrapper.instance().stopMoving(); 590 | expect(wrapper.instance().reset).toHaveBeenCalled(); 591 | 592 | // Asynchronous… 593 | setTimeout(() => { 594 | expect(wrapper.instance().gotoNextPage).toHaveBeenCalled(); 595 | }, 300); 596 | // Need to run fake timers 597 | jest.runOnlyPendingTimers(); 598 | expect(wrapper.instance().gotoPreviousPage).not.toHaveBeenCalled(); 599 | }); 600 | 601 | it('should go to previous page if possible', () => { 602 | wrapper.setState({ 603 | page: 1, 604 | angle: reverse ? -90 : 90, 605 | timestamp: Date.now(), 606 | direction: reverse ? 'up' : 'down', 607 | lastDirection: reverse ? 'up' : 'down', 608 | }); 609 | 610 | wrapper.instance().stopMoving(); 611 | 612 | expect(wrapper.instance().reset).toHaveBeenCalled(); 613 | // Asynchronous… 614 | setTimeout(() => { 615 | expect(wrapper.instance().gotoPreviousPage).toHaveBeenCalled(); 616 | }, 300); 617 | // Need to run fake timers 618 | jest.runOnlyPendingTimers(); 619 | expect(wrapper.instance().gotoNextPage).not.toHaveBeenCalled(); 620 | }); 621 | }); 622 | 623 | describe('mouseLeave', () => { 624 | let wrapper; 625 | const mockFn = { 626 | stopMoving: undefined, 627 | reset: undefined, 628 | }; 629 | 630 | beforeEach(() => { 631 | mockFn.stopMoving = jest.fn(); 632 | mockFn.reset = jest.fn(); 633 | 634 | wrapper = shallow(); 635 | wrapper.instance().stopMoving = mockFn.stopMoving; 636 | wrapper.instance().reset = mockFn.reset; 637 | }); 638 | 639 | it('should call stopMoving() when flipOnLeave === TRUE', () => { 640 | wrapper.setProps({ flipOnLeave: true }); 641 | wrapper.instance().mouseLeave(); 642 | 643 | expect(mockFn.stopMoving).toHaveBeenCalledTimes(1); 644 | expect(mockFn.reset).not.toHaveBeenCalled(); 645 | }); 646 | 647 | it('should call reset() when flipOnLeave === FALSE', () => { 648 | wrapper.setProps({ flipOnLeave: false }); 649 | wrapper.instance().mouseLeave(); 650 | 651 | expect(mockFn.reset).toHaveBeenCalledTimes(1); 652 | expect(mockFn.stopMoving).not.toHaveBeenCalled(); 653 | }); 654 | }); 655 | 656 | describe('reset', () => { 657 | it('should reset state to initial values', () => { 658 | const wrapper = shallow(); 659 | wrapper.setState({ 660 | startY: 999, 661 | startX: 999, 662 | angle: 180, 663 | rotate: 180, 664 | direction: 'up', 665 | lastDirection: 'down', 666 | secondHalfStyle: { 667 | transform: 'perspective(130em) rotateY(-180deg)', 668 | }, 669 | firstHalfStyle: { 670 | transform: 'perspective(130em) rotateX(-0deg)', 671 | zIndex: 2, 672 | }, 673 | canAnimate: false, 674 | }); 675 | 676 | wrapper.instance().reset(); 677 | const { 678 | timestamp, 679 | diffY, 680 | page, 681 | ...result 682 | } = wrapper.state(); 683 | 684 | expect(result).toEqual({ 685 | startY: -1, 686 | startX: -1, 687 | angle: 0, 688 | rotate: 0, 689 | direction: '', 690 | lastDirection: '', 691 | secondHalfStyle: { 692 | transition: 'transform 0.2s ease-in-out', 693 | }, 694 | firstHalfStyle: { 695 | transition: 'transform 0.2s ease-in-out', 696 | }, 697 | canAnimate: true, 698 | }); 699 | }); 700 | }); 701 | 702 | describe('flipOnTouch click handlers', () => { 703 | let wrapper; 704 | let stopMoving; 705 | let gotoPreviousPage; 706 | let gotoNextPage; 707 | 708 | beforeEach(() => { 709 | stopMoving = jest.fn(); 710 | gotoPreviousPage = jest.fn(); 711 | gotoNextPage = jest.fn(); 712 | 713 | wrapper = shallow(); 714 | wrapper.instance().stopMoving = stopMoving; 715 | wrapper.instance().gotoPreviousPage = gotoPreviousPage; 716 | wrapper.instance().gotoNextPage = gotoNextPage; 717 | }); 718 | 719 | it('should call gotoPreviousPage when clicking top zone', () => { 720 | wrapper.find('.rfp-touchZone-previous').simulate('mouseup'); 721 | 722 | expect(stopMoving).toHaveBeenCalled(); 723 | setTimeout(() => { 724 | expect(gotoPreviousPage).toHaveBeenCalled(); 725 | }); 726 | }); 727 | 728 | it('should call stopMoving and gotoNextPage when clicking bottom zone', () => { 729 | wrapper.find('.rfp-touchZone-next').simulate('mouseup'); 730 | 731 | expect(stopMoving).toHaveBeenCalled(); 732 | setTimeout(() => { 733 | expect(gotoNextPage).toHaveBeenCalled(); 734 | }); 735 | }); 736 | }); 737 | 738 | describe('startAt', () => { 739 | const wrapper = shallow(
); 740 | 741 | it('should have state.page to 1 when startAt = 1', () => { 742 | expect(wrapper.state().page).toEqual(1); 743 | }); 744 | }); 745 | }); 746 | 747 | describe('', () => { 748 | it('should allow "vertical" as an orientation entry', () => { 749 | const wrapper = shallow(); 750 | expect(wrapper.html()).toMatchSnapshot(); 751 | }); 752 | 753 | it('should allow "horizontal" as an orientation entry', () => { 754 | const wrapper = shallow(); 755 | expect(wrapper.html()).toMatchSnapshot(); 756 | }); 757 | }); 758 | 759 | describe('', () => { 760 | it('should include a swipe hint element', () => { 761 | const wrapper = shallow(); 762 | expect(wrapper.html()).toMatchSnapshot(); 763 | }); 764 | }); 765 | 766 | describe('', () => { 767 | it('should include two touch zones', () => { 768 | const wrapper = shallow(); 769 | expect(wrapper.html()).toMatchSnapshot(); 770 | }); 771 | }); 772 | 773 | describe('', () => { 774 | it('should not include a touch hint element', () => { 775 | const wrapper = shallow(); 776 | expect(wrapper.html()).toMatchSnapshot(); 777 | }); 778 | }); 779 | 780 | describe('', () => { 781 | it('should include a touch hint element', () => { 782 | const wrapper = shallow(); 783 | expect(wrapper.html()).toMatchSnapshot(); 784 | }); 785 | }); 786 | 787 | describe('', () => { 788 | it('should not have gradient elements', () => { 789 | const wrapper = shallow(); 790 | expect(wrapper.html()).toMatchSnapshot(); 791 | }); 792 | }); 793 | --------------------------------------------------------------------------------