feat(hooks): add useTimeout hook

u3u · u3u · commit 61db9815dbe8 · 2019-08-07T22:04:17.000+08:00
diff --git a/src/__tests__/useTimeout.test.ts b/src/__tests__/useTimeout.test.ts
@@ -0,0 +1,29 @@
+import { onMounted, onUnmounted } from 'vue-function-api';
+import { useTimeout } from '..';
+import renderHook from '../util/renderHook';
+
+describe('useTimeout', () => {
+  it('should be defined', () => {
+    expect(useTimeout).toBeDefined();
+  });
+
+  it('should return true after 3000ms', () => {
+    const { vm } = renderHook<unknown>(() => {
+      jest.useFakeTimers();
+      const ready = useTimeout(3000);
+      expect(ready.value).toBe(false);
+
+      onMounted(() => {
+        expect(jest.getTimerCount()).toBe(1);
+        jest.runOnlyPendingTimers();
+        expect(ready.value).toBe(true);
+      });
+
+      onUnmounted(() => {
+        expect(jest.getTimerCount()).toBe(0);
+      });
+    });
+
+    vm.$destroy();
+  });
+});
diff --git a/src/index.ts b/src/index.ts
@@ -14,6 +14,7 @@ export { default as useActions } from './useActions';
 export { default as useRouter } from './useRouter';
 export { default as useRef } from './useRef';
 export { default as useMountedState } from './useMountedState';
+export { default as useTimeout } from './useTimeout';
 
 export default function install(Vue: VueConstructor) {
   Vue.mixin({ beforeCreate: setRuntimeVM });
diff --git a/src/useTimeout.ts b/src/useTimeout.ts
@@ -0,0 +1,18 @@
+import { value, onMounted, onUnmounted } from 'vue-function-api';
+
+export default function useTimeout(delay = 0) {
+  const ready = value(false);
+  let timerId: number;
+
+  onMounted(() => {
+    timerId = window.setTimeout(() => {
+      ready.value = true;
+    }, delay);
+  });
+
+  onUnmounted(() => {
+    window.clearTimeout(timerId);
+  });
+
+  return ready;
+}
