everdimension

import * as React from 'react';

interface Props {
  value: string | number;
  name?: string;
  onChange(name: string, value: number): void;
}

interface State {
  value: string;

everdimension

/**
 * see redux-actions lib to see how `createAction` works
 * https://redux-actions.js.org/docs/api/createAction.html
 */
import { createAction } from 'redux-act(ions)';

class ResponseError extends Error { /* add a `this.request` prop */ }

/** add a `meta` field when payload in an Error */
const receiveEntity = createAction('SOME_TYPE', identity, payload => {

everdimension

function isBrowserIE() {
  const ie11Re = /Trident.*rv:11/;
  const edgeRe = /Edge\//;
  const ua = navigator.userAgent;
  return ie11Re.test(ua) || edgeRe.test(ua);
}

everdimension

function debounce (fn, wait) {
	var timeout;

	return function() {
		var cntx = this;
		var args = arguments;
		clearTimeout(timeout);

		timeout = setTimeout(function() {
			timeout = null;

everdimension

<!--
  A tabindex="-1" allows an element to receive programmatic focus.
  This is useful a modal dialog window: when opened, focus should be set to the dialog so a screen reader
  will begin reading and the keyboard will be able to navigate within the dialog.
  Because the dialog (probably a <div> element) is not focusable by default, assigning it tabindex="-1"
  allows scripting to set focus to it when it is presented

  Resources:
  https://www.w3.org/WAI/GL/wiki/Using_ARIA_role%3Ddialog_to_implement_a_modal_dialog_box#Note_on_focus_management
  https://webaim.org/techniques/keyboard/tabindex

everdimension

class Toaster {
  constructor() {
    this.listeners = [];
    this.id = 0;
  }

  subscribe(listener) {
    this.listeners.push(listener);
    return () => {
      this.listeners = this.listeners.filter(l => l !== listener);

everdimension

function normalizedIncludes(str1: string, str2: string) {
  /**
   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/normalize
   *
   * https://stackoverflow.com/a/37511463/3523645
   */
  const diacriticsRange = /[\u0300-\u036f]/g;
  const str1Normalized = str1.normalize('NFD').replace(diacriticsRange, '');
  const str2Normalized = str2.normalize('NFD').replace(diacriticsRange, '');
  return str1Normalized.includes(str2Normalized);

everdimension

body {
  font-family:
    /* Safari for OS X and iOS (San Francisco) */
    -apple-system,
    /* Chrome >= 56 for OS X (San Francisco), Windows, Linux and Android */
    system-ui,
    /* Chrome < 56 for OS X (San Francisco) */
    BlinkMacSystemFont,
    /* Windows */
    "Segoe UI",

everdimension

export function sequentialPolling({
  taskFn,
  interval = 1000,
}: {
  taskFn: () => Promise<any>;
  interval?: number;
}) {
  let isActive = true;
  let timeoutId: number | undefined;
  let rejector: Function | undefined;

everdimension

class MyForm extends React.Component {
  constructor() {
    super();
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();
    const data = new FormData(event.target);