From a4ff76855791b216bfe353f563d134a4c80af9e7 Mon Sep 17 00:00:00 2001 From: AaronCCWong Date: Mon, 29 Apr 2019 02:37:04 -0400 Subject: [PATCH] Add containerStyle prop to readme --- README.md | 1 + example/build/main.js | 2 +- lib/react-card-flip.js | 4 ++-- lib/react-card-flip.js.map | 3 +-- lib/react-card-flip.min.js | 4 ++-- lib/react-card-flip.min.js.map | 2 +- src/ReactCardFlip.jsx | 1 + 7 files changed, 9 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 7fc4930..1f64a6f 100644 --- a/README.md +++ b/README.md @@ -99,6 +99,7 @@ component as the back of the card. | Props | Type | Description | Default | | -------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------- | ------------ | | cardZIndex | string | z-Index for the flip card. Used to help solve context stack issues while using multiple flip cards. | auto | +| containerStyle | object | Extra css styling that can be applied to the container. | {} | | isFlipped | bool | False to show the front of the card, true to show the back | undefined | | flipSpeedBackToFront | number | The speed of the flip animation when the card flips from back to front, the higher the number the slower the flip animation | 0.6 | | flipSpeedFrontToBack | number | The speed of the flip animation when the card flips from front to back, the higher the number the slower the flip animation | 0.6 | diff --git a/example/build/main.js b/example/build/main.js index a26d848..6e5d359 100644 --- a/example/build/main.js +++ b/example/build/main.js @@ -234,7 +234,7 @@ eval("\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/i /***/ (function(module, exports, __webpack_require__) { "use strict"; -eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _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; };\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _propTypes = __webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\");\n\nvar _propTypes2 = _interopRequireDefault(_propTypes);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar ReactCardFlip = function (_React$Component) {\n _inherits(ReactCardFlip, _React$Component);\n\n function ReactCardFlip(props) {\n _classCallCheck(this, ReactCardFlip);\n\n var _this = _possibleConstructorReturn(this, (ReactCardFlip.__proto__ || Object.getPrototypeOf(ReactCardFlip)).call(this, props));\n\n _this.state = {\n isFlipped: _this.props.isFlipped,\n rotation: 0\n };\n return _this;\n }\n\n _createClass(ReactCardFlip, [{\n key: 'componentWillReceiveProps',\n value: function componentWillReceiveProps(nextProps) {\n if (nextProps.isFlipped !== this.props.isFlipped) {\n this.setState({ isFlipped: nextProps.isFlipped });\n this.setState({ rotation: this.state.rotation + 180 });\n }\n }\n }, {\n key: 'getComponent',\n value: function getComponent(key) {\n return this.props.children.filter(function (component) {\n return component.key === key;\n });\n }\n }, {\n key: 'render',\n value: function render() {\n var _props = this.props,\n flipDirection = _props.flipDirection,\n infinite = _props.infinite,\n flipSpeedFrontToBack = _props.flipSpeedFrontToBack,\n flipSpeedBackToFront = _props.flipSpeedBackToFront,\n _props$cardStyles = _props.cardStyles,\n front = _props$cardStyles.front,\n back = _props$cardStyles.back,\n cardZIndex = _props.cardZIndex;\n var _state = this.state,\n isFlipped = _state.isFlipped,\n rotation = _state.rotation;\n\n\n var frontRotateY = 'rotateY(' + (infinite ? rotation : isFlipped ? 180 : 0) + 'deg)';\n var backRotateY = 'rotateY(' + (infinite ? rotation + 180 : isFlipped ? 0 : -180) + 'deg)';\n var frontRotateX = 'rotateX(' + (infinite ? rotation : isFlipped ? 180 : 0) + 'deg)';\n var backRotateX = 'rotateX(' + (infinite ? rotation + 180 : isFlipped ? 0 : -180) + 'deg)';\n\n var styles = {\n container: {\n perspective: '1000px',\n transformStyle: 'preserve-3d',\n zIndex: '' + cardZIndex\n },\n flipper: {\n position: 'relative',\n transformStyle: 'preserve-3d'\n },\n front: _extends({\n WebkitBackfaceVisibility: 'hidden',\n backfaceVisibility: 'hidden',\n left: '0',\n visibility: isFlipped ? 'hidden' : '',\n position: isFlipped ? 'absolute' : 'relative',\n top: '0',\n transform: flipDirection === 'horizontal' ? frontRotateY : frontRotateX,\n transformStyle: 'preserve-3d',\n width: '100%',\n zIndex: '2',\n transition: flipSpeedBackToFront + 's'\n }, front),\n back: _extends({\n WebkitBackfaceVisibility: 'hidden',\n backfaceVisibility: 'hidden',\n left: '0',\n visibility: isFlipped ? '' : 'hidden',\n position: isFlipped ? 'relative' : 'absolute',\n transform: flipDirection === 'horizontal' ? backRotateY : backRotateX,\n transformStyle: 'preserve-3d',\n top: '0',\n width: '100%',\n transition: flipSpeedFrontToBack + 's'\n }, back)\n };\n\n return _react2.default.createElement(\n 'div',\n { className: 'react-card-flip', style: styles.container },\n _react2.default.createElement(\n 'div',\n { className: 'react-card-flipper', style: styles.flipper },\n _react2.default.createElement(\n 'div',\n { className: 'react-card-front', style: styles.front },\n this.getComponent('front')\n ),\n _react2.default.createElement(\n 'div',\n { className: 'react-card-back', style: styles.back },\n this.getComponent('back')\n )\n )\n );\n }\n }]);\n\n return ReactCardFlip;\n}(_react2.default.Component);\n\nReactCardFlip.propTypes = {\n cardStyles: _propTypes2.default.shape({\n front: _propTypes2.default.object,\n back: _propTypes2.default.object\n }),\n cardZIndex: _propTypes2.default.string,\n children: function children(props, propName, componentName) {\n if (_react2.default.Children.count(props[propName]) !== 2) {\n return new Error(componentName + ' requires two children.');\n }\n },\n flipDirection: function flipDirection(props, propName, componentName) {\n if (!props[propName]) {\n return;\n }\n\n if (!(typeof props[propName] === 'string' || props[propName] instanceof String)) {\n return new Error(propName + ' requires a string.');\n }\n\n if (props[propName].toLowerCase() !== 'horizontal' && props[propName].toLowerCase() !== 'vertical') {\n return new Error(propName + ' expects (horizontal|vertical), got ' + props[propName].toLowerCase());\n }\n },\n flipSpeedBackToFront: _propTypes2.default.number,\n flipSpeedFrontToBack: _propTypes2.default.number,\n infinite: _propTypes2.default.bool,\n isFlipped: _propTypes2.default.bool\n};\n\nReactCardFlip.defaultProps = {\n cardStyles: {\n front: {},\n back: {}\n },\n cardZIndex: 'auto',\n flipDirection: 'horizontal',\n flipSpeedBackToFront: 0.6,\n flipSpeedFrontToBack: 0.6,\n infinite: false,\n isFlipped: false\n};\n\nexports.default = ReactCardFlip;\nmodule.exports = exports['default'];//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9zcmMvUmVhY3RDYXJkRmxpcC5qc3g/NzU4OCJdLCJuYW1lcyI6WyJSZWFjdENhcmRGbGlwIiwicHJvcHMiLCJzdGF0ZSIsImlzRmxpcHBlZCIsInJvdGF0aW9uIiwibmV4dFByb3BzIiwic2V0U3RhdGUiLCJrZXkiLCJjaGlsZHJlbiIsImZpbHRlciIsImNvbXBvbmVudCIsImZsaXBEaXJlY3Rpb24iLCJpbmZpbml0ZSIsImZsaXBTcGVlZEZyb250VG9CYWNrIiwiZmxpcFNwZWVkQmFja1RvRnJvbnQiLCJjYXJkU3R5bGVzIiwiZnJvbnQiLCJiYWNrIiwiY2FyZFpJbmRleCIsImZyb250Um90YXRlWSIsImJhY2tSb3RhdGVZIiwiZnJvbnRSb3RhdGVYIiwiYmFja1JvdGF0ZVgiLCJzdHlsZXMiLCJjb250YWluZXIiLCJwZXJzcGVjdGl2ZSIsInRyYW5zZm9ybVN0eWxlIiwiekluZGV4IiwiZmxpcHBlciIsInBvc2l0aW9uIiwiV2Via2l0QmFja2ZhY2VWaXNpYmlsaXR5IiwiYmFja2ZhY2VWaXNpYmlsaXR5IiwibGVmdCIsInZpc2liaWxpdHkiLCJ0b3AiLCJ0cmFuc2Zvcm0iLCJ3aWR0aCIsInRyYW5zaXRpb24iLCJnZXRDb21wb25lbnQiLCJDb21wb25lbnQiLCJwcm9wVHlwZXMiLCJzaGFwZSIsIm9iamVjdCIsInN0cmluZyIsInByb3BOYW1lIiwiY29tcG9uZW50TmFtZSIsIkNoaWxkcmVuIiwiY291bnQiLCJFcnJvciIsIlN0cmluZyIsInRvTG93ZXJDYXNlIiwibnVtYmVyIiwiYm9vbCIsImRlZmF1bHRQcm9wcyJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7OztBQUFBOzs7O0FBQ0E7Ozs7Ozs7Ozs7OztJQUVNQSxhOzs7QUFDSix5QkFBWUMsS0FBWixFQUFtQjtBQUFBOztBQUFBLDhIQUNYQSxLQURXOztBQUVqQixVQUFLQyxLQUFMLEdBQWE7QUFDWEMsaUJBQVcsTUFBS0YsS0FBTCxDQUFXRSxTQURYO0FBRVhDLGdCQUFVO0FB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QyxVQUZwQyxFQUdFO0FBQ0EsYUFBTyxJQUFJRixLQUFKLENBQ0ZKLFFBREUsNENBQzZDM0MsTUFDaEQyQyxRQURnRCxFQUVoRE0sV0FGZ0QsRUFEN0MsQ0FBUDtBQUtEO0FBQ0YsR0FsQ3VCO0FBbUN4QnBDLHdCQUFzQixvQkFBVXFDLE1BbkNSO0FBb0N4QnRDLHdCQUFzQixvQkFBVXNDLE1BcENSO0FBcUN4QnZDLFlBQVUsb0JBQVV3QyxJQXJDSTtBQXNDeEJqRCxhQUFXLG9CQUFVaUQ7QUF0Q0csQ0FBMUI7O0FBeUNBcEQsY0FBY3FELFlBQWQsR0FBNkI7QUFDM0J0QyxjQUFZO0FBQ1ZDLFdBQU8sRUFERztBQUVWQyxVQUFNO0FBRkksR0FEZTtBQUszQkMsY0FBWSxNQUxlO0FBTTNCUCxpQkFBZSxZQU5ZO0FBTzNCRyx3QkFBc0IsR0FQSztBQVEzQkQsd0JBQXNCLEdBUks7QUFTM0JELFlBQVUsS0FUaUI7QUFVM0JULGFBQVc7QUFWZ0IsQ0FBN0I7O2tCQWFlSCxhIiwiZmlsZSI6Ii4vc3JjL1JlYWN0Q2FyZEZsaXAuanN4LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5cbmNsYXNzIFJlYWN0Q2FyZEZsaXAgZXh0ZW5kcyBSZWFjdC5Db21wb25lbnQge1xuICBjb25zdHJ1Y3Rvcihwcm9wcykge1xuICAgIHN1cGVyKHByb3BzKTtcbiAgICB0aGlzLnN0YXRlID0ge1xuICAgICAgaXNGbGlwcGVkOiB0aGlzLnByb3BzLmlzRmxpcHBlZCxcbiAgICAgIHJvdGF0aW9uOiAwXG4gICAgfTtcbiAgfVxuXG4gIGNvbXBvbmVudFdpbGxSZWNlaXZlUHJvcHMobmV4dFByb3BzKSB7XG4gICAgaWYgKG5leHRQcm9wcy5pc0ZsaXBwZWQgIT09IHRoaXMucHJvcHMuaXNGbGlwcGVkKSB7XG4gICAgICB0aGlzLnNldFN0YXRlKHsgaXNGbGlwcGVkOiBuZXh0UHJvcHMuaXNGbGlwcGVkIH0pO1xuICAgICAgdGhpcy5zZXRTdGF0ZSh7IHJvdGF0aW9uOiB0aGlzLnN0YXRlLnJvdGF0aW9uICsgMTgwIH0pO1xuICAgIH1cbiAgfVxuXG4gIGdldENvbXBvbmVudChrZXkpIHtcbiAgICByZXR1cm4gdGhpcy5wcm9wcy5jaGlsZHJlbi5maWx0ZXIoY29tcG9uZW50ID0+IHtcbiAgICAgIHJldHVybiBjb21wb25lbnQua2V5ID09PSBrZXk7XG4gICAgfSk7XG4gIH1cblxuICByZW5kZXIoKSB7XG4gICAgY29uc3Qge1xuICAgICAgZmxpcERpcmVjdGlvbixcbiAgICAgIGluZmluaXRlLFxuICAgICAgZmxpcFNwZWVkRnJvbnRUb0JhY2ssXG4gICAgICBmbGlwU3BlZWRCYWNrVG9Gcm9udCxcbiAgICAgIGNhcmRTdHlsZXM6IHsgZnJvbnQsIGJhY2sgfSxcbiAgICAgIGNhcmRaSW5kZXhcbiAgICB9ID0gdGhpcy5wcm9wcztcbiAgICBjb25zdCB7IGlzRmxpcHBlZCwgcm90YXRpb24gfSA9IHRoaXMuc3RhdGU7XG5cbiAgICBjb25zdCBmcm9udFJvdGF0ZVkgPSBgcm90YXRlWSgke1xuICAgICAgaW5maW5pdGUgPyByb3RhdGlvbiA6IGlzRmxpcHBlZCA/IDE4MCA6IDBcbiAgICB9ZGVnKWA7XG4gICAgY29uc3QgYmFja1JvdGF0ZVkgPSBgcm90YXRlWSgke1xuICAgICAgaW5maW5pdGUgPyByb3RhdGlvbiArIDE4MCA6IGlzRmxpcHBlZCA/IDAgOiAtMTgwXG4gICAgfWRlZylgO1xuICAgIGNvbnN0IGZyb250Um90YXRlWCA9IGByb3RhdGVYKCR7XG4gICAgICBpbmZpbml0ZSA/IHJvdGF0aW9uIDogaXNGbGlwcGVkID8gMTgwIDogMFxuICAgIH1kZWcpYDtcbiAgICBjb25zdCBiYWNrUm90YXRlWCA9IGByb3RhdGVYKCR7XG4gICAgICBpbmZpbml0ZSA/IHJvdGF0aW9uICsgMTgwIDogaXNGbGlwcGVkID8gMCA6IC0xODBcbiAgICB9ZGVnKWA7XG5cbiAgICBjb25zdCBzdHlsZXMgPSB7XG4gICAgICBjb250YWluZXI6IHtcbiAgICAgICAgcGVyc3BlY3RpdmU6ICcxMDAwcHgnLFxuICAgICAgICB0cmFuc2Zvcm1TdHlsZTogJ3ByZXNlcnZlLTNkJyxcbiAgICAgICAgekluZGV4OiBgJHtjYXJkWkluZGV4fWBcbiAgICAgIH0sXG4gICAgICBmbGlwcGVyOiB7XG4gICAgICAgIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICAgICAgICB0cmFuc2Zvcm1TdHlsZTogJ3ByZXNlcnZlLTNkJ1xuICAgICAgfSxcbiAgICAgIGZyb250OiB7XG4gICAgICAgIFdlYmtpdEJhY2tmYWNlVmlzaWJpbGl0eTogJ2hpZGRlbicsXG4gICAgICAgIGJhY2tmYWNlVmlzaWJpbGl0eTogJ2hpZGRlbicsXG4gICAgICAgIGxlZnQ6ICcwJyxcbiAgICAgICAgdmlzaWJpbGl0eTogaXNGbGlwcGVkID8gJ2hpZGRlbicgOiAnJyxcbiAgICAgICAgcG9zaXRpb246IGlzRmxpcHBlZCA/ICdhYnNvbHV0ZScgOiAncmVsYXRpdmUnLFxuICAgICAgICB0b3A6ICcwJyxcbiAgICAgICAgdHJhbnNmb3JtOiBmbGlwRGlyZWN0aW9uID09PSAnaG9yaXpvbnRhbCcgPyBmcm9udFJvdGF0ZVkgOiBmcm9udFJvdGF0ZVgsXG4gICAgICAgIHRyYW5zZm9ybVN0eWxlOiAncHJlc2VydmUtM2QnLFxuICAgICAgICB3aWR0aDogJzEwMCUnLFxuICAgICAgICB6SW5kZXg6ICcyJyxcbiAgICAgICAgdHJhbnNpdGlvbjogYCR7ZmxpcFNwZWVkQmFja1RvRnJvbnR9c2AsXG4gICAgICAgIC4uLmZyb250XG4gICAgICB9LFxuICAgICAgYmFjazoge1xuICAgICAgICBXZWJraXRCYWNrZmFjZVZpc2liaWxpdHk6ICdoaWRkZW4nLFxuICAgICAgICBiYWNrZmFjZVZpc2liaWxpdHk6ICdoaWRkZW4nLFxuICAgICAgICBsZWZ0OiAnMCcsXG4gICAgICAgIHZpc2liaWxpdHk6IGlzRmxpcHBlZCA/ICcnIDogJ2hpZGRlbicsXG4gICAgICAgIHBvc2l0aW9uOiBpc0ZsaXBwZWQgPyAncmVsYXRpdmUnIDogJ2Fic29sdXRlJyxcbiAgICAgICAgdHJhbnNmb3JtOiBmbGlwRGlyZWN0aW9uID09PSAnaG9yaXpvbnRhbCcgPyBiYWNrUm90YXRlWSA6IGJhY2tSb3RhdGVYLFxuICAgICAgICB0cmFuc2Zvcm1TdHlsZTogJ3ByZXNlcnZlLTNkJyxcbiAgICAgICAgdG9wOiAnMCcsXG4gICAgICAgIHdpZHRoOiAnMTAwJScsXG4gICAgICAgIHRyYW5zaXRpb246IGAke2ZsaXBTcGVlZEZyb250VG9CYWNrfXNgLFxuICAgICAgICAuLi5iYWNrXG4gICAgICB9XG4gICAgfTtcblxuICAgIHJldHVybiAoXG4gICAgICA8ZGl2IGNsYXNzTmFtZT1cInJlYWN0LWNhcmQtZmxpcFwiIHN0eWxlPXtzdHlsZXMuY29udGFpbmVyfT5cbiAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJyZWFjdC1jYXJkLWZsaXBwZXJcIiBzdHlsZT17c3R5bGVzLmZsaXBwZXJ9PlxuICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPVwicmVhY3QtY2FyZC1mcm9udFwiIHN0eWxlPXtzdHlsZXMuZnJvbnR9PlxuICAgICAgICAgICAge3RoaXMuZ2V0Q29tcG9uZW50KCdmcm9udCcpfVxuICAgICAgICAgIDwvZGl2PlxuXG4gICAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJyZWFjdC1jYXJkLWJhY2tcIiBzdHlsZT17c3R5bGVzLmJhY2t9PlxuICAgICAgICAgICAge3RoaXMuZ2V0Q29tcG9uZW50KCdiYWNrJyl9XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgKTtcbiAgfVxufVxuXG5SZWFjdENhcmRGbGlwLnByb3BUeXBlcyA9IHtcbiAgY2FyZFN0eWxlczogUHJvcFR5cGVzLnNoYXBlKHtcbiAgICBmcm9udDogUHJvcFR5cGVzLm9iamVjdCxcbiAgICBiYWNrOiBQcm9wVHlwZXMub2JqZWN0XG4gIH0pLFxuICBjYXJkWkluZGV4OiBQcm9wVHlwZXMuc3RyaW5nLFxuICBjaGlsZHJlbjogKHByb3BzLCBwcm9wTmFtZSwgY29tcG9uZW50TmFtZSkgPT4ge1xuICAgIGlmIChSZWFjdC5DaGlsZHJlbi5jb3VudChwcm9wc1twcm9wTmFtZV0pICE9PSAyKSB7XG4gICAgICByZXR1cm4gbmV3IEVycm9yKGAke2NvbXBvbmVudE5hbWV9IHJlcXVpcmVzIHR3byBjaGlsZHJlbi5gKTtcbiAgICB9XG4gIH0sXG4gIGZsaXBEaXJlY3Rpb246IChwcm9wcywgcHJvcE5hbWUsIGNvbXBvbmVudE5hbWUpID0+IHtcbiAgICBpZiAoIXByb3BzW3Byb3BOYW1lXSkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIGlmIChcbiAgICAgICEoXG4gICAgICAgIHR5cGVvZiBwcm9wc1twcm9wTmFtZV0gPT09ICdzdHJpbmcnIHx8IHByb3BzW3Byb3BOYW1lXSBpbnN0YW5jZW9mIFN0cmluZ1xuICAgICAgKVxuICAgICkge1xuICAgICAgcmV0dXJuIG5ldyBFcnJvcihgJHtwcm9wTmFtZX0gcmVxdWlyZXMgYSBzdHJpbmcuYCk7XG4gICAgfVxuXG4gICAgaWYgKFxuICAgICAgcHJvcHNbcHJvcE5hbWVdLnRvTG93ZXJDYXNlKCkgIT09ICdob3Jpem9udGFsJyAmJlxuICAgICAgcHJvcHNbcHJvcE5hbWVdLnRvTG93ZXJDYXNlKCkgIT09ICd2ZXJ0aWNhbCdcbiAgICApIHtcbiAgICAgIHJldHVybiBuZXcgRXJyb3IoXG4gICAgICAgIGAke3Byb3BOYW1lfSBleHBlY3RzIChob3Jpem9udGFsfHZlcnRpY2FsKSwgZ290ICR7cHJvcHNbXG4gICAgICAgICAgcHJvcE5hbWVcbiAgICAgICAgXS50b0xvd2VyQ2FzZSgpfWBcbiAgICAgICk7XG4gICAgfVxuICB9LFxuICBmbGlwU3BlZWRCYWNrVG9Gcm9udDogUHJvcFR5cGVzLm51bWJlcixcbiAgZmxpcFNwZWVkRnJvbnRUb0JhY2s6IFByb3BUeXBlcy5udW1iZXIsXG4gIGluZmluaXRlOiBQcm9wVHlwZXMuYm9vbCxcbiAgaXNGbGlwcGVkOiBQcm9wVHlwZXMuYm9vbFxufTtcblxuUmVhY3RDYXJkRmxpcC5kZWZhdWx0UHJvcHMgPSB7XG4gIGNhcmRTdHlsZXM6IHtcbiAgICBmcm9udDoge30sXG4gICAgYmFjazoge31cbiAgfSxcbiAgY2FyZFpJbmRleDogJ2F1dG8nLFxuICBmbGlwRGlyZWN0aW9uOiAnaG9yaXpvbnRhbCcsXG4gIGZsaXBTcGVlZEJhY2tUb0Zyb250OiAwLjYsXG4gIGZsaXBTcGVlZEZyb250VG9CYWNrOiAwLjYsXG4gIGluZmluaXRlOiBmYWxzZSxcbiAgaXNGbGlwcGVkOiBmYWxzZVxufTtcblxuZXhwb3J0IGRlZmF1bHQgUmVhY3RDYXJkRmxpcDtcbiJdLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///./src/ReactCardFlip.jsx\n"); +eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _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; };\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _propTypes = __webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\");\n\nvar _propTypes2 = _interopRequireDefault(_propTypes);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar ReactCardFlip = function (_React$Component) {\n _inherits(ReactCardFlip, _React$Component);\n\n function ReactCardFlip(props) {\n _classCallCheck(this, ReactCardFlip);\n\n var _this = _possibleConstructorReturn(this, (ReactCardFlip.__proto__ || Object.getPrototypeOf(ReactCardFlip)).call(this, props));\n\n _this.state = {\n isFlipped: _this.props.isFlipped,\n rotation: 0\n };\n return _this;\n }\n\n _createClass(ReactCardFlip, [{\n key: 'componentWillReceiveProps',\n value: function componentWillReceiveProps(nextProps) {\n if (nextProps.isFlipped !== this.props.isFlipped) {\n this.setState({ isFlipped: nextProps.isFlipped });\n this.setState({ rotation: this.state.rotation + 180 });\n }\n }\n }, {\n key: 'getComponent',\n value: function getComponent(key) {\n return this.props.children.filter(function (component) {\n return component.key === key;\n });\n }\n }, {\n key: 'render',\n value: function render() {\n var _props = this.props,\n flipDirection = _props.flipDirection,\n infinite = _props.infinite,\n flipSpeedFrontToBack = _props.flipSpeedFrontToBack,\n flipSpeedBackToFront = _props.flipSpeedBackToFront,\n _props$cardStyles = _props.cardStyles,\n front = _props$cardStyles.front,\n back = _props$cardStyles.back,\n containerStyle = _props.containerStyle,\n cardZIndex = _props.cardZIndex;\n var _state = this.state,\n isFlipped = _state.isFlipped,\n rotation = _state.rotation;\n\n\n var frontRotateY = 'rotateY(' + (infinite ? rotation : isFlipped ? 180 : 0) + 'deg)';\n var backRotateY = 'rotateY(' + (infinite ? rotation + 180 : isFlipped ? 0 : -180) + 'deg)';\n var frontRotateX = 'rotateX(' + (infinite ? rotation : isFlipped ? 180 : 0) + 'deg)';\n var backRotateX = 'rotateX(' + (infinite ? rotation + 180 : isFlipped ? 0 : -180) + 'deg)';\n\n var styles = {\n container: {\n perspective: '1000px',\n transformStyle: 'preserve-3d',\n zIndex: '' + cardZIndex\n },\n flipper: {\n position: 'relative',\n transformStyle: 'preserve-3d',\n width: '100%',\n height: '100%'\n },\n front: _extends({\n WebkitBackfaceVisibility: 'hidden',\n backfaceVisibility: 'hidden',\n left: '0',\n visibility: isFlipped ? 'hidden' : '',\n position: isFlipped ? 'absolute' : 'relative',\n top: '0',\n transform: flipDirection === 'horizontal' ? frontRotateY : frontRotateX,\n transformStyle: 'preserve-3d',\n width: '100%',\n height: '100%',\n zIndex: '2',\n transition: flipSpeedBackToFront + 's'\n }, front),\n back: _extends({\n WebkitBackfaceVisibility: 'hidden',\n backfaceVisibility: 'hidden',\n left: '0',\n visibility: isFlipped ? '' : 'hidden',\n position: isFlipped ? 'relative' : 'absolute',\n transform: flipDirection === 'horizontal' ? backRotateY : backRotateX,\n transformStyle: 'preserve-3d',\n top: '0',\n width: '100%',\n height: '100%',\n transition: flipSpeedFrontToBack + 's'\n }, back)\n };\n\n return _react2.default.createElement(\n 'div',\n { className: 'react-card-flip', style: _extends({}, styles.container, containerStyle) },\n _react2.default.createElement(\n 'div',\n { className: 'react-card-flipper', style: styles.flipper },\n _react2.default.createElement(\n 'div',\n { className: 'react-card-front', style: styles.front },\n this.getComponent('front')\n ),\n _react2.default.createElement(\n 'div',\n { className: 'react-card-back', style: styles.back },\n this.getComponent('back')\n )\n )\n );\n }\n }]);\n\n return ReactCardFlip;\n}(_react2.default.Component);\n\nReactCardFlip.propTypes = {\n cardStyles: _propTypes2.default.shape({\n front: _propTypes2.default.object,\n back: _propTypes2.default.object\n }),\n cardZIndex: _propTypes2.default.string,\n children: function children(props, propName, componentName) {\n if (_react2.default.Children.count(props[propName]) !== 2) {\n return new Error(componentName + ' requires two children.');\n }\n },\n containerStyle: _propTypes2.default.object,\n flipDirection: function flipDirection(props, propName, componentName) {\n if (!props[propName]) {\n return;\n }\n\n if (!(typeof props[propName] === 'string' || props[propName] instanceof String)) {\n return new Error(propName + ' requires a string.');\n }\n\n if (props[propName].toLowerCase() !== 'horizontal' && props[propName].toLowerCase() !== 'vertical') {\n return new Error(propName + ' expects (horizontal|vertical), got ' + props[propName].toLowerCase());\n }\n },\n flipSpeedBackToFront: _propTypes2.default.number,\n flipSpeedFrontToBack: _propTypes2.default.number,\n infinite: _propTypes2.default.bool,\n isFlipped: _propTypes2.default.bool\n};\n\nReactCardFlip.defaultProps = {\n containerStyle: {},\n cardStyles: {\n front: {},\n back: {}\n },\n cardZIndex: 'auto',\n flipDirection: 'horizontal',\n flipSpeedBackToFront: 0.6,\n flipSpeedFrontToBack: 0.6,\n infinite: false,\n isFlipped: false\n};\n\nexports.default = ReactCardFlip;\nmodule.exports = exports['default'];//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9zcmMvUmVhY3RDYXJkRmxpcC5qc3g/NzU4OCJdLCJuYW1lcyI6WyJSZWFjdENhcmRGbGlwIiwicHJvcHMiLCJzdGF0ZSIsImlzRmxpcHBlZCIsInJvdGF0aW9uIiwibmV4dFByb3BzIiwic2V0U3RhdGUiLCJrZXkiLCJjaGlsZHJlbiIsImZpbHRlciIsImNvbXBvbmVudCIsImZsaXBEaXJlY3Rpb24iLCJpbmZpbml0ZSIsImZsaXBTcGVlZEZyb250VG9CYWNrIiwiZmxpcFNwZWVkQmFja1RvRnJvbnQiLCJjYXJkU3R5bGVzIiwiZnJvbnQiLCJiYWNrIiwiY29udGFpbmVyU3R5bGUiLCJjYXJkWkluZGV4IiwiZnJvbnRSb3RhdGVZIiwiYmFja1JvdGF0ZVkiLCJmcm9udFJvdGF0ZVgiLCJiYWNrUm90YXRlWCIsInN0eWxlcyIsImNvbnRhaW5lciIsInBlcnNwZWN0aXZlIiwidHJhbnNmb3JtU3R5bGUiLCJ6SW5kZXgiLCJmbGlwcGVyIiwicG9zaXRpb24iLCJ3aWR0aCIsImhlaWdodCIsIldlYmtpdEJhY2tmYWNlVmlzaWJpbGl0eSIsImJhY2tmYWNlVmlzaWJpbGl0eSIsImxlZnQiLCJ2aXNpYmlsaXR5IiwidG9wIiwidHJhbnNmb3JtIiwidHJhbnNpdGlvbiIsImdldENvbXBvbmVudCIsIkNvbXBvbmVudCIsInByb3BUeXBlcyIsInNoYXBlIiwib2JqZWN0Iiwic3RyaW5nIiwicHJvcE5hbWUiLCJjb21wb25lbnROYW1lIiwiQ2hpbGRyZW4iLCJjb3VudCIsIkVycm9yIiwiU3RyaW5nIiwidG9Mb3dlckNhc2UiLCJudW1iZXIiLCJib29sIiwiZGVmYXVsdFByb3BzIl0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7O0FBQUE7Ozs7QUFDQTs7Ozs7Ozs7Ozs7O0lBRU1BLGE7OztBQUNKLHlCQUFZQyxLQUFaLEVBQW1CO0FBQUE7O0FBQUEsOEhBQ1hBLEtBRFc7O0FBRWpCLFVBQUtDLEtBQUwsR0FBYTtBQUNYQyxpQkFBVyxNQUFLRixLQUFM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QixJQUF1QzdDLE1BQU02QyxRQUFOLGFBQTJCSyxNQURwRSxDQURGLEVBSUU7QUFDQSxhQUFPLElBQUlELEtBQUosQ0FBYUosUUFBYix5QkFBUDtBQUNEOztBQUVELFFBQ0U3QyxNQUFNNkMsUUFBTixFQUFnQk0sV0FBaEIsT0FBa0MsWUFBbEMsSUFDQW5ELE1BQU02QyxRQUFOLEVBQWdCTSxXQUFoQixPQUFrQyxVQUZwQyxFQUdFO0FBQ0EsYUFBTyxJQUFJRixLQUFKLENBQ0ZKLFFBREUsNENBQzZDN0MsTUFDaEQ2QyxRQURnRCxFQUVoRE0sV0FGZ0QsRUFEN0MsQ0FBUDtBQUtEO0FBQ0YsR0FuQ3VCO0FBb0N4QnRDLHdCQUFzQixvQkFBVXVDLE1BcENSO0FBcUN4QnhDLHdCQUFzQixvQkFBVXdDLE1BckNSO0FBc0N4QnpDLFlBQVUsb0JBQVUwQyxJQXRDSTtBQXVDeEJuRCxhQUFXLG9CQUFVbUQ7QUF2Q0csQ0FBMUI7O0FBMENBdEQsY0FBY3VELFlBQWQsR0FBNkI7QUFDM0JyQyxrQkFBZ0IsRUFEVztBQUUzQkgsY0FBWTtBQUNWQyxXQUFPLEVBREc7QUFFVkMsVUFBTTtBQUZJLEdBRmU7QUFNM0JFLGNBQVksTUFOZTtBQU8zQlIsaUJBQWUsWUFQWTtBQVEzQkcsd0JBQXNCLEdBUks7QUFTM0JELHdCQUFzQixHQVRLO0FBVTNCRCxZQUFVLEtBVmlCO0FBVzNCVCxhQUFXO0FBWGdCLENBQTdCOztrQkFjZUgsYSIsImZpbGUiOiIuL3NyYy9SZWFjdENhcmRGbGlwLmpzeC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuXG5jbGFzcyBSZWFjdENhcmRGbGlwIGV4dGVuZHMgUmVhY3QuQ29tcG9uZW50IHtcbiAgY29uc3RydWN0b3IocHJvcHMpIHtcbiAgICBzdXBlcihwcm9wcyk7XG4gICAgdGhpcy5zdGF0ZSA9IHtcbiAgICAgIGlzRmxpcHBlZDogdGhpcy5wcm9wcy5pc0ZsaXBwZWQsXG4gICAgICByb3RhdGlvbjogMFxuICAgIH07XG4gIH1cblxuICBjb21wb25lbnRXaWxsUmVjZWl2ZVByb3BzKG5leHRQcm9wcykge1xuICAgIGlmIChuZXh0UHJvcHMuaXNGbGlwcGVkICE9PSB0aGlzLnByb3BzLmlzRmxpcHBlZCkge1xuICAgICAgdGhpcy5zZXRTdGF0ZSh7IGlzRmxpcHBlZDogbmV4dFByb3BzLmlzRmxpcHBlZCB9KTtcbiAgICAgIHRoaXMuc2V0U3RhdGUoeyByb3RhdGlvbjogdGhpcy5zdGF0ZS5yb3RhdGlvbiArIDE4MCB9KTtcbiAgICB9XG4gIH1cblxuICBnZXRDb21wb25lbnQoa2V5KSB7XG4gICAgcmV0dXJuIHRoaXMucHJvcHMuY2hpbGRyZW4uZmlsdGVyKGNvbXBvbmVudCA9PiB7XG4gICAgICByZXR1cm4gY29tcG9uZW50LmtleSA9PT0ga2V5O1xuICAgIH0pO1xuICB9XG5cbiAgcmVuZGVyKCkge1xuICAgIGNvbnN0IHtcbiAgICAgIGZsaXBEaXJlY3Rpb24sXG4gICAgICBpbmZpbml0ZSxcbiAgICAgIGZsaXBTcGVlZEZyb250VG9CYWNrLFxuICAgICAgZmxpcFNwZWVkQmFja1RvRnJvbnQsXG4gICAgICBjYXJkU3R5bGVzOiB7IGZyb250LCBiYWNrIH0sXG4gICAgICBjb250YWluZXJTdHlsZSxcbiAgICAgIGNhcmRaSW5kZXhcbiAgICB9ID0gdGhpcy5wcm9wcztcbiAgICBjb25zdCB7IGlzRmxpcHBlZCwgcm90YXRpb24gfSA9IHRoaXMuc3RhdGU7XG5cbiAgICBjb25zdCBmcm9udFJvdGF0ZVkgPSBgcm90YXRlWSgke1xuICAgICAgaW5maW5pdGUgPyByb3RhdGlvbiA6IGlzRmxpcHBlZCA/IDE4MCA6IDBcbiAgICB9ZGVnKWA7XG4gICAgY29uc3QgYmFja1JvdGF0ZVkgPSBgcm90YXRlWSgke1xuICAgICAgaW5maW5pdGUgPyByb3RhdGlvbiArIDE4MCA6IGlzRmxpcHBlZCA/IDAgOiAtMTgwXG4gICAgfWRlZylgO1xuICAgIGNvbnN0IGZyb250Um90YXRlWCA9IGByb3RhdGVYKCR7XG4gICAgICBpbmZpbml0ZSA/IHJvdGF0aW9uIDogaXNGbGlwcGVkID8gMTgwIDogMFxuICAgIH1kZWcpYDtcbiAgICBjb25zdCBiYWNrUm90YXRlWCA9IGByb3RhdGVYKCR7XG4gICAgICBpbmZpbml0ZSA/IHJvdGF0aW9uICsgMTgwIDogaXNGbGlwcGVkID8gMCA6IC0xODBcbiAgICB9ZGVnKWA7XG5cbiAgICBjb25zdCBzdHlsZXMgPSB7XG4gICAgICBjb250YWluZXI6IHtcbiAgICAgICAgcGVyc3BlY3RpdmU6ICcxMDAwcHgnLFxuICAgICAgICB0cmFuc2Zvcm1TdHlsZTogJ3ByZXNlcnZlLTNkJyxcbiAgICAgICAgekluZGV4OiBgJHtjYXJkWkluZGV4fWBcbiAgICAgIH0sXG4gICAgICBmbGlwcGVyOiB7XG4gICAgICAgIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICAgICAgICB0cmFuc2Zvcm1TdHlsZTogJ3ByZXNlcnZlLTNkJyxcbiAgICAgICAgd2lkdGg6ICcxMDAlJyxcbiAgICAgICAgaGVpZ2h0OiAnMTAwJScsXG4gICAgICB9LFxuICAgICAgZnJvbnQ6IHtcbiAgICAgICAgV2Via2l0QmFja2ZhY2VWaXNpYmlsaXR5OiAnaGlkZGVuJyxcbiAgICAgICAgYmFja2ZhY2VWaXNpYmlsaXR5OiAnaGlkZGVuJyxcbiAgICAgICAgbGVmdDogJzAnLFxuICAgICAgICB2aXNpYmlsaXR5OiBpc0ZsaXBwZWQgPyAnaGlkZGVuJyA6ICcnLFxuICAgICAgICBwb3NpdGlvbjogaXNGbGlwcGVkID8gJ2Fic29sdXRlJyA6ICdyZWxhdGl2ZScsXG4gICAgICAgIHRvcDogJzAnLFxuICAgICAgICB0cmFuc2Zvcm06IGZsaXBEaXJlY3Rpb24gPT09ICdob3Jpem9udGFsJyA/IGZyb250Um90YXRlWSA6IGZyb250Um90YXRlWCxcbiAgICAgICAgdHJhbnNmb3JtU3R5bGU6ICdwcmVzZXJ2ZS0zZCcsXG4gICAgICAgIHdpZHRoOiAnMTAwJScsXG4gICAgICAgIGhlaWdodDogJzEwMCUnLFxuICAgICAgICB6SW5kZXg6ICcyJyxcbiAgICAgICAgdHJhbnNpdGlvbjogYCR7ZmxpcFNwZWVkQmFja1RvRnJvbnR9c2AsXG4gICAgICAgIC4uLmZyb250XG4gICAgICB9LFxuICAgICAgYmFjazoge1xuICAgICAgICBXZWJraXRCYWNrZmFjZVZpc2liaWxpdHk6ICdoaWRkZW4nLFxuICAgICAgICBiYWNrZmFjZVZpc2liaWxpdHk6ICdoaWRkZW4nLFxuICAgICAgICBsZWZ0OiAnMCcsXG4gICAgICAgIHZpc2liaWxpdHk6IGlzRmxpcHBlZCA/ICcnIDogJ2hpZGRlbicsXG4gICAgICAgIHBvc2l0aW9uOiBpc0ZsaXBwZWQgPyAncmVsYXRpdmUnIDogJ2Fic29sdXRlJyxcbiAgICAgICAgdHJhbnNmb3JtOiBmbGlwRGlyZWN0aW9uID09PSAnaG9yaXpvbnRhbCcgPyBiYWNrUm90YXRlWSA6IGJhY2tSb3RhdGVYLFxuICAgICAgICB0cmFuc2Zvcm1TdHlsZTogJ3ByZXNlcnZlLTNkJyxcbiAgICAgICAgdG9wOiAnMCcsXG4gICAgICAgIHdpZHRoOiAnMTAwJScsXG4gICAgICAgIGhlaWdodDogJzEwMCUnLFxuICAgICAgICB0cmFuc2l0aW9uOiBgJHtmbGlwU3BlZWRGcm9udFRvQmFja31zYCxcbiAgICAgICAgLi4uYmFja1xuICAgICAgfVxuICAgIH07XG5cbiAgICByZXR1cm4gKFxuICAgICAgPGRpdiBjbGFzc05hbWU9XCJyZWFjdC1jYXJkLWZsaXBcIiBzdHlsZT17ey4uLnN0eWxlcy5jb250YWluZXIsIC4uLmNvbnRhaW5lclN0eWxlfX0+XG4gICAgICAgIDxkaXYgY2xhc3NOYW1lPVwicmVhY3QtY2FyZC1mbGlwcGVyXCIgc3R5bGU9e3N0eWxlcy5mbGlwcGVyfT5cbiAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT1cInJlYWN0LWNhcmQtZnJvbnRcIiBzdHlsZT17c3R5bGVzLmZyb250fT5cbiAgICAgICAgICAgIHt0aGlzLmdldENvbXBvbmVudCgnZnJvbnQnKX1cbiAgICAgICAgICA8L2Rpdj5cblxuICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPVwicmVhY3QtY2FyZC1iYWNrXCIgc3R5bGU9e3N0eWxlcy5iYWNrfT5cbiAgICAgICAgICAgIHt0aGlzLmdldENvbXBvbmVudCgnYmFjaycpfVxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgICk7XG4gIH1cbn1cblxuUmVhY3RDYXJkRmxpcC5wcm9wVHlwZXMgPSB7XG4gIGNhcmRTdHlsZXM6IFByb3BUeXBlcy5zaGFwZSh7XG4gICAgZnJvbnQ6IFByb3BUeXBlcy5vYmplY3QsXG4gICAgYmFjazogUHJvcFR5cGVzLm9iamVjdFxuICB9KSxcbiAgY2FyZFpJbmRleDogUHJvcFR5cGVzLnN0cmluZyxcbiAgY2hpbGRyZW46IChwcm9wcywgcHJvcE5hbWUsIGNvbXBvbmVudE5hbWUpID0+IHtcbiAgICBpZiAoUmVhY3QuQ2hpbGRyZW4uY291bnQocHJvcHNbcHJvcE5hbWVdKSAhPT0gMikge1xuICAgICAgcmV0dXJuIG5ldyBFcnJvcihgJHtjb21wb25lbnROYW1lfSByZXF1aXJlcyB0d28gY2hpbGRyZW4uYCk7XG4gICAgfVxuICB9LFxuICBjb250YWluZXJTdHlsZTogUHJvcFR5cGVzLm9iamVjdCxcbiAgZmxpcERpcmVjdGlvbjogKHByb3BzLCBwcm9wTmFtZSwgY29tcG9uZW50TmFtZSkgPT4ge1xuICAgIGlmICghcHJvcHNbcHJvcE5hbWVdKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgaWYgKFxuICAgICAgIShcbiAgICAgICAgdHlwZW9mIHByb3BzW3Byb3BOYW1lXSA9PT0gJ3N0cmluZycgfHwgcHJvcHNbcHJvcE5hbWVdIGluc3RhbmNlb2YgU3RyaW5nXG4gICAgICApXG4gICAgKSB7XG4gICAgICByZXR1cm4gbmV3IEVycm9yKGAke3Byb3BOYW1lfSByZXF1aXJlcyBhIHN0cmluZy5gKTtcbiAgICB9XG5cbiAgICBpZiAoXG4gICAgICBwcm9wc1twcm9wTmFtZV0udG9Mb3dlckNhc2UoKSAhPT0gJ2hvcml6b250YWwnICYmXG4gICAgICBwcm9wc1twcm9wTmFtZV0udG9Mb3dlckNhc2UoKSAhPT0gJ3ZlcnRpY2FsJ1xuICAgICkge1xuICAgICAgcmV0dXJuIG5ldyBFcnJvcihcbiAgICAgICAgYCR7cHJvcE5hbWV9IGV4cGVjdHMgKGhvcml6b250YWx8dmVydGljYWwpLCBnb3QgJHtwcm9wc1tcbiAgICAgICAgICBwcm9wTmFtZVxuICAgICAgICBdLnRvTG93ZXJDYXNlKCl9YFxuICAgICAgKTtcbiAgICB9XG4gIH0sXG4gIGZsaXBTcGVlZEJhY2tUb0Zyb250OiBQcm9wVHlwZXMubnVtYmVyLFxuICBmbGlwU3BlZWRGcm9udFRvQmFjazogUHJvcFR5cGVzLm51bWJlcixcbiAgaW5maW5pdGU6IFByb3BUeXBlcy5ib29sLFxuICBpc0ZsaXBwZWQ6IFByb3BUeXBlcy5ib29sXG59O1xuXG5SZWFjdENhcmRGbGlwLmRlZmF1bHRQcm9wcyA9IHtcbiAgY29udGFpbmVyU3R5bGU6IHt9LFxuICBjYXJkU3R5bGVzOiB7XG4gICAgZnJvbnQ6IHt9LFxuICAgIGJhY2s6IHt9XG4gIH0sXG4gIGNhcmRaSW5kZXg6ICdhdXRvJyxcbiAgZmxpcERpcmVjdGlvbjogJ2hvcml6b250YWwnLFxuICBmbGlwU3BlZWRCYWNrVG9Gcm9udDogMC42LFxuICBmbGlwU3BlZWRGcm9udFRvQmFjazogMC42LFxuICBpbmZpbml0ZTogZmFsc2UsXG4gIGlzRmxpcHBlZDogZmFsc2Vcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFJlYWN0Q2FyZEZsaXA7XG4iXSwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///./src/ReactCardFlip.jsx\n"); /***/ }) diff --git a/lib/react-card-flip.js b/lib/react-card-flip.js index b0d3d62..678d77a 100644 --- a/lib/react-card-flip.js +++ b/lib/react-card-flip.js @@ -1,4 +1,4 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("react-card-flip",[],t):"object"==typeof exports?exports["react-card-flip"]=t():e["react-card-flip"]=t()}(window,function(){return function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=1)}([function(e,t,r){"use strict";function n(e){return function(){return e}}var o=function(){};o.thatReturns=n,o.thatReturnsFalse=n(!1),o.thatReturnsTrue=n(!0),o.thatReturnsNull=n(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(e){return e},e.exports=o},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=Object.assign||function(e){for(var t=1;tP.length&&P.push(e)}function R(e,t,r,n){var o=typeof e;"undefined"!==o&&"boolean"!==o||(e=null);var i=!1;if(null===e)i=!0;else switch(o){case"string":case"number":i=!0;break;case"object":switch(e.$$typeof){case u:case c:case l:case f:i=!0}}if(i)return r(n,e,""===t?"."+C(e,0):t),1;if(i=0,t=""===t?".":t+":",Array.isArray(e))for(var a=0;aP.length&&P.push(e)}function R(e,t,r,n){var o=typeof e;"undefined"!==o&&"boolean"!==o||(e=null);var i=!1;if(null===e)i=!0;else switch(o){case"string":case"number":i=!0;break;case"object":switch(e.$$typeof){case u:case c:case l:case f:i=!0}}if(i)return r(n,e,""===t?"."+C(e,0):t),1;if(i=0,t=""===t?".":t+":",Array.isArray(e))for(var a=0;a {\n return component.key === key;\n });\n }\n\n render() {\n const {\n flipDirection,\n infinite,\n flipSpeedFrontToBack,\n flipSpeedBackToFront,\n cardStyles: { front, back },\n cardZIndex\n } = this.props;\n const { isFlipped, rotation } = this.state;\n\n const frontRotateY = `rotateY(${\n infinite ? rotation : isFlipped ? 180 : 0\n }deg)`;\n const backRotateY = `rotateY(${\n infinite ? rotation + 180 : isFlipped ? 0 : -180\n }deg)`;\n const frontRotateX = `rotateX(${\n infinite ? rotation : isFlipped ? 180 : 0\n }deg)`;\n const backRotateX = `rotateX(${\n infinite ? rotation + 180 : isFlipped ? 0 : -180\n }deg)`;\n\n const styles = {\n container: {\n perspective: '1000px',\n transformStyle: 'preserve-3d',\n zIndex: `${cardZIndex}`\n },\n flipper: {\n position: 'relative',\n transformStyle: 'preserve-3d'\n },\n front: {\n WebkitBackfaceVisibility: 'hidden',\n backfaceVisibility: 'hidden',\n left: '0',\n visibility: isFlipped ? 'hidden' : '',\n position: isFlipped ? 'absolute' : 'relative',\n top: '0',\n transform: flipDirection === 'horizontal' ? frontRotateY : frontRotateX,\n transformStyle: 'preserve-3d',\n width: '100%',\n zIndex: '2',\n transition: `${flipSpeedBackToFront}s`,\n ...front\n },\n back: {\n WebkitBackfaceVisibility: 'hidden',\n backfaceVisibility: 'hidden',\n left: '0',\n visibility: isFlipped ? '' : 'hidden',\n position: isFlipped ? 'relative' : 'absolute',\n transform: flipDirection === 'horizontal' ? backRotateY : backRotateX,\n transformStyle: 'preserve-3d',\n top: '0',\n width: '100%',\n transition: `${flipSpeedFrontToBack}s`,\n ...back\n }\n };\n\n return (\n
\n
\n
\n {this.getComponent('front')}\n
\n\n
\n {this.getComponent('back')}\n
\n
\n
\n );\n }\n}\n\nReactCardFlip.propTypes = {\n cardStyles: PropTypes.shape({\n front: PropTypes.object,\n back: PropTypes.object\n }),\n cardZIndex: PropTypes.string,\n children: (props, propName, componentName) => {\n if (React.Children.count(props[propName]) !== 2) {\n return new Error(`${componentName} requires two children.`);\n }\n },\n flipDirection: (props, propName, componentName) => {\n if (!props[propName]) {\n return;\n }\n\n if (\n !(\n typeof props[propName] === 'string' || props[propName] instanceof String\n )\n ) {\n return new Error(`${propName} requires a string.`);\n }\n\n if (\n props[propName].toLowerCase() !== 'horizontal' &&\n props[propName].toLowerCase() !== 'vertical'\n ) {\n return new Error(\n `${propName} expects (horizontal|vertical), got ${props[\n propName\n ].toLowerCase()}`\n );\n }\n },\n flipSpeedBackToFront: PropTypes.number,\n flipSpeedFrontToBack: PropTypes.number,\n infinite: PropTypes.bool,\n isFlipped: PropTypes.bool\n};\n\nReactCardFlip.defaultProps = {\n cardStyles: {\n front: {},\n back: {}\n },\n cardZIndex: 'auto',\n flipDirection: 'horizontal',\n flipSpeedBackToFront: 0.6,\n flipSpeedFrontToBack: 0.6,\n infinite: false,\n isFlipped: false\n};\n\nexport default ReactCardFlip;\n","'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./cjs/react.production.min.js');\n} else {\n module.exports = require('./cjs/react.development.js');\n}\n","/** @license React v16.2.0\n * react.production.min.js\n *\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';var m=require(\"object-assign\"),n=require(\"fbjs/lib/emptyObject\"),p=require(\"fbjs/lib/emptyFunction\"),q=\"function\"===typeof Symbol&&Symbol[\"for\"],r=q?Symbol[\"for\"](\"react.element\"):60103,t=q?Symbol[\"for\"](\"react.call\"):60104,u=q?Symbol[\"for\"](\"react.return\"):60105,v=q?Symbol[\"for\"](\"react.portal\"):60106,w=q?Symbol[\"for\"](\"react.fragment\"):60107,x=\"function\"===typeof Symbol&&Symbol.iterator;\nfunction y(a){for(var b=arguments.length-1,e=\"Minified React error #\"+a+\"; visit http://facebook.github.io/react/docs/error-decoder.html?invariant\\x3d\"+a,c=0;cM.length&&M.push(a)}\nfunction P(a,b,e,c){var d=typeof a;if(\"undefined\"===d||\"boolean\"===d)a=null;var g=!1;if(null===a)g=!0;else switch(d){case \"string\":case \"number\":g=!0;break;case \"object\":switch(a.$$typeof){case r:case t:case u:case v:g=!0}}if(g)return e(c,a,\"\"===b?\".\"+Q(a,0):b),1;g=0;b=\"\"===b?\".\":b+\":\";if(Array.isArray(a))for(var k=0;k {\n return component.key === key;\n });\n }\n\n render() {\n const {\n flipDirection,\n infinite,\n flipSpeedFrontToBack,\n flipSpeedBackToFront,\n cardStyles: { front, back },\n containerStyle,\n cardZIndex\n } = this.props;\n const { isFlipped, rotation } = this.state;\n\n const frontRotateY = `rotateY(${\n infinite ? rotation : isFlipped ? 180 : 0\n }deg)`;\n const backRotateY = `rotateY(${\n infinite ? rotation + 180 : isFlipped ? 0 : -180\n }deg)`;\n const frontRotateX = `rotateX(${\n infinite ? rotation : isFlipped ? 180 : 0\n }deg)`;\n const backRotateX = `rotateX(${\n infinite ? rotation + 180 : isFlipped ? 0 : -180\n }deg)`;\n\n const styles = {\n container: {\n perspective: '1000px',\n transformStyle: 'preserve-3d',\n zIndex: `${cardZIndex}`\n },\n flipper: {\n position: 'relative',\n transformStyle: 'preserve-3d',\n width: '100%',\n height: '100%',\n },\n front: {\n WebkitBackfaceVisibility: 'hidden',\n backfaceVisibility: 'hidden',\n left: '0',\n visibility: isFlipped ? 'hidden' : '',\n position: isFlipped ? 'absolute' : 'relative',\n top: '0',\n transform: flipDirection === 'horizontal' ? frontRotateY : frontRotateX,\n transformStyle: 'preserve-3d',\n width: '100%',\n height: '100%',\n zIndex: '2',\n transition: `${flipSpeedBackToFront}s`,\n ...front\n },\n back: {\n WebkitBackfaceVisibility: 'hidden',\n backfaceVisibility: 'hidden',\n left: '0',\n visibility: isFlipped ? '' : 'hidden',\n position: isFlipped ? 'relative' : 'absolute',\n transform: flipDirection === 'horizontal' ? backRotateY : backRotateX,\n transformStyle: 'preserve-3d',\n top: '0',\n width: '100%',\n height: '100%',\n transition: `${flipSpeedFrontToBack}s`,\n ...back\n }\n };\n\n return (\n
\n
\n
\n {this.getComponent('front')}\n
\n\n
\n {this.getComponent('back')}\n
\n
\n
\n );\n }\n}\n\nReactCardFlip.propTypes = {\n cardStyles: PropTypes.shape({\n front: PropTypes.object,\n back: PropTypes.object\n }),\n cardZIndex: PropTypes.string,\n children: (props, propName, componentName) => {\n if (React.Children.count(props[propName]) !== 2) {\n return new Error(`${componentName} requires two children.`);\n }\n },\n containerStyle: PropTypes.object,\n flipDirection: (props, propName, componentName) => {\n if (!props[propName]) {\n return;\n }\n\n if (\n !(\n typeof props[propName] === 'string' || props[propName] instanceof String\n )\n ) {\n return new Error(`${propName} requires a string.`);\n }\n\n if (\n props[propName].toLowerCase() !== 'horizontal' &&\n props[propName].toLowerCase() !== 'vertical'\n ) {\n return new Error(\n `${propName} expects (horizontal|vertical), got ${props[\n propName\n ].toLowerCase()}`\n );\n }\n },\n flipSpeedBackToFront: PropTypes.number,\n flipSpeedFrontToBack: PropTypes.number,\n infinite: PropTypes.bool,\n isFlipped: PropTypes.bool\n};\n\nReactCardFlip.defaultProps = {\n containerStyle: {},\n cardStyles: {\n front: {},\n back: {}\n },\n cardZIndex: 'auto',\n flipDirection: 'horizontal',\n flipSpeedBackToFront: 0.6,\n flipSpeedFrontToBack: 0.6,\n infinite: false,\n isFlipped: false\n};\n\nexport default ReactCardFlip;\n","'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./cjs/react.production.min.js');\n} else {\n module.exports = require('./cjs/react.development.js');\n}\n","/** @license React v16.2.0\n * react.production.min.js\n *\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';var m=require(\"object-assign\"),n=require(\"fbjs/lib/emptyObject\"),p=require(\"fbjs/lib/emptyFunction\"),q=\"function\"===typeof Symbol&&Symbol[\"for\"],r=q?Symbol[\"for\"](\"react.element\"):60103,t=q?Symbol[\"for\"](\"react.call\"):60104,u=q?Symbol[\"for\"](\"react.return\"):60105,v=q?Symbol[\"for\"](\"react.portal\"):60106,w=q?Symbol[\"for\"](\"react.fragment\"):60107,x=\"function\"===typeof Symbol&&Symbol.iterator;\nfunction y(a){for(var b=arguments.length-1,e=\"Minified React error #\"+a+\"; visit http://facebook.github.io/react/docs/error-decoder.html?invariant\\x3d\"+a,c=0;cM.length&&M.push(a)}\nfunction P(a,b,e,c){var d=typeof a;if(\"undefined\"===d||\"boolean\"===d)a=null;var g=!1;if(null===a)g=!0;else switch(d){case \"string\":case \"number\":g=!0;break;case \"object\":switch(a.$$typeof){case r:case t:case u:case v:g=!0}}if(g)return e(c,a,\"\"===b?\".\"+Q(a,0):b),1;g=0;b=\"\"===b?\".\":b+\":\";if(Array.isArray(a))for(var k=0;kP.length&&P.push(e)}function R(e,t,r,n){var o=typeof e;"undefined"!==o&&"boolean"!==o||(e=null);var i=!1;if(null===e)i=!0;else switch(o){case"string":case"number":i=!0;break;case"object":switch(e.$$typeof){case u:case c:case l:case f:i=!0}}if(i)return r(n,e,""===t?"."+C(e,0):t),1;if(i=0,t=""===t?".":t+":",Array.isArray(e))for(var a=0;aP.length&&P.push(e)}function R(e,t,r,n){var o=typeof e;"undefined"!==o&&"boolean"!==o||(e=null);var i=!1;if(null===e)i=!0;else switch(o){case"string":case"number":i=!0;break;case"object":switch(e.$$typeof){case u:case c:case l:case f:i=!0}}if(i)return r(n,e,""===t?"."+C(e,0):t),1;if(i=0,t=""===t?".":t+":",Array.isArray(e))for(var a=0;a {\n return component.key === key;\n });\n }\n\n render() {\n const {\n flipDirection,\n infinite,\n flipSpeedFrontToBack,\n flipSpeedBackToFront,\n cardStyles: { front, back },\n cardZIndex\n } = this.props;\n const { isFlipped, rotation } = this.state;\n\n const frontRotateY = `rotateY(${\n infinite ? rotation : isFlipped ? 180 : 0\n }deg)`;\n const backRotateY = `rotateY(${\n infinite ? rotation + 180 : isFlipped ? 0 : -180\n }deg)`;\n const frontRotateX = `rotateX(${\n infinite ? rotation : isFlipped ? 180 : 0\n }deg)`;\n const backRotateX = `rotateX(${\n infinite ? rotation + 180 : isFlipped ? 0 : -180\n }deg)`;\n\n const styles = {\n container: {\n perspective: '1000px',\n transformStyle: 'preserve-3d',\n zIndex: `${cardZIndex}`\n },\n flipper: {\n position: 'relative',\n transformStyle: 'preserve-3d'\n },\n front: {\n WebkitBackfaceVisibility: 'hidden',\n backfaceVisibility: 'hidden',\n left: '0',\n visibility: isFlipped ? 'hidden' : '',\n position: isFlipped ? 'absolute' : 'relative',\n top: '0',\n transform: flipDirection === 'horizontal' ? frontRotateY : frontRotateX,\n transformStyle: 'preserve-3d',\n width: '100%',\n zIndex: '2',\n transition: `${flipSpeedBackToFront}s`,\n ...front\n },\n back: {\n WebkitBackfaceVisibility: 'hidden',\n backfaceVisibility: 'hidden',\n left: '0',\n visibility: isFlipped ? '' : 'hidden',\n position: isFlipped ? 'relative' : 'absolute',\n transform: flipDirection === 'horizontal' ? backRotateY : backRotateX,\n transformStyle: 'preserve-3d',\n top: '0',\n width: '100%',\n transition: `${flipSpeedFrontToBack}s`,\n ...back\n }\n };\n\n return (\n
\n
\n
\n {this.getComponent('front')}\n
\n\n
\n {this.getComponent('back')}\n
\n
\n
\n );\n }\n}\n\nReactCardFlip.propTypes = {\n cardStyles: PropTypes.shape({\n front: PropTypes.object,\n back: PropTypes.object\n }),\n cardZIndex: PropTypes.string,\n children: (props, propName, componentName) => {\n if (React.Children.count(props[propName]) !== 2) {\n return new Error(`${componentName} requires two children.`);\n }\n },\n flipDirection: (props, propName, componentName) => {\n if (!props[propName]) {\n return;\n }\n\n if (\n !(\n typeof props[propName] === 'string' || props[propName] instanceof String\n )\n ) {\n return new Error(`${propName} requires a string.`);\n }\n\n if (\n props[propName].toLowerCase() !== 'horizontal' &&\n props[propName].toLowerCase() !== 'vertical'\n ) {\n return new Error(\n `${propName} expects (horizontal|vertical), got ${props[\n propName\n ].toLowerCase()}`\n );\n }\n },\n flipSpeedBackToFront: PropTypes.number,\n flipSpeedFrontToBack: PropTypes.number,\n infinite: PropTypes.bool,\n isFlipped: PropTypes.bool\n};\n\nReactCardFlip.defaultProps = {\n cardStyles: {\n front: {},\n back: {}\n },\n cardZIndex: 'auto',\n flipDirection: 'horizontal',\n flipSpeedBackToFront: 0.6,\n flipSpeedFrontToBack: 0.6,\n infinite: false,\n isFlipped: false\n};\n\nexport default ReactCardFlip;\n","'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./cjs/react.production.min.js');\n} else {\n module.exports = require('./cjs/react.development.js');\n}\n","/** @license React v16.2.0\n * react.production.min.js\n *\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';var m=require(\"object-assign\"),n=require(\"fbjs/lib/emptyObject\"),p=require(\"fbjs/lib/emptyFunction\"),q=\"function\"===typeof Symbol&&Symbol[\"for\"],r=q?Symbol[\"for\"](\"react.element\"):60103,t=q?Symbol[\"for\"](\"react.call\"):60104,u=q?Symbol[\"for\"](\"react.return\"):60105,v=q?Symbol[\"for\"](\"react.portal\"):60106,w=q?Symbol[\"for\"](\"react.fragment\"):60107,x=\"function\"===typeof Symbol&&Symbol.iterator;\nfunction y(a){for(var b=arguments.length-1,e=\"Minified React error #\"+a+\"; visit http://facebook.github.io/react/docs/error-decoder.html?invariant\\x3d\"+a,c=0;cM.length&&M.push(a)}\nfunction P(a,b,e,c){var d=typeof a;if(\"undefined\"===d||\"boolean\"===d)a=null;var g=!1;if(null===a)g=!0;else switch(d){case \"string\":case \"number\":g=!0;break;case \"object\":switch(a.$$typeof){case r:case t:case u:case v:g=!0}}if(g)return e(c,a,\"\"===b?\".\"+Q(a,0):b),1;g=0;b=\"\"===b?\".\":b+\":\";if(Array.isArray(a))for(var k=0;k {\n return component.key === key;\n });\n }\n\n render() {\n const {\n flipDirection,\n infinite,\n flipSpeedFrontToBack,\n flipSpeedBackToFront,\n cardStyles: { front, back },\n containerStyle,\n cardZIndex\n } = this.props;\n const { isFlipped, rotation } = this.state;\n\n const frontRotateY = `rotateY(${\n infinite ? rotation : isFlipped ? 180 : 0\n }deg)`;\n const backRotateY = `rotateY(${\n infinite ? rotation + 180 : isFlipped ? 0 : -180\n }deg)`;\n const frontRotateX = `rotateX(${\n infinite ? rotation : isFlipped ? 180 : 0\n }deg)`;\n const backRotateX = `rotateX(${\n infinite ? rotation + 180 : isFlipped ? 0 : -180\n }deg)`;\n\n const styles = {\n container: {\n perspective: '1000px',\n transformStyle: 'preserve-3d',\n zIndex: `${cardZIndex}`\n },\n flipper: {\n position: 'relative',\n transformStyle: 'preserve-3d',\n width: '100%',\n height: '100%',\n },\n front: {\n WebkitBackfaceVisibility: 'hidden',\n backfaceVisibility: 'hidden',\n left: '0',\n visibility: isFlipped ? 'hidden' : '',\n position: isFlipped ? 'absolute' : 'relative',\n top: '0',\n transform: flipDirection === 'horizontal' ? frontRotateY : frontRotateX,\n transformStyle: 'preserve-3d',\n width: '100%',\n height: '100%',\n zIndex: '2',\n transition: `${flipSpeedBackToFront}s`,\n ...front\n },\n back: {\n WebkitBackfaceVisibility: 'hidden',\n backfaceVisibility: 'hidden',\n left: '0',\n visibility: isFlipped ? '' : 'hidden',\n position: isFlipped ? 'relative' : 'absolute',\n transform: flipDirection === 'horizontal' ? backRotateY : backRotateX,\n transformStyle: 'preserve-3d',\n top: '0',\n width: '100%',\n height: '100%',\n transition: `${flipSpeedFrontToBack}s`,\n ...back\n }\n };\n\n return (\n
\n
\n
\n {this.getComponent('front')}\n
\n\n
\n {this.getComponent('back')}\n
\n
\n
\n );\n }\n}\n\nReactCardFlip.propTypes = {\n cardStyles: PropTypes.shape({\n front: PropTypes.object,\n back: PropTypes.object\n }),\n cardZIndex: PropTypes.string,\n children: (props, propName, componentName) => {\n if (React.Children.count(props[propName]) !== 2) {\n return new Error(`${componentName} requires two children.`);\n }\n },\n containerStyle: PropTypes.object,\n flipDirection: (props, propName, componentName) => {\n if (!props[propName]) {\n return;\n }\n\n if (\n !(\n typeof props[propName] === 'string' || props[propName] instanceof String\n )\n ) {\n return new Error(`${propName} requires a string.`);\n }\n\n if (\n props[propName].toLowerCase() !== 'horizontal' &&\n props[propName].toLowerCase() !== 'vertical'\n ) {\n return new Error(\n `${propName} expects (horizontal|vertical), got ${props[\n propName\n ].toLowerCase()}`\n );\n }\n },\n flipSpeedBackToFront: PropTypes.number,\n flipSpeedFrontToBack: PropTypes.number,\n infinite: PropTypes.bool,\n isFlipped: PropTypes.bool\n};\n\nReactCardFlip.defaultProps = {\n containerStyle: {},\n cardStyles: {\n front: {},\n back: {}\n },\n cardZIndex: 'auto',\n flipDirection: 'horizontal',\n flipSpeedBackToFront: 0.6,\n flipSpeedFrontToBack: 0.6,\n infinite: false,\n isFlipped: false\n};\n\nexport default ReactCardFlip;\n","'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./cjs/react.production.min.js');\n} else {\n module.exports = require('./cjs/react.development.js');\n}\n","/** @license React v16.2.0\n * react.production.min.js\n *\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';var m=require(\"object-assign\"),n=require(\"fbjs/lib/emptyObject\"),p=require(\"fbjs/lib/emptyFunction\"),q=\"function\"===typeof Symbol&&Symbol[\"for\"],r=q?Symbol[\"for\"](\"react.element\"):60103,t=q?Symbol[\"for\"](\"react.call\"):60104,u=q?Symbol[\"for\"](\"react.return\"):60105,v=q?Symbol[\"for\"](\"react.portal\"):60106,w=q?Symbol[\"for\"](\"react.fragment\"):60107,x=\"function\"===typeof Symbol&&Symbol.iterator;\nfunction y(a){for(var b=arguments.length-1,e=\"Minified React error #\"+a+\"; visit http://facebook.github.io/react/docs/error-decoder.html?invariant\\x3d\"+a,c=0;cM.length&&M.push(a)}\nfunction P(a,b,e,c){var d=typeof a;if(\"undefined\"===d||\"boolean\"===d)a=null;var g=!1;if(null===a)g=!0;else switch(d){case \"string\":case \"number\":g=!0;break;case \"object\":switch(a.$$typeof){case r:case t:case u:case v:g=!0}}if(g)return e(c,a,\"\"===b?\".\"+Q(a,0):b),1;g=0;b=\"\"===b?\".\":b+\":\";if(Array.isArray(a))for(var k=0;k { if (!props[propName]) { return;