import React from 'react';
import ReactDOM from 'react-dom';
import Shell from '..';
import { Icon, Radio, Search } from '../..';
const RadioGroup = Radio.Group;
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.state = {
            size: 'small',
        };
        this.onChange = size => {
            this.setState({ size });
        };
    }
    render() {
        return (React.createElement("div", null,
            React.createElement(RadioGroup, { value: this.state.size, onChange: this.onChange, "aria-labelledby": "groupId" },
                React.createElement(Radio, { id: "small", value: "small" }, "small"),
                React.createElement(Radio, { id: "medium", value: "medium" }, "medium"),
                React.createElement(Radio, { id: "large", value: "large" }, "large")),
            React.createElement("br", null),
            React.createElement("br", null),
            React.createElement(Shell, { size: this.state.size, className: 'iframe-hack', style: { border: '1px solid #eee' } },
                React.createElement(Shell.Branding, null,
                    React.createElement("div", { className: "rectangular" }),
                    React.createElement("span", { style: { marginLeft: 10 } }, "App Name")),
                React.createElement(Shell.Navigation, { direction: "hoz" },
                    React.createElement(Search, { key: "2", shape: "simple", type: "dark", size: this.state.size, placeholder: "Search", style: { width: '200px' } })),
                React.createElement(Shell.Action, null,
                    React.createElement(Icon, { type: "ic_tongzhi" }),
                    React.createElement("img", { src: "https://img.alicdn.com/tfs/TB1.ZBecq67gK0jSZFHXXa9jVXa-904-826.png", className: "avatar", alt: "\u7528\u6237\u5934\u50CF" }),
                    React.createElement("span", { style: { marginLeft: 10 } }, "MyName")),
                React.createElement(Shell.Content, null,
                    React.createElement("div", { style: { minHeight: 1200, background: '#fff' } })),
                React.createElement(Shell.Footer, null,
                    React.createElement("span", null, "Alibaba Fusion"),
                    React.createElement("span", null, "@ 2019 Alibaba Piecework \u7248\u6743\u6240\u6709")))));
    }
}
ReactDOM.render(React.createElement(App, null), document.getElementById('shell-demo-5'));
