DataGridSample is more compact and clear now.

#13
robeio · Jan 5, 2017 · aa54d25 · aa54d25
1 parent 7498827
commit aa54d25
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 63 deletions.
diff --git a/docs/bundle.1bdf0ead61153c25f0fb.js → docs/bundle.1c0844cdac8fbca69bae.js b/docs/bundle.1bdf0ead61153c25f0fb.js → docs/bundle.1c0844cdac8fbca69bae.js
diff --git a/docs/bundle.1bdf0ead61153c25f0fb.js.map → docs/bundle.1c0844cdac8fbca69bae.js.map b/docs/bundle.1bdf0ead61153c25f0fb.js.map → docs/bundle.1c0844cdac8fbca69bae.js.map
diff --git a/docs/index.html b/docs/index.html
@@ -3,7 +3,7 @@
 
 <head>
     <!-- version: 1.1.9 -->
-    <!-- build time: Thu Jan 05 2017 11:58:09 GMT+0300 (+03) -->
+    <!-- build time: Thu Jan 05 2017 16:19:56 GMT+0300 (+03) -->
     <meta charset="UTF-8">
     <title>robe-react-ui Showcase</title>
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -17,6 +17,6 @@
 <div id="app">
     <img src="./loading.gif" height="200px" style="top: 40%; left: 45%; position: fixed;">
 </div>
-<script src="bundle.1bdf0ead61153c25f0fb.js"></script>
+<script src="bundle.1c0844cdac8fbca69bae.js"></script>
 </body>
 </html>
diff --git a/site/components/samples/datagrid/DataGridSample.jsx b/site/components/samples/datagrid/DataGridSample.jsx
@@ -10,6 +10,7 @@ import ModalDataForm from "robe-react-ui/lib/form/ModalDataForm";
 import DataGrid from "robe-react-ui/lib/datagrid/DataGrid";
 import FaIcon from "robe-react-ui/lib/faicon/FaIcon";
 import DataGridModel from "./DataGridModel.json";
+import { ControlLabel } from "react-bootstrap";
 
 
 const propsOfFields = {
@@ -40,10 +41,7 @@ const propsOfFields = {
 };
 
 export default class DataGridSample extends ShallowComponent {
-    /**
-     *
-     * @param props
-     */
+
     static idField = "id";
 
     constructor(props: Object) {
@@ -88,6 +86,7 @@ export default class DataGridSample extends ShallowComponent {
     render(): Object {
         return (
             <span>
+                <ControlLabel>DataGrid (CRUD Toolbar)</ControlLabel>
                 <DataGrid
                     fields={this.state.fields}
                     propsOfFields={propsOfFields}
@@ -100,8 +99,8 @@ export default class DataGridSample extends ShallowComponent {
                     exportButton={true}
                     editable={true}
                     modalConfirm={{ header: "Please do not delete me." }}
-                    filter={{ clearButtonText: "Clear 1", clearAllButtonText: "Clear All Filters" }}
                 />
+                <ControlLabel>DataGrid (Custom Toolbar and Pagination)</ControlLabel>
                 <DataGrid
                     fields={this.state.fields}
                     propsOfFields={propsOfFields}
@@ -112,25 +111,18 @@ export default class DataGridSample extends ShallowComponent {
                     onDeleteClick={this.__remove}
                     exportButton={true}
                     editable={true}
-                    pagination={{ pageSize: 3 }}
                     modalConfirm={{ header: "Please do not delete me." }}
+                    refreshable={true}
+                    pagination={{ pageSize: 1 }}
                     pageSizeButtons={["1", "2", "3"]}
                 />
+                <ControlLabel>DataGrid (Custom Cell Renderer)</ControlLabel>
                 <DataGrid
                     fields={this.state.fields}
                     propsOfFields={propsOfFields}
                     store={this.state.store3}
-                    toolbar={[{ name: "custom", text: "Custom", icon: "fa-university" }]}
-                    onNewClick={this.__add}
-                    onEditClick={this.__edit}
-                    onDeleteClick={this.__remove}
                     exportButton={true}
-                    refreshable={true}
-                    editable={true}
-                    pagination={{ pageSize: 3 }}
-                    modalConfirm={{ header: "Please do not delete me." }}
-                    pageSizeButtons={["1", "2", "3"]}
-                    cellRenderer={this.__cellRenderer}
+                    cellRenderer={DataGridSample.cellRenderer}
                 />
                 <ModalDataForm
                     header="Modal Data Form"
@@ -162,7 +154,7 @@ export default class DataGridSample extends ShallowComponent {
         this.setState({ showModal: false });
     }
 
-    __onSave(newData, callback) {
+    __onSave(newData: Object, callback: Function) {
         let id = newData[DataGridSample.idField];
         if (Assertions.isNotEmpty(id)) {
             this.state.store1.update(newData);
@@ -175,21 +167,18 @@ export default class DataGridSample extends ShallowComponent {
                 showModal: true
             });
         }
-
-        // this.refs[DataGridSample.tableRef].__readData();
     }
 
     __remove() {
         let selectedRows = this.refs.table1.getSelectedRows();
-        console.log("removing ", selectedRows[0]);
         this.state.store1.delete(selectedRows[0]);
     }
 
-    __showModal(newItem) {
+    __showModal(newItem: Object) {
         this.setState({ showModal: true, item: newItem });
     }
 
-    __cellRenderer(idx: number, fields: Array, row: Object) {
+    static cellRenderer(idx: number, fields: Array, row: Object) {
         if (fields[idx].visible !== false) {
             return <td key={fields[idx].name}><FaIcon code={"fa-smile-o"} /> {row[fields[idx].name]}</td>;
         }