1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 | exports.HugeTable = undefined;
|
7 |
|
8 | var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
|
9 |
|
10 | var _extends = 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; };
|
11 |
|
12 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
13 |
|
14 | var _react = require('react');
|
15 |
|
16 | var _react2 = _interopRequireDefault(_react);
|
17 |
|
18 | var _propTypes = require('prop-types');
|
19 |
|
20 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
21 |
|
22 | var _fixedDataTable = require('fixed-data-table-2');
|
23 |
|
24 | var _classnames = require('classnames');
|
25 |
|
26 | var _classnames2 = _interopRequireDefault(_classnames);
|
27 |
|
28 | var _constants = require('./constants');
|
29 |
|
30 | var Constants = _interopRequireWildcard(_constants);
|
31 |
|
32 | var _CellUtils = require('./CellUtils');
|
33 |
|
34 | var CellUtils = _interopRequireWildcard(_CellUtils);
|
35 |
|
36 | var _HeaderCell = require('./HeaderCell');
|
37 |
|
38 | var _TextCell = require('./TextCell');
|
39 |
|
40 | var _TouchWrapper = require('./TouchWrapper');
|
41 |
|
42 | var _TouchWrapper2 = _interopRequireDefault(_TouchWrapper);
|
43 |
|
44 | var _lodash = require('lodash');
|
45 |
|
46 | var _lodash2 = _interopRequireDefault(_lodash);
|
47 |
|
48 | var _aphrodite = require('aphrodite');
|
49 |
|
50 | function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
|
51 |
|
52 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
53 |
|
54 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
55 |
|
56 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
57 |
|
58 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
59 |
|
60 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
61 |
|
62 | var HugeTable = exports.HugeTable = function (_React$Component) {
|
63 | _inherits(HugeTable, _React$Component);
|
64 |
|
65 | function HugeTable(props) {
|
66 | _classCallCheck(this, HugeTable);
|
67 |
|
68 | var _this = _possibleConstructorReturn(this, (HugeTable.__proto__ || Object.getPrototypeOf(HugeTable)).call(this, props));
|
69 |
|
70 | _initialiseProps.call(_this);
|
71 |
|
72 | var cellPadding = props.cellPadding || Constants.CELL_PADDING,
|
73 | lineHeight = props.lineHeight || Constants.LINE_HEIGHT,
|
74 | headerHeight = props.headerHeight || Constants.HEADER_HEIGHT,
|
75 | rowHeight = props.rowHeight || Constants.ROW_HEIGHT;
|
76 | _this.state = {
|
77 | columnWidths: {},
|
78 | isColumnResizing: undefined,
|
79 | columnNameToDataTypeMap: {},
|
80 | columnOrder: [],
|
81 | currentSchema: [],
|
82 | shouldActivateLeftScroll: false,
|
83 | shouldActivateRightScroll: false,
|
84 | scrollLeft: 0,
|
85 | cellPadding: cellPadding,
|
86 | lineHeight: lineHeight,
|
87 | headerHeight: headerHeight,
|
88 | rowHeight: rowHeight,
|
89 | contentHeight: 500,
|
90 | contentWidth: 500
|
91 | };
|
92 |
|
93 | _this.uniqueId = props.options.id || null;
|
94 | if (_this.uniqueId) {
|
95 | _this.savedColumnsWidth = JSON.parse(localStorage.getItem('huge-table-column-widths')) || {};
|
96 | _this.savedColumnsWidth[_this.uniqueId] = _this.savedColumnsWidth[_this.uniqueId] || {};
|
97 | }
|
98 |
|
99 | _this.maxTitleWidth = props.options.maxTitleWidth || Constants.MAX_TITLE_WIDTH;
|
100 | _this.maxContentWidth = props.options.maxContentWidth || Constants.MAX_CONTENT_WIDTH;
|
101 | _this.fontDetails = props.options.fontDetails || Constants.FONT_DETAILS;
|
102 | _this.minColumnWidth = props.options.minColumnWidth || Constants.MIN_COLUMN_WIDTH;
|
103 | return _this;
|
104 | }
|
105 |
|
106 | _createClass(HugeTable, [{
|
107 | key: 'componentDidMount',
|
108 | value: function componentDidMount() {
|
109 | this.generateColumnToDataTypeMap(this.props.schema);
|
110 | this.generateColumnWidths(this.props.schema, this.props.options.width);
|
111 | this.generateInitialColumnOrder(this.props.schema);
|
112 | this.checkForScrollArrows(this.state.scrollLeft);
|
113 | }
|
114 | }, {
|
115 | key: 'componentWillReceiveProps',
|
116 | value: function componentWillReceiveProps(nextProps) {
|
117 | if (this.props.schema !== nextProps.schema) {
|
118 | this.generateColumnToDataTypeMap(nextProps.schema);
|
119 | this.generateInitialColumnOrder(nextProps.schema);
|
120 | }
|
121 |
|
122 | if (this.props.schema !== nextProps.schema || this.props.options.width !== nextProps.options.width) {
|
123 | this.generateColumnWidths(nextProps.schema, nextProps.options.width);
|
124 | this.checkForScrollArrows(this.state.scrollLeft);
|
125 | }
|
126 |
|
127 | if (this.props.data.length !== nextProps.data.length) {
|
128 | this.setContentHeight(nextProps.data);
|
129 | }
|
130 | }
|
131 | }, {
|
132 | key: 'componentDidUpdate',
|
133 | value: function componentDidUpdate(prevProps, prevState) {
|
134 | if (prevState.columnOrder !== this.state.columnOrder && !_lodash2.default.isEqual(prevState.columnOrder, this.state.columnOrder)) {
|
135 | this.reorderSchema(this.props.schema, this.state.columnOrder);
|
136 | }
|
137 | if (prevState.currentSchema !== this.state.currentSchema && !_lodash2.default.isEqual(prevState.currentSchema, this.state.currentSchema)) {
|
138 | this.onSchemaChange(this.state.currentSchema, prevState.currentSchema);
|
139 | this.checkForScrollArrows(this.state.scrollLeft);
|
140 | }
|
141 |
|
142 | if (prevState.currentSchema < this.state.currentSchema && this.state.shouldShowScrolls) {
|
143 | this.scrollNewColumnIntoView();
|
144 | this.checkForScrollArrows(this.state.scrollLeft);
|
145 | }
|
146 |
|
147 | if (prevProps.activeColumnIndex !== this.props.activeColumnIndex && this.props.onActiveColumnChange) {
|
148 | this.props.onActiveColumnChange();
|
149 | }
|
150 | }
|
151 | }, {
|
152 | key: 'scrollAndCheckForArrows',
|
153 | value: function scrollAndCheckForArrows(scrollLeft) {
|
154 | this.checkForScrollArrows(scrollLeft);
|
155 | this.handleScroll(scrollLeft);
|
156 | }
|
157 | }, {
|
158 | key: 'render',
|
159 | value: function render() {
|
160 | var _this2 = this;
|
161 |
|
162 | var tableWidth = this.props.options.width;
|
163 | var tableHeight = this.props.options.height - this.state.headerHeight;
|
164 | var rowNumberColumnWidth = this.props.options.rowNumberColumnWidth ? this.props.options.rowNumberColumnWidth : Constants.ROW_NUMBER_COLUMN_WIDTH;
|
165 |
|
166 | var leftScroll = void 0,
|
167 | rightScroll = void 0;
|
168 | if (this.state.shouldShowScrolls) {
|
169 |
|
170 | leftScroll = _react2.default.createElement(
|
171 | 'section',
|
172 | { style: { height: this.state.headerHeight }, className: (0, _classnames2.default)('scroll-toggle', 'left', { 'active': this.state.shouldActivateLeftScroll }), onMouseEnter: function onMouseEnter() {
|
173 | return _this2.handleMouseEnter(-10);
|
174 | }, onMouseLeave: function onMouseLeave() {
|
175 | return _this2.stopScrollInterval();
|
176 | } },
|
177 | _react2.default.createElement('i', { className: 'fa fa-chevron-left fa-lg' })
|
178 | );
|
179 |
|
180 | rightScroll = _react2.default.createElement(
|
181 | 'section',
|
182 | { style: { height: this.state.headerHeight }, className: (0, _classnames2.default)('scroll-toggle', 'right', { 'active': this.state.shouldActivateRightScroll }), onMouseEnter: function onMouseEnter() {
|
183 | return _this2.handleMouseEnter(10);
|
184 | }, onMouseLeave: function onMouseLeave() {
|
185 | return _this2.stopScrollInterval();
|
186 | } },
|
187 | _react2.default.createElement('i', { className: 'fa fa-chevron-right fa-lg' })
|
188 | );
|
189 | }
|
190 |
|
191 | return _react2.default.createElement(
|
192 | _TouchWrapper2.default,
|
193 | {
|
194 | onScroll: this.onScroll,
|
195 | tableWidth: tableWidth,
|
196 | tableHeight: tableHeight,
|
197 | contentWidth: this.state.contentWidth,
|
198 | contentHeight: this.state.contentHeight
|
199 | },
|
200 | _react2.default.createElement(
|
201 | 'div',
|
202 | { style: { position: 'relative', height: tableHeight, width: tableWidth } },
|
203 | leftScroll,
|
204 | rightScroll,
|
205 | _react2.default.createElement(
|
206 | _fixedDataTable.Table,
|
207 | {
|
208 | onHorizontalScroll: this.checkForScrollArrows,
|
209 | onScrollEnd: this.onScrollEnd,
|
210 | ref: 'table',
|
211 | rowHeight: this.state.rowHeight,
|
212 | rowsCount: this.props.data.length,
|
213 | width: tableWidth,
|
214 | scrollLeft: this.state.scrollLeft,
|
215 | scrollTop: this.state.scrollTop,
|
216 | height: tableHeight,
|
217 | headerHeight: this.state.headerHeight,
|
218 | isColumnResizing: this.state.isColumnResizing,
|
219 | onColumnResizeEndCallback: this.onColumnResizeEndCallback,
|
220 | onContentDimensionsChange: this.onContentDimensionsChange,
|
221 | onColumnReorderEndCallback: this.onColumnReorderEndCallback,
|
222 | scrollToColumn: this.props.scrollToColumn,
|
223 | isColumnReordering: false
|
224 |
|
225 | },
|
226 | function () {
|
227 | if (!_this2.props.hideRowNumbers) {
|
228 | return _react2.default.createElement(_fixedDataTable.Column, {
|
229 | cellClassName: 'hugetable-index-column',
|
230 | key: 'hugetable-index-column',
|
231 | columnKey: 'hugetable-index-column',
|
232 | width: rowNumberColumnWidth,
|
233 | header: function header(props) {
|
234 | return _this2.renderHeader(_extends({}, props, { cellData: { main: '#' } }));
|
235 | },
|
236 | cell: function cell(props) {
|
237 | return _react2.default.createElement(
|
238 | _fixedDataTable.Cell,
|
239 | null,
|
240 | _react2.default.createElement(_TextCell.TextCell, _extends({}, props, { cellData: { main: props.rowIndex + 1 } }))
|
241 | );
|
242 | }
|
243 | });
|
244 | }
|
245 | }(),
|
246 | this.state.currentSchema.map(this.createColumn),
|
247 | function () {
|
248 | if (_this2.state.shouldShowScrolls) {
|
249 | return _react2.default.createElement(_fixedDataTable.Column, {
|
250 | cellClassName: 'huge-table-right-scroll-column',
|
251 | key: 'huge-table-right-scroll-column',
|
252 | columnKey: 'huge-table-right-scroll-column',
|
253 | width: _this2.props.buttonColumnWidth ? 40 + _this2.props.buttonColumnWidth : 40,
|
254 | header: function header(props) {
|
255 | return _this2.renderHeader(_extends({}, props, { cellData: { main: '' } }));
|
256 | },
|
257 | cell: function cell(props) {
|
258 | return _react2.default.createElement(
|
259 | _fixedDataTable.Cell,
|
260 | null,
|
261 | _react2.default.createElement(_TextCell.TextCell, _extends({}, props, { cellData: { main: '' } }))
|
262 | );
|
263 | }
|
264 | });
|
265 | }
|
266 | }()
|
267 | )
|
268 | )
|
269 | );
|
270 | }
|
271 | }]);
|
272 |
|
273 | return HugeTable;
|
274 | }(_react2.default.Component);
|
275 |
|
276 | HugeTable.propTypes = {
|
277 | data: _propTypes2.default.arrayOf(_propTypes2.default.object),
|
278 | options: _propTypes2.default.shape({
|
279 | height: _propTypes2.default.number,
|
280 | width: _propTypes2.default.number,
|
281 | mixedContentImage: _propTypes2.default.func,
|
282 | tableScrolled: _propTypes2.default.func,
|
283 | id: _propTypes2.default.string,
|
284 | maxTitleWidth: _propTypes2.default.number,
|
285 | maxContentWidth: _propTypes2.default.number,
|
286 | minColumnWidth: _propTypes2.default.number,
|
287 | rowNumberColumnWidth: _propTypes2.default.number,
|
288 | fontDetails: _propTypes2.default.string
|
289 | }),
|
290 | schema: _propTypes2.default.arrayOf(_propTypes2.default.shape({
|
291 | name: _propTypes2.default.string,
|
292 | type: _propTypes2.default.string
|
293 | })),
|
294 | renderers: _propTypes2.default.shape(_constants.RETURNED_DATA_TYPES.reduce(function (initial, next) {
|
295 | return _extends({}, initial, _defineProperty({}, next, _propTypes2.default.func));
|
296 | }, { HEADER: _propTypes2.default.func })),
|
297 | onSchemaChange: _propTypes2.default.func,
|
298 | resizeByContent: _propTypes2.default.bool,
|
299 | hideRowNumbers: _propTypes2.default.bool,
|
300 | showScrollingArrows: _propTypes2.default.bool,
|
301 | scrollToNewColumn: _propTypes2.default.bool,
|
302 | onScrollToNewColumn: _propTypes2.default.func,
|
303 | rowHeight: _propTypes2.default.number,
|
304 | headerHeight: _propTypes2.default.number,
|
305 | cellPadding: _propTypes2.default.shape({
|
306 | top: _propTypes2.default.number,
|
307 | bottom: _propTypes2.default.number,
|
308 | left: _propTypes2.default.number,
|
309 | right: _propTypes2.default.number
|
310 | }),
|
311 | lineHeight: _propTypes2.default.number,
|
312 | buttonColumnWidth: _propTypes2.default.number,
|
313 | activeColumnIndex: _propTypes2.default.number,
|
314 | onActiveColumnChange: _propTypes2.default.func,
|
315 | scrollToColumn: _propTypes2.default.number
|
316 | };
|
317 |
|
318 | var _initialiseProps = function _initialiseProps() {
|
319 | var _this3 = this;
|
320 |
|
321 | this.onScrollEnd = function (scrollLeft) {
|
322 | _this3.setState({ scrollLeft: scrollLeft });
|
323 | };
|
324 |
|
325 | this.onSchemaChange = function (schema, prevSchema) {
|
326 | if (_this3.props.onSchemaChange) {
|
327 | _this3.props.onSchemaChange(schema, prevSchema);
|
328 | }
|
329 | };
|
330 |
|
331 | this.scrollNewColumnIntoView = function () {
|
332 | if (_this3.refs.table && _this3.props.scrollToNewColumn) {
|
333 | _this3.scrollAndCheckForArrows(_this3.refs.table.state.maxScrollX);
|
334 | if (_this3.props.onScrollToNewColumn) {
|
335 | _this3.props.onScrollToNewColumn();
|
336 | }
|
337 | }
|
338 | };
|
339 |
|
340 | this.reorderSchema = function (schema, columnOrder) {
|
341 | var newSchema = [];
|
342 | columnOrder.forEach(function (col) {
|
343 | var newSchemaItem = schema.find(function (s) {
|
344 | return (s.id || s.name) === col;
|
345 | });
|
346 | if (newSchemaItem) {
|
347 | newSchema.push(newSchemaItem);
|
348 | }
|
349 | });
|
350 | _this3.setState({ currentSchema: newSchema });
|
351 | };
|
352 |
|
353 | this.setContentHeight = function (data) {
|
354 | _this3.setState({
|
355 | contentHeight: _this3.state.rowHeight * data.length + _this3.state.headerHeight
|
356 | });
|
357 | };
|
358 |
|
359 | this.generateInitialColumnOrder = function (schema) {
|
360 | var columnOrder = schema.map(function (schemaItem) {
|
361 | return schemaItem.id || schemaItem.name;
|
362 | });
|
363 | _this3.setState({
|
364 | columnOrder: columnOrder
|
365 | });
|
366 | _this3.reorderSchema(schema, columnOrder);
|
367 | };
|
368 |
|
369 | this.generateColumnToDataTypeMap = function (schema) {
|
370 | var columnNameToDataTypeMap = {};
|
371 |
|
372 | schema.forEach(function (schemaItem) {
|
373 | columnNameToDataTypeMap[schemaItem.name] = schemaItem.type;
|
374 | });
|
375 |
|
376 | _this3.setState({ columnNameToDataTypeMap: columnNameToDataTypeMap });
|
377 | };
|
378 |
|
379 | this.generateColumnWidths = function (schema, width, columnKey, newColumnWidth) {
|
380 | var columnWidths = {};
|
381 | var isColumnResizing = void 0;
|
382 | var contentWidth = void 0;
|
383 |
|
384 |
|
385 | var calculatedWidth = (width - Constants.ROW_NUMBER_COLUMN_WIDTH - 5 - schema.length * 2) / Math.max(schema.length, 1);
|
386 | var defaultColumnWidth = Math.max(calculatedWidth, _this3.minColumnWidth);
|
387 |
|
388 | schema.forEach(function (schemaItem) {
|
389 | var maxColumnWidth = _this3.props.resizeByContent ? _this3.getMaxColumnWidth(schemaItem, _this3.minColumnWidth) : defaultColumnWidth;
|
390 | if (_this3.uniqueId) {
|
391 |
|
392 | if (_this3.props.data.length > 0 && _this3.props.resizeByContent) {
|
393 | _this3.state.columnWidths[schemaItem.id || schemaItem.name] = _this3.savedColumnsWidth[_this3.uniqueId][schemaItem.id || schemaItem.name] || maxColumnWidth || _this3.state.columnWidths[schemaItem.id || schemaItem.name] || defaultColumnWidth;
|
394 | } else {
|
395 | _this3.state.columnWidths[schemaItem.id || schemaItem.name] = _this3.savedColumnsWidth[_this3.uniqueId][schemaItem.id || schemaItem.name] || _this3.state.columnWidths[schemaItem.id || schemaItem.name] || maxColumnWidth || defaultColumnWidth;
|
396 | }
|
397 | } else {
|
398 | _this3.state.columnWidths[schemaItem.id || schemaItem.name] = _this3.state.columnWidths[schemaItem.id || schemaItem.name] || maxColumnWidth || defaultColumnWidth;
|
399 | }
|
400 | columnWidths[schemaItem.id || schemaItem.name] = _this3.state.columnWidths[schemaItem.id || schemaItem.name];
|
401 | });
|
402 |
|
403 | if (columnKey) {
|
404 | columnWidths[columnKey] = newColumnWidth;
|
405 | if (_this3.uniqueId) {
|
406 | _this3.savedColumnsWidth[_this3.uniqueId][columnKey] = newColumnWidth;
|
407 | localStorage.setItem('huge-table-column-widths', JSON.stringify(_this3.savedColumnsWidth));
|
408 | }
|
409 | isColumnResizing = false;
|
410 | }
|
411 |
|
412 | contentWidth = schema.reduce(function (sum, item) {
|
413 | return sum + columnWidths[item.id || item.name];
|
414 | }, 0) + Constants.ROW_NUMBER_COLUMN_WIDTH;
|
415 | _this3.setState({
|
416 | columnWidths: columnWidths,
|
417 | isColumnResizing: isColumnResizing,
|
418 | contentWidth: contentWidth
|
419 | });
|
420 | };
|
421 |
|
422 | this.getMaxColumnWidth = function (schemaItem, defaultColumnWidth) {
|
423 | var maxColumnWidth = 0;
|
424 |
|
425 | if (schemaItem.type !== Constants.ColumnTypes.IMAGE) {
|
426 | _this3.props.data.forEach(function (row) {
|
427 | var cellContent = _this3.getCellContent(row, schemaItem);
|
428 | var cellText = _this3.getCellText(cellContent);
|
429 | var cellColumnWidth = _this3.getContentSize(cellText, _this3.fontDetails);
|
430 | maxColumnWidth = maxColumnWidth > cellColumnWidth ? maxColumnWidth : cellColumnWidth;
|
431 | });
|
432 |
|
433 |
|
434 |
|
435 |
|
436 | if (maxColumnWidth < _this3.maxTitleWidth) {
|
437 | var titleWidth = _this3.getContentSize(schemaItem.name, _this3.fontDetails);
|
438 | maxColumnWidth = Math.max(titleWidth, maxColumnWidth);
|
439 | maxColumnWidth = Math.min(maxColumnWidth, _this3.maxTitleWidth);
|
440 | } else {
|
441 | maxColumnWidth = Math.min(_this3.maxContentWidth, maxColumnWidth);
|
442 | }
|
443 | }
|
444 | return maxColumnWidth > defaultColumnWidth ? maxColumnWidth : defaultColumnWidth;
|
445 | };
|
446 |
|
447 | this.getContentSize = function (txt, font) {
|
448 | _this3.element = document.createElement('canvas');
|
449 | _this3.context = _this3.element.getContext('2d');
|
450 | _this3.context.font = font;
|
451 | var tsize = { 'width': _this3.context.measureText(txt).width };
|
452 | return tsize.width;
|
453 | };
|
454 |
|
455 | this.getCellContent = function (row, schemaItem) {
|
456 | var content = void 0;
|
457 | if (schemaItem.type === Constants.ColumnTypes.TEXT) {
|
458 | var cellData = Array.isArray(row[schemaItem.name]) ? row[schemaItem.name][0] : row[schemaItem.name];
|
459 | if (cellData !== undefined) {
|
460 | content = cellData.text !== undefined ? cellData.text : '';
|
461 | } else {
|
462 | content = '';
|
463 | }
|
464 | } else if (schemaItem.type === Constants.ColumnTypes.IMAGE) {
|
465 | content = '';
|
466 | } else {
|
467 | content = row[schemaItem.name + '/_text'] !== undefined ? row[schemaItem.name + '/_text'] : row[schemaItem.name];
|
468 | }
|
469 | return content;
|
470 | };
|
471 |
|
472 | this.getCellText = function (cellContent) {
|
473 | if (Array.isArray(cellContent)) {
|
474 | return _this3.getCellText(cellContent[0]);
|
475 | } else if ((typeof cellContent === 'undefined' ? 'undefined' : _typeof(cellContent)) === 'object') {
|
476 | return JSON.stringify(cellContent);
|
477 | } else {
|
478 | return cellContent;
|
479 | }
|
480 | };
|
481 |
|
482 | this.createColumn = function (schemaItem, idx) {
|
483 | var width = _this3.state.columnWidths[schemaItem.id || schemaItem.name];
|
484 | var lastColumn = idx === _this3.state.currentSchema.length - 1 && _this3.state.currentSchema.length > 1;
|
485 | if (_this3.state.shouldShowScrolls && lastColumn) {
|
486 |
|
487 | width = width + 120;
|
488 | }
|
489 | var cellClass = '',
|
490 | headerClass = '';
|
491 | if (_this3.props.showScrollingArrows && _this3.state.shouldShowScrolls) {
|
492 | if (_this3.props.hideRowNumbers && idx === 0) {
|
493 | cellClass = 'hugetable-index-column nudge';
|
494 | } else if (lastColumn) {
|
495 | cellClass = 'last-column';
|
496 | }
|
497 | }
|
498 |
|
499 | if (idx === _this3.props.activeColumnIndex) {
|
500 | cellClass = cellClass + ' active-column';
|
501 | headerClass = 'active-column-header';
|
502 | }
|
503 |
|
504 | return _react2.default.createElement(_fixedDataTable.Column, {
|
505 | cellClassName: cellClass,
|
506 | headerClassName: headerClass,
|
507 | header: function header(props) {
|
508 | return _this3.renderHeader(_extends({}, props, { cellData: { main: schemaItem.name } }));
|
509 | },
|
510 | columnKey: schemaItem.id || schemaItem.name,
|
511 | minWidth: _this3.minColumnWidth,
|
512 | width: width,
|
513 | cell: function cell(props) {
|
514 | return _this3.cellRenderer(_extends({}, props, { schemaItem: schemaItem }));
|
515 | },
|
516 | key: schemaItem.name,
|
517 | isResizable: true,
|
518 | isReorderable: true
|
519 | });
|
520 | };
|
521 |
|
522 | this.renderHeader = function (props) {
|
523 | if (_this3.props.renderers && _this3.props.renderers.HEADER && typeof _this3.props.renderers.HEADER === 'function') {
|
524 | return _react2.default.createElement(
|
525 | _fixedDataTable.Cell,
|
526 | null,
|
527 | _this3.props.renderers.HEADER(props)
|
528 | );
|
529 | } else {
|
530 | return _react2.default.createElement(_HeaderCell.HeaderCell, props);
|
531 | }
|
532 | };
|
533 |
|
534 | this.getCellStyles = function (columnDataType) {
|
535 | var cellStyles = {};
|
536 |
|
537 | if (columnDataType == Constants.ColumnTypes.IMAGE) {
|
538 | cellStyles = _aphrodite.StyleSheet.create({
|
539 | cellStyle: {
|
540 | paddingTop: Constants.IMAGE_CELL_PADDING.cellPaddingTop,
|
541 | paddingBottom: Constants.IMAGE_CELL_PADDING.cellPaddingBottom,
|
542 | paddingLeft: Constants.IMAGE_CELL_PADDING.cellPaddingLeft,
|
543 | paddingRight: Constants.IMAGE_CELL_PADDING.cellPaddingRight
|
544 | }
|
545 | });
|
546 | } else {
|
547 | cellStyles = _aphrodite.StyleSheet.create({
|
548 | cellStyle: {
|
549 | paddingTop: Constants.CELL_PADDING.cellPaddingTop,
|
550 | paddingBottom: Constants.CELL_PADDING.cellPaddingBottom,
|
551 | paddingLeft: Constants.CELL_PADDING.cellPaddingLeft,
|
552 | paddingRight: Constants.CELL_PADDING.cellPaddingRight
|
553 | }
|
554 | });
|
555 | }
|
556 | return cellStyles;
|
557 | };
|
558 |
|
559 | this.cellRenderer = function (_ref) {
|
560 | var rowIndex = _ref.rowIndex,
|
561 | width = _ref.width,
|
562 | height = _ref.height,
|
563 | schemaItem = _ref.schemaItem;
|
564 |
|
565 | var rowObject = _this3.props.data[rowIndex];
|
566 | var cellData = {};
|
567 | cellData.main = rowObject[schemaItem.name];
|
568 | Constants.RETURNED_DATA_TYPES.forEach(function (dataType) {
|
569 | cellData[dataType] = rowObject[schemaItem.name + '/_' + dataType] || null;
|
570 | });
|
571 | var columnDataType = _this3.state.columnNameToDataTypeMap[schemaItem.name];
|
572 | var cellCustomRenderer = _this3.props.renderers && _this3.props.renderers[columnDataType];
|
573 | cellData.type = columnDataType;
|
574 |
|
575 | return _react2.default.createElement(
|
576 | _fixedDataTable.Cell,
|
577 | { className: (0, _aphrodite.css)(_this3.getCellStyles(columnDataType).cellStyle) },
|
578 | CellUtils.getComponentDataType({
|
579 | columnDataType: columnDataType,
|
580 | cellData: cellData,
|
581 | width: width,
|
582 | height: height,
|
583 | columnKey: schemaItem.id || schemaItem.name,
|
584 | mixedContentImage: _this3.props.options.mixedContentImage,
|
585 | cellCustomRenderer: cellCustomRenderer,
|
586 | rowIndex: rowIndex
|
587 |
|
588 | })
|
589 | );
|
590 | };
|
591 |
|
592 | this.onColumnResizeEndCallback = function (newColumnWidth, columnKey) {
|
593 | _this3.generateColumnWidths(_this3.props.schema, _this3.props.options.width, columnKey, newColumnWidth);
|
594 | };
|
595 |
|
596 | this.onScroll = function (scrollLeft, scrollTop) {
|
597 | _this3.setState({
|
598 | scrollLeft: scrollLeft ? scrollLeft : _this3.state.scrollLeft,
|
599 | scrollTop: scrollTop
|
600 | });
|
601 | if (_this3.props.options.tableScrolled) {
|
602 | _this3.props.options.tableScrolled(scrollLeft, scrollTop);
|
603 | }
|
604 | };
|
605 |
|
606 | this.onContentDimensionsChange = function (contentHeight, contentWidth) {
|
607 | _this3.setState({
|
608 | contentWidth: contentWidth,
|
609 | contentHeight: contentHeight
|
610 | });
|
611 | };
|
612 |
|
613 | this.onColumnReorderEndCallback = function (event) {
|
614 | var columnOrder = _this3.state.columnOrder.filter(function (columnKey) {
|
615 | return columnKey !== event.reorderColumn;
|
616 | });
|
617 |
|
618 | if (event.columnAfter) {
|
619 | var index = columnOrder.indexOf(event.columnAfter);
|
620 | columnOrder.splice(index, 0, event.reorderColumn);
|
621 | } else {
|
622 | columnOrder.push(event.reorderColumn);
|
623 | }
|
624 | _this3.setState({
|
625 | columnOrder: columnOrder
|
626 | });
|
627 | };
|
628 |
|
629 | this.handleMouseEnter = function (scrollVal) {
|
630 | _this3.intervalId = setInterval(function () {
|
631 | return _this3.moveScrollPos(scrollVal);
|
632 | }, 10);
|
633 | };
|
634 |
|
635 | this.stopScrollInterval = function () {
|
636 | clearInterval(_this3.intervalId);
|
637 | _this3.intervalId = undefined;
|
638 | };
|
639 |
|
640 | this.moveScrollPos = function (val) {
|
641 | if (_this3.state.scrollLeft === 0 && val >= 0 || _this3.state.scrollLeft > 0) {
|
642 | var scrollLeft = _this3.state.scrollLeft + val >= 0 ? _this3.state.scrollLeft + val : 0;
|
643 | _this3.scrollAndCheckForArrows(scrollLeft);
|
644 | }
|
645 | if (_this3.state.scrollLeft >= _this3.refs.table.state.maxScrollX) {
|
646 | _this3.stopScrollInterval();
|
647 | }
|
648 | };
|
649 |
|
650 | this.calcElementsWidth = function (elementsArr) {
|
651 | return elementsArr.map(function (e) {
|
652 | return e.getBoundingClientRect().width;
|
653 | }).reduce(function (i, n) {
|
654 | return i + n;
|
655 | }, 0);
|
656 | };
|
657 |
|
658 | this.getChildElements = function () {
|
659 | var headerContainer = _this3.getHeaderContainer();
|
660 | var childElements = headerContainer ? Array.from(_this3.getHeaderContainer().children) : [];
|
661 | return childElements;
|
662 | };
|
663 |
|
664 | this.handleScroll = function (scrollLeft) {
|
665 | _this3.setState({
|
666 | scrollLeft: scrollLeft
|
667 | });
|
668 | return true;
|
669 | };
|
670 |
|
671 | this.checkForScrollArrows = function (scrollLeft, allElementsWidth) {
|
672 | var ALL_ELEMENTS_WIDTH = allElementsWidth ? allElementsWidth : _this3.calcElementsWidth(_this3.getChildElements());
|
673 | var shouldShowScrolls = ALL_ELEMENTS_WIDTH > _this3.props.options.width && _this3.props.showScrollingArrows;
|
674 | _this3.setState({
|
675 | shouldShowScrolls: shouldShowScrolls,
|
676 | shouldActivateLeftScroll: scrollLeft > 0,
|
677 | shouldActivateRightScroll: ALL_ELEMENTS_WIDTH - 1 > _this3.props.options.width + scrollLeft
|
678 | });
|
679 | return true;
|
680 | };
|
681 |
|
682 | this.getListContainerWidth = function () {
|
683 | return _this3.getHeaderContainer().getBoundingClientRect().width;
|
684 | };
|
685 |
|
686 | this.getHeaderContainer = function () {
|
687 | var headerCell = document.querySelector('.hugetable-index-column');
|
688 | return headerCell ? headerCell.parentElement : null;
|
689 | };
|
690 | }; |
\ | No newline at end of file |