Add states as sample data, add filtering and demo, update readme, add animation prop

Author: jrowny

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2015 Jonathan
+Copyright (c) 2015 Jonathan Rowny
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

ReadMe.md renamed to README.md

@@ -23,14 +23,15 @@ Options (Properties)
 =====
 
   * **items** | default: [] | The array of items in the grid
-  * **displayObject** | default: <GridItem/> | The React compnent used to display items
+  * **displayObject** | default: &lt;GridItem/&gt; | The React compnent used to display items
   * **keyProp** | default: 'key' | The property to be used as a key 
   * **filterProp** | default: 'filtered' | The property to be used for filtering, if the filtered value is true, the item won't be displayed. It's important to not remove items from the array because that will cause React to remove the DOM, for performance we would rather hide it then remove it.
   * **sortProp** | default: 'sort' | The property to sort on
   * **itemWidth** | default: 128 | The width of an item
   * **itemHeight** | default: 128 | The height of an item
   * **verticalMargin** | default: -1 | How much space between rows, -1 means the same as coumns spacing which is dynamically calculated
   * **responsive** | default: false | If the container has a dynamic width, set this to true to update when the browser resizes
+  * **animation** | default: 'transform 300ms ease' | The CSS animation to use on elements. Pass a blank string or `false` for no animation.
   * **zoom** | default: 1 | Zooms the contents of the grid
 
 Creating a DisplayObject component

demo.js

@@ -1,32 +1,35 @@
 'use strict';
 
 import React from 'react';
-import AbsoluteGrid from './lib/AbsoluteGrid.jsx';
+import AbsoluteGrid from './index.js';
 import TestDisplay from './demo/TestDisplay.jsx';
+import * as data from './demo/sampleData.js';
 
-main();
+demo();
 
-function main() {
+function demo() {
 
   /*
-   The data structure is pretty strict, we require a unique identifier (in this case key) and a sort
+   key and sort are required, but configureable with keyProp and sortProp.
   */
-  var sampleItems = [
-    {key: 1, name: 'Test', sort: 0, filtered: 0},
-    {key: 2, name: 'Test 1', sort: 2, filtered: 0},
-    {key: 3, name: 'Test 2', sort: 2, filtered: 0},
-    {key: 4, name: 'Test 3', sort: 3, filtered: 0},
-    {key: 5, name: 'Test 4', sort: 4, filtered: 0},
-    {key: 6, name: 'Test 5', sort: 5, filtered: 0},
-    {key: 7, name: 'Test 6', sort: 5, filtered: 0},
-    {key: 8, name: 'Test 7', sort: 6, filtered: 0},
-    {key: 9, name: 'Test 8', sort: 7, filtered: 0},
-    {key: 10, name: 'Test 9', sort: 8, filtered: 0},
-    {key: 11, name: 'Test 10', sort: 9, filtered: 0},
-    {key: 12, name: 'Test 11', sort: 10, filtered: 0}
-  ];
+  var sampleItems = data.states;
+
   var testDisplay = (<TestDisplay />);
- 
-  React.render(<AbsoluteGrid items={sampleItems} />, document.getElementById('BasicDemo'));
-  React.render(<AbsoluteGrid items={sampleItems} displayObject={testDisplay}/>, document.getElementById('DisplayObjectDemo'));
+  //Most Basic Demo
+  React.render(<AbsoluteGrid items={sampleItems} keyProp="abbreviation"/>, document.getElementById('BasicDemo'));
+
+  //Using Custom Display
+  React.render(<AbsoluteGrid items={sampleItems} keyProp="abbreviation" displayObject={testDisplay}/>, document.getElementById('DisplayObjectDemo'));
+
+  //Using Custom Display and Filtering
+  var onFilter = function(event){
+    var search = new RegExp(event.target.value, 'i');
+    sampleItems.forEach(function(item){
+      item.filtered = !item.name.match(search);
+    });
+    React.render(<AbsoluteGrid items={sampleItems} displayObject={testDisplay} keyProp="abbreviation"/>, document.getElementById('FilterDemo'));
+  };
+  React.render(<input onChange={onFilter} type='text'/>, document.getElementById('Filter'));
+  React.render(<AbsoluteGrid items={sampleItems} displayObject={testDisplay} keyProp="abbreviation"/>, document.getElementById('FilterDemo'));
+
 }

demo/AbsoluteGrid.js

@@ -20,7 +20,7 @@ export default class TestDisplay extends React.Component {
     itemStyle.backgroundColor = this.getRandomColor();
     itemStyle.borderRadius = '10px';
 
-    return <div style={itemStyle} className="gridItem">Custom Display Object: {this.props.item.name}</div>;
+    return <div style={itemStyle} className="gridItem">{this.props.item.name}</div>;
   }
 }
 

demo/TestDisplay.jsx

@@ -18,6 +18,7 @@
        	border-radius:4px;
        	background-color:#fff;
        	padding:20px;
+        overflow:hidden;
        }
     </style>
   </head>
@@ -27,7 +28,8 @@ <h1>Basic Demo</h1>
     <h1>Using a Custom Renderer (DisplayObject)</h1>
   	<div id="DisplayObjectDemo" class="demo"></div> 
     <h1>Filtering with Animation</h1>
-    <div>Coming soon...</div>
+    <div id="Filter"></div>
+    <div id="FilterDemo" class="demo"></div> 
     <h1>Drag and Drop with Animation</h1>
     <div>Coming soon...</div> 
     <h1>Selection with Drag and Drop</h1>