[Select] Add IconComponent property (#11136)

mui · May 3, 2018 · 6b87ae1 · 6b87ae1
1 parent 9747089
commit 6b87ae1
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 3 deletions.
diff --git a/packages/material-ui/src/Select/Select.d.ts b/packages/material-ui/src/Select/Select.d.ts
@@ -9,6 +9,7 @@ export interface SelectProps
     Pick<SelectInputProps, 'onChange'> {
   autoWidth?: boolean;
   displayEmpty?: boolean;
+  IconComponent?: React.ReactType;
   input?: React.ReactNode;
   MenuProps?: Partial<MenuProps>;
   multiple?: boolean;

diff --git a/packages/material-ui/src/Select/Select.js b/packages/material-ui/src/Select/Select.js
@@ -4,6 +4,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import SelectInput from './SelectInput';
 import withStyles from '../styles/withStyles';
+import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';
 import Input from '../Input'; // Import to enforce the CSS injection order
 
 export const styles = theme => ({
@@ -65,6 +66,7 @@ function Select(props) {
     children,
     classes,
     displayEmpty,
+    IconComponent,
     input,
     inputProps,
     MenuProps,
@@ -87,6 +89,7 @@ function Select(props) {
       children,
       classes,
       displayEmpty,
+      IconComponent,
       MenuProps,
       multiple,
       native,
@@ -123,6 +126,10 @@ Select.propTypes = {
    * You can only use it when the `native` property is `false` (default).
    */
   displayEmpty: PropTypes.bool,
+  /**
+   * The icon that displays the arrow.
+   */
+  IconComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   /**
    * An `Input` element; does not have to be a material-ui specific `Input`.
    */
@@ -198,6 +205,7 @@ Select.propTypes = {
 Select.defaultProps = {
   autoWidth: false,
   displayEmpty: false,
+  IconComponent: ArrowDropDownIcon,
   input: <Input />,
   multiple: false,
   native: false,

diff --git a/packages/material-ui/src/Select/SelectInput.d.ts b/packages/material-ui/src/Select/SelectInput.d.ts
@@ -6,6 +6,7 @@ export interface SelectInputProps extends StandardProps<{}, SelectInputClassKey>
   autoFocus?: boolean;
   autoWidth: boolean;
   disabled?: boolean;
+  IconComponent?: React.ReactType;
   inputRef?: (
     ref: HTMLSelectElement | { node: HTMLInputElement; value: SelectInputProps['value'] },
   ) => void;

diff --git a/packages/material-ui/src/Select/SelectInput.js b/packages/material-ui/src/Select/SelectInput.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import keycode from 'keycode';
 import warning from 'warning';
-import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';
 import Menu from '../Menu/Menu';
 import { isFilled } from '../Input/Input';
 
@@ -165,6 +164,7 @@ class SelectInput extends React.Component {
       className: classNameProp,
       disabled,
       displayEmpty,
+      IconComponent,
       inputRef,
       MenuProps = {},
       multiple,
@@ -223,7 +223,7 @@ class SelectInput extends React.Component {
           >
             {children}
           </select>
-          <ArrowDropDownIcon className={classes.icon} />
+          <IconComponent className={classes.icon} />
         </div>
       );
     }
@@ -332,7 +332,7 @@ class SelectInput extends React.Component {
           type={type}
           {...other}
         />
-        <ArrowDropDownIcon className={classes.icon} />
+        <IconComponent className={classes.icon} />
         <Menu
           id={`menu-${name || ''}`}
           anchorEl={this.displayNode}
@@ -390,6 +390,10 @@ SelectInput.propTypes = {
    * You can only use it when the `native` property is `false` (default).
    */
   displayEmpty: PropTypes.bool,
+  /**
+   * The icon that displays the arrow.
+   */
+  IconComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   /**
    * Use that property to pass a ref callback to the native select element.
    */

diff --git a/packages/material-ui/src/Select/SelectInput.test.js b/packages/material-ui/src/Select/SelectInput.test.js
@@ -17,6 +17,7 @@ describe('<SelectInput />', () => {
     native: false,
     multiple: false,
     displayEmpty: false,
+    IconComponent: 'div',
     children: [
       <MenuItem key={1} value={10}>
         Ten

diff --git a/pages/api/select.md b/pages/api/select.md
@@ -16,6 +16,7 @@ filename: /packages/material-ui/src/Select/Select.js
 | <span class="prop-name">children</span> | <span class="prop-type">node |  | The option elements to populate the select with. Can be some `MenuItem` when `native` is false and `option` when `native` is true. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
 | <span class="prop-name">displayEmpty</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the selected item is displayed even if its value is empty. You can only use it when the `native` property is `false` (default). |
+| <span class="prop-name">IconComponent</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">ArrowDropDownIcon</span> | The icon that displays the arrow. |
 | <span class="prop-name">input</span> | <span class="prop-type">element | <span class="prop-default">&lt;Input /></span> | An `Input` element; does not have to be a material-ui specific `Input`. |
 | <span class="prop-name">inputProps</span> | <span class="prop-type">object |  | Properties applied to the `input` element. When `native` is `true`, the properties are applied on the `select` element. |
 | <span class="prop-name">MenuProps</span> | <span class="prop-type">object |  | Properties applied to the `Menu` element. |