Flexbox layout support for DropdownMenuWrapper component

trendmicro-frontend · Mar 7, 2018 · e0ca29f · e0ca29f
1 parent f8a08a4
commit e0ca29f
Show file tree

Hide file tree

Showing 9 changed files with 32 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -266,6 +266,7 @@ rootCloseEvent | One of:<br/>'click'<br/>'mousedown' | | Which event when fired
 Name | Type | Default | Description 
 :--- | :--- | :------ | :----------
 componentClass | element | div | A custom element for this component.
+flex | boolean | false | Whether to use the flexbox layout.
 open | boolean | false | Whether or not the dropdown is visible.
 pullRight | boolean | false | Align the menu to the right side of the dropdown toggle.
 onClose | function(event) | | A callback fired when the dropdown menu closes.

diff --git a/dist/react-dropdown.css b/dist/react-dropdown.css
diff --git a/dist/react-dropdown.min.css b/dist/react-dropdown.min.css
diff --git a/docs/bundle.js b/docs/bundle.js
diff --git a/docs/index.html b/docs/index.html
@@ -11,5 +11,5 @@
 </head>
 <body>
 <div id="container"></div>
-<script type="text/javascript" src="bundle.js?ea95ce0687334d9ae53a"></script></body>
+<script type="text/javascript" src="bundle.js?9eba4931e2a85e8221fc"></script></body>
 </html>
diff --git a/examples/DropdownMenuWrapper.jsx b/examples/DropdownMenuWrapper.jsx
@@ -13,8 +13,8 @@ export default () => (
                 style={{ width: '100%' }}
             >
                 <Dropdown.Toggle title="Custom range" />
-                <Dropdown.MenuWrapper>
-                    <Dropdown.Menu>
+                <Dropdown.MenuWrapper flex>
+                    <Dropdown.Menu style={{ flex: '1 0 0' }}>
                         <MenuItem eventKey="1d">
                             Last 24 hours
                         </MenuItem>
@@ -33,6 +33,7 @@ export default () => (
                     </Dropdown.Menu>
                     <div
                         style={{
+                            flex: '0 0 auto',
                             display: 'inline-block',
                             padding: 12,
                             borderLeft: '1px solid #ddd',

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trendmicro/react-dropdown",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "React Dropdown component",
   "main": "lib/index.js",
   "files": [

diff --git a/src/DropdownMenuWrapper.jsx b/src/DropdownMenuWrapper.jsx
@@ -18,6 +18,8 @@ class DropdownMenuWrapper extends PureComponent {
             PropTypes.func
         ]),
 
+        flex: PropTypes.bool,
+
         // Dropdown
         open: PropTypes.bool,
         pullRight: PropTypes.bool,
@@ -32,6 +34,8 @@ class DropdownMenuWrapper extends PureComponent {
     static defaultProps = {
         componentClass: 'div',
 
+        flex: false,
+
         // Dropdown
         open: false,
         pullRight: false
@@ -72,6 +76,7 @@ class DropdownMenuWrapper extends PureComponent {
         const {
             componentType, // eslint-disable-line
             componentClass: Component,
+            flex,
             open,
             pullRight,
             onClose,
@@ -90,7 +95,10 @@ class DropdownMenuWrapper extends PureComponent {
             >
                 <Component
                     {...props}
-                    className={cx(className, styles.dropdownMenuWrapper)}
+                    className={cx(className, {
+                        [styles.dropdownMenuWrapper]: true,
+                        [styles.flex]: !!flex
+                    })}
                 >
                     {React.Children.map(children, child => {
                         if (!React.isValidElement(child)) {

diff --git a/src/dropdown-menu-wrapper.styl b/src/dropdown-menu-wrapper.styl
@@ -17,6 +17,10 @@
     display: block;
 }
 
+.dropdown.open > .dropdown-menu-wrapper.flex {
+    display: flex;
+}
+
 .dropdown.open > .dropdown-menu-wrapper > .dropdown-menu {
     display: inline-block;
     border: 0;