import './demo5.css';
import Box from '..';
import React from 'react';
import ReactDOM from 'react-dom';
import { Switch } from '../..';
class BoxDemo extends React.Component {
    constructor() {
        super(...arguments);
        this.state = {
            wrap: true,
        };
        this.onSwitchChange = checked => {
            this.setState({
                wrap: checked,
            });
        };
    }
    render() {
        return (React.createElement("div", { className: "list" },
            React.createElement(Switch, { style: { width: 70 }, defaultChecked: true, checkedChildren: "wrap", onChange: this.onSwitchChange }),
            React.createElement("div", { className: "list-item" },
                React.createElement(Box, { spacing: 20, wrap: this.state.wrap, direction: "row" },
                    React.createElement("div", { className: "box-180-50" }),
                    React.createElement("div", { className: "box-180-50" }),
                    React.createElement("div", { className: "box-180-50" }),
                    React.createElement("div", { className: "box-180-50" }),
                    React.createElement("div", { className: "box-180-50" }),
                    React.createElement("div", { className: "box-180-50" }),
                    React.createElement("div", { className: "box-180-50" }),
                    React.createElement("div", { className: "box-180-50" }),
                    React.createElement("div", { className: "box-180-50" })))));
    }
}
ReactDOM.render(React.createElement(BoxDemo, null), document.getElementById('box-demo-5'));
