@native-html/table-plugin
Version:
🔠A WebView-based plugin to render tables in react-native-render-html
82 lines (78 loc) • 4.08 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.cssRulesFromSpecs = cssRulesFromSpecs;
exports.defaultTableStylesSpecs = void 0;
/**
* Default styles attributes.
*
* <img src="https://raw.githubusercontent.com/native-html/table-plugin/master/images/TableStyleSpecs.png" />
*
* @remarks
* Custom attributes will be shallow-merged.
*
* @public
*/
const defaultTableStylesSpecs = {
selectableText: false,
fitContainerWidth: false,
fitContainerHeight: false,
cellPaddingEm: 0.25,
outerBorderColor: '#b5b5b5',
outerBorderWidthPx: 0,
rowsBorderWidthPx: 1,
columnsBorderWidthPx: 0,
linkColor: '#3498DB',
fontFamily: 'sans-serif',
fontSizePx: null,
thBorderColor: '#3f5c7a',
tdBorderColor: '#b5b5b5',
thOddBackground: '#253546',
thOddColor: '#FFFFFF',
thEvenBackground: '#253546',
thEvenColor: '#FFFFFF',
trOddBackground: '#e2e2e2',
trOddColor: '#333333',
trEvenBackground: '#FFFFFF',
trEvenColor: '#333333'
};
/**
* Create css rules from a specification object.
*
* @param specs - The specifications object.
*
* @public
*/
exports.defaultTableStylesSpecs = defaultTableStylesSpecs;
function cssRulesFromSpecs(specs = defaultTableStylesSpecs) {
const {
cellPaddingEm,
rowsBorderWidthPx,
columnsBorderWidthPx,
outerBorderColor,
outerBorderWidthPx,
selectableText,
fitContainerWidth,
fitContainerHeight,
fontSizePx,
linkColor,
fontFamily,
tdBorderColor,
thBorderColor,
thOddBackground,
thOddColor,
thEvenBackground,
thEvenColor,
trOddBackground,
trOddColor,
trEvenBackground,
trEvenColor
} = specs;
const selectTextRule = selectableText ? '' : "\n user-select: none;\n -webkit-user-select: none;\n -ms-user-select: none;\n ";
const spanToContainerWidthRule = fitContainerWidth ? 'min-width: 100vw;' : '';
const spanToContainerHeightRule = fitContainerHeight ? 'min-height: 100vh;' : '';
const fontSizeRule = fontSizePx ? "font-size: ".concat(fontSizePx, "px;") : '';
return "\n :root {\n font-family: ".concat(fontFamily, ";\n background-color: transparent;\n ").concat(fontSizeRule, "\n }\n body, html {\n margin: 0;\n background-color: transparent;\n ").concat(selectTextRule, "\n }\n a:link, a:visited {\n color: ").concat(linkColor, ";\n }\n table {\n border: ").concat(outerBorderWidthPx, "px solid ").concat(outerBorderColor, ";\n ").concat(spanToContainerWidthRule, "\n ").concat(spanToContainerHeightRule, "\n padding: 0;\n border-collapse: collapse;\n margin-left: auto;\n margin-right: auto;\n }\n th, td {\n padding: ").concat(cellPaddingEm, "em;\n text-align: center;\n }\n table, th, td {\n margin: 0;\n }\n thead {\n background-color: ").concat(thOddBackground, ";\n }\n tr:nth-of-type(odd) th {\n background-color: ").concat(thOddBackground, ";\n color: ").concat(thOddColor, ";\n }\n tr:nth-of-type(even) th {\n background-color: ").concat(thEvenBackground, ";\n color: ").concat(thEvenColor, ";\n }\n tr:nth-of-type(odd) td {\n background-color: ").concat(trOddBackground, ";\n color: ").concat(trOddColor, "\n }\n tr:nth-of-type(even) td {\n background-color: ").concat(trEvenBackground, ";\n color: ").concat(trEvenColor, ";\n }\n th {\n border-bottom: ").concat(rowsBorderWidthPx, "px solid ").concat(thBorderColor, ";\n border-right: ").concat(columnsBorderWidthPx, "px solid ").concat(thBorderColor, ";\n }\n td {\n border-bottom: ").concat(rowsBorderWidthPx, "px solid ").concat(tdBorderColor, ";\n border-right: ").concat(columnsBorderWidthPx, "px solid ").concat(tdBorderColor, ";\n }\n th:last-of-type, td:last-of-type {\n border-right: none;\n }\n td:last-of-type {\n border-right: none;\n }\n tr:last-of-type td {\n border-bottom: none;\n }\n ");
}
//# sourceMappingURL=css-rules.js.map