@nodeject/ui-components
Version:
UI library for non-trivial components
87 lines (86 loc) • 4.53 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.getComponentParams = exports.RichTextViewer = void 0;
var React = require("react");
var react_1 = require("react");
var ReactDOM = require("react-dom");
// @ts-ignore
var SchedioEditorView_1 = require("./react-editor/SchedioEditorView");
// Require Editor JS files.
require("@averystupidtest/editor/js/froala_editor.pkgd.min.js");
require("@averystupidtest/editor/js/plugins.pkgd.min.js");
require("@averystupidtest/editor/js/third_party/embedly.min.js");
// Require Editor CSS files.
require("@averystupidtest/editor/css/froala_editor.pkgd.min.css");
require("@averystupidtest/editor/css/froala_style.min.css");
require("@averystupidtest/editor/css/third_party/embedly.min.css");
var parser_1 = require("./parser");
var styles = require("./RichTextViewer.module.less");
var RichTextViewer = function (props) {
var getTributeComponent = props.getTributeComponent;
var richTextViewerRef = react_1.useRef(null);
var _a = react_1.useState(null), richTextViewerElement = _a[0], setRichTextViewerElement = _a[1];
var content = props.content;
var onLinkClick = function (url) {
props.onLinkClick && props.onLinkClick(url);
};
// Add the onClick events to all the <a/> we find (shall we use on... for mobile?)
react_1.useEffect(function () {
setRichTextViewerElement(richTextViewerRef.current);
}, [richTextViewerRef]);
// Component will unmount
react_1.useEffect(function () {
return function () {
if (richTextViewerElement) {
var embeddedComponents = richTextViewerElement.querySelectorAll('.schedio-tribute-link[data-href]');
Array.from(embeddedComponents).forEach(function (c) {
var url = c.getAttribute('data-href');
c.removeEventListener('click', function () { return onLinkClick(url); }, false);
});
}
};
}, []);
// Add the onClick events to all the <a/> we find (shall we use on... for mobile?)
react_1.useEffect(function () {
if (richTextViewerElement) {
var components = richTextViewerElement.querySelectorAll('.schedio-tribute-link[data-href]');
Array.from(components).forEach(function (c) {
var params = exports.getComponentParams(c);
var url = c.getAttribute('data-href');
c.addEventListener('click', function () { return onLinkClick(url); }, false);
});
}
}, [content, richTextViewerElement, richTextViewerRef]);
// Add the components dynamically to each wrapper id.
react_1.useEffect(function () {
if (richTextViewerElement && getTributeComponent) {
var htmlDbComponents = parser_1.getTributeComponentsFromHtml(richTextViewerElement);
htmlDbComponents &&
htmlDbComponents.map(function (htmlDbComp) {
var params = exports.getComponentParams(htmlDbComp);
var Component = getTributeComponent(params).Component;
ReactDOM.render(Component, document.getElementById(params.domId));
});
}
}, [richTextViewerElement, content]);
// Prevents to set Viewer as Editor if user clicks on a link.
var onEditorClick = function (e) {
if (e.target.href !== undefined) {
e.stopPropagation();
}
};
return (React.createElement("div", { className: styles.richTextViewer, ref: richTextViewerRef, onClick: onEditorClick },
React.createElement(SchedioEditorView_1.SchedioEditorView, { model: content })));
};
exports.RichTextViewer = RichTextViewer;
var getComponentParams = function (component) {
var domId = component.getAttribute('id') || '';
var type = component.getAttribute('data-tribute-type') || '';
var organization = component.getAttribute('data-tribute-organization') || '';
var ppm = component.getAttribute('data-tribute-ppm') || '';
var title = component.getAttribute('data-tribute-title') || '';
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;