Header box model

.gitignore

@@ -1,2 +1,2 @@
 node_modules/
-.idea/
+yarn.*

config/webpack.dev.js

@@ -28,10 +28,14 @@ module.exports = {
   context: __dirname,
 
   entry: {
-    examples: [path.join(__DEV_INPUT__, 'index.js')],
+    examples: ['babel-polyfill', path.join(__DEV_INPUT__, 'index.js')],
     vendor: [
+      'faker',
+      'lodash',
       'react',
       'react-dom',
+      'react-router',
+      'interactjs',
       'jquery'
     ]
   },
@@ -44,17 +48,20 @@ module.exports = {
     loaders: [{
       test: /\.(js|jsx)$/,
       exclude: /(node_modules)/,
-      loader: 'babel',
+      loader: 'babel-loader',
       query: {
         presets: ['react', 'es2015', 'stage-0']
       }
     }, {
       test: /\.(less|css)$/,
       loader: 'style-loader!css-loader!less-loader'
     }, {
-      test: /\.(jpe?g|png|gif|svg)$/i,
+      test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/,
+      loader: 'url-loader?importLoaders=1&limit=100000'
+    }, {
+      test: /\.(jpe?g|png|gif)$/i,
       loaders: [
-        `file?context=../images&name=images/[path][name].[ext]`
+        `file-loader`
       ]
     }]
   },
@@ -63,6 +70,7 @@ module.exports = {
     contentBase: __DEV_INPUT__,
     historyApiFallback: true,
     host: '0.0.0.0',
+    port: 8888,
     hot: true,
     staticOptions: {}
   },
@@ -73,11 +81,11 @@ module.exports = {
         'NODE_ENV': '"development"'
       }
     }),
-    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'),
-    new webpack.optimize.OccurenceOrderPlugin()
+    new webpack.optimize.CommonsChunkPlugin({name: 'vendor', filename: 'vendor.js'}),
+    new webpack.optimize.OccurrenceOrderPlugin()
   ],
 
   resolve: {
-    extensions: ['', '.js', '.jsx', '.css']
+    extensions: ['.js', '.jsx', '.css']
   }
 };

config/webpack.prod.js

@@ -40,8 +40,8 @@ module.exports = {
   output: {
     path: __OUTPUT__,
     publicPath: '/',
-    filename: `slick.es6.min.js`,
-    libraryTarget: 'commonjs'
+    filename: 'slick.es6.min.js',
+    libraryTarget: 'commonjs2'
   },
 
   externals: [nodeExternals()],
@@ -50,7 +50,7 @@ module.exports = {
     loaders: [{
       test: /\.(js|jsx)$/,
       exclude: /(node_modules)/,
-      loader: 'babel',
+      loader: 'babel-loader',
       query: {
         presets: ['es2015', 'stage-0']
       }
@@ -60,7 +60,7 @@ module.exports = {
     }, {
       test: /\.(jpe?g|png|gif|svg)$/i,
       loaders: [
-        `file?context=${__IMAGES__}&hash=sha512&digest=hex&name=[hash].[ext]`,
+        `file-loader?context=${__IMAGES__}&hash=sha512&digest=hex&name=[hash].[ext]`,
         `image-webpack?${imgquery}`
       ]
     }]
@@ -72,9 +72,9 @@ module.exports = {
         NODE_ENV: '"production"'
       }
     }),
-    new webpack.optimize.OccurenceOrderPlugin(),
-    new webpack.optimize.DedupePlugin(),
+    new webpack.optimize.OccurrenceOrderPlugin(),
     new webpack.optimize.UglifyJsPlugin({
+      sourceMap: true,
       beautify: false, // prod
       mangle: {
         screw_ie8: true
@@ -93,10 +93,11 @@ module.exports = {
         from: `${__PLUGINS__}/**/*.css`,
         flatten: true
       }
-    ])
+    ]),
+    new webpack.optimize.ModuleConcatenationPlugin()
   ],
 
   resolve: {
-    extensions: ['', '.js']
+    extensions: ['.js']
   }
 };

dist/slick.grid.less

@@ -30,7 +30,7 @@
     overflow: hidden;
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
-    height: 16px;
+    //height: 16px;
     line-height: 16px;
     margin: 0;
     padding: 4px;
@@ -125,11 +125,11 @@
   .slick-header-column.ui-state-default {
     position: relative;
     display: inline-block;
-    box-sizing: content-box !important;
+    box-sizing: border-box;
     overflow: hidden;
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
-    height: 16px;
+    //height: 16px;
     line-height: 16px;
     margin: 0;
     padding: 4px;

examples/components/Grid.js

@@ -0,0 +1,36 @@
+import React from 'react';
+
+export default class Grid extends React.Component {
+
+  cleanup(example, id){
+    this.grid && this.grid.destroy();
+    this.grid = example.init('#myGrid');
+    const node = this.grid.getContainerNode();
+    node.classList.remove(`example-${this.props.id}`);
+    node.classList.add(`example-${id}`);
+
+    example.onReady && example.onReady(this.grid);
+    document.title = example.title;
+  }
+
+  componentDidMount(){
+    const { example, id } = this.props;
+    this.cleanup(example, id);
+  }
+
+  componentWillReceiveProps({example, id}){
+    this.cleanup(example, id);
+  }
+
+  componentWillUnmount(){
+    this.grid.destroy();
+  }
+
+  render(){
+    return <div className="demo column">
+      <div id="myGrid" style={{width:'100%',height:'400px'}} className='slickgrid-container' />
+      <div className="log">
+      </div>
+    </div>;
+  }
+}

examples/components/Menu.js

@@ -0,0 +1,26 @@
+import React    from 'react';
+import { Link } from 'react-router-dom';
+
+class Menu extends React.Component {
+
+  render(){
+    const { examples } = this.props;
+
+    return <div className="menu-container column is-2">
+      <p className="menu-label">
+        Example list
+      </p>
+      <div className="menu">
+        <ul className='menu-list'>
+          {examples.map((example, index) => {
+            return <li key={index}>
+              <Link className="demo-link" to={`/examples/${index}`}>{example.title}</Link>
+            </li>;
+          })}
+        </ul>
+      </div>
+    </div>;
+  }
+}
+
+export default Menu;

examples/example-data.js

@@ -1,16 +1,17 @@
-const data = [];
+import { makeArray } from './lib/utils';
+import Faker from 'faker'
 
-for (let i = 0; i < 500; i++){
-  const d = (data[i] = {});
-
-  d.id = i;
-  d['title'] = 'Task ' + i;
-  d['description'] = 'This is a sample task description.\n  It can be multiline';
-  d['duration'] = '5 days';
-  d['percentComplete'] = Math.round(Math.random() * 100);
-  d['start'] = '01/01/2009';
-  d['finish'] = '01/05/2009';
-  d['effortDriven'] = (i % 5 == 0);
-}
+const data = makeArray(500, id => {
+  return {
+    id,
+    title: `Task ${id}`,
+    description: Faker.lorem.paragraph(),
+    duration: Faker.random.number() + ' days',
+    percentComplete: Math.round(Math.random() * 100),
+    start: Faker.date.past(),
+    finish: Faker.date.future(),
+    effortDriven: (id % 5 == 0)
+  }
+});
 
 export default data;

examples/example1.js

@@ -26,5 +26,5 @@ export default {
     return grid;
   },
   title: 'Simple Example',
-  route: '/example1'
+  route: 'example1'
 };