Merge pull request #627 from Adamant-im/feat/hook-is-mobile-reactive

feat: hook isMobile

src/components/EmojiPicker.vue

@@ -15,7 +15,7 @@ import { useTheme } from '@/hooks/useTheme'
 import axios from 'axios'
 import { defineComponent, onMounted, PropType, ref } from 'vue'
 import { Picker } from 'emoji-mart'
-import { isMobile } from '@/lib/display-mobile'
+import { useIsMobile } from '@/hooks/useIsMobile'
 
 const className = 'emoji-picker'
 const classes = {
@@ -34,6 +34,7 @@ export default defineComponent({
   },
   emits: ['emoji:select'],
   setup(props, { emit }) {
+    const isMobile = useIsMobile()
     const { isDarkTheme } = useTheme()
     const container = ref<HTMLElement>()
     const picker = ref<Picker>()
@@ -43,7 +44,7 @@ export default defineComponent({
 
       picker.value = new Picker({
         data,
-        autoFocus: !isMobile(), // disable autofocus on mobile devices
+        autoFocus: !isMobile.value, // disable autofocus on mobile devices
         dynamicWidth: true,
         navPosition: 'none',
         previewPosition: 'none',

src/hooks/useIsMobile.ts

@@ -0,0 +1,30 @@
+import { detect } from 'detect-browser'
+import { ref, onMounted, onUnmounted } from 'vue'
+
+export function useIsMobile() {
+  const isMobile = ref(false)
+
+  const checkIsMobile = () => {
+    const browser = detect()
+    const isMobileDevice =
+      browser && browser.os
+        ? ['android os', 'ios', 'blackberry os'].includes(browser.os.toLowerCase())
+        : false
+    return isMobileDevice || window.innerWidth < 450
+  }
+
+  const handleResize = () => {
+    isMobile.value = checkIsMobile()
+  }
+
+  onMounted(() => {
+    isMobile.value = checkIsMobile()
+    window.addEventListener('resize', handleResize)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', handleResize)
+  })
+
+  return isMobile
+}