@eviljs/reactx
Version:
Awesome React UI Widgets
71 lines (70 loc) • 3.85 kB
JavaScript
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { classes } from '@eviljs/react/classes';
import { isElementType } from '@eviljs/react/type';
import { asArray } from '@eviljs/std/type-as';
/*
* EXAMPLE
*
* <Table>
* <TableHead>
* <TableColumn>
* Column 1
* </TableColumn>
* <TableColumn>
* Column 2
* </TableColumn>
* </TableHead>
* <TableBody>
* {items.map((it, idx) =>
* <TableRow key={idx}>
* <TableCell>
* Cell 1 of row {idx}
* </TableCell>
* <TableCell>
* Cell 2 of row {idx}
* </TableCell>
* </TableRow>
* )}
* </TableBody>
* </Table>
*/
export function Table(props) {
const { children, className, footer, header, tableHeader, tableFooter, tableProps, scrollerProps, ...otherProps } = props;
const childrenList = asArray(children);
const tableHead = childrenList.find(it => isElementType(it, TableHead));
const tableBody = childrenList.find(it => isElementType(it, TableBody));
const tableFoot = childrenList.find(it => isElementType(it, TableFoot));
return (_jsxs("div", { ...otherProps, className: classes('Table-87f7', className), children: [header, _jsxs("div", { ...scrollerProps, className: classes('TableScroller-ef6a', scrollerProps?.className), children: [tableHeader, _jsxs("table", { ...tableProps, className: classes('table-inner-295a', tableProps?.className), children: [tableHead, tableBody, tableFoot] }), tableFooter] }), footer] }));
}
export function TableHead(props) {
const { children, className, rowProps, ...otherProps } = props;
const childrenList = asArray(children ?? []);
const columns = childrenList.filter(it => isElementType(it, TableColumn));
return (_jsx("thead", { ...otherProps, className: classes('TableHead-00d9', className), children: _jsx("tr", { ...rowProps, className: classes('TableColumns-a6dc', rowProps?.className), children: columns }) }));
}
export function TableFoot(props) {
const { children, className, rowProps, ...otherProps } = props;
const childrenList = asArray(children ?? []);
const columns = childrenList.filter(it => isElementType(it, TableColumn));
return (_jsx("tfoot", { ...otherProps, className: classes('TableFoot-92cd', className), children: _jsx("tr", { ...rowProps, className: classes('TableColumns-a6dc', rowProps?.className), children: columns }) }));
}
export function TableColumn(props) {
const { children, className, innerProps, ...otherProps } = props;
return (_jsx("th", { ...otherProps, className: classes('TableColumn-ebec', className), children: _jsx("div", { ...innerProps, className: classes('column-inner-a273', innerProps?.className), children: children }) }));
}
export function TableBody(props) {
const { children, className, ...otherProps } = props;
const childrenList = asArray(children ?? []);
const childrenRows = childrenList.filter(it => isElementType(it, TableRow));
return (_jsx("tbody", { ...otherProps, className: classes('TableBody-59b0', className), children: childrenRows }));
}
export function TableRow(props) {
const { children, className, ...otherProps } = props;
const childrenList = asArray(children ?? []);
const cells = childrenList.filter(it => isElementType(it, TableCell));
return (_jsx("tr", { ...otherProps, className: classes('TableRow-67ba', className), children: cells }));
}
export function TableCell(props) {
const { children, className, innerProps, ...otherProps } = props;
return (_jsx("td", { ...otherProps, className: classes('TableCell-8df5', className), children: _jsx("div", { ...innerProps, className: classes('cell-inner-4d84', innerProps?.className), children: children }) }));
}