fix: remove window

tangjinzhou · tangjinzhou · commit 65fc82e105a9 · 2021-11-29T17:53:09.000+08:00
diff --git a/components/_util/css-animation/Event.js b/components/_util/css-animation/Event.js
@@ -87,7 +87,7 @@ const TransitionEvents = {
 
   addStartEventListener(node, eventListener) {
     if (startEvents.length === 0) {
-      window.setTimeout(eventListener, 0);
+      setTimeout(eventListener, 0);
       return;
     }
     startEvents.forEach(startEvent => {
@@ -109,7 +109,7 @@ const TransitionEvents = {
 
   addEndEventListener(node, eventListener) {
     if (endEvents.length === 0) {
-      window.setTimeout(eventListener, 0);
+      setTimeout(eventListener, 0);
       return;
     }
     endEvents.forEach(endEvent => {
diff --git a/components/_util/css-animation/index.js b/components/_util/css-animation/index.js
@@ -3,6 +3,7 @@
 import Event from './Event';
 import classes from '../component-classes';
 import { requestAnimationTimeout, cancelAnimationTimeout } from '../requestAnimationTimeout';
+import { inBrowser } from '../env';
 
 const isCssAnimationSupported = Event.endEvents.length !== 0;
 const capitalPrefixes = [
@@ -15,6 +16,7 @@ const capitalPrefixes = [
 const prefixes = ['-webkit-', '-moz-', '-o-', 'ms-', ''];
 
 function getStyleProperty(node, name) {
+  if (inBrowser) return '';
   // old ff need null, https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
   const style = window.getComputedStyle(node, null);
   let ret = '';
diff --git a/components/_util/dom-closest.js b/components/_util/dom-closest.js
diff --git a/components/_util/dom-matches.js b/components/_util/dom-matches.js
diff --git a/components/_util/transition.tsx b/components/_util/transition.tsx
@@ -147,7 +147,7 @@ const collapseMotion = (style: Ref<CSSProperties>, className: Ref<string>): CSSM
       style.value = getCurrentHeight(node);
     },
     onLeave: node => {
-      window.setTimeout(() => {
+      setTimeout(() => {
         style.value = getCollapsedHeight(node);
       });
     },
diff --git a/components/_util/wave.jsx b/components/_util/wave.jsx
@@ -129,7 +129,7 @@ export default defineComponent({
           getComputedStyle(node).getPropertyValue('border-top-color') || // Firefox Compatible
           getComputedStyle(node).getPropertyValue('border-color') ||
           getComputedStyle(node).getPropertyValue('background-color');
-        this.clickWaveTimeoutId = window.setTimeout(() => this.onClick(node, waveColor), 0);
+        this.clickWaveTimeoutId = setTimeout(() => this.onClick(node, waveColor), 0);
         raf.cancel(this.animationStartId);
         this.animationStart = true;
 
diff --git a/components/button/button.tsx b/components/button/button.tsx
@@ -60,7 +60,7 @@ export default defineComponent({
       val => {
         clearTimeout(delayTimeoutRef.value);
         if (typeof loadingOrDelay.value === 'number') {
-          delayTimeoutRef.value = window.setTimeout(() => {
+          delayTimeoutRef.value = setTimeout(() => {
             innerLoading.value = val;
           }, loadingOrDelay.value);
         } else {
diff --git a/components/form/ErrorList.tsx b/components/form/ErrorList.tsx
@@ -24,14 +24,14 @@ export default defineComponent({
     const timeout = ref();
     const cacheErrors = ref([...props.errors]);
     watch([() => [...props.errors], () => props.help], newValues => {
-      window.clearTimeout(timeout.value);
+      clearTimeout(timeout.value);
       if (props.help) {
         visible.value = !!(props.errors && props.errors.length);
         if (visible.value) {
           cacheErrors.value = newValues[0];
         }
       } else {
-        timeout.value = window.setTimeout(() => {
+        timeout.value = setTimeout(() => {
           visible.value = !!(props.errors && props.errors.length);
           if (visible.value) {
             cacheErrors.value = newValues[0];
@@ -40,7 +40,7 @@ export default defineComponent({
       }
     });
     onBeforeUnmount(() => {
-      window.clearTimeout(timeout.value);
+      clearTimeout(timeout.value);
     });
     // Memo status in same visible
     watch([visible, status], () => {
diff --git a/components/menu/src/Menu.tsx b/components/menu/src/Menu.tsx
@@ -214,10 +214,10 @@ export default defineComponent({
       { immediate: true },
     );
 
-    let timeout: number;
+    let timeout: any;
     const changeActiveKeys = (keys: Key[]) => {
-      window.clearTimeout(timeout);
-      timeout = window.setTimeout(() => {
+      clearTimeout(timeout);
+      timeout = setTimeout(() => {
         if (props.activeKey === undefined) {
           activeKeys.value = keys;
         }
diff --git a/components/statistic/Countdown.tsx b/components/statistic/Countdown.tsx
@@ -17,7 +17,7 @@ export default defineComponent({
   }),
   emits: ['finish', 'change'],
   setup(props, { emit }) {
-    const countdownId = ref<number>();
+    const countdownId = ref<any>();
     const statistic = ref();
     const syncTimer = () => {
       const { value } = props;
@@ -32,7 +32,7 @@ export default defineComponent({
     const startTimer = () => {
       if (countdownId.value) return;
       const timestamp = getTime(props.value);
-      countdownId.value = window.setInterval(() => {
+      countdownId.value = setInterval(() => {
         statistic.value.$forceUpdate();
         if (timestamp > Date.now()) {
           emit('change', timestamp - Date.now());
diff --git a/components/table/hooks/useFilter/FilterDropdown.tsx b/components/table/hooks/useFilter/FilterDropdown.tsx
@@ -181,16 +181,16 @@ export default defineComponent<FilterDropdownProps<any>>({
     const openRef = ref();
 
     const onOpenChange = (keys: string[]) => {
-      openRef.value = window.setTimeout(() => {
+      openRef.value = setTimeout(() => {
         openKeys.value = keys;
       });
     };
     const onMenuClick = () => {
-      window.clearTimeout(openRef.value);
+      clearTimeout(openRef.value);
     };
 
     onBeforeUnmount(() => {
-      window.clearTimeout(openRef.value);
+      clearTimeout(openRef.value);
     });
 
     // ======================= Submit ========================
diff --git a/components/tabs/src/TabNavList/index.tsx b/components/tabs/src/TabNavList/index.tsx
@@ -129,15 +129,15 @@ export default defineComponent({
     };
 
     // ========================= Mobile ========================
-    const touchMovingRef = ref<number>();
+    const touchMovingRef = ref<any>();
     const [lockAnimation, setLockAnimation] = useState<number>();
 
     const doLockAnimation = () => {
       setLockAnimation(Date.now());
     };
 
     const clearTouchMoving = () => {
-      window.clearTimeout(touchMovingRef.value);
+      clearTimeout(touchMovingRef.value);
     };
     const doMove = (setState: (fn: (val: number) => number) => void, offset: number) => {
       setState((value: number) => {
@@ -171,7 +171,7 @@ export default defineComponent({
     watch(lockAnimation, () => {
       clearTouchMoving();
       if (lockAnimation.value) {
-        touchMovingRef.value = window.setTimeout(() => {
+        touchMovingRef.value = setTimeout(() => {
           setLockAnimation(0);
         }, 100);
       }
diff --git a/components/tabs/src/hooks/useTouchMove.ts b/components/tabs/src/hooks/useTouchMove.ts
@@ -18,14 +18,14 @@ export default function useTouchMove(
   const [lastTimestamp, setLastTimestamp] = useState<number>(0);
   const [lastTimeDiff, setLastTimeDiff] = useState<number>(0);
   const [lastOffset, setLastOffset] = useState<{ x: number; y: number }>();
-  const motionRef = ref<number>();
+  const motionInterval = ref<any>();
 
   // ========================= Events =========================
   // >>> Touch events
   function onTouchStart(e: TouchEvent) {
     const { screenX, screenY } = e.touches[0];
     setTouchPosition({ x: screenX, y: screenY });
-    window.clearInterval(motionRef.value);
+    clearInterval(motionInterval.value);
   }
 
   function onTouchMove(e: TouchEvent) {
@@ -62,9 +62,9 @@ export default function useTouchMove(
       let currentX = distanceX;
       let currentY = distanceY;
 
-      motionRef.value = window.setInterval(() => {
+      motionInterval.value = setInterval(() => {
         if (Math.abs(currentX) < STOP_SWIPE_DISTANCE && Math.abs(currentY) < STOP_SWIPE_DISTANCE) {
-          window.clearInterval(motionRef.value);
+          clearInterval(motionInterval.value);
           return;
         }
 
diff --git a/components/typography/Base.tsx b/components/typography/Base.tsx
@@ -139,7 +139,7 @@ const Base = defineComponent<InternalBlockProps>({
     });
 
     onBeforeUnmount(() => {
-      window.clearTimeout(state.copyId);
+      clearTimeout(state.copyId);
       raf.cancel(state.rafId);
     });
 
@@ -223,7 +223,7 @@ const Base = defineComponent<InternalBlockProps>({
           copyConfig.onCopy();
         }
 
-        state.copyId = window.setTimeout(() => {
+        state.copyId = setTimeout(() => {
           state.copied = false;
         }, 3000);
       });
diff --git a/components/vc-align/hooks/useBuffer.tsx b/components/vc-align/hooks/useBuffer.tsx
@@ -5,7 +5,7 @@ export default (callback: () => boolean, buffer: ComputedRef<number>) => {
   let timeout = null;
 
   function cancelTrigger() {
-    window.clearTimeout(timeout);
+    clearTimeout(timeout);
   }
 
   function trigger(force?: boolean) {
@@ -17,12 +17,12 @@ export default (callback: () => boolean, buffer: ComputedRef<number>) => {
 
       called = true;
       cancelTrigger();
-      timeout = window.setTimeout(() => {
+      timeout = setTimeout(() => {
         called = false;
       }, buffer.value);
     } else {
       cancelTrigger();
-      timeout = window.setTimeout(() => {
+      timeout = setTimeout(() => {
         called = false;
         trigger();
       }, buffer.value);
diff --git a/components/vc-mentions/src/Mentions.tsx b/components/vc-mentions/src/Mentions.tsx
@@ -173,15 +173,15 @@ export default defineComponent({
       onBlur(event);
     };
     const onFocus = (event: Event) => {
-      window.clearTimeout(focusId.value);
+      clearTimeout(focusId.value);
       const { isFocus } = state;
       if (!isFocus && event) {
         emit('focus', event);
       }
       state.isFocus = true;
     };
     const onBlur = (event: Event) => {
-      focusId.value = window.setTimeout(() => {
+      focusId.value = setTimeout(() => {
         state.isFocus = false;
         stopMeasure();
         emit('blur', event);
diff --git a/components/vc-picker/RangePicker.tsx b/components/vc-picker/RangePicker.tsx
@@ -395,7 +395,7 @@ function RangerPicker<DateType>() {
       function triggerOpenAndFocus(index: 0 | 1) {
         triggerOpen(true, index);
         // Use setTimeout to make sure panel DOM exists
-        window.setTimeout(() => {
+        setTimeout(() => {
           const inputRef = [startInputRef, endInputRef][index];
           if (inputRef.value) {
             inputRef.value.focus();
diff --git a/components/vc-select/hooks/useDelayReset.ts b/components/vc-select/hooks/useDelayReset.ts
@@ -9,18 +9,18 @@ export default function useDelayReset(
   timeout = 10,
 ): [Ref<Boolean>, (val: boolean, callback?: () => void) => void, () => void] {
   const bool = ref(false);
-  let delay: number;
+  let delay: any;
 
   const cancelLatest = () => {
-    window.clearTimeout(delay);
+    clearTimeout(delay);
   };
 
   onMounted(() => {
     cancelLatest();
   });
   const delaySetBool = (value: boolean, callback: () => void) => {
     cancelLatest();
-    delay = window.setTimeout(() => {
+    delay = setTimeout(() => {
       bool.value = value;
       if (callback) {
         callback();
diff --git a/components/vc-select/hooks/useLock.ts b/components/vc-select/hooks/useLock.ts
@@ -8,19 +8,19 @@ import { onBeforeUpdate } from 'vue';
  */
 export default function useLock(duration = 250): [() => boolean | null, (lock: boolean) => void] {
   let lock: boolean | null = null;
-  let timeout: number;
+  let timeout: any;
 
   onBeforeUpdate(() => {
-    window.clearTimeout(timeout);
+    clearTimeout(timeout);
   });
 
   function doLock(locked: boolean) {
     if (locked || lock === null) {
       lock = locked;
     }
 
-    window.clearTimeout(timeout);
-    timeout = window.setTimeout(() => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
       lock = null;
     }, duration);
   }
diff --git a/components/vc-table/hooks/useFrame.ts b/components/vc-table/hooks/useFrame.ts
diff --git a/site/src/components/DemoBox.vue b/site/src/components/DemoBox.vue
