@nodeject/ui-components
Version:
UI library for non-trivial components
95 lines (94 loc) • 4.82 kB
JavaScript
;
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);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.getTributeComponentsFromHtml = exports.getComponentParams = exports.parser = exports.htmlToDb = exports.dbToHtml = void 0;
var React = require("react");
var server_1 = require("react-dom/server");
var TributeComponentWrapper_1 = require("./TributeComponentWrapper");
/**
* Re-builds the db html string value with full tribute components
* @param value
* @param getTributeComponent
*/
var dbToHtml = function (value, getTributeComponent) {
var component = new DOMParser().parseFromString(value, 'text/html');
return getTributeComponent
? replaceHtmlComponentsWithPlaceholder(value, exports.getTributeComponentsFromHtml(component), getTributeComponent)
: value;
};
exports.dbToHtml = dbToHtml;
var replaceHtmlComponentsWithPlaceholder = function (value, htmlTributeComponents, getTributeComponent) {
var parsedHtmlString = value;
// console.log("value from db", value)
htmlTributeComponents.map(function (htmlComponent) {
var params = exports.getComponentParams(htmlComponent);
var Placeholder = getTributeComponent(params).Placeholder;
var wrappedComponent = Placeholder;
parsedHtmlString = replaceComponent(parsedHtmlString, htmlComponent.outerHTML, server_1.renderToString(wrappedComponent));
});
return parsedHtmlString;
};
/**
* Parses the value to trim off full tribute components and replace with lighter ones to save space in the db
* @param value
*/
var htmlToDb = function (value) {
var cleanedValue = value === null || value === void 0 ? void 0 : value.replace('<p data-f-id="pbf" style="text-align: center; font-size: 14px; margin-top: 30px; opacity: 0.65; font-family: sans-serif;">Powered by <a href="https://www.Schedio.com/wysiwyg-editor?pb=1" title="Schedio Editor">Schedio Editor</a></p>', '');
var component = new DOMParser().parseFromString(cleanedValue, 'text/html');
var fullTributeComponents = exports.getTributeComponentsFromHtml
? exports.getTributeComponentsFromHtml(component)
: [];
var dbValue = replaceFullHtmlComponentsWithDbHtmlComponents(cleanedValue, fullTributeComponents);
return dbValue;
};
exports.htmlToDb = htmlToDb;
exports.parser = {
dbToHtml: exports.dbToHtml,
htmlToDb: exports.htmlToDb
};
var getComponentParams = function (component) {
var domId = component.getAttribute('id') || '';
var title = component.getAttribute('data-tribute-title') || '';
var type = component.getAttribute('data-tribute-type') || '';
var organization = component.getAttribute('data-tribute-organization') || '';
var ppm = component.getAttribute('data-tribute-ppm') || '';
var wbsComponent = component.getAttribute('data-tribute-wbscomponent') || '';
var workItem = component.getAttribute('data-tribute-workitem') || '';
return { domId: domId, organization: organization, ppm: ppm, title: title, type: type, wbsComponent: wbsComponent, workItem: workItem };
};
exports.getComponentParams = getComponentParams;
var replaceFullHtmlComponentsWithDbHtmlComponents = function (value, fullHtmlComponents) {
var parsedValue = value;
// Find all ids
fullHtmlComponents.map(function (fullHtmlComp) {
// get params
var params = exports.getComponentParams(fullHtmlComp);
var amendedParams = __assign(__assign({}, params), { domId: params.domId + "_" + parseInt(Math.random().toString(8).substr(2, 9), 10) });
var DbHtmlComponent = React.createElement(TributeComponentWrapper_1.TributeComponentWrapper, __assign({}, amendedParams));
parsedValue = replaceComponent(parsedValue, fullHtmlComp.outerHTML, server_1.renderToString(DbHtmlComponent));
});
return parsedValue;
};
var replaceComponent = function (htmlString, searchComponent, replaceComponent) {
return htmlString.replace(searchComponent, replaceComponent);
};
var getTributeComponentsFromHtml = function (component) {
// Get the schedio-tribute-component
var components = component.getElementsByClassName('schedio-tribute-component');
var tributeComponents = [];
Array.from(components).forEach(function (c) {
tributeComponents.push(c);
});
return tributeComponents;
};
exports.getTributeComponentsFromHtml = getTributeComponentsFromHtml;