@nodeject/ui-components
Version:
UI library for non-trivial components
82 lines (81 loc) • 4.25 kB
JavaScript
import * as React from 'react';
import { useEffect, useRef, useState } from 'react';
import * as ReactDOM from 'react-dom';
// @ts-ignore
import { SchedioEditorView } from './react-editor/SchedioEditorView';
// Require Editor JS files.
import '@averystupidtest/editor/js/froala_editor.pkgd.min.js';
import '@averystupidtest/editor/js/plugins.pkgd.min.js';
import '@averystupidtest/editor/js/third_party/embedly.min.js';
// Require Editor CSS files.
import '@averystupidtest/editor/css/froala_editor.pkgd.min.css';
import '@averystupidtest/editor/css/froala_style.min.css';
import '@averystupidtest/editor/css/third_party/embedly.min.css';
import { getTributeComponentsFromHtml } from './parser';
import * as styles from './RichTextViewer.module.less';
export var RichTextViewer = function (props) {
var getTributeComponent = props.getTributeComponent;
var richTextViewerRef = useRef(null);
var _a = 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?)
useEffect(function () {
setRichTextViewerElement(richTextViewerRef.current);
}, [richTextViewerRef]);
// Component will unmount
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?)
useEffect(function () {
if (richTextViewerElement) {
var components = richTextViewerElement.querySelectorAll('.schedio-tribute-link[data-href]');
Array.from(components).forEach(function (c) {
var params = 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.
useEffect(function () {
if (richTextViewerElement && getTributeComponent) {
var htmlDbComponents = getTributeComponentsFromHtml(richTextViewerElement);
htmlDbComponents &&
htmlDbComponents.map(function (htmlDbComp) {
var params = 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, { model: content })));
};
export 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 };
};