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

Tidy examples

Browse Source
This commit is contained in:
Sean Landsman
2017-09-18 16:03:27 +01:00
parent ad6bc068b2
commit 7075f57d88
13 changed files with 194 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/filterComponentExample/FilterComponentExample.jsx
View File

@@ -13,8 +13,8 @@ export default class FilterComponentExample extends Component {
this.state = {
gridOptions: {},
rowData: this.createRowData(),
columnDefs: this.createColumnDefs(),
rowData: FilterComponentExample.createRowData(),
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"},

8
src/fullWidthExample/FullWidthComponentExample.jsx
View File

@@ -10,8 +10,8 @@ export default class FullWidthComponentExample extends Component {
this.state = {
gridOptions: {},
rowData: this.createRowData(),
columnDefs: this.createColumnDefs()
rowData: FullWidthComponentExample.createRowData(),
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},

8
src/richComponentExample/RichComponentsExample.jsx
View File

@@ -9,8 +9,8 @@ export default class RichComponentsExample extends Component {
super(props);
this.state = {
rowData: this.createRowData(),
columnDefs: this.createColumnDefs()
rowData: RichComponentsExample.createRowData(),
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}},

3
src/richGridExample/HeaderGroupComponent.jsx
View File

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

19
src/richGridExample/NameCellEditor.jsx
View File

@@ -1,10 +1,9 @@
import React from 'react';
import RefData from './RefData';
import * as PropTypes from 'prop-types';
var KEY_BACKSPACE = 8;
var KEY_DELETE = 46;
var KEY_F2 = 113;
const KEY_BACKSPACE = 8;
const KEY_DELETE = 46;
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;
var putCursorAtEndOnFocus = false;
var highlightAllOnFocus = false;
let startValue;
const putCursorAtEndOnFocus = 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);
}

3
src/richGridExample/ProficiencyCellRenderer.jsx
View File

@@ -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) {

37
src/richGridExample/ProficiencyFilter.jsx
View File

@@ -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);
var valueAsNumber = parseFloat(value);
const value = this.props.valueGetter(params);
const valueAsNumber = parseFloat(value);
switch (this.state.selected) {
case PROFICIENCY_NAMES[1] : return valueAsNumber >= 40;
case PROFICIENCY_NAMES[2] : return valueAsNumber >= 60;
case PROFICIENCY_NAMES[3] : return valueAsNumber >= 80;
default : return true;
case PROFICIENCY_NAMES[1] :
return valueAsNumber >= 40;
case PROFICIENCY_NAMES[2] :
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}

3
src/richGridExample/RefData.js
View File

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

3
src/richGridExample/RichGridExample.jsx
View File

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

10
src/richGridExample/RowDataFactory.js
View File

@@ -3,10 +3,10 @@ import RefData from './RefData';
export default class RowDataFactory {
createRowData() {
var rowData = [];
const rowData = [];
for (var i = 0; i < 200; i++) {
var countryData = RefData.COUNTRIES[i % RefData.COUNTRIES.length];
for (let i = 0; i < 200; i++) {
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 = '+';
for (var i = 0; i < 12; i++) {
let result = '+';
for (let i = 0; i < 12; i++) {
result += Math.round(Math.random() * 10);
if (i === 2 || i === 5 || i === 8) {
result += ' ';

4
src/richGridExample/SkillsCellRenderer.jsx
View File

@@ -5,8 +5,8 @@ import RefData from './RefData';
export default class SkillsCellRenderer extends React.Component {
render() {
var skills = [];
var rowData = this.props.data;
const skills = [];
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}/>);

16
src/richGridExample/SkillsFilter.jsx
View File

@@ -42,8 +42,8 @@ export default class SkillsFilter extends React.Component {
// called by agGrid
doesFilterPass(params) {
var rowSkills = params.data.skills;
var passed = true;
const rowSkills = params.data.skills;
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;
var newModel = {};
const newValue = event.target.checked;
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];
var template = (
const skillName = RefData.IT_SKILLS_NAMES[index];
const template = (
<label key={skill}
style={{border: '1px solid lightgrey', margin: 4, padding: 4, display: 'inline-block'}}>
<span>

13
src/richGridExample/SortableHeaderComponent.jsx
View File

@@ -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
className="fa fa-long-arrow-down"/></div>)
sortElements.push(<div key={`down${this.props.displayName}`} className={upArrowClass} 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
sortElements.push(<div key={`up${this.props.displayName}`} className={downArrowClass}
onClick={this.onSortRequested.bind(this, 'desc')}><i
className="fa fa-long-arrow-down"/></div>);
sortElements.push(<div key={`down${this.props.displayName}`} className={upArrowClass}
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>)
}