@dialpad/dialtone/dist/vue3/components/emoji_picker/modules/emoji_skin_selector.vue.js

Dialpad's Dialtone design system monorepo

import { ref, watchEffect, computed, openBlock, createElementBlock, withDirectives, createElementVNode, Fragment, renderList, normalizeClass, unref, vShow, createVNode, withCtx, createTextVNode, toDisplayString, nextTick } from "vue";
import { CDN_URL, EMOJI_PICKER_SKIN_TONE_MODIFIERS } from "../emoji_picker_constants.js";
import DtTooltip from "../../tooltip/tooltip.vue.js";
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_SKIN_TONE_MODIFIERS.LIGHT,
        skinCode: "_tone1"
      },
      {
        name: ":wave_tone2:",
        unicode_output: "1f44b-1f3fc",
        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_LIGHT,
        skinCode: "_tone2"
      },
      {
        name: ":wave_tone3:",
        unicode_output: "1f44b-1f3fd",
        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM,
        skinCode: "_tone3"
      },
      {
        name: ":wave_tone4:",
        unicode_output: "1f44b-1f3fe",
        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_DARK,
        skinCode: "_tone4"
      },
      {
        name: ":wave_tone5:",
        unicode_output: "1f44b-1f3ff",
        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DARK,
        skinCode: "_tone5"
      },
      {
        name: ":wave:",
        unicode_output: "1f44b",
        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DEFAULT,
        skinCode: ""
      }
    ];
    const isOpen = ref(false);
    const skinSelectorRef = ref(null);
    const skinsRef = ref([]);
    watchEffect(
      () => props.isHovering && (isOpen.value = false)
    );
    const skinPassedIn = computed(() => skinList.find((skin) => skin.skinTone === props.skinTone));
    const skinSelected = ref(skinPassedIn.value);
    watchEffect(() => skinPassedIn.value && (skinSelected.value = skinPassedIn.value));
    function setSkinsRef(ref2) {
      skinsRef.value.push(ref2);
    }
    function focusSkinSelector() {
      skinSelectorRef.value.focus();
    }
    function selectSkin(skin) {
      skinSelected.value = skin;
      isOpen.value = false;
      emits("skin-tone", skin.skinTone);
      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;
      nextTick(() => skinsRef.value[0].focus());
    }
    __expose({
      focusSkinSelector
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1, [
        withDirectives(createElementVNode("div", _hoisted_2, [
          (openBlock(), createElementBlock(Fragment, null, renderList(skinList, (skin, index) => {
            return createElementVNode("button", {
              ref_for: true,
              ref: (el) => {
                if (el) setSkinsRef(el);
              },
              key: skin.name,
              class: normalizeClass({
                "selected": skinSelected.value.skinCode === skin.skinCode
              }),
              onKeydown: (event) => handleKeyDown(event, skin, index),
              onClick: ($event) => selectSkin(skin)
            }, [
              createElementVNode("img", {
                class: "d-icon d-icon--size-500",
                alt: skin.name,
                "aria-label": skin.name,
                title: skin.name,
                src: `${unref(CDN_URL) + skin.unicode_output}.png`
              }, null, 8, _hoisted_4)
            ], 42, _hoisted_3);
          }), 64))
        ], 512), [
          [vShow, isOpen.value]
        ]),
        withDirectives(createElementVNode("div", _hoisted_5, [
          createVNode(unref(DtTooltip), { placement: "top-end" }, {
            anchor: withCtx(() => [
              createElementVNode("button", {
                ref_key: "skinSelectorRef",
                ref: skinSelectorRef,
                "aria-label": __props.skinSelectorButtonTooltipLabel,
                tabindex: "-1",
                onClick: toggleSkinList,
                onKeydown: _cache[0] || (_cache[0] = (event) => handleKeyDown(event))
              }, [
                createElementVNode("img", {
                  class: "d-icon d-icon--size-500",
                  alt: skinSelected.value.name,
                  "aria-label": skinSelected.value.name,
                  title: skinSelected.value.name,
                  src: `${unref(CDN_URL) + skinSelected.value.unicode_output}.png`
                }, null, 8, _hoisted_7)
              ], 40, _hoisted_6)
            ]),
            default: withCtx(() => [
              createTextVNode(toDisplayString(__props.skinSelectorButtonTooltipLabel) + " ", 1)
            ]),
            _: 1
          })
        ], 512), [
          [vShow, !isOpen.value]
        ])
      ]);
    };
  }
};
export {
  _sfc_main as default
};
//# sourceMappingURL=emoji_skin_selector.vue.js.map