Fix time slicing fixture (#13305)

* Fix time slicing fixture

* Remove unused option
This commit is contained in:
Dan Abramov 2018-08-02 00:02:24 +01:00 committed by GitHub
parent e341e503b2
commit ae63110335
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,4 +1,4 @@
import React, {Component, PureComponent, unstable_AsyncMode} from 'react';
import React, {PureComponent, unstable_AsyncMode} from 'react';
import {flushSync, render, unstable_deferredUpdates} from 'react-dom';
import _ from 'lodash';
import Charts from './Charts';
@ -64,9 +64,12 @@ class App extends PureComponent {
}
this._ignoreClick = true;
unstable_deferredUpdates(() => {
this.setState({showDemo: true}, () => {
this._ignoreClick = false;
// TODO: needing setTimeout here seems like a React bug.
setTimeout(() => {
unstable_deferredUpdates(() => {
this.setState({showDemo: true}, () => {
this._ignoreClick = false;
});
});
});
};
@ -79,15 +82,13 @@ class App extends PureComponent {
}
}, 1000);
renderOption(strategy, label, enabled) {
renderOption(strategy, label) {
const {strategy: currentStrategy} = this.state;
return (
<label
className={strategy === currentStrategy ? 'selected' : null}
style={{opacity: enabled ? 1 : 0.5}}>
className={strategy === currentStrategy ? 'selected' : null}>
<input
type="radio"
disabled={!enabled}
checked={strategy === currentStrategy}
onChange={() => this.setState({strategy})}
/>
@ -107,8 +108,11 @@ class App extends PureComponent {
this.debouncedHandleChange(value);
break;
case 'async':
unstable_deferredUpdates(() => {
this.setState({value});
// TODO: needing setTimeout here seems like a React bug.
setTimeout(() => {
unstable_deferredUpdates(() => {
this.setState({value});
});
});
break;
default:
@ -124,13 +128,9 @@ class App extends PureComponent {
return (
<div className="container">
<div className="rendering">
{this.renderOption('sync', 'Synchronous', true)}
{this.renderOption('debounced', 'Debounced', true)}
{this.renderOption(
'async',
'Asynchronous',
false
) /* TODO Fix async demo and re-enable */}
{this.renderOption('sync', 'Synchronous')}
{this.renderOption('debounced', 'Debounced')}
{this.renderOption('async', 'Asynchronous')}
</div>
<input
className={'input ' + this.state.strategy}