react-data-grid
Version:
Data grid for React
1,758 lines (1,419 loc) • 164 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("react"));
else if(typeof define === 'function' && define.amd)
define(["react"], factory);
else if(typeof exports === 'object')
exports["ReactDataGrid"] = factory(require("react"));
else
root["ReactDataGrid"] = factory(root["React"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_1__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
module.exports = __webpack_require__(43);
module.exports.Editors = __webpack_require__(68);
module.exports.Formatters = __webpack_require__(70);
module.exports.Toolbar = __webpack_require__(71);
module.exports.Row = __webpack_require__(11);
/***/ },
/* 1 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
/***/ },
/* 2 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var _classCallCheck = __webpack_require__(17)['default'];
var React = __webpack_require__(1);
var ExcelColumn = function ExcelColumn() {
_classCallCheck(this, ExcelColumn);
};
var ExcelColumnShape = {
name: React.PropTypes.string.isRequired,
key: React.PropTypes.string.isRequired,
width: React.PropTypes.number.isRequired
};
module.exports = ExcelColumnShape;
/***/ },
/* 3 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
var _Object$assign = __webpack_require__(14)["default"];
exports["default"] = _Object$assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
exports.__esModule = true;
/***/ },
/* 4 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
Copyright (c) 2015 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/
function classNames() {
var classes = '';
var arg;
for (var i = 0; i < arguments.length; i++) {
arg = arguments[i];
if (!arg) {
continue;
}
if ('string' === typeof arg || 'number' === typeof arg) {
classes += ' ' + arg;
} else if (Object.prototype.toString.call(arg) === '[object Array]') {
classes += ' ' + classNames.apply(null, arg);
} else if ('object' === typeof arg) {
for (var key in arg) {
if (!arg.hasOwnProperty(key) || !arg[key]) {
continue;
}
classes += ' ' + key;
}
}
}
return classes.substr(1);
}
// safely export classNames for node / browserify
if (typeof module !== 'undefined' && module.exports) {
module.exports = classNames;
}
// safely export classNames for RequireJS
if (true) {
!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function() {
return classNames;
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
}
/***/ },
/* 5 */
/***/ function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(process) {/**
* Copyright 2013-2014, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @typechecks
* @providesModule cloneWithProps
*/
"use strict";
var ReactElement = __webpack_require__(60);
var ReactPropTransferer = __webpack_require__(61);
var keyOf = __webpack_require__(64);
var warning = __webpack_require__(15);
var CHILDREN_PROP = keyOf({children: null});
/**
* Sometimes you want to change the props of a child passed to you. Usually
* this is to add a CSS class.
*
* @param {object} child child component you'd like to clone
* @param {object} props props you'd like to modify. They will be merged
* as if you used `transferPropsTo()`.
* @return {object} a clone of child with props merged in.
*/
function cloneWithProps(child, props) {
if ("production" !== process.env.NODE_ENV) {
("production" !== process.env.NODE_ENV ? warning(
!child.ref,
'You are calling cloneWithProps() on a child with a ref. This is ' +
'dangerous because you\'re creating a new child which will not be ' +
'added as a ref to its parent.'
) : null);
}
var newProps = ReactPropTransferer.mergeProps(props, child.props);
// Use `child.props.children` if it is provided.
if (!newProps.hasOwnProperty(CHILDREN_PROP) &&
child.props.hasOwnProperty(CHILDREN_PROP)) {
newProps.children = child.props.children;
}
// The current API doesn't retain _owner and _context, which is why this
// doesn't use ReactElement.cloneAndReplaceProps.
return ReactElement.createElement(child.type, newProps);
}
module.exports = cloneWithProps;
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(8)))
/***/ },
/* 6 */
/***/ function(module, exports) {
'use strict';
module.exports = {
getColumn: function getColumn(columns, idx) {
if (Array.isArray(columns)) {
return columns[idx];
} else if (typeof Immutable !== 'undefined') {
return columns.get(idx);
}
},
spliceColumn: function spliceColumn(metrics, idx, column) {
if (Array.isArray(metrics.columns)) {
metrics.columns.splice(idx, 1, column);
} else if (typeof Immutable !== 'undefined') {
metrics.columns = metrics.columns.splice(idx, 1, column);
}
return metrics;
},
getSize: function getSize(columns) {
if (Array.isArray(columns)) {
return columns.length;
} else if (typeof Immutable !== 'undefined') {
return columns.size;
}
}
};
/***/ },
/* 7 */
/***/ function(module, exports) {
/**
* Copyright 2013-2014, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule emptyFunction
*/
function makeEmptyFunction(arg) {
return function() {
return arg;
};
}
/**
* This function accepts and discards inputs; it has no side effects. This is
* primarily useful idiomatically for overridable function endpoints which
* always need to be callable, since JS lacks a null-call idiom ala Cocoa.
*/
function emptyFunction() {}
emptyFunction.thatReturns = makeEmptyFunction;
emptyFunction.thatReturnsFalse = makeEmptyFunction(false);
emptyFunction.thatReturnsTrue = makeEmptyFunction(true);
emptyFunction.thatReturnsNull = makeEmptyFunction(null);
emptyFunction.thatReturnsThis = function() { return this; };
emptyFunction.thatReturnsArgument = function(arg) { return arg; };
module.exports = emptyFunction;
/***/ },
/* 8 */
/***/ function(module, exports) {
// shim for using process in browser
var process = module.exports = {};
var queue = [];
var draining = false;
var currentQueue;
var queueIndex = -1;
function cleanUpNextTick() {
draining = false;
if (currentQueue.length) {
queue = currentQueue.concat(queue);
} else {
queueIndex = -1;
}
if (queue.length) {
drainQueue();
}
}
function drainQueue() {
if (draining) {
return;
}
var timeout = setTimeout(cleanUpNextTick);
draining = true;
var len = queue.length;
while(len) {
currentQueue = queue;
queue = [];
while (++queueIndex < len) {
if (currentQueue) {
currentQueue[queueIndex].run();
}
}
queueIndex = -1;
len = queue.length;
}
currentQueue = null;
draining = false;
clearTimeout(timeout);
}
process.nextTick = function (fun) {
var args = new Array(arguments.length - 1);
if (arguments.length > 1) {
for (var i = 1; i < arguments.length; i++) {
args[i - 1] = arguments[i];
}
}
queue.push(new Item(fun, args));
if (queue.length === 1 && !draining) {
setTimeout(drainQueue, 0);
}
};
// v8 likes predictible objects
function Item(fun, array) {
this.fun = fun;
this.array = array;
}
Item.prototype.run = function () {
this.fun.apply(null, this.array);
};
process.title = 'browser';
process.browser = true;
process.env = {};
process.argv = [];
process.version = ''; // empty string to avoid regexp issues
process.versions = {};
function noop() {}
process.on = noop;
process.addListener = noop;
process.once = noop;
process.off = noop;
process.removeListener = noop;
process.removeAllListeners = noop;
process.emit = noop;
process.binding = function (name) {
throw new Error('process.binding is not supported');
};
process.cwd = function () { return '/' };
process.chdir = function (dir) {
throw new Error('process.chdir is not supported');
};
process.umask = function() { return 0; };
/***/ },
/* 9 */
/***/ function(module, exports, __webpack_require__) {
/* TODO mixin and invarient splat */
/**
* @jsx React.DOM
*/
'use strict';
var React = __webpack_require__(1);
var emptyFunction = __webpack_require__(7);
var shallowCloneObject = __webpack_require__(13);
var contextTypes = {
metricsComputator: React.PropTypes.object
};
var MetricsComputatorMixin = {
childContextTypes: contextTypes,
getChildContext: function getChildContext() {
return { metricsComputator: this };
},
getMetricImpl: function getMetricImpl(name) {
return this._DOMMetrics.metrics[name].value;
},
registerMetricsImpl: function registerMetricsImpl(component, metrics) {
var getters = {};
var s = this._DOMMetrics;
for (var name in metrics) {
if (s.metrics[name] !== undefined) {
throw new Error('DOM metric ' + name + ' is already defined');
}
s.metrics[name] = { component: component, computator: metrics[name].bind(component) };
getters[name] = this.getMetricImpl.bind(null, name);
}
if (s.components.indexOf(component) === -1) {
s.components.push(component);
}
return getters;
},
unregisterMetricsFor: function unregisterMetricsFor(component) {
var s = this._DOMMetrics;
var idx = s.components.indexOf(component);
if (idx > -1) {
s.components.splice(idx, 1);
var name;
var metricsToDelete = {};
for (name in s.metrics) {
if (s.metrics[name].component === component) {
metricsToDelete[name] = true;
}
}
for (name in metricsToDelete) {
delete s.metrics[name];
}
}
},
updateMetrics: function updateMetrics() {
var s = this._DOMMetrics;
var needUpdate = false;
for (var name in s.metrics) {
var newMetric = s.metrics[name].computator();
if (newMetric !== s.metrics[name].value) {
needUpdate = true;
}
s.metrics[name].value = newMetric;
}
if (needUpdate) {
for (var i = 0, len = s.components.length; i < len; i++) {
if (s.components[i].metricsUpdated) {
s.components[i].metricsUpdated();
}
}
}
},
componentWillMount: function componentWillMount() {
this._DOMMetrics = {
metrics: {},
components: []
};
},
componentDidMount: function componentDidMount() {
if (window.addEventListener) {
window.addEventListener('resize', this.updateMetrics);
} else {
window.attachEvent('resize', this.updateMetrics);
}
this.updateMetrics();
},
componentWillUnmount: function componentWillUnmount() {
window.removeEventListener('resize', this.updateMetrics);
}
};
var MetricsMixin = {
contextTypes: contextTypes,
componentWillMount: function componentWillMount() {
if (this.DOMMetrics) {
this._DOMMetricsDefs = shallowCloneObject(this.DOMMetrics);
this.DOMMetrics = {};
for (var name in this._DOMMetricsDefs) {
this.DOMMetrics[name] = emptyFunction;
}
}
},
componentDidMount: function componentDidMount() {
if (this.DOMMetrics) {
this.DOMMetrics = this.registerMetrics(this._DOMMetricsDefs);
}
},
componentWillUnmount: function componentWillUnmount() {
if (!this.registerMetricsImpl) {
return this.context.metricsComputator.unregisterMetricsFor(this);
}
if (this.hasOwnProperty('DOMMetrics')) {
delete this.DOMMetrics;
}
},
registerMetrics: function registerMetrics(metrics) {
if (this.registerMetricsImpl) {
return this.registerMetricsImpl(this, metrics);
} else {
return this.context.metricsComputator.registerMetricsImpl(this, metrics);
}
},
getMetric: function getMetric(name) {
if (this.getMetricImpl) {
return this.getMetricImpl(name);
} else {
return this.context.metricsComputator.getMetricImpl(name);
}
}
};
module.exports = {
MetricsComputatorMixin: MetricsComputatorMixin,
MetricsMixin: MetricsMixin
};
/***/ },
/* 10 */
/***/ function(module, exports, __webpack_require__) {
/* TODO: mixins */
/**
* @jsx React.DOM
*/
'use strict';
var React = __webpack_require__(1);
var KeyboardHandlerMixin = {
onKeyDown: function onKeyDown(e) {
if (this.isCtrlKeyHeldDown(e)) {
this.checkAndCall('onPressKeyWithCtrl', e);
} else if (this.isKeyExplicitlyHandled(e.key)) {
//break up individual keyPress events to have their own specific callbacks
//this allows multiple mixins to listen to onKeyDown events and somewhat reduces methodName clashing
var callBack = 'onPress' + e.key;
this.checkAndCall(callBack, e);
} else if (this.isKeyPrintable(e.keyCode)) {
this.checkAndCall('onPressChar', e);
}
},
//taken from http://stackoverflow.com/questions/12467240/determine-if-javascript-e-keycode-is-a-printable-non-control-character
isKeyPrintable: function isKeyPrintable(keycode) {
var valid = keycode > 47 && keycode < 58 || // number keys
keycode == 32 || keycode == 13 || // spacebar & return key(s) (if you want to allow carriage returns)
keycode > 64 && keycode < 91 || // letter keys
keycode > 95 && keycode < 112 || // numpad keys
keycode > 185 && keycode < 193 || // ;=,-./` (in order)
keycode > 218 && keycode < 223; // [\]' (in order)
return valid;
},
isKeyExplicitlyHandled: function isKeyExplicitlyHandled(key) {
return typeof this['onPress' + key] === 'function';
},
isCtrlKeyHeldDown: function isCtrlKeyHeldDown(e) {
return e.ctrlKey === true && e.key !== "Control";
},
checkAndCall: function checkAndCall(methodName, args) {
if (typeof this[methodName] === 'function') {
this[methodName](args);
}
}
};
module.exports = KeyboardHandlerMixin;
/***/ },
/* 11 */
/***/ function(module, exports, __webpack_require__) {
/**
* @jsx React.DOM
*/
'use strict';
var _extends = __webpack_require__(3)['default'];
var React = __webpack_require__(1);
var joinClasses = __webpack_require__(4);
var Cell = __webpack_require__(22);
var cloneWithProps = __webpack_require__(5);
var ColumnMetrics = __webpack_require__(12);
var ColumnUtilsMixin = __webpack_require__(6);
var Row = React.createClass({
displayName: 'Row',
propTypes: {
height: React.PropTypes.number.isRequired,
columns: React.PropTypes.oneOfType([React.PropTypes.object, React.PropTypes.array]).isRequired,
row: React.PropTypes.object.isRequired,
cellRenderer: React.PropTypes.func,
isSelected: React.PropTypes.bool,
idx: React.PropTypes.number.isRequired,
expandedRows: React.PropTypes.arrayOf(React.PropTypes.object)
},
mixins: [ColumnUtilsMixin],
render: function render() {
var className = joinClasses('react-grid-Row', "react-grid-Row--${this.props.idx % 2 === 0 ? 'even' : 'odd'}");
var style = {
height: this.getRowHeight(this.props),
overflow: 'hidden'
};
var cells = this.getCells();
return React.createElement(
'div',
_extends({}, this.props, { className: className, style: style, onDragEnter: this.handleDragEnter }),
React.isValidElement(this.props.row) ? this.props.row : cells
);
},
getCells: function getCells() {
var _this = this;
var cells = [];
var lockedCells = [];
var selectedColumn = this.getSelectedColumn();
this.props.columns.forEach(function (column, i) {
var CellRenderer = _this.props.cellRenderer;
var cell = React.createElement(CellRenderer, {
ref: i,
key: i,
idx: i,
rowIdx: _this.props.idx,
value: _this.getCellValue(column.key || i),
column: column,
height: _this.getRowHeight(),
formatter: column.formatter,
cellMetaData: _this.props.cellMetaData,
rowData: _this.props.row,
selectedColumn: selectedColumn,
isRowSelected: _this.props.isSelected });
if (column.locked) {
lockedCells.push(cell);
} else {
cells.push(cell);
}
});
return cells.concat(lockedCells);
},
getRowHeight: function getRowHeight() {
var rows = this.props.expandedRows || null;
if (rows && this.props.key) {
var row = rows[this.props.key] || null;
if (row) {
return row.height;
}
}
return this.props.height;
},
getCellValue: function getCellValue(key) {
var val;
if (key === 'select-row') {
return this.props.isSelected;
} else if (typeof this.props.row.get === 'function') {
val = this.props.row.get(key);
} else {
val = this.props.row[key];
}
return val;
},
getRowData: function getRowData() {
return this.props.row.toJSON ? this.props.row.toJSON() : this.props.row;
},
getDefaultProps: function getDefaultProps() {
return {
cellRenderer: Cell,
isSelected: false,
height: 35
};
},
setScrollLeft: function setScrollLeft(scrollLeft) {
var _this2 = this;
this.props.columns.forEach(function (column, i) {
if (column.locked) {
if (!_this2.refs[i]) return;
_this2.refs[i].setScrollLeft(scrollLeft);
}
});
},
doesRowContainSelectedCell: function doesRowContainSelectedCell(props) {
var selected = props.cellMetaData.selected;
if (selected && selected.rowIdx === props.idx) {
return true;
} else {
return false;
}
},
willRowBeDraggedOver: function willRowBeDraggedOver(props) {
var dragged = props.cellMetaData.dragged;
return dragged != null && (dragged.rowIdx >= 0 || dragged.complete === true);
},
hasRowBeenCopied: function hasRowBeenCopied() {
var copied = this.props.cellMetaData.copied;
return copied != null && copied.rowIdx === this.props.idx;
},
shouldComponentUpdate: function shouldComponentUpdate(nextProps, nextState) {
return !ColumnMetrics.sameColumns(this.props.columns, nextProps.columns, ColumnMetrics.sameColumn) || this.doesRowContainSelectedCell(this.props) || this.doesRowContainSelectedCell(nextProps) || this.willRowBeDraggedOver(nextProps) || nextProps.row !== this.props.row || this.hasRowBeenCopied() || this.props.isSelected !== nextProps.isSelected || nextProps.height !== this.props.height;
},
handleDragEnter: function handleDragEnter() {
var handleDragEnterRow = this.props.cellMetaData.handleDragEnterRow;
if (handleDragEnterRow) {
handleDragEnterRow(this.props.idx);
}
},
getSelectedColumn: function getSelectedColumn() {
var selected = this.props.cellMetaData.selected;
if (selected && selected.idx) {
return this.getColumn(this.props.columns, selected.idx);
}
}
});
module.exports = Row;
/***/ },
/* 12 */
/***/ function(module, exports, __webpack_require__) {
/**
* @jsx React.DOM
*/
"use strict";
var _Object$assign = __webpack_require__(14)['default'];
var shallowCloneObject = __webpack_require__(13);
var isValidElement = __webpack_require__(1).isValidElement;
var sameColumn = __webpack_require__(26);
var ColumnUtils = __webpack_require__(6);
/**
* Update column metrics calculation.
*
* @param {ColumnMetricsType} metrics
*/
function recalculate(metrics) {
// compute width for columns which specify width
var columns = setColumnWidths(metrics.columns, metrics.totalWidth);
var unallocatedWidth = columns.filter(function (c) {
return c.width;
}).reduce(function (w, column) {
return w - column.width;
}, metrics.totalWidth);
var width = columns.filter(function (c) {
return c.width;
}).reduce(function (w, column) {
return w + column.width;
}, 0);
// compute width for columns which doesn't specify width
columns = setDefferedColumnWidths(columns, unallocatedWidth, metrics.minColumnWidth);
// compute left offset
columns = setColumnOffsets(columns);
return {
columns: columns,
width: width,
totalWidth: metrics.totalWidth,
minColumnWidth: metrics.minColumnWidth
};
}
function setColumnOffsets(columns) {
var left = 0;
return columns.map(function (column) {
column.left = left;
left += column.width;
return column;
});
}
function setColumnWidths(columns, totalWidth) {
return columns.map(function (column) {
var colInfo = _Object$assign({}, column);
if (column.width) {
if (/^([0-9]+)%$/.exec(column.width.toString())) {
colInfo.width = Math.floor(column.width / 100 * totalWidth);
}
}
return colInfo;
});
}
function setDefferedColumnWidths(columns, unallocatedWidth, minColumnWidth) {
var defferedColumns = columns.filter(function (c) {
return !c.width;
});
return columns.map(function (column, i, arr) {
if (!column.width) {
if (unallocatedWidth <= 0) {
column.width = minColumnWidth;
} else {
column.width = Math.floor(unallocatedWidth / ColumnUtils.getSize(defferedColumns));
}
}
return column;
});
}
/**
* Update column metrics calculation by resizing a column.
*
* @param {ColumnMetricsType} metrics
* @param {Column} column
* @param {number} width
*/
function resizeColumn(metrics, index, width) {
var column = ColumnUtils.getColumn(metrics.columns, index);
metrics = shallowCloneObject(metrics);
metrics.columns = metrics.columns.slice(0);
var updatedColumn = shallowCloneObject(column);
updatedColumn.width = Math.max(width, metrics.minColumnWidth);
metrics = ColumnUtils.spliceColumn(metrics, index, updatedColumn);
return recalculate(metrics);
}
function areColumnsImmutable(prevColumns, nextColumns) {
return typeof Immutable !== 'undefined' && prevColumns instanceof Immutable.List && nextColumns instanceof Immutable.List;
}
function compareEachColumn(prevColumns, nextColumns, sameColumn) {
var i, len, column;
var prevColumnsByKey = {};
var nextColumnsByKey = {};
if (ColumnUtils.getSize(prevColumns) !== ColumnUtils.getSize(nextColumns)) {
return false;
}
for (i = 0, len = ColumnUtils.getSize(prevColumns); i < len; i++) {
column = prevColumns[i];
prevColumnsByKey[column.key] = column;
}
for (i = 0, len = ColumnUtils.getSize(nextColumns); i < len; i++) {
column = nextColumns[i];
nextColumnsByKey[column.key] = column;
var prevColumn = prevColumnsByKey[column.key];
if (prevColumn === undefined || !sameColumn(prevColumn, column)) {
return false;
}
}
for (i = 0, len = ColumnUtils.getSize(prevColumns); i < len; i++) {
column = prevColumns[i];
var nextColumn = nextColumnsByKey[column.key];
if (nextColumn === undefined) {
return false;
}
}
return true;
}
function sameColumns(prevColumns, nextColumns, sameColumn) {
if (areColumnsImmutable(prevColumns, nextColumns)) {
return prevColumns === nextColumns;
} else {
return compareEachColumn(prevColumns, nextColumns, sameColumn);
}
}
module.exports = { recalculate: recalculate, resizeColumn: resizeColumn, sameColumn: sameColumn, sameColumns: sameColumns };
/***/ },
/* 13 */
/***/ function(module, exports) {
/**
* @jsx React.DOM
*/
'use strict';
function shallowCloneObject(obj) {
var result = {};
for (var k in obj) {
if (obj.hasOwnProperty(k)) {
result[k] = obj[k];
}
}
return result;
}
module.exports = shallowCloneObject;
/***/ },
/* 14 */
/***/ function(module, exports, __webpack_require__) {
module.exports = { "default": __webpack_require__(46), __esModule: true };
/***/ },
/* 15 */
/***/ function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(process) {/**
* Copyright 2014, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule warning
*/
"use strict";
var emptyFunction = __webpack_require__(7);
/**
* Similar to invariant but only logs a warning if the condition is not met.
* This can be used to log issues in development environments in critical
* paths. Removing the logging code for production environments will keep the
* same logic and follow the same code paths.
*/
var warning = emptyFunction;
if ("production" !== process.env.NODE_ENV) {
warning = function(condition, format ) {for (var args=[],$__0=2,$__1=arguments.length;$__0<$__1;$__0++) args.push(arguments[$__0]);
if (format === undefined) {
throw new Error(
'`warning(condition, format, ...args)` requires a warning ' +
'message argument'
);
}
if (!condition) {
var argIndex = 0;
console.warn('Warning: ' + format.replace(/%s/g, function() {return args[argIndex++];}));
}
};
}
module.exports = warning;
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(8)))
/***/ },
/* 16 */
/***/ function(module, exports) {
"use strict";
var isFunction = function isFunction(functionToCheck) {
var getType = {};
return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
};
module.exports = isFunction;
/***/ },
/* 17 */
/***/ function(module, exports) {
"use strict";
exports["default"] = function (instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
};
exports.__esModule = true;
/***/ },
/* 18 */
/***/ function(module, exports) {
var core = module.exports = {};
if(typeof __e == 'number')__e = core; // eslint-disable-line no-undef
/***/ },
/* 19 */
/***/ function(module, exports) {
'use strict';
function ToObject(val) {
if (val == null) {
throw new TypeError('Object.assign cannot be called with null or undefined');
}
return Object(val);
}
module.exports = Object.assign || function (target, source) {
var from;
var keys;
var to = ToObject(target);
for (var s = 1; s < arguments.length; s++) {
from = arguments[s];
keys = Object.keys(Object(from));
for (var i = 0; i < keys.length; i++) {
to[keys[i]] = from[keys[i]];
}
}
return to;
};
/***/ },
/* 20 */
/***/ function(module, exports) {
/**
* Copyright 2014, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule Object.assign
*/
// https://people.mozilla.org/~jorendorff/es6-draft.html#sec-object.assign
function assign(target, sources) {
if (target == null) {
throw new TypeError('Object.assign target cannot be null or undefined');
}
var to = Object(target);
var hasOwnProperty = Object.prototype.hasOwnProperty;
for (var nextIndex = 1; nextIndex < arguments.length; nextIndex++) {
var nextSource = arguments[nextIndex];
if (nextSource == null) {
continue;
}
var from = Object(nextSource);
// We don't currently support accessors nor proxies. Therefore this
// copy cannot throw. If we ever supported this then we must handle
// exceptions and side-effects. We don't support symbols so they won't
// be transferred.
for (var key in from) {
if (hasOwnProperty.call(from, key)) {
to[key] = from[key];
}
}
}
return to;
};
module.exports = assign;
/***/ },
/* 21 */
/***/ function(module, exports) {
/**
* Copyright 2013-2014, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule shallowEqual
*/
"use strict";
/**
* Performs equality by iterating through keys on an object and returning
* false when any key has values which are not strictly equal between
* objA and objB. Returns true when the values of all keys are strictly equal.
*
* @return {boolean}
*/
function shallowEqual(objA, objB) {
if (objA === objB) {
return true;
}
var key;
// Test for A's keys different from B.
for (key in objA) {
if (objA.hasOwnProperty(key) &&
(!objB.hasOwnProperty(key) || objA[key] !== objB[key])) {
return false;
}
}
// Test for B's keys missing from A.
for (key in objB) {
if (objB.hasOwnProperty(key) && !objA.hasOwnProperty(key)) {
return false;
}
}
return true;
}
module.exports = shallowEqual;
/***/ },
/* 22 */
/***/ function(module, exports, __webpack_require__) {
/**
* @jsx React.DOM
*/
'use strict';
var _extends = __webpack_require__(3)['default'];
var React = __webpack_require__(1);
var joinClasses = __webpack_require__(4);
var cloneWithProps = __webpack_require__(5);
var EditorContainer = __webpack_require__(42);
var ExcelColumn = __webpack_require__(2);
var isFunction = __webpack_require__(16);
var CellMetaDataShape = __webpack_require__(34);
var Cell = React.createClass({
displayName: 'Cell',
propTypes: {
rowIdx: React.PropTypes.number.isRequired,
idx: React.PropTypes.number.isRequired,
selected: React.PropTypes.shape({
idx: React.PropTypes.number.isRequired
}),
tabIndex: React.PropTypes.number,
ref: React.PropTypes.string,
column: React.PropTypes.shape(ExcelColumn).isRequired,
value: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number, React.PropTypes.object, React.PropTypes.bool]).isRequired,
isExpanded: React.PropTypes.bool,
cellMetaData: React.PropTypes.shape(CellMetaDataShape).isRequired,
handleDragStart: React.PropTypes.func,
className: React.PropTypes.string,
rowData: React.PropTypes.object.isRequired
},
getDefaultProps: function getDefaultProps() {
return {
tabIndex: -1,
ref: "cell",
isExpanded: false
};
},
getInitialState: function getInitialState() {
return { isRowChanging: false, isCellValueChanging: false };
},
componentDidMount: function componentDidMount() {
this.checkFocus();
},
componentDidUpdate: function componentDidUpdate(prevProps, prevState) {
this.checkFocus();
var dragged = this.props.cellMetaData.dragged;
if (dragged && dragged.complete === true) {
this.props.cellMetaData.handleTerminateDrag();
}
if (this.state.isRowChanging && this.props.selectedColumn != null) {
this.applyUpdateClass();
}
},
componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
this.setState({ isRowChanging: this.props.rowData !== nextProps.rowData, isCellValueChanging: this.props.value !== nextProps.value });
},
shouldComponentUpdate: function shouldComponentUpdate(nextProps, nextState) {
return this.props.column.width !== nextProps.column.width || this.props.column.left !== nextProps.column.left || this.props.rowData !== nextProps.rowData || this.props.height !== nextProps.height || this.props.rowIdx !== nextProps.rowIdx || this.isCellSelectionChanging(nextProps) || this.isDraggedCellChanging(nextProps) || this.isCopyCellChanging(nextProps) || this.props.isRowSelected !== nextProps.isRowSelected || this.isSelected();
},
getStyle: function getStyle() {
var style = {
position: 'absolute',
width: this.props.column.width,
height: this.props.height,
left: this.props.column.left
};
return style;
},
render: function render() {
var style = this.getStyle();
var className = this.getCellClass();
var cellContent = this.renderCellContent({
value: this.props.value,
column: this.props.column,
rowIdx: this.props.rowIdx,
isExpanded: this.props.isExpanded
});
return React.createElement(
'div',
_extends({}, this.props, { className: className, style: style, onClick: this.onCellClick, onDoubleClick: this.onCellDoubleClick }),
cellContent,
React.createElement('div', { className: 'drag-handle', draggable: 'true' })
);
},
renderCellContent: function renderCellContent(props) {
var CellContent;
var Formatter = this.getFormatter();
if (React.isValidElement(Formatter)) {
props.dependentValues = this.getFormatterDependencies();
CellContent = cloneWithProps(Formatter, props);
} else if (isFunction(Formatter)) {
CellContent = React.createElement(Formatter, { value: this.props.value, dependentValues: this.getFormatterDependencies() });
} else {
CellContent = React.createElement(SimpleCellFormatter, { value: this.props.value });
}
return React.createElement(
'div',
{ ref: 'cell',
className: 'react-grid-Cell__value' },
CellContent,
' ',
this.props.cellControls
);
},
isColumnSelected: function isColumnSelected() {
var meta = this.props.cellMetaData;
if (meta == null || meta.selected == null) {
return false;
}
return meta.selected && meta.selected.idx === this.props.idx;
},
isSelected: function isSelected() {
var meta = this.props.cellMetaData;
if (meta == null || meta.selected == null) {
return false;
}
return meta.selected && meta.selected.rowIdx === this.props.rowIdx && meta.selected.idx === this.props.idx;
},
isActive: function isActive() {
var meta = this.props.cellMetaData;
if (meta == null || meta.selected == null) {
return false;
}
return this.isSelected() && meta.selected.active === true;
},
isCellSelectionChanging: function isCellSelectionChanging(nextProps) {
var meta = this.props.cellMetaData;
if (meta == null || meta.selected == null) {
return false;
}
var nextSelected = nextProps.cellMetaData.selected;
if (meta.selected && nextSelected) {
return this.props.idx === nextSelected.idx || this.props.idx === meta.selected.idx;
} else {
return true;
}
},
getFormatter: function getFormatter() {
var col = this.props.column;
if (this.isActive()) {
return React.createElement(EditorContainer, { rowData: this.getRowData(), rowIdx: this.props.rowIdx, idx: this.props.idx, cellMetaData: this.props.cellMetaData, column: col, height: this.props.height });
} else {
return this.props.column.formatter;
}
},
getRowData: function getRowData() {
return this.props.rowData.toJSON ? this.props.rowData.toJSON() : this.props.rowData;
},
getFormatterDependencies: function getFormatterDependencies() {
//clone row data so editor cannot actually change this
var columnName = this.props.column.ItemId;
//convention based method to get corresponding Id or Name of any Name or Id property
if (typeof this.props.column.getRowMetaData === 'function') {
return this.props.column.getRowMetaData(this.getRowData(), this.props.column);
}
},
onCellClick: function onCellClick(e) {
var meta = this.props.cellMetaData;
if (meta != null && meta.onCellClick != null) {
meta.onCellClick({ rowIdx: this.props.rowIdx, idx: this.props.idx });
}
},
onCellDoubleClick: function onCellDoubleClick(e) {
var meta = this.props.cellMetaData;
if (meta != null && meta.onCellDoubleClick != null) {
meta.onCellDoubleClick({ rowIdx: this.props.rowIdx, idx: this.props.idx });
}
},
checkFocus: function checkFocus() {
if (this.isSelected() && !this.isActive()) {
this.getDOMNode().focus();
}
},
getCellClass: function getCellClass() {
var className = joinClasses(this.props.column.cellClass, 'react-grid-Cell', this.props.className, this.props.column.locked ? 'react-grid-Cell--locked' : null);
var extraClasses = joinClasses({
'selected': this.isSelected() && !this.isActive(),
'editing': this.isActive(),
'copied': this.isCopied(),
'active-drag-cell': this.isSelected() || this.isDraggedOver(),
'is-dragged-over-up': this.isDraggedOverUpwards(),
'is-dragged-over-down': this.isDraggedOverDownwards(),
'was-dragged-over': this.wasDraggedOver()
});
return joinClasses(className, extraClasses);
},
getUpdateCellClass: function getUpdateCellClass() {
return this.props.column.getUpdateCellClass ? this.props.column.getUpdateCellClass(this.props.selectedColumn, this.props.column, this.state.isCellValueChanging) : '';
},
applyUpdateClass: function applyUpdateClass() {
var updateCellClass = this.getUpdateCellClass();
// -> removing the class
if (updateCellClass != null && updateCellClass != "") {
var cellDOMNode = this.getDOMNode();
if (cellDOMNode.classList) {
cellDOMNode.classList.remove(updateCellClass);
// -> and re-adding the class
cellDOMNode.classList.add(updateCellClass);
} else if (cellDOMNode.className.indexOf(updateCellClass) === -1) {
// IE9 doesn't support classList, nor (I think) altering element.className
// without replacing it wholesale.
cellDOMNode.className = cellDOMNode.className + ' ' + updateCellClass;
}
}
},
setScrollLeft: function setScrollLeft(scrollLeft) {
var ctrl = this; //flow on windows has an outdated react declaration, once that gets updated, we can remove this
if (ctrl.isMounted()) {
var node = this.getDOMNode();
var transform = 'translate3d(' + scrollLeft + 'px, 0px, 0px)';
node.style.webkitTransform = transform;
node.style.transform = transform;
}
},
isCopied: function isCopied() {
var copied = this.props.cellMetaData.copied;
return copied && copied.rowIdx === this.props.rowIdx && copied.idx === this.props.idx;
},
isDraggedOver: function isDraggedOver() {
var dragged = this.props.cellMetaData.dragged;
return dragged && dragged.overRowIdx === this.props.rowIdx && dragged.idx === this.props.idx;
},
wasDraggedOver: function wasDraggedOver() {
var dragged = this.props.cellMetaData.dragged;
return dragged && (dragged.overRowIdx < this.props.rowIdx && this.props.rowIdx < dragged.rowIdx || dragged.overRowIdx > this.props.rowIdx && this.props.rowIdx > dragged.rowIdx) && dragged.idx === this.props.idx;
},
isDraggedCellChanging: function isDraggedCellChanging(nextProps) {
var isChanging;
var dragged = this.props.cellMetaData.dragged;
var nextDragged = nextProps.cellMetaData.dragged;
if (dragged) {
isChanging = nextDragged && this.props.idx === nextDragged.idx || dragged && this.props.idx === dragged.idx;
return isChanging;
} else {
return false;
}
},
isCopyCellChanging: function isCopyCellChanging(nextProps) {
var isChanging;
var copied = this.props.cellMetaData.copied;
var nextCopied = nextProps.cellMetaData.copied;
if (copied) {
isChanging = nextCopied && this.props.idx === nextCopied.idx || copied && this.props.idx === copied.idx;
return isChanging;
} else {
return false;
}
},
isDraggedOverUpwards: function isDraggedOverUpwards() {
var dragged = this.props.cellMetaData.dragged;
return !this.isSelected() && this.isDraggedOver() && this.props.rowIdx < dragged.rowIdx;
},
isDraggedOverDownwards: function isDraggedOverDownwards() {
var dragged = this.props.cellMetaData.dragged;
return !this.isSelected() && this.isDraggedOver() && this.props.rowIdx > dragged.rowIdx;
}
});
var SimpleCellFormatter = React.createClass({
displayName: 'SimpleCellFormatter',
propTypes: {
value: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number, React.PropTypes.object, React.PropTypes.bool]).isRequired
},
render: function render() {
return React.createElement(
'span',
null,
this.props.value
);
},
shouldComponentUpdate: function shouldComponentUpdate(nextProps, nextState) {
return nextProps.value !== this.props.value;
}
});
module.exports = Cell;
/***/ },
/* 23 */
/***/ function(module, exports, __webpack_require__) {
/**
* @jsx React.DOM
*/
'use strict';
var React = __webpack_require__(1);
var CheckboxEditor = React.createClass({
displayName: 'CheckboxEditor',
PropTypes: {
value: React.PropTypes.bool.isRequired,
rowIdx: React.PropTypes.number.isRequired,
column: React.PropTypes.shape({
key: React.PropTypes.string.isRequired,
onCellChange: React.PropTypes.func.isRequired
}).isRequired
},
render: function render() {
var checked = this.props.value != null ? this.props.value : false;
return React.createElement('input', { className: 'react-grid-CheckBox', type: 'checkbox', checked: checked, onClick: this.handleChange });
},
handleChange: function handleChange(e) {
this.props.column.onCellChange(this.props.rowIdx, this.props.column.key, e);
}
});
module.exports = CheckboxEditor;
/***/ },
/* 24 */
/***/ function(module, exports, __webpack_require__) {
/**
* @jsx React.DOM
*/
'use strict';
var React = __webpack_require__(1);
var keyboardHandlerMixin = __webpack_require__(10);
var ExcelColumn = __webpack_require__(2);
var SimpleTextEditor = React.createClass({
displayName: 'SimpleTextEditor',
propTypes: {
value: React.PropTypes.any.isRequired,
onBlur: React.PropTypes.func,
column: React.PropTypes.shape(ExcelColumn).isRequired
},
getValue: function getValue() {
var updated = {};
updated[this.props.column.key] = this.refs.input.getDOMNode().value;
return updated;
},
getInputNode: function getInputNode() {
return this.getDOMNode();
},
render: function render() {
return React.createElement('input', { ref: 'input', type: 'text', onBlur: this.props.onBlur, className: 'form-control', defaultValue: this.props.value });
}
});
module.exports = SimpleTextEditor;
/***/ },
/* 25 */
/***/ function(module, exports, __webpack_require__) {
/**
* @jsx React.DOM
*/
"use strict";
var React = __webpack_require__(1);
var joinClasses = __webpack_require__(4);
var PropTypes = React.PropTypes;
var cloneWithProps = __webpack_require__(5);
var shallowEqual = __webpack_require__(21);
var emptyFunction = __webpack_require__(7);
var ScrollShim = __webpack_require__(37);
var Row = __webpack_require__(11);
var ExcelColumn = __webpack_require__(2);
var Canvas = React.createClass({
displayName: 'Canvas',
mixins: [ScrollShim],
propTypes: {
rowRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
rowHeight: PropTypes.number.isRequired,
height: PropTypes.number.isRequired,
displayStart: PropTypes.number.isRequired,
displayEnd: PropTypes.number.isRequired,
rowsCount: PropTypes.number.isRequired,
rowGetter: PropTypes.oneOfType([PropTypes.func.isRequired, PropTypes.array.isRequired]),
onRows: PropTypes.func,
columns: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired
},
render: function render() {
var _this = this;
var displayStart = this.state.displayStart;
var displayEnd = this.state.displayEnd;
var rowHeight = this.props.rowHeight;
var length = this.props.rowsCount;
var rows = this.getRows(displayStart, displayEnd).map(function (row, idx) {
return _this.renderRow({
key: displayStart + idx,
ref: idx,
idx: displayStart + idx,
row: row,
height: rowHeight,
columns: _this.props.columns,
isSelected: _this.isRowSelected(displayStart + idx),
expandedRows: _this.props.expandedRows,
cellMetaData: _this.props.cellMetaData
});
});
this._currentRowsLength = rows.length;
if (displayStart > 0) {
rows.unshift(this.renderPlaceholder('top', displayStart * rowHeight));
}
if (length - displayEnd > 0) {
rows.push(this.renderPlaceholder('bottom', (length - displayEnd) * rowHeight));
}
var scrollbarWidth = 0;
if (this.isMounted()) {
// Get the scrollbar width
var canvas = this.getDOMNode();
scrollbarWidth = canvas.offsetWidth - canvas.clientWidth;
}
var style = {
position: 'absolute',
top: 0,
left: 0,
overflowX: 'auto',
overflowY: 'scroll',
width: this.props.totalWidth + scrollbarWidth,
height: this.props.height,
transform: 'translate3d(0, 0, 0)'
};
return React.createElement(
'div',
{
style: style,
onScroll: this.onScroll,
className: joinClasses("react-grid-Canvas", this.props.className, { opaque: this.props.cellMetaData.selected && this.props.cellMetaData.selected.active }) },
React.createElement(
'div',
{ style: { width: this.props.width, overflow: 'hidden' } },
rows
)
);
},
renderRow: function renderRow(props) {
var RowsRenderer = this.props.rowRenderer;
if (typeof RowsRenderer === 'function') {
return React.createElement(RowsRenderer, props);
} else if (React.isValidElement(this.props.rowRenderer)) {
return cloneWithProps(this.props.rowRenderer, props);
}
},
renderPlaceholder: function renderPlaceholder(key, height) {
return React.createElement(
'div',
{ key: key, style: { height: height } },
this.props.columns.map(function (column, idx) {
return React.createElement('div', { style: { width: column.width }, key: idx });
})
);
},
getDefaultProps: function getDefaultProps() {
return {
rowRenderer: Row,
onRows: emptyFunction
};
},
isRowSelected: function isRowSelected(rowIdx) {
return this.props.selectedRows && this.props.selectedRows[rowIdx] === true;
},
_currentRowsLength: 0,
_currentRowsRange: { start: 0, end: 0 },
_scroll: { scrollTop: 0, scrollLeft: 0 },
getInitialState: function getInitialState() {
return {
shouldUpdate: true,
displayStart: this.props.displayStart,
displayEnd: this.props.displayEnd
};
},
componentWillMount: function componentWillMount() {
this._currentRowsLength = 0;
this._currentRowsRange = { start: 0, end: 0 };
this._scroll = { scrollTop: 0, scrollLeft: 0 };
},
componentDidMount: function componentDidMount() {
this.onRows();
},
componentDidUpdate: function componentDidUpdate(nextProps)