Skip to content

Commit

Permalink
Merge 7c02384 into 923d88b
Browse files Browse the repository at this point in the history
  • Loading branch information
nicholasbraun committed Sep 20, 2018
2 parents 923d88b + 7c02384 commit 2d0006f
Show file tree
Hide file tree
Showing 10 changed files with 102 additions and 71 deletions.
Binary file added example/build/5c74291309c2a6bc4bdd3f4369adc1cd.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added example/build/9a40ff5eb07d7f83667766352c4f5614.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 8 additions & 14 deletions example/build/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -601,36 +601,30 @@ var ReactCardFlip = function (_React$Component) {
},
flipper: {
position: 'relative',
transform: 'rotateY(' + (this.props.infinite ? this.state.rotation : 0) + 'deg)',
transformStyle: 'preserve-3d',
transition: this.props.flipSpeedBackToFront + 's'
},
flipperFlip: {
position: 'relative',
transform: 'rotateY(' + (this.props.infinite ? this.state.rotation : 180) + 'deg)',
transformStyle: 'preserve-3d',
transition: this.props.flipSpeedFrontToBack + 's'
transformStyle: 'preserve-3d'
},
front: _extends({
WebkitBackfaceVisibility: 'hidden',
backfaceVisibility: 'hidden',
left: '0',
position: 'absolute',
top: '0',
transform: 'rotateY(0deg)',
transform: 'rotateY(' + (this.props.infinite ? this.state.rotation : this.state.isFlipped ? 180 : 0) + 'deg)',
transformStyle: 'preserve-3d',
width: '100%',
zIndex: '2'
zIndex: '2',
transition: this.props.flipSpeedBackToFront + 's'
}, this.props.cardStyles.front),
back: _extends({
WebkitBackfaceVisibility: 'hidden',
backfaceVisibility: 'hidden',
left: '0',
position: 'absolute',
transform: 'rotateY(180deg)',
transform: 'rotateY(' + (this.props.infinite ? this.state.rotation : this.state.isFlipped ? 0 : -180) + 'deg)',
transformStyle: 'preserve-3d',
top: '0',
width: '100%'
width: '100%',
transition: this.props.flipSpeedFrontToBack + 's'
}, this.props.cardStyles.back)
};

Expand All @@ -641,7 +635,7 @@ var ReactCardFlip = function (_React$Component) {
'div',
{
className: 'react-card-flipper',
style: this.state.isFlipped ? styles.flipperFlip : styles.flipper
style: styles.flipper
},
_react2.default.createElement(
'div',
Expand Down
22 changes: 8 additions & 14 deletions lib/react-card-flip.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion lib/react-card-flip.js.map
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions lib/react-card-flip.min.js
View file

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"description": "ReactCardFlip",
"main": "./lib/react-card-flip.js",
"scripts": {
"build": "webpack --env dev && webpack --env build",
"build": "webpack --env dev --config webpack.dist.js && webpack --env build --config webpack.dist.js",
"start": "webpack-dev-server --progress --colors --open",
"test": "jest",
"test:coverage": "jest --coverage",
Expand Down Expand Up @@ -48,6 +48,7 @@
"enzyme-adapter-react-16": "^1.1.1",
"eslint": "^4.13.1",
"eslint-loader": "^1.9.0",
"eslint-plugin-react": "^7.11.1",
"file-loader": "^1.1.6",
"jest": "^22.2.2",
"react": "^16.2.0",
Expand Down
32 changes: 13 additions & 19 deletions src/ReactCardFlip.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,50 +31,44 @@ class ReactCardFlip extends React.Component {
},
flipper: {
position: 'relative',
transform: `rotateY(${
this.props.infinite ? this.state.rotation : 0
}deg)`,
transformStyle: 'preserve-3d',
transition: `${this.props.flipSpeedBackToFront}s`
},
flipperFlip: {
position: 'relative',
transform: `rotateY(${
this.props.infinite ? this.state.rotation : 180
}deg)`,
transformStyle: 'preserve-3d',
transition: `${this.props.flipSpeedFrontToBack}s`
},
front: {
WebkitBackfaceVisibility: 'hidden',
backfaceVisibility: 'hidden',
left: '0',
position: 'absolute',
top: '0',
transform: 'rotateY(0deg)',
transform: `rotateY(${
this.props.infinite ? this.state.rotation : this.state.isFlipped ? 180 : 0
}deg)`,
transformStyle: 'preserve-3d',
width: '100%',
zIndex: '2',
...this.props.cardStyles.front
zIndex: '2',
transition: `${this.props.flipSpeedBackToFront}s`,
...this.props.cardStyles.front,
},
back: {
WebkitBackfaceVisibility: 'hidden',
backfaceVisibility: 'hidden',
left: '0',
position: 'absolute',
transform: 'rotateY(180deg)',
transform: `rotateY(${
this.props.infinite ? this.state.rotation + 180 : this.state.isFlipped ? 0 : -180
}deg)`,
transformStyle: 'preserve-3d',
top: '0',
width: '100%',
...this.props.cardStyles.back
width: '100%',
transition: `${this.props.flipSpeedFrontToBack}s`,
...this.props.cardStyles.back,
}
};

return (
<div className="react-card-flip" style={styles.container}>
<div
className="react-card-flipper"
style={this.state.isFlipped ? styles.flipperFlip : styles.flipper}
style={styles.flipper}
>
<div className="react-card-front" style={styles.front}>
{this.getComponent('front')}
Expand Down
49 changes: 38 additions & 11 deletions test/ReactCardFlip.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,21 @@ describe('Flipping', () => {
</div>
</ReactCardFlip>
);
expect(wrapper.find('.react-card-flipper').props().style.transform).toBe(
expect(wrapper.find('.react-card-front').props().style.transform).toBe(
'rotateY(0deg)'
);
expect(wrapper.find('.react-card-back').props().style.transform).toBe(
'rotateY(-180deg)'
);

wrapper.setProps({ isFlipped: true });
expect(wrapper.find('.react-card-flipper').props().style.transform).toBe(

expect(wrapper.find('.react-card-front').props().style.transform).toBe(
'rotateY(180deg)'
);
expect(wrapper.find('.react-card-back').props().style.transform).toBe(
'rotateY(0deg)'
);
});

it('flips in the opposite direction on both sides when infinite prop is provided', () => {
Expand All @@ -35,17 +43,28 @@ describe('Flipping', () => {
</div>
</ReactCardFlip>
);
expect(wrapper.find('.react-card-flipper').props().style.transform).toBe(

expect(wrapper.find('.react-card-front').props().style.transform).toBe(
'rotateY(0deg)'
);
wrapper.setProps({ isFlipped: true });
expect(wrapper.find('.react-card-flipper').props().style.transform).toBe(
expect(wrapper.find('.react-card-back').props().style.transform).toBe(
'rotateY(180deg)'
);
wrapper.setProps({ isFlipped: false });
expect(wrapper.find('.react-card-flipper').props().style.transform).toBe(
'rotateY(360deg)'
);

let isFlipped = true;

for(let i = 1; i <= 5; i++) {
wrapper.setProps({ isFlipped });

expect(wrapper.find('.react-card-front').props().style.transform).toBe(
`rotateY(${0 + (i * 180)}deg)`
);
expect(wrapper.find('.react-card-back').props().style.transform).toBe(
`rotateY(${180 + (i * 180)}deg)`
);

isFlipped = !isFlipped;
}
});

it('does nothing when rerendering with no isFlipped prop change', () => {
Expand All @@ -59,14 +78,22 @@ describe('Flipping', () => {
</div>
</ReactCardFlip>
);
expect(wrapper.find('.react-card-flipper').props().style.transform).toBe(

expect(wrapper.find('.react-card-front').props().style.transform).toBe(
'rotateY(180deg)'
);
expect(wrapper.find('.react-card-back').props().style.transform).toBe(
'rotateY(0deg)'
);

wrapper.setProps({ isFlipped: true });
expect(wrapper.find('.react-card-flipper').props().style.transform).toBe(

expect(wrapper.find('.react-card-front').props().style.transform).toBe(
'rotateY(180deg)'
);
expect(wrapper.find('.react-card-back').props().style.transform).toBe(
'rotateY(0deg)'
);
});
});

Expand Down
39 changes: 30 additions & 9 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2291,6 +2291,16 @@ eslint-loader@^1.9.0:
object-hash "^1.1.4"
rimraf "^2.6.1"

eslint-plugin-react@^7.11.1:
version "7.11.1"
resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.11.1.tgz#c01a7af6f17519457d6116aa94fc6d2ccad5443c"
dependencies:
array-includes "^3.0.3"
doctrine "^2.1.0"
has "^1.0.3"
jsx-ast-utils "^2.0.1"
prop-types "^15.6.2"

eslint-scope@^3.7.1, eslint-scope@~3.7.1:
version "3.7.1"
resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-3.7.1.tgz#3d63c3edfda02e06e01a452ad88caacc7cdcb6e8"
Expand Down Expand Up @@ -3000,6 +3010,12 @@ has@^1.0.1:
dependencies:
function-bind "^1.0.2"

has@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
dependencies:
function-bind "^1.1.1"

hash-base@^2.0.0:
version "2.0.2"
resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-2.0.2.tgz#66ea1d856db4e8a5470cadf6fce23ae5244ef2e1"
Expand Down Expand Up @@ -3954,6 +3970,12 @@ jsprim@^1.2.2:
json-schema "0.2.3"
verror "1.10.0"

jsx-ast-utils@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.0.1.tgz#e801b1b39985e20fffc87b40e3748080e2dcac7f"
dependencies:
array-includes "^3.0.3"

killable@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.0.tgz#da8b84bd47de5395878f95d64d02f2449fe05e6b"
Expand Down Expand Up @@ -4256,7 +4278,7 @@ mime@1.4.1:
version "1.4.1"
resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"

mime@^1.4.1, mime@^1.5.0:
mime@^1.5.0:
version "1.6.0"
resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"

Expand Down Expand Up @@ -4914,6 +4936,13 @@ prop-types@^15.6.0:
loose-envify "^1.3.1"
object-assign "^4.1.1"

prop-types@^15.6.2:
version "15.6.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
dependencies:
loose-envify "^1.3.1"
object-assign "^4.1.1"

proxy-addr@~2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.2.tgz#6571504f47bb988ec8180253f85dd7e14952bdec"
Expand Down Expand Up @@ -6136,14 +6165,6 @@ urix@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"

url-loader@^0.6.2:
version "0.6.2"
resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-0.6.2.tgz#a007a7109620e9d988d14bce677a1decb9a993f7"
dependencies:
loader-utils "^1.0.2"
mime "^1.4.1"
schema-utils "^0.3.0"

url-parse@1.0.x:
version "1.0.5"
resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.0.5.tgz#0854860422afdcfefeb6c965c662d4800169927b"
Expand Down

0 comments on commit 2d0006f

Please sign in to comment.