@trellixio/roaster-coffee/esm/components/Table/Table.js

Beans' product component library

import * as React from 'react';
import { Button } from '../Button/Button.js';
import { Checkbox } from './components/Checkbox/index.js';
import { TableBody } from './components/TableBody.js';
import { TableCell } from './components/TableCell.js';
import { TableHead } from './components/TableHead.js';
import { TableHeadCell } from './components/TableHeadCell.js';
import { TablePagination } from './components/TablePagination.js';
import { TableProvider } from './components/TableProvider/TableProvider.js';
import { TableRow } from './components/TableRow.js';
import { useTableValue, useTableSelectionChange } from './utils/table/hooks.js';
import './utils/table/context.js';
import { SelectionType, SELECT_ALL_ITEMS } from './utils/table/types.js';
import { classNames } from '../../utils/classNames/index.js';
import '@floating-ui/react';

const TableBase = React.forwardRef((props, ref) => {
  const { children, showPagination, selectActions, browsable = false } = props;
  const { bulkSelectState, itemCount, selectedItemsCount, selectable } = useTableValue();
  const handleSelectionChange = useTableSelectionChange();
  const handleSelectAllItems = React.useCallback(() => {
    handleSelectionChange(selectedItemsCount === SELECT_ALL_ITEMS ? SelectionType.Page : SelectionType.All);
  }, [handleSelectionChange, selectedItemsCount]);
  const handleTogglePage = React.useCallback(() => {
    handleSelectionChange(SelectionType.Page);
  }, [bulkSelectState, handleSelectionChange]);
  const bodyMarkup = /* @__PURE__ */ React.createElement("div", { className: "table-container" }, /* @__PURE__ */ React.createElement("table", { ref, className: classNames("datatable", { selectable, browsable }) }, children));
  return /* @__PURE__ */ React.createElement("section", { className: "table-section" }, /* @__PURE__ */ React.createElement("form", null, bulkSelectState && /* @__PURE__ */ React.createElement("div", { className: "table-actions visible" }, /* @__PURE__ */ React.createElement("div", { className: "items-group justify", style: { alignItems: "center" } }, /* @__PURE__ */ React.createElement("div", { className: "items-group" }, /* @__PURE__ */ React.createElement(
    Checkbox,
    {
      labelClassName: "items-group",
      onChange: () => handleTogglePage(),
      className: selectedItemsCount !== SELECT_ALL_ITEMS && selectedItemsCount < itemCount ? "neutral" : "",
      checked: true,
      label: /* @__PURE__ */ React.createElement("p", { "data-role": "input-value" }, `${selectedItemsCount} ${selectedItemsCount === SELECT_ALL_ITEMS || selectedItemsCount > 1 ? "items" : "item"} selected`)
    }
  ), selectActions), /* @__PURE__ */ React.createElement("div", { className: "action" }, /* @__PURE__ */ React.createElement(Button, { variant: "inline", onClick: () => handleSelectAllItems() }, "Select all items")))), bodyMarkup, showPagination && /* @__PURE__ */ React.createElement(
    TablePagination,
    {
      hasNext: props.hasNextPage,
      hasPrevious: props.hasPreviousPage,
      onNext: props.onNextPage,
      onPrevious: props.onPreviousPage,
      nextButtonProps: props.nextPageButtonProps,
      previousButtonProps: props.previousPageButtonProps,
      className: props.paginationClassName
    }
  )));
});
function Table({
  children,
  selectable = false,
  itemCount,
  selectedItemsCount = 0,
  onSelectionChange,
  ...tableBaseProps
}) {
  return /* @__PURE__ */ React.createElement(
    TableProvider,
    {
      selectable,
      itemCount,
      selectedItemsCount,
      onSelectionChange
    },
    /* @__PURE__ */ React.createElement(TableBase, { ...tableBaseProps }, children)
  );
}
Table.displayName = "Table";
Table.Head = TableHead;
Table.Body = TableBody;
Table.Row = TableRow;
Table.HeadCell = TableHeadCell;
Table.Cell = TableCell;

export { Table };
//# sourceMappingURL=Table.js.map