How to use the final-form.fieldSubscriptionItems.reduce function in final-form

To help you get started, we’ve selected a few final-form examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github frontier-forms / frontier-forms / lib / core / core.ts View on Github external
import * as Ajv from 'ajv';
import ajv = require('ajv');
import { Config, createForm, FieldSubscription, fieldSubscriptionItems, FormApi } from 'final-form';
import { JSONSchema7 } from 'json-schema';
import { each, noop, set } from 'lodash';

export const allFieldSubscriptionItems: FieldSubscription = fieldSubscriptionItems.reduce((result, key) => {
  result[key] = true;
  return result;
},                                                                                        {});

const formatsRegistry: { [k: string]: ajv.FormatValidator } = {};

export const addFormat = (formatName: string, validator: ajv.FormatValidator) => {
  formatsRegistry[formatName] = validator;
};

// Given a definitions and a mutation, should subscribe to proper fields
export function getFormFromSchema (
  schema: JSONSchema7,
  onSubmit: Config['onSubmit'],
  initialValues = {} // tslint:disable-line typedef
): FormApi {
github final-form / react-final-form-arrays / src / useFieldArray.js View on Github external
// @flow
import { useForm, useField } from 'react-final-form'
import { fieldSubscriptionItems, ARRAY_ERROR } from 'final-form'
import type { Mutators } from 'final-form-arrays'
import type { FieldValidator, FieldSubscription } from 'final-form'
import type { FieldArrayRenderProps, UseFieldArrayConfig } from './types'
import defaultIsEqual from './defaultIsEqual'
import useConstant from './useConstant'

const all: FieldSubscription = fieldSubscriptionItems.reduce((result, key) => {
  result[key] = true
  return result
}, {})

const useFieldArray = (
  name: string,
  {
    subscription = all,
    defaultValue,
    initialValue,
    isEqual = defaultIsEqual,
    validate: validateProp
  }: UseFieldArrayConfig = {}
): FieldArrayRenderProps => {
  const form = useForm('useFieldArray')
github egoist / vue-final-form / src / Field.js View on Github external
created() {
    const subscription = this.subscription || fieldSubscriptionItems.reduce((result, key) => {
      result[key] = true
      return result
    }, {})

    this.unsubscribe = this.finalForm.registerField(this.name, fieldState => {
      this.fieldState = fieldState
      this.$emit('change', fieldState)
    }, subscription, {
      getValidator: Array.isArray(this.validate) ? composeFieldValidators(this.validate) : () => this.validate
    })
  },
github final-form / react-final-form-hooks / src / useField.js View on Github external
import { fieldSubscriptionItems } from 'final-form'
import { useEffect, useRef, useState } from 'react'

export const all = fieldSubscriptionItems.reduce((result, key) => {
  result[key] = true
  return result
}, {})

const subscriptionToInputs = subscription =>
  fieldSubscriptionItems.map(key => Boolean(subscription[key]))

const eventValue = event => {
  if (!event || !event.target) {
    return event
  } else if (event.target.type === 'checkbox') {
    return event.target.checked
  }

  return event.target.value
}
github corpusculejs / corpuscule / packages / form / src / field.js View on Github external
import {consumer} from '@corpuscule/context';
import {assertRequiredProperty} from '@corpuscule/utils/lib/asserts';
import defineExtendable from '@corpuscule/utils/lib/defineExtendable';
import reflectClassMethods from '@corpuscule/utils/lib/reflectClassMethods';
import defaultScheduler from '@corpuscule/utils/lib/scheduler';
import {setObject} from '@corpuscule/utils/lib/setters';
import {fieldSubscriptionItems} from 'final-form';
import {getTargetValue, isNativeDefinition, noop, setTargetValues, tokenRegistry} from './utils';

export const all = fieldSubscriptionItems.reduce((result, key) => {
  result[key] = true;

  return result;
}, {});

const field = (
  token,
  {auto = false, scheduler = defaultScheduler, childrenSelector = 'input, select, textarea'} = {},
) => klass => {
  let $formApi;
  let $input;
  let $meta;

  let $format;
  let $formatOnBlur;
  let $isEqual;
github final-form / react-final-form / src / useField.js View on Github external
import * as React from 'react'
import { fieldSubscriptionItems } from 'final-form'
import type {
  FieldSubscription,
  FieldState,
  FormApi,
  FormValuesShape
} from 'final-form'
import type { UseFieldConfig, FieldInputProps, FieldRenderProps } from './types'
import isReactNative from './isReactNative'
import getValue from './getValue'
import useForm from './useForm'
import useLatest from './useLatest'
import { addLazyFieldMetaState } from './getters'

const all: FieldSubscription = fieldSubscriptionItems.reduce((result, key) => {
  result[key] = true
  return result
}, {})

const defaultFormat = (value: ?any, name: string) =>
  value === undefined ? '' : value
const defaultParse = (value: ?any, name: string) =>
  value === '' ? undefined : value

const defaultIsEqual = (a: any, b: any): boolean => a === b

function useField(
  name: string,
  config: UseFieldConfig = {}
): FieldRenderProps {
  const {

final-form

🏁 Framework agnostic, high performance, subscription-based form state management

MIT
Latest version published 9 months ago

Package Health Score

74 / 100
Full package analysis