**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 outer 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,113 @@
+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] = React.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 [start, setStart] = React.useState(false)
+ const [delay, setDelay] = React.useState(1000)
+ const [count, setCount] = React.useState(0)
+
+ // Increment the counter.
+ useInterval(() => {
+ if (start) {
+ setCount(count + 1)
+ }
+ }, delay)
+
+ // Make it faster every second!
+ useInterval(() => {
+ if (delay > 10 && start) {
+ setDelay(delay / 2)
+ }
+ }, 1000)
+
+ function handleReset() {
+ setDelay(1000)
+ }
+
+ return (
+ <>
+ <button onClick={() => setStart(!start)}>Toggle Counter!</button>
+ <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] = React.useState(false)
+ const [inverted2, setInvert2] = React.useState(false)
+
+ // Invert colors Immediately
+ useInterval(
+ () => {
+ setInvert(!inverted)
+ },
+ 10000,
+ true,
+ )
+
+ // Invert colors
+ useInterval(() => {
+ setInvert2(!inverted2)
+ }, 10000)
+
+ return (
+ <div>
+ <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