@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
200 lines (199 loc) • 6.85 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const emoji_picker_constants = require("../emoji_picker_constants.cjs");
const tooltip = require("../../tooltip/tooltip.vue.cjs");
const _hoisted_1 = { "data-qa": "skin-selector" };
const _hoisted_2 = { class: "d-emoji-picker__skin-list" };
const _hoisted_3 = ["onKeydown", "onClick"];
const _hoisted_4 = ["alt", "aria-label", "title", "src"];
const _hoisted_5 = { class: "d-emoji-picker__skin-selected" };
const _hoisted_6 = ["aria-label"];
const _hoisted_7 = ["alt", "aria-label", "title", "src"];
const _sfc_main = {
__name: "emoji_skin_selector",
props: {
/**
* The skin tone to apply to the emoji list
* @type {String}
* @required
*/
skinTone: {
type: String,
required: true
},
isHovering: {
type: Boolean,
default: false
},
skinSelectorButtonTooltipLabel: {
type: String,
required: true
}
},
emits: [
/**
* The skin tone that was selected
* @event skin-tone
* @type {Number}
*/
"skin-tone",
"focus-tabset",
"focus-last-emoji"
],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const skinList = [
{
name: ":wave_tone1:",
unicode_output: "1f44b-1f3fb",
skinTone: emoji_picker_constants.EMOJI_PICKER_SKIN_TONE_MODIFIERS.LIGHT,
skinCode: "_tone1"
},
{
name: ":wave_tone2:",
unicode_output: "1f44b-1f3fc",
skinTone: emoji_picker_constants.EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_LIGHT,
skinCode: "_tone2"
},
{
name: ":wave_tone3:",
unicode_output: "1f44b-1f3fd",
skinTone: emoji_picker_constants.EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM,
skinCode: "_tone3"
},
{
name: ":wave_tone4:",
unicode_output: "1f44b-1f3fe",
skinTone: emoji_picker_constants.EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_DARK,
skinCode: "_tone4"
},
{
name: ":wave_tone5:",
unicode_output: "1f44b-1f3ff",
skinTone: emoji_picker_constants.EMOJI_PICKER_SKIN_TONE_MODIFIERS.DARK,
skinCode: "_tone5"
},
{
name: ":wave:",
unicode_output: "1f44b",
skinTone: emoji_picker_constants.EMOJI_PICKER_SKIN_TONE_MODIFIERS.DEFAULT,
skinCode: ""
}
];
const isOpen = vue.ref(false);
const skinSelectorRef = vue.ref(null);
const skinsRef = vue.ref([]);
vue.watchEffect(
() => props.isHovering && (isOpen.value = false)
);
const skinPassedIn = vue.computed(() => skinList.find((skin) => skin.skinTone === props.skinTone));
const skinSelected = vue.ref(skinPassedIn.value);
vue.watchEffect(() => skinPassedIn.value && (skinSelected.value = skinPassedIn.value));
function setSkinsRef(ref) {
skinsRef.value.push(ref);
}
function focusSkinSelector() {
skinSelectorRef.value.focus();
}
function selectSkin(skin) {
skinSelected.value = skin;
isOpen.value = false;
emits("skin-tone", skin.skinTone);
vue.nextTick(() => focusSkinSelector());
}
const handleKeyDown = (event, skin, index) => {
var _a, _b, _c;
event.preventDefault();
if (event.key === "ArrowLeft") {
if (index === 0) (_a = skinsRef.value[skinsRef.value.length - 1]) == null ? void 0 : _a.focus();
(_b = skinsRef.value[index - 1]) == null ? void 0 : _b.focus();
}
if (event.key === "ArrowRight") {
(_c = skinsRef.value[index + 1]) == null ? void 0 : _c.focus();
}
if (event.key === "Enter") {
if (skin) {
selectSkin(skin);
} else {
toggleSkinList();
}
}
if (event.key === "Tab") {
if (event.shiftKey) {
emits("focus-last-emoji");
} else {
emits("focus-tabset");
}
}
};
function toggleSkinList() {
isOpen.value = !isOpen.value;
vue.nextTick(() => skinsRef.value[0].focus());
}
__expose({
focusSkinSelector
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
vue.withDirectives(vue.createElementVNode("div", _hoisted_2, [
(vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(skinList, (skin, index) => {
return vue.createElementVNode("button", {
ref_for: true,
ref: (el) => {
if (el) setSkinsRef(el);
},
key: skin.name,
class: vue.normalizeClass({
"selected": skinSelected.value.skinCode === skin.skinCode
}),
onKeydown: (event) => handleKeyDown(event, skin, index),
onClick: ($event) => selectSkin(skin)
}, [
vue.createElementVNode("img", {
class: "d-icon d-icon--size-500",
alt: skin.name,
"aria-label": skin.name,
title: skin.name,
src: `${vue.unref(emoji_picker_constants.CDN_URL) + skin.unicode_output}.png`
}, null, 8, _hoisted_4)
], 42, _hoisted_3);
}), 64))
], 512), [
[vue.vShow, isOpen.value]
]),
vue.withDirectives(vue.createElementVNode("div", _hoisted_5, [
vue.createVNode(vue.unref(tooltip.default), { placement: "top-end" }, {
anchor: vue.withCtx(() => [
vue.createElementVNode("button", {
ref_key: "skinSelectorRef",
ref: skinSelectorRef,
"aria-label": __props.skinSelectorButtonTooltipLabel,
tabindex: "-1",
onClick: toggleSkinList,
onKeydown: _cache[0] || (_cache[0] = (event) => handleKeyDown(event))
}, [
vue.createElementVNode("img", {
class: "d-icon d-icon--size-500",
alt: skinSelected.value.name,
"aria-label": skinSelected.value.name,
title: skinSelected.value.name,
src: `${vue.unref(emoji_picker_constants.CDN_URL) + skinSelected.value.unicode_output}.png`
}, null, 8, _hoisted_7)
], 40, _hoisted_6)
]),
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(__props.skinSelectorButtonTooltipLabel) + " ", 1)
]),
_: 1
})
], 512), [
[vue.vShow, !isOpen.value]
])
]);
};
}
};
exports.default = _sfc_main;
//# sourceMappingURL=emoji_skin_selector.vue.cjs.map