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

AG-420 Improve React implementation

Browse Source
This commit is contained in:
Sean Landsman
2017-05-26 14:49:34 +01:00
parent f8b8a0b066
commit 9c3c7a77c0
14 changed files with 102 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
package.json
View File

@@ -7,15 +7,15 @@
"trader": "webpack-dev-server --content-base src-trader-dashboard/ --config webpack.config.trader.js --progress --colors --hot --inline",
"examples": "webpack-dev-server --content-base src/ --config webpack.config.examples.js --progress --colors --hot --inline",
"large": "webpack-dev-server --config webpack.config.large.js --progress --colors --hot --inline",
"clean": "rimraf dist",
"mkdirs": "mkdir -p dist/trader/dist dist/examples/dist",
"copy": "cp -r images dist/examples && cp src/index.html dist/examples && cp src-trader-dashboard/index.html dist/trader && cp dist/react-examples.js dist/examples/dist && cp dist/react-trader.js dist/trader/dist",
"copy-examples": "cp -r images dist/examples && cp src/index.html dist/examples && cp dist/react-examples.js dist/examples/dist && cp -r src dist/examples",
"copy-trader": "cp src-trader-dashboard/index.html dist/trader && cp dist/react-trader.js dist/trader/dist",
"copy": "npm run copy-examples && npm run copy-trader",
"build-examples": "webpack --config webpack.config.examples.js --progress --profile --bail",
"build-dashboard": "webpack --config webpack.config.trader.js --progress --profile --bail",
"build-all": "npm run build-examples && npm run build-dashboard",
"build" : "npm run clean && npm run mkdirs && npm run build-all && npm run copy"
"build": "npm run clean && npm run mkdirs && npm run build-all && npm run copy"
},
"repository": {
"type": "git",
@@ -46,7 +46,7 @@
"webpack-dev-server": "1.14.x"
},
"dependencies": {
"ag-grid": "10.0.x",
"ag-grid": "file:/Users/seanlandsman/IdeaProjects/ag/ag-grid/core-docs/ag-grid",
"ag-grid-enterprise": "10.0.x",
"ag-grid-react": "10.0.x",
"bootstrap": "^3.3.7",
@@ -56,8 +56,8 @@
"react": "15.5.x",
"react-dom": "15.5.x",
"react-redux": "5.0.x",
"react-router-dom": "4.1.x",
"redux": "3.6.x",
"rimraf": "2.5.x"
"rimraf": "2.5.x",
"url-search-params-polyfill": "^1.2.0"
}
}

104
src/App.jsx
View File

@@ -1,51 +1,91 @@
import React, {Component} from "react";
import {Redirect, Route, Switch} from "react-router-dom";
import NavItem from "./NavItem";
import "url-search-params-polyfill";
import DynamicComponentsExample from "./dynamicComponentExample/DynamicComponentsExample";
import RichGridExample from "./richGridExample/RichGridExample";
import RichComponentsExample from "./richComponentExample/RichComponentsExample";
import EditorComponentsExample from "./editorComponentExample/EditorComponentsExample";
import FloatingRowComponentExample from "./floatingRowExample/FloatingRowComponentExample";
import FullWidthComponentExample from "./fullWidthExample/FullWidthComponentExample";
import GroupedRowInnerRendererComponentExample from "./groupedRowInnerRendererExample/GroupedRowInnerRendererComponentExample";
import FilterComponentExample from "./filterComponentExample/FilterComponentExample";
import RichGridExample from "./richGridExample/RichGridExample";
import MasterDetailExample from "./masterDetailExample/MasterDetailExample";
const Header = () => (
<header>
<ul className="nav nav-pills">
<NavItem to='/rich-grid'>Rich Grid Example</NavItem>
<NavItem to='/dynamic'>Dynamic React Component Example</NavItem>
<NavItem to='/rich-dynamic'>Dynamic React Components - Richer Example</NavItem>
<NavItem to='/editor'>Cell Editor Component Example</NavItem>
<NavItem to='/floating-row'>Floating Row Renderer Example</NavItem>
<NavItem to='/full-width'>Full Width Renderer Example</NavItem>
<NavItem to='/group-row'>Grouped Row Inner Renderer Example</NavItem>
<NavItem to='/filter'>Filters Component Example</NavItem>
<NavItem to='/master-detail'>Master Detail Example</NavItem>
</ul>
</header>
);
class App extends Component {
constructor(props) {
super(props);
let searchParams = new URLSearchParams(window.location.search);
let fromDocs = searchParams.has("fromDocs");
let example = searchParams.has("example") ? searchParams.get("example") : 'rich-grid';
this.state = {
example,
fromDocs
};
this.setExample = this.setExample.bind(this);
}
setExample(example) {
console.log(example);
this.setState({
example
})
}
render() {
let header = null;
if (!this.state.fromDocs) {
header = (
<ul className="nav nav-pills">
<li role="presentation" className={this.state.example === 'rich-grid' ? 'active' : null} onClick={() => this.setExample("rich-grid")}><a href="#">Rich Grid Example</a></li>
<li role="presentation" className={this.state.example === 'dynamic' ? 'active' : null} onClick={() => this.setExample("dynamic")}><a href="#">Dynamic React Component Example</a></li>
<li role="presentation" className={this.state.example === 'rich-dynamic' ? 'active' : null} onClick={() => this.setExample("rich-dynamic")}><a href="#">Dynamic React Components - Richer Example</a></li>
<li role="presentation" className={this.state.example === 'editor' ? 'active' : null} onClick={() => this.setExample("editor")}><a href="#">Cell Editor Component Example</a></li>
<li role="presentation" className={this.state.example === 'floating-row' ? 'active' : null} onClick={() => this.setExample("floating-row")}><a href="#">Floating Row Renderer Example</a></li>
<li role="presentation" className={this.state.example === 'full-width' ? 'active' : null} onClick={() => this.setExample("full-width")}><a href="#">Full Width Renderer Example</a></li>
<li role="presentation" className={this.state.example === 'group-row' ? 'active' : null} onClick={() => this.setExample("group-row")}><a href="#">Grouped Row Inner Renderer Example</a></li>
<li role="presentation" className={this.state.example === 'filter' ? 'active' : null} onClick={() => this.setExample("filter")}><a href="#">Filters Component Example</a></li>
<li role="presentation" className={this.state.example === 'master-detail' ? 'active' : null} onClick={() => this.setExample("master-detail")}><a href="#">Master Detail Example</a></li>
</ul>)
}
let example = null;
switch (this.state.example) {
case 'dynamic':
example = <DynamicComponentsExample/>;
break;
case 'rich-dynamic':
example = <RichComponentsExample/>;
break;
case 'editor':
example = <EditorComponentsExample/>;
break;
case 'floating-row':
example = <FloatingRowComponentExample/>;
break;
case 'full-width':
example = <FullWidthComponentExample/>;
break;
case 'group-row':
example = <GroupedRowInnerRendererComponentExample/>;
break;
case 'filter':
example = <FilterComponentExample/>;
break;
case 'master-detail':
example = <MasterDetailExample/>;
break;
default:
example = <RichGridExample/>;
}
return (
<div>
<Header/>
<Switch>
<Redirect from="/" exact to="/rich-grid"/>
<Route exact path='/rich-grid' component={RichGridExample}/>
<Route exact path='/dynamic' component={DynamicComponentsExample}/>
<Route exact path='/rich-dynamic' component={RichComponentsExample}/>
<Route exact path='/editor' component={EditorComponentsExample}/>
<Route exact path='/floating-row' component={FloatingRowComponentExample}/>
<Route exact path='/full-width' component={FullWidthComponentExample}/>
<Route exact path='/group-row' component={GroupedRowInnerRendererComponentExample}/>
<Route exact path='/filter' component={FilterComponentExample}/>
<Route exact path='/master-detail' component={MasterDetailExample}/>
</Switch>
{header}
{example}
</div>
)
}

19
src/NavItem.jsx
View File

@@ -1,19 +0,0 @@
import React, {PropTypes} from 'react'
import {Route, Link} from 'react-router-dom'
// for bootstrap li active functionality
export default function NavItem({children, to, exact}) {
return (
<Route path={to} exact={exact} children={({match}) => (
<li className={match ? 'active' : null}>
<Link to={to}>{children}</Link>
</li>
)}/>
)
}
NavItem.propTypes = {
to: PropTypes.string.isRequired,
exact: PropTypes.bool,
children: PropTypes.node.isRequired,
};

2
src/dynamicComponentExample/DynamicComponentsExample.jsx
View File

@@ -104,7 +104,7 @@ export default class DynamicComponentsExample extends Component {
}
render() {
return (
<div style={{width: 800, height: 400}}
<div style={{height: 400, width: 945}}
className="ag-fresh">
<h1>Dynamic React Component Example</h1>
<button onClick={this.refreshRowData}>Refresh Data</button>

2
src/editorComponentExample/EditorComponentsExample.jsx
View File

@@ -65,7 +65,7 @@ export default class EditorComponentsExample extends Component {
render() {
return (
<div style={{width: 800, height: 400}}
<div style={{height: 400, width: 945}}
className="ag-fresh">
<h1>Cell Editor Component Example</h1>
<AgGridReact

2
src/filterComponentExample/FilterComponentExample.jsx
View File

@@ -65,7 +65,7 @@ export default class FilterComponentExample extends Component {
render() {
return (
<div style={{width: 800, height: 400}}
<div style={{height: 400, width: 945}}
className="ag-fresh">
<h1>Group Row Renderer Example</h1>
<button style={{marginBottom: 10}} onClick={this.onClicked}>Filter Instance Method</button>

2
src/floatingRowExample/FloatingRowComponentExample.jsx
View File

@@ -65,7 +65,7 @@ export default class FloatingRowComponentExample extends Component {
render() {
return (
<div style={{width: 800, height: 400}}
<div style={{height: 400, width: 945}}
className="ag-fresh">
<h1>Floating Row Renderer Example</h1>
<AgGridReact

2
src/fullWidthExample/FullWidthComponentExample.jsx
View File

@@ -68,7 +68,7 @@ export default class FullWidthComponentExample extends Component {
render() {
return (
<div style={{width: 800, height: 400}}
<div style={{height: 400, width: 945}}
className="ag-fresh">
<h1>Full Width Renderer Example</h1>
<AgGridReact

2
src/groupedRowInnerRendererExample/GroupedRowInnerRendererComponentExample.jsx
View File

@@ -108,7 +108,7 @@ export default class GroupedRowInnerRendererComponentExample extends Component {
render() {
return (
<div style={{width: 800, height: 400}}
<div style={{height: 400, width: 945}}
className="ag-fresh">
<h1>Group Row Renderer Example</h1>
<AgGridReact

24
src/index.html
View File

@@ -71,8 +71,8 @@
.expanded {
animation-name: toExpanded;
animation-duration: 1s;
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
@@ -80,22 +80,22 @@
color: cornflowerblue;
animation-name: toCollapsed;
animation-duration: 1s;
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);
}
@keyframes toExpanded {
from {
color: cornflowerblue;
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);
}
to {
color: black;
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
}
@@ -103,14 +103,14 @@
@keyframes toCollapsed {
from {
color: black;
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
to {
color: cornflowerblue;
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);
}
}

5
src/index.js
View File

@@ -2,7 +2,6 @@
import React from "react";
import {render} from "react-dom";
import {BrowserRouter} from "react-router-dom";
import "ag-grid-root/dist/styles/ag-grid.css";
import "ag-grid-root/dist/styles/theme-fresh.css";
@@ -12,9 +11,7 @@ import App from "./App";
document.addEventListener('DOMContentLoaded', () => {
render(
<BrowserRouter>
<App/>
</BrowserRouter>,
<App/>,
document.querySelector('#app')
);
});

2
src/masterDetailExample/MasterDetailExample.jsx
View File

@@ -116,7 +116,7 @@ export default class MasterDetailExample extends Component {
render() {
return (
<div style={{width: 800, height: 400}}
<div style={{height: 400, width: 945}}
className="ag-fresh">
<h1>Master-Detail Example</h1>
<AgGridReact

2
src/richComponentExample/RichComponentsExample.jsx
View File

@@ -60,7 +60,7 @@ export default class RichComponentsExample extends Component {
render() {
return (
<div style={{width: 800, height: 400}}
<div style={{height: 400, width: 945}}
className="ag-fresh">
<h1>Dynamic React Components - Richer Example</h1>
<AgGridReact

4
src/richGridExample/RichGridExample.jsx
View File

@@ -179,7 +179,7 @@ export default class RichGridExample extends Component {
</div>
);
gridTemplate = (
<div style={{height: 400}} className="ag-fresh">
<div style={{height: 400, width: 945}} className="ag-fresh">
<AgGridReact
// gridOptions is optional - it's possible to provide
// all values as React props
@@ -214,7 +214,7 @@ export default class RichGridExample extends Component {
);
}
return <div style={{width: '1024px'}}>
return <div style={{width: '950px'}}>
<div style={{padding: '4px'}}>
{topHeaderTemplate}
{bottomHeaderTemplate}