diff --git a/docs/src/pages/component-demos/select-field/FilteredSelectField.js b/docs/src/pages/component-demos/select-field/FilteredSelectField.js index 590fbfb4d2f716..6f898412d729ea 100644 --- a/docs/src/pages/component-demos/select-field/FilteredSelectField.js +++ b/docs/src/pages/component-demos/select-field/FilteredSelectField.js @@ -9,9 +9,54 @@ import { MenuItem } from 'material-ui/Menu'; import { ListItem } from 'material-ui/List'; import Card, { CardHeader, CardContent } from 'material-ui/Card'; -const US_PRESIDENTS = ["George Washington","John Adams","Thomas Jefferson","James Madison","James Monroe","John Quincy Adams","Andrew Jackson","Martin Van Buren","William Henry Harrison","John Tyler","James K. Polk","Zachary Taylor","Millard Fillmore","Franklin Pierce","James Buchanan","Abraham Lincoln","Andrew Johnson","Ulysses S. Grant","Rutherford B. Hayes","James A. Garfield","Chester A. Arthur","Grover Cleveland","Benjamin Harrison","Grover Cleveland","William McKinley","Theodore Roosevelt","William Howard Taft","Woodrow Wilson","Warren G. Harding","Calvin Coolidge","Herbert Hoover","Franklin D. Roosevelt","Harry S. Truman","Dwight D. Eisenhower","John F. Kennedy","Lyndon B. Johnson","Richard Nixon","Gerald Ford","Jimmy Carter","Ronald Reagan","George H. W. Bush","Bill Clinton","George W. Bush","Barack Obama","Donald Trump"]; +const US_PRESIDENTS = [ + 'Abraham Lincoln', + 'Andrew Jackson', + 'Andrew Johnson', + 'Barack Obama', + 'Benjamin Harrison', + 'Bill Clinton', + 'Calvin Coolidge', + 'Chester A. Arthur', + 'Donald Trump', + 'Dwight D. Eisenhower', + 'Franklin D. Roosevelt', + 'Franklin Pierce', + 'George H. W. Bush', + 'George W. Bush', + 'George Washington', + 'Gerald Ford', + 'Grover Cleveland', + 'Harry S. Truman', + 'Herbert Hoover', + 'James A. Garfield', + 'James Buchanan', + 'James K. Polk', + 'James Madison', + 'James Monroe', + 'Jimmy Carter', + 'John Adams', + 'John F. Kennedy', + 'John Quincy Adams', + 'John Tyler', + 'Lyndon B. Johnson', + 'Martin Van Buren', + 'Millard Fillmore', + 'Richard Nixon', + 'Ronald Reagan', + 'Rutherford B. Hayes', + 'Theodore Roosevelt', + 'Thomas Jefferson', + 'Ulysses S. Grant', + 'Warren G. Harding', + 'William Henry Harrison', + 'William Howard Taft', + 'William McKinley', + 'Woodrow Wilson', + 'Zachary Taylor', +]; -const styleSheet = createStyleSheet('FilteredSelectField', (theme) => { +const styleSheet = createStyleSheet('FilteredSelectField', theme => { const { typography } = theme; return { filter: { @@ -45,14 +90,14 @@ export default class FilteredSelectField extends Component { handleChange = (event, index, value) => this.setState({ value }); - handleFilter = (event) => { + handleFilter = event => { const { filter: oldFilter } = this.state; const filter = event.target.value; const searchChoices = filter.length > oldFilter.length ? this.state.choices : US_PRESIDENTS; const pattern = new RegExp(filter, 'i'); this.setState({ filter, - choices: searchChoices.filter(c => pattern.test(c)) + choices: searchChoices.filter(c => pattern.test(c)), }); }; @@ -61,9 +106,7 @@ export default class FilteredSelectField extends Component { return ( - +
- + - {this.state.choices.map((choice, i) => ( - {choice} - ))} + {this.state.choices.map(choice => + + {choice} + , + )}
diff --git a/docs/src/pages/component-demos/select-field/FocusSelectField.js b/docs/src/pages/component-demos/select-field/FocusSelectField.js index 24caac354c84a0..47a809ed3ed189 100644 --- a/docs/src/pages/component-demos/select-field/FocusSelectField.js +++ b/docs/src/pages/component-demos/select-field/FocusSelectField.js @@ -10,7 +10,6 @@ import TextField from 'material-ui/TextField'; import MenuItem from 'material-ui/Menu/MenuItem'; import Card, { CardHeader, CardContent } from 'material-ui/Card'; - const styleSheet = createStyleSheet('FocusSelectField', () => ({ row: { display: 'flex', @@ -49,15 +48,10 @@ export default class FocusSelectField extends Component { return ( - +
- +
- } + control={} label="Is Focused" className={classes.column} disabled /> - } + control={} label="Is Clean" className={classes.column} disabled diff --git a/docs/src/pages/component-demos/select-field/SimpleSelectField.js b/docs/src/pages/component-demos/select-field/SimpleSelectField.js index ed86ca30767792..d71ef20fca4ce6 100644 --- a/docs/src/pages/component-demos/select-field/SimpleSelectField.js +++ b/docs/src/pages/component-demos/select-field/SimpleSelectField.js @@ -31,9 +31,7 @@ export default class SimpleSelectField extends Component { return ( - + event.preventDefault(); + handleMouseDown = event => event.preventDefault(); - handleKeyDown = (event) => { + handleKeyDown = event => { if (OPEN_MENU_KEYS.includes(keycode(event))) { event.preventDefault(); this.setState({ open: true, anchorEl: event.currentTarget }); } }; - handleClick = (event) => { + handleClick = event => { event.currentTarget.focus(); this.setState({ open: true, anchorEl: event.currentTarget }); }; handleRequestClose = () => this.setState({ open: false }); - handleSelectFocus = (event) => { + handleSelectFocus = event => { if (this.state.ignoreFocusOnce) { event.stopPropagation(); this.setState({ ignoreFocusOnce: false }); } }; - handleSelectBlur = (event) => { + handleSelectBlur = event => { if (this.state.open) { event.stopPropagation(); } @@ -149,10 +149,8 @@ class SelectField extends Component { handleItemClick = (event, index, value) => { event.persist(); - this.setState({ - open: false, - ignoreFocusOnce: true, - }, () => { + + this.setState({ open: false, ignoreFocusOnce: true }, () => { if (this.props.onChange) { this.props.onChange(event, index, value); } @@ -192,17 +190,12 @@ class SelectField extends Component { }; return ( - - {label && !(hideLabel && value) && ( + + {label && + !(hideLabel && value) && {label} - - )} + } - {React.Children.map(children, (child, index) => - (typeof child.props.value === 'undefined' ? child : React.cloneElement(child, { + {React.Children.map(children, (child, index) => { + if (typeof child.props.value === 'undefined') { + return child; + } + return React.cloneElement(child, { selected: compareFunction(value, child.props.value), - onClick: (event) => this.handleItemClick(event, index, child.props.value), - })), - )} + onClick: event => this.handleItemClick(event, index, child.props.value), + }); + })} ); diff --git a/src/SelectField/SelectFieldInput.js b/src/SelectField/SelectFieldInput.js index 3f2ee994b138c4..47f60388f1aeec 100644 --- a/src/SelectField/SelectFieldInput.js +++ b/src/SelectField/SelectFieldInput.js @@ -7,7 +7,7 @@ import classNames from 'classnames'; import customPropTypes from '../utils/customPropTypes'; import ArrowDropDownIcon from '../svg-icons/arrow-drop-down'; -const styleSheet = createStyleSheet('MuiSelectFieldInput', (theme) => { +const styleSheet = createStyleSheet('MuiSelectFieldInput', theme => { return { container: { position: 'relative', @@ -55,11 +55,7 @@ const SelectFieldInput = (props, context) => { ); return ( -
+
@@ -100,6 +98,8 @@ SelectFieldInput.propTypes = { * Select options. */ options: PropTypes.arrayOf(PropTypes.node), + /** @ignore */ + rowsMax: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), }; SelectFieldInput.contextTypes = { diff --git a/src/SelectField/index.js b/src/SelectField/index.js index 40e135cf02db83..4383443b03ee57 100644 --- a/src/SelectField/index.js +++ b/src/SelectField/index.js @@ -1,5 +1,4 @@ /* eslint-disable flowtype/require-valid-file-annotation */ -export default from './SelectField'; -export SelectField from './SelectField'; -export SelectFieldInput from './SelectFieldInput'; +export { default } from './SelectField'; +export { default as SelectFieldInput } from './SelectFieldInput'; diff --git a/src/svg-icons/arrow-drop-down.js b/src/svg-icons/arrow-drop-down.js index 2e5af8e6fa9bc5..a990bea81b4c99 100644 --- a/src/svg-icons/arrow-drop-down.js +++ b/src/svg-icons/arrow-drop-down.js @@ -4,11 +4,10 @@ import React from 'react'; import pure from 'recompose/pure'; import SvgIcon from '../SvgIcon'; -let ArrowDropDown = (props) => ( +let ArrowDropDown = props => - -); + ; ArrowDropDown = pure(ArrowDropDown); ArrowDropDown.muiName = 'SvgIcon';