import './demo2.css';
import Animate from '..';
import React from 'react';
import ReactDOM from 'react-dom';
class TodoList extends React.Component {
    constructor(props) {
        super(props);
        this.state = { items: ['hello', 'world', 'click', 'me'] };
    }
    handleAdd() {
        this.setState({
            items: [
                ...this.state.items,
                // eslint-disable-next-line
                prompt('Enter some text')
            ],
        });
    }
    handleRemove(i) {
        const newItems = this.state.items.slice();
        newItems.splice(i, 1);
        this.setState({ items: newItems });
    }
    render() {
        return (React.createElement("div", { className: "totolist-container" },
            React.createElement(Animate, { animationAppear: true, animation: "fade", className: "todo-list", singleMode: false, beforeAppear: () => console.log('before appear'), onAppear: () => console.log('appear'), afterAppear: () => console.log('after appear'), beforeEnter: () => console.log('before enter'), onEnter: () => console.log('enter'), afterEnter: () => console.log('after enter'), beforeLeave: () => console.log('before leave'), onLeave: () => console.log('leave'), afterLeave: () => console.log('after leave') }, this.state.items.map((item, i) => (React.createElement("div", { key: item },
                item,
                React.createElement("button", { onClick: () => this.handleRemove(i) }, "\u00D7"))))),
            React.createElement("button", { onClick: () => this.handleAdd() }, "Add Item")));
    }
}
ReactDOM.render(React.createElement(TodoList, null), document.getElementById('animate-demo-2'));
