Skip to content

Commit a927aac

Browse files
ariesjiaariesjia
committed
chore: update story
1 parent 0ab8545 commit a927aac

File tree

6 files changed

+200
-151
lines changed

6 files changed

+200
-151
lines changed

‎src/__stories__/0-home.story.tsx

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import * as React from 'react'
2+
import {Checkbox, CheckboxGroup} from 'react-checkbox-group'
3+
import {storiesOf} from '@storybook/react'
4+
import {action} from '@storybook/addon-actions'
5+
import { linkTo } from '@storybook/addon-links'
6+
7+
import useForm from '../index'
8+
9+
storiesOf('home', module)
10+
.add('home', () => (
11+
<div className="container">
12+
<h1 className="title">rc-use-form</h1>
13+
<h2 className="subtitle">manage form state use React Hooks. </h2>
14+
<div className="content">
15+
<a href="https://www.npmjs.com/package/rc-use-form" rel="nofollow"><img src="https://camo.githubusercontent.com/5f0c4e29af78c8b828b21f05f48124a4ac4e713c/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f72632d7573652d666f726d2e737667" alt="NPM" /></a>
16+
<a href="https://travis-ci.org/ariesjia/react-use-form" rel="nofollow"><img src="https://camo.githubusercontent.com/458a1d86ca583f1da05a0c334306b1dba6640121/68747470733a2f2f7472617669732d63692e6f72672f61726965736a69612f72656163742d7573652d666f726d2e7376673f6272616e63683d6d6173746572" alt="Build Status" /></a>
17+
</div>
18+
<div className="content">
19+
<h3 className="strong">Install</h3>
20+
<blockquote>
21+
npm install rc-use-form
22+
</blockquote>
23+
</div>
24+
<div className="content">
25+
<h3 className="strong">Use</h3>
26+
<blockquote>
27+
<p>import useForm from 'rc-use-form'</p>
28+
<p>const [form, field] = useForm()</p>
29+
<p>{'<input type="text" {...field("name")}/>'}</p>
30+
</blockquote>
31+
</div>
32+
<div className="content">
33+
<h3 className="strong">Demos</h3>
34+
<ol type="1">
35+
<li>
36+
base use
37+
<button onClick={linkTo('rc-use-form', 'normal')}>Demo</button>
38+
</li>
39+
<li>
40+
initial-value
41+
<button onClick={linkTo('rc-use-form', 'initial value')}>Demo</button>
42+
</li>
43+
<li>
44+
field validation
45+
<button onClick={linkTo('rc-use-form', 'validate')}>Demo</button>
46+
</li>
47+
<li>
48+
field validation (trigger onBlur)
49+
<button onClick={linkTo('rc-use-form', 'validate(trigger onBlur)')}>Demo</button>
50+
</li>
51+
<li>
52+
field validation(custom error message)
53+
<button onClick={linkTo('rc-use-form', 'validate(custom error message)')}>Demo</button>
54+
</li>
55+
</ol>
56+
</div>
57+
58+
</div>
59+
))

‎src/__stories__/1-normal.story.tsx

Lines changed: 56 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -33,73 +33,71 @@ const Demo = () => {
3333
}
3434

3535
return (
36-
<section className="section">
37-
<div className="container">
38-
<div className="columns">
39-
<div className="column is-three-fifths">
40-
<form onSubmit={handleSubmit}>
41-
<div className="field">
42-
<label className="label">text</label>
43-
<input className="input" type="text" {...field("name")} />
44-
</div>
45-
<div className="field">
46-
<label className="label">password</label>
47-
<input className="input" type="password" {...field("password")} />
48-
</div>
49-
<div className="field">
50-
<label className="label">checked</label>
51-
<input type="checkbox"
52-
onChange={() => field("agree").onChange(!field("agree").value)}
53-
onBlur={field("agree").onBlur}
54-
checked={!!field("agree").value}
55-
/>
56-
</div>
57-
<div className="field">
58-
<label className="label">multi checkbox</label>
59-
<CheckboxGroup checkboxDepth={2} name="fruits" {...field("multi")}>
60-
<label className="checkbox"><Checkbox value="apple"/> Apple</label>
61-
<label className="checkbox"><Checkbox value="orange"/> Orange</label>
62-
<label className="checkbox"><Checkbox value="watermelon"/> Watermelon</label>
63-
</CheckboxGroup>
64-
</div>
65-
<div className="field">
66-
<label className="label">radio</label>
67-
<div className="control">
68-
{
69-
[1,2,3,4,5].map((item) => {
70-
return (<label key={item} className="radio">
71-
<input name='radio' type="radio" {...field("radio")}
72-
value={item}
73-
onChange={() => field("radio").onChange(item)}
74-
onBlur={field("radio").onBlur}
75-
checked={item === field("radio").value}
76-
/> {item}
77-
</label>)
78-
})
79-
}
80-
</div>
81-
</div>
82-
<div className="field">
83-
<label className="label">textarea</label>
84-
<textarea className="textarea" {...field("textarea")}></textarea>
85-
</div>
86-
<div className="field">
87-
<button type="submit" className="button is-link">Submit</button>
36+
<section className="section container">
37+
<div className="columns">
38+
<div className="column is-three-fifths">
39+
<form onSubmit={handleSubmit}>
40+
<div className="field">
41+
<label className="label">text</label>
42+
<input className="input" type="text" {...field("name")} />
43+
</div>
44+
<div className="field">
45+
<label className="label">password</label>
46+
<input className="input" type="password" {...field("password")} />
47+
</div>
48+
<div className="field">
49+
<label className="label">checked</label>
50+
<input type="checkbox"
51+
onChange={() => field("agree").onChange(!field("agree").value)}
52+
onBlur={field("agree").onBlur}
53+
checked={!!field("agree").value}
54+
/>
55+
</div>
56+
<div className="field">
57+
<label className="label">multi checkbox</label>
58+
<CheckboxGroup checkboxDepth={2} name="fruits" {...field("multi")}>
59+
<label className="checkbox"><Checkbox value="apple"/> Apple</label>
60+
<label className="checkbox"><Checkbox value="orange"/> Orange</label>
61+
<label className="checkbox"><Checkbox value="watermelon"/> Watermelon</label>
62+
</CheckboxGroup>
63+
</div>
64+
<div className="field">
65+
<label className="label">radio</label>
66+
<div className="control">
67+
{
68+
[1,2,3,4,5].map((item) => {
69+
return (<label key={item} className="radio">
70+
<input name='radio' type="radio" {...field("radio")}
71+
value={item}
72+
onChange={() => field("radio").onChange(item)}
73+
onBlur={field("radio").onBlur}
74+
checked={item === field("radio").value}
75+
/> {item}
76+
</label>)
77+
})
78+
}
8879
</div>
89-
</form>
90-
</div>
91-
<div className="column">
92-
<div className="notification" style={{wordBreak: 'break-all'}}>
93-
{ JSON.stringify(form.value) }
9480
</div>
81+
<div className="field">
82+
<label className="label">textarea</label>
83+
<textarea className="textarea" {...field("textarea")}></textarea>
84+
</div>
85+
<div className="field">
86+
<button type="submit" className="button is-link">Submit</button>
87+
</div>
88+
</form>
89+
</div>
90+
<div className="column">
91+
<div className="notification" style={{wordBreak: 'break-all'}}>
92+
{ JSON.stringify(form.value) }
9593
</div>
9694
</div>
9795
</div>
9896
</section>
9997
)
10098
}
10199

102-
storiesOf('Form', module)
100+
storiesOf('rc-use-form', module)
103101
.add('normal', () => (
104102
<Demo />
105103
))

‎src/__stories__/2-initial-value.story.tsx

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -25,36 +25,34 @@ const Demo = () => {
2525
}
2626

2727
return (
28-
<section className="section">
29-
<div className="container">
30-
<div className="columns">
31-
<div className="column is-three-fifths">
32-
<form onSubmit={handleSubmit}>
33-
<div className="field">
34-
<label className="label">text</label>
35-
<input className="input" type="text" {...field("name")} />
36-
</div>
37-
<div className="field">
38-
<label className="label">password</label>
39-
<input className="input" type="password" {...field("password")} />
40-
</div>
41-
<div className="field">
42-
<button type='submit' className="button is-link">submit</button>
43-
</div>
44-
</form>
45-
</div>
46-
<div className="column">
47-
<div className="notification" style={{wordBreak: 'break-all'}}>
48-
{ JSON.stringify(form.value) }
28+
<section className="section container">
29+
<div className="columns">
30+
<div className="column is-three-fifths">
31+
<form onSubmit={handleSubmit}>
32+
<div className="field">
33+
<label className="label">text</label>
34+
<input className="input" type="text" {...field("name")} />
35+
</div>
36+
<div className="field">
37+
<label className="label">password</label>
38+
<input className="input" type="password" {...field("password")} />
4939
</div>
40+
<div className="field">
41+
<button type='submit' className="button is-link">submit</button>
42+
</div>
43+
</form>
44+
</div>
45+
<div className="column">
46+
<div className="notification" style={{wordBreak: 'break-all'}}>
47+
{ JSON.stringify(form.value) }
5048
</div>
5149
</div>
5250
</div>
5351
</section>
5452
);
5553
};
5654

57-
storiesOf('Form', module)
55+
storiesOf('rc-use-form', module)
5856
.add('initial value', () => (
5957
<Demo />
6058
));

‎src/__stories__/3-validation.story.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,10 @@ const Demo = () => {
2727
}
2828

2929
return (
30-
<section className="section">
30+
<div className="section container">
3131
<h3 className="title is-3">
3232
validation
3333
</h3>
34-
<div className="container">
3534
<form onSubmit={handleSubmit}>
3635
<div className="field">
3736
<label className="label">username</label>
@@ -59,12 +58,11 @@ const Demo = () => {
5958
</div>
6059
<button type='submit' className='button is-link'>submit</button>
6160
</form>
62-
</div>
63-
</section>
61+
</div>
6462
)
6563
}
6664

67-
storiesOf('Form', module)
65+
storiesOf('rc-use-form', module)
6866
.add('validate', () => (
6967
<Demo />
7068
))

‎src/__stories__/4-validation-onblur.story.tsx

Lines changed: 32 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -27,46 +27,44 @@ const Demo = () => {
2727
}
2828

2929
return (
30-
<section className="section">
30+
<div className="section container">
3131
<h3 className="title is-3">
3232
Validate trigger onblur
3333
</h3>
34-
<div className="container">
35-
<form onSubmit={handleSubmit}>
36-
<div className="field">
37-
<label className="label">username</label>
38-
<input className="input" type="text" {...field("name", {
39-
rules: [
40-
{len: 4, trigger: 'blur',},
41-
{required: true,},
42-
]
43-
})}
44-
/>
45-
{
46-
form.errors.name && <p className="help is-danger">{form.errors.name[0].message}</p>
47-
}
48-
</div>
49-
<div className="field">
50-
<label className="label">password</label>
51-
<input className="input" type="password" {...field("password", {
52-
rules: [
53-
{len: 4, trigger: 'blur',},
54-
{required: true,},
55-
]
56-
})}
57-
/>
58-
{
59-
form.errors.password && <p className="help is-danger">{form.errors.password[0].message}</p>
60-
}
61-
</div>
62-
<button type='submit' className='button is-link'>submit</button>
63-
</form>
64-
</div>
65-
</section>
34+
<form onSubmit={handleSubmit}>
35+
<div className="field">
36+
<label className="label">username</label>
37+
<input className="input" type="text" {...field("name", {
38+
rules: [
39+
{len: 4, trigger: 'blur',},
40+
{required: true,},
41+
]
42+
})}
43+
/>
44+
{
45+
form.errors.name && <p className="help is-danger">{form.errors.name[0].message}</p>
46+
}
47+
</div>
48+
<div className="field">
49+
<label className="label">password</label>
50+
<input className="input" type="password" {...field("password", {
51+
rules: [
52+
{len: 4, trigger: 'blur',},
53+
{required: true,},
54+
]
55+
})}
56+
/>
57+
{
58+
form.errors.password && <p className="help is-danger">{form.errors.password[0].message}</p>
59+
}
60+
</div>
61+
<button type='submit' className='button is-link'>submit</button>
62+
</form>
63+
</div>
6664
)
6765
}
6866

69-
storiesOf('Form', module)
67+
storiesOf('rc-use-form', module)
7068
.add('validate(trigger onBlur)', () => (
7169
<Demo />
7270
))

0 commit comments

Comments
 (0)