@trellixio/roaster-coffee
Version:
Beans' product component library
59 lines (58 loc) • 4.15 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import * as React from 'react';
import { Button } from '@/components/Button';
import { Checkbox } from './components/Checkbox';
import { TableBody } from './components/TableBody';
import { TableCell } from './components/TableCell';
import { TableHead } from './components/TableHead';
import { TableHeadCell } from './components/TableHeadCell';
import { TablePagination } from './components/TablePagination';
import { TableProvider } from './components/TableProvider';
import { TableRow } from './components/TableRow';
import { SelectionType, SELECT_ALL_ITEMS, useTableSelectionChange, useTableValue, } from './utils/table';
import { classNames } from '@/utils';
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 = (React.createElement("div", { className: "table-container" },
React.createElement("table", { ref: ref, className: classNames('datatable', { selectable, browsable }) }, children)));
return (React.createElement("section", { className: "table-section" },
React.createElement("form", null,
bulkSelectState && (React.createElement("div", { className: "table-actions visible" },
React.createElement("div", { className: "items-group justify", style: { alignItems: 'center' } },
React.createElement("div", { className: "items-group" },
React.createElement(Checkbox, { labelClassName: "items-group", onChange: () => handleTogglePage(), className: selectedItemsCount !== SELECT_ALL_ITEMS && selectedItemsCount < itemCount ? 'neutral' : '', checked: true, label: React.createElement("p", { "data-role": "input-value" }, `${selectedItemsCount} ${selectedItemsCount === SELECT_ALL_ITEMS || selectedItemsCount > 1 ? 'items' : 'item'} selected`) }),
selectActions),
React.createElement("div", { className: "action" },
React.createElement(Button, { variant: "inline", onClick: () => handleSelectAllItems() }, "Select all items"))))),
bodyMarkup,
showPagination && (React.createElement(TablePagination, { hasNext: props.hasNextPage, hasPrevious: props.hasPreviousPage, onNext: props.onNextPage, onPrevious: props.onPreviousPage, nextButtonProps: props.nextPageButtonProps, previousButtonProps: props.previousPageButtonProps, className: props.paginationClassName })))));
});
export function Table(_a) {
var { children, selectable = false, itemCount, selectedItemsCount = 0, onSelectionChange } = _a, tableBaseProps = __rest(_a, ["children", "selectable", "itemCount", "selectedItemsCount", "onSelectionChange"]);
return (React.createElement(TableProvider, { selectable: selectable, itemCount: itemCount, selectedItemsCount: selectedItemsCount, onSelectionChange: onSelectionChange },
React.createElement(TableBase, Object.assign({}, tableBaseProps), children)));
}
Table.displayName = 'Table';
Table.Head = TableHead;
Table.Body = TableBody;
Table.Row = TableRow;
Table.HeadCell = TableHeadCell;
Table.Cell = TableCell;