A few moments of bliss with flexbox (mostly working fallbacks remain)

Author: fritz-c

.eslintrc.json

@@ -7,6 +7,7 @@
     },
     "rules": {
         "react/jsx-filename-extension": 0,
-        "react/prefer-stateless-function": 0
+        "react/prefer-stateless-function": 0,
+        "import/prefer-default-export": 0
     }
 }

src/examples/basicExample/app.js

@@ -24,7 +24,12 @@ const App = React.createClass({
                 expanded: true,
                 children: [
                     {
-                        value: 1,
+                        value: {
+                            id: 1,
+                            title: 'Really Long Name Nicholas Who Always Got' +
+                                ' Picked on in School For His Really Long Name',
+                            subtitle: 'Really good icebreaker, though',
+                        },
                         children: [], // null or undefined also ok
                     },
                     {

src/node-renderer-default.js

@@ -1,5 +1,18 @@
 import React, { PropTypes } from 'react';
-import styles from './node-renderer-default.scss';
+import { getIEVersion } from './utils/browser-utils';
+import baseStyles from './node-renderer-default.scss';
+
+let styles = baseStyles;
+// Add extra classes in browsers that don't support flex
+if (getIEVersion < 10) {
+    styles = {
+        ...baseStyles,
+        row:         `${styles.row} ${styles.row_NoFlex}`,
+        rowContents: `${styles.rowContents} ${styles.rowContents_NoFlex}`,
+        rowLabel:    `${styles.rowLabel} ${styles.rowLabel_NoFlex}`,
+        rowToolbar:  `${styles.rowToolbar} ${styles.rowToolbar_NoFlex}`,
+    };
+}
 
 const NodeRendererDefault = ({
     scaffoldBlockPxWidth,
@@ -23,9 +36,7 @@ const NodeRendererDefault = ({
         {connectDragPreview(
             <div className={styles.row + (isDragging ? ` ${styles.rowOriginWhileDragging}` : '')}>
                 {connectDragSource(( // Sets this handle as the element to start a drag-and-drop
-                    <div
-                        className={`${styles.rowItem} ${styles.moveHandle}`}
-                    />
+                    <div className={styles.moveHandle} />
                 ), { dropEffect: 'copy' })}
 
                 <div className={styles.rowContents}>
@@ -47,7 +58,7 @@ const NodeRendererDefault = ({
 
                     <div className={styles.rowToolbar}>
                         {buttons && buttons.map((btn, index) => (
-                            <div key={index} className={styles.rowItem}>
+                            <div key={index} className={styles.toolbarButton}>
                                 {btn}
                             </div>
                         ))}
@@ -65,7 +76,7 @@ NodeRendererDefault.propTypes = {
 
     scaffoldBlockPxWidth:     PropTypes.number.isRequired,
     toggleChildrenVisibility: PropTypes.func,
-    buttons:                  PropTypes.object.isRequired,
+    buttons:                  PropTypes.arrayOf(PropTypes.node),
 
     // Drag and drop API functions
     connectDragPreview: PropTypes.func.isRequired,

src/node-renderer-default.scss

@@ -1,51 +1,46 @@
-.fixVertAlign {
-    &::before {
-        content: '';
-        display: inline-block;
-        vertical-align: middle;
-        height: 100%;
-    }
-}
-
 .row {
-    @extend .fixVertAlign;
-
     padding: 10px 10px 10px 0;
     height: 100%;
     white-space: nowrap;
+    display: flex;
 }
 
 .rowOriginWhileDragging {
     opacity: 0.5;
 }
 
 .rowContents {
-    @extend .fixVertAlign;
-
-    display: inline-block;
     height: 100%;
     border: solid #BBB 1px;
     border-left: none;
     box-shadow: 0 2px 2px -2px;
-    padding: 0 15px 0 10px;
+    padding: 0 5px 0 10px;
     border-radius: 2px;
     min-width: 230px;
+    flex: 1 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
 
-    &::after {
-        content: '';
-        display: inline-block;
-        width: 100%;
-    }
+.rowLabel {
+    flex: 0 1 auto;
+    padding-right: 20px;
 }
 
-.rowItem {
+.rowToolbar {
+    flex: 0 1 auto;
+    display: flex;
+}
+
+%rowItem {
     display: inline-block;
     vertical-align: middle;
-    max-height: 100%;
-    overflow: hidden;
 }
 
 .moveHandle {
+    @extend %rowItem;
+
     height: 100%;
     width: 44px;
     background: #D8D8D8 url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MiIgaGVpZ2h0PSI0MiI+PGcgc3Ryb2tlPSIjRkZGIiBzdHJva2Utd2lkdGg9IjIuOSIgPjxwYXRoIGQ9Ik0xNCAxNS43aDE0LjQiLz48cGF0aCBkPSJNMTQgMjEuNGgxNC40Ii8+PHBhdGggZD0iTTE0IDI3LjFoMTQuNCIvPjwvZz4KPC9zdmc+') no-repeat center;
@@ -55,12 +50,8 @@
     border-radius: 1px;
 }
 
-.rowLabel {
-    @extend .rowItem;
-    padding-right: 20px;
-    text-align: left;
-    width: 50%;
-    line-height: 1;
+.toolbarButton {
+    @extend %rowItem;
 }
 
 .rowTitle {
@@ -70,16 +61,12 @@
 .rowTitleWithSubtitle {
     font-size: 85%;
     display: block;
+    height: 0.8rem;
 }
 
 .rowSubtitle {
     font-size: 70%;
-}
-
-.rowToolbar {
-    @extend .rowItem;
-    text-align: right;
-    width: 50%;
+    line-height: 1;
 }
 
 .visibilityToggleButton {
@@ -102,3 +89,41 @@
     @extend .visibilityToggleButton;
     background: #FFF url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCI+PGNpcmNsZSBjeD0iOSIgY3k9IjkiIHI9IjgiIGZpbGw9IiNGRkYiLz48ZyBzdHJva2U9IiM5ODk4OTgiIHN0cm9rZS13aWR0aD0iMS45IiA+PHBhdGggZD0iTTQuNSA5aDkiLz48cGF0aCBkPSJNOSA0LjV2OSIvPjwvZz4KPC9zdmc+') no-repeat center;
 }
+
+/**
+  * Classes for IE9 and below
+  */
+%fixVertAlign {
+    &::before {
+        content: '';
+        display: inline-block;
+        vertical-align: middle;
+        height: 100%;
+    }
+}
+
+.row_NoFlex {
+    @extend %fixVertAlign;
+}
+
+.rowContents_NoFlex {
+    @extend %fixVertAlign;
+
+    display: inline-block;
+    &::after {
+        content: '';
+        display: inline-block;
+        width: 100%;
+    }
+}
+
+.rowLabel_NoFlex {
+    @extend %rowItem;
+    width: 50%;
+}
+
+.rowToolbar_NoFlex {
+    @extend %rowItem;
+    text-align: right;
+    width: 50%;
+}

src/utils/browser-utils.js

@@ -0,0 +1,9 @@
+/**
+ * Get the version of Internet Explorer in use, or undefined
+ *
+ * @return {?number} ieVersion - IE version as an integer, or undefined if not IE
+ */
+export function getIEVersion() {
+    const match = navigator.userAgent.match(/(?:MSIE |Trident\/.*; rv:)(\d+)/);
+    return match ? parseInt(match[1], 10) : undefined;
+}