Use radio buttons for toggle
Andrew Clark committed
Mar 27, 2017 at 12:48 UTC
f6a64cad5dee29b50a2284e52aed353e7e7a5ee4
1 file changed
+41
-7
examples/fiber/index.html
+41
-7
@@ -128,10 +128,10 @@
128
super();
129
this.state = {
130
seconds: 0,
131
- useTimeSlicing: true
131
+ useTimeSlicing: true,
132
};
133
this.tick = this.tick.bind(this);
134
- this.toogleTimeSlicing = this.toogleTimeSlicing.bind(this);
134
+ this.onTimeSlicingChange = this.onTimeSlicingChange.bind(this);
135
}
136
componentDidMount() {
137
this.intervalID = setInterval(this.tick, 1000);
@@ -140,15 +140,15 @@
140
if (this.state.useTimeSlicing) {
141
// Update is time-sliced.
142
ReactDOMFiber.unstable_deferredUpdates(() => {
143
- this.setState(state => ({ ...state, seconds: (state.seconds % 10) + 1 }));
143
+ this.setState(state => ({ seconds: (state.seconds % 10) + 1 }));
144
});
145
} else {
146
// Update is not time-sliced. Causes demo to stutter.
147
- this.setState(state => ({ ...state, seconds: (state.seconds % 10) + 1 }));
147
+ this.setState(state => ({ seconds: (state.seconds % 10) + 1 }));
148
}
149
}
150
- toogleTimeSlicing() {
151
- this.setState(state => ({ ...state, useTimeSlicing: !state.useTimeSlicing}));
150
+ onTimeSlicingChange(value) {
151
+ this.setState(() => ({ useTimeSlicing: value }));
152
}
153
componentWillUnmount() {
154
clearInterval(this.intervalID);
@@ -161,7 +161,16 @@
161
const transform = 'scaleX(' + (scale / 2.1) + ') scaleY(0.7) translateZ(0.1px)';
162
return (
163
<div>
164
- <button onClick={this.toogleTimeSlicing}>Turn { this.state.useTimeSlicing ? 'OFF' : 'ON' } Time Slicing</button>
164
+ <div>
165
+ <h3>Time-slicing</h3>
166
+ <p>Toggle this and observe the effect</p>
167
+ <Toggle
168
+ onLabel="On"
169
+ offLabel="Off"
170
+ onChange={this.onTimeSlicingChange}
171
+ value={this.state.useTimeSlicing}
172
+ />
173
+ </div>
174
<div style={{ ...containerStyle, transform }}>
175
<div>
176
<SierpinskiTriangle x={0} y={0} s={1000}>
@@ -174,6 +183,31 @@
183
}
184
}
185
186
+ class Toggle extends React.Component {
187
+ constructor(props) {
188
+ super();
189
+ this.onChange = this.onChange.bind(this);
190
+ }
191
+ onChange(event) {
192
+ this.props.onChange(event.target.value === 'on');
193
+ }
194
+ render() {
195
+ const value = this.props.value;
196
+ return (
197
+ <label onChange={this.onChange}>
198
+ <label>
199
+ {this.props.onLabel}
200
+ <input type="radio" name="value" value="on" checked={value} />
201
+ </label>
202
+ <label>
203
+ {this.props.offLabel}
204
+ <input type="radio" name="value" value="off" checked={!value} />
205
+ </label>
206
+ </label>
207
+ );
208
+ }
209
+ }
210
+
211
var start = new Date().getTime();
212
function update() {
213
ReactDOMFiber.render(