@nodeject/ui-components
Version:
UI library for non-trivial components
88 lines (87 loc) • 4.37 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);
};
import * as React from 'react';
import { renderToString } from 'react-dom/server';
import { TributeComponentWrapper } from './TributeComponentWrapper';
/**
* Re-builds the db html string value with full tribute components
* @param value
* @param getTributeComponent
*/
export var dbToHtml = function (value, getTributeComponent) {
var component = new DOMParser().parseFromString(value, 'text/html');
return getTributeComponent
? replaceHtmlComponentsWithPlaceholder(value, getTributeComponentsFromHtml(component), getTributeComponent)
: value;
};
var replaceHtmlComponentsWithPlaceholder = function (value, htmlTributeComponents, getTributeComponent) {
var parsedHtmlString = value;
// console.log("value from db", value)
htmlTributeComponents.map(function (htmlComponent) {
var params = getComponentParams(htmlComponent);
var Placeholder = getTributeComponent(params).Placeholder;
var wrappedComponent = Placeholder;
parsedHtmlString = replaceComponent(parsedHtmlString, htmlComponent.outerHTML, 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
*/
export 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 = getTributeComponentsFromHtml
? getTributeComponentsFromHtml(component)
: [];
var dbValue = replaceFullHtmlComponentsWithDbHtmlComponents(cleanedValue, fullTributeComponents);
return dbValue;
};
export var parser = {
dbToHtml: dbToHtml,
htmlToDb: htmlToDb
};
export 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 };
};
var replaceFullHtmlComponentsWithDbHtmlComponents = function (value, fullHtmlComponents) {
var parsedValue = value;
// Find all ids
fullHtmlComponents.map(function (fullHtmlComp) {
// get params
var params = getComponentParams(fullHtmlComp);
var amendedParams = __assign(__assign({}, params), { domId: params.domId + "_" + parseInt(Math.random().toString(8).substr(2, 9), 10) });
var DbHtmlComponent = React.createElement(TributeComponentWrapper, __assign({}, amendedParams));
parsedValue = replaceComponent(parsedValue, fullHtmlComp.outerHTML, renderToString(DbHtmlComponent));
});
return parsedValue;
};
var replaceComponent = function (htmlString, searchComponent, replaceComponent) {
return htmlString.replace(searchComponent, replaceComponent);
};
export 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;
};