import List from '..';
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { Avatar, Button, Loading } from '../..';
const data = [
    {
        title: 'A Title',
        img: 'https://img.alicdn.com/tfs/TB1QS.4l4z1gK0jSZSgXXavwpXa-1024-1024.png',
        money: '$20',
    },
    {
        title: 'B Title',
        img: 'https://img.alicdn.com/tfs/TB1QS.4l4z1gK0jSZSgXXavwpXa-1024-1024.png',
        money: '$10',
    },
    {
        title: 'Title',
        img: 'https://img.alicdn.com/tfs/TB1QS.4l4z1gK0jSZSgXXavwpXa-1024-1024.png',
        money: '$20',
    },
    {
        title: 'Title',
        img: 'https://img.alicdn.com/tfs/TB1QS.4l4z1gK0jSZSgXXavwpXa-1024-1024.png',
        money: '$20',
    },
];
const CustomLoading = props => React.createElement(Loading, Object.assign({}, props));
const App = () => {
    const [loading, setLoading] = useState(false);
    return (React.createElement("div", { style: { width: 288 } },
        React.createElement(Button, { onClick: () => setLoading(!loading) }, "Toggle loading"),
        React.createElement(List, { size: "small", loading: loading, loadingComponent: CustomLoading, header: React.createElement("div", null, "Notifications"), dataSource: data, renderItem: (item, i) => (React.createElement(List.Item, { key: i, extra: item.money, title: item.title, media: React.createElement(Avatar, { src: item.img }) },
                "List Item ",
                i)) })));
};
ReactDOM.render(React.createElement(App, null), document.getElementById('list-demo-3'));
