Skip to content

Commit

Permalink
Merge d0d2c3f into 5a2753c
Browse files Browse the repository at this point in the history
  • Loading branch information
@franleplant
franleplant authored Nov 21, 2017
2 parents 5a2753c + d0d2c3f commit da9f70d
Show file tree
Hide file tree
Showing 74 changed files with 10,831 additions and 2,212 deletions.
177 changes: 80 additions & 97 deletions API.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@

> Autogenerated from source code
# index <small>Module [src](./src/index.ts#L1)</small> <a id="#268"></a>
# index <small>Module [src](./src/index.ts#L1)</small> <a id="#251"></a>

## Reform <small>Object literal [src](./src/index.ts#L29)</small> <a id="#269"></a>
## Reform <small>Object literal [src](./src/index.ts#L22)</small> <a id="#252"></a>
`default` export for the entire library.

```javascript
Expand All @@ -22,14 +22,14 @@
{
core: [./src/core](#user-content-#178)
reactHelpers: [./src/reactHelpers](#user-content-#201)
reactMixins: [./src/reactMixins](#user-content-#242)
reactMixins: [./src/reactMixins](#user-content-#233)
types: [./src/types](#user-content-#1)
validators: [./src/validators](./src/validators)
}
</big></pre>
# core <small>Module [src](./src/core.ts#L1)</small> <a id="#178"></a>

## fieldIsValid <small>Function [src](./src/core.ts#L69)</small> <a id="#185"></a>
## fieldIsValid <small>Function [src](./src/core.ts#L73)</small> <a id="#185"></a>

Evaluate whether a field is valid or not.

Expand Down Expand Up @@ -58,7 +58,7 @@ fieldIsValid(value: string | number, rules: [Rules](#user-content-#9)): boolean
fieldIsValid(fieldErrors: [FieldErrors](#user-content-#15)): boolean
</pre></big>

## formIsValid <small>Function [src](./src/core.ts#L119)</small> <a id="#195"></a>
## formIsValid <small>Function [src](./src/core.ts#L125)</small> <a id="#195"></a>

Analogous to `fieldIsValid` but operating for forms. There are also
two variants, the first one accepts values and rules and calculates the
Expand All @@ -77,7 +77,7 @@ formIsValid(fieldsValues: [Fields](#user-content-#21), rulesMap: [RulesMap](#use
formIsValid(formErrors: [FormErrors](#user-content-#18)): boolean
</pre></big>

## validateField <small>Function [src](./src/core.ts#L41)</small> <a id="#181"></a>
## validateField <small>Function [src](./src/core.ts#L40)</small> <a id="#181"></a>

Validate `value` against `rules` and return which rules are valid with a value `false`
and which rules ar invalid with a value of `true`.
Expand Down Expand Up @@ -115,7 +115,7 @@ that there is an error, otherwise, it does not have an error, and that rule is p
validateField(value: string | number, rules: [Rules](#user-content-#9)): [FieldErrors](#user-content-#15)
</pre></big>

## validateForm <small>Function [src](./src/core.ts#L100)</small> <a id="#191"></a>
## validateForm <small>Function [src](./src/core.ts#L103)</small> <a id="#191"></a>

A simple generalization of `validateField` but for an entire form.
It will basically run `validateField` on each `value` and each `rules`
Expand All @@ -129,7 +129,7 @@ validateForm(fieldsValues: [Fields](#user-content-#21), rulesMap: [RulesMap](#us

# reactHelpers <small>Module [src](./src/reactHelpers.ts#L1)</small> <a id="#201"></a>

## fieldErrors <small>Function [src](./src/reactHelpers.ts#L234)</small> <a id="#234"></a>
## fieldErrors <small>Function [src](./src/reactHelpers.ts#L242)</small> <a id="#227"></a>

Another error helper to make displaying field errors easier. Instead of `fieldIfError` which
is more procedural, use this helper if you have an structured way of displaying your errors.
Expand Down Expand Up @@ -157,10 +157,10 @@ Tags


<big><pre>
fieldErrors(this: [ValidationAbleInstance](#user-content-#24), fieldName: string): Array\<Array\<any\>\>
fieldErrors(fieldName: string): Array\<undefined\>
</pre></big>

## fieldIfError <small>Function [src](./src/reactHelpers.ts#L197)</small> <a id="#229"></a>
## fieldIfError <small>Function [src](./src/reactHelpers.ts#L203)</small> <a id="#223"></a>

Simple helper to make conditional displaying field errors more ergonomic.

Expand All @@ -175,10 +175,10 @@ This function is purely for ergonomic purposes.
<big><pre>
fieldIfError(this: [ValidationAbleInstance](#user-content-#24), fieldName: string, errorKey: string): boolean
fieldIfError(fieldName: string, errorKey: string): boolean
</pre></big>
## fieldIsValid <small>Function [src](./src/reactHelpers.ts#L158)</small> <a id="#222"></a>
## fieldIsValid <small>Function [src](./src/reactHelpers.ts#L164)</small> <a id="#218"></a>
Calculate whether a field is valid or not depending on the already calculated
`fieldErrors` stored in the state.
Expand All @@ -190,10 +190,10 @@ Use it to render _invalid_ state in your inputs.
<big><pre>
fieldIsValid(this: [ValidationAbleInstance](#user-content-#24), fieldName: string): boolean
fieldIsValid(fieldName: string): boolean
</pre></big>
## formIsValid <small>Function [src](./src/reactHelpers.ts#L178)</small> <a id="#226"></a>
## formIsValid <small>Function [src](./src/reactHelpers.ts#L185)</small> <a id="#221"></a>
Calculate the form's validity from the `values` in `this.state.fields` and
the rules in `this.validationRules`.
Expand All @@ -206,10 +206,10 @@ fieldIsValid(this: [ValidationAbleInstance](#user-content-#24), fieldName: strin
<big><pre>
formIsValid(this: [ValidationAbleInstance](#user-content-#24)): boolean
formIsValid(): boolean
</pre></big>
## mapFieldErrors <small>Function [src](./src/reactHelpers.ts#L288)</small> <a id="#238"></a>
## mapFieldErrors <small>Function [src](./src/reactHelpers.ts#L298)</small> <a id="#230"></a>
An abstraction of `fieldErrors` for structured field error rendering.
Use it if you have a very standard way of displaying field errors.
Expand Down Expand Up @@ -252,10 +252,10 @@ Tags
<big><pre>
mapFieldErrors(this: [ValidationAbleInstance](#user-content-#24), fieldName: string): Array\<string\>
mapFieldErrors(fieldName: string): Array\<string\>
</pre></big>
## validateField <small>Function [src](./src/reactHelpers.ts#L76)</small> <a id="#206"></a>
## validateField <small>Function [src](./src/reactHelpers.ts#L83)</small> <a id="#206"></a>
Calculate the validity of a field, by `fieldName`, with a new value and store it in the
`this.state.errors[fieldName]`
Expand Down Expand Up @@ -291,10 +291,10 @@ This function will also set your form to `dirty` in `this.state.formIsDirty`
<big><pre>
validateField(this: [ValidationAbleInstance](#user-content-#24), fieldName: string, value: any): boolean
validateField(fieldName: string, value: any): boolean
</pre></big>
## validateFieldFromState <small>Function [src](./src/reactHelpers.ts#L106)</small> <a id="#211"></a>
## validateFieldFromState <small>Function [src](./src/reactHelpers.ts#L113)</small> <a id="#210"></a>
A minimal variant of `validateField` but with the particularity of using the `value` already set in
your component's state.
Expand All @@ -309,10 +309,10 @@ This function will also set your form to `dirty` in `this.state.formIsDirty`
<big><pre>
validateFieldFromState(this: [ValidationAbleInstance](#user-content-#24), fieldName: string): boolean
validateFieldFromState(fieldName: string): boolean
</pre></big>
## validateForm <small>Function [src](./src/reactHelpers.ts#L121)</small> <a id="#215"></a>
## validateForm <small>Function [src](./src/reactHelpers.ts#L128)</small> <a id="#213"></a>
Calculate the validity of your form from `fieldsValues` as parameters, update your state, and
return whether your form is valid or not.
Expand All @@ -326,10 +326,10 @@ This function will also set your form to `dirty` in `this.state.formIsDirty`
<big><pre>
validateForm(this: [ValidationAbleInstance](#user-content-#24), fieldsValues: [Fields](#user-content-#21)): boolean
validateForm(fieldsValues: [Fields](#user-content-#21)): boolean
</pre></big>
## validateFormFromState <small>Function [src](./src/reactHelpers.ts#L144)</small> <a id="#219"></a>
## validateFormFromState <small>Function [src](./src/reactHelpers.ts#L151)</small> <a id="#216"></a>
Calculate the validity of your form from `fieldsValues` as parameters, update your state, and
return whether your form is valid or not.
Expand All @@ -343,66 +343,29 @@ This function will also set your form to `dirty` in `this.state.formIsDirty`
<big><pre>
validateFormFromState(this: [ValidationAbleInstance](#user-content-#24)): boolean
validateFormFromState(): boolean
</pre></big>
# reactMixins <small>Module [src](./src/reactMixins.ts#L1)</small> <a id="#242"></a>
# reactMixins <small>Module [src](./src/reactMixins.ts#L1)</small> <a id="#233"></a>
## Reform <small>Interface [src](./src/reactMixins.ts#L16)</small> <a id="#243"></a>
## IReform <small>Interface [src](./src/reactMixins.ts#L13)</small> <a id="#234"></a>
Handy interface that contains attributes corresponding to each
`Reform.reactHelpers.*` method.
Used by the `classMixin`.
<big><pre>
{
fieldErrors: [fieldErrors](#user-content-#234);
fieldIfError: [fieldIfError](#user-content-#229);
fieldIsValid: [fieldIsValid](#user-content-#222);
formIsValid: [formIsValid](#user-content-#226);
mapFieldErrors: [mapFieldErrors](#user-content-#238);
fieldErrors: [fieldErrors](#user-content-#227);
fieldIfError: [fieldIfError](#user-content-#223);
fieldIsValid: [fieldIsValid](#user-content-#218);
formIsValid: [formIsValid](#user-content-#221);
mapFieldErrors: [mapFieldErrors](#user-content-#230);
validateField: [validateField](#user-content-#206);
validateFieldFromState: [validateFieldFromState](#user-content-#211);
validateForm: [validateForm](#user-content-#215);
validateFormFromState: [validateFormFromState](#user-content-#219)
validateFieldFromState: [validateFieldFromState](#user-content-#210);
validateForm: [validateForm](#user-content-#213);
validateFormFromState: [validateFormFromState](#user-content-#216)
}
</big></pre>
## classMixin <small>Function [src](./src/reactMixins.ts#L70)</small> <a id="#261"></a>
Class based mixin to auto-bind all `Reform.reactHelpers.*` methods into the `base` Component.
Use it if you want to have all reactHelpers available in your component's instance.
Recommended when using Typescript since will give you good autocomplete type suggestions
support.
Note: This is implementing something very similar to Inheritance Inversion, but it's completely
independent from React.
Example1
```javascript
const MyComponentPlusReform = classMixin(MyComponent);
```
Example 2: with decorators
```javascript
$classMixin
class MyComponent extends React.Component {}
```
NOTE: since limitations of the tool generating the docs I cannot use `@` as decorator, demands.
So replace `$` with `@`
<big><pre>
classMixin(base: [GenericClass](#user-content-#254)\<T\>): [GenericClass](#user-content-#254)\<T & Reform\>
</pre></big>
## functionalMixin <small>Function [src](./src/reactMixins.ts#L116)</small> <a id="#265"></a>
## functionalMixin <small>Function [src](./src/reactMixins.ts#L76)</small> <a id="#248"></a>
Functional mixin to incorporate all reactHelpers methods into your Component's instance.
Expand Down Expand Up @@ -431,6 +394,26 @@ class MyComponent extends React.Component {
functionalMixin(instance: any): void
</pre></big>
## objectMixin <small>Function [src](./src/reactMixins.ts#L38)</small> <a id="#245"></a>
Simplest mixin (well not really a mixin) that binds all
reform helpers to your context and returns an object containing all common helerps.
Use it with typescript to get type checks and autocomplete.
```typescript
class MyForm extends React.Component<any, any> {
reform = objectMixin(this)
}
```
<big><pre>
objectMixin(that: [ValidationAbleInstance](#user-content-#24)): [IReform](#user-content-#234)
</pre></big>
# validators <small>Module [src](./src/validators.ts#L1)</small> <a id="#169"></a>
## validatorInterface <small>Object literal [src](./src/validators.ts#L18)</small> <a id="#170"></a>
Expand Down Expand Up @@ -491,7 +474,7 @@ set: set(key: string, value: [Validator](#user-content-#2)): void
\[fieldName: string\]: [Rules](#user-content-#9)
}
</big></pre>
## ValidationAbleInstance <small>Interface [src](./src/types.ts#L29)</small> <a id="#24"></a>
## ValidationAbleInstance <small>Interface [src](./src/types.ts#L35)</small> <a id="#24"></a>
<big><pre>
{
Expand Down Expand Up @@ -521,7 +504,7 @@ validationRules: [RulesMap](#user-content-#12)
\[ruleKey: string\]: [Validator](#user-content-#2)
}
</big></pre>
## MessageCreator <small>Type alias [src](./src/types.ts#L27)</small> <a id="#36"></a>
## MessageCreator <small>Type alias [src](./src/types.ts#L29)</small> <a id="#36"></a>
<big><pre>
{
Expand Down Expand Up @@ -574,22 +557,22 @@ this.validationRules = {
<big><pre>
{
maxDate: Function
maxMonth: Function
maxNumber: Function
maxTime: Function
maxWeek: Function
minDate: Function
minMonth: Function
minNumber: Function
minTime: Function
minWeek: Function
month: Function
maxDate: [maxDate](#user-content-#91)
maxMonth: [maxMonth](#user-content-#101)
maxNumber: [maxNumber](#user-content-#81)
maxTime: [maxTime](#user-content-#111)
maxWeek: [maxWeek](#user-content-#121)
minDate: [minDate](#user-content-#86)
minMonth: [minMonth](#user-content-#96)
minNumber: [minNumber](#user-content-#76)
minTime: [minTime](#user-content-#106)
minWeek: [minWeek](#user-content-#116)
month: [month](#user-content-#68)
number: [Validator](#user-content-#2)
range: [Validator](#user-content-#2)
time: Function
url: Function
week: Function
time: [time](#user-content-#64)
url: [url](#user-content-#46)
week: [week](#user-content-#72)
color: color(value: any): boolean
date: date(value: any): boolean
email: email(value: string): boolean
Expand Down Expand Up @@ -661,7 +644,7 @@ time(value: string): boolean
# officialValidators/url <small>Module [src](./src/officialValidators/url.ts#L1)</small> <a id="#42"></a>
## url <small>Function [src](./src/officialValidators/url.ts#L12)</small> <a id="#45"></a>
## url <small>Function [src](./src/officialValidators/url.ts#L11)</small> <a id="#45"></a>
Expand Down Expand Up @@ -711,7 +694,7 @@ maxNumber(value: number | string, max: number | string): boolean
# officialValidators/maxTime <small>Module [src](./src/officialValidators/maxTime.ts#L1)</small> <a id="#109"></a>
## maxTime <small>Function [src](./src/officialValidators/maxTime.ts#L4)</small> <a id="#110"></a>
## maxTime <small>Function [src](./src/officialValidators/maxTime.ts#L3)</small> <a id="#110"></a>
Expand All @@ -721,7 +704,7 @@ maxTime(value: string, max: string): boolean
# officialValidators/minTime <small>Module [src](./src/officialValidators/minTime.ts#L1)</small> <a id="#104"></a>
## minTime <small>Function [src](./src/officialValidators/minTime.ts#L4)</small> <a id="#105"></a>
## minTime <small>Function [src](./src/officialValidators/minTime.ts#L3)</small> <a id="#105"></a>
Expand All @@ -741,12 +724,12 @@ month(value: string): boolean
# utils <small>Module [src](./src/utils.ts#L1)</small> <a id="#48"></a>
## parseMonth <small>Function [src](./src/utils.ts#L2)</small> <a id="#49"></a>
## parseMonth <small>Function [src](./src/utils.ts#L3)</small> <a id="#49"></a>
<big><pre>
parseMonth(value: string): number
parseMonth(value: string): undefined
</pre></big>
## parseTime <small>Function [src](./src/utils.ts#L49)</small> <a id="#59"></a>
Expand All @@ -757,15 +740,15 @@ parseMonth(value: string): number
parseTime(time: string): number
</pre></big>
## parseWeek <small>Function [src](./src/utils.ts#L16)</small> <a id="#52"></a>
## parseWeek <small>Function [src](./src/utils.ts#L17)</small> <a id="#52"></a>
<big><pre>
parseWeek(value: string): number
parseWeek(value: string): undefined
</pre></big>
## weeksInYear <small>Function [src](./src/utils.ts#L35)</small> <a id="#55"></a>
## weeksInYear <small>Function [src](./src/utils.ts#L36)</small> <a id="#55"></a>
Expand Down
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
# 6.0.0

Removed `Reform.reactMixins.classMixin` because there's no easy way to do that we Typescript and it
was too much of headache. Use `objectMixin` instead.
Loading

0 comments on commit da9f70d

Please sign in to comment.