Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitd7a742a

Browse files
committed
Added tests and docs.
1 parentfb75b91 commitd7a742a

File tree

9 files changed

+2792
-71
lines changed

9 files changed

+2792
-71
lines changed

‎.babelrc‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
{
22
"env": {
33
"test": {
4-
"presets": ["es2015"],
4+
"presets": ["es2015","react"],
55
"plugins": ["syntax-object-rest-spread","transform-object-rest-spread"]
66
},
77
"production": {
8-
"presets": ["es2015-rollup"],
8+
"presets": ["es2015-rollup","react"],
99
"plugins": ["syntax-object-rest-spread","transform-object-rest-spread"]
1010
}
1111
}

‎README.md‎

Lines changed: 97 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,98 @@
1+
<divalign=center>
2+
13
#react-input-handler
2-
⚡️ Utility function to handle input changes in React.
4+
5+
⚡️ Utility function to handle input changes in React based on[React's handling multiple input docs](https://reactjs.org/docs/forms.html#handling-multiple-inputs).
6+
7+
</div>
8+
9+
#Installation
10+
11+
```shell
12+
yarn add react-input-handler
13+
```
14+
15+
or
16+
17+
```shell
18+
npm install react-inpu-handler --save
19+
```
20+
21+
#Usage
22+
23+
Two things needs to be done to use**react-input-handler**:
24+
25+
1. Create a bound function (see 2nd line in constructor).
26+
2. Attach the bound function to`onChange` events.
27+
28+
##Example
29+
30+
```js
31+
importReactfrom'react'
32+
importReactInputHandlerfrom'react-input-handler'
33+
34+
classFormextendsReact.Component {
35+
constructor(props) {
36+
super(props)
37+
this.inputHandler=ReactInputHandler.bind(this)
38+
this.handleSubmit.bind(this)
39+
}
40+
render() {
41+
return (
42+
<form>
43+
<label>Fullname:</label>
44+
<input type="text" name="fullname" onChange={this.inputHandler}/>
45+
46+
<label>Biography:</label>
47+
<textarea type="text" name="bio" onChange={this.inputHandler}/>
48+
49+
<label> Are you a developer?</label>
50+
<input type="checkbox" name="developer" value="yes"/>
51+
52+
<button onClick={this.handleSubmit}>Submit</button>
53+
</form>
54+
)
55+
}
56+
57+
handleSubmit(event) {
58+
event.preventDefault()
59+
console.log(this.state)
60+
// Output: { fullanme: "", bio: "", developer: "" }
61+
}
62+
}
63+
```
64+
65+
# Documentation
66+
67+
**React-input-handler** a single function which accept an event as unique argument.
68+
69+
The objective is simple: handle input changes and persist them into the component's state.
70+
71+
# Development
72+
73+
1. Clone and fork this repo.
74+
2. Install dependencies running:`yarn` or`npm install`.
75+
3. [Run tests](#test).
76+
4. Prepare a pull request.
77+
78+
## Test
79+
80+
-`yarn test` - to run all tests.
81+
-`yarn test----watch` to run all tests in watch mode.
82+
83+
## Publish
84+
85+
1. Bump version:`npm versionx.x.x-m'Version %s.'`.
86+
2. Publish to NPM registry:`npm publish`.
87+
3. Publish the new created tag:`git push origin--tags`.
88+
89+
90+
---
91+
92+
<div align=center>
93+
94+
Made with :heart: by [Rubens Mariuzzo](https://github.com/rmariuzzo).
95+
96+
[MIT license](LICENSE)
97+
98+
</div>

‎package.json‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,25 @@
1616
],
1717
"devDependencies": {
1818
"babel-core":"^6.26.0",
19+
"babel-jest":"^21.2.0",
1920
"babel-plugin-transform-object-rest-spread":"^6.26.0",
2021
"babel-preset-es2015":"^6.24.1",
2122
"babel-preset-es2015-rollup":"^3.0.0",
23+
"babel-preset-react":"^6.24.1",
2224
"cross-env":"^5.1.1",
25+
"enzyme":"^3.1.1",
26+
"enzyme-adapter-react-16":"^1.0.4",
27+
"jest":"^21.2.1",
28+
"react":"^16.1.1",
29+
"react-dom":"^16.1.1",
2330
"rollup":"^0.51.5",
2431
"rollup-plugin-babel":"^3.0.2",
2532
"rollup-plugin-filesize":"^1.4.2",
2633
"rollup-plugin-uglify":"^2.0.1",
2734
"uglify-es":"^3.1.9"
2835
},
2936
"scripts": {
30-
"build":"cross-env NODE_ENV=production rollup -c"
37+
"build":"cross-env NODE_ENV=production rollup -c",
38+
"test":"jest"
3139
}
3240
}

‎tests/input.test.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
'use strict'
2+
3+
import'./requestAnimationFrame'
4+
5+
importReactfrom'react'
6+
importEnzymefrom'enzyme'
7+
importReactSixteenAdapterfrom'enzyme-adapter-react-16'
8+
9+
importInputHandlerfrom'../src/ReactInputHandler'
10+
import{createForm}from'./utils'
11+
12+
Enzyme.configure({adapter:newReactSixteenAdapter()})
13+
14+
describe('react-input-handler',()=>{
15+
16+
it('persist <input /> changes into state',()=>{
17+
constform=Enzyme.mount(createForm('input',{
18+
type:'text',
19+
name:'test',
20+
value:'hello'
21+
}))
22+
23+
form.find('input').simulate('change')
24+
expect(form.state('test')).toBe('hello')
25+
})
26+
27+
})

‎tests/requestAnimationFrame.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
global.requestAnimationFrame=(callback)=>{
2+
setTimeout(callback,0)
3+
}

‎tests/select.test.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
'use strict'
2+
3+
import'./requestAnimationFrame'
4+
5+
importReactfrom'react'
6+
importEnzymefrom'enzyme'
7+
importReactSixteenAdapterfrom'enzyme-adapter-react-16'
8+
9+
importInputHandlerfrom'../src/ReactInputHandler'
10+
import{createForm}from'./utils'
11+
12+
Enzyme.configure({adapter:newReactSixteenAdapter()})
13+
14+
describe('react-input-handler',()=>{
15+
16+
it('persist <select /> changes into state when no option selected',()=>{
17+
constform=Enzyme.mount(createForm('select',{name:'number'},(
18+
[
19+
<optionkey="0"value="none">Choose a number</option>,
20+
<optionkey="1"value="one">One</option>,
21+
<optionkey="2"value="two">Two</option>,
22+
<optionkey="3"value="three">Three</option>,
23+
]
24+
)))
25+
26+
form.find('select').simulate('change')
27+
expect(form.state('number')).toBe('none')
28+
})
29+
30+
it('persist <select /> changes into state when a option is selected',()=>{
31+
constform=Enzyme.mount(createForm('select',{name:'test',defaultValue:'one'},(
32+
[
33+
<optionkey="0"value="none">Choose a number</option>,
34+
<optionkey="1"value="one">One</option>,
35+
<optionkey="2"value="two">Two</option>,
36+
<optionkey="3"value="three">Three</option>,
37+
]
38+
)))
39+
40+
form.find('select').simulate('change')
41+
expect(form.state('test')).toBe('one')
42+
})
43+
44+
it('persist <select multiple /> changes into state when multiple options are selected',()=>{
45+
constform=Enzyme.mount(createForm('select',{name:'test',multiple:true,defaultValue:['one','two']},(
46+
[
47+
<optionkey="0"value="none">Choose a number</option>,
48+
<optionkey="1"value="one">One</option>,
49+
<optionkey="2"value="two">Two</option>,
50+
<optionkey="3"value="three">Three</option>,
51+
]
52+
)))
53+
54+
form.find('select').simulate('change')
55+
expect(form.state('test')).toEqual(['one','two'])
56+
})
57+
58+
})

‎tests/textarea.test.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
'use strict'
2+
3+
import'./requestAnimationFrame'
4+
5+
importReactfrom'react'
6+
importEnzymefrom'enzyme'
7+
importReactSixteenAdapterfrom'enzyme-adapter-react-16'
8+
9+
importInputHandlerfrom'../src/ReactInputHandler'
10+
import{createForm}from'./utils'
11+
12+
Enzyme.configure({adapter:newReactSixteenAdapter()})
13+
14+
describe('react-input-handler',()=>{
15+
16+
it('persist <textarea /> changes into state',()=>{
17+
constform=Enzyme.mount(createForm('textarea',{
18+
name:'test',
19+
value:'hello'
20+
}))
21+
22+
form.find('textarea').simulate('change')
23+
expect(form.state('test')).toBe('hello')
24+
})
25+
26+
})

‎tests/utils.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
importReactfrom'react'
2+
3+
importInputHandlerfrom'../src/ReactInputHandler'
4+
5+
functioncreateForm(element,props,children){
6+
7+
classFormextendsReact.Component{
8+
render(){
9+
return(
10+
<form>
11+
{React.createElement(element,{
12+
...props,
13+
onChange:InputHandler.bind(this)
14+
},children)}
15+
</form>
16+
)
17+
}
18+
}
19+
20+
return<Form/>
21+
}
22+
23+
export{
24+
createForm
25+
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp