@procore/core-react
Version:
React library of Procore Design Guidelines
41 lines • 3.14 kB
JavaScript
import React from 'react';
import styled from 'styled-components';
import { Table } from '../Table/Table';
import { colors } from '../_styles/colors';
import { getTypographyIntent } from './Typography.styles';
var StyledBodyCell = /*#__PURE__*/styled(Table.BodyCell).withConfig({
displayName: "StyledBodyCell",
componentId: "core-12_44_0__sc-p4v7d-0"
})([""]);
var StyledTextCell = /*#__PURE__*/styled(Table.TextCell).withConfig({
displayName: "StyledTextCell",
componentId: "core-12_44_0__sc-p4v7d-1"
})(["", " color:", ";"], getTypographyIntent('body'), colors.blue50);
function BodyCell() {
return /*#__PURE__*/React.createElement(StyledBodyCell, {
"data-core": "styled-body-cell"
}, /*#__PURE__*/React.createElement(Table.InputCell, {
placeholder: "Placeholder"
}));
}
function TextRow() {
return /*#__PURE__*/React.createElement(Table.BodyRow, null, /*#__PURE__*/React.createElement(Table.BodyCell, null, /*#__PURE__*/React.createElement(Table.Checkbox, null)), /*#__PURE__*/React.createElement(Table.BodyCell, null, /*#__PURE__*/React.createElement(StyledTextCell, null, "Some text here")), /*#__PURE__*/React.createElement(Table.BodyCell, null, /*#__PURE__*/React.createElement(StyledTextCell, null, "Some text here")), /*#__PURE__*/React.createElement(Table.BodyCell, null, /*#__PURE__*/React.createElement(StyledTextCell, null, "Some text here")), /*#__PURE__*/React.createElement(Table.BodyCell, null, /*#__PURE__*/React.createElement(StyledTextCell, null, "Some text here")), /*#__PURE__*/React.createElement(Table.BodyCell, null, /*#__PURE__*/React.createElement(StyledTextCell, null, "Some text here")));
}
function RowGenerator() {
return /*#__PURE__*/React.createElement(Table.BodyRow, null, /*#__PURE__*/React.createElement(Table.BodyCell, null, /*#__PURE__*/React.createElement(Table.Checkbox, null)), /*#__PURE__*/React.createElement(BodyCell, null), /*#__PURE__*/React.createElement(BodyCell, null), /*#__PURE__*/React.createElement(BodyCell, null), /*#__PURE__*/React.createElement(BodyCell, null), /*#__PURE__*/React.createElement(BodyCell, null));
}
var rows = [];
for (var i = 0; i < 1000; i++) {
rows.push(RowGenerator());
}
export function GiantTable() {
return /*#__PURE__*/React.createElement(Table.Container, null, /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement(Table.Header, null, /*#__PURE__*/React.createElement(Table.HeaderRow, null, /*#__PURE__*/React.createElement(Table.HeaderCell, {
variant: "snugfit"
}, /*#__PURE__*/React.createElement(Table.Checkbox, null)), /*#__PURE__*/React.createElement(Table.HeaderCell, {
sortable: true,
variant: "asc"
}, "Link"), /*#__PURE__*/React.createElement(Table.HeaderCell, {
sortable: true
}, "Column Key"), /*#__PURE__*/React.createElement(Table.HeaderCell, null, "Column Key"), /*#__PURE__*/React.createElement(Table.HeaderCell, null, "Percentages"), /*#__PURE__*/React.createElement(Table.HeaderCell, null, "Currency"))), /*#__PURE__*/React.createElement(Table.Body, null, /*#__PURE__*/React.createElement(TextRow, null), rows)));
}
//# sourceMappingURL=Typography.table.story.js.map