Tidy examples

src/filterComponentExample/FilterComponentExample.jsx

@@ -13,8 +13,8 @@ export default class FilterComponentExample extends Component {
         this.state = {
             gridOptions: {},
 
-            rowData: this.createRowData(),
+            rowData: FilterComponentExample.createRowData(),
-            columnDefs: this.createColumnDefs(),
+            columnDefs: FilterComponentExample.createColumnDefs(),
         };
 
         this.onGridReady = this.onGridReady.bind(this);
@@ -32,7 +32,7 @@ export default class FilterComponentExample extends Component {
         this.gridApi.getFilterInstance("name").getFrameworkComponentInstance().componentMethod("Hello World!");
     }
 
-    createColumnDefs() {
+    static createColumnDefs() {
         return [
             {headerName: "Row", field: "row", width: 400},
             {
@@ -45,7 +45,7 @@ export default class FilterComponentExample extends Component {
         ];
     }
 
-    createRowData() {
+    static createRowData() {
         return [
             {"row": "Row 1", "name": "Michael Phelps"},
             {"row": "Row 2", "name": "Natalie Coughlin"},

src/fullWidthExample/FullWidthComponentExample.jsx

@@ -10,8 +10,8 @@ export default class FullWidthComponentExample extends Component {
         this.state = {
             gridOptions: {},
 
-            rowData: this.createRowData(),
+            rowData: FullWidthComponentExample.createRowData(),
-            columnDefs: this.createColumnDefs()
+            columnDefs: FullWidthComponentExample.createColumnDefs()
         };
 
         this.onGridReady = this.onGridReady.bind(this);
@@ -28,7 +28,7 @@ export default class FullWidthComponentExample extends Component {
         return (rowNode.id === "0") || (parseInt(rowNode.id) % 2 === 0);
     }
 
-    createColumnDefs() {
+    static createColumnDefs() {
         return [
             {
                 headerName: "Name",
@@ -43,7 +43,7 @@ export default class FullWidthComponentExample extends Component {
         ];
     }
 
-    createRowData() {
+    static createRowData() {
         return [
             {name: "Bob", age: 10},
             {name: "Harry", age: 3},

src/richComponentExample/RichComponentsExample.jsx

@@ -9,8 +9,8 @@ export default class RichComponentsExample extends Component {
         super(props);
 
         this.state = {
-            rowData: this.createRowData(),
+            rowData: RichComponentsExample.createRowData(),
-            columnDefs: this.createColumnDefs()
+            columnDefs: RichComponentsExample.createColumnDefs()
         };
 
         this.onGridReady = this.onGridReady.bind(this);
@@ -23,7 +23,7 @@ export default class RichComponentsExample extends Component {
         this.gridApi.sizeColumnsToFit();
     }
 
-    createColumnDefs() {
+    static createColumnDefs() {
         return [
             {
                 headerName: "Name",
@@ -44,7 +44,7 @@ export default class RichComponentsExample extends Component {
             }
         ];    }
 
-    createRowData() {
+    static createRowData() {
         return [
             {name: 'Homer Simpson', ratios: {top: 0.25, bottom: 0.75}},
             {name: 'Marge Simpson', ratios: {top: 0.67, bottom: 0.39}},

src/richGridExample/HeaderGroupComponent.jsx

@@ -21,7 +21,8 @@ export default class HeaderGroupComponent extends React.Component {
 
         return <div>
             <div className="customHeaderLabel"> {this.props.displayName}</div>
-            <div onClick={this.expandOrCollapse.bind(this)} className={arrowClassName}><i className="fa fa-arrow-right" /></div>
+            <div onClick={this.expandOrCollapse.bind(this)} className={arrowClassName}><i
+                className="fa fa-arrow-right"/></div>
         </div>
     }
 

src/richGridExample/NameCellEditor.jsx

@@ -1,10 +1,9 @@
 import React from 'react';
-import RefData from './RefData';
 import * as PropTypes from 'prop-types';
 
-var KEY_BACKSPACE = 8;
+const KEY_BACKSPACE = 8;
-var KEY_DELETE = 46;
+const KEY_DELETE = 46;
-var KEY_F2 = 113;
+const KEY_F2 = 113;
 
 // cell renderer for the proficiency column. this is a very basic cell editor,
 export default class NameCellEditor extends React.Component {
@@ -20,9 +19,9 @@ export default class NameCellEditor extends React.Component {
     // experience is similar to Excel
     createInitialState(props) {
 
-        var startValue;
+        let startValue;
-        var putCursorAtEndOnFocus = false;
+        const putCursorAtEndOnFocus = false;
-        var highlightAllOnFocus = false;
+        const highlightAllOnFocus = false;
 
         if (props.keyPress === KEY_BACKSPACE || props.keyPress === KEY_DELETE) {
             // if backspace or delete pressed, we clear the cell
@@ -56,7 +55,7 @@ export default class NameCellEditor extends React.Component {
     onChangeListener(event) {
         // if doing React, you will probably be using a library for managing immutable
         // objects better. to keep this example simple, we don't use one.
-        var newState = {
+        const newState = {
             value: event.target.value,
             putCursorAtEndOnFocus: this.state.putCursorAtEndOnFocus,
             highlightAllOnFocus: this.state.highlightAllOnFocus
@@ -73,7 +72,7 @@ export default class NameCellEditor extends React.Component {
     // view, it may not yet be in the browser (put in by ag-Grid) so focus will not work
     afterGuiAttached() {
         // get ref from React component
-        var eInput = this.refs.textField;
+        const eInput = this.refs.textField;
         eInput.focus();
         if (this.highlightAllOnFocus) {
             eInput.select();
@@ -82,7 +81,7 @@ export default class NameCellEditor extends React.Component {
             // this comes into play in two scenarios: a) when user hits F2 and b)
             // when user hits a printable character, then on IE (and only IE) the carot
             // was placed after the first character, thus 'apply' would end up as 'pplea'
-            var length = eInput.value ? eInput.value.length : 0;
+            const length = eInput.value ? eInput.value.length : 0;
             if (length > 0) {
                 eInput.setSelectionRange(length, length);
             }

src/richGridExample/ProficiencyCellRenderer.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import RefData from './RefData';
 
 // cell renderer for the proficiency column. this is a very basic cell renderer,
 // it is arguable that we should not of used React and just returned a string of
@@ -7,7 +6,7 @@ import RefData from './RefData';
 export default class ProficiencyCellRenderer extends React.Component {
 
     render() {
-        var backgroundColor;
+        let backgroundColor;
         if (this.props.value < 20) {
             backgroundColor = 'red';
         } else if (this.props.value < 60) {

src/richGridExample/ProficiencyFilter.jsx

@@ -1,13 +1,13 @@
 import React from 'react';
 
-var PROFICIENCY_NAMES = ['No Filter', 'Above 40%', 'Above 60%', 'Above 80%'];
+const PROFICIENCY_NAMES = ['No Filter', 'Above 40%', 'Above 60%', 'Above 80%'];
 
 // the proficiency filter component. this demonstrates how to integrate
 // a React filter component with ag-Grid.
 export default class ProficiencyFilter extends React.Component {
 
     constructor(props) {
-        super();
+        super(props);
         this.state = {
             selected: PROFICIENCY_NAMES[0]
         };
@@ -15,14 +15,18 @@ export default class ProficiencyFilter extends React.Component {
 
     // called by agGrid
     doesFilterPass(params) {
-        var value = this.props.valueGetter(params);
+        const value = this.props.valueGetter(params);
-        var valueAsNumber = parseFloat(value);
+        const valueAsNumber = parseFloat(value);
 
         switch (this.state.selected) {
-            case PROFICIENCY_NAMES[1] : return valueAsNumber >= 40;
+            case PROFICIENCY_NAMES[1] :
-            case PROFICIENCY_NAMES[2] : return valueAsNumber >= 60;
+                return valueAsNumber >= 40;
-            case PROFICIENCY_NAMES[3] : return valueAsNumber >= 80;
+            case PROFICIENCY_NAMES[2] :
-            default : return true;
+                return valueAsNumber >= 60;
+            case PROFICIENCY_NAMES[3] :
+                return valueAsNumber >= 80;
+            default :
+                return true;
         }
     };
 
@@ -32,7 +36,7 @@ export default class ProficiencyFilter extends React.Component {
     };
 
     onButtonPressed(name) {
-        var newState = {selected: name};
+        const newState = {selected: name};
         // set the state, and once it is done, then call filterChangedCallback
         this.setState(newState, this.props.filterChangedCallback);
     }
@@ -42,13 +46,14 @@ export default class ProficiencyFilter extends React.Component {
     }
 
     render() {
-        var rows = [];
+        const rows = [];
         PROFICIENCY_NAMES.forEach((name) => {
-            var selected = this.state.selected === name;
+            const selected = this.state.selected === name;
             rows.push(
                 <div key={name}>
                     <label style={{paddingLeft: 4}}>
-                        <input type="radio" checked={selected} name={Math.random()} onChange={this.onButtonPressed.bind(this, name)}/>
+                        <input type="radio" checked={selected} name={Math.random()}
+                               onChange={this.onButtonPressed.bind(this, name)}/>
                         {name}
                     </label>
                 </div>
@@ -57,7 +62,13 @@ export default class ProficiencyFilter extends React.Component {
 
         return (
             <div>
-                <div style={{textAlign: 'center', background: 'lightgray', width: '100%', display: 'block', borderBottom: '1px solid grey'}}>
+                <div style={{
+                    textAlign: 'center',
+                    background: 'lightgray',
+                    width: '100%',
+                    display: 'block',
+                    borderBottom: '1px solid grey'
+                }}>
                     <b>Custom Proficiency Filter</b>
                 </div>
                 {rows}

src/richGridExample/RefData.js

@@ -1,4 +1,5 @@
-export default class RefData {}
+export default class RefData {
+}
 
 RefData.FIRST_NAMES = [
     "Sophie", "Isabelle", "Emily", "Olivia", "Lily", "Chloe", "Isabella",

src/richGridExample/RichGridExample.jsx

@@ -143,7 +143,8 @@ export default class RichGridExample extends Component {
                     <div style={{display: "inline-block", width: "100%", marginTop: 10, marginBottom: 10}}>
                         <div style={{float: "left"}}>
                             <label>
-                                <input type="checkbox" onChange={this.onToggleToolPanel.bind(this)} style={{marginRight: 5}}/>
+                                <input type="checkbox" onChange={this.onToggleToolPanel.bind(this)}
+                                       style={{marginRight: 5}}/>
                                 Show Tool Panel
                             </label>
                         </div>

src/richGridExample/RowDataFactory.js

@@ -3,10 +3,10 @@ import RefData from './RefData';
 export default class RowDataFactory {
 
     createRowData() {
-        var rowData = [];
+        const rowData = [];
 
-        for (var i = 0; i < 200; i++) {
+        for (let i = 0; i < 200; i++) {
-            var countryData = RefData.COUNTRIES[i % RefData.COUNTRIES.length];
+            const countryData = RefData.COUNTRIES[i % RefData.COUNTRIES.length];
             rowData.push({
                 name: RefData.FIRST_NAMES[i % RefData.FIRST_NAMES.length] + ' ' + RefData.LAST_NAMES[i % RefData.LAST_NAMES.length],
                 skills: {
@@ -32,8 +32,8 @@ export default class RowDataFactory {
     }
 
     createRandomPhoneNumber() {
-        var result = '+';
+        let result = '+';
-        for (var i = 0; i < 12; i++) {
+        for (let i = 0; i < 12; i++) {
             result += Math.round(Math.random() * 10);
             if (i === 2 || i === 5 || i === 8) {
                 result += ' ';

src/richGridExample/SkillsCellRenderer.jsx

@@ -5,8 +5,8 @@ import RefData from './RefData';
 export default class SkillsCellRenderer extends React.Component {
 
     render() {
-        var skills = [];
+        const skills = [];
-        var rowData = this.props.data;
+        const rowData = this.props.data;
         RefData.IT_SKILLS.forEach((skill) => {
             if (rowData && rowData.skills && rowData.skills[skill]) {
                 skills.push(<img key={skill} src={'images/skills/' + skill + '.png'} width={16} title={skill}/>);

src/richGridExample/SkillsFilter.jsx

@@ -42,8 +42,8 @@ export default class SkillsFilter extends React.Component {
     // called by agGrid
     doesFilterPass(params) {
 
-        var rowSkills = params.data.skills;
+        const rowSkills = params.data.skills;
-        var passed = true;
+        let passed = true;
 
         RefData.IT_SKILLS.forEach((skill) => {
             if (this.state[skill]) {
@@ -62,14 +62,14 @@ export default class SkillsFilter extends React.Component {
 
     // called by agGrid
     isFilterActive() {
-        var somethingSelected = this.state.android || this.state.css ||
+        const somethingSelected = this.state.android || this.state.css ||
             this.state.html5 || this.state.mac || this.state.windows;
         return somethingSelected;
     };
 
     onSkillChanged(skill, event) {
-        var newValue = event.target.checked;
+        const newValue = event.target.checked;
-        var newModel = {};
+        const newModel = {};
         newModel[skill] = newValue;
         // set the state, and once it is done, then call filterChangedCallback
         this.setState(newModel, this.props.filterChangedCallback);
@@ -81,11 +81,11 @@ export default class SkillsFilter extends React.Component {
 
     render() {
 
-        var skillsTemplates = [];
+        const skillsTemplates = [];
         RefData.IT_SKILLS.forEach((skill, index) => {
 
-            var skillName = RefData.IT_SKILLS_NAMES[index];
+            const skillName = RefData.IT_SKILLS_NAMES[index];
-            var template = (
+            const template = (
                 <label key={skill}
                        style={{border: '1px solid lightgrey', margin: 4, padding: 4, display: 'inline-block'}}>
                     <span>

src/richGridExample/SortableHeaderComponent.jsx

@@ -28,11 +28,14 @@ export default class SortableHeaderComponent extends React.Component {
             let upArrowClass = "customSortUpLabel " + (this.state.sorted === 'asc' ? " active" : "");
             let removeArrowClass = "customSortRemoveLabel " + (this.state.sorted === '' ? " active" : "");
 
-            sortElements.push(<div key={`up${this.props.displayName}`} className={downArrowClass} onClick={this.onSortRequested.bind(this, 'desc')}><i
+            sortElements.push(<div key={`up${this.props.displayName}`} className={downArrowClass}
-                className="fa fa-long-arrow-down"/></div>)
+                                   onClick={this.onSortRequested.bind(this, 'desc')}><i
-            sortElements.push(<div key={`down${this.props.displayName}`} className={upArrowClass} onClick={this.onSortRequested.bind(this, 'asc')}><i
+                className="fa fa-long-arrow-down"/></div>);
-                className="fa fa-long-arrow-up"/></div>)
+            sortElements.push(<div key={`down${this.props.displayName}`} className={upArrowClass}
-            sortElements.push(<div key={`minus${this.props.displayName}`} className={removeArrowClass} onClick={this.onSortRequested.bind(this, '')}><i
+                                   onClick={this.onSortRequested.bind(this, 'asc')}><i
+                className="fa fa-long-arrow-up"/></div>);
+            sortElements.push(<div key={`minus${this.props.displayName}`} className={removeArrowClass}
+                                   onClick={this.onSortRequested.bind(this, '')}><i
                 className="fa fa-times"/></div>)
         }