react-virtualized
Version:
React components for efficiently rendering large, scrollable lists and tabular data
225 lines (187 loc) • 8.4 kB
JavaScript
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _class, _temp;
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
import * as React from 'react';
import { polyfill } from 'react-lifecycles-compat';
/**
* This HOC decorates a virtualized component and responds to arrow-key events by scrolling one row or column at a time.
*/
var ArrowKeyStepper = (_temp = _class =
/*#__PURE__*/
function (_React$PureComponent) {
_inherits(ArrowKeyStepper, _React$PureComponent);
function ArrowKeyStepper() {
var _getPrototypeOf2;
var _this;
_classCallCheck(this, ArrowKeyStepper);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ArrowKeyStepper)).call.apply(_getPrototypeOf2, [this].concat(args)));
_defineProperty(_assertThisInitialized(_this), "state", {
scrollToColumn: 0,
scrollToRow: 0,
instanceProps: {
prevScrollToColumn: 0,
prevScrollToRow: 0
}
});
_defineProperty(_assertThisInitialized(_this), "_columnStartIndex", 0);
_defineProperty(_assertThisInitialized(_this), "_columnStopIndex", 0);
_defineProperty(_assertThisInitialized(_this), "_rowStartIndex", 0);
_defineProperty(_assertThisInitialized(_this), "_rowStopIndex", 0);
_defineProperty(_assertThisInitialized(_this), "_onKeyDown", function (event) {
var _this$props = _this.props,
columnCount = _this$props.columnCount,
disabled = _this$props.disabled,
mode = _this$props.mode,
rowCount = _this$props.rowCount;
if (disabled) {
return;
}
var _this$_getScrollState = _this._getScrollState(),
scrollToColumnPrevious = _this$_getScrollState.scrollToColumn,
scrollToRowPrevious = _this$_getScrollState.scrollToRow;
var _this$_getScrollState2 = _this._getScrollState(),
scrollToColumn = _this$_getScrollState2.scrollToColumn,
scrollToRow = _this$_getScrollState2.scrollToRow; // The above cases all prevent default event event behavior.
// This is to keep the grid from scrolling after the snap-to update.
switch (event.key) {
case 'ArrowDown':
scrollToRow = mode === 'cells' ? Math.min(scrollToRow + 1, rowCount - 1) : Math.min(_this._rowStopIndex + 1, rowCount - 1);
break;
case 'ArrowLeft':
scrollToColumn = mode === 'cells' ? Math.max(scrollToColumn - 1, 0) : Math.max(_this._columnStartIndex - 1, 0);
break;
case 'ArrowRight':
scrollToColumn = mode === 'cells' ? Math.min(scrollToColumn + 1, columnCount - 1) : Math.min(_this._columnStopIndex + 1, columnCount - 1);
break;
case 'ArrowUp':
scrollToRow = mode === 'cells' ? Math.max(scrollToRow - 1, 0) : Math.max(_this._rowStartIndex - 1, 0);
break;
}
if (scrollToColumn !== scrollToColumnPrevious || scrollToRow !== scrollToRowPrevious) {
event.preventDefault();
_this._updateScrollState({
scrollToColumn: scrollToColumn,
scrollToRow: scrollToRow
});
}
});
_defineProperty(_assertThisInitialized(_this), "_onSectionRendered", function (_ref) {
var columnStartIndex = _ref.columnStartIndex,
columnStopIndex = _ref.columnStopIndex,
rowStartIndex = _ref.rowStartIndex,
rowStopIndex = _ref.rowStopIndex;
_this._columnStartIndex = columnStartIndex;
_this._columnStopIndex = columnStopIndex;
_this._rowStartIndex = rowStartIndex;
_this._rowStopIndex = rowStopIndex;
});
return _this;
}
_createClass(ArrowKeyStepper, [{
key: "setScrollIndexes",
value: function setScrollIndexes(_ref2) {
var scrollToColumn = _ref2.scrollToColumn,
scrollToRow = _ref2.scrollToRow;
this.setState({
scrollToRow: scrollToRow,
scrollToColumn: scrollToColumn
});
}
}, {
key: "render",
value: function render() {
var _this$props2 = this.props,
className = _this$props2.className,
children = _this$props2.children;
var _this$_getScrollState3 = this._getScrollState(),
scrollToColumn = _this$_getScrollState3.scrollToColumn,
scrollToRow = _this$_getScrollState3.scrollToRow;
return React.createElement("div", {
className: className,
onKeyDown: this._onKeyDown
}, children({
onSectionRendered: this._onSectionRendered,
scrollToColumn: scrollToColumn,
scrollToRow: scrollToRow
}));
}
}, {
key: "_getScrollState",
value: function _getScrollState() {
return this.props.isControlled ? this.props : this.state;
}
}, {
key: "_updateScrollState",
value: function _updateScrollState(_ref3) {
var scrollToColumn = _ref3.scrollToColumn,
scrollToRow = _ref3.scrollToRow;
var _this$props3 = this.props,
isControlled = _this$props3.isControlled,
onScrollToChange = _this$props3.onScrollToChange;
if (typeof onScrollToChange === 'function') {
onScrollToChange({
scrollToColumn: scrollToColumn,
scrollToRow: scrollToRow
});
}
if (!isControlled) {
this.setState({
scrollToColumn: scrollToColumn,
scrollToRow: scrollToRow
});
}
}
}], [{
key: "getDerivedStateFromProps",
value: function getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.isControlled) {
return {};
}
if (nextProps.scrollToColumn !== prevState.instanceProps.prevScrollToColumn || nextProps.scrollToRow !== prevState.instanceProps.prevScrollToRow) {
return _objectSpread({}, prevState, {
scrollToColumn: nextProps.scrollToColumn,
scrollToRow: nextProps.scrollToRow,
instanceProps: {
prevScrollToColumn: nextProps.scrollToColumn,
prevScrollToRow: nextProps.scrollToRow
}
});
}
return {};
}
}]);
return ArrowKeyStepper;
}(React.PureComponent), _defineProperty(_class, "propTypes", process.env.NODE_ENV === 'production' ? null : {
"children": PropTypes.func.isRequired,
"className": PropTypes.string,
"columnCount": PropTypes.number.isRequired,
"disabled": PropTypes.bool.isRequired,
"isControlled": PropTypes.bool.isRequired,
"mode": PropTypes.oneOf(["cells", "edges"]).isRequired,
"onScrollToChange": PropTypes.func,
"rowCount": PropTypes.number.isRequired,
"scrollToColumn": PropTypes.number.isRequired,
"scrollToRow": PropTypes.number.isRequired
}), _temp);
_defineProperty(ArrowKeyStepper, "defaultProps", {
disabled: false,
isControlled: false,
mode: 'edges',
scrollToColumn: 0,
scrollToRow: 0
});
polyfill(ArrowKeyStepper);
export default ArrowKeyStepper;
import { bpfrpt_proptype_RenderedSection } from "../Grid";
import { bpfrpt_proptype_ScrollIndices } from "./types";
import PropTypes from "prop-types";