import Radio from '../../radio';
import React from 'react';
import ReactDOM from 'react-dom';
import ResponsiveGrid from '..';
const { Cell } = ResponsiveGrid;
const ds = ['desktop', 'tablet', 'phone'];
class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            device: 'desktop',
        };
        this.onChange = device => {
            this.setState({
                device,
            });
        };
    }
    render() {
        const { device } = this.state;
        return (React.createElement("div", { className: "list" },
            React.createElement(Radio.Group, { shape: "button", onChange: this.onChange, dataSource: ds, defaultValue: "desktop" }),
            React.createElement("br", null),
            React.createElement("br", null),
            React.createElement("div", { className: `list-item ${device}` },
                React.createElement(ResponsiveGrid, { gap: 10, device: device },
                    React.createElement(Cell, { className: "mygrid grid-12", colSpan: 12 }, "12"),
                    React.createElement(Cell, { className: "mygrid grid-6", colSpan: 6 }, "6"),
                    React.createElement(Cell, { className: "mygrid grid-6", colSpan: 6 }, "6"),
                    React.createElement(Cell, { className: "mygrid grid-4", colSpan: 4 }, "4"),
                    React.createElement(Cell, { className: "mygrid grid-4", colSpan: 4 }, "4"),
                    React.createElement(Cell, { className: "mygrid grid-4", colSpan: 4 }, "4"),
                    React.createElement(Cell, { className: "mygrid grid-3", colSpan: 3 }, "3"),
                    React.createElement(Cell, { className: "mygrid grid-3", colSpan: 3 }, "3"),
                    React.createElement(Cell, { className: "mygrid grid-3", colSpan: 3 }, "3"),
                    React.createElement(Cell, { className: "mygrid grid-3", colSpan: 3 }, "3")))));
    }
}
ReactDOM.render(React.createElement(Demo, null), document.getElementById('responsive-grid-demo-1'));
