import Box from '../../box';
import Button from '..';
import Icon from '../../icon';
import React from 'react';
import ReactDOM from 'react-dom';
class LoadingIcon extends React.Component {
    constructor() {
        super(...arguments);
        this.state = {
            loading: false,
        };
        this.setLoading = () => {
            this.setState({ loading: true });
        };
    }
    render() {
        return (React.createElement(Box, { direction: "row", spacing: 20 },
            React.createElement(Button, { type: "secondary", iconSize: "xs", loading: true, icons: { loading: React.createElement(Icon, { type: "loading", style: { color: 'orange' } }) } }, "Custom loading icon"),
            React.createElement(Button, { type: "primary", loading: this.state.loading, onClick: this.setLoading, icons: { loading: React.createElement(Icon, { type: "loading", style: { color: 'orange' } }) } }, "Click to loading and show loading icon")));
    }
}
ReactDOM.render(React.createElement("div", null,
    React.createElement(Box, { direction: "row", spacing: 20 },
        React.createElement(Button, { type: "primary" },
            React.createElement(Icon, { type: "add" }),
            "\u4E3B\u8981\u6309\u94AE"),
        React.createElement(Button, { type: "secondary" },
            React.createElement(Icon, { type: "add" }),
            "\u4E8C\u7EA7\u6309\u94AE"),
        React.createElement(Button, null,
            React.createElement(Icon, { type: "atm" }),
            " ATM"),
        React.createElement(Button, { text: true },
            React.createElement(Icon, { type: "atm" }),
            " ATM"),
        React.createElement(Button, { warning: true },
            React.createElement(Icon, { type: "atm" }),
            " ATM"),
        React.createElement(Button, { iconSize: "xxs" },
            React.createElement(Icon, { type: "arrow-left" }),
            " ARROW")),
    React.createElement("br", null),
    React.createElement(LoadingIcon, null)), document.getElementById('button-demo-6'));
