Skip to content

Commit 576d425

Browse files
author
Vlad Balin
committed
added tests
1 parent 646fbc5 commit 576d425

File tree

13 files changed

+21299
-56
lines changed

13 files changed

+21299
-56
lines changed

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55

66
## Directory-based project format:
77
.idea/
8+
node_modules
89
# if you remove the above rule, at least ignore the following:
910

1011
# User-specific stuff:

LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License
2+
3+
Copyright (c) 2010-2016 Google, Inc. http://angularjs.org
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in
13+
all copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
THE SOFTWARE.

README.md

Lines changed: 65 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,110 @@
1-
Simple solution for React two-way data binding and forms validation.
2-
3-
# Features
4-
5-
- All major data binding scenarios are supported, including radio groups.
6-
- Links to state's attributes.
7-
- Links to deeply nested object and array elements with purely functional state updates.
8-
- Ad-hoc boolean links for values equality and presence in array.
1+
Advanced React links for purely functional two-way data binding.
2+
3+
- Implements standard React 0.14 links API
4+
- API extensions:
5+
- Declarative binding to event handlers.
6+
- Simple form validation.
7+
- Link to plain object and array members with pure updates.
8+
- Derivative boolean links for checkbox and radio groups.
9+
- Reference implementation for 'linked' tags:
10+
- Standard tags: `<Input />` (with validation), `<Select />`, `<TextArea />`
11+
- Custom tags: `<Radio />`, `<Checkbox />`
912

1013
```javascript
11-
var phonebookLink = Link.state( this, 'phonebook' );
14+
var linkToArray = Link.state( this, 'phonebook' );
1215

13-
var list = phonebookLink.map( ( itemLink, idx ) => (
14-
<div key={ idx }>
15-
<input valueLink={ itemLink.at( 'name' ) } />
16+
var list = linkToArray.map( ( itemLink, i ) => (
17+
<div key={ i }>
18+
<Input valueLink={ itemLink.at( 'name' ) } />
1619
</div>
1720
));
1821
```
1922

20-
This technology is the part of [NestedReact](https://github.com/Volicon/NestedReact) architecture, helping you to build
21-
large React applications with [full power of OO models](https://github.com/Volicon/NestedTypes/).
22-
TodoMVC example is [here](https://github.com/gaperton/todomvc-nestedreact).
23+
> This technology is one of the key components of [NestedReact](https://github.com/Volicon/NestedReact) architecture,
24+
> helping you to build large-scale React applications with a powerful and fast [NestedTypes](https://github.com/Volicon/NestedTypes/)
25+
> classical OO models.
2326
2427
# Installation
2528

2629
`npm install valuelink`
2730

2831
CommonJS module, MIT License. No side dependencies.
2932

33+
```javascript
34+
// Links
35+
import Link from 'valuelink'
36+
37+
// React components with linked tags
38+
import { Input } from 'valuelink/tags.jsx'
39+
```
40+
3041
# API
3142

3243
## Create link
3344

34-
- Create link to react component's state attribute:
45+
- Create custom link: `new Link( value, requestChange )`
3546

3647
```javascript
37-
var nameLink = Link.state( this, 'name' );
48+
var customLink = new Link( this.value, x => this.value = x );
3849
```
3950

40-
- Create custom link:
51+
- Create link to react component's state attribute:
4152
4253
```javascript
43-
var customLink = new Link( this.value, x => this.value = x );
54+
var nameLink = Link.state( this, 'name' );
4455
```
4556
4657
## Update link
4758
48-
- Update linked value:
59+
- Set link value: `link.set( x )` or `link.requestChange( x )`
4960
5061
```javascript
51-
<button onClick={ link.update( x => x + 1 ) } />
62+
<button onClick={ () => boolLink.set( !boolLink.value ) } />
5263
```
53-
or
64+
65+
- Update link value: `link.update( prevValue => newValue )`
66+
5467
```javascript
55-
<button onClick={ () => link.set( link.value + 1 ) } />
68+
<button onClick={ () => boolLink.update( x => !x ) } />
5669
```
57-
or
70+
71+
- Create action to handle UI event: `link.action( ( prevValue, Event ) => newValue )`
72+
5873
```javascript
59-
<button onClick={ () => link.requestChange( link.value + 1 ) } />
74+
<button onClick={ boolLink.action( x => !x ) } />
75+
...
76+
const setValue = ( x, e ) => e.target.value;
77+
...
78+
<input value={ link.value }
79+
onChange={ link.action( setValue ) } />
6080
```
6181
6282
## Links validation
6383
84+
Links has `link.check( condition, error = 'Invalid value' )` method which can be used to
85+
check the sequence of conditions. Checks can be chained.
86+
87+
`condition` is predicate function `linkValue => isValid` taking link value as an argument.
88+
Whenever `condition` returns falsy value, `link.error` will take the value of corresponding `error`.
89+
`link.error` field may be analyzed by custom `<Input />` control to indicate an error.
90+
91+
This mechanics can be used to add ad-hoc validation in `render`.
92+
6493
- Simple asserts:
6594
6695
```javascript
6796
var numLink = List.state( this, 'num' )
6897
.check( x => x >= 0 && x <=5 );
6998
70-
console.log( numLink.validationError );
99+
console.log( numLink.error );
71100
```
72101
73102
- Validation asserts with custom error objects
74103
```javascript
75104
var numLink = List.state( this, 'num' )
76105
.check( x => x >= 0 && x <=5, 'Number must be between 0 and 5' );
77106
78-
console.log( numLink.validationError );
107+
console.log( numLink.error );
79108
```
80109
81110
- Chained validation asserts
@@ -84,10 +113,17 @@ CommonJS module, MIT License. No side dependencies.
84113
.check( x => x >= 0, 'Negative numbers are not allowed' )
85114
.check( x => x <= 5, 'Number should be not greater than 5' );
86115
87-
console.log( numLink.validationError );
116+
console.log( numLink.error );
88117
```
89118
90-
## Links to object and arrays
119+
## Links to object and arrays
120+
121+
If linked value is plain object or array, it's possible to generate
122+
links to their members. Whenever this derivative links will be
123+
updated, it will lead to proper purely functional update of the
124+
whole structure. I.e. if you have array in component state,
125+
and link to its element will be updated, it will lead to proper
126+
update of stateful component.
91127

92128
- Take link to array or object member
93129
```javascript

0 commit comments

Comments
 (0)