AG-1053 Tidy react examples, make more idiomatic

2017-11-08 14:45:28 +00:00
parent b030235bbc
commit 983b5974cf
149 changed files with 339 additions and 8856 deletions
--- a/src-examples/masterDetailExample/DetailPanelComponent.jsx
+++ b/src-examples/masterDetailExample/DetailPanelComponent.jsx
@@ -0,0 +1,84 @@
+import React, {Component} from "react";
+
+import {AgGridReact} from "ag-grid-react";
+
+import "./DetailPanelComponent.css";
+
+export default class DetailPanelComponent extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            columnDefs: this.createColumnDefs(),
+            parentRecord: this.props.node.parent.data,
+            img: `images/${this.props.node.parent.data.image}.png`
+        };
+
+        this.onGridReady = this.onGridReady.bind(this);
+        this.onSearchTextChange = this.onSearchTextChange.bind(this);
+
+        // override the containing div so that the child grid fills the row height
+        this.props.reactContainer.style.height = "100%";
+    }
+
+    onGridReady(params) {
+        this.gridApi = params.api;
+        this.columnApi = params.columnApi;
+
+        this.gridApi.setRowData(this.state.parentRecord.callRecords);
+        setTimeout(() => {
+            this.gridApi.sizeColumnsToFit();
+        })
+    }
+
+    onSearchTextChange(newData) {
+        this.gridApi.setQuickFilter(newData);
+    }
+
+    createColumnDefs() {
+        return [
+            {headerName: 'Call ID', field: 'callId', cellClass: 'call-record-cell'},
+            {headerName: 'Direction', field: 'direction', cellClass: 'call-record-cell'},
+            {headerName: 'Number', field: 'number', cellClass: 'call-record-cell'},
+            {
+                headerName: 'Duration',
+                field: 'duration',
+                cellClass: 'call-record-cell',
+                valueFormatter: this.secondCellFormatter
+            },
+            {headerName: 'Switch', field: 'switchCode', cellClass: 'call-record-cell'}];
+
+    }
+
+    secondCellFormatter(params) {
+        return params.value.toLocaleString() + 's';
+    }
+
+    onButtonClick() {
+        window.alert('Sample button pressed!!');
+    }
+
+    render() {
+        return (
+            <div className="full-width-panel">
+                <div className="full-width-details">
+                    <div className="full-width-detail"><img width="120px" src={this.state.img}/>
+                    </div>
+                    <div className="full-width-detail"><b>Name: </b> {this.state.parentRecord.name}</div>
+                    <div className="full-width-detail"><b>Account: </b> {this.state.parentRecord.account}</div>
+                </div>
+                <AgGridReact
+                    // properties
+                    columnDefs={this.state.columnDefs}
+
+                    enableSorting
+                    enableFilter
+                    enableColResize
+
+                    // events
+                    onGridReady={this.onGridReady}>
+                </AgGridReact>
+            </div>
+        );
+    }
+}