@shopify/react-form
Advanced tools
Comparing version
@@ -119,2 +119,3 @@ 'use strict'; | ||
dispatch(reducer.updateErrorAction(undefined)); | ||
return undefined; | ||
}, // eslint-disable-next-line react-hooks/exhaustive-deps | ||
@@ -121,0 +122,0 @@ [state.value, ...dependencies]); |
@@ -23,4 +23,5 @@ 'use strict'; | ||
updateError(undefined); | ||
return undefined; | ||
} | ||
exports.runValidation = runValidation; |
@@ -103,3 +103,21 @@ 'use strict'; | ||
function getDirtyValues(fieldBag) { | ||
return Object.entries(fieldBag).reduce((acc, [fieldName, field]) => { | ||
const reduceFn = (acc, [fieldName, field]) => { | ||
if (Array.isArray(field)) { | ||
const dirtyArray = field.map(dirtyField => Object.entries(dirtyField).reduce(reduceFn, {})).filter(dirtyField => Object.keys(dirtyField).length); | ||
return { ...acc, | ||
...(dirtyArray.length ? { | ||
[fieldName]: dirtyArray | ||
} : {}) | ||
}; | ||
} | ||
if (!isField(field)) { | ||
const dirtyField = Object.entries(field).reduce(reduceFn, {}); | ||
return { ...acc, | ||
...(Object.keys(dirtyField).length ? { | ||
[fieldName]: dirtyField | ||
} : {}) | ||
}; | ||
} | ||
return { ...acc, | ||
@@ -110,3 +128,5 @@ ...(field.dirty ? { | ||
}; | ||
}, {}); | ||
}; | ||
return Object.entries(fieldBag).reduce(reduceFn, {}); | ||
} | ||
@@ -113,0 +133,0 @@ function shallowArrayComparison(arrA, arrB) { |
@@ -1,3 +0,3 @@ | ||
import { FieldBag } from '../types'; | ||
import type { FieldBag } from '../types'; | ||
export declare function useDirty(fieldBag: FieldBag): boolean; | ||
//# sourceMappingURL=dirty.d.ts.map |
@@ -1,2 +0,2 @@ | ||
import { Validates, Field, DirtyStateComparator } from '../../types'; | ||
import type { Validates, Field, DirtyStateComparator } from '../../types'; | ||
export interface FieldConfig<Value> { | ||
@@ -92,3 +92,3 @@ value: Value; | ||
export declare function useField<Value = string>(input: FieldConfig<Value> | Value, dependencies?: unknown[]): Field<Value>; | ||
export declare type ChoiceField<Value = boolean> = Omit<Field<Value>, 'value' | 'onChange'> & { | ||
export type ChoiceField<Value = boolean> = Omit<Field<Value>, 'value' | 'onChange'> & { | ||
checked: boolean; | ||
@@ -143,3 +143,3 @@ onChange(checked: boolean): void; | ||
export declare function asChoiceList<Value extends string | undefined | null>({ value, onChange, ...fieldData }: Field<Value>): { | ||
selected: Value[]; | ||
selected: (Value & {})[]; | ||
onChange: (selected: Exclude<Value, null | undefined>[]) => void; | ||
@@ -146,0 +146,0 @@ allowMultiple: boolean; |
import { Reducer } from 'react'; | ||
import { FieldState, ErrorValue, DirtyStateComparator } from '../../types'; | ||
import type { FieldState, ErrorValue, DirtyStateComparator } from '../../types'; | ||
export interface ReducerOptions<Value> { | ||
@@ -25,3 +25,3 @@ dirtyStateComparator?: DirtyStateComparator<Value>; | ||
export declare function updateErrorAction(error: ErrorValue[] | ErrorValue): UpdateErrorAction; | ||
export declare type FieldAction<Value> = UpdateErrorAction | ResetAction | UpdateAction<Value> | NewDefaultAction<Value>; | ||
export type FieldAction<Value> = UpdateErrorAction | ResetAction | UpdateAction<Value> | NewDefaultAction<Value>; | ||
export declare function reduceField<Value>(prevState: FieldState<Value>, action: FieldAction<Value>): FieldState<Value>; | ||
@@ -28,0 +28,0 @@ export declare function makeFieldReducer<Value>({ dirtyStateComparator, }: ReducerOptions<Value>): Reducer<FieldState<Value>, FieldAction<Value>>; |
@@ -1,2 +0,2 @@ | ||
import { FieldBag, FormWithDynamicListsInput, FormWithoutDynamicListsInput, Form, FormWithDynamicLists, DynamicListBag } from '../types'; | ||
import type { FieldBag, FormWithDynamicListsInput, FormWithoutDynamicListsInput, Form, FormWithDynamicLists, DynamicListBag } from '../types'; | ||
/** | ||
@@ -3,0 +3,0 @@ * A custom hook for managing the state of an entire form. `useForm` wraps up many of the other hooks in this package in one API, and when combined with `useField`, `useList` or `useDynamicList`, allows you to easily build complex forms with smart defaults for common cases. |
/// <reference types="react" /> | ||
import { ValidationDictionary, FieldDictionary, ListValidationContext } from '../../types'; | ||
import type { ValidationDictionary, FieldDictionary, ListValidationContext } from '../../types'; | ||
import { ListAction } from './hooks'; | ||
@@ -4,0 +4,0 @@ export interface FieldListConfig<Item extends object> { |
@@ -1,2 +0,2 @@ | ||
import { FieldDictionary, FieldStates } from '../../types'; | ||
import type { FieldDictionary, FieldStates } from '../../types'; | ||
import { FieldListConfig } from './baselist'; | ||
@@ -16,5 +16,5 @@ export interface DynamicList<Item extends object> { | ||
} | ||
declare type FactoryFunction<Item extends object> = (factoryArgument?: any) => Item | Item[]; | ||
type FactoryFunction<Item extends object> = (factoryArgument?: any) => Item | Item[]; | ||
export declare function useDynamicList<Item extends object>(listOrConfig: FieldListConfig<Item> | Item[], fieldFactory: FactoryFunction<Item>, validationDependencies?: unknown[]): DynamicList<Item>; | ||
export {}; | ||
//# sourceMappingURL=dynamiclist.d.ts.map |
@@ -1,3 +0,3 @@ | ||
import { DynamicListBag } from '../../types'; | ||
import type { DynamicListBag } from '../../types'; | ||
export declare function useDynamicListDirty(lists?: DynamicListBag): boolean; | ||
//# sourceMappingURL=dynamiclistdirty.d.ts.map |
@@ -1,3 +0,3 @@ | ||
import { DynamicListBag } from '../../types'; | ||
import type { DynamicListBag } from '../../types'; | ||
export declare function useDynamicListReset(lists?: DynamicListBag): () => void; | ||
//# sourceMappingURL=dynamiclistreset.d.ts.map |
/// <reference types="react" /> | ||
import { FieldDictionary, NormalizedValidationDictionary } from '../../../types'; | ||
import type { FieldDictionary, NormalizedValidationDictionary } from '../../../types'; | ||
import { ListState, ListAction } from './index'; | ||
export declare function useHandlers<Item extends object>(state: ListState<Item>, dispatch: React.Dispatch<ListAction<Item>>, validationConfigs: NormalizedValidationDictionary<any>): FieldDictionary<Item>[]; | ||
//# sourceMappingURL=handlers.d.ts.map |
/// <reference types="react" /> | ||
import { FieldStates, ErrorValue } from '../../../types'; | ||
export declare type ListAction<Item> = ReinitializeAction<Item> | AddFieldItemAction<Item> | EditFieldItemAction<FieldStates<object>> | MoveFieldItemAction | RemoveFieldItemAction | RemoveFieldItemsAction | UpdateErrorAction<Item> | UpdateAction<Item, keyof Item> | ResetAction<Item, keyof Item> | NewDefaultAction<Item, keyof Item> | ResetListAction; | ||
import type { FieldStates, ErrorValue } from '../../../types'; | ||
export type ListAction<Item> = ReinitializeAction<Item> | AddFieldItemAction<Item> | EditFieldItemAction<FieldStates<object>> | MoveFieldItemAction | RemoveFieldItemAction | RemoveFieldItemsAction | UpdateErrorAction<Item> | UpdateAction<Item, keyof Item> | ResetAction<Item, keyof Item> | NewDefaultAction<Item, keyof Item> | ResetListAction; | ||
interface ReinitializeAction<Item> { | ||
@@ -5,0 +5,0 @@ type: 'reinitialize'; |
@@ -1,2 +0,2 @@ | ||
import { FieldDictionary } from '../../types'; | ||
import type { FieldDictionary } from '../../types'; | ||
import { FieldListConfig } from './baselist'; | ||
@@ -3,0 +3,0 @@ /** |
@@ -1,2 +0,2 @@ | ||
import { Validator, FieldStates, ErrorValue, ListValidationContext } from '../../../types'; | ||
import type { Validator, FieldStates, ErrorValue, ListValidationContext } from '../../../types'; | ||
export declare function runValidation<Value, Record extends object>(updateError: (error: ErrorValue) => void, state: { | ||
@@ -3,0 +3,0 @@ value: Value; |
@@ -1,3 +0,3 @@ | ||
import { FieldBag } from '../types'; | ||
import type { FieldBag } from '../types'; | ||
export declare function useReset(fieldBag: FieldBag): () => void; | ||
//# sourceMappingURL=reset.d.ts.map |
@@ -1,2 +0,2 @@ | ||
import { FormMapping, SubmitHandler, SubmitResult, FieldBag, FormError, DynamicListBag } from '../types'; | ||
import type { FormMapping, SubmitHandler, SubmitResult, FieldBag, FormError, DynamicListBag } from '../types'; | ||
export declare function useSubmit<T extends FieldBag>(onSubmit: SubmitHandler<FormMapping<T, "value">> | undefined, fieldBag: T, makeCleanAfterSubmit?: boolean, dynamicListBag?: DynamicListBag): { | ||
@@ -3,0 +3,0 @@ submit: (event?: React.FormEvent) => Promise<void>; |
@@ -1,2 +0,2 @@ | ||
import { FieldBag, Field } from '../types'; | ||
import type { FieldBag, Field } from '../types'; | ||
interface FieldVisitor { | ||
@@ -3,0 +3,0 @@ (field: Field<any>): void; |
@@ -1,5 +0,6 @@ | ||
import { ChangeEvent } from 'react'; | ||
import { DynamicList } from './hooks/list/dynamiclist'; | ||
export declare type ErrorValue = string | undefined; | ||
export declare type DirtyStateComparator<Value> = (defaultValue: Value, value: Value) => boolean; | ||
import type { ChangeEvent } from 'react'; | ||
import type { DynamicList } from './hooks/list/dynamiclist'; | ||
export type { DynamicList } from './hooks/list/dynamiclist'; | ||
export type ErrorValue = string | undefined; | ||
export type DirtyStateComparator<Value> = (defaultValue: Value, value: Value) => boolean; | ||
export interface Validator<Value, Context> { | ||
@@ -12,7 +13,7 @@ (value: Value, context: Context): ErrorValue; | ||
} | ||
export declare type Validates<Value, Context extends object = {}> = Validator<Value, Context> | Validator<Value, Context>[]; | ||
export declare type NormalizedValidationDictionary<ListItem extends object> = { | ||
export type Validates<Value, Context extends object = {}> = Validator<Value, Context> | Validator<Value, Context>[]; | ||
export type NormalizedValidationDictionary<ListItem extends object> = { | ||
[Key in keyof ListItem]: Validator<ListItem[Key], ListValidationContext<ListItem>>[]; | ||
}; | ||
export declare type ValidationDictionary<ListItem extends object, Context extends object = {}> = { | ||
export type ValidationDictionary<ListItem extends object, Context extends object = {}> = { | ||
[Key in keyof ListItem]: Validates<ListItem[Key], Context>; | ||
@@ -28,3 +29,3 @@ }; | ||
} | ||
export declare type FieldStates<Record extends object> = { | ||
export type FieldStates<Record extends object> = { | ||
[Key in keyof Record]: FieldState<Record[Key]>; | ||
@@ -46,3 +47,3 @@ }; | ||
} | ||
export declare type FieldDictionary<Record extends object> = { | ||
export type FieldDictionary<Record extends object> = { | ||
[Key in keyof Record]: Field<Record[Key]>; | ||
@@ -84,3 +85,3 @@ }; | ||
} | ||
export declare type SubmitResult = { | ||
export type SubmitResult = { | ||
status: 'fail'; | ||
@@ -91,3 +92,3 @@ errors: FormError[]; | ||
}; | ||
export declare type FieldOutput<T extends object> = FieldDictionary<T> | Field<T> | FieldDictionary<T>[]; | ||
export type FieldOutput<T extends object> = FieldDictionary<T> | Field<T> | FieldDictionary<T>[]; | ||
export interface FieldBag { | ||
@@ -102,3 +103,3 @@ [key: string]: FieldOutput<any>; | ||
} | ||
declare type FieldProp<T, K extends keyof Field<any>> = T extends Field<any> ? T[K] : T extends FieldDictionary<any> ? { | ||
type FieldProp<T, K extends keyof Field<any>> = T extends Field<any> ? T[K] : T extends FieldDictionary<any> ? { | ||
[InnerKey in keyof T]: T[InnerKey][K]; | ||
@@ -112,9 +113,8 @@ } : T; | ||
*/ | ||
export declare type FormMapping<Bag, FieldKey extends keyof Field<any>> = { | ||
export type FormMapping<Bag, FieldKey extends keyof Field<any>> = { | ||
[Key in keyof Bag]: Bag[Key] extends any[] ? FieldProp<Bag[Key][number], FieldKey>[] : FieldProp<Bag[Key], FieldKey>; | ||
}; | ||
export declare type DynamicListMapping<DLBag extends DynamicListBag> = { | ||
export type DynamicListMapping<DLBag extends DynamicListBag> = { | ||
[Key in keyof DLBag]: DLBag[Key]['fields']; | ||
}; | ||
export {}; | ||
//# sourceMappingURL=types.d.ts.map |
@@ -1,3 +0,3 @@ | ||
import { ChangeEvent } from 'react'; | ||
import { Validates, Validator, FieldOutput, FieldBag, FormMapping, Field, FormError, DynamicListBag } from './types'; | ||
import type { ChangeEvent } from 'react'; | ||
import type { Validates, Validator, FieldOutput, FieldBag, FormMapping, Field, FormError, DynamicListBag } from './types'; | ||
export declare function isField<T extends Object>(input: any): input is Field<T>; | ||
@@ -14,3 +14,3 @@ export declare function mapObject<Output>(input: any, mapper: (value: any, key: any) => any): Output; | ||
export declare function getValues<T extends FieldBag>(fieldBag: T): FormMapping<T, "value">; | ||
export declare function getDirtyValues<T extends FieldBag>(fieldBag: T): {}; | ||
export declare function getDirtyValues<T extends FieldBag>(fieldBag: T): any; | ||
export declare function noop(): void; | ||
@@ -17,0 +17,0 @@ export declare function shallowArrayComparison(arrA: unknown[], arrB: any): boolean; |
@@ -7,3 +7,3 @@ interface Matcher<Input> { | ||
} | ||
export declare type ErrorContent<Input> = string | ErrorContentFunction<Input>; | ||
export type ErrorContent<Input> = string | ErrorContentFunction<Input>; | ||
interface Options { | ||
@@ -10,0 +10,0 @@ skipOnEmpty?: boolean; |
@@ -1,1 +0,1 @@ | ||
module.exports = require("./build/cjs/index.js"); | ||
module.exports = require("./build/cjs/index.js"); |
{ | ||
"name": "@shopify/react-form", | ||
"version": "0.0.0-snapshot-20221114144029", | ||
"version": "0.0.0-snapshot-20230321203938", | ||
"license": "MIT", | ||
@@ -39,3 +39,3 @@ "description": "Manage React forms tersely and safely-typed with no magic using React hooks", | ||
"@shopify/predicates": "^3.0.1", | ||
"@shopify/react-hooks": "^3.0.2", | ||
"@shopify/react-hooks": "^3.0.3", | ||
"fast-deep-equal": "^3.1.3", | ||
@@ -42,0 +42,0 @@ "get-value": "^3.0.1" |
@@ -42,3 +42,3 @@ # `@shopify/react-form` | ||
```bash | ||
$ yarn add @shopify/react-form | ||
yarn add @shopify/react-form | ||
``` | ||
@@ -45,0 +45,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
238142
0.87%3550
1.14%Updated