mirror of
https://github.com/wu736139669/ASHEBShop-h5.git
synced 2026-10-07 19:26:23 +00:00
186 lines
7.0 KiB
JavaScript
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; |