Files
2017-05-10 16:33:00 +08:00

186 lines
7.0 KiB
JavaScript

'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
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 _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
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; }
/**
* 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 _react2.default.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;
}(_react.PureComponent);
ArrowKeyStepper.defaultProps = {
disabled: false,
mode: 'edges',
scrollToColumn: 0,
scrollToRow: 0
};
exports.default = ArrowKeyStepper;
process.env.NODE_ENV !== "production" ? ArrowKeyStepper.propTypes = {
children: _propTypes2.default.func.isRequired,
className: _propTypes2.default.string,
columnCount: _propTypes2.default.number.isRequired,
disabled: _propTypes2.default.bool.isRequired,
mode: _propTypes2.default.oneOf(['cells', 'edges']),
rowCount: _propTypes2.default.number.isRequired,
scrollToColumn: _propTypes2.default.number.isRequired,
scrollToRow: _propTypes2.default.number.isRequired
} : void 0;