new component model

src-standard/ColDefFactory.jsx

@@ -2,14 +2,12 @@ import SkillsCellRenderer from './SkillsCellRenderer.jsx';
 import NameCellEditor from './NameCellEditor.jsx';
 import ProficiencyCellRenderer from './ProficiencyCellRenderer.jsx';
 import RefData from './RefData';
-import {reactCellRendererFactory} from 'ag-grid-react';
-import {reactFilterFactory} from 'ag-grid-react';
 import SkillsFilter from './SkillsFilter.jsx';
 import ProficiencyFilter from './ProficiencyFilter.jsx';
 
 export default class ColDefFactory {
 
-    createColDefs(parentReactComponent) {
+    createColDefs() {
 
         var columnDefs = [
             {headerName: '#', width: 30, checkboxSelection: true, suppressSorting: true,
@@ -32,16 +30,17 @@ export default class ColDefFactory {
                 headerName: 'IT Skills',
                 children: [
                     {headerName: "Skills", width: 125, suppressSorting: true, field: 'skills', enableRowGroup: true, enablePivot: true,
-                        // using ag-Grid's React cellRenderer factory
+                        // supply a React component
-                        cellRendererFmk: SkillsCellRenderer,
+                        cellRendererFramework: SkillsCellRenderer,
-                        // using ag-Grid's React filter factory
+                        // supply a React component
-                        filter: reactFilterFactory(SkillsFilter, parentReactComponent)
+                        filterFramework: SkillsFilter
                     },
-                    {headerName: "Proficiency", field: "proficiency", filter: 'number', width: 120, enableValue: true,
+                    {headerName: "Proficiency", field: "proficiency", width: 120, enableValue: true,
-                        // using ag-Grid's React cellRenderer factory
+                        // supply a React component
-                        cellRendererFmk: ProficiencyCellRenderer,
+                        cellRendererFramework: ProficiencyCellRenderer,
-                        // using ag-Grid's React filter factory
+                        // supply a React component
-                        filter: reactFilterFactory(ProficiencyFilter, parentReactComponent)}
+                        filterFramework: ProficiencyFilter
+                    }
                 ]
             },
             {

src-standard/NameCellEditor.jsx

@@ -11,29 +11,28 @@ export default class NameCellEditor extends React.Component {
     constructor(props) {
         super(props);
         // the entire ag-Grid properties are passed as one single object inside the params
-        var params = props.params;
+        this.state = this.createInitialState(props);
-        this.state = this.createInitialState(params);
     }
 
     // work out how to present the data based on what the user hit. you don't need to do any of
     // this for your ag-Grid cellEditor to work, however it makes sense to do this so the user
     // experience is similar to Excel
-    createInitialState(params) {
+    createInitialState(props) {
 
         var startValue;
         var putCursorAtEndOnFocus = false;
         var highlightAllOnFocus = false;
 
-        if (params.keyPress === KEY_BACKSPACE || params.keyPress === KEY_DELETE) {
+        if (props.keyPress === KEY_BACKSPACE || props.keyPress === KEY_DELETE) {
             // if backspace or delete pressed, we clear the cell
             startValue = '';
-        } else if (params.charPress) {
+        } else if (props.charPress) {
             // if a letter was pressed, we start with the letter
-            startValue = params.charPress;
+            startValue = props.charPress;
         } else {
             // otherwise we start with the current value
-            startValue = params.value;
+            startValue = props.value;
-            if (params.keyPress === KEY_F2) {
+            if (props.keyPress === KEY_F2) {
                 this.putCursorAtEndOnFocus = true;
             } else {
                 this.highlightAllOnFocus = true;

src-standard/ProficiencyCellRenderer.jsx

@@ -7,28 +7,19 @@ import RefData from './RefData';
 export default class ProficiencyCellRenderer extends React.Component {
 
     render() {
-        var params = this.props.params;
         var backgroundColor;
-        if (params.value < 20) {
+        if (this.props.value < 20) {
             backgroundColor = 'red';
-        } else if (params.value < 60) {
+        } else if (this.props.value < 60) {
             backgroundColor = '#ff9900';
         } else {
             backgroundColor = '#00A000';
         }
 
         return (
-            <div className="div-percent-bar" style={{ width: params.value + '%', backgroundColor: backgroundColor }}>
+            <div className="div-percent-bar" style={{ width: this.props.value + '%', backgroundColor: backgroundColor }}>
-                <div className="div-percent-value">{params.value}%</div>
+                <div className="div-percent-value">{this.props.value}%</div>
             </div>
         );
     }
 }
-
-// the grid will always pass in one props called 'params',
-// which is the grid passing you the params for the cellRenderer.
-// this piece is optional. the grid will always pass the 'params'
-// props, so little need for adding this validation meta-data.
-ProficiencyCellRenderer.propTypes = {
-    params: React.PropTypes.object
-};

src-standard/ProficiencyFilter.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import RefData from './RefData';
 
 var PROFICIENCY_NAMES = ['No Filter', 'Above 40%', 'Above 60%', 'Above 80%'];
 
@@ -7,22 +6,16 @@ var PROFICIENCY_NAMES = ['No Filter', 'Above 40%', 'Above 60%', 'Above 80%'];
 // a React filter component with ag-Grid.
 export default class ProficiencyFilter extends React.Component {
 
-    constructor() {
+    constructor(props) {
         super();
         this.state = {
             selected: PROFICIENCY_NAMES[0]
         };
     }
 
-    // called by agGrid
-    init(params) {
-        this.filterChangedCallback = params.filterChangedCallback;
-        this.valueGetter = params.valueGetter;
-    }
-
     // called by agGrid
     doesFilterPass(params) {
-        var value = this.valueGetter(params);
+        var value = this.props.valueGetter(params);
         var valueAsNumber = parseFloat(value);
 
         switch (this.state.selected) {
@@ -40,11 +33,9 @@ export default class ProficiencyFilter extends React.Component {
 
     onButtonPressed(name) {
         console.log(name);
-        this.setState({
+        var newState = {selected: name};
-            selected: name
+        // set the state, and once it is done, then call filterChangedCallback
-        }, ()=> {
+        this.setState(newState, this.props.filterChangedCallback);
-            this.filterChangedCallback();
-        });
         console.log(name);
     }
 

src-standard/SkillsCellRenderer.jsx

@@ -5,7 +5,7 @@ export default class SkillsCellRenderer extends React.Component {
 
     render() {
         var skills = [];
-        var rowData = this.props.params.data;
+        var 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-standard/SkillsFilter.jsx

@@ -8,11 +8,9 @@ import RefData from './RefData';
 // React design skills.
 export default class SkillsFilter extends React.Component {
 
-    constructor() {
+    constructor(props) {
-        super();
+        super(props);
         this.state = {
-            skills: RefData.IT_SKILLS,
-            skillNames: RefData.IT_SKILLS_NAMES,
             android: false,
             css: false,
             html5: false,
@@ -21,9 +19,24 @@ export default class SkillsFilter extends React.Component {
         };
     }
 
-    // called by agGrid
+    getModel() {
-    init(params) {
+        return {
-        this.filterChangedCallback = params.filterChangedCallback;
+            android: this.state.android,
+            css: this.state.css,
+            html5: this.state.html5,
+            mac: this.state.mac,
+            windows: this.state.windows
+        }
+    }
+
+    setModel(model) {
+        this.setState({
+            android: model.android,
+            css: model.css,
+            html5: model.html5,
+            mac: model.mac,
+            windows: model.windows
+        });
     }
 
     // called by agGrid
@@ -32,7 +45,7 @@ export default class SkillsFilter extends React.Component {
         var rowSkills = params.data.skills;
         var passed = true;
 
-        this.state.skills.forEach( (skill) => {
+        RefData.IT_SKILLS.forEach( (skill) => {
             if (this.state[skill]) {
                 if (!rowSkills[skill]) {
                     passed = false;
@@ -54,15 +67,16 @@ export default class SkillsFilter extends React.Component {
         var newValue = event.target.checked;
         var newModel = {};
         newModel[skill] = newValue;
-        this.setState(newModel, ()=> {this.filterChangedCallback();} );
+        // set the state, and once it is done, then call filterChangedCallback
+        this.setState(newModel, this.props.filterChangedCallback );
     }
 
     render() {
 
         var skillsTemplates = [];
-        this.state.skills.forEach( (skill, index) => {
+        RefData.IT_SKILLS.forEach( (skill, index) => {
 
-            var skillName = this.state.skillNames[index];
+            var skillName = RefData.IT_SKILLS_NAMES[index];
             var template = (
                 <label key={skill} style={{border: '1px solid lightgrey', margin: 4, padding: 4, display: 'inline-block'}}>
                     <span>
@@ -91,7 +105,6 @@ export default class SkillsFilter extends React.Component {
     // these are other method that agGrid calls that we
     // could of implemented, but they are optional and
     // we have no use for them in this particular filter.
-    //getApi() {}
     //afterGuiAttached(params) {}
     //onNewRowsLoaded() {}
     //onAnyFilterChanged() {}

src-standard/myApp.jsx

@@ -18,8 +18,8 @@ export default class MyApp extends React.Component {
             quickFilterText: null,
             showGrid: true,
             showToolPanel: false,
-            columnDefs: new ColDefFactory().createColDefs(this),
+            columnDefs: new ColDefFactory().createColDefs(),
-            rowData: new RowDataFactory().createRowData(this),
+            rowData: new RowDataFactory().createRowData(),
             icons: {
                 columnRemoveFromGroup: '<i class="fa fa-remove"/>',
                 filter: '<i class="fa fa-filter"/>',