@stokr/components-library
Version:
STOKR - Components Library
79 lines (77 loc) • 7.34 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TableWrapper = exports.TableWrap = exports.TableDropdownIcon = exports.TableCellType = exports.Styles = exports.StyledTr = exports.StyledTh = exports.StyledTd = exports.StyledTable = exports.StyledReactTable = exports.Row = exports.HeadWrapper = exports.Head = exports.Container = exports.Column = exports.Body = void 0;
var _styledComponents = _interopRequireWildcard(require("styled-components"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const Container = exports.Container = _styledComponents.default.div.withConfig({
displayName: "Tablestyles__Container",
componentId: "sc-pdcd6r-0"
})(["position:relative;"]);
const HeadWrapper = exports.HeadWrapper = _styledComponents.default.div.withConfig({
displayName: "Tablestyles__HeadWrapper",
componentId: "sc-pdcd6r-1"
})(["z-index:1;position:absolute;top:0;left:0;width:100%;overflow:hidden;background-color:", ";"], props => props.theme.cWhite);
const TableWrapper = exports.TableWrapper = _styledComponents.default.div.withConfig({
displayName: "Tablestyles__TableWrapper",
componentId: "sc-pdcd6r-2"
})(["z-index:0;position:relative;display:block;"]);
const StyledTable = exports.StyledTable = _styledComponents.default.div.withConfig({
displayName: "Tablestyles__StyledTable",
componentId: "sc-pdcd6r-3"
})(["display:table;min-width:100%;"]);
const Row = exports.Row = _styledComponents.default.div.withConfig({
displayName: "Tablestyles__Row",
componentId: "sc-pdcd6r-4"
})(["display:table-row;"]);
const Column = exports.Column = _styledComponents.default.div.withConfig({
displayName: "Tablestyles__Column",
componentId: "sc-pdcd6r-5"
})(["display:table-cell;text-align:", ";font-family:'Open Sans';", ";", ";", ";"], props => props.align, props => props.colWidth && "\n width: ".concat(props.colWidth, "\n min-width: ").concat(props.colWidth, "\n "), props => props.minWidth && "\n min-width: ".concat(props.minWidth, "\n "), props => props.maxWidth && "\n width: ".concat(props.maxWidth, "\n max-width: ").concat(props.maxWidth, "\n "));
const Head = exports.Head = _styledComponents.default.div.withConfig({
displayName: "Tablestyles__Head",
componentId: "sc-pdcd6r-6"
})(["display:table-header-group;", " ", "{", "{border-bottom:1px solid ", ";}}", "{color:", ";font-weight:600;font-size:11px;line-height:20px;letter-spacing:1.98px;text-transform:uppercase;vertical-align:middle;white-space:nowrap;padding:10px 10px;}"], props => props.hidden && "\n visibility: hidden;\n ", Row, Column, props => props.theme.cLightGrey, Column, props => props.theme.cProgress);
const Body = exports.Body = _styledComponents.default.div.withConfig({
displayName: "Tablestyles__Body",
componentId: "sc-pdcd6r-7"
})(["display:table-row-group;", "{& + ", "{", "{border-top:1px solid ", ";}}}", "{color:", ";font-weight:400;font-size:14px;line-height:20px;vertical-align:middle;padding:26px 10px;}"], Row, Row, Column, props => props.theme.cLightGrey, Column, props => props.theme.cBlack);
// TODO: move to separate file
const TableCellType = exports.TableCellType = _styledComponents.default.div.withConfig({
displayName: "Tablestyles__TableCellType",
componentId: "sc-pdcd6r-8"
})(["display:inline-block;background-color:", ";color:", ";font-weight:600;min-width:40px;line-height:24px;border-radius:3px;text-align:center;"], props => props.color, props => props.theme.cWhite);
const TableDropdownIcon = exports.TableDropdownIcon = _styledComponents.default.i.attrs({
className: 'ion ion-ios-arrow-down'
}).withConfig({
displayName: "Tablestyles__TableDropdownIcon",
componentId: "sc-pdcd6r-9"
})(["width:14px;height:20px;font-size:20px;margin-top:-10px;transform:rotate(0);transition:0.3s transform;cursor:pointer;", ""], props => props.isActive && "\n transform: rotate(180deg);\n ");
const Styles = exports.Styles = _styledComponents.default.div.withConfig({
displayName: "Tablestyles__Styles",
componentId: "sc-pdcd6r-10"
})(["display:block;max-width:100%;table{th,td{&.collapse{width:0.0000000001%;}}}"]);
const TableWrap = exports.TableWrap = _styledComponents.default.div.withConfig({
displayName: "Tablestyles__TableWrap",
componentId: "sc-pdcd6r-11"
})(["display:block;max-width:100%;overflow-x:auto;overflow-y:hidden;"]);
const StyledTh = exports.StyledTh = _styledComponents.default.th.withConfig({
displayName: "Tablestyles__StyledTh",
componentId: "sc-pdcd6r-12"
})(["text-transform:uppercase;padding:10px;font-size:11px;letter-spacing:1.6px;font-weight:600;background-color:white;color:#000000de;border-bottom:1px solid #e1e1e1;line-height:20px;", " ", " ", " ", ""], props => props.blue && "\n background-color: #0050ca;\n color: #ffffff;\n border:none;\n ", props => props.width && "\n width: ".concat(props.width, ";\n min-width: ").concat(props.width, ";\n max-width: ").concat(props.width, ";\n "), props => props.minWidth && "\n min-width: ".concat(props.minWidth, ";\n "), props => props.maxWidth && "\n max-width: ".concat(props.maxWidth, ";\n "));
const StyledTd = exports.StyledTd = _styledComponents.default.td.withConfig({
displayName: "Tablestyles__StyledTd",
componentId: "sc-pdcd6r-13"
})(["padding:26px 15px;border-bottom:1px solid #e1e1e1;font-size:14px;", " ", " ", " ", " ", ""], props => props.blue && "\n background-color: #004bb7;\n color: #ffffff;\n ", props => props.subTable && "\n padding: 0;\n &:last-child {\n border-bottom: 0;\n }\n ", props => props.width && "\n width: ".concat(props.width, ";\n min-width: ").concat(props.width, ";\n max-width: ").concat(props.width, ";\n "), props => props.minWidth && "\n min-width: ".concat(props.minWidth, ";\n "), props => props.maxWidth && "\n max-width: ".concat(props.maxWidth, ";\n "));
const StyledTr = exports.StyledTr = _styledComponents.default.tr.withConfig({
displayName: "Tablestyles__StyledTr",
componentId: "sc-pdcd6r-14"
})(["", " ", ""], props => props.customRowStyles && (0, _styledComponents.css)(["", ""], props.customRowStyles(props.rowIndex, props.rowData)), props => props.customRowHoverStyles && (0, _styledComponents.css)(["&:hover,&:focus,&:active{", "}"], props.customRowHoverStyles(props.rowIndex, props.rowData)));
const StyledReactTable = exports.StyledReactTable = _styledComponents.default.table.withConfig({
displayName: "Tablestyles__StyledReactTable",
componentId: "sc-pdcd6r-15"
})(["width:100%;border-spacing:0;", ""], props => props.customTableStyles && (0, _styledComponents.css)(["", ""], props.customTableStyles()));
StyledReactTable.Tr = StyledTr;
StyledReactTable.Th = StyledTh;
StyledReactTable.Td = StyledTd;