Files
ASHEBShop-h5/node_modules/react-virtualized/dist/es/ArrowKeyStepper/ArrowKeyStepper.js
T
2017-05-10 16:33:00 +08:00

171 lines
5.6 KiB
JavaScript

import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _createClass from 'babel-runtime/helpers/createClass';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
import PropTypes from 'prop-types';
import React, { PureComponent } from 'react';
/**
* This HOC decorates a virtualized component and responds to arrow-key events by scrolling one row or column at a time.
*/
var ArrowKeyStepper = function (_PureComponent) {
_inherits(ArrowKeyStepper, _PureComponent);
function ArrowKeyStepper(props, context) {
_classCallCheck(this, ArrowKeyStepper);
var _this = _possibleConstructorReturn(this, (ArrowKeyStepper.__proto__ || _Object$getPrototypeOf(ArrowKeyStepper)).call(this, props, context));
_this.state = {
scrollToColumn: props.scrollToColumn,
scrollToRow: props.scrollToRow
};
_this._columnStartIndex = 0;
_this._columnStopIndex = 0;
_this._rowStartIndex = 0;
_this._rowStopIndex = 0;
_this._onKeyDown = _this._onKeyDown.bind(_this);
_this._onSectionRendered = _this._onSectionRendered.bind(_this);
return _this;
}
_createClass(ArrowKeyStepper, [{
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
var scrollToColumn = nextProps.scrollToColumn,
scrollToRow = nextProps.scrollToRow;
var _props = this.props,
prevScrollToColumn = _props.scrollToColumn,
prevScrollToRow = _props.scrollToRow;
if (prevScrollToColumn !== scrollToColumn && prevScrollToRow !== scrollToRow) {
this.setState({
scrollToColumn: scrollToColumn,
scrollToRow: scrollToRow
});
} else if (prevScrollToColumn !== scrollToColumn) {
this.setState({ scrollToColumn: scrollToColumn });
} else if (prevScrollToRow !== scrollToRow) {
this.setState({ scrollToRow: scrollToRow });
}
}
}, {
key: 'setScrollIndexes',
value: function setScrollIndexes(_ref) {
var scrollToColumn = _ref.scrollToColumn,
scrollToRow = _ref.scrollToRow;
this.setState({
scrollToRow: scrollToRow,
scrollToColumn: scrollToColumn
});
}
}, {
key: 'render',
value: function render() {
var _props2 = this.props,
className = _props2.className,
children = _props2.children;
var _state = this.state,
scrollToColumn = _state.scrollToColumn,
scrollToRow = _state.scrollToRow;
return React.createElement(
'div',
{
className: className,
onKeyDown: this._onKeyDown
},
children({
onSectionRendered: this._onSectionRendered,
scrollToColumn: scrollToColumn,
scrollToRow: scrollToRow
})
);
}
}, {
key: '_onKeyDown',
value: function _onKeyDown(event) {
var _props3 = this.props,
columnCount = _props3.columnCount,
disabled = _props3.disabled,
mode = _props3.mode,
rowCount = _props3.rowCount;
if (disabled) {
return;
}
var _state2 = this.state,
scrollToColumnPrevious = _state2.scrollToColumn,
scrollToRowPrevious = _state2.scrollToRow;
var _state3 = this.state,
scrollToColumn = _state3.scrollToColumn,
scrollToRow = _state3.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.setState({ scrollToColumn: scrollToColumn, scrollToRow: scrollToRow });
}
}
}, {
key: '_onSectionRendered',
value: function _onSectionRendered(_ref2) {
var columnStartIndex = _ref2.columnStartIndex,
columnStopIndex = _ref2.columnStopIndex,
rowStartIndex = _ref2.rowStartIndex,
rowStopIndex = _ref2.rowStopIndex;
this._columnStartIndex = columnStartIndex;
this._columnStopIndex = columnStopIndex;
this._rowStartIndex = rowStartIndex;
this._rowStopIndex = rowStopIndex;
}
}]);
return ArrowKeyStepper;
}(PureComponent);
ArrowKeyStepper.defaultProps = {
disabled: false,
mode: 'edges',
scrollToColumn: 0,
scrollToRow: 0
};
export default ArrowKeyStepper;
process.env.NODE_ENV !== "production" ? ArrowKeyStepper.propTypes = {
children: PropTypes.func.isRequired,
className: PropTypes.string,
columnCount: PropTypes.number.isRequired,
disabled: PropTypes.bool.isRequired,
mode: PropTypes.oneOf(['cells', 'edges']),
rowCount: PropTypes.number.isRequired,
scrollToColumn: PropTypes.number.isRequired,
scrollToRow: PropTypes.number.isRequired
} : void 0;