Skip to content

Commit 650b01f

Browse files
petermikitshpetermikitsh
authored
[SelectField] implementation (#5)
* [SelectField] P.O.C. implementation * [.babelrc] remove globals from published releases * [SelectField] implementation * [SelectField] remove unused fn * [SelectField] fix linter warnings
1 parent ecfef30 commit 650b01f

File tree

9 files changed

+381
-70
lines changed

9 files changed

+381
-70
lines changed

‎.babelrc

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,12 @@
33
"production": {
44
"plugins": [
55
"transform-react-remove-prop-types",
6-
"transform-runtime"
6+
"transform-runtime",
7+
[
8+
"transform-define", {
9+
"__TEST__": false
10+
}
11+
]
712
]
813
}
914
},

‎docs/pages/SelectField/index.js

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
import Grid, {GridItem} from '../../../src/Grid';
2+
import Page from '../Page';
3+
import React from 'react';
4+
import SelectField from '../../../src/SelectField';
5+
import Switch from '../../../src/Switch';
6+
import TextField from '../../../src/TextField';
7+
8+
class SelectFieldDocs extends React.Component {
9+
constructor(props) {
10+
super(props);
11+
this.onControlPanel = this.onControlPanel.bind(this);
12+
this.state = {
13+
disabled: false,
14+
errorColor: '',
15+
helperText: 'Pick your favorite color',
16+
id: 'id',
17+
label: 'Color',
18+
value: '',
19+
style: '{}',
20+
};
21+
}
22+
23+
onControlPanel(key, value) {
24+
this.setState({[key]: value});
25+
}
26+
27+
render() {
28+
const {disabled, errorColor, helperText, id, label, value, style} = this.state;
29+
let styleObj = {};
30+
try {
31+
styleObj = JSON.parse(style);
32+
} catch (e) { }
33+
34+
const selectOptions = [
35+
'red',
36+
'orange',
37+
'yellow',
38+
'green',
39+
'blue',
40+
'indigo',
41+
'violet'
42+
];
43+
return (
44+
<Page
45+
componentName="SelectField"
46+
buildYourOwn={
47+
<Grid gutter={24} style={{justifyContent: 'center'}}>
48+
<GridItem xs={12} sm={6} md={4}>
49+
<SelectField
50+
disabled={disabled}
51+
errorColor={errorColor}
52+
helperText={helperText}
53+
id={id}
54+
label={label}
55+
style={styleObj}
56+
value={value}
57+
onChange={(e) => {
58+
this.setState({value: e.target.value})
59+
}}
60+
>
61+
<option value="" />
62+
{selectOptions.map(value => (
63+
<option
64+
key={value}
65+
value={value}
66+
>
67+
{value.charAt(0).toUpperCase() + value.substr(1)}
68+
</option>
69+
))}
70+
</SelectField>
71+
</GridItem>
72+
</Grid>
73+
}
74+
buildYourOwnControlPanel={[
75+
<TextField
76+
onChange={e => (this.onControlPanel('errorColor', e.target.value))}
77+
label="errorColor"
78+
helperText="If present, sets aria-invalid to true"
79+
value={errorColor}
80+
/>,
81+
<TextField
82+
onChange={e => (this.onControlPanel('helperText', e.target.value))}
83+
label="helperText"
84+
helperText="Overflows onto a second line"
85+
value={helperText}
86+
/>,
87+
<TextField
88+
onChange={e => (this.onControlPanel('id', e.target.value))}
89+
label="id"
90+
helperText="Binds label and select elements for a11y"
91+
value={id}
92+
/>,
93+
<TextField
94+
onChange={e => (this.onControlPanel('label', e.target.value))}
95+
label="label"
96+
helperText="Truncated to a single line"
97+
value={label}
98+
/>,
99+
<TextField
100+
onChange={e => (this.onControlPanel('value', e.target.value))}
101+
label="value"
102+
helperText="Value of selected option"
103+
value={value}
104+
/>,
105+
<TextField
106+
onChange={e => (this.onControlPanel('style', e.target.value))}
107+
label="style"
108+
helperText="Applied to the select element"
109+
value={style}
110+
/>,
111+
<Switch
112+
onChange={e => (this.onControlPanel('disabled', e.target.checked))}
113+
checked={disabled}
114+
label="disabled"
115+
/>
116+
]}
117+
/>
118+
);
119+
}
120+
}
121+
122+
export default SelectFieldDocs;

‎docs/pages/Tabs/index.js

Lines changed: 8 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ class TabsDocs extends React.Component {
1717
barColor: Variables.$primary,
1818
indicatorColor: Variables.$accent,
1919
textColor: '#FFF',
20-
type: {id: 'fixed', value: 'fixed'},
20+
type: 'fixed',
2121
index: 0,
2222
tabsBaseline: 0,
2323
tabsFullWidth: 0,
@@ -46,7 +46,7 @@ class TabsDocs extends React.Component {
4646
indicatorColor={this.state.indicatorColor}
4747
textColor={this.state.textColor}
4848
index={this.state.index}
49-
type={this.state.type.value}
49+
type={this.state.type}
5050
onChange={(e, index) => (this.onChange(e, index, 'index'))}
5151
style={{width: '100%'}}
5252
>
@@ -78,24 +78,14 @@ class TabsDocs extends React.Component {
7878
value={String(this.state.index)}
7979
/>,
8080
<SelectField
81-
data={[
82-
{
83-
id: 'fixed',
84-
value: 'fixed'
85-
},
86-
{
87-
id: 'scrollable',
88-
value: 'scrollable'
89-
},
90-
{
91-
id: 'centered',
92-
value: 'centered'
93-
}
94-
]}
9581
label="type"
9682
value={this.state.type}
97-
onChange={(e, index, obj) => (this.onControlPanel('type', obj))}
98-
/>
83+
onChange={(e) => (this.onControlPanel('type', e.target.value))}
84+
>
85+
<option key="1" value="fixed">fixed</option>
86+
<option key="2" value="scrollable">scrollable</option>
87+
<option key="3" value="centered">centered</option>
88+
</SelectField>
9989
]}
10090
examples={
10191
<Grid gutter={16}>

‎docs/pages/Typography/index.js

Lines changed: 16 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ class TypographyDocs extends React.Component {
1111
this.onControlPanel = this.onControlPanel.bind(this);
1212
this.state = {
1313
component: 'div',
14-
type: {id: 'body1', value: 'body1'},
14+
type: 'body1',
1515
children: 'Hello World'
1616
};
1717
}
@@ -28,7 +28,7 @@ class TypographyDocs extends React.Component {
2828
buildYourOwn={
2929
<Typography
3030
component={component}
31-
type={type.value}
31+
type={type}
3232
>
3333
{children}
3434
</Typography>
@@ -40,56 +40,22 @@ class TypographyDocs extends React.Component {
4040
value={component}
4141
/>,
4242
<SelectField
43-
data={[
44-
{
45-
id: 'display4',
46-
value: 'display4'
47-
},
48-
{
49-
id: 'display3',
50-
value: 'display3'
51-
},
52-
{
53-
id: 'display2',
54-
value: 'display2'
55-
},
56-
{
57-
id: 'display1',
58-
value: 'display1'
59-
},
60-
{
61-
id: 'headline',
62-
value: 'headline'
63-
},
64-
{
65-
id: 'title',
66-
value: 'title'
67-
},
68-
{
69-
id: 'subheading',
70-
value: 'subheading'
71-
},
72-
{
73-
id: 'body2',
74-
value: 'body2'
75-
},
76-
{
77-
id: 'body1',
78-
value: 'body1'
79-
},
80-
{
81-
id: 'caption',
82-
value: 'caption'
83-
},
84-
{
85-
id: 'button',
86-
value: 'button'
87-
}
88-
]}
8943
label="type"
9044
value={type}
91-
onChange={(e, index, obj) => (this.onControlPanel('type', obj))}
92-
/>,
45+
onChange={(e) => (this.onControlPanel('type', e.target.value))}
46+
>
47+
<option key="1" value="display4">display4</option>
48+
<option key="2" value="display3">display3</option>
49+
<option key="3" value="display2">display2</option>
50+
<option key="4" value="display1">display1</option>
51+
<option key="5" value="headline">headline</option>
52+
<option key="6" value="title">title</option>
53+
<option key="7" value="subheading">subheading</option>
54+
<option key="8" value="body2">body2</option>
55+
<option key="9" value="body1">body1</option>
56+
<option key="10" value="caption">caption</option>
57+
<option key="11" value="button">button</option>
58+
</SelectField>,
9359
<TextField
9460
onChange={e => (this.onControlPanel('children', e.target.value))}
9561
label="children"

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@
5757
"babel-plugin-espower": "2.3.2",
5858
"babel-plugin-istanbul": "4.1.5",
5959
"babel-plugin-transform-class-properties": "6.24.1",
60+
"babel-plugin-transform-define": "1.3.0",
6061
"babel-plugin-transform-react-remove-prop-types": "0.4.12",
6162
"babel-plugin-transform-runtime": "6.23.0",
6263
"babel-polyfill": "6.26.0",
@@ -105,7 +106,7 @@
105106
"stylelint": "8.4.0",
106107
"stylelint-config-standard": "18.0.0",
107108
"webpack": "3.10.0",
108-
"webpack-dev-server": "2.10.1",
109+
"webpack-dev-server": "2.11.1",
109110
"webpack-node-externals": "1.6.0"
110111
}
111112
}

0 commit comments

Comments
 (0)