8.1.0

Merge branch '8.0.0'
8.0.0
2017-02-20 12:49:05 +00:00 · 2017-02-09 15:48:33 +00:00 · 2017-02-09 14:14:07 +00:00 · 2017-02-09 13:59:26 +00:00 · 2017-02-09 13:58:19 +00:00 · 2017-02-07 10:00:52 +00:00
6 changed files with 252 additions and 17 deletions
--- a/index.html
+++ b/index.html
@@ -16,6 +16,105 @@
            margin-left: 4px;
            margin-right: 4px;
        }
        .customHeaderMenuButton{
            margin-top: 5px;
            margin-left: 4px;
            float: left;
        }
        .customHeaderLabel{
            margin-left: 5px;
            margin-top: 3px;
            float: left;
        }
        .customSortDownLabel{
            float: left;
            margin-left: 10px;
            margin-top: 5px;
        }
        .customSortUpLabel{
            float: left;
            margin-left: 3px;
            margin-top: 4px;
        }
        .customSortRemoveLabel{
            float: left;
            font-size: 11px;
            margin-left: 3px;
            margin-top: 6px;
        }
        .active {
            color: cornflowerblue;
        }
        .hidden { display:none; }
        .customHeaderLabel{
            margin-left: 5px;
            margin-top: 3px;
            float: left;
        }
        .customExpandButton{
            float:right;
            margin-top: 5px;
            margin-left: 3px;
        }
        .expanded {
            animation-name: toExpanded;
            animation-duration: 1s;
            -ms-transform: rotate(180deg); /* IE 9 */
            -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
            transform: rotate(180deg);
        }
        .collapsed {
            color: cornflowerblue;
            animation-name: toCollapsed;
            animation-duration: 1s;
            -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 */
                transform: rotate(0deg);
            }
            to {
                color: black;
                -ms-transform: rotate(180deg); /* IE 9 */
                -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
                transform: rotate(180deg);
            }
        }
        @keyframes toCollapsed{
            from {
                color: black;
                -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 */
                transform: rotate(0deg);
            }
        }
    </style>
    <body>
--- a/package.json
+++ b/package.json
@@ -1,12 +1,14 @@
 {
  "name": "ag-grid-react-example",
-  "version": "7.2.0",
+  "version": "8.1.0",
  "description": "Example Reach applicaiton using ag-Grid.",
  "main": "dist/ag-grid-react-example.js",
  "scripts": {
    "standard": "webpack-dev-server --config webpack.config.standard.js --progress --colors --hot --inline",
    "grouped": "webpack-dev-server --config webpack.config.grouped.js --progress --colors --hot --inline",
-    "large": "webpack-dev-server --config webpack.config.large.js --progress --colors --hot --inline"
+    "large": "webpack-dev-server --config webpack.config.large.js --progress --colors --hot --inline",
    "clean": "rimraf dist",
    "build-standard": "npm run clean && webpack --config webpack.config.standard.js --progress --profile --bail"
  },
  "repository": {
    "type": "git",
@@ -35,10 +37,13 @@
    "webpack-dev-server": "^1.14.1"
  },
  "dependencies": {
    "rimraf": "2.5.x",
    "react": "0.14.6",
    "react-dom": "0.14.6",
-    "ag-grid": "7.2.x",
+    "ag-grid": "8.1.x",
-    "ag-grid-enterprise": "7.2.x",
+    "ag-grid-enterprise": "8.1.x",
-    "ag-grid-react": "7.2.x"
+    "ag-grid-react": "8.1.x"
  }
 }
--- a/src-standard/ColDefFactory.jsx
+++ b/src-standard/ColDefFactory.jsx
@@ -4,6 +4,7 @@ import ProficiencyCellRenderer from './ProficiencyCellRenderer.jsx';
 import RefData from './RefData';
 import SkillsFilter from './SkillsFilter.jsx';
 import ProficiencyFilter from './ProficiencyFilter.jsx';
 import MyReactHeaderGroupComponent from './MyReactHeaderGroupComponent.jsx';
 export default class ColDefFactory {
@@ -14,22 +15,28 @@ export default class ColDefFactory {
                suppressMenu: true, pinned: true},
            {
                headerName: 'Employee',
                headerGroupComponentFramework: MyReactHeaderGroupComponent,
                children: [
-                    {headerName: "Name", field: "name", enableRowGroup: true, enablePivot: true,
+                    {
                        headerName: "Name", field: "name", enableRowGroup: true, enablePivot: true,
                        width: 150, pinned: true, editable: true,
                        // use a React cellEditor
                        cellEditorFramework: NameCellEditor
-                    },
+                    }, {
-                    {headerName: "Country", field: "country", width: 150, enableRowGroup: true, enablePivot: true,
+                        headerName: "Country", field: "country", width: 150, enableRowGroup: true, enablePivot: true,
                        // an example of using a non-React cell renderer
                        cellRenderer: countryCellRenderer, pinned: true,
-                        filterParams: {cellRenderer: countryCellRenderer, cellHeight: 20}}
+                        filterParams: {
-                    ,
+                            cellRenderer: countryCellRenderer, cellHeight: 20
-                    {headerName: "DOB", field: "dob", width: 90, enableRowGroup: true, enablePivot: true, filter:'date', cellRenderer: function(params) {
+                        }, columnGroupShow: 'open'
-                        return  pad(params.value.getDate(), 2) + '/' +
+                    }, {
-                                pad(params.value.getMonth() + 1, 2)+ '/' +
+                        headerName: "DOB", field: "dob", width: 110, enableRowGroup: true, enablePivot: true, filter:'date',
-                                params.value.getFullYear();
+                        pinned: true, cellRenderer: function(params) {
-                    }}
+                            return  pad(params.value.getDate(), 2) + '/' +
                                    pad(params.value.getMonth() + 1, 2)+ '/' +
                                    params.value.getFullYear();
                        }, columnGroupShow: 'open'
                    }
                ]
            },
            {
@@ -41,7 +48,7 @@ export default class ColDefFactory {
                        // supply a React component
                        filterFramework: SkillsFilter
                    },
-                    {headerName: "Proficiency", field: "proficiency", width: 120, enableValue: true,
+                    {headerName: "Proficiency", field: "proficiency", width: 135, enableValue: true,
                        // supply a React component
                        cellRendererFramework: ProficiencyCellRenderer,
                        // supply a React component
--- a/src-standard/MyReactHeaderComponent.jsx
+++ b/src-standard/MyReactHeaderComponent.jsx
@@ -0,0 +1,76 @@
 import React from 'react';
 // Header component to be used as default for all the columns.
 export default class MyReactHeaderComponent extends React.Component {
    constructor(props) {
        super(props);
        this.props.column.addEventListener('sortChanged', this.onSortChanged.bind(this));
        //The state of this component contains the current sort state of this column
        //The possible values are: 'asc', 'desc' and ''
        this.state = {
           sorted: ''
        }
    }
    render() {
        let sortElements = [];
        if (this.props.enableSorting){
            let downArrowClass = "customSortDownLabel " + (this.state.sorted === 'desc' ? " active" : "");
            let upArrowClass = "customSortUpLabel " + (this.state.sorted === 'asc' ? " active" : "");
            let removeArrowClass = "customSortRemoveLabel " + (this.state.sorted === '' ? " active" : "");
            sortElements.push(<div className={downArrowClass} onClick={this.onSortRequested.bind(this, 'desc')}><i className="fa fa-long-arrow-down"/></div>)
            sortElements.push(<div className={upArrowClass} onClick={this.onSortRequested.bind(this, 'asc')}><i className="fa fa-long-arrow-up"/></div>)
            sortElements.push(<div className={removeArrowClass} onClick={this.onSortRequested.bind(this, '')}><i className="fa fa-times"/></div>)
        }
        let menuButton = null;
        if (this.props.enableMenu){
            menuButton = <div ref="menuButton" className="customHeaderMenuButton" onClick={this.onMenuClick.bind(this)}><i className={"fa " + this.props.menuIcon}/></div>
        }
        return <div>
            {menuButton}
            <div className="customHeaderLabel">{this.props.displayName}</div>
            {sortElements}
        </div>
    }
    onSortRequested (order, event) {
        this.props.setSort (order, event.shiftKey);
    };
    onSortChanged (){
        if (this.props.column.isSortAscending()){
            this.setState({
                sorted: 'asc'
            })
        } else if (this.props.column.isSortDescending()){
            this.setState({
                sorted: 'desc'
            })
        } else {
            this.setState({
                sorted: ''
            })
        }
    };
    onMenuClick (){
        this.props.showColumnMenu (this.refs.menuButton);
    };
 }
 // 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.
 MyReactHeaderComponent.propTypes = {
    params: React.PropTypes.object
 };
--- a/src-standard/MyReactHeaderGroupComponent.jsx
+++ b/src-standard/MyReactHeaderGroupComponent.jsx
@@ -0,0 +1,41 @@
 import React from 'react';
 // Header component to be used as default for all the columns.
 export default class MyReactHeaderGroupComponent extends React.Component {
    constructor(props) {
        super(props);
        this.props.columnGroup.getOriginalColumnGroup().addEventListener('expandedChanged', this.onExpandChanged.bind(this));
        this.state = {
            expanded:null
        }
        this.onExpandChanged();
    }
    render() {
        let arrowClassName = "customExpandButton " + (this.state.expanded ?  " expanded": " collapsed");
        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>
    }
    expandOrCollapse (){
        this.props.setExpanded(!this.state.expanded);
    };
    onExpandChanged (){
        this.setState({
            expanded: this.props.columnGroup.getOriginalColumnGroup().isExpanded()
        })
    }
 }
 // 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.
 MyReactHeaderGroupComponent.propTypes = {
    params: React.PropTypes.object
 };
--- a/src-standard/myApp.jsx
+++ b/src-standard/myApp.jsx
@@ -3,6 +3,7 @@ import {AgGridReact} from "ag-grid-react";
 import RowDataFactory from "./RowDataFactory";
 import ColDefFactory from "./ColDefFactory.jsx";
 import MyReactDateComponent from "./MyReactDateComponent.jsx";
 import MyReactHeaderComponent from "./MyReactHeaderComponent.jsx";
 import "./myApp.css";
 import "ag-grid-enterprise";
@@ -44,6 +45,12 @@ export default class MyApp extends React.Component {
            onModelUpdated: function () {
                console.log('event onModelUpdated received');
            },
            defaultColDef : {
                headerComponentFramework : MyReactHeaderComponent,
                headerComponentParams : {
                    menuIcon: 'fa-bars'
                }
            },
            // this is a simple property
            rowBuffer: 10 // no need to set this, the default is fine for almost all scenarios
        };
@@ -203,7 +210,7 @@ export default class MyApp extends React.Component {
            );
        }
-        return <div style={{width: '800px'}}>
+        return <div style={{width: '1024px'}}>
            <div style={{padding: '4px'}}>
                {topHeaderTemplate}
                {bottomHeaderTemplate}
Author	SHA1	Message	Date
Alberto	05a7371467	8.1.0	2017-02-20 12:49:05 +00:00
Alberto	4ea0b7f8b2	Merge branch '8.0.0'	2017-02-09 15:48:33 +00:00
Alberto	5904f47d55	8.0.0	2017-02-09 14:14:07 +00:00
Alberto	25b416b71d	Getting ready for releasing 8.0.0	2017-02-09 13:59:26 +00:00
Alberto	abb7828921	Getting ready for releasing 8.0.0	2017-02-09 13:58:19 +00:00
Alberto	ad5fd2d1ce	ag-49 Ng2 Header component	2017-02-07 10:00:52 +00:00
Alberto	6d686f1c02	ag-49 Custom Group Header example completed	2017-02-03 11:16:17 +00:00
Alberto	6376a24e3a	ag-49 Custom Header example completed	2017-02-03 10:14:20 +00:00