redux-form: Allow direct importing to reduce bundle size and add some default exports (#20147)

* Add some export defaults to match the library and allow importing directly from lib files

- also updated some of the actions while touching that file

* Fix extra new line in redux form

types/redux-form/lib/Field.d.ts

@@ -63,17 +63,17 @@ export class Field<P = GenericFieldHTMLAttributes> extends Component<BaseFieldPr
     getRenderedComponent(): Component<WrappedFieldProps & P>;
 }
 
-interface WrappedFieldProps {
+export interface WrappedFieldProps {
     input: WrappedFieldInputProps;
     meta: WrappedFieldMetaProps;
 }
 
-interface WrappedFieldInputProps extends CommonFieldProps {
+export interface WrappedFieldInputProps extends CommonFieldProps {
     checked?: boolean;
     value: any;
 }
 
-interface WrappedFieldMetaProps {
+export interface WrappedFieldMetaProps {
     active?: boolean;
     autofilled: boolean;
     asyncValidating: boolean;
@@ -91,3 +91,5 @@ interface WrappedFieldMetaProps {
     visited: boolean;
     warning?: any;
 }
+
+export default Field;

types/redux-form/lib/FormSection.d.ts

@@ -7,4 +7,6 @@ export interface FormSectionProps<P = {}> {
     component?: string | ComponentType<P>;
 }
 
-declare class FormSection extends Component<FormSectionProps> {}
+export declare class FormSection extends Component<FormSectionProps> {}
+
+export default FormSection;

types/redux-form/lib/actions.d.ts

@@ -7,40 +7,80 @@ export interface FormAction extends Action {
     };
 }
 
-declare function arrayInsert(form: string, field: string, index: number, value: any): FormAction;
-declare function arrayMove(form: string, field: string, from: number, to: number): FormAction;
-declare function arrayPop(form: string, field: string): FormAction;
-declare function arrayPush(form: string, field: string, value: any): FormAction;
-declare function arrayRemove(form: string, field: string, index: number): FormAction;
-declare function arrayRemoveAll(form: string, field: string): FormAction;
-declare function arrayShift(form: string, field: string): FormAction;
-declare function arraySplice(form: string, field: string, index: number, removeNum: number, value: any): FormAction;
-declare function arraySwap(form: string, field: string, indexA: number, indexB: number): FormAction;
-declare function arrayUnshift(form: string, field: string, value: any): FormAction;
-declare function autofill(form: string, field: string, value: any): FormAction;
-declare function blur(form: string, field: string, value: any): FormAction;
-declare function change(form: string, field: string, value: any): FormAction;
-declare function destroy(...form: string[]): FormAction;
-declare function focus(form: string, field: string): FormAction;
+export declare function arrayInsert(form: string, field: string, index: number, value: any): FormAction;
+export declare function arrayMove(form: string, field: string, from: number, to: number): FormAction;
+export declare function arrayPop(form: string, field: string): FormAction;
+export declare function arrayPush(form: string, field: string, value: any): FormAction;
+export declare function arrayRemove(form: string, field: string, index: number): FormAction;
+export declare function arrayRemoveAll(form: string, field: string): FormAction;
+export declare function arrayShift(form: string, field: string): FormAction;
+export declare function arraySplice(form: string, field: string, index: number, removeNum: number, value: any): FormAction;
+export declare function arraySwap(form: string, field: string, indexA: number, indexB: number): FormAction;
+export declare function arrayUnshift(form: string, field: string, value: any): FormAction;
+export declare function autofill(form: string, field: string, value: any): FormAction;
+export declare function blur(form: string, field: string, value: any): FormAction;
+export declare function change(form: string, field: string, value: any): FormAction;
+export declare function destroy(...form: string[]): FormAction;
+export declare function focus(form: string, field: string): FormAction;
 
-interface InitializeOptions {
+export interface InitializeOptions {
     keepDirty : boolean;
     keepSubmitSucceeded: boolean;
 }
 
-declare function initialize(form: string, data: any, keepDirty?: boolean | InitializeOptions, options?: InitializeOptions): FormAction;
-declare function registerField(form: string, name: string, type: FieldType): FormAction;
-declare function reset(form: string): FormAction;
-declare function startAsyncValidation(form: string): FormAction;
-declare function stopAsyncValidation(form: string, errors?: any): FormAction;
-declare function setSubmitFailed(form: string, ...fields: string[]): FormAction;
-declare function setSubmitSucceeded(form: string, ...fields: string[]): FormAction;
-declare function startSubmit(form: string): FormAction;
-declare function stopSubmit(form: string, errors?: any): FormAction;
-declare function stopAsyncValidation(form: string, errors?: any): FormAction;
-declare function submit(form: string): FormAction;
-declare function touch(form: string, ...fields: string[]): FormAction;
-declare function unregisterField(form: string, name: string): FormAction;
-declare function untouch(form: string, ...fields: string[]): FormAction;
-declare function updateSyncErrors(from: string, syncErrors: FormErrors<FormData>, error: any): FormAction;
-declare function updateSyncWarnings(form: string, syncWarnings: FormWarnings<FormData>, warning: any): FormAction;
+export declare function initialize(form: string, data: any, keepDirty?: boolean | InitializeOptions, options?: InitializeOptions): FormAction;
+export declare function registerField(form: string, name: string, type: FieldType): FormAction;
+export declare function reset(form: string): FormAction;
+export declare function startAsyncValidation(form: string): FormAction;
+export declare function stopAsyncValidation(form: string, errors?: any): FormAction;
+export declare function setSubmitFailed(form: string, ...fields: string[]): FormAction;
+export declare function setSubmitSucceeded(form: string, ...fields: string[]): FormAction;
+export declare function startSubmit(form: string): FormAction;
+export declare function stopSubmit(form: string, errors?: any): FormAction;
+export declare function submit(form: string): FormAction;
+export declare function clearSubmit(form: string): FormAction;
+export declare function clearSubmitErrors(form: string): FormAction;
+export declare function clearAsyncError(form: string, field: string): FormAction;
+export declare function touch(form: string, ...fields: string[]): FormAction;
+export declare function unregisterField(form: string, name: string): FormAction;
+export declare function untouch(form: string, ...fields: string[]): FormAction;
+export declare function updateSyncErrors(from: string, syncErrors: FormErrors<FormData>, error: any): FormAction;
+export declare function updateSyncWarnings(form: string, syncWarnings: FormWarnings<FormData>, warning: any): FormAction;
+
+declare const actions: {
+    arrayInsert: typeof arrayInsert,
+    arrayMove: typeof arrayMove,
+    arrayPop: typeof arrayPop,
+    arrayPush: typeof arrayPush,
+    arrayRemove: typeof arrayRemove,
+    arrayRemoveAll: typeof arrayRemoveAll,
+    arrayShift: typeof arrayShift,
+    arraySplice: typeof arraySplice,
+    arraySwap: typeof arraySwap,
+    arrayUnshift: typeof arrayUnshift,
+    autofill: typeof autofill,
+    blur: typeof blur,
+    change: typeof change,
+    clearSubmit: typeof clearSubmit,
+    clearSubmitErrors: typeof clearSubmitErrors,
+    clearAsyncError: typeof clearAsyncError,
+    destroy: typeof destroy,
+    focus: typeof focus,
+    initialize: typeof initialize,
+    registerField: typeof registerField,
+    reset: typeof reset,
+    startAsyncValidation: typeof startAsyncValidation,
+    startSubmit: typeof startSubmit,
+    stopAsyncValidation: typeof stopAsyncValidation,
+    stopSubmit: typeof stopSubmit,
+    submit: typeof submit,
+    setSubmitFailed: typeof setSubmitFailed,
+    setSubmitSucceeded: typeof setSubmitSucceeded,
+    touch: typeof touch,
+    unregisterField: typeof unregisterField,
+    untouch: typeof untouch,
+    updateSyncErrors: typeof updateSyncErrors,
+    updateSyncWarnings: typeof updateSyncWarnings
+};
+
+export default actions;

types/redux-form/lib/formValueSelector.d.ts

@@ -1,6 +1,8 @@
 import { FormStateMap } from "redux-form";
 
-declare function formValueSelector<State = {}>(
+export declare function formValueSelector<State = {}>(
     form: string,
     getFormState?: (state: State) => FormStateMap
 ): (state: State, ...field: string[]) => any;
+
+export default formValueSelector;

types/redux-form/lib/reducer.d.ts

@@ -36,3 +36,5 @@ export interface FieldState {
     touched?: boolean;
     visited?: boolean;
 }
+
+export default reducer;

types/redux-form/lib/reduxForm.d.ts

@@ -136,12 +136,12 @@ export interface DecoratedComponentClass<FormData, P> {
 export type FormDecorator<FormData, P, Config> =
     (component: ComponentType<P & InjectedFormProps<FormData, P>>) => DecoratedComponentClass<FormData, P & Config>;
 
-declare function reduxForm<FormData = {}, P = {}>(
+export declare function reduxForm<FormData = {}, P = {}>(
     config: ConfigProps<FormData, P>
 ): FormDecorator<FormData, P, Partial<ConfigProps<FormData, P>>>;
 
-declare function reduxForm<FormData = {}, P = {}>(
+export declare function reduxForm<FormData = {}, P = {}>(
     config: Partial<ConfigProps<FormData, P>>
 ): FormDecorator<FormData, P, ConfigProps<FormData, P>>;
 
-
+export default reduxForm;

types/redux-form/redux-form-tests.tsx

@@ -8,6 +8,7 @@ import {
     FormSection,
     GenericFormSection,
     formValues,
+    formValueSelector,
     Field,
     GenericField,
     WrappedFieldProps,
@@ -19,13 +20,23 @@ import {
     WrappedFieldArrayProps,
     reducer,
     FormAction,
-    actionTypes
+    actionTypes,
+    submit
 } from "redux-form";
 import {
     Field as ImmutableField,
     reduxForm as immutableReduxForm
 } from "redux-form/immutable";
 
+import LibField, {
+    WrappedFieldProps as LibWrappedFieldProps
+} from "redux-form/lib/Field";
+import libReducer from "redux-form/lib/reducer";
+import LibFormSection from "redux-form/lib/FormSection";
+import libFormValueSelector from "redux-form/lib/formValueSelector";
+import libReduxForm from "redux-form/lib/reduxForm";
+import libActions from "redux-form/lib/actions";
+
 /* Decorated components */
 interface TestFormData {
     foo: string;
@@ -183,7 +194,7 @@ const testFormWithInitialValuesDecorator = reduxForm<MultivalueFormData>({
     }
 })
 
-// Specifying form data type *is* required here, because type inference will guess the type of 
+// Specifying form data type *is* required here, because type inference will guess the type of
 // the form data type parameter to be {foo: string}. The result of validate does not contain "foo"
 const testFormWithInitialValuesAndValidationDecorator = reduxForm<MultivalueFormData>({
     form: "testWithValidation",
@@ -304,3 +315,27 @@ reducer.plugin({
     }
 });
 
+/* Test using versions imported directly/as defaults from lib */
+const DefaultField = (
+    <LibField
+        name="defaultfield"
+        component="input"
+        type="text"
+    />
+);
+
+libReducer({}, {
+    type: "ACTION"
+});
+
+const DefaultFormSection = (
+    <LibFormSection
+        name="defaultformsection"
+    />
+);
+
+const TestLibFormRequired = libReduxForm<TestFormData>({})(TestFormComponent);
+const TestLibForm = libReduxForm<TestFormData>({ form : "test" })(TestFormComponent);
+
+const testSubmit = submit("test");
+const testLibSubmit = libActions.submit("test");