erikras

const machine = Machine({
 id: 'labelEditing',
  initial: 'idle',
  states: {
    idle: {
      on: {
        ADD_LAYER: {
          target: 'selection',
          actions: 'addLayer',
        },

erikras

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

erikras

interface Container<V> {
  get: () => V;
  set: (value: V) => void;
}

function createContainer<V>(value: V): Container<V> {
  let v = value;
  return {
    get: () => v,
    set: (newV: V) => {

erikras

Directory structure

• ~/oss/redux-form – master branch of redux-form/redux-form
• ~/oss/rfdocs – master branch of redux-form/redux-form-docs
  • This is auto deployed via Netlify to redux-form.com (or it was before I transfered ownership to the redux-form org)
  • Contains publish.js, a horrible pre-Gatsby static site generator
• ~/oss/redux-form-website-template – website-template branch of redux-form/redux-form
  • This is where styling tweaks sometimes need to be made
  • It needs to be npm publish'd and the version updated in all the examples package.jsons and redux-form-docs repos to get the new changes.

erikras

<MakeAsyncFunction
  listener={promiseListener}
  start="START_ACTION_TYPE"     // the type of action to dispatch when this function is called
  resolve="RESOLVE_ACTION_TYPE" // the type of action that will resolve the promise
  reject="REJECT_ACTION_TYPE"   // the type of action that will reject the promise
>{asyncFunc => (
  <SomeFormLibrary onSubmit={asyncFunc}>

    ...

erikras

const WhenFieldChanges = ({ field, becomes, set, to }) => (
  <Field name={set} subscription={{}}>
    {(
      // No subscription. We only use Field to get to the change function
      { input: { onChange } }
    ) => (
      <OnChange name={field}>
        {value => {
          if (value === becomes) {
            onChange(to)

erikras

function focusOnFirstError(formName, hasError) {
  const form = document.forms[formName]
  for (let i = 0; i < form.length; i++) {
    if (hasError(form[i].name)) {
      form[i].focus()
      break
    }
  }
}

erikras

import React from 'react'
import { Form, Field } from 'react-final-form
import createDecorator from 'final-form-focus'

const focusOnErrors = createDecorator()
...
<Form
  onSubmit={submit}
  decorators={[ focusOnErrors ]} // <--------- 😎
  validate={validate}

erikras

const WarningEngine = ({ mutators: { setFieldData } }) => (
  // FormSpy lets you listen to any part of the form state you want.
  // If you provide an onChange prop, FormSpy will not render to the DOM.
  <FormSpy
    subscription={{ values: true }}
    onChange={({ values }) => {
      setFieldData('firstName', {
        warning: values.firstName ? undefined : 'Recommended'
      })
      setFieldData('lastName', {

erikras

import { createForm } from 'final-form'
import setFieldData from 'final-form-set-field-data'

// Create Form
const form = createForm({
  mutators: { setFieldData },
  onSubmit
})

form.mutators.setFieldData('firstName', { awesome: true })