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

Vue component library for Dialpad's design system Dialtone

import DtTooltip from "../../tooltip/tooltip.vue.js";
import { CDN_URL, EMOJI_PICKER_SKIN_TONE_MODIFIERS } from "../emoji_picker_constants.js";
import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
const _sfc_main = {
  name: "EmojiSkinSelector",
  components: {
    DtTooltip
  },
  props: {
    skinTone: {
      type: String,
      required: true
    },
    isHovering: {
      type: Boolean,
      default: false
    },
    skinSelectorButtonTooltipLabel: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      isOpen: false,
      skinSelected: null,
      skinsRef: [],
      cdnUrl: CDN_URL
    };
  },
  computed: {
    skinPassedIn() {
      return this.skinList.find((skin) => skin.skinTone === this.skinTone);
    },
    skinList() {
      return [
        {
          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: ""
        }
      ];
    }
  },
  watch: {
    isHovering(newVal) {
      if (newVal) {
        this.isOpen = false;
      }
    },
    skinTone(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.skinSelected = this.skinPassedIn;
      }
    }
  },
  mounted() {
    this.skinSelected = this.skinPassedIn;
    this.$nextTick(() => {
      this.setupSkinRefs();
    });
  },
  methods: {
    setupSkinRefs() {
      this.skinList.forEach((skin, index) => {
        const refKey = `skinRef-${index}`;
        if (this.$refs[refKey]) {
          this.$set(this.skinsRef, index, this.$refs[refKey][0]);
        }
      });
    },
    focusSkinSelector() {
      if (this.$refs.skinSelectorRef) {
        this.$refs.skinSelectorRef.focus();
      }
    },
    selectSkin(skin) {
      this.skinSelected = skin;
      this.isOpen = false;
      this.$emit("skin-tone", skin.skinTone);
      this.$nextTick(() => {
        this.focusSkinSelector();
      });
    },
    handleKeyDown(event, skin, index) {
      var _a, _b, _c, _d;
      event.preventDefault();
      if (event.key === "ArrowLeft") {
        if (index === 0) (_a = this.skinsRef[this.skinsRef.length - 1]) == null ? void 0 : _a.focus();
        (_b = this.skinsRef[index - 1]) == null ? void 0 : _b.focus();
      }
      if (event.key === "ArrowRight") {
        if (this.skinsRef.length) (_c = this.skinsRef[0]) == null ? void 0 : _c.focus();
        (_d = this.skinsRef[index + 1]) == null ? void 0 : _d.focus();
      }
      if (event.key === "Enter") {
        if (skin) {
          this.selectSkin(skin);
        } else {
          this.toggleSkinList();
        }
      }
      if (event.key === "Tab") {
        if (event.shiftKey) {
          this.$emit("focus-last-emoji");
        } else {
          this.$emit("focus-tabset");
        }
      }
    },
    toggleSkinList() {
      this.isOpen = !this.isOpen;
      this.$nextTick(() => {
        if (this.skinsRef[0]) {
          this.skinsRef[0].focus();
        }
      });
    }
  }
};
var _sfc_render = function render() {
  var _vm = this, _c = _vm._self._c;
  return _c("div", { attrs: { "data-qa": "skin-selector" } }, [_c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.isOpen, expression: "isOpen" }], staticClass: "d-emoji-picker__skin-list" }, _vm._l(_vm.skinList, function(skin, index) {
    var _a;
    return _c("button", { key: skin.name, ref: `skinRef-${index}`, refInFor: true, class: {
      "selected": ((_a = _vm.skinSelected) == null ? void 0 : _a.skinCode) === skin.skinCode
    }, on: { "click": function($event) {
      return _vm.selectSkin(skin);
    }, "keydown": (event) => _vm.handleKeyDown(event, skin, index) } }, [_c("img", { staticClass: "d-icon d-icon--size-500", attrs: { "alt": skin.name, "aria-label": skin.name, "title": skin.name, "src": `${_vm.cdnUrl + skin.unicode_output}.png` } })]);
  }), 0), _c("div", { directives: [{ name: "show", rawName: "v-show", value: !_vm.isOpen, expression: "!isOpen" }], staticClass: "d-emoji-picker__skin-selected" }, [_c("dt-tooltip", { attrs: { "placement": "top-end" }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
    var _a, _b, _c2, _d;
    return [_c("button", { ref: "skinSelectorRef", attrs: { "aria-label": _vm.skinSelectorButtonTooltipLabel, "tabindex": "-1" }, on: { "click": _vm.toggleSkinList, "keydown": (event) => _vm.handleKeyDown(event) } }, [_c("img", { staticClass: "d-icon d-icon--size-500", attrs: { "alt": (_a = _vm.skinSelected) == null ? void 0 : _a.name, "aria-label": (_b = _vm.skinSelected) == null ? void 0 : _b.name, "title": (_c2 = _vm.skinSelected) == null ? void 0 : _c2.name, "src": `${_vm.cdnUrl + ((_d = _vm.skinSelected) == null ? void 0 : _d.unicode_output)}.png` } })])];
  }, proxy: true }]) }, [_vm._v(" " + _vm._s(_vm.skinSelectorButtonTooltipLabel) + " ")])], 1)]);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
  _sfc_main,
  _sfc_render,
  _sfc_staticRenderFns
);
const EmojiSkinSelector = __component__.exports;
export {
  EmojiSkinSelector as default
};
//# sourceMappingURL=emoji_skin_selector.vue.js.map