forked from zapkub/react-thailand-address-typeahead
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
78 lines (75 loc) · 2.46 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import React from 'react';
import { storiesOf, action } from '@kadira/storybook';
import { withState } from 'recompose';
import AddressForm from '../src/index';
import '../src/styles.css';
import TestProps from './TestProps';
storiesOf('Component', module)
.add('montage', () => (
<div style={{ width: 350 }}>
<AddressForm onAddressSelected={action('onSelectedAdress')} />
<code>{'<AddressForm onAddressSelected={action(\'onSelectedAdress\')} />'}</code>
</div>
))
.add('handle result', () => {
const WithStateComponent = withState('result', 'setResult', null)(({ result, setResult }) => (
<div style={{ width: 350 }}>
<div>
selected : {result ? `${result.p} ${result.a} ${result.d} ${result.z}` : null}
</div>
<AddressForm onAddressSelected={address => setResult(address)} />
</div>
));
return (<div>
<WithStateComponent />
<code>
{`
<div style={{ width: 350 }}>
<div>
selected : {result ? \`\${result.p} \${result.a} \${result.d} \${result.z}\` : null}
</div>
<AddressForm onAddressSelected={address => setResult(address)} />
</div>
`}
</code>
</div>);
})
.add('custom render result', () => (
<TestProps />
))
.add('custom initial', () => (
<div style={{ width: 350 }}>
<AddressForm
onAddressSelected={action('onSelectedAdress')}
values={{
d: "ฟากท่า", a: "ฟากท่า", p: "อุตรดิตถ์", z: 53161
}}
/>
<code>{'<AddressForm onAddressSelected={action(\'onSelectedAdress\')} />'}</code>
</div>
))
.add('show label', () => (
<div style={{ width: 350 }}>
<AddressForm
showLabel
onAddressSelected={action('onSelectedAdress')}
values={{
d: "ฟากท่า", a: "ฟากท่า", p: "อุตรดิตถ์", z: 53161
}}
/>
<code>{'<AddressForm onAddressSelected={action(\'onSelectedAdress\')} />'}</code>
</div>
))
.add('maxVisible', () => (
<div style={{ width: 350 }}>
<AddressForm
showLabel
maxVisible={40}
onAddressSelected={action('onSelectedAdress')}
values={{
d: "ฟากท่า", a: "ฟากท่า", p: "อุตรดิตถ์", z: 53160
}}
/>
<code>{'<AddressForm onAddressSelected={action(\'onSelectedAdress\')} />'}</code>
</div>
));