@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
107 lines (106 loc) • 3.18 kB
JavaScript
import { findShortCodes, findEmojis } from "../../common/emoji.js";
import { ICON_SIZE_MODIFIERS } from "../icon/icon_constants.js";
import normalizeComponent from "../../_virtual/_plugin-vue2_normalizer.js";
import DtEmoji from "../emoji/emoji.vue.js";
const _sfc_main = {
name: "DtEmojiTextWrapper",
components: {
DtEmoji
},
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: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t)
}
},
data() {
return {
loadingEmojiJson: true
};
},
async created() {
this.loadingEmojiJson = false;
},
methods: {
/**
* Replaces the valid codes from the text content with a DtEmoji component.
* @returns {Array<VNode|string>}
*/
replaceDtEmojis(replaceList, textContent) {
if (!replaceList.length) return textContent;
const escapedReplaceList = replaceList.map(
(item) => item.replace(/\*/g, "\\*")
);
const regexp = new RegExp(`(${escapedReplaceList.join("|")})`, "g");
const items = textContent.split(regexp);
return items.filter((item) => item.trim() !== "").map((item) => {
if (replaceList.includes(item)) {
return this.$createElement(DtEmoji, {
props: { code: item, size: this.size }
});
}
return this.$createElement("span", { class: "d-emoji-text-wrapper__text" }, item);
});
},
/**
* Recursively search the Vue virtual DOM to find text
* @param VNode
* @returns {VNode|*}
*/
searchVNodes(VNode) {
if (!VNode.tag && VNode.text) {
return this.searchCodes(VNode.text);
}
const children = VNode.children ? VNode.children.map((VNodeChild) => this.searchVNodes(VNodeChild)) : [];
return this.$createElement(VNode.tag, VNode.data, children);
},
// TODO: Find a way to crawl vue components
replaceVueComponentVNodeContent(VNode) {
},
/**
* Find codes in text.
* @param textContent string
* @returns {Array<VNode|string>|string}
*/
searchCodes(textContent) {
const shortcodes = findShortCodes(textContent);
const emojis = findEmojis(textContent);
const replaceList = [...shortcodes, ...emojis];
return this.replaceDtEmojis(replaceList, textContent);
}
},
render(h) {
const defaultSlotContent = this.$slots.default || [];
return h(
this.elementType,
{
"data-qa": "emoji-text-wrapper",
class: "d-emoji-text-wrapper"
},
this.loadingEmojiJson ? defaultSlotContent : defaultSlotContent.map((VNode) => this.searchVNodes(VNode))
);
}
};
const _sfc_render = null;
const _sfc_staticRenderFns = null;
var __component__ = /* @__PURE__ */ normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const DtEmojiTextWrapper = __component__.exports;
export {
DtEmojiTextWrapper as default
};
//# sourceMappingURL=emoji_text_wrapper.vue.js.map