Skip to content

Commit 6fbb0ee

Browse files
kenwheelerkenwheeler
authored
Magic move (#405)
* Initial * Magic Move initial * More magic move initial * Semi working * Fix scaling * Fixing quotes and adding enter/exit for magic slides * Fixing presenter mode * revert example * Lint * Deps and snapshots * defensive value access
1 parent 57355c2 commit 6fbb0ee

File tree

15 files changed

+667
-190
lines changed

15 files changed

+667
-190
lines changed

‎.eslintrc‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,9 @@
4444
"react/prop-types": "warn",
4545
"react/sort-comp": "warn",
4646
"react/sort-prop-types": "warn",
47-
"react/jsx-handler-names": "off"
47+
"react/jsx-handler-names": "off",
48+
"react/no-find-dom-node": "off",
49+
"no-invalid-this": "off",
50+
"complexity": "off"
4851
}
4952
}

‎package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"author": "",
2424
"license": "MIT",
2525
"dependencies": {
26+
"deep-object-diff": "^1.0.4",
2627
"emotion": "^8.0.8",
2728
"history": "^4.6.1",
2829
"lodash": "^4.17.4",
@@ -32,7 +33,7 @@
3233
"react-emotion": "^8.0.8",
3334
"react-live": "^1.8.0-2",
3435
"react-redux": "^5.0.5",
35-
"react-transition-group": "^1.1.3",
36+
"react-transition-group": "1.2.1",
3637
"react-typography": "^0.16.5",
3738
"redux": "^3.0.4",
3839
"redux-actions": "^2.0.3",
@@ -66,7 +67,7 @@
6667
"css-loader": "^0.28.2",
6768
"enzyme": "^3.1.0",
6869
"enzyme-adapter-react-16": "^1.0.1",
69-
"enzyme-to-json": "^3.1.2",
70+
"enzyme-to-json": "3.1.2",
7071
"eslint": "^3.19.0",
7172
"eslint-config-formidable": "^3.0.0",
7273
"eslint-plugin-filenames": "^1.2.0",
@@ -84,7 +85,7 @@
8485
"react-test-renderer": "^16.0.0",
8586
"react-transform-catch-errors": "^1.0.0",
8687
"react-transform-hmr": "^1.0.1",
87-
"redbox-react": "^1.3.6",
88+
"redbox-react": "1.5.0",
8889
"rimraf": "^2.6.1",
8990
"style-loader": "^0.18.1",
9091
"surge": "^0.19.0",

‎src/components/__snapshots__/manager.test.js.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ exports[`<Manager /> should render correctly. 1`] = `
112112
}
113113
}
114114
hash={0}
115-
key=".$0"
115+
key=".$.0"
116116
lastSlideIndex={0}
117117
print={false}
118118
slideIndex={0}
@@ -740,7 +740,7 @@ exports[`<Manager /> should render with slideset slides 1`] = `
740740
}
741741
}
742742
hash={1}
743-
key=".$1"
743+
key=".$.0"
744744
lastSlideIndex={1}
745745
print={false}
746746
slideIndex={1}

‎src/components/__snapshots__/presenter.test.js.snap‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -48,11 +48,9 @@ exports[`<Presenter /> should render correctly 1`] = `
4848
<h2
4949
className="css-1wa77gy"
5050
>
51-
Slide
52-
51+
Slide
5352
2
54-
55-
of
53+
of
5654
5755
3
5856
</h2>
@@ -98,6 +96,7 @@ exports[`<Presenter /> should render correctly 1`] = `
9896
hash={1}
9997
key="1"
10098
lastSlideIndex={undefined}
99+
presenter={true}
101100
presenterStyle={
102101
Object {
103102
"position": "relative",
@@ -127,6 +126,7 @@ exports[`<Presenter /> should render correctly 1`] = `
127126
hash={2}
128127
key="2"
129128
lastSlideIndex={undefined}
129+
presenter={true}
130130
presenterStyle={
131131
Object {
132132
"position": "relative",
@@ -212,11 +212,9 @@ exports[`<Presenter /> should render timer when set in params. 1`] = `
212212
<h2
213213
className="css-1wa77gy"
214214
>
215-
Slide
216-
215+
Slide
217216
2
218-
219-
of
217+
of
220218
221219
3
222220
</h2>
@@ -283,6 +281,7 @@ exports[`<Presenter /> should render timer when set in params. 1`] = `
283281
key="1"
284282
lastSlideIndex={undefined}
285283
notes="These are my slide notes!!"
284+
presenter={true}
286285
presenterStyle={
287286
Object {
288287
"position": "relative",
@@ -312,6 +311,7 @@ exports[`<Presenter /> should render timer when set in params. 1`] = `
312311
hash={2}
313312
key="2"
314313
lastSlideIndex={undefined}
314+
presenter={true}
315315
presenterStyle={
316316
Object {
317317
"position": "relative",
@@ -402,11 +402,9 @@ exports[`<Presenter /> should render with notes when slides have them. 1`] = `
402402
<h2
403403
className="css-1wa77gy"
404404
>
405-
Slide
406-
405+
Slide
407406
2
408-
409-
of
407+
of
410408
411409
3
412410
</h2>
@@ -453,6 +451,7 @@ exports[`<Presenter /> should render with notes when slides have them. 1`] = `
453451
key="1"
454452
lastSlideIndex={undefined}
455453
notes="These are my slide notes!!"
454+
presenter={true}
456455
presenterStyle={
457456
Object {
458457
"position": "relative",
@@ -482,6 +481,7 @@ exports[`<Presenter /> should render with notes when slides have them. 1`] = `
482481
hash={2}
483482
key="2"
484483
lastSlideIndex={undefined}
484+
presenter={true}
485485
presenterStyle={
486486
Object {
487487
"position": "relative",

‎src/components/deck.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,12 @@ export default class Deck extends Component {
2828
render() {
2929
return (
3030
<Provider store={store}>
31-
<Controller theme={this.props.theme} store={store} history={this.props.history}>
32-
<Manager {...this.props}>
33-
{this.props.children}
34-
</Manager>
31+
<Controller
32+
theme={this.props.theme}
33+
store={store}
34+
history={this.props.history}
35+
>
36+
<Manager {...this.props}>{this.props.children}</Manager>
3537
</Controller>
3638
</Provider>
3739
);

‎src/components/heading.js‎

Lines changed: 40 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ const StyledHeader = styled.div(({ height, styles }) => [
99
{
1010
display: 'block',
1111
width: '100%',
12-
height
13-
}
12+
height,
13+
},
1414
]);
1515

1616
const StyledSpan = styled.span(({ scale, lineHeight, styles }) => [
@@ -21,31 +21,34 @@ const StyledSpan = styled.span(({ scale, lineHeight, styles }) => [
2121
padding: '0',
2222
lineHeight,
2323
transform: `scale(${scale})`,
24-
transformOrigin: 'center top'
24+
transformOrigin: 'center top',
2525
},
2626
styles.typeface,
27-
styles.user
27+
styles.user,
2828
]);
2929

3030
const dynamicHeaderStyles = ({ lineHeight, styles }) => [
3131
styles.context,
3232
styles.base,
3333
{ lineHeight },
3434
styles.typeface,
35-
styles.user
35+
styles.user,
3636
];
37-
const dynamicStyledHeaders = [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ]
38-
.reduce((memo, tag) => ({
39-
...memo, [tag]: styled(tag)(dynamicHeaderStyles)
40-
}), {});
37+
const dynamicStyledHeaders = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].reduce(
38+
(memo, tag) => ({
39+
...memo,
40+
[tag]: styled(tag)(dynamicHeaderStyles),
41+
}),
42+
{}
43+
);
4144

4245
export default class Heading extends Component {
4346
constructor() {
4447
super();
4548
this.resize = this.resize.bind(this);
4649
this.state = {
4750
scale: 1,
48-
height: 16
51+
height: 16,
4952
};
5053
}
5154
componentDidMount() {
@@ -65,12 +68,12 @@ export default class Heading extends Component {
6568
const text = this.textRef;
6669
const container = this.containerRef;
6770
text.style.display = 'inline-block';
68-
const scale = (container.offsetWidth / text.offsetWidth);
69-
const height = (text.offsetHeight * scale) || 0;
71+
const scale = container.offsetWidth / text.offsetWidth;
72+
const height = text.offsetHeight * scale || 0;
7073
text.style.display = 'block';
7174
this.setState({
7275
scale,
73-
height
76+
height,
7477
});
7578
}
7679
}
@@ -83,15 +86,19 @@ export default class Heading extends Component {
8386
return (
8487
<StyledHeader
8588
className={this.props.className}
86-
innerRef={(c) => { this.containerRef = c; }}
89+
innerRef={c => {
90+
this.containerRef = c;
91+
}}
8792
height={this.state.height}
8893
styles={{
8994
context: this.context.styles.components.heading[`h${size}`],
90-
base: getStyles.call(this)
95+
base: getStyles.call(this),
9196
}}
9297
>
9398
<StyledSpan
94-
innerRef={(t) => { this.textRef = t; }}
99+
innerRef={t => {
100+
this.textRef = t;
101+
}}
95102
scale={this.state.scale}
96103
lineHeight={lineHeight}
97104
styles={{ user: style, typeface: typefaceStyle }}
@@ -102,22 +109,26 @@ export default class Heading extends Component {
102109
);
103110
}
104111

105-
return createElement(dynamicStyledHeaders[Tag], {
106-
className: this.props.className,
107-
lineHeight,
108-
styles: {
109-
context: this.context.styles.components.heading[`h${size}`],
110-
base: getStyles.call(this),
111-
user: style,
112-
typeface: typefaceStyle
113-
}
114-
}, children);
112+
return createElement(
113+
dynamicStyledHeaders[Tag],
114+
{
115+
className: this.props.className,
116+
lineHeight,
117+
styles: {
118+
context: this.context.styles.components.heading[`h${size}`],
119+
base: getStyles.call(this),
120+
user: style,
121+
typeface: typefaceStyle,
122+
},
123+
},
124+
children
125+
);
115126
}
116127
}
117128

118129
Heading.defaultProps = {
119130
size: 1,
120-
lineHeight: 1
131+
lineHeight: 1,
121132
};
122133

123134
Heading.propTypes = {
@@ -126,11 +137,11 @@ Heading.propTypes = {
126137
fit: PropTypes.bool,
127138
lineHeight: PropTypes.number,
128139
size: PropTypes.number,
129-
style: PropTypes.object
140+
style: PropTypes.object,
130141
};
131142

132143
Heading.contextTypes = {
133144
styles: PropTypes.object,
134145
store: PropTypes.object,
135-
typeface: PropTypes.object
146+
typeface: PropTypes.object,
136147
};

0 commit comments

Comments
 (0)