import './demo2.css';
import React from 'react';
import ReactDOM from 'react-dom';
import Shell from '..';
import { Nav, Radio, Search } from '../..';
const { SubNav } = Nav;
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.state = {
            device: 'desktop',
        };
        this.onChange = device => {
            this.setState({
                device,
            });
        };
    }
    render() {
        return (React.createElement("div", null,
            React.createElement(Radio.Group, { style: { marginBottom: '10px' }, onChange: this.onChange, defaultValue: "desktop" },
                React.createElement(Radio, { value: "phone" }, "phone"),
                React.createElement(Radio, { value: "tablet" }, "tablet"),
                React.createElement(Radio, { value: "desktop" }, "desktop")),
            React.createElement(Shell, { className: 'iframe-hack', device: this.state.device, 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", placeholder: "Search", style: { width: '200px' } })),
                React.createElement(Shell.Action, null,
                    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.Navigation, null,
                    React.createElement(Nav, { embeddable: true, "aria-label": "global navigation" },
                        React.createElement(Nav.Item, { icon: "account" }, "Nav Item 1"),
                        React.createElement(Nav.Item, { icon: "calendar" }, "Nav Item 2"),
                        React.createElement(Nav.Item, { icon: "atm" }, "Nav Item 3"),
                        React.createElement(Nav.Item, { icon: "account" }, "Nav Item 4"),
                        React.createElement(Nav.Item, { icon: "account" }, "Nav Item 5"),
                        React.createElement(Nav.Item, { icon: "account" }, "Nav Item 6"),
                        React.createElement(Nav.Item, { icon: "account" }, "Nav Item 7"),
                        React.createElement(SubNav, { icon: "account", label: "Sub Nav" },
                            React.createElement(SubNav, { icon: "account", label: "Sub item1 Nav" },
                                React.createElement(Nav.Item, { icon: "account" },
                                    React.createElement("a", { href: "222222" }, "Item 1")),
                                React.createElement(Nav.Item, { icon: "account" }, "Item 2"))))),
                React.createElement(Shell.Content, null,
                    React.createElement("div", { style: { minHeight: 1200, background: '#fff' } })))));
    }
}
ReactDOM.render(React.createElement(App, null), document.getElementById('shell-demo-2'));
