mohiit1502/ag-grid-react-example
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

new component model

Browse Source
This commit is contained in:
ceolter
2016-09-14 12:15:30 +01:00
parent b4b8c85172
commit b5949d8d5d
7 changed files with 55 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src-standard/ColDefFactory.jsx
View File

@@ -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
}
]
},
{

15
src-standard/NameCellEditor.jsx
View File

@@ -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;

17
src-standard/ProficiencyCellRenderer.jsx
View File

@@ -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-value">{params.value}%</div>
<div className="div-percent-bar" style={{ width: this.props.value + '%', backgroundColor: backgroundColor }}>
<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
};

19
src-standard/ProficiencyFilter.jsx
View File

@@ -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);
}

2
src-standard/SkillsCellRenderer.jsx
View File

@@ -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} />);

37
src-standard/SkillsFilter.jsx
View File

@@ -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 = (
<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() {}

4
src-standard/myApp.jsx
View File

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