1 | import React from 'react'
|
2 |
|
3 | import { storiesOf } from '@storybook/react'
|
4 |
|
5 | import Select from '../src/components/shared/Select'
|
6 | import MultiSelect from '../src/components/shared/MultiSelect'
|
7 |
|
8 | const PROVINCES = [
|
9 | 'Alberta',
|
10 | 'British Columbia',
|
11 | 'Manitoba',
|
12 | 'New Brunswick',
|
13 | 'Newfoundland and Labrador',
|
14 | 'Northwest Territories',
|
15 | 'Nova Scotia',
|
16 | 'Nunavut',
|
17 | 'Ontario',
|
18 | 'Prince Edward Island',
|
19 | 'Quebec',
|
20 | 'Saskatchewan',
|
21 | 'Yukon'
|
22 | ]
|
23 |
|
24 | class ControlledSelect extends React.Component {
|
25 | state = {
|
26 | value: 'Alberta'
|
27 | }
|
28 |
|
29 | handleChange = (e, b) => {
|
30 | this.setState({value: b.newValue})
|
31 | }
|
32 |
|
33 | render () {
|
34 | return <Select
|
35 | onChange={this.handleChange}
|
36 | value={this.state.value}
|
37 | {...this.props}
|
38 | />
|
39 | }
|
40 | }
|
41 |
|
42 | class ControlledMultiSelect extends React.Component {
|
43 | state = {
|
44 | value: ['Alberta']
|
45 | }
|
46 |
|
47 | handleChange = (e, b) => {
|
48 | this.setState({value: b.newValue})
|
49 | }
|
50 |
|
51 | render () {
|
52 | return <MultiSelect
|
53 | onChange={this.handleChange}
|
54 | value={this.state.value}
|
55 | {...this.props}
|
56 | />
|
57 | }
|
58 | }
|
59 |
|
60 | storiesOf('Select', module)
|
61 | .add('with options', () => (
|
62 | <ControlledSelect
|
63 | suggestions={PROVINCES}
|
64 | />
|
65 | ))
|
66 |
|
67 | storiesOf('MultiSelect', module)
|
68 | .add('with options', () => (
|
69 | <ControlledMultiSelect
|
70 | suggestions={PROVINCES}
|
71 | />
|
72 | ))
|