@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
95 lines (94 loc) • 2.47 kB
JavaScript
import { findShortCodes as i, findEmojis as a } from "../../common/emoji/index.js";
import { ICON_SIZE_MODIFIERS as c } from "../icon/icon-constants.js";
import { n as p } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import o from "../emoji/emoji.js";
const m = {
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(c).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, t) {
if (!e.length) return t;
const s = e.map(
(r) => r.replace(/\*/g, "\\*")
), n = new RegExp(`(${s.join("|")})`, "g");
return t.split(n).filter((r) => r.trim() !== "").map((r) => e.includes(r) ? this.$createElement(o, {
props: { code: r, size: this.size }
}) : this.$createElement("span", { class: "d-emoji-text-wrapper__text" }, r));
},
/**
* Recursively search the Vue virtual DOM to find text
* @param VNode
* @returns {VNode|*}
*/
searchVNodes(e) {
if (!e.tag && e.text)
return this.searchCodes(e.text);
const t = e.children ? e.children.map((s) => this.searchVNodes(s)) : [];
return this.$createElement(e.tag, e.data, t);
},
// TODO: Find a way to crawl vue components
replaceVueComponentVNodeContent() {
},
/**
* Find codes in text.
* @param textContent string
* @returns {Array<VNode|string>|string}
*/
searchCodes(e) {
const t = i(e), s = a(e), n = [...t, ...s];
return this.replaceDtEmojis(n, e);
}
},
render(e) {
const t = this.$slots.default || [];
return e(
this.elementType,
{
"data-qa": "emoji-text-wrapper",
class: "d-emoji-text-wrapper"
},
this.loadingEmojiJson ? t : t.map((s) => this.searchVNodes(s))
);
}
}, l = null, d = null;
var h = /* @__PURE__ */ p(
m,
l,
d
);
const g = h.exports;
export {
g as default
};
//# sourceMappingURL=emoji-text-wrapper.js.map