alexreardon

import { bindAll } from 'bind-event-listener';

import type { DragLocation } from '../internal-types';

type CleanupFn = () => void;

/** Set a `style` property on a `HTMLElement`
 *
 * @returns a `cleanup` function to restore the `style` property to it's original state
 */

alexreardon

this binding

• this is the runtime context of a function.
• this is determined by the call site
• the same function can be executed with different this runtime contexts. You can think of this as another arguement to the function
• Comparison: scopes are generally defined at compile time (exception: eval)

const person = {
 name: 'Alex',

alexreardon

flex container

• flex-direction → main-axis (row [horizontal] → or column [vertical] ↓)
• justify-content → main-axis-align
• align-items → cross-axis-align
• align-content → cross-axis-align-wrapped

flex child

• align-self → cross-axis-align-override

alexreardon

import { bindAll } from 'bind-event-listener';

// *Usually* to detect if you are entering / leaving a window you can
// use the `event.relatedTarget` property:

// "dragenter":
// - `event.relatedTarget` should point to the element that you are coming from
//   - Scenario: A -> B
//   - `event.target`: `B` (entering B)
//   - `event.relatedTarget`: `A`: (leaving A - where you are coming from)

alexreardon

Drag and drop

This is a collection of knowledge I have built up regarding browser powered drag and drop functionality

Events

dragstart

• timing: once as drag is starting
• event.target: draggable Element

alexreardon

Learning typescript

This work is not exclusively my own. There are sections copy pasted from elsewhere

Resources

Docs 📖

• Official docs
• Type programming

alexreardon

const machine = Machine({
  id: 'save-button',
  initial: 'hiding',
  states: {
    hiding: {
      on: {
        SHOW: 'waiting',
      },
    },
    waiting: {

alexreardon

Machine({
  id: 'simple-promise',
  initial: 'pending',
  
  states: {
    pending: {
      on: {
        RESOLVE: 'resolved',
        REJECT: 'rejected',
      }

alexreardon

import React, { createContext, ReactNode, useEffect, useMemo, useRef, useState } from 'react';
import { interpret } from 'xstate';
import useRequiredContext from '../shared/use-required-context';
import { Nullable } from '../types';
import isShallowEqual from './is-shallow-equal';
import machine from './machine';
import { MachineEvents, MachineStateType, ServiceType } from './machine-types';

const ServiceContext = createContext<Nullable<ServiceType>>(null);

alexreardon

function Parent({ children }) {
  const [state, send, service] = useMachine(toggleMachine);

  return <ServiceContext.Provider value={service}>{children}</ServiceContext.Provider>;
}

function Child({ children }) {
  const service = useContext(ServiceContext);
  const [state, send] = useService(ServiceContext);