import './demo7.css';
import Badge from '../index';
import React from 'react';
import ReactDOM from 'react-dom';
import { Button, Icon } from '@alifd/next';
const ButtonGroup = Button.Group;
class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0,
            show: true,
        };
        this.increase = this.increase.bind(this);
        this.decrease = this.decrease.bind(this);
        this.onClick = this.onClick.bind(this);
    }
    increase() {
        const count = this.state.count + 1;
        this.setState({ count });
    }
    decrease() {
        let count = this.state.count - 1;
        if (count < 0) {
            count = 0;
        }
        this.setState({ count });
    }
    onClick() {
        this.setState({
            show: !this.state.show,
        });
    }
    render() {
        return (React.createElement("div", null,
            React.createElement("div", { className: "change-count" },
                React.createElement(Badge, { count: this.state.count },
                    React.createElement("a", { href: "#", className: "head-example" },
                        React.createElement("span", { className: "next-sr-only" }, "unread messages"))),
                React.createElement(Badge, { count: this.state.count, showZero: true },
                    React.createElement("a", { href: "#", className: "head-example" },
                        React.createElement("span", { className: "next-sr-only" }, "unread messages"))),
                React.createElement(ButtonGroup, null,
                    React.createElement(Button, { "aria-label": "add", onClick: this.increase },
                        React.createElement(Icon, { type: "add" })),
                    React.createElement(Button, { "aria-label": "minus", onClick: this.decrease },
                        React.createElement(Icon, { type: "minus" })))),
            React.createElement("div", null,
                React.createElement(Badge, { dot: this.state.show },
                    React.createElement("a", { href: "#", className: "head-example" })),
                React.createElement(Button, { onClick: this.onClick }, "Toggle Display"))));
    }
}
ReactDOM.render(React.createElement(Demo, null), document.getElementById('badge-demo-7'));
