| /** |
| * Licensed to the Apache Software Foundation (ASF) under one or more |
| * contributor license agreements. See the NOTICE file distributed with |
| * this work for additional information regarding copyright ownership. |
| * The ASF licenses this file to You under the Apache License, Version 2.0 |
| * (the "License"); you may not use this file except in compliance with |
| * the License. You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, software |
| * distributed under the License is distributed on an "AS IS" BASIS, |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| * See the License for the specific language governing permissions and |
| * limitations under the License. |
| */ |
| import { ref, computed, ComputedRef, unref } from "vue"; |
| import { useEventListener } from "./useEventListener"; |
| import { screenMap, sizeEnum, screenEnum } from "./data"; |
| |
| let globalScreenRef: ComputedRef<sizeEnum | undefined>; |
| let globalWidthRef: ComputedRef<number>; |
| let globalRealWidthRef: ComputedRef<number>; |
| |
| export interface CreateCallbackParams { |
| screen: ComputedRef<sizeEnum | undefined>; |
| width: ComputedRef<number>; |
| realWidth: ComputedRef<number>; |
| screenEnum: typeof screenEnum; |
| screenMap: Map<sizeEnum, number>; |
| sizeEnum: typeof sizeEnum; |
| } |
| |
| export function useBreakpoint(): any { |
| return { |
| screenRef: computed(() => unref(globalScreenRef)), |
| widthRef: globalWidthRef, |
| screenEnum, |
| realWidthRef: globalRealWidthRef, |
| }; |
| } |
| |
| export function createBreakpointListen( |
| fn?: (opt: CreateCallbackParams) => void |
| ): any { |
| const screenRef = ref<sizeEnum>(sizeEnum.XL || ""); |
| const realWidthRef = ref(window.innerWidth); |
| |
| function getWindowWidth() { |
| const width = document.body.clientWidth; |
| const xs = screenMap.get(sizeEnum.XS) || ""; |
| const sm = screenMap.get(sizeEnum.SM) || ""; |
| const md = screenMap.get(sizeEnum.MD) || ""; |
| const lg = screenMap.get(sizeEnum.LG) || ""; |
| const xl = screenMap.get(sizeEnum.XL) || ""; |
| if (width < xs) { |
| screenRef.value = sizeEnum.XS; |
| } else if (width < sm) { |
| screenRef.value = sizeEnum.SM; |
| } else if (width < md) { |
| screenRef.value = sizeEnum.MD; |
| } else if (width < lg) { |
| screenRef.value = sizeEnum.LG; |
| } else if (width < xl) { |
| screenRef.value = sizeEnum.XL; |
| } else { |
| screenRef.value = sizeEnum.XXL; |
| } |
| realWidthRef.value = width; |
| } |
| |
| useEventListener({ |
| el: window, |
| name: "resize", |
| |
| listener: () => { |
| getWindowWidth(); |
| resizeFn(); |
| }, |
| // wait: 100, |
| }); |
| |
| getWindowWidth(); |
| globalScreenRef = computed(() => unref(screenRef)); |
| globalWidthRef = computed((): number => screenMap.get(unref(screenRef)) || 0); |
| globalRealWidthRef = computed((): number => unref(realWidthRef)); |
| |
| function resizeFn() { |
| fn?.({ |
| screen: globalScreenRef, |
| width: globalWidthRef, |
| realWidth: globalRealWidthRef, |
| screenEnum, |
| screenMap, |
| sizeEnum, |
| }); |
| } |
| |
| resizeFn(); |
| return { |
| screenRef: globalScreenRef, |
| screenEnum, |
| widthRef: globalWidthRef, |
| realWidthRef: globalRealWidthRef, |
| }; |
| } |