git.iko.soy/bridge
on c19b2a8 help sign in
bridge/src/components/Blinky.js
47 lines 1.3 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 const blinkIf = (test, right) => (test ? <Blinky /> : right);
31export default function Blinky({
32 a = LOADING_CHARACTER,
33 b = INTERSTITIAL_CHARACTER,
34 delayed = false,
35}) {
36 const [value, setValue] = useState(true);
37 const now = useRef(new Date());
39 useInterval(() => {
40 // only start blinking if we've elapsed enough time and want to delay
41 if (!delayed || new Date() - now.current > BLINK_AFTER_MS) {
42 setValue(val => !val);
43 }
44 }, 1000);
46 return <span className="arial">{value ? a : b}</span>;