react-life-design
Version:
Life Design UI components
50 lines • 3.59 kB
JavaScript
;
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 (b.hasOwnProperty(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 __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var styled_components_1 = require("styled-components");
var index_1 = require("../index");
var DataTableWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n max-height: 367px;\n overflow-y: scroll;\n margin-bottom: 25px;\n display: grid;\n grid-column-end: span ", ";\n grid-template-columns: repeat(", ", auto);\n"], ["\n max-height: 367px;\n overflow-y: scroll;\n margin-bottom: 25px;\n display: grid;\n grid-column-end: span ", ";\n grid-template-columns: repeat(", ", auto);\n"])), function (_a) {
var columns = _a.columns;
return columns;
}, function (_a) {
var columns = _a.columns;
return columns;
});
var TableLine = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-bottom: 1px solid ", ";\n margin-bottom: 10px;\n padding-bottom: 10px;\n padding-left: 16px;\n"], ["\n border-bottom: 1px solid ", ";\n margin-bottom: 10px;\n padding-bottom: 10px;\n padding-left: 16px;\n"])), index_1.Colors.line);
var Sticked = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: white;\n position: sticky;\n top: 0;\n margin-bottom: 10px;\n font-size: ", "px;\n padding-bottom: ", "px;\n padding-left: ", "px;\n border-bottom: 1px solid ", ";\n width: 100%;\n"], ["\n background-color: white;\n position: sticky;\n top: 0;\n margin-bottom: 10px;\n font-size: ", "px;\n padding-bottom: ", "px;\n padding-left: ", "px;\n border-bottom: 1px solid ", ";\n width: 100%;\n"])), index_1.Sizes.s2, index_1.Sizes.s1, index_1.Sizes.s3, index_1.Colors.line);
var DataTable = (function (_super) {
__extends(DataTable, _super);
function DataTable() {
return _super !== null && _super.apply(this, arguments) || this;
}
DataTable.prototype.render = function () {
var _a = this.props, children = _a.children, headers = _a.headers;
var mappedChildrens = React.Children.map(children, function (child) { return React.Children
.map(child.props.children, function (component) { return React.createElement(TableLine, null, component); }); });
return (React.createElement(React.Fragment, null,
React.createElement(DataTableWrapper, { columns: headers && headers.length },
headers && headers.map(function (header) { return React.createElement(Sticked, null, header); }),
mappedChildrens)));
};
return DataTable;
}(React.PureComponent));
exports.default = DataTable;
var templateObject_1, templateObject_2, templateObject_3;
//# sourceMappingURL=Lists.js.map