Rewrite API docs to match Formsy 2.x release (#190)

* Rewrite API docs to match Formsy 2.x breaking changes * Change form.setValue to form.updateInputsWithValue (#375) * Change form.setValue to form.updateInputsWithValue * Fix built
formsy · Feb 3, 2020 · ca2f3fe · ca2f3fe
1 parent c5b8209
commit ca2f3fe
Show file tree

Hide file tree

Showing 6 changed files with 123 additions and 107 deletions.
diff --git a/API.md b/API.md
@@ -1,40 +1,41 @@
 # API
 
 - [Formsy](#formsy)
+  - [getModel()](#getModel)
   - [mapping](#mapping)
-  - [validationErrors](#validationErrors)
+  - [onChange()](#onChange)
+  - [onInvalid()](#onInvalid)
+  - [onInvalidSubmit()](#onInvalidsubmit)
   - [onSubmit()](#onSubmit)
   - [onValid()](#onValid)
-  - [onInvalid()](#onInvalid)
   - [onValidSubmit()](#onValidsubmit)
-  - [onInvalidSubmit()](#onInvalidsubmit)
-  - [onChange()](#onChange)
+  - [preventExternalInvalidation](#preventExternalInvalidation)
   - [reset()](#reset)
-  - [getModel()](#getModel)
   - [updateInputsWithError()](#updateInputsWithError)
-  - [preventExternalInvalidation](#preventExternalInvalidation)
+  - [updateInputsWithValue()](#setInputsWithValue)
+  - [validationErrors](#validationErrors)
 - [withFormsy](#withFormsy)
-  - [name](#name)
+  - [errorMessage](#errorMessage)
+  - [errorMessages](#errorMessages)
+  - [formNoValidate](#formNoValidate)
+  - [hasValue](#hasValue)
   - [innerRef](#innerRef)
-  - [value](#value)
-  - [validations](#validations)
-  - [validationError](#validationError)
-  - [validationErrors](#validationErrors)
+  - [isFormDisabled](#isFormDisabled)
+  - [isFormSubmitted](#isFormSubmitted)
+  - [isPristine](#isPristine)
+  - [isRequired](#isRequired)
+  - [isValid](#isValid)
+  - [isValidValue()](#isValidValue)
+  - [name](#name)
   - [required](#required)
-  - [getValue()](#getvalue)
-  - [setValue()](#setValue)
   - [resetValue()](#resetValue)
-  - [getErrorMessage()](#getErrorMessage)
-  - [getErrorMessages()](#getErrorMessages)
-  - [isValid()](#isValid)
-  - [isValidValue()](#isValidValue)
-  - [isRequired()](#isRequired)
-  - [showRequired()](#showRequired)
-  - [showError()](#showError)
-  - [isPristine()](#isPristine)
-  - [isFormDisabled()](#isFormDisabled)
-  - [isFormSubmitted()](#isFormSubmitted)
-  - [formNoValidate](#formNoValidate)
+  - [setValue()](#setValue)
+  - [showError](#showError)
+  - [showRequired](#showRequired)
+  - [validationError](#validationError)
+  - [validationErrors](#validationErrors)
+  - [validations](#validations)
+  - [value](#value)
 - [propTypes](#propTypes)
 - [addValidationRule](#addValidationRule)
 - [Validators](#validators)
@@ -211,6 +212,25 @@ argument and optionally invalidate the form by passing `true` as the second argu
 validation. This is also passed as the third parameter to the [`onSubmit`](#onSubmit), [`onValidSubmit`](#onValid) or
 [`onInvalidSubmit`](#onInvalid).
 
+#### <a id="updateInputsWithValue">updateInputsWithValue(values)</a>
+
+```jsx
+class MyForm extends React.Component {
+  someFunction = () => {
+    this.refs.form.updateInputsWithValue({
+      email: '[email protected]',
+      'field[10]': 'value!',
+    });
+  };
+  render() {
+    return <Formsy ref="form">...</Formsy>;
+  }
+}
+```
+
+Manually set the form fields values by taking an object that maps field name to value as the first argument and
+optionally validate the inputs by passing `true` as the second argument.
+
 #### <a id="preventExternalInvalidation">preventExternalInvalidation</a>
 
 ```jsx
@@ -245,7 +265,7 @@ class MyInput extends React.Component {
   render() {
     return (
       <div>
-        <input value={this.props.getValue()} onChange={e => this.props.setValue(e.target.value)} />
+        <input value={this.props.value} onChange={e => this.props.setValue(e.target.value)} />
       </div>
     );
   }
@@ -293,9 +313,8 @@ class MyForm extends React.Component {
 <MyInput name="email" value="My initial value" />
 ```
 
-You should always use the [**getValue()**](#getvalue) method inside your formsy form element. To pass an initial value,
-use the value attribute. This value will become the "pristine" value and any reset of the form will bring back this
-value.
+To pass an initial value, use the value attribute. This value will become the "pristine" value and any reset of the form
+will bring back this value.
 
 #### <a id="validations">validations</a>
 
@@ -371,12 +390,12 @@ A property that tells the form that the form input component value is required.
 
 Would be typical for a checkbox type of form element that must be checked, e.g. agreeing to Terms of Service.
 
-#### <a id="getvalue">getValue()</a>
+#### <a id="value">value</a>
 
 ```jsx
 class MyInput extends React.Component {
   render() {
-    return <input type="text" onChange={this.changeValue} value={this.props.getValue()} />;
+    return <input type="text" onChange={this.changeValue} value={this.props.value} />;
   }
 }
 ```
@@ -391,7 +410,7 @@ class MyInput extends React.Component {
     this.props.setValue(event.currentTarget.value);
   };
   render() {
-    return <input type="text" onChange={this.changeValue} value={this.props.getValue()} />;
+    return <input type="text" onChange={this.changeValue} value={this.props.value} />;
   }
 }
 ```
@@ -413,8 +432,8 @@ class MyInput extends React.Component {
   render() {
     return (
       <div>
-        <input type="text" onChange={this.changeValue} value={this.props.getValue()} />
-        <button onClick={this.props.resetValue()}>Reset</button>
+        <input type="text" onChange={this.changeValue} value={this.props.value} />
+        <button onClick={this.props.resetValue}>Reset</button>
       </div>
     );
   }
@@ -423,7 +442,7 @@ class MyInput extends React.Component {
 
 Resets to empty value. This will run a **setState()** on the component and do a render.
 
-#### <a id="getErrorMessage">getErrorMessage()</a>
+#### <a id="errorMessage">errorMessage</a>
 
 ```jsx
 class MyInput extends React.Component {
@@ -433,43 +452,43 @@ class MyInput extends React.Component {
   render() {
     return (
       <div>
-        <input type="text" onChange={this.changeValue} value={this.props.getValue()} />
-        <span>{this.props.getErrorMessage()}</span>
+        <input type="text" onChange={this.changeValue} value={this.props.value} />
+        <span>{this.props.errorMessage}</span>
       </div>
     );
   }
 }
 ```
 
-Will return the validation message set if the form input component is invalid. If form input component is valid it
-returns **null**.
+Will contain the validation message set if the form input component is invalid. If form input component is valid it will
+be **null**.
 
-#### <a id="getErrorMessages">getErrorMessages()</a>
+#### <a id="errorMessages">errorMessages</a>
 
-Will return the validation messages set if the form input component is invalid. If form input component is valid it
-returns empty array.
+Will contain the validation messages set if the form input component is invalid. If form input component is valid it
+will be an empty array.
 
-#### <a id="isValid">isValid()</a>
+#### <a id="isValid">isValid</a>
 
 ```jsx
 class MyInput extends React.Component {
   changeValue = event => {
     this.props.setValue(event.currentTarget.value);
   };
   render() {
-    var face = this.props.isValid() ? ':-)' : ':-(';
+    var face = this.props.isValid ? ':-)' : ':-(';
     return (
       <div>
         <span>{face}</span>
-        <input type="text" onChange={this.changeValue} value={this.props.getValue()} />
-        <span>{this.props.getErrorMessage()}</span>
+        <input type="text" onChange={this.changeValue} value={this.props.value} />
+        <span>{this.props.errorMessage}</span>
       </div>
     );
   }
 }
 ```
 
-Returns the valid state of the form input component.
+The valid state of the form input component.
 
 #### <a id="isValidValue">isValidValue()</a>
 
@@ -483,7 +502,7 @@ class MyInput extends React.Component {
     }
   }
   render() {
-    return <input type="text" onChange={this.changeValue} value={this.props.getValue()}/>;
+    return <input type="text" onChange={this.changeValue} value={this.props.value}/>;
   }
 });
 
@@ -498,7 +517,7 @@ class MyForm extends React.Component {
 }
 ```
 
-#### <a id="isRequired">isRequired()</a>
+#### <a id="isRequired">isRequired</a>
 
 ```jsx
 class MyInput extends React.Component {
@@ -509,53 +528,53 @@ class MyInput extends React.Component {
     return (
       <div>
         <span>
-          {this.props.label} {this.props.isRequired() ? '*' : null}
+          {this.props.label} {this.props.isRequired ? '*' : null}
         </span>
-        <input type="text" onChange={this.changeValue} value={this.props.getValue()} />
-        <span>{this.props.getErrorMessage()}</span>
+        <input type="text" onChange={this.changeValue} value={this.props.value} />
+        <span>{this.props.errorMessage}</span>
       </div>
     );
   }
 }
 ```
 
-Returns true if the required property has been passed.
+True if the required property has been passed.
 
-#### <a id="showRequired">showRequired()</a>
+#### <a id="showRequired">showRequired</a>
 
 ```jsx
 class MyInput extends React.Component {
   changeValue = event => {
     this.props.setValue(event.currentTarget.value);
   };
   render() {
-    var className = this.props.showRequired() ? 'required' : '';
+    var className = this.props.showRequired ? 'required' : '';
     return (
       <div className={className}>
-        <input type="text" onChange={this.changeValue} value={this.props.getValue()} />
-        <span>{this.props.getErrorMessage()}</span>
+        <input type="text" onChange={this.changeValue} value={this.props.value} />
+        <span>{this.props.errorMessage}</span>
       </div>
     );
   }
 }
 ```
 
-Lets you check if the form input component should indicate if it is a required field. This happens when the form input
-component value is empty and the required prop has been passed.
+True if the form input component should indicate if it is a required field. This happens when the form input component
+value is empty and the required prop has been passed.
 
-#### <a id="showError">showError()</a>
+#### <a id="showError">showError</a>
 
 ```jsx
 class MyInput extends React.Component {
   changeValue = event => {
     this.props.setValue(event.currentTarget.value);
   };
   render() {
-    var className = this.props.showRequired() ? 'required' : this.props.showError() ? 'error' : '';
+    var className = this.props.showRequired ? 'required' : this.props.showError ? 'error' : '';
     return (
       <div className={className}>
-        <input type="text" onChange={this.changeValue} value={this.props.getValue()} />
-        <span>{this.props.getErrorMessage()}</span>
+        <input type="text" onChange={this.changeValue} value={this.props.value} />
+        <span>{this.props.errorMessage}</span>
       </div>
     );
   }
@@ -565,7 +584,7 @@ class MyInput extends React.Component {
 Lets you check if the form input component should indicate if there is an error. This happens if there is a form input
 component value and it is invalid or if a server error is received.
 
-#### <a id="isPristine">isPristine()</a>
+#### <a id="isPristine">isPristine</a>
 
 ```jsx
 class MyInput extends React.Component {
@@ -575,8 +594,8 @@ class MyInput extends React.Component {
   render() {
     return (
       <div>
-        <input type="text" onChange={this.changeValue} value={this.props.getValue()} />
-        <span>{this.props.isPristine() ? 'You have not touched this yet' : ''}</span>
+        <input type="text" onChange={this.changeValue} value={this.props.value} />
+        <span>{this.props.isPristine ? 'You have not touched this yet' : ''}</span>
       </div>
     );
   }
@@ -588,14 +607,14 @@ By default all Formsy input elements are pristine, which means they are not "tou
 
 **note!** When the form is reset (using `reset(...)`) the inputs are reset to their pristine state.
 
-#### <a id="isFormDisabled">isFormDisabled()</a>
+#### <a id="isFormDisabled">isFormDisabled</a>
 
 ```jsx
 class MyInput extends React.Component {
   render() {
     return (
       <div>
-        <input type="text" value={this.props.getValue()} disabled={this.props.isFormDisabled()} />
+        <input type="text" value={this.props.value} disabled={this.props.isFormDisabled} />
       </div>
     );
   }
@@ -604,25 +623,25 @@ class MyInput extends React.Component {
 React.render(<Formsy disabled={true} />);
 ```
 
-You can now disable the form itself with a prop and use **isFormDisabled()** inside form elements to verify this prop.
+You can disable the form itself with a prop and use **isFormDisabled** inside form elements to verify this prop.
 
-#### <a id="isFormSubmitted">isFormSubmitted()</a>
+#### <a id="isFormSubmitted">isFormSubmitted</a>
 
 ```jsx
 class MyInput extends React.Component {
   render() {
-    var error = this.props.isFormSubmitted() ? this.props.getErrorMessage() : null;
+    var error = this.props.isFormSubmitted ? this.props.errorMessage : null;
     return (
       <div>
-        <input type="text" value={this.props.getValue()} />
+        <input type="text" value={this.props.value} />
         {error}
       </div>
     );
   }
 }
 ```
 
-You can check if the form has been submitted.
+True if the form has been submitted.
 
 #### <a id="formNoValidate">formNoValidate</a>
 
@@ -856,7 +875,7 @@ Return true if the value from input component matches value passed (==).
 <MyInput name="repeated_password" validations="equalsField:password"/>
 ```
 
-Return true if the value from input component matches value passed (==).
+Return true if the value from input component matches value of field passed (==).
 
 **isLength:length**
 

diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2014-2016 PatientSky A/S
+Copyright (c) 2014-2019 The Formsy Authors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal