import React from 'react';
import ReactDOM from 'react-dom';
import Shell from '..';
import { Icon, Nav, Radio, Search } from '../..';
const { Item } = Nav;
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.state = {
            device: 'desktop',
        };
        this.onChange = device => {
            this.setState({
                device,
            });
        };
        this.btnClick = () => {
            this.setState({
                navcollapse: !this.state.navcollapse,
            });
        };
        this.onCollapseChange = (visible) => {
            console.log('onCollapseChange:', visible);
            this.setState({
                navcollapse: visible,
            });
            return {};
        };
    }
    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, { collapse: this.state.navcollapse, onCollapseChange: this.onCollapseChange },
                    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("div", { style: { textAlign: 'center', background: '#eee' }, onClick: this.btnClick }, this.state.navcollapse ? (React.createElement(Icon, { type: "arrow-right", size: "xs" })) : (React.createElement(Icon, { type: "arrow-left", size: "xs" })))),
                React.createElement(Shell.LocalNavigation, null,
                    React.createElement(Nav, { embeddable: true, "aria-label": "local navigation" },
                        React.createElement(Nav.SubNav, { label: "Local Nav1" },
                            React.createElement(Item, null, "Local Nav1")),
                        React.createElement(Nav.SubNav, { label: "Local Nav2" },
                            React.createElement(Item, null, "Local Nav2")),
                        React.createElement(Nav.SubNav, { label: "Local Nav3" },
                            React.createElement(Item, null, "Local Nav3")),
                        React.createElement(Item, null, "Local Nav4"),
                        React.createElement(Item, null, "Local Nav5"),
                        React.createElement(Item, null, "Local Nav6"),
                        React.createElement(Item, null, "Local Nav7"),
                        React.createElement(Item, null, "Local Nav8"),
                        React.createElement(Item, null, "Local Nav4"),
                        React.createElement(Item, null, "Local Nav5"),
                        React.createElement(Item, null, "Local Nav6"),
                        React.createElement(Item, null, "Local Nav7"),
                        React.createElement(Item, null, "Local Nav8"))),
                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")),
                React.createElement(Shell.Ancillary, null),
                React.createElement(Shell.ToolDock, null,
                    React.createElement(Shell.ToolDockItem, null,
                        React.createElement(Icon, { type: "calendar" })),
                    React.createElement(Shell.ToolDockItem, null,
                        React.createElement(Icon, { type: "atm" })),
                    React.createElement(Shell.ToolDockItem, null,
                        React.createElement(Icon, { type: "account" }))))));
    }
}
ReactDOM.render(React.createElement(App, null), document.getElementById('shell-demo-4'));
