tc-ui-toolkit
Version:
React components used to develop tools for the desktop app translationCore
152 lines (130 loc) • 14.1 kB
JavaScript
;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _marked = _interopRequireDefault(require("marked"));
var _helpers = require("./helpers");
function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
/**
* Attaches click listeners to links in the ref's text
* @param ref
* @param onClick
*/
var useLinkEffect = function useLinkEffect(ref, onClick) {
(0, _react.useEffect)(function () {
// find anchors in text
var anchors = ref.current ? ref.current.getElementsByTagName("a") : []; // add click handler
var _iterator = _createForOfIteratorHelper(anchors),
_step;
try {
var _loop = function _loop() {
var a = _step.value;
a.onclick = function (event) {
event.preventDefault();
if (typeof onClick === 'function') {
// give the link path and title to the handler.
onClick(a.href, a.innerHTML);
}
};
};
for (_iterator.s(); !(_step = _iterator.n()).done;) {
_loop();
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
}, [ref, onClick]);
};
function PhraseWithToolTip(_ref) {
var phrase = _ref.phrase,
getScriptureFromReference = _ref.getScriptureFromReference,
onClickLink = _ref.onClickLink;
var phraseEl = (0, _react.useRef)(null);
var toolTippedPhraseEl = (0, _react.useRef)(null);
useLinkEffect(phraseEl, onClickLink);
useLinkEffect(toolTippedPhraseEl, onClickLink);
var scriptureRef;
var tooltipRef;
var rcMatch = phrase.match(/\[([^\]]+)\]\s*\(rc:\/\/([\w-]+)\/([\w-]+)\/book\/(\w+)\/(\d+)\/(\d+)\)/) || [];
var showTooltip = rcMatch.length > 0;
if (showTooltip) {
var _rcMatch = (0, _slicedToArray2["default"])(rcMatch, 7),
wholeMatch = _rcMatch[0],
referenceText = _rcMatch[1],
lang = _rcMatch[2],
id = _rcMatch[3],
book = _rcMatch[4],
chapter = _rcMatch[5],
verse = _rcMatch[6];
var _phrase$split = phrase.split(wholeMatch),
_phrase$split2 = (0, _slicedToArray2["default"])(_phrase$split, 2),
preReference = _phrase$split2[0],
postReference = _phrase$split2[1];
var tooltipLabel = getScriptureFromReference(lang, id, book, chapter, verse);
return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
dangerouslySetInnerHTML: {
__html: preReference
}
}), /*#__PURE__*/_react["default"].createElement("span", {
onMouseEnter: function onMouseEnter() {
var _getOffset = (0, _helpers.getOffset)(scriptureRef),
top = _getOffset.top,
left = _getOffset.left;
tooltipRef.style.top = "".concat(top, "px");
tooltipRef.style.left = "".concat(left, "px");
tooltipRef.style.width = "".concat(scriptureRef.offsetWidth, "px");
tooltipRef.style.height = "".concat(scriptureRef.offsetHeight, "px");
},
style: {
position: 'relative'
}
}, /*#__PURE__*/_react["default"].createElement("div", {
ref: function ref(_ref2) {
return tooltipRef = _ref2;
},
"aria-label": tooltipLabel,
className: "hint--top hint--medium",
style: {
position: 'fixed'
}
}), /*#__PURE__*/_react["default"].createElement("span", {
style: {
whiteSpace: 'nowrap',
textDecoration: 'underline'
},
ref: function ref(_ref3) {
return scriptureRef = _ref3;
}
}, referenceText)), /*#__PURE__*/_react["default"].createElement("span", {
ref: toolTippedPhraseEl,
style: {
color: '#fff'
},
dangerouslySetInnerHTML: {
__html: (0, _marked["default"])(postReference)
}
}));
} else {
return /*#__PURE__*/_react["default"].createElement("div", {
ref: phraseEl,
style: {
color: '#fff'
},
dangerouslySetInnerHTML: {
__html: (0, _marked["default"])(phrase)
}
});
}
}
var _default = PhraseWithToolTip;
exports["default"] = _default;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9DaGVja0luZm9DYXJkL1BocmFzZVdpdGhUb29sVGlwLmpzIl0sIm5hbWVzIjpbInVzZUxpbmtFZmZlY3QiLCJyZWYiLCJvbkNsaWNrIiwiYW5jaG9ycyIsImN1cnJlbnQiLCJnZXRFbGVtZW50c0J5VGFnTmFtZSIsImEiLCJvbmNsaWNrIiwiZXZlbnQiLCJwcmV2ZW50RGVmYXVsdCIsImhyZWYiLCJpbm5lckhUTUwiLCJQaHJhc2VXaXRoVG9vbFRpcCIsInBocmFzZSIsImdldFNjcmlwdHVyZUZyb21SZWZlcmVuY2UiLCJvbkNsaWNrTGluayIsInBocmFzZUVsIiwidG9vbFRpcHBlZFBocmFzZUVsIiwic2NyaXB0dXJlUmVmIiwidG9vbHRpcFJlZiIsInJjTWF0Y2giLCJtYXRjaCIsInNob3dUb29sdGlwIiwibGVuZ3RoIiwid2hvbGVNYXRjaCIsInJlZmVyZW5jZVRleHQiLCJsYW5nIiwiaWQiLCJib29rIiwiY2hhcHRlciIsInZlcnNlIiwic3BsaXQiLCJwcmVSZWZlcmVuY2UiLCJwb3N0UmVmZXJlbmNlIiwidG9vbHRpcExhYmVsIiwiX19odG1sIiwidG9wIiwibGVmdCIsInN0eWxlIiwid2lkdGgiLCJvZmZzZXRXaWR0aCIsImhlaWdodCIsIm9mZnNldEhlaWdodCIsInBvc2l0aW9uIiwid2hpdGVTcGFjZSIsInRleHREZWNvcmF0aW9uIiwiY29sb3IiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7QUFDQTs7QUFDQTs7QUFDQTs7Ozs7Ozs7QUFFQTs7Ozs7QUFLQSxJQUFNQSxhQUFhLEdBQUcsU0FBaEJBLGFBQWdCLENBQUNDLEdBQUQsRUFBTUMsT0FBTixFQUFrQjtBQUN0Qyx3QkFBVSxZQUFNO0FBQ2Q7QUFDQSxRQUFNQyxPQUFPLEdBQUdGLEdBQUcsQ0FBQ0csT0FBSixHQUFjSCxHQUFHLENBQUNHLE9BQUosQ0FBWUMsb0JBQVosS0FBZCxHQUFzRCxFQUF0RSxDQUZjLENBSWQ7O0FBSmMsK0NBS0VGLE9BTEY7QUFBQTs7QUFB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V0U7QUFBTSxNQUFBLEtBQUssRUFBRTtBQUNYQyxRQUFBQSxVQUFVLEVBQUUsUUFERDtBQUVYQyxRQUFBQSxjQUFjLEVBQUU7QUFGTCxPQUFiO0FBR0csTUFBQSxHQUFHLEVBQUUsYUFBQzVDLEtBQUQ7QUFBQSxlQUFTaUIsWUFBWSxHQUFHakIsS0FBeEI7QUFBQTtBQUhSLE9BSUd3QixhQUpILENBWEYsQ0FGRixlQW9CRTtBQUFNLE1BQUEsR0FBRyxFQUFFUixrQkFBWDtBQUErQixNQUFBLEtBQUssRUFBRTtBQUFFNkIsUUFBQUEsS0FBSyxFQUFFO0FBQVQsT0FBdEM7QUFDRSxNQUFBLHVCQUF1QixFQUFFO0FBQUVYLFFBQUFBLE1BQU0sRUFBRSx3QkFBT0YsYUFBUDtBQUFWO0FBRDNCLE1BcEJGLENBREY7QUF5QkQsR0E3QkQsTUE2Qk87QUFDTCx3QkFDRTtBQUFLLE1BQUEsR0FBRyxFQUFFakIsUUFBVjtBQUFvQixNQUFBLEtBQUssRUFBRTtBQUFFOEIsUUFBQUEsS0FBSyxFQUFFO0FBQVQsT0FBM0I7QUFBOEMsTUFBQSx1QkFBdUIsRUFBRTtBQUFFWCxRQUFBQSxNQUFNLEVBQUUsd0JBQU90QixNQUFQO0FBQVY7QUFBdkUsTUFERjtBQUdEO0FBQ0Y7O2VBRWNELGlCIiwic291cmNlc0NvbnRlbnQiOlsiLyogZXNsaW50LWRpc2FibGUgbm8tcmV0dXJuLWFzc2lnbiAqL1xuaW1wb3J0IFJlYWN0LCB7IHVzZUVmZmVjdCwgdXNlUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IG1hcmtlZCBmcm9tICdtYXJrZWQnO1xuaW1wb3J0IHsgZ2V0T2Zmc2V0IH0gZnJvbSAnLi9oZWxwZXJzJztcblxuLyoqXG4gKiBBdHRhY2hlcyBjbGljayBsaXN0ZW5lcnMgdG8gbGlua3MgaW4gdGhlIHJlZidzIHRleHRcbiAqIEBwYXJhbSByZWZcbiAqIEBwYXJhbSBvbkNsaWNrXG4gKi9cbmNvbnN0IHVzZUxpbmtFZmZlY3QgPSAocmVmLCBvbkNsaWNrKSA9PiB7XG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgLy8gZmluZCBhbmNob3JzIGluIHRleHRcbiAgICBjb25zdCBhbmNob3JzID0gcmVmLmN1cnJlbnQgPyByZWYuY3VycmVudC5nZXRFbGVtZW50c0J5VGFnTmFtZShgYWApIDogW107XG5cbiAgICAvLyBhZGQgY2xpY2sgaGFuZGxlclxuICAgIGZvciAoY29uc3QgYSBvZiBhbmNob3JzKSB7XG4gICAgICBhLm9uY2xpY2sgPSAoZXZlbnQpID0+IHtcbiAgICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcblxuICAgICAgICBpZiAodHlwZW9mIG9uQ2xpY2sgPT09ICdmdW5jdGlvbicpIHtcbiAgICAgICAgICAvLyBnaXZlIHRoZSBsaW5rIHBhdGggYW5kIHRpdGxlIHRvIHRoZSBoYW5kbGVyLlxuICAgICAgICAgIG9uQ2xpY2soYS5ocmVmLCBhLmlubmVySFRNTCk7XG4gICAgICAgIH1cbiAgICAgIH07XG4gICAgfVxuICB9LCBbcmVmLCBvbkNsaWNrXSk7XG59O1xuXG5mdW5jdGlvbiBQaHJhc2VXaXRoVG9vbFRpcCh7XG4gIHBocmFzZSwgZ2V0U2NyaXB0dXJlRnJvbVJlZmVyZW5jZSwgb25DbGlja0xpbmssXG59KSB7XG4gIGNvbnN0IHBocmFzZUVsID0gdXNlUmVmKG51bGwpO1xuICBjb25zdCB0b29sVGlwcGVkUGhyYXNlRWwgPSB1c2VSZWYobnVsbCk7XG5cbiAgdXNlTGlua0VmZmVjdChwaHJhc2VFbCwgb25DbGlja0xpbmspO1xuICB1c2VMaW5rRWZmZWN0KHRvb2xUaXBwZWRQaHJhc2VFbCwgb25DbGlja0xpbmspO1xuXG4gIGxldCBzY3JpcHR1cmVSZWY7XG4gIGxldCB0b29sdGlwUmVmO1xuICBjb25zdCByY01hdGNoID0gcGhyYXNlLm1hdGNoKC9cXFsoW15cXF1dKylcXF1cXHMqXFwocmM6XFwvXFwvKFtcXHctXSspXFwvKFtcXHctXSspXFwvYm9va1xcLyhcXHcrKVxcLyhcXGQrKVxcLyhcXGQrKVxcKS8pIHx8IFtdO1xuICBjb25zdCBzaG93VG9vbHRpcCA9IHJjTWF0Y2gubGVuZ3RoID4gMDtcblxuICBpZiAoc2hvd1Rvb2x0aXApIHtcbiAgICBjb25zdCBbd2hvbGVNYXRjaCwgcmVmZXJlbmNlVGV4dCwgbGFuZywgaWQsIGJvb2ssIGNoYXB0ZXIsIHZlcnNlXSA9IHJjTWF0Y2g7XG4gICAgY29uc3QgW3ByZVJlZmVyZW5jZSwgcG9zdFJlZmVyZW5jZV0gPSBwaHJhc2Uuc3BsaXQod2hvbGVNYXRjaCk7XG4gICAgY29uc3QgdG9vbHRpcExhYmVsID0gZ2V0U2NyaXB0dXJlRnJvbVJlZmVyZW5jZShsYW5nLCBpZCwgYm9vaywgY2hhcHRlciwgdmVyc2UpO1xuICAgIHJldHVybiAoXG4gICAgICA8ZGl2PlxuICAgICAgICA8c3BhbiBkYW5nZXJvdXNseVNldElubmVySFRNTD17eyBfX2h0bWw6IHByZVJlZmVyZW5jZSB9fS8+XG4gICAgICAgIDxzcGFuIG9uTW91c2VFbnRlcj17KCkgPT4ge1xuICAgICAgICAgIGNvbnN0IHsgdG9wLCBsZWZ0IH0gPSBnZXRPZmZzZXQoc2NyaXB0dXJlUmVmKTtcbiAgICAgICAgICB0b29sdGlwUmVmLnN0eWxlLnRvcCA9IGAke3RvcH1weGA7XG4gICAgICAgICAgdG9vbHRpcFJlZi5zdHlsZS5sZWZ0ID0gYCR7bGVmdH1weGA7XG4gICAgICAgICAgdG9vbHRpcFJlZi5zdHlsZS53aWR0aCA9IGAke3NjcmlwdHVyZVJlZi5vZmZzZXRXaWR0aH1weGA7XG4gICAgICAgICAgdG9vbHRpcFJlZi5zdHlsZS5oZWlnaHQgPSBgJHtzY3JpcHR1cmVSZWYub2Zmc2V0SGVpZ2h0fXB4YDtcbiAgICAgICAgfX0gc3R5bGU9e3sgcG9zaXRpb246ICdyZWxhdGl2ZScgfX0+XG4gICAgICAgICAgPGRpdiByZWY9eyhyZWYpID0+IHRvb2x0aXBSZWYgPSByZWZ9XG4gICAgICAgICAgICBhcmlhLWxhYmVsPXt0b29sdGlwTGFiZWx9XG4gICAgICAgICAgICBjbGFzc05hbWU9XCJoaW50LS10b3AgaGludC0tbWVkaXVtXCJcbiAgICAgICAgICAgIHN0eWxlPXt7IHBvc2l0aW9uOiAnZml4ZWQnIH19Lz5cbiAgICAgICAgICA8c3BhbiBzdHlsZT17e1xuICAgICAgICAgICAgd2hpdGVTcGFjZTogJ25vd3JhcCcsXG4gICAgICAgICAgICB0ZXh0RGVjb3JhdGlvbjogJ3VuZGVybGluZScsXG4gICAgICAgICAgfX0gcmVmPXsocmVmKSA9PiBzY3JpcHR1cmVSZWYgPSByZWZ9PlxuICAgICAgICAgICAge3JlZmVyZW5jZVRleHR9XG4gICAgICAgICAgPC9zcGFuPlxuICAgICAgICA8L3NwYW4+XG4gICAgICAgIDxzcGFuIHJlZj17dG9vbFRpcHBlZFBocmFzZUVsfSBzdHlsZT17eyBjb2xvcjogJyNmZmYnIH19XG4gICAgICAgICAgZGFuZ2Vyb3VzbHlTZXRJbm5lckhUTUw9e3sgX19odG1sOiBtYXJrZWQocG9zdFJlZmVyZW5jZSkgfX0vPlxuICAgICAgPC9kaXY+XG4gICAgKTtcbiAgfSBlbHNlIHtcbiAgICByZXR1cm4gKFxuICAgICAgPGRpdiByZWY9e3BocmFzZUVsfSBzdHlsZT17eyBjb2xvcjogJyNmZmYnIH19IGRhbmdlcm91c2x5U2V0SW5uZXJIVE1MPXt7IF9faHRtbDogbWFya2VkKHBocmFzZSkgfX0vPlxuICAgICk7XG4gIH1cbn1cblxuZXhwb3J0IGRlZmF1bHQgUGhyYXNlV2l0aFRvb2xUaXA7XG4iXX0=