import React from 'react';
import ReactDOM from 'react-dom';
import Tag from '..';
const { Group: TagGroup, Closeable: CloseableTag } = Tag;
class Demo extends React.Component {
    renderCloseAreaTags() {
        return ['tag', 'tail'].reduce((prev, curr) => prev.concat([
            React.createElement("h4", { key: `tag-title-${curr}` },
                "\u70B9\u51FB",
                curr,
                " \u5173\u95ED"),
            React.createElement(CloseableTag, { size: "large", key: `tag-${curr}-1`, closeArea: curr },
                "closeArea: ",
                curr),
            React.createElement(CloseableTag, { size: "medium", key: `tag-${curr}-2`, type: "primary", closeArea: curr },
                "closeArea: ",
                curr),
            React.createElement(CloseableTag, { size: "small", key: `tag-${curr}-2`, type: "primary", closeArea: curr },
                "closeArea: ",
                curr),
            React.createElement(CloseableTag, { size: "xs", key: `tag-${curr}-2`, type: "primary", closeArea: curr },
                "closeArea: ",
                curr),
        ]), []);
    }
    render() {
        return (React.createElement("div", { className: "tag-list" },
            React.createElement(TagGroup, null, this.renderCloseAreaTags()),
            React.createElement("h4", null, "close handler"),
            React.createElement(TagGroup, null,
                React.createElement(CloseableTag
                // @ts-ignore
                , { 
                    // @ts-ignore
                    disabled: true, size: 'large', onClose: (val) => {
                        console.log('可关闭', val);
                        return true;
                    } }, "close"),
                React.createElement(CloseableTag, { size: 'medium', onClose: () => {
                        console.log('禁用关闭');
                        return false;
                    } },
                    ' ',
                    "prevent close",
                    ' '),
                React.createElement(CloseableTag, { size: 'small', afterClose: () => console.log('关闭后回调') }, "after Close"),
                React.createElement(CloseableTag, { size: 'xs', afterClose: () => console.log('关闭后回调') }, "after Close")),
            React.createElement("div", { style: { background: '#f3f3f3', padding: '10px' } },
                React.createElement(TagGroup, null,
                    React.createElement(CloseableTag
                    // @ts-ignore
                    , { 
                        // @ts-ignore
                        disabled: true, size: 'large', theme: 'grey', onClose: (val) => {
                            console.log('可关闭', val);
                            return true;
                        } }, "close"),
                    React.createElement(CloseableTag, { size: 'medium', theme: 'grey', onClose: () => {
                            console.log('禁用关闭');
                            return false;
                        } },
                        ' ',
                        "prevent close",
                        ' '),
                    React.createElement(CloseableTag, { size: 'small', theme: 'grey', afterClose: () => console.log('关闭后回调') }, "after Close"),
                    React.createElement(CloseableTag, { size: 'xs', theme: 'grey', afterClose: () => console.log('关闭后回调') }, "after Close")))));
    }
}
ReactDOM.render(React.createElement(Demo, null), document.getElementById('tag-demo-6'));
