"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

const tslib_1 = require("tslib");

const react_1 = tslib_1.__importDefault(require("react"));

const react_dom_1 = tslib_1.__importDefault(require("react-dom"));

const Tab_1 = tslib_1.__importDefault(require("./Tab"));

const Input_1 = tslib_1.__importDefault(require("./Input"));

const Items_1 = tslib_1.__importDefault(require("./Items"));

class App extends react_1.default.Component {
  constructor(props) {
    super(props);
    this.state = {
      isAsync: true,
      text: '',
      items: [...new Array(5000)].map((_, i) => ({
        index: i,
        name: `item:${i}`,
        value: i
      }))
    };
  }

  syncUpdate(fn, cb) {
    react_dom_1.default.flushSync(() => {
      this.setState(fn, cb);
    });
  }

  tick() {
    const setStateFromPrev = state => ({
      count: state.count + 1,
      items: state.items.map(item => Object.assign({}, item, {
        name: `item:${item.value + 1}`,
        value: item.value + 1
      }))
    });

    const afterSetState = () => {
      const onTimeout = () => {
        this.state.isAsync ? this.tick() : react_dom_1.default.flushSync(() => this.tick());
      };

      this.timerId = setTimeout(onTimeout, 100);
    };

    this.setState(setStateFromPrev, afterSetState);
  }

  componentDidMount() {
    this.tick();
  }

  componentWillUnmount() {
    if (this.timerId) {
      clearTimeout(this.timerId);
    }
  }

  render() {
    const {
      isAsync,
      text,
      count,
      items
    } = this.state;
    return react_1.default.createElement("main", null, react_1.default.createElement("h1", null, "React Fiber Time Slicing Sample"), react_1.default.createElement("p", null, "You can switch a rendering mode to Async or Sync."), react_1.default.createElement("p", null, "Please try to input text and switch the mode."), react_1.default.createElement("p", {
      style: {
        color: 'red'
      }
    }, "If you can't get any diferrence between Async mode and Sync mode, you should use CPU throttling on DevTools"), react_1.default.createElement(Tab_1.default, {
      isAsync: isAsync,
      onClick: value => this.setState(() => ({
        isAsync: value,
        text: ''
      }))
    }), react_1.default.createElement("h3", null, "Rendering a text input as sync priority"), react_1.default.createElement(Input_1.default, {
      value: text,
      onChange: value => this.syncUpdate(() => ({
        text: value
      }))
    }), react_1.default.createElement("h3", null, "Rendering ", items.length, "items as ", isAsync ? 'low' : 'sync', " priority"), react_1.default.createElement(Items_1.default, {
      items: items
    }));
  }

}

exports.default = App; //# sourceMappingURL=Async.js.map