ephys

// @flow

import React, { useCallback, useMemo } from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';

/**
 * @example
 *  const __ = useLocalize();
 *  __(message.title)
 */

ephys

/**
 * Source: https://gist.github.com/Ephys/79974c286e92665dcaae9c8f5344afaf
 */

import { useState, useEffect, useCallback, useRef } from 'react';

const eventTargets = new WeakMap();

function getEventTarget(storage: Storage) {
  if (eventTargets.has(storage)) {

ephys

// available at https://github.com/Ephys/sequelize-cursor-pagination

import cloneDeep from 'lodash/cloneDeep';
import { Model, ModelCtor as ModelClass, Sequelize, Op, FindOptions } from 'sequelize';
import { getPrimaryColumns } from '../utils/SequelizeUtil';

/**
 * @module sequelize-find-by-cursor
 *
 * A sequelize implementation of cursor-based pagination (find after or before another entity).

ephys

react-data-loader

a glorified memoize

Why

// because doing this will only load the data for the first version of the prop
// So if props.userId changes, user will be outdated.
class Test extends React.Component {

ephys

stack based react context

problem

• need components that can update values in parent through context (eg. page title)
• doing useContext(context).setValue(xxx) on render won't work properly when component can be added / removed at will
• solution: stack based context

solution

ephys

Composed inputs in React, key insights

Composed input = making an input that's composed of more than one input, but considered as being one input in the form.

Objective: Creating groups of input that behave like they are a single input (eg. date with 3 inputs for M, D, Y)

• tries to replicate native APIs as much as possible
• hidden input[type=hidden] is the actual used input (ref on it, has the name & the value)
• proxy validity & validationMessage on input[type=hidden] to make it return the validity of other fields as well
• clone events of other inputs and dispatch it on hidden input.

ephys

/*
 * Note: Needs CSSNumericalValue.parse, so likely Chrome Only for now
 * Note: Will warn if part of `sizes` is invalid, but will keep using the rest. You still need to fix it because the browser is going to ignore it completely!
 */

// TODO: re-run when image is removed / added
let images = document.querySelectorAll('img[sizes]');

function updateDivPos(div, target) {
  const { top, height, left } = target.getBoundingClientRect();

ephys

#!/usr/bin/env node

// Some easing functions are impossible to implement as a CSS easing-function and must be either implemented as JS
// or as CSS Keyframes.
// This script generates CSS keyframes that replicate the easing function of your choice. See below for configuration.
//
// eg. https://easings.net/en#easeInOutElastic
//
// Credit: Easing functions are from https://animejs.com/documentation/#elasticEasing which based them on http://www.robertpenner.com/easing

ephys

So the issue here is that both classes have the same specificity and are in two different CSS files. So if they load in the wrong order, overrides will be applied the wrong way and the CSS will be broken (known issue with CSS Modules sadly).

A simple solution would be to increase the specificity of the button class in slider, by adding the same class to the selector multiple times, like this:

https://stackoverflow.com/questions/11572081/css-class-repetition-to-increase-specificity

Only issue is that this is manual. If we then want to make BareButton use another Button component that has its own CSS class, we’ll need to update this specificity again.

I wish browsers would allow us to increase specificity between classes

ephys

// @flow

import * as React from 'react';

type WithContextOption = {
  [string]: React.Context<*>,
};

export default function withContext<NewProps: WithContextOption>(contextMap: NewProps) {