git.iko.soy/bridge
on dee2cd5 help sign in
bridge/src/components/Blinky.js
45 lines 1.2 kB history raw
1import React, { useState, useRef } from 'react';
2import { times } from 'lodash';
4import useInterval from 'lib/useInterval';
5import { formatDots } from 'lib/dateFormat';
7// TODO: make these characters display as the same width
8export const LOADING_CHARACTER = '▓';
9export const INTERSTITIAL_CHARACTER = '░';
10const BLINK_AFTER_MS = 2500; // ms
12const buildDate = char =>
13 [4, 2, 2].map(t => times(t, () => char).join('')).join('.');
14const DATE_A = buildDate(LOADING_CHARACTER);
15const DATE_B = buildDate(INTERSTITIAL_CHARACTER);
17export const matchBlinky = obj =>
18 obj.matchWith({
19 Nothing: () => <Blinky delayed />,
20 Just: p => p.value,
21 });
23export const matchBlinkyDate = obj =>
24 obj.matchWith({
25 Nothing: () => <Blinky a={DATE_A} b={DATE_B} delayed />,
26 Just: p => formatDots(p.value),
27 });
29export default function Blinky({
30 a = LOADING_CHARACTER,
31 b = INTERSTITIAL_CHARACTER,
32 delayed = false,
33}) {
34 const [value, setValue] = useState(true);
35 const now = useRef(new Date());
37 useInterval(() => {
38 // only start blinking if we've elapsed enough time and want to delay
39 if (!delayed || new Date() - now.current > BLINK_AFTER_MS) {
40 setValue(val => !val);
41 }
42 }, 1000);
44 return value ? a : b;