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 | _this.headerOffsetWidth = props.options.headerOffsetWidth || 0;
|
104 | return _this;
|
105 | }
|
106 |
|
107 | _createClass(HugeTable, [{
|
108 | key: 'componentDidMount',
|
109 | value: function componentDidMount() {
|
110 | this.generateColumnToDataTypeMap(this.props.schema);
|
111 | this.generateColumnWidths(this.props.schema, this.props.options.width);
|
112 | this.generateInitialColumnOrder(this.props.schema);
|
113 | this.checkForScrollArrows(this.state.scrollLeft);
|
114 | }
|
115 | }, {
|
116 | key: 'componentWillReceiveProps',
|
117 | value: function componentWillReceiveProps(nextProps) {
|
118 | if (this.props.schema !== nextProps.schema) {
|
119 | this.generateColumnToDataTypeMap(nextProps.schema);
|
120 | this.generateInitialColumnOrder(nextProps.schema);
|
121 | }
|
122 |
|
123 | if (this.props.schema !== nextProps.schema || this.props.options.width !== nextProps.options.width) {
|
124 | this.generateColumnWidths(nextProps.schema, nextProps.options.width);
|
125 | this.checkForScrollArrows(this.state.scrollLeft);
|
126 | }
|
127 |
|
128 | if (this.props.data.length !== nextProps.data.length) {
|
129 | this.setContentHeight(nextProps.data);
|
130 | }
|
131 | }
|
132 | }, {
|
133 | key: 'componentDidUpdate',
|
134 | value: function componentDidUpdate(prevProps, prevState) {
|
135 | if (prevState.columnOrder !== this.state.columnOrder && !_lodash2.default.isEqual(prevState.columnOrder, this.state.columnOrder)) {
|
136 | this.reorderSchema(this.props.schema, this.state.columnOrder);
|
137 | }
|
138 | if (prevState.currentSchema !== this.state.currentSchema && !_lodash2.default.isEqual(prevState.currentSchema, this.state.currentSchema)) {
|
139 | this.onSchemaChange(this.state.currentSchema, prevState.currentSchema);
|
140 | this.checkForScrollArrows(this.state.scrollLeft);
|
141 | }
|
142 |
|
143 | if (prevState.currentSchema < this.state.currentSchema && this.state.shouldShowScrolls) {
|
144 | this.scrollNewColumnIntoView();
|
145 | this.checkForScrollArrows(this.state.scrollLeft);
|
146 | }
|
147 |
|
148 | if (prevProps.activeColumnIndex !== this.props.activeColumnIndex && this.props.onActiveColumnChange) {
|
149 | this.props.onActiveColumnChange();
|
150 | }
|
151 | }
|
152 | }, {
|
153 | key: 'scrollAndCheckForArrows',
|
154 | value: function scrollAndCheckForArrows(scrollLeft) {
|
155 | this.checkForScrollArrows(scrollLeft);
|
156 | this.handleScroll(scrollLeft);
|
157 | }
|
158 | }, {
|
159 | key: 'render',
|
160 | value: function render() {
|
161 | var _this2 = this;
|
162 |
|
163 | var tableWidth = this.props.options.width;
|
164 | var tableHeight = this.props.options.height - this.state.headerHeight;
|
165 | var rowNumberColumnWidth = this.props.options.rowNumberColumnWidth ? this.props.options.rowNumberColumnWidth : Constants.ROW_NUMBER_COLUMN_WIDTH;
|
166 |
|
167 | var leftScroll = void 0,
|
168 | rightScroll = void 0;
|
169 | if (this.state.shouldShowScrolls) {
|
170 |
|
171 | leftScroll = _react2.default.createElement(
|
172 | 'section',
|
173 | { style: { height: this.state.headerHeight }, className: (0, _classnames2.default)('scroll-toggle', 'left', { 'active': this.state.shouldActivateLeftScroll }), onMouseEnter: function onMouseEnter() {
|
174 | return _this2.handleMouseEnter(-10);
|
175 | }, onMouseLeave: function onMouseLeave() {
|
176 | return _this2.stopScrollInterval();
|
177 | } },
|
178 | _react2.default.createElement('i', { className: 'fa fa-chevron-left fa-lg' })
|
179 | );
|
180 |
|
181 | rightScroll = _react2.default.createElement(
|
182 | 'section',
|
183 | { style: { height: this.state.headerHeight }, className: (0, _classnames2.default)('scroll-toggle', 'right', { 'active': this.state.shouldActivateRightScroll }), onMouseEnter: function onMouseEnter() {
|
184 | return _this2.handleMouseEnter(10);
|
185 | }, onMouseLeave: function onMouseLeave() {
|
186 | return _this2.stopScrollInterval();
|
187 | } },
|
188 | _react2.default.createElement('i', { className: 'fa fa-chevron-right fa-lg' })
|
189 | );
|
190 | }
|
191 |
|
192 | return _react2.default.createElement(
|
193 | _TouchWrapper2.default,
|
194 | {
|
195 | onScroll: this.onScroll,
|
196 | tableWidth: tableWidth,
|
197 | tableHeight: tableHeight,
|
198 | contentWidth: this.state.contentWidth,
|
199 | contentHeight: this.state.contentHeight
|
200 | },
|
201 | _react2.default.createElement(
|
202 | 'div',
|
203 | { style: { position: 'relative', height: tableHeight, width: tableWidth } },
|
204 | leftScroll,
|
205 | rightScroll,
|
206 | _react2.default.createElement(
|
207 | _fixedDataTable.Table,
|
208 | {
|
209 | onHorizontalScroll: this.checkForScrollArrows,
|
210 | onScrollEnd: this.onScrollEnd,
|
211 | ref: 'table',
|
212 | rowHeight: this.state.rowHeight,
|
213 | rowsCount: this.props.data.length,
|
214 | width: tableWidth,
|
215 | scrollLeft: this.state.scrollLeft,
|
216 | scrollTop: this.state.scrollTop,
|
217 | height: tableHeight,
|
218 | headerHeight: this.state.headerHeight,
|
219 | isColumnResizing: this.state.isColumnResizing,
|
220 | onColumnResizeEndCallback: this.onColumnResizeEndCallback,
|
221 | onContentDimensionsChange: this.onContentDimensionsChange,
|
222 | onColumnReorderEndCallback: this.onColumnReorderEndCallback,
|
223 | scrollToColumn: this.props.scrollToColumn,
|
224 | isColumnReordering: false
|
225 |
|
226 | },
|
227 | function () {
|
228 | if (!_this2.props.hideRowNumbers) {
|
229 | return _react2.default.createElement(_fixedDataTable.Column, {
|
230 | cellClassName: 'hugetable-index-column',
|
231 | key: 'hugetable-index-column',
|
232 | columnKey: 'hugetable-index-column',
|
233 | width: rowNumberColumnWidth,
|
234 | header: function header(props) {
|
235 | return _this2.renderHeader(_extends({}, props, { cellData: { main: '#' } }));
|
236 | },
|
237 | cell: function cell(props) {
|
238 | return _react2.default.createElement(
|
239 | _fixedDataTable.Cell,
|
240 | null,
|
241 | _react2.default.createElement(_TextCell.TextCell, _extends({}, props, { cellData: { main: props.rowIndex + 1 } }))
|
242 | );
|
243 | }
|
244 | });
|
245 | }
|
246 | }(),
|
247 | this.state.currentSchema.map(this.createColumn),
|
248 | function () {
|
249 | if (_this2.state.shouldShowScrolls) {
|
250 | return _react2.default.createElement(_fixedDataTable.Column, {
|
251 | cellClassName: 'huge-table-right-scroll-column',
|
252 | key: 'huge-table-right-scroll-column',
|
253 | columnKey: 'huge-table-right-scroll-column',
|
254 | width: _this2.props.buttonColumnWidth ? 40 + _this2.props.buttonColumnWidth : 40,
|
255 | header: function header(props) {
|
256 | return _this2.renderHeader(_extends({}, props, { cellData: { main: '' } }));
|
257 | },
|
258 | cell: function cell(props) {
|
259 | return _react2.default.createElement(
|
260 | _fixedDataTable.Cell,
|
261 | null,
|
262 | _react2.default.createElement(_TextCell.TextCell, _extends({}, props, { cellData: { main: '' } }))
|
263 | );
|
264 | }
|
265 | });
|
266 | }
|
267 | }()
|
268 | )
|
269 | )
|
270 | );
|
271 | }
|
272 | }]);
|
273 |
|
274 | return HugeTable;
|
275 | }(_react2.default.Component);
|
276 |
|
277 | HugeTable.propTypes = {
|
278 | data: _propTypes2.default.arrayOf(_propTypes2.default.object),
|
279 | options: _propTypes2.default.shape({
|
280 | height: _propTypes2.default.number,
|
281 | width: _propTypes2.default.number,
|
282 | mixedContentImage: _propTypes2.default.func,
|
283 | tableScrolled: _propTypes2.default.func,
|
284 | id: _propTypes2.default.string,
|
285 | maxTitleWidth: _propTypes2.default.number,
|
286 | maxContentWidth: _propTypes2.default.number,
|
287 | minColumnWidth: _propTypes2.default.number,
|
288 | rowNumberColumnWidth: _propTypes2.default.number,
|
289 | fontDetails: _propTypes2.default.string,
|
290 | headerOffsetWidth: _propTypes2.default.number
|
291 | }),
|
292 | schema: _propTypes2.default.arrayOf(_propTypes2.default.shape({
|
293 | name: _propTypes2.default.string,
|
294 | type: _propTypes2.default.string
|
295 | })),
|
296 | renderers: _propTypes2.default.shape(_constants.RETURNED_DATA_TYPES.reduce(function (initial, next) {
|
297 | return _extends({}, initial, _defineProperty({}, next, _propTypes2.default.func));
|
298 | }, { HEADER: _propTypes2.default.func })),
|
299 | onSchemaChange: _propTypes2.default.func,
|
300 | resizeByContent: _propTypes2.default.bool,
|
301 | hideRowNumbers: _propTypes2.default.bool,
|
302 | showScrollingArrows: _propTypes2.default.bool,
|
303 | scrollToNewColumn: _propTypes2.default.bool,
|
304 | onScrollToNewColumn: _propTypes2.default.func,
|
305 | rowHeight: _propTypes2.default.number,
|
306 | headerHeight: _propTypes2.default.number,
|
307 | cellPadding: _propTypes2.default.shape({
|
308 | top: _propTypes2.default.number,
|
309 | bottom: _propTypes2.default.number,
|
310 | left: _propTypes2.default.number,
|
311 | right: _propTypes2.default.number
|
312 | }),
|
313 | lineHeight: _propTypes2.default.number,
|
314 | buttonColumnWidth: _propTypes2.default.number,
|
315 | activeColumnIndex: _propTypes2.default.number,
|
316 | onActiveColumnChange: _propTypes2.default.func,
|
317 | scrollToColumn: _propTypes2.default.number,
|
318 | disableClickEvents: _propTypes2.default.bool,
|
319 | resizeableColumns: _propTypes2.default.bool,
|
320 | reorderableColumns: _propTypes2.default.bool
|
321 | };
|
322 | HugeTable.defaultProps = {
|
323 | resizeableColumns: true,
|
324 | reorderableColumns: true
|
325 | };
|
326 |
|
327 | var _initialiseProps = function _initialiseProps() {
|
328 | var _this3 = this;
|
329 |
|
330 | this.onScrollEnd = function (scrollLeft) {
|
331 | _this3.setState({ scrollLeft: scrollLeft });
|
332 | };
|
333 |
|
334 | this.onSchemaChange = function (schema, prevSchema) {
|
335 | if (_this3.props.onSchemaChange) {
|
336 | _this3.props.onSchemaChange(schema, prevSchema);
|
337 | }
|
338 | };
|
339 |
|
340 | this.scrollNewColumnIntoView = function () {
|
341 | if (_this3.refs.table && _this3.props.scrollToNewColumn) {
|
342 | _this3.scrollAndCheckForArrows(_this3.refs.table.state.maxScrollX);
|
343 | if (_this3.props.onScrollToNewColumn) {
|
344 | _this3.props.onScrollToNewColumn();
|
345 | }
|
346 | }
|
347 | };
|
348 |
|
349 | this.reorderSchema = function (schema, columnOrder) {
|
350 | var newSchema = [];
|
351 | columnOrder.forEach(function (col) {
|
352 | var newSchemaItem = schema.find(function (s) {
|
353 | return (s.id || s.name) === col;
|
354 | });
|
355 | if (newSchemaItem) {
|
356 | newSchema.push(newSchemaItem);
|
357 | }
|
358 | });
|
359 | _this3.setState({ currentSchema: newSchema });
|
360 | };
|
361 |
|
362 | this.setContentHeight = function (data) {
|
363 | _this3.setState({
|
364 | contentHeight: _this3.state.rowHeight * data.length + _this3.state.headerHeight
|
365 | });
|
366 | };
|
367 |
|
368 | this.generateInitialColumnOrder = function (schema) {
|
369 | var columnOrder = schema.map(function (schemaItem) {
|
370 | return schemaItem.id || schemaItem.name;
|
371 | });
|
372 | _this3.setState({
|
373 | columnOrder: columnOrder
|
374 | });
|
375 | _this3.reorderSchema(schema, columnOrder);
|
376 | };
|
377 |
|
378 | this.generateColumnToDataTypeMap = function (schema) {
|
379 | var columnNameToDataTypeMap = {};
|
380 |
|
381 | schema.forEach(function (schemaItem) {
|
382 | columnNameToDataTypeMap[schemaItem.name] = schemaItem.type;
|
383 | });
|
384 |
|
385 | _this3.setState({ columnNameToDataTypeMap: columnNameToDataTypeMap });
|
386 | };
|
387 |
|
388 | this.generateColumnWidths = function (schema, width, columnKey, newColumnWidth) {
|
389 | var columnWidths = {};
|
390 | var isColumnResizing = void 0;
|
391 | var contentWidth = void 0;
|
392 |
|
393 |
|
394 | var calculatedWidth = (width - Constants.ROW_NUMBER_COLUMN_WIDTH - 5 - schema.length * 2) / Math.max(schema.length, 1);
|
395 | var defaultColumnWidth = Math.max(calculatedWidth, _this3.minColumnWidth);
|
396 |
|
397 | schema.forEach(function (schemaItem) {
|
398 | var maxColumnWidth = _this3.props.resizeByContent ? _this3.getMaxColumnWidth(schemaItem, _this3.minColumnWidth) : defaultColumnWidth;
|
399 | if (_this3.uniqueId) {
|
400 |
|
401 | if (_this3.props.data.length > 0 && _this3.props.resizeByContent) {
|
402 | _this3.state.columnWidths[schemaItem.id || schemaItem.name] = _this3.savedColumnsWidth[_this3.uniqueId][schemaItem.id || schemaItem.name] || maxColumnWidth || _this3.state.columnWidths[schemaItem.id || schemaItem.name] || defaultColumnWidth;
|
403 | } else {
|
404 | _this3.state.columnWidths[schemaItem.id || schemaItem.name] = _this3.savedColumnsWidth[_this3.uniqueId][schemaItem.id || schemaItem.name] || _this3.state.columnWidths[schemaItem.id || schemaItem.name] || maxColumnWidth || defaultColumnWidth;
|
405 | }
|
406 | } else {
|
407 | _this3.state.columnWidths[schemaItem.id || schemaItem.name] = _this3.state.columnWidths[schemaItem.id || schemaItem.name] || maxColumnWidth || defaultColumnWidth;
|
408 | }
|
409 | columnWidths[schemaItem.id || schemaItem.name] = _this3.state.columnWidths[schemaItem.id || schemaItem.name];
|
410 | });
|
411 |
|
412 | if (columnKey) {
|
413 | columnWidths[columnKey] = newColumnWidth;
|
414 | if (_this3.uniqueId) {
|
415 | _this3.savedColumnsWidth[_this3.uniqueId][columnKey] = newColumnWidth;
|
416 | localStorage.setItem('huge-table-column-widths', JSON.stringify(_this3.savedColumnsWidth));
|
417 | }
|
418 | isColumnResizing = false;
|
419 | }
|
420 |
|
421 | contentWidth = schema.reduce(function (sum, item) {
|
422 | return sum + columnWidths[item.id || item.name];
|
423 | }, 0) + Constants.ROW_NUMBER_COLUMN_WIDTH;
|
424 | _this3.setState({
|
425 | columnWidths: columnWidths,
|
426 | isColumnResizing: isColumnResizing,
|
427 | contentWidth: contentWidth
|
428 | });
|
429 | };
|
430 |
|
431 | this.getMaxColumnWidth = function (schemaItem, defaultColumnWidth) {
|
432 | var maxColumnWidth = 0;
|
433 |
|
434 | if (schemaItem.type !== Constants.ColumnTypes.IMAGE) {
|
435 | _this3.props.data.forEach(function (row) {
|
436 | var cellContent = _this3.getCellContent(row, schemaItem);
|
437 | var cellText = _this3.getCellText(cellContent);
|
438 | var cellColumnWidth = _this3.getContentSize(cellText, _this3.fontDetails);
|
439 | maxColumnWidth = maxColumnWidth > cellColumnWidth ? maxColumnWidth : cellColumnWidth;
|
440 | });
|
441 |
|
442 |
|
443 |
|
444 |
|
445 | if (maxColumnWidth < _this3.maxTitleWidth) {
|
446 | var titleWidth = _this3.getContentSize(schemaItem.name, _this3.fontDetails) + _this3.headerOffsetWidth;
|
447 | maxColumnWidth = Math.max(titleWidth, maxColumnWidth);
|
448 | maxColumnWidth = Math.min(maxColumnWidth, _this3.maxTitleWidth);
|
449 | } else {
|
450 | maxColumnWidth = Math.min(_this3.maxContentWidth, maxColumnWidth);
|
451 | }
|
452 | }
|
453 | return maxColumnWidth > defaultColumnWidth ? maxColumnWidth : defaultColumnWidth;
|
454 | };
|
455 |
|
456 | this.getContentSize = function (txt, font) {
|
457 | _this3.element = document.createElement('canvas');
|
458 | _this3.context = _this3.element.getContext('2d');
|
459 | _this3.context.font = font;
|
460 | var tsize = { 'width': _this3.context.measureText(txt).width };
|
461 | return tsize.width;
|
462 | };
|
463 |
|
464 | this.setMaxHeaderWidth = function (field) {
|
465 | var maxColumnWidth = _this3.getContentSize(field.name, _this3.fontDetails) + _this3.headerOffsetWidth;
|
466 | maxColumnWidth = maxColumnWidth > _this3.minColumnWidth ? maxColumnWidth : _this3.minColumnWidth;
|
467 |
|
468 | if (_this3.uniqueId) {
|
469 | _this3.savedColumnsWidth[_this3.uniqueId][field.id] = maxColumnWidth;
|
470 | localStorage.setItem('huge-table-column-widths', JSON.stringify(_this3.savedColumnsWidth));
|
471 | }
|
472 |
|
473 | return maxColumnWidth;
|
474 | };
|
475 |
|
476 | this.resizeHeader = function (field) {
|
477 | var columnWidths = _extends({}, _this3.state.columnWidths);
|
478 |
|
479 | columnWidths[field.id] = _this3.setMaxHeaderWidth(field);
|
480 |
|
481 | _this3.setState({
|
482 | columnWidths: columnWidths
|
483 | });
|
484 | };
|
485 |
|
486 | this.resizeAllHeaders = function (fields) {
|
487 | var columnWidths = _extends({}, _this3.state.columnWidths);
|
488 |
|
489 | fields.forEach(function (field) {
|
490 | columnWidths[field.id] = _this3.setMaxHeaderWidth(field);
|
491 | });
|
492 |
|
493 | _this3.setState({
|
494 | columnWidths: columnWidths
|
495 | });
|
496 | };
|
497 |
|
498 | this.getCellContent = function (row, schemaItem) {
|
499 | var content = void 0;
|
500 | if (schemaItem.type === Constants.ColumnTypes.TEXT) {
|
501 | var cellData = Array.isArray(row[schemaItem.name]) ? row[schemaItem.name][0] : row[schemaItem.name];
|
502 | if (cellData !== undefined) {
|
503 | content = cellData.text !== undefined ? cellData.text : '';
|
504 | } else {
|
505 | content = '';
|
506 | }
|
507 | } else if (schemaItem.type === Constants.ColumnTypes.IMAGE) {
|
508 | content = '';
|
509 | } else {
|
510 | content = row[schemaItem.name + '/_text'] !== undefined ? row[schemaItem.name + '/_text'] : row[schemaItem.name];
|
511 | }
|
512 | return content;
|
513 | };
|
514 |
|
515 | this.getCellText = function (cellContent) {
|
516 | if (Array.isArray(cellContent)) {
|
517 | return _this3.getCellText(cellContent[0]);
|
518 | } else if ((typeof cellContent === 'undefined' ? 'undefined' : _typeof(cellContent)) === 'object') {
|
519 | return JSON.stringify(cellContent);
|
520 | } else {
|
521 | return cellContent;
|
522 | }
|
523 | };
|
524 |
|
525 | this.createColumn = function (schemaItem, idx) {
|
526 | var width = _this3.state.columnWidths[schemaItem.id || schemaItem.name];
|
527 | var lastColumn = idx === _this3.state.currentSchema.length - 1 && _this3.state.currentSchema.length > 1;
|
528 | if (_this3.state.shouldShowScrolls && lastColumn) {
|
529 |
|
530 | width = width + 120;
|
531 | }
|
532 | var cellClass = '',
|
533 | headerClass = '';
|
534 | if (_this3.props.showScrollingArrows && _this3.state.shouldShowScrolls) {
|
535 | if (_this3.props.hideRowNumbers && idx === 0) {
|
536 | cellClass = 'hugetable-index-column nudge';
|
537 | } else if (lastColumn) {
|
538 | cellClass = 'last-column';
|
539 | }
|
540 | }
|
541 |
|
542 | if (idx === _this3.props.activeColumnIndex) {
|
543 | cellClass = cellClass + ' active-column';
|
544 | headerClass = 'active-column-header';
|
545 | }
|
546 |
|
547 | return _react2.default.createElement(_fixedDataTable.Column, {
|
548 | cellClassName: cellClass,
|
549 | headerClassName: headerClass,
|
550 | header: function header(props) {
|
551 | return _this3.renderHeader(_extends({}, props, { cellData: { main: schemaItem.name } }));
|
552 | },
|
553 | columnKey: schemaItem.id || schemaItem.name,
|
554 | minWidth: _this3.minColumnWidth,
|
555 | width: width,
|
556 | cell: function cell(props) {
|
557 | return _this3.cellRenderer(_extends({}, props, { schemaItem: schemaItem }));
|
558 | },
|
559 | key: schemaItem.name,
|
560 | isResizable: _this3.props.resizeableColumns,
|
561 | isReorderable: _this3.props.reorderableColumns
|
562 | });
|
563 | };
|
564 |
|
565 | this.renderHeader = function (props) {
|
566 | if (_this3.props.renderers && _this3.props.renderers.HEADER && typeof _this3.props.renderers.HEADER === 'function') {
|
567 | return _react2.default.createElement(
|
568 | _fixedDataTable.Cell,
|
569 | null,
|
570 | _this3.props.renderers.HEADER(props)
|
571 | );
|
572 | } else {
|
573 | return _react2.default.createElement(_HeaderCell.HeaderCell, props);
|
574 | }
|
575 | };
|
576 |
|
577 | this.getCellStyles = function (columnDataType) {
|
578 | var cellStyles = {};
|
579 |
|
580 | if (columnDataType == Constants.ColumnTypes.IMAGE) {
|
581 | cellStyles = _aphrodite.StyleSheet.create({
|
582 | cellStyle: {
|
583 | paddingTop: Constants.IMAGE_CELL_PADDING.cellPaddingTop,
|
584 | paddingBottom: Constants.IMAGE_CELL_PADDING.cellPaddingBottom,
|
585 | paddingLeft: Constants.IMAGE_CELL_PADDING.cellPaddingLeft,
|
586 | paddingRight: Constants.IMAGE_CELL_PADDING.cellPaddingRight
|
587 | }
|
588 | });
|
589 | } else {
|
590 | cellStyles = _aphrodite.StyleSheet.create({
|
591 | cellStyle: {
|
592 | paddingTop: Constants.CELL_PADDING.cellPaddingTop,
|
593 | paddingBottom: Constants.CELL_PADDING.cellPaddingBottom,
|
594 | paddingLeft: Constants.CELL_PADDING.cellPaddingLeft,
|
595 | paddingRight: Constants.CELL_PADDING.cellPaddingRight
|
596 | }
|
597 | });
|
598 | }
|
599 | return cellStyles;
|
600 | };
|
601 |
|
602 | this.cellRenderer = function (_ref) {
|
603 | var rowIndex = _ref.rowIndex,
|
604 | width = _ref.width,
|
605 | height = _ref.height,
|
606 | schemaItem = _ref.schemaItem;
|
607 |
|
608 | var rowObject = _this3.props.data[rowIndex];
|
609 | var cellData = {};
|
610 | cellData.main = rowObject[schemaItem.name];
|
611 | Constants.RETURNED_DATA_TYPES.forEach(function (dataType) {
|
612 | cellData[dataType] = rowObject[schemaItem.name + '/_' + dataType] || null;
|
613 | });
|
614 | var columnDataType = _this3.state.columnNameToDataTypeMap[schemaItem.name];
|
615 | var cellCustomRenderer = _this3.props.renderers && _this3.props.renderers[columnDataType];
|
616 | cellData.type = columnDataType;
|
617 |
|
618 | return _react2.default.createElement(
|
619 | _fixedDataTable.Cell,
|
620 | { className: (0, _aphrodite.css)(_this3.getCellStyles(columnDataType).cellStyle) },
|
621 | CellUtils.getComponentDataType({
|
622 | disableClickEvents: _this3.props.disableClickEvents,
|
623 | columnDataType: columnDataType,
|
624 | cellData: cellData,
|
625 | width: width,
|
626 | height: height,
|
627 | columnKey: schemaItem.id || schemaItem.name,
|
628 | mixedContentImage: _this3.props.options.mixedContentImage,
|
629 | cellCustomRenderer: cellCustomRenderer,
|
630 | rowIndex: rowIndex
|
631 |
|
632 | })
|
633 | );
|
634 | };
|
635 |
|
636 | this.onColumnResizeEndCallback = function (newColumnWidth, columnKey) {
|
637 | _this3.generateColumnWidths(_this3.props.schema, _this3.props.options.width, columnKey, newColumnWidth);
|
638 | };
|
639 |
|
640 | this.onScroll = function (scrollLeft, scrollTop) {
|
641 | _this3.setState({
|
642 | scrollLeft: scrollLeft ? scrollLeft : _this3.state.scrollLeft,
|
643 | scrollTop: scrollTop
|
644 | });
|
645 | if (_this3.props.options.tableScrolled) {
|
646 | _this3.props.options.tableScrolled(scrollLeft, scrollTop);
|
647 | }
|
648 | };
|
649 |
|
650 | this.onContentDimensionsChange = function (contentHeight, contentWidth) {
|
651 | _this3.setState({
|
652 | contentWidth: contentWidth,
|
653 | contentHeight: contentHeight
|
654 | });
|
655 | };
|
656 |
|
657 | this.onColumnReorderEndCallback = function (event) {
|
658 | var columnOrder = _this3.state.columnOrder.filter(function (columnKey) {
|
659 | return columnKey !== event.reorderColumn;
|
660 | });
|
661 |
|
662 | if (event.columnAfter) {
|
663 | var index = columnOrder.indexOf(event.columnAfter);
|
664 | columnOrder.splice(index, 0, event.reorderColumn);
|
665 | } else {
|
666 | columnOrder.push(event.reorderColumn);
|
667 | }
|
668 | _this3.setState({
|
669 | columnOrder: columnOrder
|
670 | });
|
671 | };
|
672 |
|
673 | this.handleMouseEnter = function (scrollVal) {
|
674 | _this3.intervalId = setInterval(function () {
|
675 | return _this3.moveScrollPos(scrollVal);
|
676 | }, 10);
|
677 | };
|
678 |
|
679 | this.stopScrollInterval = function () {
|
680 | clearInterval(_this3.intervalId);
|
681 | _this3.intervalId = undefined;
|
682 | };
|
683 |
|
684 | this.moveScrollPos = function (val) {
|
685 | if (_this3.state.scrollLeft === 0 && val >= 0 || _this3.state.scrollLeft > 0) {
|
686 | var scrollLeft = _this3.state.scrollLeft + val >= 0 ? _this3.state.scrollLeft + val : 0;
|
687 | _this3.scrollAndCheckForArrows(scrollLeft);
|
688 | }
|
689 | if (_this3.state.scrollLeft >= _this3.refs.table.state.maxScrollX) {
|
690 | _this3.stopScrollInterval();
|
691 | }
|
692 | };
|
693 |
|
694 | this.calcElementsWidth = function (elementsArr) {
|
695 | return elementsArr.map(function (e) {
|
696 | return e.getBoundingClientRect().width;
|
697 | }).reduce(function (i, n) {
|
698 | return i + n;
|
699 | }, 0);
|
700 | };
|
701 |
|
702 | this.getChildElements = function () {
|
703 | var headerContainer = _this3.getHeaderContainer();
|
704 | var childElements = headerContainer ? Array.from(_this3.getHeaderContainer().children) : [];
|
705 | return childElements;
|
706 | };
|
707 |
|
708 | this.handleScroll = function (scrollLeft) {
|
709 | _this3.setState({
|
710 | scrollLeft: scrollLeft
|
711 | });
|
712 | return true;
|
713 | };
|
714 |
|
715 | this.checkForScrollArrows = function (scrollLeft, allElementsWidth) {
|
716 | var ALL_ELEMENTS_WIDTH = allElementsWidth ? allElementsWidth : _this3.calcElementsWidth(_this3.getChildElements());
|
717 | var shouldShowScrolls = ALL_ELEMENTS_WIDTH > _this3.props.options.width && _this3.props.showScrollingArrows;
|
718 | _this3.setState({
|
719 | shouldShowScrolls: shouldShowScrolls,
|
720 | shouldActivateLeftScroll: scrollLeft > 0,
|
721 | shouldActivateRightScroll: ALL_ELEMENTS_WIDTH - 1 > _this3.props.options.width + scrollLeft
|
722 | });
|
723 | return true;
|
724 | };
|
725 |
|
726 | this.getListContainerWidth = function () {
|
727 | return _this3.getHeaderContainer().getBoundingClientRect().width;
|
728 | };
|
729 |
|
730 | this.getHeaderContainer = function () {
|
731 | var headerCell = document.querySelector('.hugetable-index-column');
|
732 | return headerCell ? headerCell.parentElement : null;
|
733 | };
|
734 | }; |
\ | No newline at end of file |