import React from 'react';
import ReactDOM from 'react-dom';
import Switch from '../../switch';
import { Checkbox } from '@alifd/next';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.state = {
            isPreview: true,
            checked: true,
        };
        this.togglePreview = () => {
            this.setState({
                isPreview: !this.state.isPreview,
            });
        };
        this.toggleCheck = () => {
            this.setState({
                checked: !this.state.checked,
            });
        };
        this.renderChecked = (checked, props) => (checked ? React.createElement("span", null, props.children) : React.createElement("span", null, "null"));
        this.renderPreview = previewed => (previewed.length
            ? previewed.map((Item, index) => (React.createElement("span", { key: `${index}-checkbox`, style: { marginRight: 10 } }, Item.label)))
            : 'null');
    }
    render() {
        return (React.createElement(React.Fragment, null,
            "toggle checked:",
            React.createElement(Switch, { size: "small", defaultChecked: true, onChange: this.toggleCheck, style: { verticalAlign: 'middle', marginRight: 30 } }),
            "toggle isPreview:",
            ' ',
            React.createElement(Switch, { size: "small", defaultChecked: true, onChange: this.togglePreview, style: { verticalAlign: 'middle' } }),
            React.createElement("br", null),
            React.createElement("br", null),
            React.createElement("span", { style: { fontSize: 14 } }, "Single: "),
            React.createElement(Checkbox, { className: "checkbox-preview-inline", checked: this.state.checked, 
                // isPreview={this.state.isPreview}
                // @ts-ignore
                renderPreview: this.renderChecked }, "Checkbox"),
            React.createElement("br", null),
            React.createElement("span", { style: { fontSize: 14 } }, "Group: "),
            React.createElement(Checkbox.Group, { className: "checkbox-group-preview-inlline", name: "checkbox", defaultValue: 'react', isPreview: this.state.isPreview, 
                // @ts-ignore
                renderPreview: this.renderPreview },
                React.createElement(Checkbox, { value: "react" }, "React"),
                React.createElement(Checkbox, { value: "vue" }, "Vue"),
                React.createElement(Checkbox, { value: "angular" }, "Angular"))));
    }
}
ReactDOM.render(React.createElement(App, null), document.getElementById('checkbox-demo-4'));
