secundant / reformed Goto Github PK

const fieldA = createField(); // Field<unknown>
const fieldB = createField({ defaultValue: 10 });
const fieldC = createField({
  defaultValue: 10,
  disabled: $notAuthorized
});

sample({
  clock: loggedIn,
  target: fieldA.reset
});

const fields = combineFields({
  fields: {
    name: createField({ defaultValue: '' }),
    age: createField({ defaultValue: 0 })
  }
});

const nested = combineFields({
  fields: {
    a: createField({ defaultValue: 'foo' as const }),
    b: combineFields({
      fields: {
        c: combineFields({
          fields: {
            d: createField({ defaultValue: 'bar' as const })
          }
        })
      }
    })
  }
});

sample({
  clock: buttonClicked,
  source: $external,
  fn: external => ({ b: { c: { d: external } } }),
  target: nested.change
});

const formA = createForm({
  fields: {},
  // ...
  submit: () => fetch()
});

const formB = createForm({
  submit: {
    mapParams: fields => ({ foo: 'bar', ...fields }),
    fn: fetchFx
  }
});

const formC = createForm({
  submit: {
    source: { foo: $foo },
    mapParams: (fields, fromSource) => ({ ...fromSource, ...fields }),
    fn: fetchFx
  }
});

formC.$submitStatus; // Store<'initial' | 'pending' | 'done' | 'fail'>
formC.$succeeded; // Store<boolean>

formC.submitted.success; // Event<?>
formC.submitted.failure; // Event<?>
formC.submitted.finally; // Event<?>

const form = createForm({
  fields: { name: createField(), ... },
  submit: ???
});