@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
295 lines (286 loc) • 11.8 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Table = exports.TableHeader = exports.TableHead = exports.TableFooter = exports.TableCell = exports.TableCaption = exports.TableBody = exports.tableHeaderStencil = exports.tableHeadStencil = exports.tableFooterStencil = exports.tableCellStencil = exports.tableCaptionStencil = exports.tableBodyStencil = exports.tableStencil = void 0;
const react_1 = __importDefault(require("react"));
const layout_1 = require("@workday/canvas-kit-react/layout");
const common_1 = require("@workday/canvas-kit-react/common");
const BaseTable_1 = require("./BaseTable");
const TableRow_1 = require("./parts/css-grid-table/TableRow");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const BaseTableBody_1 = require("./parts/BaseTableBody");
const BaseTableCaption_1 = require("./parts/BaseTableCaption");
const BaseTableCell_1 = require("./parts/BaseTableCell");
const BaseTableHead_1 = require("./parts/BaseTableHead");
const BaseTableHeader_1 = require("./parts/BaseTableHeader");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
exports.tableStencil = (0, canvas_kit_styling_1.createStencil)({
extends: BaseTable_1.baseTableStencil,
base: { name: "ojxa5u", styles: "box-sizing:border-box;display:grid;" }
}, "table-829a9e");
exports.tableBodyStencil = (0, canvas_kit_styling_1.createStencil)({
extends: BaseTableBody_1.baseTableBodyStencil,
base: { name: "ojxa5v", styles: "box-sizing:border-box;display:grid;" }
}, "table-body-32e7d0");
exports.tableCaptionStencil = (0, canvas_kit_styling_1.createStencil)({
extends: BaseTableCaption_1.baseTableCaptionStencil,
base: { name: "ojxa5w", styles: "box-sizing:border-box;display:flex;border-bottom:0.0625rem solid var(--cnvs-sys-color-border-container);" }
}, "table-caption-e31a96");
exports.tableCellStencil = (0, canvas_kit_styling_1.createStencil)({
extends: BaseTableCell_1.baseTableCellStencil,
base: { name: "ojxa5x", styles: "box-sizing:border-box;display:grid;" }
}, "table-cell-c4c6f7");
exports.tableFooterStencil = (0, canvas_kit_styling_1.createStencil)({
base: { name: "ojxa5y", styles: "box-sizing:border-box;display:grid;" }
}, "table-footer-a8fb62");
exports.tableHeadStencil = (0, canvas_kit_styling_1.createStencil)({
extends: BaseTableHead_1.baseTableHeadStencil,
base: { name: "ojxa5z", styles: "box-sizing:border-box;display:grid;" }
}, "table-head-4d134d");
exports.tableHeaderStencil = (0, canvas_kit_styling_1.createStencil)({
extends: BaseTableHeader_1.baseTableHeaderStencil,
base: { name: "ojxa60", styles: "box-sizing:border-box;display:grid;align-items:center;" }
}, "table-header-15022a");
exports.TableBody = (0, common_1.createComponent)('tbody')({
displayName: 'Table.Body',
Component: ({ children, ...elemProps }, ref, Element) => {
return (react_1.default.createElement(Element, { ref: ref, ...(0, layout_1.mergeStyles)(elemProps, (0, exports.tableBodyStencil)()) }, children));
},
});
exports.TableCaption = (0, common_1.createComponent)('caption')({
displayName: 'Table.Caption',
Component: ({ children, ...elemProps }, ref, Element) => {
return (react_1.default.createElement(Element, { ref: ref, ...(0, layout_1.mergeStyles)(elemProps, (0, exports.tableCaptionStencil)()) }, children));
},
});
exports.TableCell = (0, common_1.createComponent)('td')({
displayName: 'Table.Cell',
Component: ({ children, ...elemProps }, ref, Element) => {
return (react_1.default.createElement(Element, { ref: ref, ...(0, layout_1.mergeStyles)(elemProps, (0, exports.tableCellStencil)()) }, children));
},
});
exports.TableFooter = (0, common_1.createComponent)('tfoot')({
displayName: 'Table.Footer',
Component: ({ children, ...elemProps }, ref, Element) => {
return (react_1.default.createElement(Element, { ref: ref, ...(0, layout_1.mergeStyles)(elemProps, (0, exports.tableFooterStencil)()) }, children));
},
});
exports.TableHead = (0, common_1.createComponent)('thead')({
displayName: 'Table.Head',
Component: ({ children, ...elemProps }, ref, Element) => {
return (react_1.default.createElement(Element, { ref: ref, ...(0, layout_1.mergeStyles)(elemProps, (0, exports.tableHeadStencil)()) }, children));
},
});
exports.TableHeader = (0, common_1.createComponent)('th')({
displayName: 'Table.Header',
Component: ({ children, ...elemProps }, ref, Element) => {
return (react_1.default.createElement(Element, { ref: ref, ...(0, layout_1.mergeStyles)(elemProps, (0, exports.tableHeaderStencil)()) }, children));
},
});
/**
* `Table` is a simple styled compound component that renders a [table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) element. It is used to present information in a two-dimensional table comprised of rows and columns of cells containing data.
* `Table` is built off of `BaseTable` and is using [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features.
*
*
* ```tsx
import {Table} from '@workday/canvas-kit-react/table';
export default function App() {
return (
<Table>
<Table.Caption>Table Caption</Table.Caption>
<Table.Head>
<Table.Row>
<Table.Header>Table Header</Table.Header>
<Table.Header>Table Header</Table.Header>
</Table.Row>
</Table.Head>
<Table.Body>
<Table.Row>
<Table.Header>Table Header</Table.Header>
<Table.Header>Table Header</Table.Header>
</Table.Row>
<Table.Row>
<Table.Header>Table Header</Table.Header>
<Table.Cell>Table Data Cell</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Header>Table Header</Table.Header>
<Table.Cell>Table Data Cell</Table.Cell>
</Table.Row>
</Table.Body>
<Table.Footer>
<Table.Row>
<Table.Header>Table Header</Table.Header>
<Table.Cell>Table Data Cell</Table.Cell>
</Table.Row>
</Table.Footer>
</Table>
);
}
```
*/
exports.Table = (0, common_1.createComponent)('table')({
displayName: 'Table',
Component: ({ children, ...elemProps }, ref, Element) => {
return (react_1.default.createElement(Element, { ref: ref, ...(0, layout_1.mergeStyles)(elemProps, (0, exports.tableStencil)()) }, children));
},
subComponents: {
/**
* `Table.Caption` renders a [caption](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption) element.
*
*
* ```tsx
import {Table} from '@workday/canvas-kit-react/table';
export default function App() {
return (
<Table>
<Table.Caption>Table Caption</Table.Caption>
<Table.Body>
<Table.Row>
<Table.Header>Table Header</Table.Header>
<Table.Cell>Table Cell</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
);
}
```
*/
Caption: exports.TableCaption,
/**
* `Table.Head` renders a [thead](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead) element.
*
*
* ```tsx
import {Table} from '@workday/canvas-kit-react/table';
export default function App() {
return (
<Table>
<Table.Head>
<Table.Row>
<Table.Header>Table Header</Table.Header>
<Table.Cell>Table Cell</Table.Cell>
</Table.Row>
</Table.Head>
</Table>
);
}
```
*/
Head: exports.TableHead,
/**
* `Table.Body` renders a [tbody](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody) element.
*
*
* ```tsx
import {Table} from '@workday/canvas-kit-react/table';
export default function App() {
return (
<Table>
<Table.Body>
<Table.Row>
<Table.Header>Table Header</Table.Header>
<Table.Cell>Table Cell</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
);
}
```
*/
Body: exports.TableBody,
/**
* `Table.Row` renders a [tr](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr) element.
*
* **Note**: `Table.Row` is built on [Grid](/docs/components-layout-grid--basic). It will look for
* how many children are there and if those children are valid React Elements. This will adjust the
* amount of columns automatically using the `gridTemplateColumns` style prop and the width of the
* columns is also set using a `minmax` function in the `gridTemplateColumns` style prop. If a user
* would like to adjust this, it can be overwritten on `Table.Row`. See the example below for how to
* overwrite `gridTemplateColumns`.
*
*
* ```tsx
import {Table} from '@workday/canvas-kit-react/table';
export default function App() {
return (
<Table>
<Table.Head>
<Table.Row gridTemplateColumns="repeat(4, minmax(100px, 1fr))">
<Table.Header>Table Header</Table.Header>
<Table.Cell>Table Cell</Table.Cell>
</Table.Row>
</Table.Head>
</Table>
);
}
```
*/
Row: TableRow_1.TableRow,
/**
* `Table.Header` renders a [th](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th) element.
*
*
* ```tsx
import {Table} from '@workday/canvas-kit-react/table';
export default function App() {
return (
<Table>
<Table.Head>
<Table.Row>
<Table.Header>Table Header</Table.Header>
<Table.Cell>Table Cell</Table.Cell>
</Table.Row>
</Table.Head>
</Table>
);
}
```
*/
Header: exports.TableHeader,
/**
* `Table.Cell` renders a [td](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td) element.
*
*
* ```tsx
import {Table} from '@workday/canvas-kit-react/table';
export default function App() {
return (
<Table>
<Table.Body>
<Table.Row>
<Table.Header>Table Header</Table.Header>
<Table.Cell>Table Cell</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
);
}
```
*/
Cell: exports.TableCell,
/**
* `Table.Footer` renders a [tfoot](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot) element.
*
*
* ```tsx
import {Table} from '@workday/canvas-kit-react/table';
export default function App() {
return (
<Table>
<Table.Footer>
<Table.Row>
<Table.Header>Table Header</Table.Header>
<Table.Cell>Table Cell</Table.Cell>
</Table.Row>
</Table.Footer>
</Table>
);
}
```
*/
Footer: exports.TableFooter,
},
});