fix: Simplify useTimeout logic

Author: microcipcip

README.md

@@ -70,6 +70,8 @@ Vue.use(VueCompositionAPI);
   - [`useMouseElement`](./src/components/useMouseElement/stories/useMouseElement.md) — tracks the mouse position relative to given element.
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemouseelement--demo)
 - Animations
+  - [`useIntervalFn`](./src/components/useIntervalFn/stories/useIntervalFn.md) — calls function repeatedly on a fixed time delay.
+    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/animations-useintervalfn--demo)
   - [`useRaf`](./src/components/useRaf/stories/useRaf.md) — returns `elapsedTime` with requestAnimationFrame.
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/animations-useraf--demo)
   - [`useRafFn`](./src/components/useRafFn/stories/useRafFn.md) — calls function with requestAnimationFrame.

src/components/useIntervalFn/index.ts

@@ -0,0 +1 @@
+export * from './useIntervalFn'

src/components/useIntervalFn/stories/UseIntervalFnDemo.vue

@@ -0,0 +1,49 @@
+<template>
+  <table class="table is-fullwidth">
+    <thead>
+      <tr>
+        <th>Prop</th>
+        <th>Value</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>callbackCounter</td>
+        <td>
+          <span>{{ callbackCounter }}</span>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="3">
+          <button class="button is-primary" @click="start" v-if="!isRunning">
+            Resume Interval
+          </button>
+          <button class="button is-danger" @click="stop" v-else>
+            Stop Interval
+          </button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { ref } from '@src/api'
+import { useIntervalFn } from '@src/vue-use-kit'
+
+export default Vue.extend({
+  name: 'UseIntervalFnDemo',
+  setup() {
+    const ms = 300
+    const callbackCounter = ref(0)
+    const animHandler = () => {
+      callbackCounter.value = callbackCounter.value + 1
+    }
+
+    const { isRunning, start, stop } = useIntervalFn(animHandler, ms)
+
+    return { isRunning, start, stop, callbackCounter }
+  }
+})
+</script>

src/components/useIntervalFn/stories/useIntervalFn.md

@@ -0,0 +1,63 @@
+# useIntervalFn
+
+Vue function that calls given callback repeatedly on a fixed time delay.
+
+## Reference
+
+```typescript
+useIntervalFn(
+    callback: Function,
+    ms?: number,
+    runOnMount?: boolean
+): {
+    isRunning: Ref<boolean>;
+    start: () => void;
+    stop: () => void;
+ };
+```
+
+### Parameters
+
+- `callback: Function` the function to call for each interval finishes
+- `ms: number` how many milliseconds to wait before running the callback function
+- `runOnMount: boolean` whether to run the interval on mount, `true` by default
+
+### Returns
+
+- `isRunning: Ref<boolean>` this value is `true` if the interval is running, `false` otherwise
+- `start: Function` the function used for starting the interval
+- `stop: Function` the function used for stopping the interval
+
+## Usage
+
+```html
+<template>
+  <div>
+    <p>callbackCounter: {{ callbackCounter }}</p>
+
+    <button @click="start" v-if="!isRunning">Start Interval</button>
+    <button @click="stop" v-else>Stop Interval</button>
+  </div>
+</template>
+
+<script lang="ts">
+  import Vue from 'vue'
+  import { ref } from '@src/api'
+  import { useIntervalFn } from 'vue-use-kit'
+
+  export default Vue.extend({
+    name: 'UseIntervalFnDemo',
+    setup() {
+      const ms = 300
+      const callbackCounter = ref(0)
+      const animHandler = () => {
+        callbackCounter.value = callbackCounter.value + 1
+      }
+
+      const { isRunning, start, stop } = useIntervalFn(animHandler, ms)
+
+      return { isRunning, start, stop, callbackCounter }
+    }
+  })
+</script>
+```

src/components/useIntervalFn/stories/useIntervalFn.story.ts

@@ -0,0 +1,28 @@
+import { storiesOf } from '@storybook/vue'
+import path from 'path'
+import StoryTitle from '@src/helpers/StoryTitle.vue'
+import UseIntervalFnDemo from './UseIntervalFnDemo.vue'
+
+const functionName = 'useIntervalFn'
+const functionPath = path.resolve(__dirname, '..')
+const notes = require(`./${functionName}.md`).default
+
+const basicDemo = () => ({
+  components: { StoryTitle, demo: UseIntervalFnDemo },
+  template: `
+    <div class="container">
+      <story-title 
+        function-path="${functionPath}" 
+        source-name="${functionName}" 
+        demo-name="UseIntervalFnDemo.vue"
+      >
+        <template v-slot:title></template>
+        <template v-slot:intro></template>
+      </story-title>
+      <demo />
+    </div>`
+})
+
+storiesOf('animations|useIntervalFn', module)
+  .addParameters({ notes })
+  .add('Demo', basicDemo)

src/components/useIntervalFn/useIntervalFn.spec.ts

@@ -0,0 +1,8 @@
+// import { mount } from '@src/helpers/test'
+// import { useIntervalFn } from '@src/vue-use-kit'
+
+describe('useIntervalFn', () => {
+  it('should do something', () => {
+    // Add test here
+  })
+})

src/components/useIntervalFn/useIntervalFn.ts

@@ -0,0 +1,23 @@
+import { onMounted, onUnmounted, ref } from '@src/api'
+
+export function useIntervalFn(callback: Function, ms = 0, runOnMount = true) {
+  const isRunning = ref(false)
+  let interval: any = null
+
+  const start = () => {
+    if (interval) return
+    isRunning.value = true
+    interval = setInterval(callback, ms)
+  }
+
+  const stop = () => {
+    clearInterval(interval)
+    isRunning.value = false
+    interval = null
+  }
+
+  onMounted(() => runOnMount && start())
+  onUnmounted(stop)
+
+  return { isRunning, start, stop }
+}

src/components/useRaf/stories/UseRafDemo.vue

@@ -42,15 +42,12 @@ import Vue from 'vue'
 import { ref, computed } from '@src/api'
 import { useRaf } from '@src/vue-use-kit'
 
-const msToTime = (s: number) => {
-  const pad = (n: number, z = 2) => ('00' + n).slice(-z)
-  const ms = s % 1000
-  s = (s - ms) / 1000
-  const secs = s % 60
-  s = (s - secs) / 60
-  const mins = s % 60
-  const hrs = (s - mins) / 60
-  return `${pad(hrs)}:${pad(mins)}:${pad(secs)}.${pad(ms, 3)}`
+const pad = (n: number) => (n < 10 ? '0' + n : n)
+const msToTime = (duration: number) => {
+  const milliseconds = parseInt(`${(duration % 1000) / 10}`)
+  const seconds = Math.floor((duration / 1000) % 60)
+  const minutes = Math.floor((duration / (1000 * 60)) % 60)
+  return `${pad(minutes)}:${pad(seconds)}.${pad(milliseconds)}`
 }
 
 export default Vue.extend({

src/components/useTimeout/stories/UseTimeoutDemo.vue

@@ -20,8 +20,8 @@
             @click="start"
             v-text="btnResetMsg"
           />
-          <button class="button is-danger" @click="cancel">
-            Cancel Timer
+          <button class="button is-danger" @click="stop">
+            Stop Timer
           </button>
         </td>
       </tr>
@@ -38,23 +38,22 @@ export default Vue.extend({
   name: 'UseTimeoutDemo',
   setup() {
     const timerDuration = 3000
-    const { isReady, isIdle, cancel, start } = useTimeout(
+    const { isReady, start, stop } = useTimeout(
       timerDuration,
       false
     )
 
     const btnResetMsg = computed(() => {
-      return isIdle.value ? 'Start timer' : 'Reset Timer'
+      return isReady.value === null ? 'Start timer' : 'Reset Timer'
     })
 
     const timerStatus = computed(() => {
-      if (isIdle.value) return 'Idle'
       if (isReady.value === false) return 'Pending...'
-      if (isReady.value === null) return 'Cancelled'
+      if (isReady.value === null) return 'Idle'
       return 'Completed'
     })
 
-    return { btnResetMsg, timerStatus, cancel, start }
+    return { btnResetMsg, timerStatus, start, stop }
   }
 })
 </script>

src/components/useTimeout/stories/useTimeout.md

@@ -10,9 +10,8 @@ useTimeout(
     runOnMount?: boolean
 ): {
     isReady: Ref<boolean | null>;
-    isIdle: Ref<boolean>;
-    cancel: () => void;
     start: () => void;
+    stop: () => void;
 }
 ```
 
@@ -26,10 +25,9 @@ useTimeout(
 - `isReady: Ref<boolean | null>` the timer status
   - `false` when the timer is executing
   - `true` when the timer is completed
-  - `null` when the timer is cancelled
-- `isIdle: Ref<boolean>` this value is `true` if the timer has ever been called, `false` otherwise
-- `cancel: Function` the function used to cancel the timer
+  - `null` when the timer is idle
 - `start: Function` the function used for starting or resetting the timer
+- `stop: Function` the function used to stop the timer
 
 ## Usage
 
@@ -39,7 +37,7 @@ useTimeout(
     <p>Timer status: {{ isReady ? 'Called!' : 'Pending...' }}</p>
 
     <button @click="start">Reset Timer</button>
-    <button @click="cancel">Cancel Timer</button>
+    <button @click="stop">Stop Timer</button>
   </div>
 </template>
 
@@ -51,8 +49,8 @@ useTimeout(
     name: 'UseTimeoutDemo',
     setup() {
       const timerDuration = 3000
-      const { isReady, cancel, start } = useTimeout(timerDuration)
-      return { isReady, cancel, start }
+      const { isReady, start, stop } = useTimeout(timerDuration)
+      return { isReady, start, stop }
     }
   })
 </script>