@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
66 lines • 3.75 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CommentText = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_1 = require("react");
var Text_1 = require("@fluentui/react/lib/Text");
var LivePersona_1 = require("../../../LivePersona");
var common_1 = require("../../common");
var regexify_string_1 = tslib_1.__importDefault(require("regexify-string"));
var Stack_1 = require("@fluentui/react/lib/Stack");
var lodash_1 = require("lodash");
var he_1 = tslib_1.__importDefault(require("he"));
var react_2 = require("@fluentui/react");
var CommentText = function (props) {
var _a = (0, react_1.useState)(""), commentText = _a[0], setCommentText = _a[1];
var _b = (0, react_1.useContext)(common_1.AppContext), theme = _b.theme, serviceScope = _b.serviceScope;
var text = props.text, mentions = props.mentions;
var mentionsResults = mentions;
var convertTextToLinksAndText = function (text) {
var parts = text.split(common_1.URL_REGEX);
return parts.map(function (part, index) {
if (part.match(common_1.URL_REGEX)) {
return (React.createElement(react_2.Link, { key: index, href: part, target: "_blank", rel: "noopener noreferrer", style: { color: theme.link } }, part));
}
return part;
});
};
(0, react_1.useEffect)(function () {
var hasMentions = (mentions === null || mentions === void 0 ? void 0 : mentions.length) ? true : false;
var lines = text.split(/\r?\n/);
var result = [];
lines.forEach(function (line, idx) {
var lineContent = line;
if (hasMentions) {
lineContent = (0, regexify_string_1.default)({
pattern: /@mention{\d+}/g,
decorator: function (match, index) {
var mention = mentionsResults[index];
var _name = "@".concat(mention.name);
return (React.createElement(LivePersona_1.LivePersona, { serviceScope: serviceScope, upn: mention.email, template: React.createElement("span", { style: { color: theme.themePrimary, whiteSpace: 'nowrap' } }, _name) }));
},
input: line,
});
}
result.push(React.createElement(Stack_1.Stack, { horizontal: true, key: "stack-".concat(idx), horizontalAlign: "start", verticalAlign: "center" }, (0, lodash_1.isArray)(lineContent) ? (lineContent.length > 0 ?
// eslint-disable-next-line @typescript-eslint/no-explicit-any
lineContent.map(function (el, i) {
if ((0, lodash_1.isObject)(el)) {
return (React.createElement("span", { key: i, style: { paddingRight: 5 } }, el));
}
else {
var _el = el.trim();
if (_el.length) {
return (React.createElement(Text_1.Text, { style: { paddingRight: 5 }, variant: "small", key: i }, convertTextToLinksAndText(he_1.default.decode(_el))));
}
}
}) : React.createElement("br", null)) : lineContent.trim().length > 0 ? (React.createElement(Text_1.Text, { variant: "small" }, convertTextToLinksAndText(he_1.default.decode(lineContent)))) : (React.createElement("br", null))));
});
setCommentText(result);
}, []);
return (React.createElement(React.Fragment, null,
React.createElement(Stack_1.Stack, { wrap: true, verticalAlign: "center" }, commentText)));
};
exports.CommentText = CommentText;
//# sourceMappingURL=CommentText.js.map