Skip to content
This repository was archived by the owner on Aug 19, 2022. It is now read-only.

Commit 0d84801

Browse files
author
Brandon Dail
committed
Updated demo with styles
Removed the animation sequence, lets users just select the animation they want to demo, and the duration
1 parent 983fac3 commit 0d84801

File tree

4 files changed

+168
-98
lines changed

4 files changed

+168
-98
lines changed

‎demo/app.jsx‎

Lines changed: 110 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -3,95 +3,89 @@
33
import React from "react";
44
import ReactDOM from "react-dom";
55
import Radium, { Style, StyleRoot } from "radium";
6-
import { StyleSheet, css } from 'aphrodite';
76
import * as animations from '../lib';
87
import merge from '../lib/merge';
98

9+
import Demo from './description';
1010

1111
const styles = {
1212
global: {
1313
textAlign: 'center',
14-
fontFamily: 'sans-serif',
1514
paddingTop: 200,
15+
body: {
16+
backgroundColor: 'white',
17+
color: 'white',
18+
fontFamily: "Whitney SSm A, Whitney SSm B, Helvetica Neue, Helvetica, Arial, sans-serif",
19+
lineHeight: 1.5,
20+
margin: 0,
21+
transform: 'translate3d(0, 0, 0)',
22+
},
23+
p: {
24+
margin: 0
25+
},
26+
select: {
27+
border: 'none',
28+
height: 35,
29+
fontSize: 15,
30+
fontFamily: 'inherit',
31+
width: 155,
32+
fontWeight: 'bold',
33+
},
34+
input: {
35+
height: 35,
36+
border: 'none',
37+
padding: '0px 5px',
38+
borderRadius: 6,
39+
fontFamily: 'inherit'
40+
},
41+
button: {
42+
outline: 'none',
43+
backgroundColor: 'white',
44+
height: 35,
45+
border: 'none',
46+
padding: '0px 10px',
47+
borderRadius: 6,
48+
fontFamily: 'inherit'
49+
},
50+
label: {
51+
position: 'absolute',
52+
bottom: 0,
53+
fontSize: 10,
54+
},
1655
},
17-
swing: {
18-
transformOrigin: 'top center'
19-
},
20-
flip: {
21-
backfaceVisibilty: 'visible',
22-
},
23-
};
24-
25-
let aphroditeStyle = {
26-
global: {
27-
textAlign: 'center',
28-
fontFamily: 'sans-serif',
29-
paddingTop: 200,
56+
container: {
57+
position: 'relative',
58+
margin: 15,
59+
height: 60,
60+
display: 'inline-block',
3061
},
3162
swing: {
3263
transformOrigin: 'top center'
3364
},
3465
flip: {
3566
backfaceVisibilty: 'visible',
3667
},
37-
}
38-
39-
animations.tadaFlip = merge(animations.tada, animations.flip);
40-
animations.jelloFadeDown = merge(animations.fadeInDown, animations.jello);
41-
animations.flashSwing = merge(animations.jello, animations.bounce);
42-
animations.zoomWobble = merge(animations.wobble, animations.zoomOut);
43-
animations.flashHinge = merge(animations.hinge, animations.flash);
68+
};
4469

4570
const animationNames = [];
4671

4772
for (let key in animations) {
48-
if (key === 'global') {
73+
if (
74+
key === 'global' ||
75+
key === 'merge' ||
76+
key === 'container'
77+
) {
4978
continue;
5079
}
5180
animationNames.push(key);
5281
const animation = animations[key];
5382
styles[key] = {
5483
...styles[key],
55-
animation: 'x 1s ease',
84+
animation: 'x',
5685
animationName: Radium.keyframes(animation, key),
5786
};
58-
aphroditeStyle[key] = {
59-
...aphroditeStyle[key],
60-
animationName: animation,
61-
animationDuration: '1s',
62-
animationTimingFunction: 'ease',
63-
};
6487
}
6588

66-
aphroditeStyle = StyleSheet.create(aphroditeStyle)
67-
68-
let AnimationRadiumDemo = ({ style, animation, selectAnimation }) => (
69-
<div style={styles.global}>
70-
<span>Using Radium</span>
71-
<h1 style={style}>Hello, world</h1>
72-
<select value={animation} onChange={selectAnimation}>
73-
{animationNames.map(name => (
74-
<option key={name} value={name}>{name}</option>
75-
))}
76-
</select>
77-
</div>
78-
)
79-
80-
AnimationRadiumDemo = Radium(AnimationRadiumDemo);
81-
82-
83-
let AnimationAphroditeDemo = ({ style, animation, selectAnimation }) => (
84-
<div className={css(style.global)}>
85-
<span>Using Aphrodite</span>
86-
<h1 className={css(style[animation])}>Hello, world</h1>
87-
<select value={animation} onChange={selectAnimation}>
88-
{animationNames.map(name => (
89-
<option key={name} value={name}>{name}</option>
90-
))}
91-
</select>
92-
</div>
93-
)
94-
9589
class App extends React.Component {
9690

9791
constructor() {
@@ -100,56 +94,74 @@ class App extends React.Component {
10094
animation: 'bounce',
10195
library: 'Radium',
10296
}
97+
this.duration = 1;
10398
this.selectAnimation = this.selectAnimation.bind(this);
99+
this.onDurationChange = this.onDurationChange.bind(this);
100+
this.triggerAnimation = this.triggerAnimation.bind(this);
101+
}
102+
103+
selectAnimation({ target }) {
104+
this.setState({ animation: target.value });
104105
}
105106

106-
selectAnimation(event) {
107-
console.log('selectAnimation')
108-
this.setState({ animation: event.target.value })
107+
onDurationChange({ target }) {
108+
// Track duration outside of state, as we don't
109+
// want duration changes to trigger a render.
110+
this.duration = parseFloat(target.value);
109111
}
110112

111-
onLibraryChange(library) {
112-
console.log(library)
113-
this.setState({ library })
113+
triggerAnimation() {
114+
const { animation } = this.state;
115+
this.setState({ animation: '' }, () => {
116+
this.setState({ animation })
117+
})
114118
}
115119

116120
render() {
117-
const { animation, library } = this.state;
118-
const style = styles[animation];
119-
console.log(animation, aphroditeStyle);
120-
let demo;
121-
if (library === 'Aphrodite') {
122-
demo = (
123-
<div>
124-
<AnimationAphroditeDemo
125-
selectAnimation={this.selectAnimation}
121+
const { animation } = this.state;
122+
console.log('render')
123+
return (
124+
<StyleRoot>
125+
<div style={styles.global}>
126+
<Style rules={styles.global} />
127+
<Demo
128+
duration={this.duration}
126129
animation={animation}
127-
style={aphroditeStyle}
130+
styles={styles}
128131
/>
132+
<div style={styles.container}>
133+
<label htmlFor='animation'>
134+
Animation
135+
</label>
136+
<select
137+
id='animation'
138+
value={animation}
139+
onChange={this.selectAnimation}>
140+
{animationNames.map(name => (
141+
<option key={name} value={name}>{name}</option>
142+
))}
143+
</select>
129144
</div>
130-
)
131-
} else {
132-
demo = (
133-
<StyleRoot>
134-
<AnimationRadiumDemo
135-
selectAnimation={this.selectAnimation}
136-
animation={animation}
137-
style={style} />
138-
</StyleRoot>
139-
)
140-
}
141-
return (
142-
<div>
143-
{demo}
144-
<button
145-
onClick={this.onLibraryChange.bind(this, 'Radium')}>
146-
Use Radium
147-
</button>
148-
<button
149-
onClick={this.onLibraryChange.bind(this, 'Aphrodite')}>
150-
Use Aphrodite
151-
</button>
152-
</div>
145+
<div style={styles.container}>
146+
<label htmlFor='duration'>
147+
Duration
148+
</label>
149+
<input
150+
value={this.state.duration}
151+
onChange={this.onDurationChange}
152+
id='duration'
153+
style={styles.duration}
154+
type='number'
155+
min='1'
156+
max='10'/>
157+
</div>
158+
<div style={styles.container}>
159+
<button onClick={this.triggerAnimation} >
160+
Animate
161+
</button>
162+
</div>
163+
</div>
164+
</StyleRoot>
153165
)
154166
}
155167
}

‎demo/controls.jsx‎

Whitespace-only changes.

‎demo/description.jsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from "react";
2+
import ReactDOM from "react-dom";
3+
import Radium, { Style } from "radium";
4+
5+
6+
const Demo = ({ styles, duration, animation }) => {
7+
const headerStyle = {
8+
...(styles[animation]),
9+
animationDuration: `${duration}s`,
10+
width: 500,
11+
fontSize: 60,
12+
margin: '30px auto',
13+
};
14+
const descriptionStyle = {
15+
...styles.fadeInUp,
16+
animationDuration: '2s',
17+
fontSize: 16,
18+
}
19+
20+
// I'm so sorry.
21+
let dummies = Object.keys(styles).map(
22+
key => <span key={key} style={styles[key]} />
23+
);
24+
25+
return (
26+
<div>
27+
{dummies}
28+
<h1 key={animation} style={headerStyle}>react-effects</h1>
29+
<span style={descriptionStyle}>A collection of animations for CSS-in-JS libraries </span>
30+
</div>
31+
)
32+
}
33+
34+
export default Radium(Demo);

‎demo/radium.jsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from "react";
2+
import ReactDOM from "react-dom";
3+
import Radium, { Style, StyleRoot } from "radium";
4+
import { StyleSheet, css } from 'aphrodite';
5+
import * as animations from '../lib';
6+
import merge from '../lib/merge';
7+
8+
9+
class RadiumDemo extends React.Component {
10+
render() {
11+
const {
12+
styles,
13+
animation
14+
} = this.props;
15+
return (
16+
<div style={styles.global}>
17+
<span>Using <a href='https://github.com/FormidableLabs/radium'>Radium</a></span>
18+
<h1 style={styles[animation]}>Hello, world</h1>
19+
</div>
20+
)
21+
}
22+
}
23+
24+
export default Radium(RadiumDemo);

0 commit comments

Comments
 (0)