From 8000e19efad0793b1e887b67dfa1534972935405 Mon Sep 17 00:00:00 2001 From: Luka Zakrajsek Date: Mon, 26 Jun 2017 17:00:23 +0200 Subject: [PATCH 1/7] Add actionTypes --- types/redux-form/index.d.ts | 1 + types/redux-form/lib/actionTypes.d.ts | 37 +++++++++++++++++++++++++++ 2 files changed, 38 insertions(+) create mode 100644 types/redux-form/lib/actionTypes.d.ts diff --git a/types/redux-form/index.d.ts b/types/redux-form/index.d.ts index 22b23ee23f..84bf7fbd8d 100644 --- a/types/redux-form/index.d.ts +++ b/types/redux-form/index.d.ts @@ -41,5 +41,6 @@ export * from "./lib/FieldArray"; export * from "./lib/Form"; export * from "./lib/FormSection"; export * from "./lib/actions"; +export * from "./lib/actionTypes"; export * from "./lib/reducer"; export * from "./lib/selectors"; diff --git a/types/redux-form/lib/actionTypes.d.ts b/types/redux-form/lib/actionTypes.d.ts new file mode 100644 index 0000000000..ce1ba5d208 --- /dev/null +++ b/types/redux-form/lib/actionTypes.d.ts @@ -0,0 +1,37 @@ +export interface ActionTypes { + ARRAY_INSERT: string; + ARRAY_MOVE: string; + ARRAY_POP: string; + ARRAY_PUSH: string; + ARRAY_REMOVE: string; + ARRAY_REMOVE_ALL: string; + ARRAY_SHIFT: string; + ARRAY_SPLICE: string; + ARRAY_UNSHIFT: string; + ARRAY_SWAP: string; + AUTOFILL: string; + BLUR: string; + CHANGE: string; + CLEAR_SUBMIT: string; + CLEAR_SUBMIT_ERRORS: string; + CLEAR_ASYNC_ERROR: string; + DESTROY: string; + FOCUS: string; + INITIALIZE: string; + REGISTER_FIELD: string; + RESET: string; + SET_SUBMIT_FAILED: string; + SET_SUBMIT_SUCCEEDED: string; + START_ASYNC_VALIDATION: string; + START_SUBMIT: string; + STOP_ASYNC_VALIDATION: string; + STOP_SUBMIT: string; + SUBMIT: string; + TOUCH: string; + UNREGISTER_FIELD: string; + UNTOUCH: string; + UPDATE_SYNC_ERRORS: string; + UPDATE_SYNC_WARNINGS: string; +} + +export const actionTypes: ActionTypes; From 0cdf591f07e88f91e7ae6ec0d35e4e70110e6d8b Mon Sep 17 00:00:00 2001 From: Luka Zakrajsek Date: Mon, 26 Jun 2017 17:01:08 +0200 Subject: [PATCH 2/7] Fix reducer plugin --- types/redux-form/lib/reducer.d.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/types/redux-form/lib/reducer.d.ts b/types/redux-form/lib/reducer.d.ts index 9b7f3ed520..f1dc6315bf 100644 --- a/types/redux-form/lib/reducer.d.ts +++ b/types/redux-form/lib/reducer.d.ts @@ -1,9 +1,7 @@ import { Action, Reducer } from "redux"; import { FieldType } from "../index"; -export function reducer(state: FormStateMap, action: Action): FormStateMap & FormReducer; - -export interface FormReducer { +export interface FormReducer extends Reducer { /** * Returns a form reducer that will also pass each action through * additional reducers specified. The parameter should be an object mapping @@ -11,9 +9,11 @@ export interface FormReducer { * passed to each reducer will only be the slice that pertains to that * form. */ - plugin(reducers: FormReducerMapObject): Reducer; + plugin(reducers: FormReducerMapObject): Reducer; } +export const reducer: FormReducer; + export interface FormReducerMapObject { [formName: string]: Reducer; } From beaa0068a7e9856acac74bda9c8aabcdd48dcef4 Mon Sep 17 00:00:00 2001 From: Luka Zakrajsek Date: Mon, 26 Jun 2017 17:01:24 +0200 Subject: [PATCH 3/7] Add FormAction --- types/redux-form/lib/actions.d.ts | 68 +++++++++++++++++-------------- 1 file changed, 37 insertions(+), 31 deletions(-) diff --git a/types/redux-form/lib/actions.d.ts b/types/redux-form/lib/actions.d.ts index c96d5ffbb7..b126549f68 100644 --- a/types/redux-form/lib/actions.d.ts +++ b/types/redux-form/lib/actions.d.ts @@ -1,81 +1,87 @@ import { Action } from "redux"; import { FormErrors, FormWarnings, FieldType } from "../index"; +export interface FormAction extends Action { + meta: { + form: string; + }; +} + /** * Inserts an item into a field array at the specified index */ -export function arrayInsert(form: string, field: string, index: number, value: any): Action; +export function arrayInsert(form: string, field: string, index: number, value: any): FormAction; /** * Moves an item from one index in the array to another. In effect, it performs a remove and an * insert, so the item already at the `to` position will be bumped to a higher index, not overwritten. */ -export function arrayMove(form: string, field: string, from: number, to: number): Action; +export function arrayMove(form: string, field: string, from: number, to: number): FormAction; /** * Removes an item from the end of a field array */ -export function arrayPop(form: string, field: string): Action; +export function arrayPop(form: string, field: string): FormAction; /** * Appends an item to the end of a field array */ -export function arrayPush(form: string, field: string, value: any): Action; +export function arrayPush(form: string, field: string, value: any): FormAction; /** * Removes an item at the specified index from a field array */ -export function arrayRemove(form: string, field: string, index: number): Action; +export function arrayRemove(form: string, field: string, index: number): FormAction; /** * Removes all items from a field array */ -export function arrayRemoveAll(form: string, field: string): Action; +export function arrayRemoveAll(form: string, field: string): FormAction; /** * Removes an item from the beginning of a field array */ -export function arrayShift(form: string, field: string): Action; +export function arrayShift(form: string, field: string): FormAction; /** * ADVANCED USAGE - Inserts and/or removes items from a field array. Works similarly to Array.splice. */ -export function arraySplice(form: string, field: string, index: number, removeNum: number, value: any): Action; +export function arraySplice(form: string, field: string, index: number, removeNum: number, value: any): FormAction; /** * Swaps two items at the specified indexes in a field array */ -export function arraySwap(form: string, field: string, indexA: number, indexB: number): Action; +export function arraySwap(form: string, field: string, indexA: number, indexB: number): FormAction; /** * Inserts an item at the beginning of a field array */ -export function arrayUnshift(form: string, field: string, value: any): Action; +export function arrayUnshift(form: string, field: string, value: any): FormAction; /** * Saves the value to the field and sets its `autofilled` property to `true`. */ -export function autofill(form: string, field: string, value: any): Action; +export function autofill(form: string, field: string, value: any): FormAction; /** * Saves the value to the field */ -export function blur(form: string, field: string, value: any): Action; +export function blur(form: string, field: string, value: any): FormAction; /** * Saves the value to the field */ -export function change(form: string, field: string, value: any): Action; +export function change(form: string, field: string, value: any): FormAction; /** * Destroys the form, removing all it's state */ -export function destroy(...form: string[]): Action; +export function destroy(...form: string[]): FormAction; /** * Marks the given field as active and visited */ -export function focus(form: string, field: string): Action; +export function focus(form: string, field: string): FormAction; /** * Sets the initial values in the form with which future data values will be compared to calculate dirty and pristine. @@ -88,67 +94,67 @@ interface InitializeOptions { keepSubmitSucceeded: boolean; } -export function initialize(form: string, data: any, keepDirty?: boolean | InitializeOptions, options?: InitializeOptions): Action; +export function initialize(form: string, data: any, keepDirty?: boolean | InitializeOptions, options?: InitializeOptions): FormAction; /** * Registers a field with the form. */ -export function registerField(form: string, name: string, type: FieldType): Action; +export function registerField(form: string, name: string, type: FieldType): FormAction; /** * Resets the values in the form back to the values past in with the most recent initialize action. */ -export function reset(form: string): Action; +export function reset(form: string): FormAction; /** * Flips the asyncValidating flag true */ -export function startAsyncValidation(form: string): Action; +export function startAsyncValidation(form: string): FormAction; /** * Flips the asyncValidating flag false and populates asyncError for each field. */ -export function stopAsyncValidation(form: string, errors?: any): Action; +export function stopAsyncValidation(form: string, errors?: any): FormAction; -export function setSubmitFailed(form: string, ...fields: string[]): Action; +export function setSubmitFailed(form: string, ...fields: string[]): FormAction; -export function setSubmitSucceeded(form: string, ...fields: string[]): Action; +export function setSubmitSucceeded(form: string, ...fields: string[]): FormAction; /** * Flips the submitting flag true. */ -export function startSubmit(form: string): Action; +export function startSubmit(form: string): FormAction; /** * Flips the submitting flag false and populates submitError for each field. */ -export function stopSubmit(form: string, errors?: any): Action; +export function stopSubmit(form: string, errors?: any): FormAction; /** * Flips the asyncValidating flag false and populates asyncError for each field. */ -export function stopAsyncValidation(form: string, errors?: any): Action; +export function stopAsyncValidation(form: string, errors?: any): FormAction; /** * Triggers a submission of the specified form. */ -export function submit(form: string): Action; +export function submit(form: string): FormAction; /** * Marks all the fields passed in as touched. */ -export function touch(form: string, ...fields: string[]): Action; +export function touch(form: string, ...fields: string[]): FormAction; /** * Unregisters a field with the form. */ -export function unregisterField(form: string, name: string): Action; +export function unregisterField(form: string, name: string): FormAction; /** * Resets the 'touched' flag for all the fields passed in. */ -export function untouch(form: string, ...fields: string[]): Action; +export function untouch(form: string, ...fields: string[]): FormAction; -export function updateSyncErrors(from: string, syncErrors: FormErrors, error: any): Action; +export function updateSyncErrors(from: string, syncErrors: FormErrors, error: any): FormAction; -export function updateSyncWarnings(form: string, syncWarnings: FormWarnings, warning: any): Action; +export function updateSyncWarnings(form: string, syncWarnings: FormWarnings, warning: any): FormAction; From 561e9978131dc3b22954a2cc4e7792a5c1f04237 Mon Sep 17 00:00:00 2001 From: Luka Zakrajsek Date: Mon, 26 Jun 2017 17:02:36 +0200 Subject: [PATCH 4/7] Add StrictFormProps --- types/redux-form/lib/reduxForm.d.ts | 66 +++++++++++++++-------------- 1 file changed, 35 insertions(+), 31 deletions(-) diff --git a/types/redux-form/lib/reduxForm.d.ts b/types/redux-form/lib/reduxForm.d.ts index 61fb88ac23..c961668cd2 100644 --- a/types/redux-form/lib/reduxForm.d.ts +++ b/types/redux-form/lib/reduxForm.d.ts @@ -337,20 +337,16 @@ export interface FormComponent extends Compone wrappedInstance: ReactElement

> } -/** - * These are the props that will be passed to your form component. - * Your form component's props can extend this interface. - */ -export interface FormProps { +export interface StrictFormProps { /** * true if any of the fields have been marked as touched, false otherwise. */ - anyTouched?: boolean; + anyTouched: boolean; /** * A set of pre-bound action creators for you to operate on array fields in your form. */ - array?: { + array: { /** * Inserts a value into the given array field in your form. */ @@ -407,7 +403,7 @@ export interface FormProps { * A function that may be called to initiate asynchronous validation if * asynchronous validation is enabled. */ - asyncValidate?: () => void; + asyncValidate: () => void; /** * This value will be either: @@ -415,54 +411,54 @@ export interface FormProps { * - true - Asynchronous validation is currently running in preparation to submit a form * - a string - The name of the field that just blurred to trigger asynchronous validation */ - asyncValidating?: string | boolean; + asyncValidating: string | boolean; /** * Sets the value and marks the field as autofilled in the Redux Store. This is useful when a field * needs to be set programmatically, but in a way that lets the user know (via a styling change using * the autofilled prop in Field) that it has been autofilled for them programmatically. */ - autofill?(field: string, value: FieldValue): void; + autofill(field: string, value: FieldValue): void; /** * Marks a field as blurred in the Redux store. */ - blur?(field: string, value: FieldValue): void; + blur(field: string, value: FieldValue): void; /** * Changes the value of a field in the Redux store. */ - change?(field: string, value: FieldValue): void; + change(field: string, value: FieldValue): void; /** * Clear async error of a field in the Redux store. */ - clearAsyncError?(field: string): void; + clearAsyncError(field: string): void; /** * Destroys the form state in the Redux store. By default, this will be * called for you in componentWillUnmount(). */ - destroy?(): void; + destroy(): void; /** * true if the form data has changed from its initialized values. Opposite * of pristine. */ - dirty?: boolean; + dirty: boolean; /** * A generic error for the entire form given by the _error key in the * result from the synchronous validation function, the asynchronous * validation, or the rejected promise from onSubmit. */ - error?: string; + error: string; /** * The form name that you gave to the reduxForm() decorator or the prop you * passed in to your decorated form component. */ - form?: string; + form: string; /** * A function meant to be passed to

or to @@ -484,79 +480,87 @@ export interface FormProps { * may pass that as if it were the error for a field called _error, and * it will be given as the error prop. */ - handleSubmit?(event: SyntheticEvent): void; // same as ReactEventHandler + handleSubmit(event: SyntheticEvent): void; // same as ReactEventHandler - handleSubmit?(submit: SubmitHandler): ReactEventHandler; + handleSubmit(submit: SubmitHandler): ReactEventHandler; /** * Initializes the form data to the given values. All dirty and pristine * state will be determined by comparing the current data with these * initialized values. */ - initialize?(data: FormData): void; + initialize(data: FormData): void; /** * The same initialValues object passed to reduxForm to initialize the form data. */ - initialValues?: Partial; + initialValues: Partial; /** * true if the form has validation errors. Opposite of valid. */ - invalid?: boolean; + invalid: boolean; /** * true if the form data is the same as its initialized values. Opposite * of dirty. */ - pristine?: boolean; + pristine: boolean; /** * Resets all the values in the form to the initialized state, making it * pristine again. */ - reset?(): void; + reset(): void; /** * Whether or not your form is currently submitting. This prop will only * work if you have passed an onSubmit function that returns a promise. It * will be true until the promise is resolved or rejected. */ - submitting?: boolean; + submitting: boolean; /** * Starts as false. If onSubmit is called, and fails to submit for any * reason, submitFailed will be set to true. A subsequent successful * submit will set it back to false. */ - submitFailed?: boolean; + submitFailed: boolean; /** * Starts as false. If onSubmit is called, and succeed to submit, * submitSucceeded will be set to true. A subsequent unsuccessful * submit will set it back to false. */ - submitSucceeded?: boolean; + submitSucceeded: boolean; /** * Marks the given fields as "touched" to show errors. */ - touch?(...field: string[]): void; + touch(...field: string[]): void; /** * Clears the "touched" flag for the given fields */ - untouch?(...field: string[]): void; + untouch(...field: string[]): void; /** * true if the form passes validation (has no validation errors). Opposite * of invalid. */ - valid?: boolean; + valid: boolean; /** * A generic warning for the entire form given by the `_warning` key in the result from the * synchronous warning function. */ - warning?: string; + warning: string; +} + +/** + * These are the props that will be passed to your form component. + * Your form component's props can extend this interface. + */ +export interface FormProps extends Partial> { + } From c5c27159d32537335bfb4c444c7145faddb47082 Mon Sep 17 00:00:00 2001 From: Luka Zakrajsek Date: Mon, 26 Jun 2017 17:03:11 +0200 Subject: [PATCH 5/7] Add tests for reducer plugin and action types --- types/redux-form/redux-form-tests.tsx | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/types/redux-form/redux-form-tests.tsx b/types/redux-form/redux-form-tests.tsx index 7d3dbdd483..086e03f319 100644 --- a/types/redux-form/redux-form-tests.tsx +++ b/types/redux-form/redux-form-tests.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { Component } from 'react'; -import { Field, GenericField, reduxForm, WrappedFieldProps, BaseFieldProps, FormProps } from "redux-form"; +import { Action } from 'redux'; +import { Field, GenericField, reduxForm, WrappedFieldProps, BaseFieldProps, FormProps, FormAction, actionTypes, reducer } from "redux-form"; interface CustomComponentProps { customProp: string; @@ -141,3 +142,23 @@ const mapStateToProps = (state: any) => ({ initialValues: { firstName: state.account.data.firstName } // pull initial values from account reducer } as {initialValues?: Partial}); const ConnectedDecoratedInitializeFromStateFormClass = connect(mapStateToProps)(DecoratedInitializeFromStateFormClass); + +reducer({}, { + type: 'ACTION' +}); + +reducer.plugin({ + myform: (state: any, action: FormAction) => { + if (action.type === actionTypes.CHANGE && action.meta.form === 'securitySettings') { + return { + ...state, + values: { + ...state.values, + downloadLinkAutoPassword: true, + }, + }; + } else { + return state; + } + } +}); From c2cd577e36c67913d8dec1774962b16c476c9ad1 Mon Sep 17 00:00:00 2001 From: Luka Zakrajsek Date: Mon, 26 Jun 2017 17:03:40 +0200 Subject: [PATCH 6/7] Add StrictFormProps comment --- types/redux-form/lib/reduxForm.d.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/types/redux-form/lib/reduxForm.d.ts b/types/redux-form/lib/reduxForm.d.ts index c961668cd2..f1eac8d928 100644 --- a/types/redux-form/lib/reduxForm.d.ts +++ b/types/redux-form/lib/reduxForm.d.ts @@ -337,6 +337,11 @@ export interface FormComponent extends Compone wrappedInstance: ReactElement

> } +/** + * These are the props that will be passed to your form component. + * Your form component's props can extend this interface if you want + * to use strict checks. + */ export interface StrictFormProps { /** * true if any of the fields have been marked as touched, false otherwise. From bf57cf89e24d4d4fb695f50cb5d53356d1fb7f86 Mon Sep 17 00:00:00 2001 From: Luka Zakrajsek Date: Tue, 27 Jun 2017 14:43:22 +0200 Subject: [PATCH 7/7] Update definitions by --- types/redux-form/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/redux-form/index.d.ts b/types/redux-form/index.d.ts index 84bf7fbd8d..acf1dcc857 100644 --- a/types/redux-form/index.d.ts +++ b/types/redux-form/index.d.ts @@ -1,6 +1,6 @@ // Type definitions for redux-form 6.6 // Project: https://github.com/erikras/redux-form -// Definitions by: Carson Full , Daniel Lytkin , Karol Janyst +// Definitions by: Carson Full , Daniel Lytkin , Karol Janyst , Luka Zakrajsek // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.3