**Feature:** Splash hooks & useInterval

src/Splash/Splash.Animation.tsx

@@ -1,8 +1,9 @@
-import * as React from "react"
-
+import React, { useState } from "react"
+import useInterval from "../useInterval"
 import styled from "../utils/styled"
 
 export interface Props {
+  isFullscreen?: boolean
   size?: number
 }
 
@@ -34,73 +35,87 @@ const bounce = (coord: number): number => {
   return coord
 }
 
-const Container = styled("div")<{ size: number }>(({ size }: { size: number }) => ({
-  width: size,
-  height: size,
+// css Hack so we dont need to worry about max(window.height,window.width)- Only needed when fullscreen is enabled
+// https://spin.atomicobject.com/2015/07/14/css-responsive-square/
+const FullScreenWrap = styled("div")({
+  position: "absolute",
+  width: "100%",
+  ":after": {
+    content: "''",
+    display: "block",
+    paddingBottom: "100%",
+  },
+})
+
+const Container = styled("div")({
   position: "absolute",
   top: "50%",
   left: "50%",
   transform: "translate3d(-50%, -50%, 0)",
-}))
+  width: "100%",
+  height: "100%",
+})
 
-const Box = styled("div")<{ x: number; y: number }>(({ x, y }) => ({
+/// Move highly highly dynamic style out of css-js to prevent uneeded classname generation
+const Box = styled("div")({
   position: "absolute",
   transition: "all 0.5s ease-in-out",
-  top: `calc(${(x / (squares - 1)) * 100}% + 4px)`,
-  left: `calc(${(y / (squares - 1)) * 100}% + 4px)`,
   borderRadius: 6,
   width: `calc(${100 / (squares - 1)}% - 8px)`,
   height: `calc(${100 / (squares - 1)}% - 8px)`,
   backgroundColor: "rgba(255, 255, 255, 0.06)",
-}))
-
-class Animation extends React.Component<Props, State> {
-  public state = {
-    animationStep: 0,
-    coordinates: Array.apply(null, { length: boxes })
-      .map(Number.call, Number)
-      .map(() => ({ x: integerRandom(squares), y: integerRandom(squares) })),
-  }
-
-  public animationInterval?: number
+})
+
+const initialState = {
+  animationStep: 0,
+  coordinates: Array.from(Array(boxes), (_, index) => index).map(() => ({
+    x: integerRandom(squares),
+    y: integerRandom(squares),
+  })),
+}
 
-  // Shift the coordinate of every third tile in a random direction.
-  // Each animation shifts a different set of tiles.
-  public shiftSomeTiles() {
-    this.setState(prevState => ({
-      animationStep: prevState.animationStep + 1,
-      coordinates: prevState.coordinates.map((coord: { x: number; y: number }, index: number) => {
-        if (index % 3 === prevState.animationStep % 3) {
-          const dx = integerRandom(3) - 1
-          const dy = integerRandom(3) - 1
-          return {
-            x: bounce(coord.x + dx),
-            y: bounce(coord.y - dy),
+const Animation: React.FC<Props> = ({ isFullscreen, size = 600 }) => {
+  const [state, updateAnimation] = useState<State>(initialState)
+
+  useInterval(
+    () => {
+      updateAnimation({
+        animationStep: state.animationStep + 1,
+        coordinates: state.coordinates.map((coord: { x: number; y: number }, index: number) => {
+          if (index % 3 === state.animationStep % 3) {
+            const dx = integerRandom(3) - 1
+            const dy = integerRandom(3) - 1
+            return {
+              x: bounce(coord.x + dx),
+              y: bounce(coord.y - dy),
+            }
           }
-        }
-        return coord
-      }),
-    }))
-  }
-
-  public componentDidMount() {
-    this.animationInterval = window.setInterval(this.shiftSomeTiles.bind(this), 5000)
-  }
-
-  public componentWillUnmount() {
-    clearInterval(this.animationInterval)
-  }
-
-  public render() {
-    const size = this.props.size || 600
-    return (
-      <Container size={size}>
-        {this.state.coordinates.map((coord: { x: number; y: number }, index: number) => (
-          <Box key={index} x={coord.x} y={coord.y} />
-        ))}
-      </Container>
-    )
-  }
+          return coord
+        }),
+      })
+    },
+    5000,
+    true,
+  )
+
+  const children = state.coordinates.map((coord: { x: number; y: number }, index: number) => (
+    <Box
+      key={index}
+      style={{
+        top: `${(coord.x / (squares - 1)) * 100}%`,
+        left: `${(coord.y / (squares - 1)) * 100}%`,
+      }}
+    />
+  ))
+
+  // Only will change if isFullscreen or size changes, a workaround from not having to set outter container width and height to max(window.height,window.width)
+  return isFullscreen ? (
+    <FullScreenWrap>
+      <Container>{children}</Container>
+    </FullScreenWrap>
+  ) : (
+    <Container style={{ width: size, height: size }}>{children}</Container>
+  )
 }
 
 export default Animation

src/Splash/Splash.tsx

@@ -89,47 +89,22 @@ const Static = styled("div")`
   }
 `
 
-class Splash extends React.Component<SplashProps, Readonly<State>> {
-  public readonly state = {
-    animationSize: Math.max(window.innerWidth, window.innerHeight),
-  }
-
-  public static defaultProps = {
-    color: "#fff",
-  }
-
-  public handleResize = () => {
-    this.setState({
-      animationSize: Math.max(window.innerWidth, window.innerHeight) as number,
-    })
-  }
-
-  public componentDidMount() {
-    window.addEventListener("resize", this.handleResize)
-  }
-
-  public componentWillUnmount() {
-    window.removeEventListener("resize", this.handleResize)
-  }
-
-  public render() {
-    const { logo, color } = this.props
-    return (
-      <Container color={color}>
-        <Animation size={this.state.animationSize} />
-        <Content color={color}>
-          <TitleBar>
-            <OperationalLogo size={110} logo={logo} />
-            <TitleBarContent>
-              <h1>{this.props.title}</h1>
-              <div>{this.props.actions}</div>
-            </TitleBarContent>
-          </TitleBar>
-          <Static>{this.props.children}</Static>
-        </Content>
-      </Container>
-    )
-  }
+const Splash: React.FC<SplashProps> = ({ color, logo, children, title, actions }) => {
+  return (
+    <Container color={color}>
+      <Animation isFullscreen />
+      <Content color={color}>
+        <TitleBar>
+          <OperationalLogo size={110} logo={logo} />
+          <TitleBarContent>
+            <h1>{title}</h1>
+            <div>{actions}</div>
+          </TitleBarContent>
+        </TitleBar>
+        <Static>{children}</Static>
+      </Content>
+    </Container>
+  )
 }
 
 export default Splash

src/useInterval/README.md

@@ -0,0 +1,109 @@
+An implementation of `setInterval` with Hooks.
+
+### Reference
+
+[Making setInterval Declarative with React Hooks](https://overreacted.io/making-setinterval-declarative-with-react-hooks/).
+
+### Usage
+
+#### Basic Counter
+
+```jsx
+function BasicCounter() {
+  const [count, setCount] = useState(0)
+
+  useInterval(() => {
+    setCount(count + 1)
+  }, 1000)
+
+  return <h1>{count}</h1>
+}
+
+;<BasicCounter />
+```
+
+#### Using two intervals to manipulate the counter
+
+Example, we can have a delay of one interval be controlled by another:
+
+```jsx
+function Counter() {
+  const [delay, setDelay] = useState(1000)
+  const [count, setCount] = useState(0)
+
+  // Increment the counter.
+  useInterval(() => {
+    setCount(count + 1)
+  }, delay)
+
+  // Make it faster every second!
+  useInterval(() => {
+    if (delay > 10) {
+      setDelay(delay / 2)
+    }
+  }, 1000)
+
+  function handleReset() {
+    setDelay(1000)
+  }
+
+  return (
+    <>
+      <h1>Counter: {count}</h1>
+      <h4>Delay: {delay}</h4>
+      <button onClick={handleReset}>Reset delay</button>
+    </>
+  )
+}
+
+;<Counter />
+```
+
+#### Immediate argument
+
+If you need your callback to be delayed for an extended period of time, but you want it to trigger immediately upon mounting, then pass in immediate as the third argument.
+
+```jsx
+function MyComp() {
+  const [inverted, setInvert] = useState(false)
+  const [inverted2, setInvert2] = useState(false)
+
+  // Invert colors Immediately
+  useInterval(
+    () => {
+      setInvert(!inverted)
+    },
+    10000,
+    true,
+  )
+
+  // Invert colors
+  useInterval(() => {
+    setInvert2(!inverted2)
+  }, 10000)
+
+  return (
+    <>
+      <div
+        style={{
+          background: inverted ? "navy" : "white",
+          color: inverted ? "white" : "navy",
+        }}
+      >
+        <h3>This immediately gets inverted with a navy background</h3>
+      </div>
+
+      <div
+        style={{
+          background: inverted2 ? "navy" : "white",
+          color: inverted2 ? "white" : "navy",
+        }}
+      >
+        <h3>This needs to wait for the delay to pass to fire</h3>
+      </div>
+    </div>
+  )
+}
+
+;<MyComp />
+```

src/useInterval/index.ts

@@ -0,0 +1,41 @@
+import noop from "lodash/noop"
+import { useEffect, useRef } from "react"
+
+/**
+ * Hook version of setInterval.
+ * @param {() => void} callback - Callback to be repeatedly excuted over a certain interval.
+ * @param {number | null} delay - Interval duration in ms. Pass null to cancel an execution.
+ * @param {boolean} immediate - Pass true to execute the callback immediately upon mounting.
+ * @see https://overreacted.io/making-setinterval-declarative-with-react-hooks/
+ */
+export function useInterval(callback: () => void, delay: number | null, immediate?: boolean) {
+  const savedCallback = useRef(noop)
+
+  // Remember the latest callback.
+  // useEffect has no second argument so it will be executed after each render
+  // but we don't want to change this value directly in the body of the render function,
+  // because render should be pure function
+
+  // After every render, save the latest callback into our ref.
+  useEffect(() => {
+    savedCallback.current = callback
+  })
+
+  useEffect(() => {
+    if (immediate && delay !== null) {
+      savedCallback.current()
+    }
+  }, [immediate]) // when immediate changes, we want to restart the timer
+
+  // Set up the interval.
+  useEffect(() => {
+    if (delay === null) {
+      return undefined
+    }
+    // we can read and call latest callback from inside our interval:
+    const id = setInterval(() => savedCallback.current(), delay)
+    return () => clearInterval(id)
+  }, [delay]) // when delay changes, we want to restart the timer
+}
+
+export default useInterval