Fixed cursor issue (enabled vs disabled), removed dead code, fixed up…

…/down arrow key handling for opening menu
ctavan · Apr 17, 2017 · 9b23596 · 9b23596
1 parent c86b703
commit 9b23596
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 47 deletions.
diff --git a/src/SelectField/SelectField.js b/src/SelectField/SelectField.js
@@ -3,8 +3,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import shallowEqual from 'recompose/shallowEqual';
-import { createStyleSheet } from 'jss-theme-reactor';
-import classNames from 'classnames';
 import keycode from 'keycode';
 import customPropTypes from '../utils/customPropTypes';
 import SelectFieldInput from './SelectFieldInput';
@@ -13,24 +11,7 @@ import InputLabel from '../Input/InputLabel';
 import Input from '../Input/Input';
 import Menu from '../Menu/Menu';
 
-export const styleSheet = createStyleSheet('MuiSelectField', () => {
-  return {
-    label: {
-      paddingLeft: 0,
-    },
-    menu: {
-    },
-    icon: {
-      right: 0,
-    },
-    hideDropDownUnderline: {
-      borderTop: 'none',
-    },
-    dropDownMenu: {
-      display: 'block',
-    },
-  };
-});
+const OPEN_MENU_KEYS = ['enter', 'space', 'up', 'down'];
 
 /**
  * ```jsx
@@ -134,18 +115,10 @@ class SelectField extends Component {
     selectedIndex: undefined,
   };
 
-  shouldComponentUpdate(nextProps, nextState, nextContext) {
-    return (
-      !shallowEqual(this.state, nextState) ||
-      !shallowEqual(this.props, nextProps) ||
-      !shallowEqual(this.context.styleManager.theme, nextContext.styleManager.theme)
-    );
-  }
-
   handleMouseDown = (event) => event.preventDefault();
 
   handleKeyDown = (event) => {
-    if (keycode(event) === 'space' || keycode(event) === 'enter') {
+    if (OPEN_MENU_KEYS.includes(keycode(event))) {
       event.preventDefault();
       this.setState({ open: true, anchorEl: event.currentTarget });
     }
@@ -203,8 +176,6 @@ class SelectField extends Component {
       value,
       ...other
     } = this.props;
-
-    const classes = this.context.styleManager.render(styleSheet);
     const initialShrink = value !== '' && typeof value !== 'undefined';
 
     return (
@@ -236,7 +207,7 @@ class SelectField extends Component {
         />
         <Menu
           anchorEl={this.state.anchorEl}
-          className={classNames(classes.menu, menuClassName)}
+          className={menuClassName}
           open={this.state.open}
           onRequestClose={this.handleRequestClose}
           {...menuProps}

diff --git a/src/SelectField/SelectFieldInput.js b/src/SelectField/SelectFieldInput.js
@@ -9,17 +9,15 @@ import ArrowDropDownIcon from '../svg-icons/arrow-drop-down';
 
 const styleSheet = createStyleSheet('MuiSelectFieldInput', (theme) => {
   return {
-    root: {
-
-      // minWidth: 182
-    },
     select: {
-      cursor: 'pointer',
       height: 32,
       paddingRight: 32,
       position: 'relative',
       zIndex: 2,
     },
+    selectEnabled: {
+      cursor: 'pointer',
+    },
     labelHolder: {
       display: 'none',
     },
@@ -45,27 +43,30 @@ const SelectFieldInput = (props, context) => {
     className: classNameProp,
     ...inputprops
   } = props;
+  const selectClassName = classNames(
+    !inputprops.disabled && classes.selectEnabled,
+    classes.select,
+    classNameProp,
+  );
 
   return (
     <div
-      className={classes.root}
       onFocus={onFocus}
       onBlur={onBlur}
     >
       <select
-        className={classNames(classNameProp, classes.select)}
+        className={selectClassName}
         onFocus={onSelectFocus}
         onBlur={onSelectBlur}
         {...inputprops}
       >
         {/* Need this option for proper select sizing */}
         <option className={classes.labelHolder}>{label}</option>
-        {React.Children.map(options, (option, index) =>
-          React.createElement('option', {
-            key: index,
-            value: option.props.value,
-          }, option.props.value && option.props.children),
-        )}
+        {React.Children.map(options, (option, index) => (
+          <option key={index} value={option.props.value}>
+            {option.props.value && option.props.children}
+          </option>
+        ))}
       </select>
       <ArrowDropDownIcon className={classes.icon} />
     </div>

diff --git a/src/svg-icons/arrow-drop-down.js b/src/svg-icons/arrow-drop-down.js
@@ -1,12 +1,12 @@
-/* eslint-disable */
+// @flow weak
 
 import React from 'react';
 import pure from 'recompose/pure';
 import SvgIcon from '../SvgIcon';
 
 let ArrowDropDown = (props) => (
   <SvgIcon {...props}>
-    <path d="M7,10L12,15L17,10H7Z"/>
+    <path d="M7,10L12,15L17,10H7Z" />
   </SvgIcon>
 );
 ArrowDropDown = pure(ArrowDropDown);