[SelectField] First implementation (mui#8023)

mtikoian · Sep 6, 2017 · 50261b9 · 50261b9
1 parent 0fb26fa
commit 50261b9
Show file tree

Hide file tree

Showing 93 changed files with 1,598 additions and 238 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -70,7 +70,7 @@ jobs:
           command: yarn size
       - run:
           name: Can we generate the docs?
-          command: yarn docs:build
+          command: yarn docs:api && yarn docs:build
   test_browser:
     <<: *defaults
     steps:

diff --git a/docs/src/pages/demos/dialogs/ConfirmationDialog.js b/docs/src/pages/demos/dialogs/ConfirmationDialog.js
@@ -120,7 +120,7 @@ const styles = theme => ({
 
 class ConfirmationDialogDemo extends React.Component {
   state = {
-    anchorEl: undefined,
+    anchorEl: null,
     open: false,
     value: 'Dione',
   };

diff --git a/docs/src/pages/demos/menus/LongMenu.js b/docs/src/pages/demos/menus/LongMenu.js
@@ -26,7 +26,7 @@ const ITEM_HEIGHT = 48;
 
 class LongMenu extends React.Component {
   state = {
-    anchorEl: undefined,
+    anchorEl: null,
     open: false,
   };
 
@@ -54,9 +54,9 @@ class LongMenu extends React.Component {
           anchorEl={this.state.anchorEl}
           open={this.state.open}
           onRequestClose={this.handleRequestClose}
-          style={{ maxHeight: ITEM_HEIGHT * 4.5 }}
-          MenuListProps={{
+          PaperProps={{
             style: {
+              maxHeight: ITEM_HEIGHT * 4.5,
               width: 200,
             },
           }}

diff --git a/docs/src/pages/demos/menus/SimpleListMenu.js b/docs/src/pages/demos/menus/SimpleListMenu.js
@@ -22,7 +22,7 @@ const options = [
 
 class SimpleListMenu extends React.Component {
   state = {
-    anchorEl: undefined,
+    anchorEl: null,
     open: false,
     selectedIndex: 1,
   };

diff --git a/docs/src/pages/demos/menus/SimpleMenu.js b/docs/src/pages/demos/menus/SimpleMenu.js
@@ -6,7 +6,7 @@ import Menu, { MenuItem } from 'material-ui/Menu';
 
 class SimpleMenu extends React.Component {
   state = {
-    anchorEl: undefined,
+    anchorEl: null,
     open: false,
   };
 

diff --git a/docs/src/pages/demos/menus/menus.md b/docs/src/pages/demos/menus/menus.md
@@ -35,7 +35,3 @@ If text in a simple menu wraps to a second line, use a simple dialog instead. Si
 If the height of a menu prevents all menu items from being displayed, the menu can scroll internally.
 
 {{demo='pages/demos/menus/LongMenu.js'}}
-
-## TextField select menus
-
-Coming soon...
diff --git a/docs/src/pages/demos/selects/MultipleSelect.js b/docs/src/pages/demos/selects/MultipleSelect.js
@@ -0,0 +1,91 @@
+/* eslint-disable flowtype/require-valid-file-annotation */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import Input, { InputLabel } from 'material-ui/Input';
+import { MenuItem } from 'material-ui/Menu';
+import { FormControl } from 'material-ui/Form';
+import Select from 'material-ui/Select';
+
+const styles = theme => ({
+  container: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+  formControl: {
+    margin: theme.spacing.unit,
+    minWidth: 120,
+    maxWidth: 300,
+  },
+});
+
+const ITEM_HEIGHT = 48;
+const ITEM_PADDING_TOP = 8;
+
+const names = [
+  'Oliver Hansen',
+  'Van Henry',
+  'April Tucker',
+  'Ralph Hubbard',
+  'Omar Alexander',
+  'Carlos Abbott',
+  'Miriam Wagner',
+  'Bradley Wilkerson',
+  'Virginia Andrews',
+  'Kelly Snyder',
+];
+
+class MultipleSelect extends React.Component {
+  state = {
+    name: [],
+  };
+
+  handleChange = event => {
+    this.setState({ name: event.target.value });
+  };
+
+  render() {
+    const classes = this.props.classes;
+
+    return (
+      <div className={classes.container}>
+        <FormControl className={classes.formControl}>
+          <InputLabel htmlFor="name-multiple">Name</InputLabel>
+          <Select
+            multiple
+            value={this.state.name}
+            onChange={this.handleChange}
+            input={<Input id="name-multiple" />}
+            MenuProps={{
+              PaperProps: {
+                style: {
+                  maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+                  width: 200,
+                },
+              },
+            }}
+          >
+            {names.map(name => (
+              <MenuItem
+                key={name}
+                value={name}
+                style={{
+                  fontWeight: this.state.name.indexOf(name) !== -1 ? '500' : '400',
+                }}
+              >
+                {name}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+      </div>
+    );
+  }
+}
+
+MultipleSelect.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(MultipleSelect);
diff --git a/docs/src/pages/demos/selects/NativeSelect.js b/docs/src/pages/demos/selects/NativeSelect.js
@@ -0,0 +1,127 @@
+/* eslint-disable flowtype/require-valid-file-annotation */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import Input, { InputLabel } from 'material-ui/Input';
+import { FormControl, FormHelperText } from 'material-ui/Form';
+import Select from 'material-ui/Select';
+
+const styles = theme => ({
+  container: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+  formControl: {
+    margin: theme.spacing.unit,
+    minWidth: 120,
+  },
+});
+
+class NativeSelect extends React.Component {
+  state = {
+    age: '',
+    name: 'hai',
+  };
+
+  handleChange = name => event => {
+    this.setState({ [name]: event.target.value });
+  };
+
+  render() {
+    const classes = this.props.classes;
+
+    return (
+      <div className={classes.container}>
+        <FormControl className={classes.formControl}>
+          <InputLabel htmlFor="age-native-simple">Age</InputLabel>
+          <Select
+            native
+            value={this.state.age}
+            onChange={this.handleChange('age')}
+            input={<Input id="age-native-simple" />}
+          >
+            <option value="" />
+            <option value={10}>Ten</option>
+            <option value={20}>Twenty</option>
+            <option value={30}>Thirty</option>
+          </Select>
+        </FormControl>
+        <FormControl className={classes.formControl}>
+          <InputLabel htmlFor="age-native-helper">Age</InputLabel>
+          <Select
+            native
+            value={this.state.age}
+            onChange={this.handleChange('age')}
+            input={<Input id="age-native-helper" />}
+          >
+            <option value="" />
+            <option value={10}>Ten</option>
+            <option value={20}>Twenty</option>
+            <option value={30}>Thirty</option>
+          </Select>
+          <FormHelperText>Some important helper text</FormHelperText>
+        </FormControl>
+        <FormControl className={classes.formControl} disabled>
+          <InputLabel htmlFor="name-native-disabled">Name</InputLabel>
+          <Select
+            native
+            value={this.state.name}
+            onChange={this.handleChange('name')}
+            input={<Input id="name-native-disabled" />}
+          >
+            <option value="" />
+            <optgroup label="Author">
+              <option value="hai">Hai</option>
+            </optgroup>
+            <optgroup label="Contributors">
+              <option value="olivier">Olivier</option>
+              <option value="kevin">Kevin</option>
+            </optgroup>
+          </Select>
+          <FormHelperText>Disabled</FormHelperText>
+        </FormControl>
+        <FormControl className={classes.formControl} error>
+          <InputLabel htmlFor="name-native-error">Name</InputLabel>
+          <Select
+            native
+            value={this.state.name}
+            onChange={this.handleChange('name')}
+            input={<Input id="name-native-error" />}
+          >
+            <option value="" />
+            <optgroup label="Author">
+              <option value="hai">Hai</option>
+            </optgroup>
+            <optgroup label="Contributors">
+              <option value="olivier">Olivier</option>
+              <option value="kevin">Kevin</option>
+            </optgroup>
+          </Select>
+          <FormHelperText>Error</FormHelperText>
+        </FormControl>
+        <FormControl className={classes.formControl}>
+          <InputLabel htmlFor="name-input">Name</InputLabel>
+          <Input id="name-input" />
+          <FormHelperText>Alignement with an input</FormHelperText>
+        </FormControl>
+        <FormControl className={classes.formControl}>
+          <InputLabel htmlFor="uncontrolled-native">Name</InputLabel>
+          <Select native defaultValue={30} input={<Input id="uncontrolled-native" />}>
+            <option value="" />
+            <option value={10}>Ten</option>
+            <option value={20}>Twenty</option>
+            <option value={30}>Thirty</option>
+          </Select>
+          <FormHelperText>Uncontrolled</FormHelperText>
+        </FormControl>
+      </div>
+    );
+  }
+}
+
+NativeSelect.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(NativeSelect);