add Timer component (#79)

* feat: add Timer component

* rename Timer to Interval

* remove delay prop

* do not use forceUpdate

* update size snapshot

Author: jedwards1211

.size-snapshot.json

@@ -1,21 +1,21 @@
 {
   "dist/react-powerplug.umd.js": {
-    "bundled": 20071,
-    "minified": 8068,
-    "gzipped": 2173
+    "bundled": 24185,
+    "minified": 10002,
+    "gzipped": 2571
   },
   "dist/react-powerplug.cjs.js": {
-    "bundled": 17186,
-    "minified": 8690,
-    "gzipped": 2055
+    "bundled": 21058,
+    "minified": 10885,
+    "gzipped": 2423
   },
   "dist/react-powerplug.esm.js": {
-    "bundled": 16589,
-    "minified": 8186,
-    "gzipped": 1936,
+    "bundled": 20412,
+    "minified": 10336,
+    "gzipped": 2296,
     "treeshaked": {
-      "rollup": 1489,
-      "webpack": 1927
+      "rollup": 3115,
+      "webpack": 3581
     }
   }
 }

README.md

@@ -59,6 +59,7 @@ import { Pagination, Tabs, Checkbox } from './MyDumbComponents'
 </details>
 
 ## ⚠️ Master is unstable
+
 > This branch is **unstable** and is in **active development**.  
 > For the latest stable version go to [0.1-stable branch](https://github.com/renatorib/react-powerplug/tree/0.1-stable)
 
@@ -67,27 +68,29 @@ import { Pagination, Tabs, Checkbox } from './MyDumbComponents'
 > **_Note_** _This is a kind of a cheat sheet for fast search._  
 > _If you want a more detailed **API Reference** and examples for each component see [full docs](/docs)_
 
-| Component                    | Component Props         | Render Props                                   |                                                                             |
-| ---------------------------- | ----------------------- | ---------------------------------------------- | --------------------------------------------------------------------------- |
+| Component                    | Component Props         | Render Props                                   |                                                                          |
+| ---------------------------- | ----------------------- | ---------------------------------------------- | ------------------------------------------------------------------------ |
 | <h6>STATE CONTAINERS</h6>    |
-| **\<State>**                 | `{ initial, onChange }` | `{ state, setState }`                          | [:point_down:](#state) [:books:](docs/components/State.md)                  |
-| **\<Toggle>**                | `{ initial, onChange }` | `{ on, toggle, set }`                          | [:point_down:](#toggle) [:books:](docs/components/Toggle.md)                |
-| **\<Counter>**               | `{ initial, onChange }` | `{count, inc, dec, incBy, decBy, set }`        | [:point_down:](#counter) [:books:](docs/components/Counter.md)              |
-| **\<Value>**                 | `{ initial, onChange }` | `{ value, setValue, set }`                     | [:point_down:](#value) [:books:](docs/components/Value.md)                  |
-| **\<Map>**                   | `{ initial, onChange }` | `{ set, get, over, values }`                   | [:point_down:](#map) [:books:](docs/components/Map.md)                      |
-| **\<Set>**                   | `{ initial, onChange }` | `{ values, add, clear, remove, has }`          | [:point_down:](#set) [:books:](docs/components/Set.md)                      |
-| **\<List>**                  | `{ initial, onChange }` | `{ list, first, last, push, pull, sort, set }` | [:point_down:](#list) [:books:](docs/components/List.md)                    |
+| **\<State>**                 | `{ initial, onChange }` | `{ state, setState }`                          | [:point_down:](#state) [:books:](docs/components/State.md)               |
+| **\<Toggle>**                | `{ initial, onChange }` | `{ on, toggle, set }`                          | [:point_down:](#toggle) [:books:](docs/components/Toggle.md)             |
+| **\<Counter>**               | `{ initial, onChange }` | `{count, inc, dec, incBy, decBy, set }`        | [:point_down:](#counter) [:books:](docs/components/Counter.md)           |
+| **\<Value>**                 | `{ initial, onChange }` | `{ value, setValue, set }`                     | [:point_down:](#value) [:books:](docs/components/Value.md)               |
+| **\<Map>**                   | `{ initial, onChange }` | `{ set, get, over, values }`                   | [:point_down:](#map) [:books:](docs/components/Map.md)                   |
+| **\<Set>**                   | `{ initial, onChange }` | `{ values, add, clear, remove, has }`          | [:point_down:](#set) [:books:](docs/components/Set.md)                   |
+| **\<List>**                  | `{ initial, onChange }` | `{ list, first, last, push, pull, sort, set }` | [:point_down:](#list) [:books:](docs/components/List.md)                 |
 | <h6>FEEDBACK CONTAINERS</h6> |
-| **\<Hover>**                 | `{ onChange }`          | `{ isHovered, bind }`                          | [:point_down:](#hover) [:books:](docs/components/Hover.md)                  |
-| **\<Active>**                | `{ onChange }`          | `{ isActive, bind }`                           | [:point_down:](#active) [:books:](docs/components/Active.md)                |
-| **\<Focus>**                 | `{ onChange }`          | `{ isFocused, bind }`                          | [:point_down:](#focus) [:books:](docs/components/Focus.md)                  |
-| **\<Touch>**                 | `{ onChange }`          | `{ isTouched, bind }`                          | [:point_down:](#touch) [:books:](docs/components/Touch.md)                  |
-| **\<FocusManager>**          | `{ onChange }`          | `{ isFocused, blur, bind }`                    | [:point_down:](#focusmanager) [:books:](docs/components/FocusManager.md)    |
+| **\<Hover>**                 | `{ onChange }`          | `{ isHovered, bind }`                          | [:point_down:](#hover) [:books:](docs/components/Hover.md)               |
+| **\<Active>**                | `{ onChange }`          | `{ isActive, bind }`                           | [:point_down:](#active) [:books:](docs/components/Active.md)             |
+| **\<Focus>**                 | `{ onChange }`          | `{ isFocused, bind }`                          | [:point_down:](#focus) [:books:](docs/components/Focus.md)               |
+| **\<Touch>**                 | `{ onChange }`          | `{ isTouched, bind }`                          | [:point_down:](#touch) [:books:](docs/components/Touch.md)               |
+| **\<FocusManager>**          | `{ onChange }`          | `{ isFocused, blur, bind }`                    | [:point_down:](#focusmanager) [:books:](docs/components/FocusManager.md) |
 | <h6>FORM CONTAINERS</h6>     |
-| **\<Input>**                 | `{ initial, onChange }` | `{ set, value, bind }`                         | [:point_down:](#input) [:books:](docs/components/Input.md)                  |
-| **\<Form>**                  | `{ initial, onChange }` | `{ input, values }`                            | [:point_down:](#form) [:books:](docs/components/Form.md)                    |
+| **\<Input>**                 | `{ initial, onChange }` | `{ set, value, bind }`                         | [:point_down:](#input) [:books:](docs/components/Input.md)               |
+| **\<Form>**                  | `{ initial, onChange }` | `{ input, values }`                            | [:point_down:](#form) [:books:](docs/components/Form.md)                 |
 | <h6>OTHER</h6>               |
-| **\<Compose>**               | `{ components }`        | _depends on components prop_                   | [:point_down:](#composing-components) [:books:](docs/components/Compose.md) |
+| (docs/components/Compose.md) |
+| **\<Interval>**              | `{ delay }`             | `{ stop, start, toggle }`                      | [:point_down:](#interval) [:books:](docs/components/Interval.md)         |
+| **\<Compose>**               | `{ components }`        | _depends on components prop_                   | [:point_down:](#composing-components) [:books:]                          |
 
 ## Utilities
 
@@ -281,13 +284,27 @@ import { Pagination, Tabs, Checkbox } from './MyDumbComponents'
       <Submit>Send</Submit>
 
       {/*
-                                                              input(id) => { bind, set, value }
-                                                            */}
+                                                                    input(id) => { bind, set, value }
+                                                                  */}
     </form>
   )}
 </Form>
 ```
 
+### Interval
+
+```jsx
+<Interval delay={1000}>
+  {({ stop, start }) => (
+    <>
+      <div>The time is now {new Date().toLocaleTimeString()}</div>
+      <button onClick={() => stop()}>Stop interval</button>
+      <button onClick={() => start()}>Start interval</button>
+    </>
+  )}
+</Interval>
+```
+
 # Composing Components
 
 If you want to avoid 'render props hell' you can compose two or more components in a single one.  

docs/components/Interval.md

@@ -0,0 +1,41 @@
+# Interval
+
+The Interval component is used for when it's necessary to re-render at regular intervals. Also known as Frame.
+
+```js
+import { Interval } from 'react-powerplug'
+```
+
+```jsx
+<Interval delay={1000}>
+  {({ start, stop }) => (
+    <>
+      <div>The time is now {new Date().toLocaleTimeString()}</div>
+      <button onClick={() => stop()}>Stop interval</button>
+      <button onClick={() => resume()}>Start interval</button>
+    </>
+  )}
+</Interval>
+```
+
+## Interval Props
+
+**delay** _(optional)_
+Specifies the delay (for `setInterval`) between re-renders in milliseconds.
+
+The interval will be reset any time this prop changes.
+
+Whenever `delay` is not a finite number, no interval will be set and `Interval` will
+not automatically re-render.
+
+## Interval Children Props
+
+TL;DR: `{ stop, start, toggle }`
+
+**stop**
+`() => void`
+Stop (or pause) re-renders intervals
+
+**start**
+`(delay?: number) => void`
+Start (or resume) re-renders intervals at defined delay (if not passed delay arg it will be used from props). Good way to change delay time when needed.

src/components/Interval.js

@@ -0,0 +1,67 @@
+import { Component } from 'react'
+import renderProps from '../utils/renderProps'
+
+class Interval extends Component {
+  static defaultProps = {
+    delay: 1000,
+  }
+
+  state = {
+    times: 0,
+  }
+
+  intervalId = undefined
+
+  _clearIntervalIfNecessary = () => {
+    if (this.intervalId) {
+      this.intervalId = clearInterval(this.intervalId)
+    }
+  }
+
+  _setIntervalIfNecessary = delay => {
+    if (Number.isFinite(delay)) {
+      this.intervalId = setInterval(
+        () => this.setState(s => ({ times: s.times + 1 })),
+        delay
+      )
+    }
+  }
+
+  stop = () => {
+    this._clearIntervalIfNecessary()
+  }
+
+  start = delay => {
+    const _delay = typeof delay === 'number' ? delay : this.props.delay
+    this._setIntervalIfNecessary(_delay)
+  }
+
+  toggle = () => {
+    this.intervalId ? this.stop() : this.start()
+  }
+
+  componentDidMount() {
+    this.start()
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (this.props.delay !== nextProps.delay) {
+      this.stop()
+      this.start(nextProps.delay)
+    }
+  }
+
+  componentWillUnmount() {
+    this.stop()
+  }
+
+  render() {
+    return renderProps(this.props, {
+      start: this.start,
+      stop: this.stop,
+      toggle: this.toggle,
+    })
+  }
+}
+
+export default Interval

src/index.js

@@ -1,11 +1,12 @@
 export { default as Active } from './components/Active'
-export { default as Input } from './components/Input'
 export { default as Compose } from './components/Compose'
 export { default as Counter } from './components/Counter'
 export { default as Focus } from './components/Focus'
 export { default as FocusManager } from './components/FocusManager'
 export { default as Form } from './components/Form'
 export { default as Hover } from './components/Hover'
+export { default as Input } from './components/Input'
+export { default as Interval } from './components/Interval'
 export { default as List } from './components/List'
 export { default as Map } from './components/Map'
 export { default as Set } from './components/Set'

src/index.js.flow

@@ -212,6 +212,18 @@ type StateProps<T> =
 
 declare export class State<T: Object> extends React.Component<StateProps<T>> {}
 
+/* Timer */
+
+type TimerRender = ({|
+  time: number,
+|}) => React.Node
+
+type TimerProps =
+  | {| delay?: ?number, render: TimerRender |}
+  | {| delay?: ?number, children: TimerRender |}
+
+declare export class Timer extends React.Component<TimerProps> {}
+
 /* Toggle */
 
 type ToggleChange = ({| on: boolean |}) => void

tests/components/Interval.test.js

@@ -0,0 +1,42 @@
+import * as React from 'react'
+import TestRenderer from 'react-test-renderer'
+import { last } from './utils'
+import { Interval } from '../../src'
+
+jest.useFakeTimers()
+
+test('<Interval />', () => {
+  const renderFn = jest.fn().mockReturnValue(null)
+  const renderer = TestRenderer.create(
+    <Interval delay={500}>{renderFn}</Interval>
+  )
+  const lastCalled = () => last(renderFn.mock.calls)[0]
+
+  // Initial call
+  expect(renderFn).toHaveBeenCalledTimes(1)
+
+  jest.advanceTimersByTime(1000)
+
+  renderer.update(<Interval delay={1000}>{renderFn}</Interval>)
+  expect(renderFn).toHaveBeenCalledTimes(4)
+
+  jest.advanceTimersByTime(2000)
+
+  expect(renderFn).toHaveBeenCalledTimes(6)
+
+  lastCalled().stop()
+  jest.advanceTimersByTime(2000)
+  expect(renderFn).toHaveBeenCalledTimes(6)
+
+  lastCalled().start()
+  jest.advanceTimersByTime(2000)
+  expect(renderFn).toHaveBeenCalledTimes(8)
+
+  lastCalled().toggle()
+  jest.advanceTimersByTime(2000)
+  expect(renderFn).toHaveBeenCalledTimes(8)
+
+  lastCalled().toggle()
+  jest.advanceTimersByTime(2000)
+  expect(renderFn).toHaveBeenCalledTimes(10)
+})