From c423b75d8054b335130c76cc1a0127023693713d Mon Sep 17 00:00:00 2001 From: Joshua Comeau Date: Fri, 19 Feb 2016 06:30:01 -0500 Subject: [PATCH] Add support for `className` & `typeName` FlipMove works by enclosing the children it's wrapped around in an ordinary, no-attribute
. Someone messaged me asking if I could add the ability to supply a custom `className`, so that he could add a `row` class to the container, so that it would play nice with Foundation. While I was there, I also added a `typeName` field, which allows you to select a different element than `div`. So, if your children are
  • s, you might want to supply 'ul'. --- dist/react-flip-move.js | 18 ++++++------------ dist/react-flip-move.min.js | 2 +- package.json | 2 +- src/FlipMove.js | 8 ++++---- src/prop-converter.js | 7 +++++-- 5 files changed, 17 insertions(+), 20 deletions(-) diff --git a/dist/react-flip-move.js b/dist/react-flip-move.js index feb8b6a..8c76925 100644 --- a/dist/react-flip-move.js +++ b/dist/react-flip-move.js @@ -319,11 +319,6 @@ return /******/ (function(modules) { // webpackBootstrap }, { key: 'childrenWithRefs', value: function childrenWithRefs() { - // Convert the children to an array, and map. - // Cannot use React.Children.map directly, because the #toArray method - // re-maps some of the keys ('1' -> '.$1'). We need this behaviour to - // be consistent, so we do this conversion upfront. - // See: https://github.com/facebook/react/pull/3650/files return this.props.children.map(function (child) { return _react2.default.cloneElement(child, { ref: child.key }); }); @@ -331,11 +326,7 @@ return /******/ (function(modules) { // webpackBootstrap }, { key: 'render', value: function render() { - return _react2.default.createElement( - 'div', - null, - this.childrenWithRefs() - ); + return _react2.default.createElement(this.props.typeName, { className: this.props.className }, this.childrenWithRefs()); } }]); @@ -432,13 +423,16 @@ return /******/ (function(modules) { // webpackBootstrap staggerDurationBy: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number]), staggerDelayBy: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number]), onStart: _react.PropTypes.func, - onFinish: _react.PropTypes.func + onFinish: _react.PropTypes.func, + className: _react.PropTypes.string, + typeName: _react.PropTypes.string }, _class.defaultProps = { easing: 'ease-in-out', duration: 350, delay: 0, staggerDurationBy: 0, - staggerDelayBy: 0 + staggerDelayBy: 0, + typeName: 'div' }, _temp; } diff --git a/dist/react-flip-move.min.js b/dist/react-flip-move.min.js index 227cbdf..59916ed 100644 --- a/dist/react-flip-move.min.js +++ b/dist/react-flip-move.min.js @@ -1 +1 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],t):"object"==typeof exports?exports.FlipMove=t(require("react"),require("react-dom")):e.FlipMove=t(e.react,e["react-dom"])}(this,function(e,t){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={exports:{},id:n,loaded:!1};return e[n].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){"use strict";e.exports=r(3)},function(e,t){"use strict";function r(e,t){var r="string"==typeof e?parseInt(e):e;return isNaN(r)&&console.error("Invalid prop '"+t+"' supplied to FlipMove. Expected a number, or a string that can easily be resolved to a number (eg. \"100\"). Instead, received '"+e+"'."),r}function n(){for(var e=arguments.length,t=Array(e),n=0;e>n;n++)t[n]=arguments[n];return t.map(r)}function o(){var e={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};if("undefined"==typeof document)return"";var t=document.createElement("fakeelement");for(var r in e)if(void 0!==t.style[r])return e[r]}Object.defineProperty(t,"__esModule",{value:!0}),t.convertToInt=r,t.convertAllToInt=n,t.whichTransitionEvent=o},function(t,r){t.exports=e},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var u,f=function(){function e(e,t){var r=[],n=!0,o=!1,i=void 0;try{for(var a,s=e[Symbol.iterator]();!(n=(a=s.next()).done)&&(r.push(a.value),!t||r.length!==t);n=!0);}catch(u){o=!0,i=u}finally{try{!n&&s.return&&s.return()}finally{if(o)throw i}}return r}return function(t,r){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return e(t,r);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),c=Object.assign||function(e){for(var t=1;tn;n++)t[n]=arguments[n];return t.map(r)}function o(){var e={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};if("undefined"==typeof document)return"";var t=document.createElement("fakeelement");for(var r in e)if(void 0!==t.style[r])return e[r]}Object.defineProperty(t,"__esModule",{value:!0}),t.convertToInt=r,t.convertAllToInt=n,t.whichTransitionEvent=o},function(t,r){t.exports=e},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var u,p=function(){function e(e,t){var r=[],n=!0,o=!1,i=void 0;try{for(var a,s=e[Symbol.iterator]();!(n=(a=s.next()).done)&&(r.push(a.value),!t||r.length!==t);n=!0);}catch(u){o=!0,i=u}finally{try{!n&&s.return&&s.return()}finally{if(o)throw i}}return r}return function(t,r){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return e(t,r);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),c=Object.assign||function(e){for(var t=1;t - {this.childrenWithRefs()} -
    • + return React.createElement( + this.props.typeName, + { className: this.props.className }, + this.childrenWithRefs() ); } } diff --git a/src/prop-converter.js b/src/prop-converter.js index 6a44dfb..cfb49c1 100644 --- a/src/prop-converter.js +++ b/src/prop-converter.js @@ -66,7 +66,9 @@ function propConverter(ComposedComponent) { PropTypes.number ]), onStart: PropTypes.func, - onFinish: PropTypes.func + onFinish: PropTypes.func, + className: PropTypes.string, + typeName: PropTypes.string }; static defaultProps = { @@ -74,7 +76,8 @@ function propConverter(ComposedComponent) { duration: 350, delay: 0, staggerDurationBy: 0, - staggerDelayBy: 0 + staggerDelayBy: 0, + typeName: 'div' }; } }