-
Notifications
You must be signed in to change notification settings - Fork 3
/
examples.jsx
98 lines (88 loc) · 3.02 KB
/
examples.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
88
89
90
91
92
93
94
95
96
97
98
import React from 'react';
import ReactDOM from 'react-dom';
import easingFunctions from './lib/simplifiedEasings';
import sanitize from './lib/santitizer';
import Plot from './src/plot.jsx';
class Examples extends React.Component {
constructor(props) {
super(props);
this.state = {
expression: 'x * x',
easingName: 'easeOutQuad'
};
}
render() {
const {expression, easingName} = this.state;
return (
<div>
<h2>Examples using react-function-plot</h2>
<span className='italic'>react-function-plot</span><span> is a React component for
rendering JS functions as SVG paths
(<a href="https://github.com/angus-c/react-function-plot">github</a>,
<a href="https://www.npmjs.com/package/react-function-plot">npm</a>)</span>
<div className='outer'>
<form className='diyWrapper' onSubmit={e => this.onDIYSubmit(e)}>
<h3>Edit the function expression</h3>
<div className='code inline control'>return </div>
<input className='code inline'
autoFocus
id='diyInput'
ref='expression'
type='text'
defaultValue={this.state.expression}
/>
<div className='panel diyContainer'>
<Plot
className='diy'
fn={this.functionFromExpression(expression)}
thickness={4}
/>
</div>
</form>
<div className='easingsWrapper'>
<h3 className='inline'>Select an Easing</h3>
<select id='easingsSelector' onChange={e => this.onEasingChange(e)}>
<option id='linear'>linear</option>
<option id='easeInQuad'>ease-in quad</option>
<option id='easeOutQuad'>ease-out quad</option>
<option selected id='easeInOutQuad'>ease-in-out quad</option>
<option id='easeInCubic'>ease-in cubic</option>
</select>
<div className='code ownline control'>
{this.bodyFromFunction(this.functionFromEasingName(easingName))}
</div>
<div className='panel easingsContainer'>
<Plot
className='easing'
fn={this.functionFromEasingName(easingName)}
thickness={4}
/>
</div>
</div>
</div>
</div>
);
}
onDIYSubmit(e) {
e.preventDefault();
this.setState({
expression: this.refs.expression.value
});
}
onEasingChange(e) {
this.setState({
easingName: e.target.options[e.target.selectedIndex].id
});
}
bodyFromFunction(fn) {
return fn.toString().replace(/^[^{]*{\s*/, '').replace(/\s*}[^}]*$/, '');
}
functionFromEasingName(easingName) {
return easingFunctions[easingName];
}
functionFromExpression(expression) {
return new Function('x', 'return ' + sanitize(expression));
}
}
ReactDOM.render(<Examples/>, document.querySelector('.reactRoot'));
export default Examples;