react-pdf-html-flabs-2
Version:
Html component for react-pdf with CSS support optimized
202 lines • 9.38 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.renderCell = exports.renderInline = exports.renderBlock = exports.renderPassThrough = exports.renderNoop = void 0;
const react_1 = __importDefault(require("react"));
const renderer_1 = require("@react-pdf/renderer");
const ordered_type_1 = require("./ordered.type");
const renderNoop = ({ children }) => react_1.default.createElement(react_1.default.Fragment, null);
exports.renderNoop = renderNoop;
const renderPassThrough = ({ children, }) => children;
exports.renderPassThrough = renderPassThrough;
const renderBlock = ({ style, children }) => (react_1.default.createElement(renderer_1.View, { style: style }, children));
exports.renderBlock = renderBlock;
const renderInline = ({ style, children }) => (react_1.default.createElement(renderer_1.Text, { style: style }, children));
exports.renderInline = renderInline;
const renderCell = ({ style, element, children }) => {
const table = element.closest('table');
const tableAttributes = table === null || table === void 0 ? void 0 : table.attributes;
if (!table) {
throw new Error('td element rendered outside of a table');
}
const columnIndex = element.indexOfType;
const combinedStyle = style.reduce((acc, current) => Object.assign(acc, current), {});
const tableStyles = table.style.reduce((combined, tableStyle) => Object.assign(combined, tableStyle), {});
const colWidths = tableStyles.colWidths || [];
const columnWidth = colWidths[columnIndex];
const baseStyles = {
border: tableStyles.border,
borderColor: tableStyles.borderColor,
borderWidth: tableStyles.borderWidth,
borderStyle: tableStyles.borderStyle,
};
if (tableStyles.borderSpacing &&
tableStyles.borderCollapse !== 'collapse') {
baseStyles.borderWidth = tableStyles.borderWidth;
baseStyles.margin = tableStyles.borderSpacing;
}
else {
baseStyles.borderRightWidth = 0;
baseStyles.borderBottomWidth = 0;
if (element.indexOfType !== 0) {
baseStyles.borderLeftWidth = tableStyles.borderWidth;
baseStyles.borderTopWidth = tableStyles.borderWidth;
}
}
if ((tableAttributes === null || tableAttributes === void 0 ? void 0 : tableAttributes.border) == 0) {
baseStyles.borderRightWidth = '0px';
baseStyles.borderBottomWidth = '0px';
baseStyles.borderTopWidth = '0px';
baseStyles.borderLeftWidth = '0px';
}
const overrides = {};
if (combinedStyle.textAlign == 'center') {
overrides.alignItems = 'center';
}
if (combinedStyle.verticalAlign == 'center') {
overrides.justifyContent = 'center';
}
if (columnWidth) {
overrides.width = columnWidth;
}
const finalStyles = Object.assign({}, baseStyles, combinedStyle, overrides);
if (!finalStyles.width)
finalStyles.flex = 1;
delete finalStyles.height;
return react_1.default.createElement(renderer_1.View, { style: finalStyles }, children);
};
exports.renderCell = renderCell;
const renderers = {
style: exports.renderNoop,
script: exports.renderNoop,
html: exports.renderPassThrough,
li: ({ element, stylesheets, style, children }) => {
var _a;
const bulletStyles = stylesheets.map((stylesheet) => stylesheet.li_bullet);
const contentStyles = stylesheets.map((stylesheet) => stylesheet.li_content);
const list = element.closest('ol, ul');
const ordered = (list === null || list === void 0 ? void 0 : list.tag) === 'ol' || element.parentNode.tag === 'ol';
const listStyle = ((_a = list === null || list === void 0 ? void 0 : list.style) === null || _a === void 0 ? void 0 : _a.reduce((combined, listStyle) => Object.assign(combined, listStyle), {})) || {};
const itemStyle = element.style.reduce((combined, itemStyle) => Object.assign(combined, itemStyle), {});
const listStyleType = itemStyle.listStyleType ||
itemStyle.listStyle ||
listStyle.listStyleType ||
listStyle.listStyle ||
'';
let bullet;
if (listStyleType.includes('none')) {
bullet = false;
}
else if (listStyleType.includes('url(')) {
bullet = (react_1.default.createElement(renderer_1.Image, { src: listStyleType.match(/\((.*?)\)/)[1].replace(/(['"])/g, '') }));
}
else if (ordered) {
if (ordered_type_1.lowerAlpha.includes(listStyleType)) {
bullet = (react_1.default.createElement(renderer_1.Text, null,
ordered_type_1.orderedAlpha[element.indexOfType].toLowerCase(),
"."));
}
else if (ordered_type_1.upperAlpha.includes(listStyleType)) {
bullet = (react_1.default.createElement(renderer_1.Text, null,
ordered_type_1.orderedAlpha[element.indexOfType].toUpperCase(),
"."));
}
else {
bullet = react_1.default.createElement(renderer_1.Text, null,
element.indexOfType + 1,
".");
}
}
else {
// if (listStyleType.includes('square')) {
// bullet = <Text>■</Text>;
// } else {
bullet = react_1.default.createElement(renderer_1.Text, null, "\u2022");
// }
}
return (react_1.default.createElement(renderer_1.View, { style: style },
bullet && react_1.default.createElement(renderer_1.View, { style: bulletStyles }, bullet),
react_1.default.createElement(renderer_1.View, { style: contentStyles }, children)));
},
a: ({ style, element, children }) => (react_1.default.createElement(renderer_1.Link, { style: style, src: element.attributes.href }, children)),
img: ({ style, element }) => {
const { width, height } = element.attributes;
const dimensions = {};
if (width) {
dimensions.width = width;
}
if (height) {
dimensions.height = height;
}
const finalStyles = Object.assign({}, ...style, dimensions);
return (react_1.default.createElement(renderer_1.View, { wrap: true },
react_1.default.createElement(renderer_1.Image, { style: finalStyles, source: {
uri: element.attributes.src,
body: null,
method: 'GET',
headers: {
'Cache-Control': 'no-cache',
'Access-Control-Allow-Origin': '*',
},
} })));
},
table: ({ element, style, children }) => {
var _a;
const tableStyles = element.style.reduce((combined, tableStyle) => Object.assign(combined, tableStyle), {});
const { border } = element.attributes;
const overrides = {};
if (!tableStyles.borderSpacing ||
tableStyles.borderCollapse === 'collapse') {
overrides.borderLeftWidth = 0;
overrides.borderTopWidth = 0;
}
if (border == 0) {
overrides.borderWidth = '0px';
overrides.borderStyle = 'none';
}
const borderColor = (_a = style.find((s) => s.borderColor && s.borderColor !== 'gray')) === null || _a === void 0 ? void 0 : _a.borderColor;
if (borderColor) {
overrides.borderColor = borderColor;
}
const finalStyles = Object.assign({}, ...style, overrides);
if (!finalStyles.width || parseFloat(finalStyles.width) > 100) {
finalStyles.width = '100%';
}
delete finalStyles.height;
return react_1.default.createElement(renderer_1.View, { style: finalStyles }, children);
},
colgroup: ({ element, children }) => {
let cols = children;
cols = Array.isArray(cols) ? cols : [cols];
const colWidths = cols.map((col) => {
var _a;
const style = ((_a = col === null || col === void 0 ? void 0 : col.props) === null || _a === void 0 ? void 0 : _a.style) || '';
const widthStyle = style.find((s) => s.hasOwnProperty('width'));
if (widthStyle)
return widthStyle.width;
return undefined;
});
const table = element.closest('table');
if (table) {
if (Array.isArray(table.style)) {
table.style.push({ colWidths });
}
else {
table.style = [{ colWidths }];
}
}
return react_1.default.createElement(react_1.default.Fragment, null); // don't render anything
},
tr: ({ style, children }) => {
const finalStyles = Object.assign({}, ...style);
delete finalStyles.height;
return (react_1.default.createElement(renderer_1.View, { wrap: true, style: finalStyles }, children));
},
br: ({ style }) => (react_1.default.createElement(renderer_1.Text, { wrap: true, style: style }, '\n')),
td: exports.renderCell,
th: exports.renderCell,
};
exports.default = renderers;
//# sourceMappingURL=renderers.js.map