Remove unused Formsy props; tighten types; improve runRules

API.md

@@ -1,14 +1,16 @@
 # API
 
 - [Formsy](#formsy)
+  - [disabled](#disabled)
   - [getModel()](#getModel)
   - [mapping](#mapping)
-  - [onChange()](#onChange)
-  - [onInvalid()](#onInvalid)
-  - [onInvalidSubmit()](#onInvalidsubmit)
-  - [onSubmit()](#onSubmit)
-  - [onValid()](#onValid)
-  - [onValidSubmit()](#onValidsubmit)
+  - [onChange](#onChange)
+  - [onInvalid](#onInvalid)
+  - [onInvalidSubmit](#onInvalidsubmit)
+  - [onReset](#onReset)
+  - [onSubmit](#onSubmit)
+  - [onValid](#onValid)
+  - [onValidSubmit](#onValidsubmit)
   - [preventDefaultSubmit](#preventDefaultSubmit)
   - [preventExternalInvalidation](#preventExternalInvalidation)
   - [reset()](#reset)
@@ -45,6 +47,23 @@
 
 `import Formsy from 'formsy-react';`
 
+#### <a id="disabled">disabled</a>
+
+```jsx
+class MyForm extends React.Component {
+  render() {
+    return (
+      <Formsy disabled>
+        <MyInput name="foo" value="" />
+        <MyInput name="bar" value="" />
+      </Formsy>
+    );
+  }
+}
+```
+
+Disable the form itself with a prop and use [isFormDisabled](#isFormDisabled).
+
 #### <a id="mapping">mapping</a>
 
 ```jsx
@@ -102,6 +121,14 @@ class Form extends React.Component {
 }
 ```
 
+#### <a id="onReset">onReset</a>
+
+```jsx
+<Formsy onReset={this.handleOnReset}></Formsy>
+```
+
+Takes a function to run when the reset button has been clicked.
+
 #### <a id="onSubmit">onSubmit(data, resetForm, invalidateForm)</a>
 
 ```jsx
@@ -115,7 +142,7 @@ the form by taking an object that maps to inputs. This is useful for server side
 `{email: "This email is taken"}`. Resetting or invalidating the form will cause **setState** to run on the form element
 component.
 
-#### <a id="onValid">onValid()</a>
+#### <a id="onValid">onValid</a>
 
 ```jsx
 <Formsy onValid={this.enableSubmitButton}></Formsy>

README.md

@@ -29,7 +29,7 @@ issues.
 1.  Build any kind of form element components. Not just traditional inputs, but anything you want, and get that
     validation for free
 2.  Add validation rules and use them with simple syntax
-3.  Use handlers for different states of your form. (`onError`, `onSubmit`, `onValid`, etc.)
+3.  Use handlers for different states of your form. (`onSubmit`, `onValid`, etc.)
 4.  Pass external errors to the form to invalidate elements (E.g. a response from a server)
 5.  Dynamically add form elements to your form and they will register/unregister to the form
 

__test_utils__/DynamicInputForm.tsx

@@ -7,10 +7,13 @@ interface DynamicInputFormProps {
   inputName?: string;
 }
 
-class DynamicInputForm extends React.Component<DynamicInputFormProps> {
-  public state = {
-    input: null,
-  };
+class DynamicInputForm extends React.Component<DynamicInputFormProps, { input: typeof TestInput }> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      input: null,
+    };
+  }
 
   private addInput = () => {
     const { inputName } = this.props;
@@ -20,13 +23,18 @@ class DynamicInputForm extends React.Component<DynamicInputFormProps> {
   };
 
   public render() {
+    const { onSubmit, children } = this.props;
+    const { input } = this.state;
+
     return (
       <>
-        <Formsy onSubmit={this.props.onSubmit}>
-          {this.state.input}
-          {this.props.children}
+        <Formsy onSubmit={onSubmit}>
+          {input}
+          {children}
         </Formsy>
-        <button type="button" onClick={this.addInput} />
+        <button type="button" onClick={this.addInput}>
+          Add input
+        </button>
       </>
     );
   }

__test_utils__/expectIsValid.tsx

@@ -7,7 +7,8 @@ import { getInputInstance } from './getInput';
 
 const TestInput = InputFactory({
   render() {
-    return <input value={this.props.value || ''} readOnly />;
+    const { value } = this.props;
+    return <input value={value || ''} readOnly />;
   },
 });
 

__tests__/Utils-spec.tsx

@@ -65,8 +65,7 @@ describe('Utils', () => {
       success: [],
     });
 
-    // TODO: This fails but should pass
-    // expect(utils.runRules('', {}, { rule: () => true }, {})).toEqual({ errors: [], failed: [], success: ['rule'] });
+    expect(utils.runRules('', {}, { rule: () => true }, {})).toEqual({ errors: [], failed: [], success: ['rule'] });
 
     expect(utils.runRules('', {}, { rule: () => false }, {})).toEqual({ errors: [], failed: ['rule'], success: [] });
     expect(utils.runRules('', {}, { rule: true }, { rule: () => false })).toEqual({
@@ -100,12 +99,5 @@ describe('Utils', () => {
       failed: ['rule'],
       success: [],
     });
-
-    // TODO: What does this even mean?
-    expect(utils.runRules('', {}, { rule: true }, { rule: true })).toEqual({
-      errors: [],
-      failed: [],
-      success: ['rule'],
-    });
   });
 });

src/Wrapper.ts

@@ -46,11 +46,11 @@ const propTypes = {
 };
 
 export interface WrapperProps<V> {
-  innerRef?: (ref: any) => void;
+  innerRef?: (ref: React.Ref<any>) => void;
   name: string;
   required?: RequiredValidation<V>;
-  validationError?: any;
-  validationErrors?: any;
+  validationError?: string;
+  validationErrors?: { [key: string]: string };
   validations?: Validations<V>;
   value?: V;
 }
@@ -62,22 +62,22 @@ export interface WrapperState<V> {
   isPristine: boolean;
   isRequired: boolean;
   isValid: boolean;
-  pristineValue: any;
-  validationError: any[];
+  pristineValue: V;
+  validationError: string[];
   value: V;
 }
 
 export interface InjectedProps<V> {
-  errorMessage: any;
-  errorMessages: any;
+  errorMessage: string;
+  errorMessages: string[];
   hasValue: boolean;
   isFormDisabled: boolean;
   isFormSubmitted: boolean;
   isPristine: boolean;
   isRequired: boolean;
   isValid: boolean;
   isValidValue: (value: V) => boolean;
-  ref?: any;
+  ref?: React.Ref<any>;
   resetValue: () => void;
   setValidations: (validations: Validations<V>, required: RequiredValidation<V>) => void;
   setValue: (value: V) => void;
@@ -88,7 +88,7 @@ export interface InjectedProps<V> {
 export interface WrapperInstanceMethods {
   isValid: () => boolean;
   getValue: () => any;
-  getErrorMessage: () => any;
+  getErrorMessage: () => null | string;
 }
 
 export type PassDownProps<V> = WrapperProps<V> & InjectedProps<V>;

src/index.ts

@@ -8,7 +8,6 @@ import Wrapper, { propTypes } from './Wrapper';
 import FormsyContext from './FormsyContext';
 
 import {
-  IData,
   IModel,
   InputComponent,
   IResetModel,
@@ -23,32 +22,16 @@ type FormHTMLAttributesCleaned = Omit<React.FormHTMLAttributes<HTMLFormElement>,
 /* eslint-disable react/no-unused-state, react/default-props-match-prop-types */
 export interface FormsyProps extends FormHTMLAttributesCleaned {
   disabled: boolean;
-  getErrorMessage: any;
-  getErrorMessages: any;
-  getValue: any;
-  hasValue: any;
-  isFormDisabled: any;
-  isFormSubmitted: any;
-  isPristine: any;
-  isRequired: any;
-  isValid: any;
-  isValidValue: any;
   mapping: null | ((model: IModel) => IModel);
   onChange: (model: IModel, isChanged: boolean) => void;
-  onError: any;
   onInvalid: () => void;
-  onInvalidSubmit: any;
+  onInvalidSubmit: (model: IModel, resetModel: IResetModel, updateInputsWithError: IUpdateInputsWithError) => void;
   onReset?: () => void;
   onSubmit?: (model: IModel, resetModel: IResetModel, updateInputsWithError: IUpdateInputsWithError) => void;
   onValid: () => void;
   onValidSubmit?: (model: IModel, resetModel: IResetModel, updateInputsWithError: IUpdateInputsWithError) => void;
-  preventExternalInvalidation?: boolean;
   preventDefaultSubmit?: boolean;
-  resetValue: any;
-  setValidations: any;
-  setValue: any;
-  showError: any;
-  showRequired: any;
+  preventExternalInvalidation?: boolean;
   validationErrors?: null | object;
 }
 
@@ -72,16 +55,6 @@ class Formsy extends React.Component<FormsyProps, FormsyState> {
 
   public static propTypes = {
     disabled: PropTypes.bool,
-    getErrorMessage: PropTypes.func,
-    getErrorMessages: PropTypes.func,
-    getValue: PropTypes.func,
-    hasValue: PropTypes.func,
-    isFormDisabled: PropTypes.func,
-    isFormSubmitted: PropTypes.func,
-    isPristine: PropTypes.func,
-    isRequired: PropTypes.func,
-    isValid: PropTypes.func,
-    isValidValue: PropTypes.func,
     mapping: PropTypes.func,
     onChange: PropTypes.func,
     onInvalid: PropTypes.func,
@@ -90,45 +63,24 @@ class Formsy extends React.Component<FormsyProps, FormsyState> {
     onSubmit: PropTypes.func,
     onValid: PropTypes.func,
     onValidSubmit: PropTypes.func,
-    preventExternalInvalidation: PropTypes.bool,
     preventDefaultSubmit: PropTypes.bool,
-    resetValue: PropTypes.func,
-    setValidations: PropTypes.func,
-    setValue: PropTypes.func,
-    showError: PropTypes.func,
-    showRequired: PropTypes.func,
+    preventExternalInvalidation: PropTypes.bool,
     validationErrors: PropTypes.object, // eslint-disable-line
   };
 
   public static defaultProps: Partial<FormsyProps> = {
     disabled: false,
-    getErrorMessage: utils.noop,
-    getErrorMessages: utils.noop,
-    getValue: utils.noop,
-    hasValue: utils.noop,
-    isFormDisabled: utils.noop,
-    isFormSubmitted: utils.noop,
-    isPristine: utils.noop,
-    isRequired: utils.noop,
-    isValid: utils.noop,
-    isValidValue: utils.noop,
     mapping: null,
     onChange: utils.noop,
-    onError: utils.noop,
     onInvalid: utils.noop,
     onInvalidSubmit: utils.noop,
     onReset: utils.noop,
     onSubmit: utils.noop,
     onValid: utils.noop,
     onValidSubmit: utils.noop,
-    preventExternalInvalidation: false,
     preventDefaultSubmit: true,
-    resetValue: utils.noop,
-    setValidations: utils.noop,
-    setValue: utils.noop,
-    showError: utils.noop,
-    showRequired: utils.noop,
-    validationErrors: null,
+    preventExternalInvalidation: false,
+    validationErrors: {},
   };
 
   public constructor(props: FormsyProps) {
@@ -280,9 +232,9 @@ class Formsy extends React.Component<FormsyProps, FormsyState> {
     );
   };
 
-  public reset = (data?: IData) => {
+  public reset = (model?: IModel) => {
     this.setFormPristine(true);
-    this.resetModel(data);
+    this.resetModel(model);
   };
 
   private resetInternal = event => {
@@ -517,16 +469,6 @@ class Formsy extends React.Component<FormsyProps, FormsyState> {
   public render = () => {
     const {
       /* eslint-disable @typescript-eslint/no-unused-vars */
-      getErrorMessage,
-      getErrorMessages,
-      getValue,
-      hasValue,
-      isFormDisabled,
-      isFormSubmitted,
-      isPristine,
-      isRequired,
-      isValid,
-      isValidValue,
       mapping,
       onChange,
       onInvalid,
@@ -537,11 +479,6 @@ class Formsy extends React.Component<FormsyProps, FormsyState> {
       onValidSubmit,
       preventExternalInvalidation,
       preventDefaultSubmit,
-      resetValue,
-      setValidations,
-      setValue,
-      showError,
-      showRequired,
       validationErrors,
       children,
       /* eslint-enable @typescript-eslint/no-unused-vars */

src/interfaces.ts

@@ -6,10 +6,9 @@ export interface Values {
 }
 
 export type IModel = any;
-export type IData = any;
 export type IResetModel = (model?: IModel) => void;
-export type IUpdateInputsWithValue<V> = (values: any, validate?: boolean) => void;
-export type IUpdateInputsWithError = (errors: any, invalidate?: boolean) => void;
+export type IUpdateInputsWithValue<V> = (values: { [key: string]: V }, validate?: boolean) => void;
+export type IUpdateInputsWithError = (errors: { [key: string]: string }, invalidate?: boolean) => void;
 
 export type ValidationFunction<V> = (values: Values, value: V, extra?: any) => boolean | string;