dropdown + select field

mui · Oct 15, 2015 · b7ff8ac · b7ff8ac
1 parent 8e65d37
commit b7ff8ac
Showing 1 changed file with 38 additions and 40 deletions.
diff --git a/src/drop-down-menu.jsx b/src/drop-down-menu.jsx
@@ -9,6 +9,7 @@ const Menu = require('./menu/menu');
 const ClearFix = require('./clearfix');
 const DefaultRawTheme = require('./styles/raw-themes/light-raw-theme');
 const ThemeManager = require('./styles/theme-manager');
+const Popover = require('./popover/popover');
 
 
 const DropDownMenu = React.createClass({
@@ -100,8 +101,10 @@ const DropDownMenu = React.createClass({
       },
       control: {
         cursor: disabled ? 'not-allowed' : 'pointer',
-        position: 'static',
+        position: 'relative',
         height: '100%',
+        width:'100%',
+
       },
       controlBg: {
         transition: Transitions.easeOut(),
@@ -119,18 +122,19 @@ const DropDownMenu = React.createClass({
       label: {
         transition: Transitions.easeOut(),
         lineHeight: spacing.desktopToolbarHeight + 'px',
-        position: 'absolute',
+        position: 'relative',
         paddingLeft: spacing.desktopGutter,
-        top: 0,
+        paddingRight: spacing.desktopGutter * 2,
         opacity: 1,
+        width:'auto',
         color: disabled ? this.state.muiTheme.rawTheme.palette.disabledColor : this.state.muiTheme.rawTheme.palette.textColor,
       },
       underline: {
         borderTop: 'solid 1px ' + accentColor,
         margin: '-1px ' + spacing.desktopGutter + 'px',
       },
       menu: {
-        zIndex: zIndex + 1,
+        position:'relative',
       },
       menuItem: {
         paddingRight: spacing.iconSize +
@@ -147,14 +151,6 @@ const DropDownMenu = React.createClass({
         opacity: 0,
         top: spacing.desktopToolbarHeight / 2,
       },
-      overlay: {
-        height: '100%',
-        width: '100%',
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        zIndex: zIndex,
-      },
     };
 
     return styles;
@@ -216,37 +212,38 @@ const DropDownMenu = React.createClass({
           this.state.open && styles.rootWhenOpen,
           this.props.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)}>
-              {displayValue}
+          <div style={this.mergeStyles(styles.control)} onTouchTap={this._onControlClick}>
+            <div style={this.prepareStyles(styles.label, this.props.labelStyle)}>
+              <span>{displayValue}</span>
             </div>
             <DropDownArrow style={this.mergeStyles(styles.icon, this.props.iconStyle)}/>
             <div style={this.prepareStyles(styles.underline, this.props.underlineStyle)}/>
-          </ClearFix>
-
-          <Menu
-            ref="menuItems"
-            autoWidth={this.props.autoWidth}
-            selectedIndex={selectedIndex}
-            menuItems={menuItems}
-            style={styles.menu}
-            menuItemStyle={this.mergeStyles(styles.menuItem, this.props.menuItemStyle)}
-            hideable={true}
-            visible={this.state.open}
-            onRequestClose={this._onMenuRequestClose}
-            onItemTap={this._onMenuItemClick} />
-          {this.state.open && <div style={this.prepareStyles(styles.overlay)} onTouchTap={this._handleOverlayTouchTap} />}
+          </div>
+          <Popover
+            anchorOrigin={{horizontal:'left', vertical:'top'}}
+            anchorEl={this.state.anchorEl}
+            open={this.state.open}
+            onRequestClose={this._onMenuRequestClose} >
+            <Menu
+              ref="menuItems"
+              autoWidth={this.props.autoWidth}
+              selectedIndex={selectedIndex}
+              menuItems={menuItems}
+              style={styles.menu}
+              menuItemStyle={this.mergeStyles(styles.menuItem, this.props.menuItemStyle)}
+              hideable={true}
+              onRequestClose={this._onMenuRequestClose}
+              onItemTap={this._onMenuItemClick}>
+            </Menu>
+          </Popover>
       </div>
     );
   },
 
   _setWidth() {
     let el = ReactDOM.findDOMNode(this);
-    let menuItemsDom = ReactDOM.findDOMNode(this.refs.menuItems);
     if (!this.props.style || !this.props.style.hasOwnProperty('width')) {
       el.style.width = 'auto';
-      el.style.width = menuItemsDom.offsetWidth + 'px';
     }
   },
 
@@ -262,7 +259,10 @@ const DropDownMenu = React.createClass({
 
   _onControlClick() {
     if (!this.props.disabled) {
-      this.setState({ open: !this.state.open });
+      this.setState({
+        open: !this.state.open,
+        anchorEl: ReactDOM.findDOMNode(this),
+      });
     }
   },
 
@@ -317,11 +317,15 @@ const DropDownMenu = React.createClass({
       selectedIndex: key,
       value: e.target.value,
       open: false,
+      anchorEl:null,
     });
   },
 
   _onMenuRequestClose() {
-    this.setState({open:false});
+    this.setState({
+      open:false,
+      anchorEl:null,
+    });
   },
 
   _selectPreviousItem() {
@@ -332,12 +336,6 @@ const DropDownMenu = React.createClass({
     this.setState({selectedIndex: Math.min(this.state.selectedIndex + 1, this.props.menuItems.length - 1)});
   },
 
-  _handleOverlayTouchTap() {
-    this.setState({
-      open: false,
-    });
-  },
-
   _isControlled() {
     return this.props.hasOwnProperty('value') ||
       this.props.hasOwnProperty('valueLink');