Fix some styles, import react-virtualized style

Author: fritz-c

src/examples/basicExample/app.js

@@ -9,15 +9,14 @@ const App = React.createClass({
             treeData: [
                 {
                     id: 'b12314',
-                    title: 'Joe',
+                    title: 'Beast Man',
                     subtitle: 'Pancakes',
                     expanded: true,
                     children: [
                         {
                             id: 1,
-                            title: 'Really Long Name Nicholas Who Always Got' +
-                                ' Picked on in School For His Really Long Name',
-                            subtitle: 'Really good icebreaker, though',
+                            title: 'Joe',
+                            subtitle: 'Pancakes',
                             children: [], // null or undefined also ok
                         },
                         {
@@ -48,8 +47,9 @@ const App = React.createClass({
                 },
                 {
                     id: 'b12316',
-                    title: 'Beast Man',
-                    subtitle: 'Pancakes',
+                    title: 'Really Long Name Nicholas Who Always Got' +
+                        ' Picked on in School For His Really Long Name',
+                    subtitle: 'Really good icebreaker, though',
                     children: [
                         {
                             title: 'Bruce',
@@ -98,7 +98,7 @@ const App = React.createClass({
                     </span>
                     <h3>Demo</h3>
 
-                    <div style={{ height: 500 }}>
+                    <div style={{ height: 385 }}>
                         <SortableTree
                             treeData={this.state.treeData}
                             updateTreeData={treeData => this.setState({ treeData })}

src/examples/basicExample/stylesheets/app.scss

@@ -8,3 +8,7 @@
 .main-content {
     box-sizing: border-box;
 }
+
+body {
+    background-color: #FAFAFA;
+}

src/node-renderer-default.scss

@@ -21,6 +21,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
+    background-color: white;
 }
 
 .rowLabel {

src/react-sortable-tree.js

@@ -6,6 +6,7 @@
 
 import React, { Component, PropTypes } from 'react';
 import { AutoSizer, VirtualScroll } from 'react-virtualized';
+import 'react-virtualized/styles.css';
 import TreeNode from './tree-node';
 import {
     walk,
@@ -172,12 +173,13 @@ class ReactSortableTree extends Component {
 
     render() {
         const {
+            style = {},
             rowHeight,
         } = this.props;
         const { rows } = this.state;
 
         return (
-            <div className={styles.tree}>
+            <div className={styles.tree} style={{ height: '100%', ...style }}>
                 <AutoSizer>
                     {({height, width}) => (
                         <VirtualScroll
@@ -229,8 +231,16 @@ class ReactSortableTree extends Component {
 ReactSortableTree.propTypes = {
     treeData:   PropTypes.arrayOf(PropTypes.object).isRequired,
     changeData: PropTypes.func,
+
+    // Callback for move operation.
+    // Called as moveNode({ node, path, newParentPath, newChildIndex })
     moveNode: PropTypes.func,
-    rowHeight:  PropTypes.oneOfType([ PropTypes.number, PropTypes.func ]), // Used for react-virtualized
+
+    // Style applied to the container wrapping the tree (style defaults to {height: '100%'})
+    style: PropTypes.object,
+
+    // Height of each node row, used for react-virtualized
+    rowHeight: PropTypes.oneOfType([ PropTypes.number, PropTypes.func ]),
 
     scaffoldBlockPxWidth: PropTypes.number,
 

src/react-sortable-tree.scss

@@ -2,18 +2,23 @@
   * The container holding the VirtualScroll
   */
 .tree {
-    height: 100%;
-    overflow: hidden;
-    * {
-        box-sizing: border-box;
-    }
+    /*! This comment keeps Sass from deleting the empty rule */
 }
 
 /**
  * Extra class applied to VirtualScroll through className prop
  */
 .virtualScrollOverride {
     overflow-x: visible !important;
+    overflow-y: auto !important;
+
+    * {
+        box-sizing: border-box;
+    }
+}
+
+:global .Grid__innerScrollContainer {
+    overflow: visible;
 }
 
 :global .Grid {

webpack.config.demo.babel.js

@@ -47,6 +47,14 @@ module.exports = {
                 ],
                 include: path.join(__dirname, 'src')
             },
+            {
+                test: /\.css$/,
+                loaders: [
+                    'style-loader',
+                    'css-loader',
+                    'postcss-loader',
+                ],
+            },
             {
                 test: /\.(jpe?g|png|gif)$/,
                 loaders: [

webpack.config.dev.babel.js

@@ -43,6 +43,14 @@ module.exports = {
                 ],
                 include: path.join(__dirname, 'src')
             },
+            {
+                test: /\.css$/,
+                loaders: [
+                    'style-loader',
+                    'css-loader',
+                    'postcss-loader',
+                ],
+            },
             {
                 test: /\.(jpe?g|png|gif)$/,
                 loaders: [

webpack.config.test.babel.js

@@ -49,6 +49,14 @@ module.exports = {
                 ],
                 include: path.join(__dirname, 'src')
             },
+            {
+                test: /\.css$/,
+                loaders: [
+                    'style-loader',
+                    'css-loader',
+                    'postcss-loader',
+                ],
+            },
             {
                 test: /\.(jpe?g|png|gif)$/,
                 loaders: [

webpack.config.umd.babel.js

@@ -59,6 +59,14 @@ module.exports = {
                 ],
                 include: path.join(__dirname, 'src')
             },
+            {
+                test: /\.css$/,
+                loaders: [
+                    'style-loader',
+                    'css-loader',
+                    'postcss-loader',
+                ],
+            },
         ]
     }
 };