lucid-ui
Version:
A UI component library from AppNexus.
500 lines • 34.5 kB
JavaScript
"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Th = void 0;
var lodash_1 = __importDefault(require("lodash"));
var react_1 = __importDefault(require("react"));
var prop_types_1 = __importDefault(require("react-peek/prop-types"));
var style_helpers_1 = require("../../util/style-helpers");
var component_types_1 = require("../../util/component-types");
var ArrowIcon_1 = __importDefault(require("../Icon/ArrowIcon/ArrowIcon"));
var DragCaptureZone_1 = __importDefault(require("../DragCaptureZone/DragCaptureZone"));
var cx = style_helpers_1.lucidClassNames.bind('&-Table');
var any = prop_types_1.default.any, bool = prop_types_1.default.bool, func = prop_types_1.default.func, node = prop_types_1.default.node, number = prop_types_1.default.number, object = prop_types_1.default.object, string = prop_types_1.default.string, oneOf = prop_types_1.default.oneOf, oneOfType = prop_types_1.default.oneOfType;
var Thead = function (props) {
var children = props.children, className = props.className, passThroughs = __rest(props, ["children", "className"]);
return (react_1.default.createElement("thead", __assign({}, component_types_1.omitProps(passThroughs, undefined, lodash_1.default.keys(Thead.propTypes)), { className: cx('&-Thead', className) }), renderRowsWithIdentifiedEdges(component_types_1.filterTypes(children, Tr), Th)));
};
Thead.displayName = 'Table.Thead';
Thead.peek = {
description: "\n\t\t`Thead` renders <thead>.\n\t",
};
Thead.propTypes = {
className: any(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t\tAppended to the component-specific class names set on the root element.\n\t\tValue is run through the `classnames` library.\n\t"], ["\n\t\tAppended to the component-specific class names set on the root element.\n\t\tValue is run through the \\`classnames\\` library.\n\t"]))),
children: node(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t\tany valid React children\n\t"], ["\n\t\tany valid React children\n\t"]))),
};
var Tbody = function (props) {
var children = props.children, className = props.className, passThroughs = __rest(props, ["children", "className"]);
return (react_1.default.createElement("tbody", __assign({}, component_types_1.omitProps(passThroughs, undefined, lodash_1.default.keys(Tbody.propTypes)), { className: cx('&-Tbody', className) }), renderRowsWithIdentifiedEdges(component_types_1.filterTypes(children, Tr), Td)));
};
Tbody.displayName = 'Table.Tbody';
Tbody.peek = {
description: "\n\t\t`Tbody` renders <tbody>.\n\t",
};
Tbody.propTypes = {
className: any(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\t\tAppended to the component-specific class names set on the root element.\n\t\tValue is run through the `classnames` library.\n\t"], ["\n\t\tAppended to the component-specific class names set on the root element.\n\t\tValue is run through the \\`classnames\\` library.\n\t"]))),
children: node(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\t\tany valid React children\n\t"], ["\n\t\tany valid React children\n\t"]))),
};
var Tr = function (props) {
var className = props.className, children = props.children, isDisabled = props.isDisabled, isSelected = props.isSelected, isActive = props.isActive, passThroughs = __rest(props, ["className", "children", "isDisabled", "isSelected", "isActive"]);
return (react_1.default.createElement("tr", __assign({}, component_types_1.omitProps(passThroughs, undefined, lodash_1.default.keys(Tr.propTypes).concat(['isActionable'])), { className: cx('&-Tr', {
'&-is-disabled': isDisabled,
'&-is-selected': isSelected,
'&-is-active': isActive,
}, className) }), children));
};
Tr.defaultProps = {
isDisabled: false,
isSelected: false,
isActive: false,
};
Tr.displayName = 'Table.Tr';
Tr.peek = {
description: "\n\t\t`Tr` renders <tr>.\n\t",
};
Tr.propTypes = {
children: node(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\t\tany valid React children\n\t"], ["\n\t\tany valid React children\n\t"]))),
className: any(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\t\tAppended to the component-specific class names set on the root element.\n\t\tValue is run through the `classnames` library.\n\t"], ["\n\t\tAppended to the component-specific class names set on the root element.\n\t\tValue is run through the \\`classnames\\` library.\n\t"]))),
isDisabled: bool(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n\t\tApplies disabled styles to the row.\n\t"], ["\n\t\tApplies disabled styles to the row.\n\t"]))),
isSelected: bool(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n\t\tApplies styles to the row for when the row is selected, usually by a\n\t\tcheckbox.\n\t"], ["\n\t\tApplies styles to the row for when the row is selected, usually by a\n\t\tcheckbox.\n\t"]))),
isActive: bool(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n\t\tApplies active styles to the row, usually when the row has been clicked.\n\t"], ["\n\t\tApplies active styles to the row, usually when the row has been clicked.\n\t"]))),
};
var Th = /** @class */ (function (_super) {
__extends(Th, _super);
function Th() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.rootRef = react_1.default.createRef();
_this.state = {
// Represents the actively changing width as the cell is resized.
activeWidth: _this.props.width || null,
// Indicates if a `width` prop was explicitly provided.
hasSetWidth: !!_this.props.width,
// Indicates whether the cell is currently being resized.
isResizing: false,
// Indicates a mouse drag is in progress
isDragging: false,
// Represents the width when the cell is not actively being resized.
passiveWidth: _this.props.width || null,
};
_this.getWidth = function () {
var styleWidth = lodash_1.default.get(_this.rootRef, 'style.width');
if (lodash_1.default.endsWith(styleWidth, 'px')) {
return parseInt(styleWidth);
}
if (_this.rootRef.current) {
return _this.rootRef.current.getBoundingClientRect().width;
}
return null;
};
_this.handleClickCapture = function (event) {
if (_this.state.isDragging) {
event.stopPropagation();
_this.setState({
isDragging: false,
});
}
};
_this.handleMouseEnter = function () {
_this.setState({
isDragging: _this.state.isResizing,
});
};
_this.handleMouseUp = function () {
_this.setState({
isDragging: _this.state.isResizing,
});
};
_this.handleDragEnded = function (coordinates, _a) {
var event = _a.event;
_this.setState({
isResizing: false,
passiveWidth: _this.state.activeWidth,
});
window.document.body.style.cursor = '';
if (_this.props.onResize) {
_this.props.onResize(_this.state.activeWidth, {
event: event,
props: _this.props,
});
}
};
_this.handleDragged = function (coordinates, _a) {
var event = _a.event, props = _a.props;
var passiveWidth = _this.state.passiveWidth;
var minWidth = _this.props.minWidth !== null && lodash_1.default.isString(_this.props.minWidth)
? parseInt(_this.props.minWidth)
: _this.props.minWidth;
if (passiveWidth === null) {
return;
}
else if (lodash_1.default.isString(passiveWidth)) {
passiveWidth = parseInt(passiveWidth);
}
var activeWidth = (minWidth && passiveWidth + coordinates.dX > minWidth) || !minWidth
? passiveWidth + coordinates.dX
: minWidth;
_this.setState({ activeWidth: activeWidth });
if (_this.props.onResize) {
_this.props.onResize(activeWidth, {
event: event,
props: _this.props,
});
}
};
_this.handleDragStarted = function (coordinates, _a) {
var event = _a.event, props = _a.props;
var startingWidth = _this.getWidth();
_this.setState({
activeWidth: startingWidth,
hasSetWidth: true,
isResizing: true,
isDragging: true,
passiveWidth: startingWidth,
});
window.document.body.style.cursor = 'ew-resize';
if (_this.props.onResize) {
_this.props.onResize(startingWidth, {
event: event,
props: _this.props,
});
}
};
return _this;
}
Th.prototype.UNSAFE_componentWillReceiveProps = function (_a) {
var width = _a.width;
if (!lodash_1.default.isNil(width) && width !== this.props.width) {
this.setState({
hasSetWidth: true,
passiveWidth: width,
});
}
};
Th.prototype.render = function () {
var _a = this.props, children = _a.children, className = _a.className, hasBorderRight = _a.hasBorderRight, hasBorderLeft = _a.hasBorderLeft, isFirstRow = _a.isFirstRow, isLastRow = _a.isLastRow, isFirstCol = _a.isFirstCol, isFirstSingle = _a.isFirstSingle, isLastCol = _a.isLastCol, align = _a.align, isResizable = _a.isResizable, isSortable = _a.isSortable, isSorted = _a.isSorted, sortDirection = _a.sortDirection, style = _a.style, truncateContent = _a.truncateContent, passThroughs = __rest(_a, ["children", "className", "hasBorderRight", "hasBorderLeft", "isFirstRow", "isLastRow", "isFirstCol", "isFirstSingle", "isLastCol", "align", "isResizable", "isSortable", "isSorted", "sortDirection", "style", "truncateContent"]);
var _b = this.state, activeWidth = _b.activeWidth, hasSetWidth = _b.hasSetWidth, isResizing = _b.isResizing, passiveWidth = _b.passiveWidth;
return (react_1.default.createElement("th", __assign({}, component_types_1.omitProps(passThroughs, undefined, lodash_1.default.keys(Th.propTypes)), { className: cx('&-Th', {
'&-is-first-row': isFirstRow,
'&-is-last-row': isLastRow,
'&-is-first-col': isFirstCol,
'&-is-first-single': isFirstSingle,
'&-is-last-col': isLastCol,
'&-align-left': align === 'left',
'&-align-center': align === 'center',
'&-align-right': align === 'right',
'&-is-resizable': isResizable,
'&-is-resizing': isResizing,
'&-is-sortable': isSortable === false ? isSortable : isSorted || isSortable,
'&-is-sorted': isSorted,
'&-has-border-right': hasBorderRight,
'&-has-border-left': hasBorderLeft,
'&-truncate-content': truncateContent,
}, className), ref: this.rootRef, onClickCapture: this.handleClickCapture, onMouseEnter: this.handleMouseEnter, onMouseUp: this.handleMouseUp, style: hasSetWidth
? lodash_1.default.assign({}, style, {
width: isResizing ? activeWidth : passiveWidth,
})
: style }),
react_1.default.createElement("div", { className: cx('&-Th-inner') },
react_1.default.createElement("div", { className: cx('&-Th-inner-content') }, children),
isSorted || isSortable ? (react_1.default.createElement("div", { className: cx('&-Th-inner-caret') },
react_1.default.createElement(ArrowIcon_1.default, { className: cx('&-sort-icon'), direction: sortDirection, size: 10 }))) : null,
isResizable ? (react_1.default.createElement(DragCaptureZone_1.default, { className: cx('&-Th-inner-resize'), onDrag: this.handleDragged, onDragEnd: this.handleDragEnded, onDragStart: this.handleDragStarted })) : null)));
};
Th.displayName = 'Table.Th';
Th.defaultProps = {
align: 'left',
isResizable: false,
isSorted: false,
sortDirection: 'up',
rowSpan: 1,
};
Th.peek = {
description: "\n\t\t\t`Th` renders <th>.\n\t\t",
};
Th.propTypes = {
align: string(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n\t\t\tAligns the content of a cell. Can be `left`, `center`, or `right`.\n\t\t"], ["\n\t\t\tAligns the content of a cell. Can be \\`left\\`, \\`center\\`, or \\`right\\`.\n\t\t"]))),
children: node(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n\t\t\tany valid React children\n\t\t"], ["\n\t\t\tany valid React children\n\t\t"]))),
className: any(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n\t\t\tAppended to the component-specific class names set on the root element.\n\t\t\tValue is run through the `classnames` library.\n\t\t"], ["\n\t\t\tAppended to the component-specific class names set on the root element.\n\t\t\tValue is run through the \\`classnames\\` library.\n\t\t"]))),
hasBorderRight: bool(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n\t\t\tShould be `true` to render a right border.\n\t\t"], ["\n\t\t\tShould be \\`true\\` to render a right border.\n\t\t"]))),
hasBorderLeft: bool(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n\t\t\tShould be `true` to render a left border.\n\t\t"], ["\n\t\t\tShould be \\`true\\` to render a left border.\n\t\t"]))),
isResizable: bool(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n\t\t\tStyles the cell to indicate it should be resizable and sets up drag-\n\t\t\trelated events to enable this resizing functionality.\n\t\t"], ["\n\t\t\tStyles the cell to indicate it should be resizable and sets up drag-\n\t\t\trelated events to enable this resizing functionality.\n\t\t"]))),
isSortable: bool(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n\t\t\tStyles the cell to allow column sorting.\n\t\t"], ["\n\t\t\tStyles the cell to allow column sorting.\n\t\t"]))),
isSorted: bool(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n\t\t\tRenders a caret icon to show that the column is sorted.\n\t\t"], ["\n\t\t\tRenders a caret icon to show that the column is sorted.\n\t\t"]))),
onResize: func(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n\t\t\tCalled as the user drags the resize handle to resize the column atop\n\t\t\twhich this table header cell sits.\n\t\t"], ["\n\t\t\tCalled as the user drags the resize handle to resize the column atop\n\t\t\twhich this table header cell sits.\n\t\t"]))),
sortDirection: oneOf(['left', 'up', 'right', 'down', undefined])(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n\t\t\tSets the direction of the caret icon when `isSorted` is also set.\n\t\t"], ["\n\t\t\tSets the direction of the caret icon when \\`isSorted\\` is also set.\n\t\t"]))),
style: object(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n\t\t\tStyles that are passed through to root element.\n\t\t"], ["\n\t\t\tStyles that are passed through to root element.\n\t\t"]))),
width: oneOfType([number, string])(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n\t\t\tSets the width of the cell.\n\t\t"], ["\n\t\t\tSets the width of the cell.\n\t\t"]))),
minWidth: oneOfType([number, string])(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n\t\t\tSets the min width of the cell.\n\t\t"], ["\n\t\t\tSets the min width of the cell.\n\t\t"]))),
isFirstRow: bool(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n\t\t\tDefine the cell as being in the first row.\n\t\t"], ["\n\t\t\tDefine the cell as being in the first row.\n\t\t"]))),
isLastRow: bool(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n\t\t\tDefine the cell as being in the last row.\n\t\t"], ["\n\t\t\tDefine the cell as being in the last row.\n\t\t"]))),
isFirstCol: bool(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n\t\t\tDefine the cell as being in the first column.\n\t\t"], ["\n\t\t\tDefine the cell as being in the first column.\n\t\t"]))),
isLastCol: bool(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n\t\t\tDefine the cell as being in the last column.\n\t\t"], ["\n\t\t\tDefine the cell as being in the last column.\n\t\t"]))),
isFirstSingle: bool(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n\t\t\tDefine the cell as being the first 1-height cell in the row.\n\t\t"], ["\n\t\t\tDefine the cell as being the first 1-height cell in the row.\n\t\t"]))),
field: string(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n\t\t\tSets the field value for the cell.\n\t\t"], ["\n\t\t\tSets the field value for the cell.\n\t\t"]))),
/** Truncates `Table.Td` content with ellipses, must be used with `hasFixedHeader` */
truncateContent: bool(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n\t\t\tTruncates header and adds ellipses.\n\t\t"], ["\n\t\t\tTruncates header and adds ellipses.\n\t\t"]))),
};
return Th;
}(react_1.default.Component));
exports.Th = Th;
var Td = function (props) {
var className = props.className, isFirstRow = props.isFirstRow, isLastRow = props.isLastRow, isFirstCol = props.isFirstCol, isLastCol = props.isLastCol, isFirstSingle = props.isFirstSingle, align = props.align, hasBorderRight = props.hasBorderRight, hasBorderLeft = props.hasBorderLeft, truncateContent = props.truncateContent, passThroughs = __rest(props, ["className", "isFirstRow", "isLastRow", "isFirstCol", "isLastCol", "isFirstSingle", "align", "hasBorderRight", "hasBorderLeft", "truncateContent"]);
return (react_1.default.createElement("td", __assign({}, component_types_1.omitProps(passThroughs, undefined, lodash_1.default.keys(Td.propTypes).concat(['sortDirection'])), { className: cx('&-Td', {
'&-is-first-row': isFirstRow,
'&-is-last-row': isLastRow,
'&-is-first-col': isFirstCol,
'&-is-last-col': isLastCol,
'&-is-first-single': isFirstSingle,
'&-align-left': align === 'left',
'&-align-center': align === 'center',
'&-align-right': align === 'right',
'&-has-border-right': hasBorderRight,
'&-has-border-left': hasBorderLeft,
'&-truncate-content': truncateContent,
}, className) })));
};
Td.displayName = 'Table.Td';
Td.defaultProps = {
align: 'left',
hasBorderRight: false,
hasBorderLeft: false,
rowSpan: 1,
};
Td.peek = {
description: "\n\t\t`Td` renders <td>.\n\t",
categories: [],
madeFrom: [],
};
Td.propTypes = {
align: oneOf(['left', 'center', 'right'])(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n\t\tAligns the content of a cell. Can be `left`, `center`, or `right`.\n\t"], ["\n\t\tAligns the content of a cell. Can be \\`left\\`, \\`center\\`, or \\`right\\`.\n\t"]))),
className: any(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n\t\tAppended to the component-specific class names set on the root element.\n\t\tValue is run through the `classnames` library.\n\t"], ["\n\t\tAppended to the component-specific class names set on the root element.\n\t\tValue is run through the \\`classnames\\` library.\n\t"]))),
hasBorderRight: bool(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n\t\tShould be `true` to render a right border.\n\t"], ["\n\t\tShould be \\`true\\` to render a right border.\n\t"]))),
hasBorderLeft: bool(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n\t\tShould be `true` to render a left border.\n\t"], ["\n\t\tShould be \\`true\\` to render a left border.\n\t"]))),
isFirstRow: bool(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n\t\tDefine the cell as being in the first row.\n\t"], ["\n\t\tDefine the cell as being in the first row.\n\t"]))),
isLastRow: bool(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n\t\tDefine the cell as being in the last row.\n\t"], ["\n\t\tDefine the cell as being in the last row.\n\t"]))),
isFirstCol: bool(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n\t\tDefine the cell as being in the first column.\n\t"], ["\n\t\tDefine the cell as being in the first column.\n\t"]))),
isLastCol: bool(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n\t\tDefine the cell as being in the last column.\n\t"], ["\n\t\tDefine the cell as being in the last column.\n\t"]))),
isFirstSingle: bool(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n\t\tDefine the cell as being the first 1-height cell in the row.\n\t"], ["\n\t\tDefine the cell as being the first 1-height cell in the row.\n\t"]))),
isEmpty: bool(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n\t\tIndicates if the cell has any data or not.\n\t"], ["\n\t\tIndicates if the cell has any data or not.\n\t"]))),
truncateContent: bool(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n\t\tTruncates `Table.Td` content with ellipses, must be used with `hasFixedHeader`\n\t"], ["\n\t\tTruncates \\`Table.Td\\` content with ellipses, must be used with \\`hasFixedHeader\\`\n\t"]))),
};
var Table = function (props) {
var className = props.className, hasBorder = props.hasBorder, density = props.density, hasWordWrap = props.hasWordWrap, hasLightHeader = props.hasLightHeader, hasHover = props.hasHover, style = props.style, passThroughs = __rest(props, ["className", "hasBorder", "density", "hasWordWrap", "hasLightHeader", "hasHover", "style"]);
return (react_1.default.createElement("table", __assign({}, component_types_1.omitProps(passThroughs, undefined, lodash_1.default.keys(Table.propTypes)), { style: style, className: cx('&', {
'&-density-extended': density === 'extended',
'&-density-compressed': density === 'compressed',
'&-has-border': hasBorder,
'&-has-word-wrap': hasWordWrap,
'&-has-light-header': hasLightHeader,
'&-no-hover': !hasHover,
}, className) })));
};
Table.displayName = 'Table';
Table.defaultProps = {
density: 'extended',
hasBorder: false,
hasWordWrap: true,
hasLightHeader: true,
hasHover: true,
};
Table.peek = {
description: "\n\t\t`Table` provides the most basic components to create a lucid table.\n\t\tIt is recommended to create a wrapper around this component rather than\n\t\tusing it directly in an app.\n\t",
categories: ['table'],
madeFrom: ['ArrowIcon', 'DragCaptureZone'],
};
Table.propTypes = {
style: object(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n\t\tStyles that are passed through to the root container.\n\t"], ["\n\t\tStyles that are passed through to the root container.\n\t"]))),
className: string(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n\t\tClass names that are appended to the defaults.\n\t"], ["\n\t\tClass names that are appended to the defaults.\n\t"]))),
density: oneOf(['compressed', 'extended'])(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n\t\tAdjusts the row density of the table to have more or less spacing.\n\t"], ["\n\t\tAdjusts the row density of the table to have more or less spacing.\n\t"]))),
hasLightHeader: bool(templateObject_44 || (templateObject_44 = __makeTemplateObject(["\n\t\tAllows light header.\n\t"], ["\n\t\tAllows light header.\n\t"]))),
hasBorder: bool(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n\t\tRender the table with borders on the outer edge.\n\t"], ["\n\t\tRender the table with borders on the outer edge.\n\t"]))),
hasWordWrap: bool(templateObject_46 || (templateObject_46 = __makeTemplateObject(["\n\t\tEnables word wrapping in tables cells.\n\t"], ["\n\t\tEnables word wrapping in tables cells.\n\t"]))),
hasHover: bool(templateObject_47 || (templateObject_47 = __makeTemplateObject(["\n\t\tApplies a row hover to rows. Defaults to true.\n\t"], ["\n\t\tApplies a row hover to rows. Defaults to true.\n\t"]))),
};
/** ChildComponents */
Table.Thead = Thead;
Table.Th = Th;
Table.Tbody = Tbody;
Table.Tr = Tr;
Table.Td = Td;
function mapToGrid(trList, cellType, mapFn) {
if (cellType === void 0) { cellType = Td; }
if (mapFn === void 0) { mapFn = lodash_1.default.property('element'); }
var cellRowList = lodash_1.default.map(trList, function (trElement) {
return lodash_1.default.map(component_types_1.filterTypes(trElement.props.children, cellType));
});
var grid = [];
if (lodash_1.default.isEmpty(cellRowList)) {
return [];
}
// iterate over each row
for (var rowIndex = 0; rowIndex < cellRowList.length; rowIndex++) {
var cellRow = cellRowList[rowIndex];
if (lodash_1.default.isNil(grid[rowIndex])) {
grid[rowIndex] = [];
}
var canonicalRow = rowIndex;
// build out each horizonal duplicates of each cell
for (var cellElementIndex = 0; cellElementIndex < cellRow.length; cellElementIndex++) {
var cellElement = cellRow[cellElementIndex];
var colSpan = 1;
var isCellIncluded = false;
if (lodash_1.default.isNumber(cellElement.props.colSpan)) {
colSpan = cellElement.props.colSpan;
}
var nilCellIndex = lodash_1.default.findIndex(grid[canonicalRow], lodash_1.default.isNil);
var originCol = nilCellIndex !== -1 ? nilCellIndex : grid[canonicalRow].length;
for (var currentColSpan = 0; currentColSpan < colSpan; currentColSpan++) {
grid[canonicalRow][originCol + currentColSpan] = {
element: cellElement,
canonicalPosition: {
row: canonicalRow,
col: originCol,
},
isOriginal: !isCellIncluded,
};
isCellIncluded = true;
}
}
// build out each vertial duplicates of each cell using the new row in the full grid
for (var colIndex = 0; colIndex < grid[canonicalRow].length; colIndex++) {
var gridCell = grid[canonicalRow][colIndex];
if (gridCell.isOriginal) {
var cellElement = lodash_1.default.get(gridCell, 'element');
var rowSpan = 1;
if (lodash_1.default.isNumber(lodash_1.default.get(cellElement, 'props.rowSpan'))) {
rowSpan = lodash_1.default.get(cellElement, 'props.rowSpan');
}
for (var currentRowSpan = 1; currentRowSpan < rowSpan; currentRowSpan++) {
if (lodash_1.default.isNil(grid[canonicalRow + currentRowSpan])) {
grid[canonicalRow + currentRowSpan] = [];
}
grid[canonicalRow + currentRowSpan][colIndex] = lodash_1.default.assign({}, grid[canonicalRow + currentRowSpan - 1][colIndex], { isOriginal: false });
}
}
}
}
// map new values to each cell in the final grid
var finalGrid = [];
for (var rowIndex = 0; rowIndex < grid.length; rowIndex++) {
finalGrid[rowIndex] = [];
for (var colIndex = 0; colIndex < grid[rowIndex].length; colIndex++) {
finalGrid[rowIndex][colIndex] = mapFn(grid[rowIndex][colIndex], { row: rowIndex, col: colIndex }, finalGrid);
}
}
return finalGrid;
}
/**
* renderRowsWithIdentifiedEdges
*
* Returns an equivalent list of Tr's where each cell on the perimeter has props set for: `isFirstRow`, `isLastRow`, `isFirstCol`, `isLastCol`, and `isFirstSingle`
*/
function renderRowsWithIdentifiedEdges(trList, cellType) {
if (cellType === void 0) { cellType = Td; }
var duplicateReferences = [];
var fullCellGrid = mapToGrid(trList, cellType, function (_a, currentPos, grid) {
var props = _a.element.props, isOriginal = _a.isOriginal, canonicalPosition = _a.canonicalPosition;
if (!isOriginal) {
// if cell spans multiple positions
// store current position and return original cell props reference
duplicateReferences.push(currentPos);
return grid[canonicalPosition.row][canonicalPosition.col];
}
return lodash_1.default.assign({}, props); // return a new props object based on old cell
});
if (lodash_1.default.isEmpty(fullCellGrid)) {
return [];
}
var firstRow = lodash_1.default.first(fullCellGrid);
if (lodash_1.default.isUndefined(firstRow)) {
return [];
}
var firstRowIndex = 0;
var lastRowIndex = fullCellGrid.length - 1;
var firstColIndex = 0;
var lastColIndex = firstRow.length - 1;
var firstSingleLookup = {};
// decorate the props of each cell with props that indicate its role in the table
lodash_1.default.forEach(fullCellGrid, function (cellList, rowIndex) {
return lodash_1.default.forEach(cellList, function (cellProps, colIndex) {
if (!lodash_1.default.isNull(cellProps)) {
if (rowIndex === firstRowIndex) {
cellProps.isFirstRow = true;
}
if (rowIndex === lastRowIndex) {
cellProps.isLastRow = true;
}
if (colIndex === firstColIndex) {
cellProps.isFirstCol = true;
}
if (colIndex === lastColIndex) {
cellProps.isLastCol = true;
}
if (!lodash_1.default.has(firstSingleLookup, rowIndex)) {
lodash_1.default.set(firstSingleLookup, rowIndex, false);
}
if (!lodash_1.default.get(firstSingleLookup, rowIndex) &&
lodash_1.default.get(cellProps, 'rowSpan', 1) === 1) {
lodash_1.default.set(firstSingleLookup, rowIndex, true);
cellProps.isFirstSingle = true;
}
}
});
});
lodash_1.default.forEach(duplicateReferences, function (_a) {
var row = _a.row, col = _a.col;
fullCellGrid[row][col] = null; // remove duplicate references from grid
});
// render the grid back to elements using the updated cell props
return lodash_1.default.map(trList, function (trElement, rowIndex) { return (react_1.default.createElement(Tr, __assign({}, trElement.props, { key: rowIndex }), lodash_1.default.reduce(fullCellGrid[rowIndex], function (rowChildren, cellProps, colIndex) {
return rowChildren.concat(!lodash_1.default.isNull(cellProps)
? [
react_1.default.createElement(cellType, lodash_1.default.assign({}, cellProps, { key: colIndex })),
]
: []);
}, []))); });
}
exports.default = Table;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47;
//# sourceMappingURL=Table.js.map