import Pagination from '..';
import React from 'react';
import ReactDOM from 'react-dom';
const handlePageSizeChange = size => console.log(size);
const containerStyle = {
    height: '300px',
    padding: 0,
    width: '100%',
};
const boxStyle = {
    overflow: 'auto',
    position: 'relative',
    width: '100%',
    height: '200px',
    border: '1px solid black',
};
const tempStyle = {
    height: '200px',
    display: 'flex',
    'justify-content': 'center',
    'align-items': 'center',
};
const parentStyle = {
    display: 'flex',
    'justify-content': 'space-between',
};
const popupProps = {
    align: 'bl tl',
};
ReactDOM.render(React.createElement("div", null,
    React.createElement("h3", null, "default align - 'tl bl'"),
    React.createElement(Pagination, { pageSizeSelector: "dropdown", total: 10, pageSizePosition: "start", onPageSizeChange: handlePageSizeChange }),
    React.createElement("h3", null, "custom align - 'bl tl'"),
    React.createElement(Pagination, { pageSizeSelector: "dropdown", total: 10, pageSizePosition: "start", onPageSizeChange: handlePageSizeChange, popupProps: popupProps }),
    React.createElement("h3", null, "Inside parent with \"overlflow: auto\""),
    React.createElement("div", { style: containerStyle },
        React.createElement("div", { style: boxStyle },
            React.createElement("div", { style: tempStyle }, "scroll down to see the example"),
            React.createElement("div", { style: parentStyle },
                React.createElement("div", null,
                    React.createElement("h3", null, "default align - 'tl bl'"),
                    React.createElement(Pagination, { pageSizeSelector: "dropdown", total: 10, pageSizePosition: "start", onPageSizeChange: handlePageSizeChange })),
                React.createElement("div", null,
                    React.createElement("h3", null, "custom align - 'bl tl'"),
                    React.createElement(Pagination, { pageSizeSelector: "dropdown", total: 10, pageSizePosition: "start", onPageSizeChange: handlePageSizeChange, popupProps: popupProps })))))), document.getElementById('pagination-demo-10'));
