"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TablePagination = exports.TableSortingHeader = exports.UsingReactTable = exports.Regular = exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

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

var _reactTable = require("react-table");

var _makeData = _interopRequireWildcard(require("./makeData"));

var _README = _interopRequireDefault(require("./README.mdx"));

var _Table = _interopRequireDefault(require("./Table"));

var _TableSorting = _interopRequireDefault(require("./TableSorting"));

var _Pagination = _interopRequireDefault(require("../Pagination"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var _default = {
  title: 'Components/UI Elements/Table',
  component: _Table.default,
  parameters: {
    componentSubtitle: 'Component',
    status: 'released',
    mdx: _README.default
  }
};
exports.default = _default;

function ReactTable(_ref) {
  var columns = _ref.columns,
      data = _ref.data,
      withBorder = _ref.withBorder;

  // Use the state and functions returned from useTable to build your UI
  var _useTable = (0, _reactTable.useTable)({
    columns: columns,
    data: data
  }),
      getTableProps = _useTable.getTableProps,
      getTableBodyProps = _useTable.getTableBodyProps,
      headerGroups = _useTable.headerGroups,
      rows = _useTable.rows,
      prepareRow = _useTable.prepareRow; // Render the UI for your table


  return /*#__PURE__*/_react.default.createElement(_Table.default, (0, _extends2.default)({}, getTableProps(), {
    withBorder: withBorder
  }), /*#__PURE__*/_react.default.createElement("thead", null, headerGroups.map(function (headerGroup) {
    return /*#__PURE__*/_react.default.createElement("tr", headerGroup.getHeaderGroupProps(), headerGroup.headers.map(function (column) {
      return /*#__PURE__*/_react.default.createElement("th", column.getHeaderProps(), column.render('Header'));
    }));
  })), /*#__PURE__*/_react.default.createElement("tbody", getTableBodyProps(), rows.map(function (row, i) {
    prepareRow(row);
    return /*#__PURE__*/_react.default.createElement("tr", row.getRowProps(), row.cells.map(function (cell) {
      return /*#__PURE__*/_react.default.createElement("td", cell.getCellProps(), cell.render('Cell'));
    }));
  })));
}

function ReactTablePagination(_ref2) {
  var columns = _ref2.columns,
      data = _ref2.data,
      withBorder = _ref2.withBorder;

  // Use the state and functions returned from useTable to build your UI
  var _useTable2 = (0, _reactTable.useTable)({
    columns: columns,
    data: data,
    initialState: {
      pageIndex: 2
    }
  }, _reactTable.usePagination),
      getTableProps = _useTable2.getTableProps,
      getTableBodyProps = _useTable2.getTableBodyProps,
      headerGroups = _useTable2.headerGroups,
      prepareRow = _useTable2.prepareRow,
      page = _useTable2.page,
      canPreviousPage = _useTable2.canPreviousPage,
      canNextPage = _useTable2.canNextPage,
      pageCount = _useTable2.pageCount,
      gotoPage = _useTable2.gotoPage,
      setPageSize = _useTable2.setPageSize,
      _useTable2$state = _useTable2.state,
      pageIndex = _useTable2$state.pageIndex,
      pageSize = _useTable2$state.pageSize;

  var changePage = function changePage(page) {
    gotoPage(page.page - 1); // Update PageSize

    if (pageSize !== page.pageSize) {
      setPageSize(page.pageSize);
    }
  }; // Render the UI for your table


  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("pre", null, /*#__PURE__*/_react.default.createElement("code", null, JSON.stringify({
    pageIndex: pageIndex,
    pageSize: pageSize,
    pageCount: pageCount,
    canNextPage: canNextPage,
    canPreviousPage: canPreviousPage
  }, null, 2))), /*#__PURE__*/_react.default.createElement(_Table.default, (0, _extends2.default)({}, getTableProps(), {
    withBorder: withBorder
  }), /*#__PURE__*/_react.default.createElement("thead", null, headerGroups.map(function (headerGroup) {
    return /*#__PURE__*/_react.default.createElement("tr", headerGroup.getHeaderGroupProps(), headerGroup.headers.map(function (column) {
      return /*#__PURE__*/_react.default.createElement("th", column.getHeaderProps(), column.render('Header'));
    }));
  })), /*#__PURE__*/_react.default.createElement("tbody", getTableBodyProps(), page.map(function (row, i) {
    prepareRow(row);
    return /*#__PURE__*/_react.default.createElement("tr", row.getRowProps(), row.cells.map(function (cell) {
      return /*#__PURE__*/_react.default.createElement("td", cell.getCellProps(), cell.render('Cell'));
    }));
  }))), /*#__PURE__*/_react.default.createElement(_Pagination.default, {
    pageSize: pageSize,
    pageSizes: [10, 20, 30],
    page: pageIndex + 1,
    totalItems: data.length,
    onChange: changePage
  }));
}

function ReactTableSorting(_ref3) {
  var columns = _ref3.columns,
      data = _ref3.data,
      withBorder = _ref3.withBorder;

  var _useTable3 = (0, _reactTable.useTable)({
    columns: columns,
    data: data,
    initialState: {
      sortBy: [{
        id: 'age',
        desc: false
      }]
    }
  }, _reactTable.useSortBy),
      getTableProps = _useTable3.getTableProps,
      getTableBodyProps = _useTable3.getTableBodyProps,
      headerGroups = _useTable3.headerGroups,
      rows = _useTable3.rows,
      prepareRow = _useTable3.prepareRow;

  return /*#__PURE__*/_react.default.createElement(_Table.default, getTableProps(), /*#__PURE__*/_react.default.createElement("thead", null, headerGroups.map(function (headerGroup) {
    return /*#__PURE__*/_react.default.createElement("tr", headerGroup.getHeaderGroupProps(), headerGroup.headers.map(function (column) {
      return (
        /*#__PURE__*/
        // Add the sorting props to control sorting. For this example
        // we can add them into the header props
        _react.default.createElement("th", column.getHeaderProps(column.getSortByToggleProps()), column.render('Header'), /*#__PURE__*/_react.default.createElement(_TableSorting.default, column))
      );
    }));
  })), /*#__PURE__*/_react.default.createElement("tbody", getTableBodyProps(), rows.map(function (row, i) {
    prepareRow(row);
    return /*#__PURE__*/_react.default.createElement("tr", row.getRowProps(), row.cells.map(function (cell) {
      return /*#__PURE__*/_react.default.createElement("td", cell.getCellProps(), cell.render('Cell'));
    }));
  })));
}

var Regular = function Regular(args) {
  return /*#__PURE__*/_react.default.createElement(_Table.default, null, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("th", null, "Header content 1"), /*#__PURE__*/_react.default.createElement("th", null, "Header content 2"))), /*#__PURE__*/_react.default.createElement("tfoot", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", null, "Footer content 1"), /*#__PURE__*/_react.default.createElement("td", null, "Footer content 2"))), /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", null, "Body content 1"), /*#__PURE__*/_react.default.createElement("td", null, "Body content 2"))));
};

exports.Regular = Regular;

var UsingReactTable = function UsingReactTable(args) {
  console.log(ReactTable.toString());

  var columns = _react.default.useMemo(function () {
    return _makeData.sampleColumns;
  }, []);

  var data = _react.default.useMemo(function () {
    return (0, _makeData.default)(3);
  }, []);

  return /*#__PURE__*/_react.default.createElement(ReactTable, (0, _extends2.default)({}, args, {
    columns: columns,
    data: data
  }));
};

exports.UsingReactTable = UsingReactTable;
var text = "\nWe recommend [React-Table](https://github.com/react-tools/react-table) for tables with additional complexity. If you need Excel like features like cell editing row selection and copy/paste we recommend [ag-grid](https://www.ag-grid.com/).\n";
UsingReactTable.story = {
  parameters: {
    docs: {
      storyDescription: text
    }
  }
};

var TableSortingHeader = function TableSortingHeader(args) {
  var columns = _react.default.useMemo(function () {
    return _makeData.sampleColumns;
  }, []);

  var data = _react.default.useMemo(function () {
    return (0, _makeData.default)(8);
  }, []);

  return /*#__PURE__*/_react.default.createElement(ReactTableSorting, (0, _extends2.default)({}, args, {
    columns: columns,
    data: data
  }));
};

exports.TableSortingHeader = TableSortingHeader;
TableSortingHeader.story = {
  parameters: {
    docs: {
      storyDescription: "Sorting"
    }
  }
};

var TablePagination = function TablePagination(args) {
  var columns = _react.default.useMemo(function () {
    return _makeData.sampleColumns;
  }, []);

  var data = _react.default.useMemo(function () {
    return (0, _makeData.default)(25);
  }, []);

  return /*#__PURE__*/_react.default.createElement(ReactTablePagination, (0, _extends2.default)({}, args, {
    columns: columns,
    data: data
  }));
};

exports.TablePagination = TablePagination;
var hello = "\nTo use the custom Pagination you can use the TablePagination component. Additional props for the TablePagination can be directly added to the `ReactTable` component (see Pagination component).\n\n\n```js\nimport { TablePagination } from '@wfp/ui';\n\n// Replacing the Pagination Component of React-Table\n\n<ReactTable\n  {...yourTableProps}\n  PaginationComponent={TablePagination}\n  {...otherPropsForThePaginationToo}\n/>\n```\n";
TablePagination.story = {
  parameters: {
    docs: {
      storyDescription: hello
    }
  }
};