@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
91 lines (90 loc) • 2.63 kB
JavaScript
import { findShortCodes as a, findEmojis as p } from "../../common/emoji/index.js";
import { h as n, resolveDynamicComponent as c } from "vue";
import { ICON_SIZE_MODIFIERS as l } from "../icon/icon-constants.js";
import o from "../emoji/emoji.js";
const m = n(c(null)).type, j = {
compatConfig: { MODE: 3 },
name: "DtEmojiTextWrapper",
components: {
DtEmoji: o
},
props: {
/**
* Element type (tag name) to use for the wrapper.
*/
elementType: {
type: String,
default: "div"
},
/**
* The icon size to render the emojis at: 100 to 800
*/
size: {
type: String,
default: "500",
validator: (e) => Object.keys(l).includes(e)
}
},
data() {
return {
loadingEmojiJson: !0
};
},
async created() {
this.loadingEmojiJson = !1;
},
methods: {
/**
* Replaces the valid codes from the text content with a DtEmoji component.
* @returns {Array<VNode|string>}
*/
replaceDtEmojis(e, r) {
if (!e.length) return r;
const s = e.map(
(t) => t.replace(/\*/g, "\\*")
), i = new RegExp(`(${s.join("|")})`, "g");
return r.split(i).filter((t) => t.trim() !== "").map((t) => e.includes(t) ? n(o, { code: t, size: this.size }) : n("span", { class: "d-emoji-text-wrapper__text" }, t));
},
/**
* Recursively search the Vue virtual DOM to find text
* @param VNode
* @returns {VNode|*}
*/
searchVNodes(e) {
var s;
if (typeof e == "string") return this.searchCodes(e);
if (e.type === m) return e;
if (typeof e.type == "symbol") return this.searchCodes(e.children);
if ((s = e.props) != null && s.innerHTML) return this.searchVNodes(e.props.innerHTML);
const r = Array.isArray(e.children) ? e.children : [e.children];
return n(e.type, e.props, r.map((i) => this.searchVNodes(i)));
},
// TODO: Find a way to crawl vue components
replaceVueComponentVNodeContent() {
},
/**
* Find codes in text.
* @param textContent string
* @returns {Array<VNode|string>|string}
*/
searchCodes(e) {
const r = a(e), s = p(e), i = [...r, ...s];
return i.length === 0 ? e : this.replaceDtEmojis(i, e);
}
},
render() {
const e = this.$slots.default ? this.$slots.default() : [];
return n(
this.elementType,
{
"data-qa": "emoji-text-wrapper",
class: "d-emoji-text-wrapper"
},
this.loadingEmojiJson ? e : e.map((r) => this.searchVNodes(r))
);
}
};
export {
j as default
};
//# sourceMappingURL=emoji-text-wrapper.js.map