Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

v6.0.0 #20

Merged
merged 11 commits into from
Nov 23, 2017
Merged

v6.0.0 #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
b3a4c76
autoformat with prettier
franleplant Nov 17, 2017
60e5740
autoformat with prettier
franleplant Nov 17, 2017
3f9876f
Prettier, typecheck tests, link examples script
franleplant Nov 20, 2017
8fbded3
objectMixin for typescript and more tests
franleplant Nov 21, 2017
320c95c
add examples in Typescript
franleplant Nov 21, 2017
084a30a
update docs and add a changelog
franleplant Nov 21, 2017
37a01d5
update examples js
franleplant Nov 21, 2017
8fb49ac
better npm scripts for running examples
franleplant Nov 21, 2017
5f7df13
add example using Radios
franleplant Nov 21, 2017
688473a
fix doc generator
franleplant Nov 21, 2017
d0d2c3f
generate files
franleplant Nov 21, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
177 changes: 80 additions & 97 deletions API.md
View file
Open in desktop
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
Open in desktop
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