@integec/grid-tools
Version:
Integ Grid Tools
290 lines (253 loc) • 12.5 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
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; };
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; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactVirtualized = require('react-virtualized');
var _computeGridProps2 = require('../computeGridProps');
var _computeGridProps3 = _interopRequireDefault(_computeGridProps2);
var _scrollbarSize = require('dom-helpers/util/scrollbarSize');
var _scrollbarSize2 = _interopRequireDefault(_scrollbarSize);
var _VirtualizedContext = require('./VirtualizedContext');
var _cellRender = require('./cellRender');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
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; }
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; }
// import CellEditContainer from './CellEditContainer'
var colWidthOf = function colWidthOf(cols) {
return function (_ref) {
var index = _ref.index;
return cols[index].width;
};
};
var computeScrollTo = function computeScrollTo(_ref2) {
var contentGrid = _ref2.contentGrid,
getSelectionInfo = _ref2.gridRenderProps.getSelectionInfo,
fixedHeaderWidth = _ref2.fixedHeaderWidth;
var scrollPane = contentGrid && contentGrid._scrollingContainer;
if (scrollPane != null) {
var scrollLeft = scrollPane.scrollLeft;
// const scrollTop = scrollPane.scrollTop
var selectionInfo = getSelectionInfo();
var scrollToColumn = selectionInfo.rawPositions.x2;
var scrollToRow = selectionInfo.rawPositions.y2;
// console.log(scrollLeft, scrollTop)
//
var offSet = contentGrid.getOffsetForCell({
alignment: 'start',
columnIndex: scrollToColumn,
rowIndex: scrollToRow
});
if (scrollLeft + fixedHeaderWidth > offSet.scrollLeft) return { scrollToColumn: 0, scrollToRow: scrollToRow };
return { scrollToColumn: scrollToColumn, scrollToRow: scrollToRow };
}
return {};
};
//
//
var VirtualizedRender = function (_React$Component) {
_inherits(VirtualizedRender, _React$Component);
function VirtualizedRender() {
_classCallCheck(this, VirtualizedRender);
return _possibleConstructorReturn(this, (VirtualizedRender.__proto__ || Object.getPrototypeOf(VirtualizedRender)).apply(this, arguments));
}
_createClass(VirtualizedRender, [{
key: 'render',
value: function render() {
var _this2 = this;
var _props = this.props,
_props$renderOptions = _props.renderOptions,
renderOptions = _props$renderOptions === undefined ? {} : _props$renderOptions,
gridRenderProps = _props.gridRenderProps;
var headers = gridRenderProps.headers,
data = gridRenderProps.data,
getContainerProps = gridRenderProps.getContainerProps,
getClipboardHelperProps = gridRenderProps.getClipboardHelperProps,
getSelectionInfo = gridRenderProps.getSelectionInfo;
var style = renderOptions.style,
className = renderOptions.className,
_renderOptions$height = renderOptions.height,
height = _renderOptions$height === undefined ? 600 : _renderOptions$height,
_renderOptions$width = renderOptions.width,
width = _renderOptions$width === undefined ? 1100 : _renderOptions$width,
_renderOptions$rowHei = renderOptions.rowHeight,
rowHeight = _renderOptions$rowHei === undefined ? 23 : _renderOptions$rowHei,
_renderOptions$header = renderOptions.headerRowHeight,
headerRowHeight = _renderOptions$header === undefined ? 60 : _renderOptions$header,
_renderOptions$fixedC = renderOptions.fixedColCount,
fixedColCount = _renderOptions$fixedC === undefined ? 0 : _renderOptions$fixedC,
autoFixColByKey = renderOptions.autoFixColByKey,
_renderOptions$cellRe = renderOptions.cellRender,
cellRender = _renderOptions$cellRe === undefined ? _cellRender.defaultCellRender : _renderOptions$cellRe,
_renderOptions$rowHea = renderOptions.rowHeaderRender,
rowHeaderRender = _renderOptions$rowHea === undefined ? _cellRender.defaultRowHeaderRender : _renderOptions$rowHea;
var _computeGridProps = (0, _computeGridProps3.default)({
headers: headers,
data: data,
rowHeight: rowHeight,
width: width,
height: height,
scrollBarWidthAdjustment: (0, _scrollbarSize2.default)(),
scrollBarHeightAdjustment: (0, _scrollbarSize2.default)(),
fixedColCount: fixedColCount,
autoFixColByKey: autoFixColByKey,
headerRowHeight: headerRowHeight
}),
scrollY = _computeGridProps.scrollY,
scrollX = _computeGridProps.scrollX,
numOfFixedCols = _computeGridProps.numOfFixedCols,
fixedHeaderWidth = _computeGridProps.fixedHeaderWidth,
totalWidth = _computeGridProps.totalWidth;
// const offSetColumn = numOfFixedCols === 0 ? undefined : withColumnOffset(numOfFixedCols)
var dataRender = (0, _cellRender.cellRenderWrapper)()(cellRender);
// const dataCellRender = cellRenderWrapper(offSetColumn)(cellRender)
var headerRender = (0, _cellRender.cellRenderWrapper)()(rowHeaderRender);
// const upperRightRender = cellRenderWrapper(offSetColumn)(rowHeaderRender)
var scrollInfo = computeScrollTo({
contentGrid: this.contentGrid,
gridRenderProps: gridRenderProps,
fixedHeaderWidth: fixedHeaderWidth
});
return _react2.default.createElement(
_VirtualizedContext.Provider,
{ value: gridRenderProps },
_react2.default.createElement(
_reactVirtualized.ScrollSync,
null,
function (_ref3) {
var clientHeight = _ref3.clientHeight,
clientWidth = _ref3.clientWidth,
onScroll = _ref3.onScroll,
scrollHeight = _ref3.scrollHeight,
scrollLeft = _ref3.scrollLeft,
scrollTop = _ref3.scrollTop,
scrollWidth = _ref3.scrollWidth;
return _react2.default.createElement(
'div',
_extends({
style: _extends({ position: 'relative' }, style),
className: className
}, getContainerProps({ width: width, height: height, refKey: 'ref' }), {
tabIndex: '0'
}),
_react2.default.createElement('input', getClipboardHelperProps()),
_react2.default.createElement(
'div',
{
style: {
position: 'absolute',
left: '0px',
top: '0px'
}
},
_react2.default.createElement(_reactVirtualized.Grid, {
style: { overflow: 'hidden' },
cellRenderer: headerRender,
columnWidth: colWidthOf(headers),
columnCount: headers.length,
height: headerRowHeight,
rowHeight: headerRowHeight,
rowCount: 1,
scrollLeft: scrollLeft,
width: width
})
),
_react2.default.createElement(
'div',
{
style: {
position: 'absolute',
left: '0px',
top: headerRowHeight + 'px'
}
},
_react2.default.createElement(_reactVirtualized.Grid, _extends({
cellRenderer: dataRender,
columnWidth: colWidthOf(headers),
columnCount: headers.length,
height: height - headerRowHeight,
rowHeight: rowHeight,
rowCount: data.length,
onScroll: onScroll,
width: width + (0, _scrollbarSize2.default)()
}, scrollInfo, {
ref: function ref(n) {
_this2.contentGrid = n;
}
}))
),
numOfFixedCols > 0 && _react2.default.createElement(
'div',
{
style: {
position: 'absolute',
left: '0px',
top: '0px'
}
},
_react2.default.createElement(_reactVirtualized.Grid, {
cellRenderer: headerRender,
columnWidth: colWidthOf(headers),
columnCount: numOfFixedCols,
height: headerRowHeight,
rowHeight: headerRowHeight,
rowCount: 1,
width: fixedHeaderWidth
})
),
numOfFixedCols > 0 && _react2.default.createElement(
'div',
{
style: {
position: 'absolute',
left: '0px',
top: headerRowHeight + 'px',
backgroundColor: 'white',
borderRight: '1px solid #ccc'
}
},
_react2.default.createElement(_reactVirtualized.Grid, {
style: { overflow: 'hidden' },
cellRenderer: dataRender,
columnWidth: colWidthOf(headers),
columnCount: numOfFixedCols,
height: height - headerRowHeight - (0, _scrollbarSize2.default)(),
rowHeight: rowHeight,
rowCount: data.length,
scrollTop: scrollTop,
width: fixedHeaderWidth
})
),
scrollY && _react2.default.createElement('div', {
style: {
position: 'absolute',
left: Math.min(width, totalWidth) + 'px',
width: (0, _scrollbarSize2.default)() + (scrollX ? 0 : width - totalWidth) + 'px',
height: headerRowHeight + 'px',
top: '0px',
backgroundColor: 'steelblue',
borderRight: '1px solid #ccc',
borderBottom: '1px solid #ccc',
// borderLeft: '1px solid #ccc',
borderTopRightRadius: '3px'
}
})
);
}
)
);
}
}]);
return VirtualizedRender;
}(_react2.default.Component);
var virtualizedGridRenderer = function virtualizedGridRenderer(renderOptions) {
return function (gridRenderProps) {
return _react2.default.createElement(VirtualizedRender, { renderOptions: renderOptions, gridRenderProps: gridRenderProps });
};
};
exports.default = virtualizedGridRenderer;
//# sourceMappingURL=virtualizedRenderer.js.map