From b5949d8d5d7bf7a680ce6fbd449b3f711cd670f7 Mon Sep 17 00:00:00 2001 From: ceolter Date: Wed, 14 Sep 2016 12:15:30 +0100 Subject: [PATCH] new component model --- src-standard/ColDefFactory.jsx | 23 +++++++-------- src-standard/NameCellEditor.jsx | 15 +++++----- src-standard/ProficiencyCellRenderer.jsx | 17 +++-------- src-standard/ProficiencyFilter.jsx | 19 ++++-------- src-standard/SkillsCellRenderer.jsx | 2 +- src-standard/SkillsFilter.jsx | 37 ++++++++++++++++-------- src-standard/myApp.jsx | 4 +-- 7 files changed, 55 insertions(+), 62 deletions(-) diff --git a/src-standard/ColDefFactory.jsx b/src-standard/ColDefFactory.jsx index f3afd05..0865899 100644 --- a/src-standard/ColDefFactory.jsx +++ b/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 - cellRendererFmk: SkillsCellRenderer, - // using ag-Grid's React filter factory - filter: reactFilterFactory(SkillsFilter, parentReactComponent) + // supply a React component + cellRendererFramework: SkillsCellRenderer, + // supply a React component + filterFramework: SkillsFilter }, - {headerName: "Proficiency", field: "proficiency", filter: 'number', width: 120, enableValue: true, - // using ag-Grid's React cellRenderer factory - cellRendererFmk: ProficiencyCellRenderer, - // using ag-Grid's React filter factory - filter: reactFilterFactory(ProficiencyFilter, parentReactComponent)} + {headerName: "Proficiency", field: "proficiency", width: 120, enableValue: true, + // supply a React component + cellRendererFramework: ProficiencyCellRenderer, + // supply a React component + filterFramework: ProficiencyFilter + } ] }, { diff --git a/src-standard/NameCellEditor.jsx b/src-standard/NameCellEditor.jsx index 4d9488e..2433631 100644 --- a/src-standard/NameCellEditor.jsx +++ b/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(params); + this.state = this.createInitialState(props); } // 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; - if (params.keyPress === KEY_F2) { + startValue = props.value; + if (props.keyPress === KEY_F2) { this.putCursorAtEndOnFocus = true; } else { this.highlightAllOnFocus = true; diff --git a/src-standard/ProficiencyCellRenderer.jsx b/src-standard/ProficiencyCellRenderer.jsx index ca47e13..5bc412b 100644 --- a/src-standard/ProficiencyCellRenderer.jsx +++ b/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 ( -
-
{params.value}%
+
+
{this.props.value}%
); } } - -// 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 -}; \ No newline at end of file diff --git a/src-standard/ProficiencyFilter.jsx b/src-standard/ProficiencyFilter.jsx index 5c86c35..5925031 100644 --- a/src-standard/ProficiencyFilter.jsx +++ b/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({ - selected: name - }, ()=> { - this.filterChangedCallback(); - }); + var newState = {selected: name}; + // set the state, and once it is done, then call filterChangedCallback + this.setState(newState, this.props.filterChangedCallback); console.log(name); } diff --git a/src-standard/SkillsCellRenderer.jsx b/src-standard/SkillsCellRenderer.jsx index 71361e4..332de28 100644 --- a/src-standard/SkillsCellRenderer.jsx +++ b/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(); diff --git a/src-standard/SkillsFilter.jsx b/src-standard/SkillsFilter.jsx index 3c4d223..440cfda 100644 --- a/src-standard/SkillsFilter.jsx +++ b/src-standard/SkillsFilter.jsx @@ -8,11 +8,9 @@ import RefData from './RefData'; // React design skills. export default class SkillsFilter extends React.Component { - constructor() { - super(); + constructor(props) { + 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 - init(params) { - this.filterChangedCallback = params.filterChangedCallback; + getModel() { + return { + 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 = (