Update examples

ol-lo · Nov 11, 2015 · 289a875 · 289a875
1 parent d5b5cc9
commit 289a875
Show file tree

Hide file tree

Showing 29 changed files with 902 additions and 1,150 deletions.
diff --git a/examples/ColumnGroupsExample.js b/examples/ColumnGroupsExample.js
@@ -0,0 +1,85 @@
+/**
+ * This file provided by Facebook is for non-commercial testing and evaluation
+ * purposes only. Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
+ * ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+"use strict";
+
+var ExampleImage = require('./helpers/ExampleImage');
+var FakeObjectDataListStore = require('./helpers/FakeObjectDataListStore');
+var FixedDataTable = require('fixed-data-table');
+var React = require('react');
+
+const {Table, Column, ColumnGroup, Cell} = FixedDataTable;
+
+const TextCell = ({rowIndex, data, col, ...props}) => (
+  <Cell {...props}>
+    {data.getObjectAt(rowIndex)[col]}
+  </Cell>
+);
+
+class ColumnGroupsExample extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      dataList: new FakeObjectDataListStore(1000000),
+    };
+  }
+
+  render() {
+    var {dataList} = this.state;
+
+    return (
+      <Table
+        rowHeight={30}
+        groupHeaderHeight={30}
+        headerHeight={30}
+        rowsCount={dataList.getSize()}
+        width={1000}
+        height={500}
+        {...this.props}>
+        <ColumnGroup
+          fixed={true}
+          header={<Cell>Name</Cell>}>
+          <Column
+            fixed={true}
+            header={<Cell>First Name</Cell>}
+            cell={<TextCell data={dataList} col="firstName" />}
+            width={150}
+          />
+          <Column
+            fixed={true}
+            header={<Cell>Last Name</Cell>}
+            cell={<TextCell data={dataList} col="lastName" />}
+            width={150}
+          />
+        </ColumnGroup>
+        <ColumnGroup
+          header={<Cell>About</Cell>}>
+          <Column
+            header={<Cell>Company</Cell>}
+            cell={<TextCell data={dataList} col="companyName" />}
+            flexGrow={1}
+            width={150}
+          />
+          <Column
+            header={<Cell>Sentence</Cell>}
+            cell={<TextCell data={dataList} col="sentence" />}
+            flexGrow={1}
+            width={150}
+          />
+        </ColumnGroup>
+      </Table>
+    );
+  }
+}
+
+module.exports = ColumnGroupsExample;
diff --git a/examples/FilterExample.js b/examples/FilterExample.js
@@ -0,0 +1,139 @@
+/**
+ * This file provided by Facebook is for non-commercial testing and evaluation
+ * purposes only. Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
+ * ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+"use strict";
+
+var ExampleImage = require('./helpers/ExampleImage');
+var FakeObjectDataListStore = require('./helpers/FakeObjectDataListStore');
+var FixedDataTable = require('fixed-data-table');
+var React = require('react');
+
+const {Table, Column, Cell} = FixedDataTable;
+
+const ImageCell = ({rowIndex, data, col, ...props}) => (
+  <ExampleImage
+    src={data.getObjectAt(rowIndex)[col]}
+  />
+);
+
+const TextCell = ({rowIndex, data, col, ...props}) => (
+  <Cell {...props}>
+    {data.getObjectAt(rowIndex)[col]}
+  </Cell>
+);
+
+class DataListWrapper {
+  constructor(indexMap, data) {
+    this._indexMap = indexMap;
+    this._data = data;
+  }
+
+  getSize() {
+    return this._indexMap.length;
+  }
+
+  getObjectAt(index) {
+    return this._data.getObjectAt(
+      this._indexMap[index],
+    );
+  }
+}
+
+class FilterExample extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this._dataList = new FakeObjectDataListStore(2000);
+    this.state = {
+      filteredDataList: this._dataList,
+    };
+
+    this._onFilterChange = this._onFilterChange.bind(this);
+  }
+
+  _onFilterChange(e) {
+    if (!e.target.value) {
+      this.setState({
+        filteredDataList: this._dataList,
+      });
+    }
+
+    var filterBy = e.target.value.toLowerCase();
+    var size = this._dataList.getSize();
+    var filteredIndexes = [];
+    for (var index = 0; index < size; index++) {
+      var {firstName} = this._dataList.getObjectAt(index);
+      if (firstName.toLowerCase().indexOf(filterBy) !== -1) {
+        filteredIndexes.push(index);
+      }
+    }
+
+    this.setState({
+      filteredDataList: new DataListWrapper(filteredIndexes, this._dataList),
+    });
+  }
+
+  render() {
+    var {filteredDataList} = this.state;
+    return (
+      <div>
+        <input
+          onChange={this._onFilterChange}
+          placeholder="Filter by First Name"
+        />
+        <br />
+        <Table
+          rowHeight={50}
+          rowsCount={filteredDataList.getSize()}
+          headerHeight={50}
+          width={1000}
+          height={500}
+          {...this.props}>
+          <Column
+            cell={<ImageCell data={filteredDataList} col="avartar" />}
+            fixed={true}
+            width={50}
+          />
+          <Column
+            header={<Cell>First Name</Cell>}
+            cell={<TextCell data={filteredDataList} col="firstName" />}
+            fixed={true}
+            width={100}
+          />
+          <Column
+            header={<Cell>Last Name</Cell>}
+            cell={<TextCell data={filteredDataList} col="lastName" />}
+            fixed={true}
+            width={100}
+          />
+          <Column
+            header={<Cell>City</Cell>}
+            cell={<TextCell data={filteredDataList} col="city" />}
+            width={100}
+          />
+          <Column
+            header={<Cell>Street</Cell>}
+            cell={<TextCell data={filteredDataList} col="street" />}
+            width={200}
+          />
+          <Column
+            header={<Cell>Zip Code</Cell>}
+            cell={<TextCell data={filteredDataList} col="zipCode" />}
+            width={200}
+          />
+        </Table>
+      </div>
+    );
+  }
+}
+
+module.exports = FilterExample;
diff --git a/examples/FlexGrowExample.js b/examples/FlexGrowExample.js
@@ -0,0 +1,90 @@
+/**
+ * This file provided by Facebook is for non-commercial testing and evaluation
+ * purposes only. Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
+ * ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+"use strict";
+
+var FakeObjectDataListStore = require('./helpers/FakeObjectDataListStore');
+var FixedDataTable = require('fixed-data-table');
+var React = require('react');
+
+const {Table, Column, Cell} = FixedDataTable;
+
+function colorizeText(str, index) {
+  var val, n = 0;
+  return str.split('').map((letter) => {
+    val = index * 70 + n++;
+    var color = 'hsl(' + val + ', 100%, 50%)';
+    return <span style={{color}} key={val}>{letter}</span>;
+  });
+}
+
+
+const TextCell = ({rowIndex, data, col, ...props}) => (
+  <Cell {...props}>
+    {data.getObjectAt(rowIndex)[col]}
+  </Cell>
+);
+
+const ColoredTextCell = ({rowIndex, data, col, ...props}) => (
+  <Cell {...props}>
+    {colorizeText(data.getObjectAt(rowIndex)[col], rowIndex)}
+  </Cell>
+);
+
+class FlexGrowExample extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      dataList: new FakeObjectDataListStore(1000000),
+    };
+  }
+
+  render() {
+    var {dataList} = this.state;
+    return (
+      <Table
+        rowHeight={50}
+        headerHeight={50}
+        rowsCount={dataList.getSize()}
+        width={1000}
+        height={500}
+        {...this.props}>
+        <Column
+          header={<Cell>First Name</Cell>}
+          cell={<TextCell data={dataList} col="firstName" />}
+          fixed={true}
+          width={100}
+        />
+        <Column
+          header={<Cell>Sentence! (flexGrow greediness=2)</Cell>}
+          cell={<ColoredTextCell data={dataList} col="sentence" />}
+          flexGrow={2}
+          width={200}
+        />
+        <Column
+          header={<Cell>Company (flexGrow greediness=1)</Cell>}
+          cell={<TextCell data={dataList} col="companyName" />}
+          flexGrow={1}
+          width={200}
+        />
+        <Column
+          width={100}
+          header={<Cell>Last Name</Cell>}
+          cell={<TextCell data={dataList} col="lastName" />}
+        />
+      </Table>
+    );
+  }
+}
+
+module.exports = FlexGrowExample;