"use strict";

var _ = _interopRequireDefault(require(".."));

var _react = _interopRequireDefault(require("react"));

var _reactDom = _interopRequireDefault(require("react-dom"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var handlePageSizeChange = function handlePageSizeChange(size) {
  return console.log(size);
};

var containerStyle = {
  height: '300px',
  padding: 0,
  width: '100%'
};
var boxStyle = {
  overflow: 'auto',
  position: 'relative',
  width: '100%',
  height: '200px',
  border: '1px solid black'
};
var tempStyle = {
  height: '200px',
  display: 'flex',
  'justify-content': 'center',
  'align-items': 'center'
};
var parentStyle = {
  display: 'flex',
  'justify-content': 'space-between'
};
var popupProps = {
  align: 'bl tl'
};

_reactDom["default"].render( /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h3", null, "default align - 'tl bl'"), /*#__PURE__*/_react["default"].createElement(_["default"], {
  pageSizeSelector: "dropdown",
  total: 10,
  pageSizePosition: "start",
  onPageSizeChange: handlePageSizeChange
}), /*#__PURE__*/_react["default"].createElement("h3", null, "custom align - 'bl tl'"), /*#__PURE__*/_react["default"].createElement(_["default"], {
  pageSizeSelector: "dropdown",
  total: 10,
  pageSizePosition: "start",
  onPageSizeChange: handlePageSizeChange,
  popupProps: popupProps
}), /*#__PURE__*/_react["default"].createElement("h3", null, "Inside parent with \"overlflow: auto\""), /*#__PURE__*/_react["default"].createElement("div", {
  style: containerStyle
}, /*#__PURE__*/_react["default"].createElement("div", {
  style: boxStyle
}, /*#__PURE__*/_react["default"].createElement("div", {
  style: tempStyle
}, "scroll down to see the example"), /*#__PURE__*/_react["default"].createElement("div", {
  style: parentStyle
}, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h3", null, "default align - 'tl bl'"), /*#__PURE__*/_react["default"].createElement(_["default"], {
  pageSizeSelector: "dropdown",
  total: 10,
  pageSizePosition: "start",
  onPageSizeChange: handlePageSizeChange
})), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h3", null, "custom align - 'bl tl'"), /*#__PURE__*/_react["default"].createElement(_["default"], {
  pageSizeSelector: "dropdown",
  total: 10,
  pageSizePosition: "start",
  onPageSizeChange: handlePageSizeChange,
  popupProps: popupProps
})))))), document.getElementById('pagination-demo-10'));