Merge pull request #1910 from oliviertassinari/spread-properties

Use the spread operator for properties
mui · Oct 20, 2015 · 294071f · 294071f
2 parents 444575d + e57e822
commit 294071f
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 39 deletions.
diff --git a/src/app-bar.jsx b/src/app-bar.jsx
@@ -44,7 +44,7 @@ const AppBar = React.createClass({
   getInitialState () {
     return {
       muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme),
-    };    
+    };
   },
 
   //to update theme inside state whenever a new theme is passed down
@@ -133,15 +133,28 @@ const AppBar = React.createClass({
   },
 
   render() {
-    let props = this.props;
+    let {
+      title,
+      iconStyleRight,
+      showMenuIconButton,
+      iconElementLeft,
+      iconElementRight,
+      iconClassNameLeft,
+      iconClassNameRight,
+      className,
+      style,
+      zDepth,
+      children,
+      ...other,
+    } = this.props;
+
     let menuElementLeft;
     let menuElementRight;
     let styles = this.getStyles();
-    let title = props.title;
     let iconRightStyle = this.mergeStyles(styles.iconButton.style, {
       marginRight: -16,
       marginLeft: 'auto',
-    }, props.iconStyleRight);
+    }, iconStyleRight);
     let titleElement;
 
     if (title) {
@@ -152,9 +165,7 @@ const AppBar = React.createClass({
         <div style={this.prepareStyles(styles.mainElement)}>{title}</div>;
     }
 
-    if (props.showMenuIconButton) {
-      let iconElementLeft = props.iconElementLeft;
-
+    if (showMenuIconButton) {
       if (iconElementLeft) {
         switch (iconElementLeft.type.displayName) {
           case 'IconButton':
@@ -170,22 +181,20 @@ const AppBar = React.createClass({
           </div>
         );
       } else {
-        let child = (props.iconClassNameLeft) ? '' : <NavigationMenu style={this.mergeStyles(styles.iconButton.iconStyle)}/>;
+        let child = (iconClassNameLeft) ? '' : <NavigationMenu style={this.mergeStyles(styles.iconButton.iconStyle)}/>;
         menuElementLeft = (
           <IconButton
             style={this.mergeStyles(styles.iconButton.style)}
             iconStyle={this.mergeStyles(styles.iconButton.iconStyle)}
-            iconClassName={props.iconClassNameLeft}
+            iconClassName={iconClassNameLeft}
             onTouchTap={this._onLeftIconButtonTouchTap}>
               {child}
           </IconButton>
         );
       }
     }
 
-    if (props.iconElementRight) {
-      let iconElementRight = props.iconElementRight;
-
+    if (iconElementRight) {
       switch (iconElementRight.type.displayName) {
         case 'IconMenu':
         case 'IconButton':
@@ -206,27 +215,28 @@ const AppBar = React.createClass({
           {iconElementRight}
         </div>
       );
-    } else if (props.iconClassNameRight) {
+    } else if (iconClassNameRight) {
       menuElementRight = (
         <IconButton
           style={iconRightStyle}
           iconStyle={this.mergeStyles(styles.iconButton.iconStyle)}
-          iconClassName={props.iconClassNameRight}
+          iconClassName={iconClassNameRight}
           onTouchTap={this._onRightIconButtonTouchTap}>
         </IconButton>
       );
     }
 
     return (
       <Paper
+        {...other}
         rounded={false}
-        className={props.className}
-        style={this.mergeStyles(styles.root, props.style)}
-        zDepth={props.zDepth}>
+        className={className}
+        style={this.mergeStyles(styles.root, style)}
+        zDepth={zDepth}>
           {menuElementLeft}
           {titleElement}
           {menuElementRight}
-          {props.children}
+          {children}
       </Paper>
     );
   },

diff --git a/src/drop-down-menu.jsx b/src/drop-down-menu.jsx
@@ -171,7 +171,22 @@ const DropDownMenu = React.createClass({
   },
 
   render() {
-    let _this = this;
+    const {
+      autoWidth,
+      className,
+      onFocus,
+      onBlur,
+      style,
+      displayMember,
+      valueMember,
+      valueLink,
+      labelStyle,
+      iconStyle,
+      underlineStyle,
+      menuItemStyle,
+      ...other,
+    } = this.props;
+
     let styles = this.getStyles();
     let selectedIndex = this._isControlled() ? null : this.state.selectedIndex;
     let displayValue = "";
@@ -180,58 +195,57 @@ const DropDownMenu = React.createClass({
         console.assert(!!this.props.menuItems[selectedIndex], 'SelectedIndex of ' + selectedIndex + ' does not exist in menuItems.');
       }
     }
-    else {
-      if (this.props.valueMember && this._isControlled()) {
-        let value = this.props.hasOwnProperty('value') ? this.props.value : this.props.valueLink.value;
-        if (value !== null && value !== undefined) {
-          for (let i = 0; i < this.props.menuItems.length; i++) {
-            if (this.props.menuItems[i][this.props.valueMember] === value) {
-              selectedIndex = i;
-            }
+    else if (valueMember && this._isControlled()) {
+      let value = this.props.hasOwnProperty('value') ? this.props.value : valueLink.value;
+      if (value !== null && value !== undefined) {
+        for (let i = 0; i < this.props.menuItems.length; i++) {
+          if (this.props.menuItems[i][valueMember] === value) {
+            selectedIndex = i;
           }
         }
       }
     }
 
     let selectedItem = this.props.menuItems[selectedIndex];
     if (selectedItem) {
-      displayValue = selectedItem[this.props.displayMember];
+      displayValue = selectedItem[displayMember];
     }
 
     let menuItems = this.props.menuItems.map((item) => {
-      item.text = item[_this.props.displayMember];
-      item.payload = item[_this.props.valueMember];
+      item.text = item[displayMember];
+      item.payload = item[valueMember];
       return item;
     });
 
     return (
       <div
+        {...other}
         ref="root"
         onKeyDown={this._onKeyDown}
-        onFocus={this.props.onFocus}
-        onBlur={this.props.onBlur}
-        className={this.props.className}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        className={className}
         style={this.prepareStyles(
           styles.root,
           this.state.open && styles.rootWhenOpen,
-          this.props.style)} >
+          style)} >
 
           <ClearFix style={this.mergeStyles(styles.control)} onTouchTap={this._onControlClick}>
             <Paper style={this.mergeStyles(styles.controlBg)} zDepth={0} />
-            <div style={this.prepareStyles(styles.label, this.state.open && styles.labelWhenOpen, this.props.labelStyle)}>
+            <div style={this.prepareStyles(styles.label, this.state.open && styles.labelWhenOpen, labelStyle)}>
               {displayValue}
             </div>
-            <DropDownArrow style={this.mergeStyles(styles.icon, this.props.iconStyle)}/>
-            <div style={this.prepareStyles(styles.underline, this.props.underlineStyle)}/>
+            <DropDownArrow style={this.mergeStyles(styles.icon, iconStyle)}/>
+            <div style={this.prepareStyles(styles.underline, underlineStyle)}/>
           </ClearFix>
 
           <Menu
             ref="menuItems"
-            autoWidth={this.props.autoWidth}
+            autoWidth={autoWidth}
             selectedIndex={selectedIndex}
             menuItems={menuItems}
             style={styles.menu}
-            menuItemStyle={this.mergeStyles(styles.menuItem, this.props.menuItemStyle)}
+            menuItemStyle={this.mergeStyles(styles.menuItem, menuItemStyle)}
             hideable={true}
             visible={this.state.open}
             onRequestClose={this._onMenuRequestClose}