[AppBar] Add iconStyleLeft prop (fix #3667)

- Add export `getStyles` of app-bar.js for test
mui · Mar 17, 2016 · 17d686a · 17d686a
1 parent d768a13
commit 17d686a
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 4 deletions.
diff --git a/src/app-bar.jsx b/src/app-bar.jsx
@@ -6,7 +6,7 @@ import Paper from './paper';
 import PropTypes from './utils/prop-types';
 import warning from 'warning';
 
-function getStyles(props, state) {
+export function getStyles(props, state) {
   const {
     appBar,
     button: {
@@ -98,6 +98,11 @@ const AppBar = React.createClass({
      */
     iconElementRight: React.PropTypes.element,
 
+    /**
+     * Override the inline-styles of the element displayed on the left side of the app bar.
+     */
+    iconStyleLeft: React.PropTypes.object,
+
     /**
      * Override the inline-styles of the element displayed on the right side of the app bar.
      */
@@ -216,6 +221,7 @@ const AppBar = React.createClass({
     const {
       title,
       titleStyle,
+      iconStyleLeft,
       iconStyleRight,
       showMenuIconButton,
       iconElementLeft,
@@ -247,6 +253,8 @@ const AppBar = React.createClass({
       style: prepareStyles(Object.assign(styles.title, styles.mainElement, titleStyle)),
     }, title);
 
+    const iconLeftStyle = Object.assign({}, styles.iconButtonStyle, iconStyleLeft);
+
     if (showMenuIconButton) {
       let iconElementLeftNode = iconElementLeft;
 
@@ -260,15 +268,15 @@ const AppBar = React.createClass({
         }
 
         menuElementLeft = (
-          <div style={prepareStyles(Object.assign({}, styles.iconButtonStyle))}>
+          <div style={prepareStyles(iconLeftStyle)}>
             {iconElementLeftNode}
           </div>
         );
       } else {
         const child = iconClassNameLeft ? '' : <NavigationMenu style={Object.assign({}, styles.iconButtonIconStyle)} />;
         menuElementLeft = (
           <IconButton
-            style={styles.iconButtonStyle}
+            style={iconLeftStyle}
             iconStyle={styles.iconButtonIconStyle}
             iconClassName={iconClassNameLeft}
             onTouchTap={this._onLeftIconButtonTouchTap}

diff --git a/test/unit/AppBar.spec.js b/test/unit/AppBar.spec.js
@@ -2,7 +2,7 @@ import React from 'react';
 import sinon from 'sinon';
 import {shallow} from 'enzyme';
 import {assert} from 'chai';
-import AppBar from 'src/app-bar';
+import AppBar, {getStyles} from 'src/app-bar';
 import IconButton from 'src/icon-button';
 import Paper from 'src/paper';
 import NavigationClose from 'src/svg-icons/navigation/close';
@@ -169,4 +169,39 @@ describe('<AppBar />', () => {
 
     assert.equal(wrapper.find(Paper).get(0).props.zDepth, 2, 'should have zDepth to 2');
   });
+
+  it('menuElementLeft\'s style should be iconButtonStyle', () => {
+    const wrapper = shallow(
+      <AppBar />
+    );
+
+    const menuElementLeft = wrapper.find(IconButton).get(0);
+    const style = menuElementLeft.props.style;
+    const iconButtonStyle = getStyles(wrapper.props(), wrapper.state()).iconButtonStyle;
+    assert.deepEqual(style, iconButtonStyle, 'style should be iconButtonStyle');
+  });
+
+  it('if pass iconStyleLeft={marginTop}, change the marginTop only', () => {
+    const wrapper = shallow(
+      <AppBar iconStyleLeft={{marginTop: 99}} />
+    );
+
+    const menuElementLeft = wrapper.find(IconButton).get(0);
+    const style = menuElementLeft.props.style;
+    const iconButtonStyle = getStyles(wrapper.props(), wrapper.state()).iconButtonStyle;
+    const expectedStyle = Object.assign({}, iconButtonStyle, {marginTop: 99});
+    assert.deepEqual(style, expectedStyle, 'should be change style.marginTop only');
+  });
+
+  it('if pass iconElementLeft and iconStyleLeft={marginTop}, change the marginTop only', () => {
+    const wrapper = shallow(
+      <AppBar iconElementLeft={<span>foo</span>} iconStyleLeft={{marginTop: 99}} />
+    );
+
+    const menuElementLeft = wrapper.find('div').get(0);
+    const style = menuElementLeft.props.style;
+    const iconButtonStyle = getStyles(wrapper.props(), wrapper.state()).iconButtonStyle;
+    const expectedStyle = Object.assign({}, iconButtonStyle, {marginTop: 99});
+    assert.deepEqual(style, expectedStyle, 'should be change style.marginTop only');
+  });
 });