forked from Gitlink/forgeplus-react
225 lines
8.2 KiB
JavaScript
225 lines
8.2 KiB
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"; |