import Loading from '..';
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from '../..';

class App extends React.Component {
  btn: any;

  state = {
    visible: false,
  };

  onClose = () => {
    this.setState({
      visible: false,
    });
  };

  onClick() {
    this.setState({ visible: !this.state.visible });
  }

  render() {
    return (
      <span>
        <Loading
          visible={this.state.visible}
          fullScreen
          // @ts-ignore
          safeNode={this.btn}
          onVisibleChange={this.onClose.bind(this)}
        >
          <Button
            onClick={this.onClick.bind(this)}
            ref={ref => (this.btn = ref)}
          >
            Full Screen
          </Button>
        </Loading>
      </span>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('loading-demo-7'));