Skip to content
This repository was archived by the owner on Aug 19, 2024. It is now read-only.

Commit 849472a

Browse files
seanlandsmanseanlandsman
committed
Test, Fix and Clean React Examples
1 parent a2743f9 commit 849472a

10 files changed

Lines changed: 55 additions & 34 deletions

File tree

‎package.json‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,6 @@
1717
"build-dashboard": "webpack --config config/webpack.config.trader.js --progress --profile --bail",
1818
"build-all": "npm run build-examples && npm run build-dashboard",
1919
"build": "npm run clean && npm run mkdirs && npm run build-all && npm run copy",
20-
"copy-to-docs": "ncp dist/examples ../ag-grid-docs/src/framework-examples/react-examples/examples && ncp dist/trader ../ag-grid-docs/src/framework-examples/react-examples/trader",
21-
"build-to-docs": "npm run build && npm run copy-to-docs",
2220
"start": "npm run examples"
2321
},
2422
"repository": {

‎src-examples/App.jsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@ import RichGridDeclarativeExample from "./richGridDeclarativeExample/RichGridDec
77
import SimpleReduxDynamicExample from "./simpleReduxDynamicComponentExample/SimpleReduxExample";
88

99
const SideBar = () => (
10-
<div style={{float: "left", width: 335, marginRight: 25}}>
11-
<ul className="nav nav-pills nav-stacked">
12-
<NavItem to='/rich-grid-declarative'>Rich Grid with Declarative Markup</NavItem>
13-
<NavItem to='/simple-redux-dynamic'>Simple Redux Dynamic Component Example</NavItem>
14-
</ul>
15-
</div>
10+
<div style={{float: "left", width: 335, marginRight: 25}}>
11+
<ul className="nav nav-pills nav-stacked">
12+
<NavItem to='/rich-grid-declarative'>Rich Grid with Declarative Markup</NavItem>
13+
<NavItem to='/simple-redux-dynamic'>Simple Redux Dynamic Component Example</NavItem>
14+
</ul>
15+
</div>
1616
);
1717

1818
class App extends Component {

‎src-examples/NavItem.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react'
22
import * as PropTypes from 'prop-types';
3-
import {Route, Link} from 'react-router-dom'
3+
import {Link, Route} from 'react-router-dom'
44

55
// for bootstrap li active functionality
66
export default function NavItem({children, to, exact}) {

‎src-examples/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {render} from "react-dom";
55
import {BrowserRouter} from "react-router-dom";
66

77
import "ag-grid/dist/styles/ag-grid.css";
8-
import "ag-grid/dist/styles/theme-fresh.css";
8+
import "ag-grid/dist/styles/ag-theme-balham.css";
99
import "../node_modules/bootstrap/dist/css/bootstrap.css";
1010

1111
import App from "./App";

‎src-examples/richGridDeclarativeExample/ProficiencyFilter.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export default class ProficiencyFilter extends React.Component {
5454
PROFICIENCY_NAMES.forEach((name) => {
5555
const selected = this.state.selected === name;
5656
rows.push(
57-
<div key={name}>
57+
<div key={name} style={{marginTop: 3}}>
5858
<label style={{paddingLeft: 4}}>
5959
<input type="radio" checked={selected} name={Math.random()}
6060
onChange={this.onButtonPressed.bind(this, name)}/>

‎src-examples/richGridDeclarativeExample/RichGridDeclarativeExample.jsx‎

Lines changed: 42 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import HeaderGroupComponent from './HeaderGroupComponent.jsx';
1212
import SortableHeaderComponent from './SortableHeaderComponent.jsx';
1313

1414
import "./RichGridDeclarativeExample.css";
15-
1615
// take this line out if you do not want to use ag-Grid-Enterprise
1716
import "ag-grid-enterprise";
1817

@@ -123,13 +122,21 @@ export default class RichGridDeclarativeExample extends Component {
123122
<div>
124123
<span>
125124
Grid API:
126-
<button onClick={() => { this.api.selectAll() }} className="btn btn-primary">Select All</button>
127-
<button onClick={() => { this.api.deselectAll() }} className="btn btn-primary">Clear Selection</button>
125+
<button onClick={() => {
126+
this.api.selectAll()
127+
}} className="btn btn-primary">Select All</button>
128+
<button onClick={() => {
129+
this.api.deselectAll()
130+
}} className="btn btn-primary">Clear Selection</button>
128131
</span>
129132
<span style={{float: "right"}}>
130133
Column API:
131-
<button onClick={() => { this.columnApi.setColumnVisible('country', false) }} className="btn btn-primary">Hide Country Column</button>
132-
<button onClick={() => { this.columnApi.setColumnVisible('country', true) }} className="btn btn-primary">Show Country Column</button>
134+
<button onClick={() => {
135+
this.columnApi.setColumnVisible('country', false)
136+
}} className="btn btn-primary">Hide Country Column</button>
137+
<button onClick={() => {
138+
this.columnApi.setColumnVisible('country', true)
139+
}} className="btn btn-primary">Show Country Column</button>
133140
</span>
134141
</div>
135142
<div style={{display: "inline-block", width: "100%", marginTop: 10, marginBottom: 10}}>
@@ -150,10 +157,11 @@ export default class RichGridDeclarativeExample extends Component {
150157
<button onClick={this.invokeSkillsFilterMethod}
151158
className="btn btn-primary">Invoke Skills Filter Method
152159
</button>
153-
<button onClick={this.dobFilter} className="btn btn-primary">DOB equals to 01/01/2000ß</button>
160+
<button onClick={this.dobFilter} className="btn btn-primary">DOB equals to 01/01/2000ß
161+
</button>
154162
</div>
155163
</div>
156-
<div style={{height: 400, width: 900}} className="ag-fresh">
164+
<div style={{height: 400, width: 900}} className="ag-theme-balham">
157165
<AgGridReact
158166
// listening for events
159167
onGridReady={this.onGridReady}
@@ -179,7 +187,6 @@ export default class RichGridDeclarativeExample extends Component {
179187
enableFilter
180188
floatingFilter
181189
groupHeaders
182-
rowHeight="22"
183190

184191
// setting grid wide date component
185192
dateComponentFramework={DateComponent}
@@ -192,20 +199,36 @@ export default class RichGridDeclarativeExample extends Component {
192199
}
193200
}}
194201
>
195-
<AgGridColumn headerName="#" width={30} checkboxSelection suppressSorting suppressMenu suppressFilter pinned></AgGridColumn>
202+
<AgGridColumn headerName="#" width={30}
203+
checkboxSelection suppressSorting suppressMenu suppressFilter pinned>
204+
</AgGridColumn>
196205
<AgGridColumn headerName="Employee" headerGroupComponentFramework={HeaderGroupComponent}>
197-
<AgGridColumn field="name" width={150} enableRowGroup enablePivot pinned editable cellEditorFramework={NameCellEditor}></AgGridColumn>
198-
<AgGridColumn field="country" width={150} enableRowGroup enablePivot pinned editable cellRenderer={RichGridDeclarativeExample.countryCellRenderer} filterParams={{cellRenderer: RichGridDeclarativeExample.countryCellRenderer, cellHeight:20}}></AgGridColumn>
199-
<AgGridColumn field="dob" width={145} headerName="DOB" filter="agDateColumnFilter" pinned columnGroupShow="open" cellRenderer={RichGridDeclarativeExample.dateCellRenderer}></AgGridColumn>
206+
<AgGridColumn field="name" width={150}
207+
cellEditorFramework={NameCellEditor}
208+
enableRowGroup enablePivot pinned editable/>
209+
<AgGridColumn field="country" width={150}
210+
cellRenderer={RichGridDeclarativeExample.countryCellRenderer}
211+
filterParams={{
212+
cellRenderer: RichGridDeclarativeExample.countryCellRenderer,
213+
cellHeight: 20
214+
}}
215+
enableRowGroup enablePivot pinned editable/>
216+
<AgGridColumn field="dob" width={175} headerName="DOB" filter="agDateColumnFilter"
217+
pinned columnGroupShow="open"
218+
cellRenderer={RichGridDeclarativeExample.dateCellRenderer}/>
200219
</AgGridColumn>
201220
<AgGridColumn headerName="IT Skills">
202-
<AgGridColumn field="skills" width={120} enableRowGroup enablePivot suppressSorting cellRendererFramework={SkillsCellRenderer} filterFramework={SkillsFilter}></AgGridColumn>
203-
<AgGridColumn field="proficiency" width={135} enableValue cellRendererFramework={ProficiencyCellRenderer} filterFramework={ProficiencyFilter}></AgGridColumn>
221+
<AgGridColumn field="skills" width={120} enableRowGroup enablePivot suppressSorting
222+
cellRendererFramework={SkillsCellRenderer}
223+
filterFramework={SkillsFilter}/>
224+
<AgGridColumn field="proficiency" width={135} enableValue
225+
cellRendererFramework={ProficiencyCellRenderer}
226+
filterFramework={ProficiencyFilter}/>
204227
</AgGridColumn>
205228
<AgGridColumn headerName="Contact">
206-
<AgGridColumn field="mobile" width={150} filter="text"></AgGridColumn>
207-
<AgGridColumn field="landline" width={150} filter="text"></AgGridColumn>
208-
<AgGridColumn field="address" width={500} filter="text"></AgGridColumn>
229+
<AgGridColumn field="mobile" width={150} filter="text"/>
230+
<AgGridColumn field="landline" width={150} filter="text"/>
231+
<AgGridColumn field="address" width={500} filter="text"/>
209232
</AgGridColumn>
210233
</AgGridReact>
211234
</div>
@@ -215,7 +238,8 @@ export default class RichGridDeclarativeExample extends Component {
215238
</div>
216239
<div className="row">
217240
<div className="col-sm-12">
218-
<h5>This example demonstrates many features of ag-Grid, with Grid and Column Definition defined declaratively (i.e. with markup).</h5>
241+
<h5>This example demonstrates many features of ag-Grid, with Grid and Column Definition
242+
defined declaratively (i.e. with markup).</h5>
219243
<p><span style={{fontWeight: 500}}>Select All/Clear Selection</span>: Select or Deselect
220244
All
221245
Rows</p>

‎src-examples/simpleReduxDynamicComponentExample/GridComponent.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ class GridComponent extends Component {
3939
render() {
4040
return (
4141
<div style={{height: 400, width: 900, marginTop: 15}}
42-
className="ag-fresh">
42+
className="ag-theme-balham">
4343
<AgGridReact
4444
// properties
4545
columnDefs={this.state.columnDefs}

‎src-examples/simpleReduxDynamicComponentExample/HeaderComponent.jsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, {Component} from "react";
22
import {connect} from "react-redux";
3-
43
// take this line out if you do not want to use ag-Grid-Enterprise
54
import "ag-grid-enterprise";
65

‎src-examples/simpleReduxDynamicComponentExample/SimpleReduxExample.jsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, {Component} from "react";
22
import {Provider} from "react-redux";
33
import {createStore} from "redux";
4-
54
// take this line out if you do not want to use ag-Grid-Enterprise
65
import "ag-grid-enterprise";
76

@@ -26,8 +25,8 @@ export default class SimpleReduxExample extends Component {
2625
<Provider store={store}>
2726
<div>
2827
<h1>Simple Redux Example using Connected React Components</h1>
29-
<HeaderComponent />
30-
<GridComponent />
28+
<HeaderComponent/>
29+
<GridComponent/>
3130
</div>
3231
</Provider>
3332
)

‎src-examples/simpleReduxDynamicComponentExample/gridDataActions.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ export function updateRowData(rowData) {
44
rowData
55
}
66
}
7+
78
export function setCurrency(currencySymbol, exchangeRate) {
89
return {
910
type: 'CURRENCY_CHANGED',

0 commit comments

Comments
 (0)