Skip to content

Instantly share code, notes, and snippets.

@NMinhNguyen
Last active February 8, 2018 09:33
Show Gist options
  • Save NMinhNguyen/47a41d1e3454ad9e5bf522a2f6eb038c to your computer and use it in GitHub Desktop.
Save NMinhNguyen/47a41d1e3454ad9e5bf522a2f6eb038c to your computer and use it in GitHub Desktop.
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-dom'), require('ag-grid'), require('prop-types'), require('react-dom-factories')) :
typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-dom', 'ag-grid', 'prop-types', 'react-dom-factories'], factory) :
(factory((global.AgGridReact = {}),global.React,global.ReactDOM,global.agGrid,global.PropTypes,global.ReactDOMFactories));
}(this, (function (exports,React,ReactDOM,AgGrid,PropTypes,DOM) { 'use strict';
function __extends(d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
function __metadata(k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
}
var AgReactComponent = (function () {
function AgReactComponent(reactComponent, parentComponent) {
this.reactComponent = reactComponent;
this.parentComponent = parentComponent;
}
AgReactComponent.prototype.getFrameworkComponentInstance = function () {
return this.componentRef;
};
AgReactComponent.prototype.init = function (params) {
var _this = this;
return new AgGrid.Promise(function (resolve) {
_this.eParentElement = document.createElement('div');
AgGrid.Utils.addCssClass(_this.eParentElement, 'ag-react-container');
// so user can have access to the react container,
// to add css class or style
params.reactContainer = _this.eParentElement;
var self = _this;
var ReactComponent = React.createElement(_this.reactComponent, params);
if (!_this.parentComponent) {
// MUST be a function, not an arrow function
ReactDOM.render(ReactComponent, _this.eParentElement, function () {
self.componentRef = this;
resolve(null);
});
}
else {
// MUST be a function, not an arrow function
ReactDOM.unstable_renderSubtreeIntoContainer(_this.parentComponent, ReactComponent, _this.eParentElement, function () {
self.componentRef = this;
resolve(null);
});
}
});
};
AgReactComponent.prototype.getGui = function () {
return this.eParentElement;
};
AgReactComponent.prototype.destroy = function () {
ReactDOM.unmountComponentAtNode(this.eParentElement);
};
return AgReactComponent;
}());
var ReactFrameworkComponentWrapper = (function (_super) {
__extends(ReactFrameworkComponentWrapper, _super);
function ReactFrameworkComponentWrapper() {
_super.apply(this, arguments);
}
ReactFrameworkComponentWrapper.prototype.createWrapper = function (ReactComponent) {
var _self = this;
var DynamicAgReactComponent = (function (_super) {
__extends(DynamicAgReactComponent, _super);
function DynamicAgReactComponent() {
_super.call(this, ReactComponent, _self.agGridReact);
}
DynamicAgReactComponent.prototype.init = function (params) {
return _super.prototype.init.call(this, params);
};
DynamicAgReactComponent.prototype.hasMethod = function (name) {
var frameworkComponentInstance = wrapper.getFrameworkComponentInstance();
if (frameworkComponentInstance == null) {
return true;
}
return frameworkComponentInstance[name] != null;
};
DynamicAgReactComponent.prototype.callMethod = function (name, args) {
var _this = this;
var frameworkComponentInstance = this.getFrameworkComponentInstance();
if (frameworkComponentInstance == null) {
setTimeout(function () { return _this.callMethod(name, args); }, 100);
}
else {
var method = wrapper.getFrameworkComponentInstance()[name];
if (method == null)
return null;
return method.apply(frameworkComponentInstance, args);
}
};
DynamicAgReactComponent.prototype.addMethod = function (name, callback) {
wrapper[name] = callback;
};
return DynamicAgReactComponent;
}(AgReactComponent));
var wrapper = new DynamicAgReactComponent();
return wrapper;
};
__decorate([
AgGrid.Autowired('agGridReact'),
__metadata('design:type', (typeof (_a = typeof AgGridReact !== 'undefined' && AgGridReact) === 'function' && _a) || Object)
], ReactFrameworkComponentWrapper.prototype, "agGridReact", void 0);
ReactFrameworkComponentWrapper = __decorate([
AgGrid.Bean('frameworkComponentWrapper'),
__metadata('design:paramtypes', [])
], ReactFrameworkComponentWrapper);
return ReactFrameworkComponentWrapper;
var _a;
}(AgGrid.BaseComponentWrapper));
var AgGridColumn = (function (_super) {
__extends(AgGridColumn, _super);
function AgGridColumn(props, state) {
_super.call(this, props, state);
this.props = props;
this.state = state;
}
AgGridColumn.prototype.render = function () {
return null;
};
AgGridColumn.mapChildColumnDefs = function (columnProps) {
return React.Children.map(columnProps.children, function (child) {
return AgGridColumn.toColDef(child.props);
});
};
AgGridColumn.toColDef = function (columnProps) {
var colDef = AgGridColumn.createColDefFromGridColumn(columnProps);
if (AgGridColumn.hasChildColumns(columnProps)) {
colDef["children"] = AgGridColumn.getChildColDefs(columnProps.children);
}
return colDef;
};
AgGridColumn.hasChildColumns = function (columnProps) {
return React.Children.count(columnProps.children) > 0;
};
AgGridColumn.getChildColDefs = function (columnChildren) {
return React.Children.map(columnChildren, function (child) {
return AgGridColumn.createColDefFromGridColumn(child.props);
});
};
AgGridColumn.createColDefFromGridColumn = function (columnProps) {
var colDef = {};
AgGridColumn.assign(colDef, columnProps);
delete colDef.children;
return colDef;
};
AgGridColumn.assign = function (colDef, from) {
// effectively Object.assign - here for IE compatibility
return [from].reduce(function (r, o) {
Object.keys(o).forEach(function (k) {
r[k] = o[k];
});
return r;
}, colDef);
};
return AgGridColumn;
}(React.Component));
addProperties(AgGrid.ColDefUtil.BOOLEAN_PROPERTIES, PropTypes.bool);
addProperties(AgGrid.ColDefUtil.STRING_PROPERTIES, PropTypes.string);
addProperties(AgGrid.ColDefUtil.OBJECT_PROPERTIES, PropTypes.object);
addProperties(AgGrid.ColDefUtil.ARRAY_PROPERTIES, PropTypes.array);
addProperties(AgGrid.ColDefUtil.NUMBER_PROPERTIES, PropTypes.number);
addProperties(AgGrid.ColDefUtil.FUNCTION_PROPERTIES, PropTypes.func);
function addProperties(listOfProps, propType) {
listOfProps.forEach(function (propKey) {
AgGridColumn[propKey] = propType;
});
}
var AgGridReact = (function (_super) {
__extends(AgGridReact, _super);
function AgGridReact(props, state) {
_super.call(this, props, state);
this.props = props;
this.state = state;
}
AgGridReact.prototype.render = function () {
var _this = this;
return DOM.div({
style: this.createStyleForDiv(),
ref: function (e) {
_this.eGridDiv = e;
}
});
};
AgGridReact.prototype.createStyleForDiv = function () {
var style = { height: '100%' };
// allow user to override styles
var containerStyle = this.props.containerStyle;
if (containerStyle) {
Object.keys(containerStyle).forEach(function (key) {
style[key] = containerStyle[key];
});
}
return style;
};
AgGridReact.prototype.componentDidMount = function () {
var gridParams = {
seedBeanInstances: {
agGridReact: this
}
};
var gridOptions = this.props.gridOptions || {};
if (AgGridColumn.hasChildColumns(this.props)) {
gridOptions.columnDefs = AgGridColumn.mapChildColumnDefs(this.props);
}
this.gridOptions = AgGrid.ComponentUtil.copyAttributesToGridOptions(gridOptions, this.props);
AgGrid.Grid.setFrameworkBeans([ReactFrameworkComponentWrapper]);
// don't need the return value
new AgGrid.Grid(this.eGridDiv, this.gridOptions, gridParams);
this.api = this.gridOptions.api;
this.columnApi = this.gridOptions.columnApi;
};
AgGridReact.prototype.shouldComponentUpdate = function () {
// we want full control of the dom, as ag-Grid doesn't use React internally,
// so for performance reasons we tell React we don't need render called after
// property changes.
return false;
};
AgGridReact.prototype.componentWillReceiveProps = function (nextProps) {
var _this = this;
var debugLogging = !!nextProps.debug;
// keeping consistent with web components, put changing
// values in currentValue and previousValue pairs and
// not include items that have not changed.
var changes = {};
AgGrid.ComponentUtil.ALL_PROPERTIES.forEach(function (propKey) {
if (!_this.areEquivalent(_this.props[propKey], nextProps[propKey])) {
if (debugLogging) {
console.log("agGridReact: [" + propKey + "] property changed");
}
changes[propKey] = {
previousValue: _this.props[propKey],
currentValue: nextProps[propKey]
};
}
});
AgGrid.ComponentUtil.getEventCallbacks().forEach(function (funcName) {
if (_this.props[funcName] !== nextProps[funcName]) {
if (debugLogging) {
console.log("agGridReact: [" + funcName + "] event callback changed");
}
changes[funcName] = {
previousValue: _this.props[funcName],
currentValue: nextProps[funcName]
};
}
});
AgGrid.ComponentUtil.processOnChange(changes, this.gridOptions, this.api, this.columnApi);
};
AgGridReact.prototype.componentWillUnmount = function () {
if (this.api) {
this.api.destroy();
}
};
/*
* deeper object comparison - taken from https://stackoverflow.com/questions/1068834/object-comparison-in-javascript
*/
AgGridReact.unwrapStringOrNumber = function (obj) {
return (obj instanceof Number || obj instanceof String
? obj.valueOf()
: obj);
};
// sigh, here for ie compatibility
AgGridReact.prototype.copy = function (value) {
if (!value) {
return value;
}
if (Array.isArray(value)) {
return value.slice();
}
// for anything without keys (boolean, string etc).
// Object.keys - chrome will swallow them, IE will fail (correctly, imho)
if (typeof value !== "object") {
return value;
}
return [{}, value].reduce(function (r, o) {
Object.keys(o).forEach(function (k) {
r[k] = o[k];
});
return r;
}, {});
};
AgGridReact.prototype.areEquivalent = function (a, b) {
return AgGridReact.areEquivalent(this.copy(a), this.copy(b));
};
AgGridReact.areEquivalent = function (a, b) {
a = AgGridReact.unwrapStringOrNumber(a);
b = AgGridReact.unwrapStringOrNumber(b);
if (a === b)
return true; //e.g. a and b both null
if (a === null || b === null || typeof (a) !== typeof (b))
return false;
if (a instanceof Date) {
return b instanceof Date && a.valueOf() === b.valueOf();
}
if (typeof a === "function") {
return a.toString() === b.toString();
}
if (typeof (a) !== "object") {
return a == b; //for boolean, number, string, function, xml
}
var newA = (a.areEquivalent_Eq_91_2_34 === undefined), newB = (b.areEquivalent_Eq_91_2_34 === undefined);
try {
var prop = void 0;
if (newA) {
a.areEquivalent_Eq_91_2_34 = [];
}
else if (a.areEquivalent_Eq_91_2_34.some(function (other) {
return other === b;
}))
return true;
if (newB) {
b.areEquivalent_Eq_91_2_34 = [];
}
else if (b.areEquivalent_Eq_91_2_34.some(function (other) { return other === a; })) {
return true;
}
a.areEquivalent_Eq_91_2_34.push(b);
b.areEquivalent_Eq_91_2_34.push(a);
var tmp = {};
for (prop in a)
if (prop != "areEquivalent_Eq_91_2_34") {
tmp[prop] = null;
}
for (prop in b)
if (prop != "areEquivalent_Eq_91_2_34") {
tmp[prop] = null;
}
for (prop in tmp) {
if (!this.areEquivalent(a[prop], b[prop])) {
return false;
}
}
return true;
}
finally {
if (newA)
delete a.areEquivalent_Eq_91_2_34;
if (newB)
delete b.areEquivalent_Eq_91_2_34;
}
};
return AgGridReact;
}(React.Component));
AgGridReact.propTypes = {
gridOptions: PropTypes.object,
};
addProperties$1(AgGrid.ComponentUtil.getEventCallbacks(), PropTypes.func);
addProperties$1(AgGrid.ComponentUtil.BOOLEAN_PROPERTIES, PropTypes.bool);
addProperties$1(AgGrid.ComponentUtil.STRING_PROPERTIES, PropTypes.string);
addProperties$1(AgGrid.ComponentUtil.OBJECT_PROPERTIES, PropTypes.object);
addProperties$1(AgGrid.ComponentUtil.ARRAY_PROPERTIES, PropTypes.array);
addProperties$1(AgGrid.ComponentUtil.NUMBER_PROPERTIES, PropTypes.number);
addProperties$1(AgGrid.ComponentUtil.FUNCTION_PROPERTIES, PropTypes.func);
function addProperties$1(listOfProps, propType) {
listOfProps.forEach(function (propKey) {
AgGridReact[propKey] = propType;
});
}
exports.AgGridReact = AgGridReact;
exports.AgGridColumn = AgGridColumn;
Object.defineProperty(exports, '__esModule', { value: true });
})));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment