├── .babelrc ├── .eslintrc ├── .gitignore ├── Gulpfile.js ├── LICENSE ├── README.md ├── demo ├── app.js └── index.html ├── index.js ├── karma.conf.js ├── lib └── shuffle.js ├── package.json ├── src └── shuffle.js ├── test └── helpers │ ├── phantomjs-shims.js │ └── raf-polyfill.js ├── webpack.config.js └── webpack.dist.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react", ["es2015", {}]], 3 | "plugins": ["transform-object-rest-spread"] 4 | } -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "node": true, 4 | "browser": true, 5 | "mocha": true 6 | }, 7 | "globals": { 8 | "navigator", 9 | "$serverSide", 10 | "$isiOS", 11 | "$isAndroid", 12 | "$isBrowser" 13 | }, 14 | "parser": "babel-eslint", 15 | "ecmaFeatures": { 16 | "arrowFunctions": true, 17 | "binaryLiterals": true, 18 | "blockBindings": true, 19 | "classes": true, 20 | "defaultParams": true, 21 | "destructuring": true, 22 | "forOf": true, 23 | "generators": true, 24 | "modules": true, 25 | "objectLiteralComputedProperties": true, 26 | "objectLiteralDuplicateProperties": true, 27 | "objectLiteralShorthandMethods": true, 28 | "objectLiteralShorthandProperties": true, 29 | "spread": true, 30 | "superInFunctions": true, 31 | "templateStrings": true, 32 | "unicodeCodePointEscapes": true, 33 | "jsx": true 34 | }, 35 | "rules": { 36 | 37 | // Lint Rules 38 | 39 | "no-bitwise": 2, 40 | "eqeqeq": 2, 41 | "guard-for-in": 2, 42 | "no-use-before-define": 2, 43 | "no-caller": 2, 44 | "no-new": 0, 45 | "no-undef": 0, // Fix Me 46 | "no-unused-vars": 0, // Fix Me 47 | "strict": 0, 48 | "max-params": [2, 5], 49 | "semi": 0, 50 | "no-cond-assign": 0, 51 | "no-loop-func": 0, 52 | "no-shadow": 0, 53 | "no-underscore-dangle": 0, 54 | 55 | // Style Rules 56 | 57 | "no-with": 1, 58 | "no-eval": 1, 59 | "space-after-keywords": 1, 60 | 61 | "curly": [1, "all"], 62 | "space-before-blocks": 1, 63 | "no-empty": 1, 64 | 65 | "space-before-function-parentheses": [1, "never"], 66 | "wrap-iife": 1, 67 | 68 | "space-in-brackets": [1, "never"], 69 | "space-in-parens": [1, "never"], 70 | 71 | "space-infix-ops": 1, 72 | "dot-notation": 1, 73 | 74 | "camelcase": 1, 75 | "no-multi-str": 1, 76 | 77 | "no-mixed-spaces-and-tabs": 1, 78 | "no-trailing-spaces": 1, 79 | "eol-last" : 1, 80 | 81 | "comma-spacing": [1, {"before": false, "after": true}], 82 | "indent": [1, 2], 83 | "quotes": [1, "single"] 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ### SublimeText ### 2 | *.sublime-workspace 3 | 4 | ### OSX ### 5 | .DS_Store 6 | .AppleDouble 7 | .LSOverride 8 | Icon 9 | 10 | # Thumbnails 11 | ._* 12 | 13 | # Files that might appear on external disk 14 | .Spotlight-V100 15 | .Trashes 16 | 17 | ### Windows ### 18 | # Windows image file caches 19 | Thumbs.db 20 | ehthumbs.db 21 | 22 | # Folder config file 23 | Desktop.ini 24 | 25 | # Recycle Bin used on file shares 26 | $RECYCLE.BIN/ 27 | 28 | # App specific 29 | 30 | node_modules/ 31 | bower_components/ 32 | .tmp 33 | dist 34 | /src/scripts/main.js 35 | npm-debug.log 36 | -------------------------------------------------------------------------------- /Gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'); 4 | var gutil = require('gulp-util'); 5 | var open = require('gulp-open'); 6 | var babel = require('gulp-babel'); 7 | var del = require('del'); 8 | var webpack = require('webpack'); 9 | var gwebpack = require('gulp-webpack'); 10 | var WebpackDevServer = require("webpack-dev-server"); 11 | 12 | var eslint= require('gulp-eslint'); 13 | var karma = require('karma').server; 14 | 15 | var webpackDistConfig = require('./webpack.dist.config.js'), 16 | webpackDevConfig = require('./webpack.config.js'); 17 | 18 | gulp.task('open', function(){ 19 | open('',{url: 'http://localhost:8080/webpack-dev-server/'}); 20 | }); 21 | 22 | gulp.task("babel", function() { 23 | return gulp.src('src/*.js') 24 | .pipe(babel()) 25 | .pipe(gulp.dest('lib')); 26 | }); 27 | 28 | gulp.task("webpack-dev-server", function(callback) { 29 | 30 | new WebpackDevServer(webpack(webpackDevConfig), { 31 | publicPath: "/assets/", 32 | contentBase: "demo", 33 | stats: { 34 | colors: true 35 | } 36 | }).listen(8080, "localhost", function(err) { 37 | if(err) throw new gutil.PluginError("webpack-dev-server", err); 38 | }); 39 | 40 | }); 41 | 42 | gulp.task('lint', function () { 43 | return gulp.src(['src/**/*.js']) 44 | .pipe(eslint()) 45 | .pipe(eslint.format()) 46 | }); 47 | 48 | 49 | gulp.task("karma", ['lint'], function() { 50 | karma.start({ 51 | configFile: __dirname + '/karma.conf.js', 52 | singleRun: true 53 | }); 54 | }); 55 | 56 | gulp.task('test', ['lint', 'karma']); 57 | gulp.task('build', ['babel']); 58 | gulp.task('default', ['webpack-dev-server', 'open']); 59 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2013 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | 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, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Maintenance Status][maintenance-image]](#maintenance-status) 2 | 3 | # react-shuffle 4 | 5 | Animated shuffling of child components 6 | 7 | ### Install 8 | 9 | ``` 10 | npm install react-shuffle 11 | ``` 12 | 13 | ### Preview 14 | 15 | ![http://i.imgur.com/B1RFfvj.gif](http://i.imgur.com/B1RFfvj.gif) 16 | 17 | ### Usage 18 | 19 | Simply wrap child components with this component and dynamically change them to see them animate. The only real requirement is that each child has a non-index based key, for proper position identification. 20 | 21 | ### Props 22 | 23 | | Prop | PropType | Description | 24 | | ---- | -------- | ----------- | 25 | | duration | React.PropTypes.number | Duration of animation | 26 | | fade | React.PropTypes.bool | Should children fade on enter/leave | 27 | | scale | React.PropTypes.bool | Should children scale on enter/leave | 28 | | intial | React.PropTypes.bool | Should scale/fade occur on first load | 29 | 30 | ### Example 31 | ```javascript 32 | 'use strict'; 33 | 34 | var React = require('react'); 35 | 36 | var Shuffle = require('react-shuffle'); 37 | 38 | const App = React.createClass({ 39 | render() { 40 | return ( 41 | 42 | {// Method to render children goes here} 43 | 44 | ) 45 | } 46 | }); 47 | 48 | module.exports = App; 49 | 50 | ``` 51 | 52 | ### Shout out 53 | 54 | react-shuffle is heavily inspired by Ryan Florences Magic Move demo https://youtu.be/z5e7kWSHWTg 55 | 56 | ### Maintenance Status 57 | 58 | **Archived:** This project is no longer maintained by Formidable. We are no longer responding to issues or pull requests unless they relate to security concerns. We encourage interested developers to fork this project and make it their own! 59 | 60 | 61 | [maintenance-image]: https://img.shields.io/badge/maintenance-archived-red.svg 62 | -------------------------------------------------------------------------------- /demo/app.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import React from 'react'; 4 | import ReactDom from 'react-dom'; 5 | import Shuffle from '../src/Shuffle'; 6 | 7 | const alphabet = [ 8 | 'a','b','c','d','e','f','g','h','i','j','k','l','m', 9 | 'n','o','p','q','r','s','t','u','v','w','x','y','z'] 10 | 11 | const App = React.createClass({ 12 | getInitialState() { 13 | return { 14 | children: alphabet, 15 | filtered: false 16 | } 17 | }, 18 | filterChildren() { 19 | if (this.state.filtered === false) { 20 | let newChildren = this.state.children.filter(function(child,index){ 21 | if (index % 2 ===0) { 22 | return child 23 | } 24 | }); 25 | this.setState({ 26 | children: newChildren, 27 | filtered: true 28 | }); 29 | } else { 30 | this.setState({ 31 | children: alphabet, 32 | filtered: false 33 | }); 34 | } 35 | }, 36 | render() { 37 | return ( 38 |
39 | 40 | 41 | {this.state.children.map(function(letter){ 42 | return ( 43 |
44 | 46 |
47 | ) 48 | })} 49 | 50 |
51 | ) 52 | } 53 | }); 54 | 55 | const content = document.getElementById('content'); 56 | 57 | ReactDom.render(, content) 58 | 59 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Shuffle Demo 7 | 8 | 9 | 31 | 32 | 33 | 36 |
37 |

If you can see this, something is broken (or JS is not enabled)!!.

38 |
39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var Shuffle = require('./lib/shuffle'); 4 | 5 | module.exports = Shuffle; 6 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var path = require('path'); 4 | 5 | module.exports = function (config) { 6 | config.set({ 7 | basePath: '', 8 | frameworks: ['mocha', 'sinon-chai'], 9 | files: [ 10 | 'test/helpers/**/*.js', 11 | 'test/specs/**/*.spec.js' 12 | ], 13 | preprocessors: { 14 | 'test/specs/**/*.spec.js': ['webpack'] 15 | }, 16 | webpack: { 17 | cache: true, 18 | module: { 19 | loaders: [{ 20 | test: /\.js$/, 21 | exclude: [/node_modules/], 22 | loader: 'babel-loader' 23 | },{ 24 | test: /\.css$/, 25 | loader: "style-loader!css-loader" 26 | }, { 27 | test: /\.styl$/, 28 | loader: "style-loader!css-loader!stylus-loader" 29 | }], 30 | postLoaders: [{ 31 | test: /\.js$/, 32 | exclude: /(node_modules|bower_components|plugins|[.]spec[.]js)/, 33 | loader: 'istanbul-instrumenter' 34 | }] 35 | }, 36 | resolve: { 37 | root: [__dirname], 38 | modulesDirectories: ['node_modules', 'src'] 39 | } 40 | }, 41 | webpackServer: { 42 | stats: { 43 | colors: true 44 | } 45 | }, 46 | exclude: [], 47 | port: 8080, 48 | logLevel: config.LOG_INFO, 49 | colors: true, 50 | autoWatch: false, 51 | browsers: ['PhantomJS'], 52 | 'PhantomJS_Desktop': { 53 | base: 'PhantomJS', 54 | options: { 55 | viewportSize: { 56 | width: 1000, 57 | height: 600 58 | } 59 | } 60 | }, 61 | reporters: ['mocha', 'coverage'], 62 | browserNoActivityTimeout: 60000, 63 | plugins: [ 64 | require('karma-coverage'), 65 | require('karma-mocha'), 66 | require('karma-mocha-reporter'), 67 | require('karma-phantomjs-launcher'), 68 | require('karma-sinon-chai'), 69 | require('karma-webpack') 70 | ], 71 | coverageReporter: { 72 | type : 'text' 73 | }, 74 | captureTimeout: 60000, 75 | singleRun: true 76 | }); 77 | }; 78 | -------------------------------------------------------------------------------- /lib/shuffle.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | var _reactDom = require('react-dom'); 14 | 15 | var _reactDom2 = _interopRequireDefault(_reactDom); 16 | 17 | var _objectAssign = require('object-assign'); 18 | 19 | var _objectAssign2 = _interopRequireDefault(_objectAssign); 20 | 21 | var _reactTweenState = require('react-tween-state'); 22 | 23 | var _reactTweenState2 = _interopRequireDefault(_reactTweenState); 24 | 25 | var _reactAddonsTransitionGroup = require('react-addons-transition-group'); 26 | 27 | var _reactAddonsTransitionGroup2 = _interopRequireDefault(_reactAddonsTransitionGroup); 28 | 29 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 30 | 31 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } /* eslint no-unused-vars:0 */ 32 | /*global window, document, getComputedStyle*/ 33 | 34 | var Clones = _react2.default.createClass({ 35 | displayName: 'ShuffleClones', 36 | 37 | _childrenWithPositions: function _childrenWithPositions() { 38 | var _this = this; 39 | 40 | var children = []; 41 | _react2.default.Children.forEach(this.props.children, function (child) { 42 | var style = _this.props.positions[child.key]; 43 | var key = child.key; 44 | children.push(_react2.default.createElement(Clone, { 45 | child: child, 46 | style: style, 47 | key: key, 48 | initial: _this.props.initial, 49 | fade: _this.props.fade, 50 | scale: _this.props.scale, 51 | duration: _this.props.duration })); 52 | }); 53 | return children.sort(function (a, b) { 54 | return a.key < b.key ? -1 : a.key > b.key ? 1 : 0; 55 | }); 56 | }, 57 | render: function render() { 58 | return _react2.default.createElement( 59 | 'div', 60 | { className: 'ShuffleClones' }, 61 | _react2.default.createElement( 62 | _reactAddonsTransitionGroup2.default, 63 | null, 64 | this._childrenWithPositions() 65 | ) 66 | ); 67 | } 68 | }); 69 | 70 | var Clone = _react2.default.createClass({ 71 | mixins: [_reactTweenState2.default.Mixin], 72 | displayName: 'ShuffleClone', 73 | getInitialState: function getInitialState() { 74 | return { 75 | top: this.props.style ? this.props.style.top : 0, 76 | left: this.props.style ? this.props.style.left : 0, 77 | opacity: 1, 78 | transform: 1 79 | }; 80 | }, 81 | componentWillAppear: function componentWillAppear(cb) { 82 | this.tweenState('opacity', { 83 | easing: _reactTweenState2.default.easingTypes.easeOutSine, 84 | duration: this.props.duration, 85 | beginValue: this.props.initial ? 0 : 1, 86 | endValue: 1, 87 | onEnd: cb 88 | }); 89 | }, 90 | componentWillEnter: function componentWillEnter(cb) { 91 | this.tweenState('opacity', { 92 | easing: _reactTweenState2.default.easingTypes.easeOutSine, 93 | duration: this.props.duration, 94 | beginValue: 0, 95 | endValue: 1, 96 | onEnd: cb 97 | }); 98 | }, 99 | componentWillLeave: function componentWillLeave(cb) { 100 | this.tweenState('opacity', { 101 | easing: _reactTweenState2.default.easingTypes.easeOutSine, 102 | duration: this.props.duration, 103 | endValue: 0, 104 | onEnd: function onEnd() { 105 | try { 106 | cb(); 107 | } catch (e) { 108 | // This try catch handles component umounting jumping the gun 109 | } 110 | } 111 | }); 112 | }, 113 | componentWillReceiveProps: function componentWillReceiveProps(nextProps) { 114 | this.tweenState('top', { 115 | easing: _reactTweenState2.default.easingTypes.easeOutSine, 116 | duration: nextProps.duration, 117 | endValue: nextProps.style.top 118 | }); 119 | this.tweenState('left', { 120 | easing: _reactTweenState2.default.easingTypes.easeOutSine, 121 | duration: nextProps.duration, 122 | endValue: nextProps.style.left 123 | }); 124 | }, 125 | render: function render() { 126 | var style = {}; 127 | if (this.props.style) { 128 | style = { 129 | top: this.getTweeningValue('top'), 130 | left: this.getTweeningValue('left'), 131 | opacity: this.props.fade ? this.getTweeningValue('opacity') : 1, 132 | transform: this.props.scale ? 'scale(' + this.getTweeningValue('opacity') + ')' : 0, 133 | transformOrigin: 'center center', 134 | width: this.props.style.width, 135 | height: this.props.style.height, 136 | position: this.props.style.position 137 | }; 138 | } 139 | var key = this.props.key; 140 | return _react2.default.cloneElement(this.props.child, { style: style, key: key }); 141 | } 142 | }); 143 | 144 | var Shuffle = _react2.default.createClass({ 145 | 146 | displayName: 'Shuffle', 147 | 148 | propTypes: { 149 | duration: _react2.default.PropTypes.number, 150 | scale: _react2.default.PropTypes.bool, 151 | fade: _react2.default.PropTypes.bool, 152 | initial: _react2.default.PropTypes.bool 153 | }, 154 | 155 | getDefaultProps: function getDefaultProps() { 156 | return { 157 | duration: 300, 158 | scale: true, 159 | fade: true, 160 | initial: false 161 | }; 162 | }, 163 | getInitialState: function getInitialState() { 164 | return { 165 | animating: false, 166 | ready: false 167 | }; 168 | }, 169 | componentDidMount: function componentDidMount() { 170 | this._makePortal(); 171 | window.addEventListener('resize', this._renderClonesInitially); 172 | }, 173 | componentWillUnmount: function componentWillUnmount() { 174 | _reactDom2.default.unmountComponentAtNode(this._portalNode); 175 | _reactDom2.default.findDOMNode(this.refs.container).removeChild(this._portalNode); 176 | window.removeEventListener('resize', this._renderClonesInitially); 177 | }, 178 | componentWillReceiveProps: function componentWillReceiveProps(nextProps) { 179 | this._startAnimation(nextProps); 180 | }, 181 | componentDidUpdate: function componentDidUpdate(prevProps) { 182 | var _this2 = this; 183 | 184 | if (this.state.ready === false) { 185 | this.setState({ ready: true }, function () { 186 | _this2._renderClonesInitially(); 187 | }); 188 | } else { 189 | this._renderClonesToNewPositions(this.props); 190 | } 191 | }, 192 | _makePortal: function _makePortal() { 193 | this._portalNode = document.createElement('div'); 194 | this._portalNode.style.left = '0px'; 195 | this._portalNode.style.top = '0px'; 196 | this._portalNode.style.position = 'absolute'; 197 | _reactDom2.default.findDOMNode(this.refs.container).appendChild(this._portalNode); 198 | }, 199 | _addTransitionEndEvent: function _addTransitionEndEvent() { 200 | setTimeout(this._finishAnimation, this.props.duration); 201 | }, 202 | _startAnimation: function _startAnimation(nextProps) { 203 | var _this3 = this; 204 | 205 | if (this.state.animating) { 206 | return; 207 | } 208 | 209 | var cloneProps = (0, _objectAssign2.default)({}, nextProps, { 210 | positions: this._getPositions(), 211 | initial: this.props.initial, 212 | fade: this.props.fade, 213 | scale: this.props.scale, 214 | duration: this.props.duration 215 | }); 216 | this._renderClones(cloneProps, function () { 217 | _this3._addTransitionEndEvent(); 218 | _this3.setState({ animating: true }); 219 | }); 220 | }, 221 | _renderClonesToNewPositions: function _renderClonesToNewPositions(props) { 222 | var cloneProps = (0, _objectAssign2.default)({}, props, { 223 | positions: this._getPositions(), 224 | initial: this.props.initial, 225 | fade: this.props.fade, 226 | scale: this.props.scale, 227 | duration: this.props.duration 228 | }); 229 | this._renderClones(cloneProps); 230 | }, 231 | _finishAnimation: function _finishAnimation() { 232 | this.setState({ animating: false }); 233 | }, 234 | _getPositions: function _getPositions() { 235 | var _this4 = this; 236 | 237 | var positions = {}; 238 | _react2.default.Children.forEach(this.props.children, function (child) { 239 | var ref = child.key; 240 | var node = _reactDom2.default.findDOMNode(_this4.refs[ref]); 241 | var rect = node.getBoundingClientRect(); 242 | var computedStyle = getComputedStyle(node); 243 | var marginTop = parseInt(computedStyle.marginTop, 10); 244 | var marginLeft = parseInt(computedStyle.marginLeft, 10); 245 | var position = { 246 | top: node.offsetTop - marginTop, 247 | left: node.offsetLeft - marginLeft, 248 | width: rect.width, 249 | height: rect.height, 250 | position: 'absolute', 251 | opacity: 1 252 | }; 253 | positions[ref] = position; 254 | }); 255 | return positions; 256 | }, 257 | _renderClonesInitially: function _renderClonesInitially() { 258 | var cloneProps = (0, _objectAssign2.default)({}, this.props, { 259 | positions: this._getPositions(), 260 | initial: this.props.initial, 261 | fade: this.props.fade, 262 | scale: this.props.scale, 263 | duration: this.props.duration 264 | }); 265 | _reactDom2.default.unstable_renderSubtreeIntoContainer(this, _react2.default.createElement(Clones, cloneProps), this._portalNode); 266 | this.setState({ ready: true }); 267 | }, 268 | _renderClones: function _renderClones(props, cb) { 269 | _reactDom2.default.unstable_renderSubtreeIntoContainer(this, _react2.default.createElement(Clones, props), this._portalNode, cb); 270 | }, 271 | _childrenWithRefs: function _childrenWithRefs() { 272 | return _react2.default.Children.map(this.props.children, function (child) { 273 | return _react2.default.cloneElement(child, { ref: child.key }); 274 | }); 275 | }, 276 | render: function render() { 277 | var _props = this.props, 278 | initial = _props.initial, 279 | fade = _props.fade, 280 | duration = _props.duration, 281 | props = _objectWithoutProperties(_props, ['initial', 'fade', 'duration']); 282 | 283 | var showContainer = initial ? 0 : 1; 284 | if (this.state.ready) { 285 | showContainer = 0; 286 | } 287 | return _react2.default.createElement( 288 | 'div', 289 | _extends({ ref: 'container', style: { position: 'relative' } }, props), 290 | _react2.default.createElement( 291 | 'div', 292 | { style: { opacity: showContainer } }, 293 | this._childrenWithRefs() 294 | ) 295 | ); 296 | } 297 | }); 298 | 299 | exports.default = Shuffle; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-shuffle", 3 | "version": "2.1.0", 4 | "description": "React Child Shuffler", 5 | "main": "index.js", 6 | "dependencies": { 7 | "babel-plugin-transform-object-rest-spread": "^6.16.0", 8 | "object-assign": "^4.0.1", 9 | "react-addons-transition-group": "^15.0.0 || ^0.14.0", 10 | "react-tween-state": "^0.1.5" 11 | }, 12 | "peerDependencies": { 13 | "react": "^0.14.0 || ^15.0.0-0" 14 | }, 15 | "devDependencies": { 16 | "babel-cli": "^6.4.0", 17 | "babel-core": "^6.4.0", 18 | "babel-eslint": "^4.1.3", 19 | "babel-loader": "^6.2.0", 20 | "babel-preset-es2015": "^6.18.0", 21 | "babel-preset-react": "^6.16.0", 22 | "chai": "^3.3.0", 23 | "css-loader": "^0.19.0", 24 | "del": "^2.0.2", 25 | "eslint": "^1.6.0", 26 | "eslint-loader": "^1.0.0", 27 | "eslint-plugin-react": "^3.5.1", 28 | "gulp": "^3.9.0", 29 | "gulp-babel": "^5.2.1", 30 | "gulp-eslint": "^1.0.0", 31 | "gulp-karma": "0.0.5", 32 | "gulp-open": "^1.0.0", 33 | "gulp-util": "^3.0.6", 34 | "gulp-webpack": "^1.5.0", 35 | "istanbul": "^0.3.22", 36 | "istanbul-instrumenter-loader": "^0.1.3", 37 | "karma": "^0.13.10", 38 | "karma-chrome-launcher": "^0.2.1", 39 | "karma-coverage": "^0.5.2", 40 | "karma-firefox-launcher": "^0.1.6", 41 | "karma-mocha": "^0.2.0", 42 | "karma-mocha-reporter": "^1.1.1", 43 | "karma-phantomjs-launcher": "^0.2.1", 44 | "karma-script-launcher": "~0.1.0", 45 | "karma-sinon-chai": "^1.1.0", 46 | "karma-webpack": "^1.7.0", 47 | "mocha": "^2.3.3", 48 | "phantomjs": "^1.9.18", 49 | "react": "^15.3.0", 50 | "react-dom": "^15.3.0", 51 | "react-hot-loader": "^1.3.0", 52 | "sinon": "^1.17.1", 53 | "sinon-chai": "^2.8.0", 54 | "style-loader": "^0.12.4", 55 | "url-loader": "^0.5.6", 56 | "webpack": "^1.12.2", 57 | "webpack-dev-server": "^1.12.0" 58 | }, 59 | "scripts": { 60 | "test": "echo \"Error: no test specified\" && exit 1", 61 | "prepublish": "./node_modules/.bin/babel src/ --out-dir lib/", 62 | "start": "webpack-dev-server" 63 | }, 64 | "repository": { 65 | "type": "git", 66 | "url": "https://github.com/FormidableLabs/react-shuffle.git" 67 | }, 68 | "keywords": [ 69 | "react", 70 | "animation", 71 | "shuffle" 72 | ], 73 | "author": "Ken Wheeler", 74 | "license": "MIT", 75 | "bugs": { 76 | "url": "https://github.com/FormidableLabs/react-shuffle/issues" 77 | }, 78 | "homepage": "https://github.com/FormidableLabs/react-shuffle", 79 | "sideEffects": false 80 | } 81 | -------------------------------------------------------------------------------- /src/shuffle.js: -------------------------------------------------------------------------------- 1 | /* eslint no-unused-vars:0 */ 2 | /*global window, document, getComputedStyle*/ 3 | 4 | import React from 'react'; 5 | import ReactDom from 'react-dom'; 6 | import assign from 'object-assign'; 7 | import tweenState from 'react-tween-state'; 8 | import ReactTransitionGroup from 'react-addons-transition-group'; 9 | 10 | const Clones = React.createClass({ 11 | displayName: 'ShuffleClones', 12 | 13 | _childrenWithPositions() { 14 | let children = []; 15 | React.Children.forEach(this.props.children, (child) => { 16 | let style = this.props.positions[child.key]; 17 | let key = child.key; 18 | children.push(); 26 | }); 27 | return children.sort((a, b) => 28 | (a.key < b.key) ? -1 : (a.key > b.key) ? 1 : 0 29 | ); 30 | }, 31 | 32 | render() { 33 | return ( 34 |
35 | 36 | {this._childrenWithPositions()} 37 | 38 |
39 | ); 40 | } 41 | }); 42 | 43 | const Clone = React.createClass({ 44 | mixins: [tweenState.Mixin], 45 | displayName: 'ShuffleClone', 46 | getInitialState() { 47 | return { 48 | top: this.props.style ? this.props.style.top : 0, 49 | left: this.props.style ? this.props.style.left : 0, 50 | opacity: 1, 51 | transform: 1 52 | } 53 | }, 54 | componentWillAppear(cb) { 55 | this.tweenState('opacity', { 56 | easing: tweenState.easingTypes.easeOutSine, 57 | duration: this.props.duration, 58 | beginValue: this.props.initial ? 0 : 1, 59 | endValue: 1, 60 | onEnd: cb 61 | }); 62 | }, 63 | componentWillEnter(cb) { 64 | this.tweenState('opacity', { 65 | easing: tweenState.easingTypes.easeOutSine, 66 | duration: this.props.duration, 67 | beginValue: 0, 68 | endValue: 1, 69 | onEnd: cb 70 | }); 71 | }, 72 | componentWillLeave(cb) { 73 | this.tweenState('opacity', { 74 | easing: tweenState.easingTypes.easeOutSine, 75 | duration: this.props.duration, 76 | endValue: 0, 77 | onEnd: () => { 78 | try { 79 | cb() 80 | } catch (e) { 81 | // This try catch handles component umounting jumping the gun 82 | } 83 | } 84 | }); 85 | }, 86 | componentWillReceiveProps(nextProps) { 87 | this.tweenState('top', { 88 | easing: tweenState.easingTypes.easeOutSine, 89 | duration: nextProps.duration, 90 | endValue: nextProps.style.top 91 | }); 92 | this.tweenState('left', { 93 | easing: tweenState.easingTypes.easeOutSine, 94 | duration: nextProps.duration, 95 | endValue: nextProps.style.left 96 | }); 97 | }, 98 | render() { 99 | let style = {}; 100 | if (this.props.style) { 101 | style = { 102 | top: this.getTweeningValue('top'), 103 | left: this.getTweeningValue('left'), 104 | opacity: this.props.fade ? this.getTweeningValue('opacity') : 1, 105 | transform: this.props.scale ? 'scale(' + this.getTweeningValue('opacity') + ')' : 0, 106 | transformOrigin: 'center center', 107 | width: this.props.style.width, 108 | height: this.props.style.height, 109 | position: this.props.style.position 110 | }; 111 | } 112 | let key = this.props.key; 113 | return ( 114 | React.cloneElement(this.props.child, {style, key}) 115 | ) 116 | } 117 | }) 118 | 119 | const Shuffle = React.createClass({ 120 | 121 | displayName: 'Shuffle', 122 | 123 | propTypes: { 124 | duration: React.PropTypes.number, 125 | scale: React.PropTypes.bool, 126 | fade: React.PropTypes.bool, 127 | initial: React.PropTypes.bool 128 | }, 129 | 130 | getDefaultProps() { 131 | return { 132 | duration: 300, 133 | scale: true, 134 | fade: true, 135 | initial: false 136 | } 137 | }, 138 | 139 | getInitialState() { 140 | return { 141 | animating: false, 142 | ready: false 143 | }; 144 | }, 145 | 146 | componentDidMount() { 147 | this._makePortal(); 148 | window.addEventListener('resize', this._renderClonesInitially); 149 | }, 150 | 151 | componentWillUnmount() { 152 | ReactDom.unmountComponentAtNode(this._portalNode); 153 | ReactDom.findDOMNode(this.refs.container).removeChild(this._portalNode); 154 | window.removeEventListener('resize', this._renderClonesInitially); 155 | }, 156 | 157 | componentWillReceiveProps(nextProps) { 158 | this._startAnimation(nextProps); 159 | }, 160 | 161 | componentDidUpdate(prevProps) { 162 | if (this.state.ready === false) { 163 | this.setState({ready: true}, () => { 164 | this._renderClonesInitially(); 165 | }); 166 | } else { 167 | this._renderClonesToNewPositions(this.props); 168 | } 169 | }, 170 | 171 | _makePortal() { 172 | this._portalNode = document.createElement('div'); 173 | this._portalNode.style.left = '0px'; 174 | this._portalNode.style.top = '0px'; 175 | this._portalNode.style.position = 'absolute'; 176 | ReactDom.findDOMNode(this.refs.container).appendChild(this._portalNode); 177 | }, 178 | 179 | _addTransitionEndEvent() { 180 | setTimeout(this._finishAnimation, this.props.duration); 181 | }, 182 | 183 | _startAnimation(nextProps) { 184 | if (this.state.animating) { 185 | return; 186 | } 187 | 188 | let cloneProps = assign({}, nextProps, { 189 | positions: this._getPositions(), 190 | initial: this.props.initial, 191 | fade: this.props.fade, 192 | scale: this.props.scale, 193 | duration: this.props.duration 194 | }); 195 | this._renderClones(cloneProps, () => { 196 | this._addTransitionEndEvent(); 197 | this.setState({animating: true}); 198 | }); 199 | }, 200 | 201 | _renderClonesToNewPositions(props) { 202 | let cloneProps = assign({}, props, { 203 | positions: this._getPositions(), 204 | initial: this.props.initial, 205 | fade: this.props.fade, 206 | scale: this.props.scale, 207 | duration: this.props.duration 208 | }); 209 | this._renderClones(cloneProps); 210 | }, 211 | 212 | _finishAnimation() { 213 | this.setState({animating: false}); 214 | }, 215 | 216 | _getPositions() { 217 | let positions = {}; 218 | React.Children.forEach(this.props.children, (child) => { 219 | let ref = child.key; 220 | let node = ReactDom.findDOMNode(this.refs[ref]); 221 | let rect = node.getBoundingClientRect(); 222 | let computedStyle = getComputedStyle(node); 223 | let marginTop = parseInt(computedStyle.marginTop, 10); 224 | let marginLeft = parseInt(computedStyle.marginLeft, 10); 225 | let position = { 226 | top: (node.offsetTop - marginTop), 227 | left: (node.offsetLeft - marginLeft), 228 | width: rect.width, 229 | height: rect.height, 230 | position: 'absolute', 231 | opacity: 1 232 | }; 233 | positions[ref] = position; 234 | }); 235 | return positions; 236 | }, 237 | 238 | _renderClonesInitially() { 239 | let cloneProps = assign({}, this.props, { 240 | positions: this._getPositions(), 241 | initial: this.props.initial, 242 | fade: this.props.fade, 243 | scale: this.props.scale, 244 | duration: this.props.duration 245 | }); 246 | ReactDom.unstable_renderSubtreeIntoContainer(this, , this._portalNode); 247 | this.setState({ready: true}); 248 | }, 249 | 250 | _renderClones(props, cb) { 251 | ReactDom.unstable_renderSubtreeIntoContainer(this, , this._portalNode, cb); 252 | }, 253 | 254 | _childrenWithRefs() { 255 | return React.Children.map(this.props.children, (child) => 256 | React.cloneElement(child, {ref: child.key}) 257 | ); 258 | }, 259 | 260 | render() { 261 | let { initial, fade, duration, ...props } = this.props; 262 | var showContainer = initial ? 0 : 1; 263 | if (this.state.ready) { 264 | showContainer = 0; 265 | } 266 | return ( 267 |
268 |
269 | {this._childrenWithRefs()} 270 |
271 |
272 | ); 273 | } 274 | }); 275 | 276 | export default Shuffle; 277 | -------------------------------------------------------------------------------- /test/helpers/phantomjs-shims.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | var Ap = Array.prototype; 4 | var slice = Ap.slice; 5 | var Fp = Function.prototype; 6 | 7 | if (!Fp.bind) { 8 | // PhantomJS doesn't support Function.prototype.bind natively, so 9 | // polyfill it whenever this module is required. 10 | Fp.bind = function(context) { 11 | var func = this; 12 | var args = slice.call(arguments, 1); 13 | 14 | function bound() { 15 | var invokedAsConstructor = func.prototype && (this instanceof func); 16 | return func.apply( 17 | // Ignore the context parameter when invoking the bound function 18 | // as a constructor. Note that this includes not only constructor 19 | // invocations using the new keyword but also calls to base class 20 | // constructors such as BaseClass.call(this, ...) or super(...). 21 | !invokedAsConstructor && context || this, 22 | args.concat(slice.call(arguments)) 23 | ); 24 | } 25 | 26 | // The bound function must share the .prototype of the unbound 27 | // function so that any object created by one constructor will count 28 | // as an instance of both constructors. 29 | bound.prototype = func.prototype; 30 | 31 | return bound; 32 | }; 33 | } 34 | })(); 35 | -------------------------------------------------------------------------------- /test/helpers/raf-polyfill.js: -------------------------------------------------------------------------------- 1 | // http://paulirish.com/2011/requestanimationframe-for-smart-animating/ 2 | // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating 3 | 4 | // requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel 5 | 6 | // MIT license 7 | 8 | (function() { 9 | var lastTime = 0; 10 | var vendors = ['ms', 'moz', 'webkit', 'o']; 11 | for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { 12 | window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; 13 | window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] 14 | || window[vendors[x]+'CancelRequestAnimationFrame']; 15 | } 16 | 17 | if (!window.requestAnimationFrame) 18 | window.requestAnimationFrame = function(callback, element) { 19 | var currTime = new Date().getTime(); 20 | var timeToCall = Math.max(0, 16 - (currTime - lastTime)); 21 | var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 22 | timeToCall); 23 | lastTime = currTime + timeToCall; 24 | return id; 25 | }; 26 | 27 | if (!window.cancelAnimationFrame) 28 | window.cancelAnimationFrame = function(id) { 29 | clearTimeout(id); 30 | }; 31 | }()); -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var webpack = require('webpack'); 4 | var path = require('path'); 5 | 6 | module.exports = { 7 | 8 | output: { 9 | path: __dirname, 10 | filename: 'main.js', 11 | publicPath: '/assets/' 12 | }, 13 | 14 | cache: true, 15 | debug: false, 16 | devtool: false, 17 | entry: [ 18 | './demo/app.js' 19 | ], 20 | 21 | stats: { 22 | colors: true, 23 | reasons: true 24 | }, 25 | 26 | resolve: { 27 | extensions: ['', '.js'] 28 | }, 29 | module: { 30 | preLoaders: [{ 31 | test: /\.js$/, 32 | exclude: [/node_modules/,/dist/], 33 | loader: 'eslint-loader' 34 | }], 35 | loaders: [{ 36 | test: /\.js$/, 37 | exclude: [/node_modules/], 38 | loader: 'babel-loader' 39 | }, { 40 | test: /\.css$/, 41 | loader: 'style-loader!css-loader' 42 | }, { 43 | test: /\.(png|jpg)$/, 44 | loader: 'url-loader?limit=8192' 45 | }] 46 | }, 47 | 48 | plugins: [ 49 | new webpack.HotModuleReplacementPlugin(), 50 | new webpack.NoErrorsPlugin() 51 | ] 52 | 53 | }; 54 | -------------------------------------------------------------------------------- /webpack.dist.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var webpack = require('webpack'); 4 | var path = require('path'); 5 | 6 | module.exports = { 7 | 8 | output: { 9 | path: __dirname + '/dist/', 10 | filename: 'react-shuffle.js', 11 | libraryTarget: 'umd' 12 | }, 13 | 14 | debug: false, 15 | devtool: false, 16 | entry: './index.js', 17 | 18 | stats: { 19 | colors: true, 20 | reasons: false 21 | }, 22 | 23 | plugins: [ 24 | new webpack.optimize.UglifyJsPlugin() 25 | ], 26 | 27 | resolve: { 28 | extensions: ['', '.js'] 29 | }, 30 | 31 | module: { 32 | loaders: [{ 33 | test: /\.js$/, 34 | exclude: [/node_modules/], 35 | loader: 'babel-loader' 36 | }] 37 | }, 38 | externals: [ 39 | { 40 | "react": { 41 | root: "React", 42 | commonjs2: "react", 43 | commonjs: "react", 44 | amd: "react" 45 | } 46 | } 47 | ], 48 | }; 49 | --------------------------------------------------------------------------------