-
Notifications
You must be signed in to change notification settings - Fork 0
/
Simple.jsx
87 lines (76 loc) · 1.95 KB
/
Simple.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
/***
* Copyright (c) 2016 - 2023 Alex Grant (@localnerve), LocalNerve LLC
* Copyrights licensed under the BSD License. See the accompanying LICENSE file for terms.
*
* React usage example and test fixture.
*/
/* eslint-env browser */
import React from 'react';
import debounce from 'lodash/debounce';
import createSizeReporter from '../../lib/index.js';
let testReporter;
function reporter (data) {
if (testReporter) {
testReporter(data);
}
}
export function setMockReporter (reporter) {
testReporter = reporter;
}
export class Simple extends React.Component {
constructor (props) {
super(props);
this.state = {
action: false
};
this.executeAction = this.executeAction.bind(this);
}
/**
* This just toggles a state bool for testing.
* React binds this as written.
* A conceptual placeholder for your flux flow action executor.
* In this function, you would execute a size action.
*/
executeAction (data) {
reporter(data);
this.setState({
action: true
}, () => {
setTimeout(() => {
if (global.window !== undefined) {
this.setState({
action: false
});
}
}, 2000);
});
}
/**
* Setup window resize handler and report this component size now
*/
componentDidMount () {
const sizeReporter = createSizeReporter('.contained', this.executeAction, {
reportWidth: true
});
this.resizeHandler = debounce(sizeReporter, 100);
window.addEventListener('resize', this.resizeHandler);
// reportSize now.
setTimeout(sizeReporter, 0);
}
/**
* Remove the window resize handler.
*/
componentWillUnmount () {
window.removeEventListener('resize', this.resizeHandler);
}
/**
* render and reflect if executeAction ran.
*/
render () {
return (
<div className="contained" style={{width: '100%'}}>
<span>Simple Test {this.state.action ? 'Action' : ''}</span>
</div>
);
}
}