Rewrite API docs to match Formsy 2.x breaking changes

formsy · Nov 23, 2019 · 29bb4ca · 29bb4ca
1 parent 39be45c
commit 29bb4ca
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 93 deletions.
diff --git a/API.md b/API.md
@@ -1,40 +1,40 @@
 # 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)
+ - [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)
@@ -245,7 +245,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 +293,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>
 
@@ -368,12 +367,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} />;
  }
 }
 ```
@@ -388,7 +387,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} />;
  }
 }
 ```
@@ -410,8 +409,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>
  );
  }
@@ -420,7 +419,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 {
@@ -430,43 +429,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>
 
@@ -480,7 +479,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}/>;
  }
 });
 
@@ -495,7 +494,7 @@ class MyForm extends React.Component {
 }
 ```
 
-#### <a id="isRequired">isRequired()</a>
+#### <a id="isRequired">isRequired</a>
 
 ```jsx
 class MyInput extends React.Component {
@@ -506,53 +505,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>
  );
  }
@@ -562,7 +561,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 {
@@ -572,8 +571,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>
  );
  }
@@ -585,14 +584,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>
  );
  }
@@ -601,25 +600,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>
 
@@ -851,7 +850,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