dareway-rui
Version:
681 lines (591 loc) • 31.7 kB
JavaScript
;
var _interopRequireDefault = require('@babel/runtime/helpers/interopRequireDefault');
Object.defineProperty(exports, '__esModule', {
value: true
});
exports.default = void 0;
var _objectSpread2 = _interopRequireDefault(require('@babel/runtime/helpers/objectSpread'));
var _extends2 = _interopRequireDefault(require('@babel/runtime/helpers/extends'));
var _classCallCheck2 = _interopRequireDefault(require('@babel/runtime/helpers/classCallCheck'));
var _createClass2 = _interopRequireDefault(require('@babel/runtime/helpers/createClass'));
var _possibleConstructorReturn2 = _interopRequireDefault(require('@babel/runtime/helpers/possibleConstructorReturn'));
var _getPrototypeOf2 = _interopRequireDefault(require('@babel/runtime/helpers/getPrototypeOf'));
var _assertThisInitialized2 = _interopRequireDefault(require('@babel/runtime/helpers/assertThisInitialized'));
var _inherits2 = _interopRequireDefault(require('@babel/runtime/helpers/inherits'));
var _defineProperty2 = _interopRequireDefault(require('@babel/runtime/helpers/defineProperty'));
var _objectWithoutProperties2 = _interopRequireDefault(require('@babel/runtime/helpers/objectWithoutProperties'));
var _react = _interopRequireDefault(require('react'));
var _FocusContext = _interopRequireDefault(require('./FocusContext'));
var _FocusOrderContext = _interopRequireDefault(require('./FocusOrderContext'));
var _FrameConstants = require('../../constants/FrameConstants');
var _hoistNonReactStatics = _interopRequireDefault(require('hoist-non-react-statics'));
var defautCanFocus = function defautCanFocus(props) {
var children = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
if (props.hidden !== undefined && props.hidden) {
return false;
}
for (var i = 0; i < children.length; i++) {
if (children[i].canFocus && children[i].canFocus()) {
return true;
}
}
return false;
};
var defaultFocus = function defaultFocus(props) {
var children = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
var ref = arguments.length > 2 ? arguments[2] : undefined;
for (var i = 0; i < children.length; i++) {
if (children[i].canFocus && children[i].canFocus()) {
children[i].focus();
break;
}
}
};
var noop = function noop() {}; //eventAfterFocus:针对Grid这种，内部处理focus流转的情况，传入focus完了之后，要干的活
var _default = function _default() {
var focusFunctionObj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var focusConfig = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var _focusFunctionObj$can = focusFunctionObj.canFocus,
canFocus = _focusFunctionObj$can === void 0 ? defautCanFocus : _focusFunctionObj$can,
_focusFunctionObj$foc = focusFunctionObj.focus,
focus = _focusFunctionObj$foc === void 0 ? defaultFocus : _focusFunctionObj$foc,
_focusFunctionObj$eve = focusFunctionObj.eventAfterFocus,
eventAfterFocus = _focusFunctionObj$eve === void 0 ? noop : _focusFunctionObj$eve;
var _focusConfig$autoFocu = focusConfig.autoFocus,
autoFocus = _focusConfig$autoFocu === void 0 ? false : _focusConfig$autoFocu,
_focusConfig$isHandle = focusConfig.isHandleFocusEvent,
isHandleFocusEvent = _focusConfig$isHandle === void 0 ? false : _focusConfig$isHandle,
_focusConfig$isHandle2 = focusConfig.isHandleKeyDownEvent,
isHandleKeyDownEvent = _focusConfig$isHandle2 === void 0 ? false : _focusConfig$isHandle2,
_focusConfig$goNextFo = focusConfig.goNextFocusKeys,
goNextFocusKeys =
_focusConfig$goNextFo === void 0
? [_FrameConstants.KEY_CODE.ENTER, _FrameConstants.KEY_CODE.TAB]
: _focusConfig$goNextFo,
_focusConfig$isHandle3 = focusConfig.isHandleOnEnterEvent,
isHandleOnEnterEvent = _focusConfig$isHandle3 === void 0 ? false : _focusConfig$isHandle3,
extralConfig = (0, _objectWithoutProperties2.default)(focusConfig, [
'autoFocus',
'isHandleFocusEvent',
'isHandleKeyDownEvent',
'goNextFocusKeys',
'isHandleOnEnterEvent'
]);
return function wrapWithFocus(WrapedComponent) {
var FocusComponent =
/*#__PURE__*/
(function(_React$Component) {
(0, _inherits2.default)(FocusComponent, _React$Component);
function FocusComponent(props) {
var _this;
(0, _classCallCheck2.default)(this, FocusComponent);
_this = (0, _possibleConstructorReturn2.default)(
this,
(0, _getPrototypeOf2.default)(FocusComponent).call(this, props)
); //传递过来的config
(0, _defineProperty2.default)(
(0, _assertThisInitialized2.default)(_this),
'setCurrentFocusedChild',
function(o) {
if (o === null) {
_this.currentFocusedChild = o;
return;
}
if (!o instanceof FocusComponent) {
throw new Error('setCurrentFocusedChild入参必须为FocusComponent对象实例！请检查！');
}
_this.currentFocusedChild = o;
}
);
(0, _defineProperty2.default)(
(0, _assertThisInitialized2.default)(_this),
'getCurrentFocusedChild',
function() {
return _this.currentFocusedChild;
}
);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'setParent', function(
o
) {
if (!o instanceof _react.default.Component) {
throw new Error('setParent方法入参必须为React.Component对象！');
}
_this.parent = o;
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'getParent', function() {
return _this.parent;
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'addChild', function(o) {
if (!o) {
return;
}
if (!o instanceof _react.default.Component) {
throw new Error('addChild方法入参必须为React.Component对象！');
}
o.setParent((0, _assertThisInitialized2.default)(_this));
_this.children.push(o);
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'removeChild', function(
o
) {
if (!o) {
return;
}
var i = 0,
len = 0,
child = null;
for (i = 0, len = _this.children.length; i < len; i++) {
child = _this.children[i];
if (child == o) {
_this.children.splice(i, 1);
break;
}
}
});
(0, _defineProperty2.default)(
(0, _assertThisInitialized2.default)(_this),
'getChildren',
function() {
return _this.children;
}
);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'notifyFocus', function(
focusedObj
) {
_this.setCurrentFocusedChild(focusedObj);
if (_this.getParent()) {
_this.getParent().notifyFocus((0, _assertThisInitialized2.default)(_this));
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'focusNext', function() {
if (_this.getParent()) {
_this.getParent().focusNextChild();
}
});
(0, _defineProperty2.default)(
(0, _assertThisInitialized2.default)(_this),
'focusNextChild',
function() {
var i = null,
o = null,
currentFocusedChildIndex = null,
nextFocusedChildObj = null;
if (_this.getCurrentFocusedChild() === null) {
return;
} //找到能跳转的下一个子对象
var children = _this.getChildren();
for (i = 0; i < children.length; i++) {
o = children[i];
if (o === _this.getCurrentFocusedChild()) {
currentFocusedChildIndex = i;
}
if (currentFocusedChildIndex !== null && i > currentFocusedChildIndex && o.canFocus()) {
nextFocusedChildObj = o;
break;
}
}
if (nextFocusedChildObj === null) {
if (_this.getParent()) {
_this.setCurrentFocusedChild(null);
_this.getParent().focusNextChild();
}
} else {
nextFocusedChildObj.focus();
}
}
);
(0, _defineProperty2.default)(
(0, _assertThisInitialized2.default)(_this),
'isChildrenReseting',
function() {
return _this.isChildrenNeedReset;
}
);
(0, _defineProperty2.default)(
(0, _assertThisInitialized2.default)(_this),
'handleWhenDidUpdateAsChild',
function() {
//如果父亲的isChildrenReset标记为true，孩子重新告知父亲自己的实例，
var parent = _this.getParent();
if (parent && parent.isChildrenReseting()) {
_this.addChildToParent((0, _assertThisInitialized2.default)(_this));
}
}
);
(0, _defineProperty2.default)(
(0, _assertThisInitialized2.default)(_this),
'handleWhenDidUpdateAsParent',
function() {
_this.isChildrenNeedReset = false;
}
);
(0, _defineProperty2.default)(
(0, _assertThisInitialized2.default)(_this),
'handleCompareWhenPropsReceive',
function(nextProps) {
var nextChildren = _react.default.Children.toArray(nextProps.children);
var currentChildren = _react.default.Children.toArray(_this.props.children);
var isSame = true;
if (nextChildren.length !== currentChildren.length) {
isSame = false;
}
return isSame;
}
);
(0, _defineProperty2.default)(
(0, _assertThisInitialized2.default)(_this),
'handlePropsReceiveAsParent',
function(nextProps) {
var isSame = _this.handleCompareWhenPropsReceive(nextProps);
if (!isSame) {
_this.children = [];
_this.isChildrenNeedReset = true;
}
}
);
(0, _defineProperty2.default)(
(0, _assertThisInitialized2.default)(_this),
'handlePropsReceiveAsChild',
function(nextProps) {}
);
(0, _defineProperty2.default)(
(0, _assertThisInitialized2.default)(_this),
'handleDidMountAsParent',
function() {}
);
(0, _defineProperty2.default)(
(0, _assertThisInitialized2.default)(_this),
'handleDidMountAsChild',
function() {
if (_this.addChildToParent) {
_this.addChildToParent((0, _assertThisInitialized2.default)(_this));
}
}
);
(0, _defineProperty2.default)(
(0, _assertThisInitialized2.default)(_this),
'handleWillMountAsParent',
function() {}
);
(0, _defineProperty2.default)(
(0, _assertThisInitialized2.default)(_this),
'handleWillMountAsChild',
function() {
if (_this.removeChildFromParent) {
_this.removeChildFromParent((0, _assertThisInitialized2.default)(_this));
}
}
);
(0, _defineProperty2.default)(
(0, _assertThisInitialized2.default)(_this),
'handleAutoFocus',
function() {
if (_this.isAutoFocus) {
_this.focus();
}
}
);
(0, _defineProperty2.default)(
(0, _assertThisInitialized2.default)(_this),
'handleEventAfterFocus',
function() {
var children = _this.getChildren();
if (eventAfterFocus) {
eventAfterFocus(
_this.props,
children,
_this.focusDomRef,
_this.focusNext,
_this.noticeFocus
);
}
}
);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'canFocus', function() {
var children = _this.getChildren();
return canFocus(_this.props, children);
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'focus', function() {
var children = _this.getChildren();
focus(_this.props, children, _this.focusDomRef, _this.focusNext, _this.noticeFocus, _this.ref);
});
(0, _defineProperty2.default)(
(0, _assertThisInitialized2.default)(_this),
'noticeFocus',
function() {
_this.notifyFocus((0, _assertThisInitialized2.default)(_this));
}
);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'handleFocus', function(
value,
event
) {
var onFocus = _this.props.onFocus;
if (_this.isHandleFocusEvent) {
_this.noticeFocus();
}
if (onFocus) {
onFocus(value, event);
}
});
(0, _defineProperty2.default)(
(0, _assertThisInitialized2.default)(_this),
'handleKeyDown',
function(value, event) {
var onKeyDown = _this.props.onKeyDown;
if (_this.isHandleKeyDownEvent || _this.isHandleOnEnterEvent) {
var key = event.which;
if (_this.goNextFocusKeys.indexOf(key) !== -1) {
_this.focusNext();
event.stopPropagation();
event.preventDefault();
}
}
if (onKeyDown) {
for (
var _len = arguments.length, rest = new Array(_len > 2 ? _len - 2 : 0), _key = 2;
_key < _len;
_key++
) {
rest[_key - 2] = arguments[_key];
}
onKeyDown.apply(void 0, [value, event].concat(rest));
}
}
);
_this.isAutoFocus = autoFocus || _this.props.autoFocus;
_this.isHandleFocusEvent = isHandleFocusEvent;
_this.isHandleKeyDownEvent = isHandleKeyDownEvent;
_this.goNextFocusKeys = goNextFocusKeys;
_this.isHandleOnEnterEvent = isHandleOnEnterEvent;
_this.focusDomRef = _react.default.createRef(); //对象实例
_this.ref = _react.default.createRef();
_this.state = {
error: null,
errorInfo: null
}; //循环focus对象
_this.children = [];
_this.currentFocusedChild = null;
_this.parent = null; //父亲通过Context传递过来的变量
_this.addChildToParent = null;
_this.removeChildFromParent = null; //标记是否孩子动态变化了，需要重置孩子
_this.isChildrenNeedReset = false;
_this.focusProvider = {
addChild: _this.addChild,
removeChild: _this.removeChild
};
return _this;
}
(0, _createClass2.default)(FocusComponent, [
{
key: 'componentDidCatch',
/***
* focusedChildrenObject相关，动态添加的时候的顺序问题
*/
value: function componentDidCatch(error, errorInfo) {
this.setState({
error: error,
errorInfo: errorInfo
});
}
},
{
key: 'componentDidMount',
value: function componentDidMount() {
this.handleDidMountAsParent();
this.handleDidMountAsChild(); //自动focus
this.handleAutoFocus();
}
},
{
key: 'componentWillUnmount',
value: function componentWillUnmount() {
this.handleWillMountAsParent();
this.handleWillMountAsChild();
}
},
{
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps, nextContext) {
this.handlePropsReceiveAsParent(nextProps);
this.handlePropsReceiveAsChild(nextProps);
}
},
{
key: 'componentDidUpdate',
value: function componentDidUpdate(prevProps, prevState, snapshot) {
this.handleWhenDidUpdateAsParent();
this.handleWhenDidUpdateAsChild(); //自动focus
// this.handleAutoFocus();
}
/**
* focus 客户化相关方法
*
* **/
},
{
key: 'render',
value: function render() {
var _this2 = this;
if (this.state.errorInfo) {
return _react.default.createElement(
'div',
null,
_react.default.createElement('h2', null, 'Exception'),
this.state.error &&
this.state.error.message &&
_react.default.createElement('h2', null, this.state.error.message),
_react.default.createElement(
'details',
{
style: {
whiteSpace: 'pre-wrap'
}
},
this.state.error && this.state.error.toString(),
_react.default.createElement('br', null),
this.state.errorInfo.componentStack
)
);
} // onFocus，onKeyDown前加钩子
var _this$props = this.props,
onFocus = _this$props.onFocus,
onKeyDown = _this$props.onKeyDown,
onEnter = _this$props.onEnter,
forwardedRef = _this$props.forwardedRef,
restProps = (0, _objectWithoutProperties2.default)(_this$props, [
'onFocus',
'onKeyDown',
'onEnter',
'forwardedRef'
]);
if (forwardedRef) {
this.focusDomRef = forwardedRef;
} // 兼容StringInput，onEnter事件
var extralProps = {};
if (this.isHandleOnEnterEvent) {
extralProps = {
onEnter: this.handleKeyDown
};
}
return _react.default.createElement(_FocusContext.default.Consumer, null, function(_ref) {
var addChild = _ref.addChild,
removeChild = _ref.removeChild;
_this2.addChildToParent = addChild;
_this2.removeChildFromParent = removeChild;
return _react.default.createElement(
_FocusContext.default.Provider,
{
value: _this2.focusProvider
},
_react.default.createElement(
WrapedComponent,
(0, _extends2.default)(
{
ref: _this2.ref,
forwardedRef: _this2.focusDomRef,
onFocus: _this2.handleFocus,
onKeyDown: _this2.handleKeyDown,
eventAfterFocus: _this2.handleEventAfterFocus
},
extralProps,
restProps
)
)
);
});
}
}
]);
return FocusComponent;
})(_react.default.Component);
(0, _defineProperty2.default)(
FocusComponent,
'displayName',
'withFocus('.concat(WrapedComponent.name || WrapedComponent.displayName, ')')
);
(0, _hoistNonReactStatics.default)(FocusComponent, WrapedComponent);
var WrapFocusComponentForOrder =
/*#__PURE__*/
(function(_React$Component2) {
(0, _inherits2.default)(WrapFocusComponentForOrder, _React$Component2);
function WrapFocusComponentForOrder(props) {
var _this3;
(0, _classCallCheck2.default)(this, WrapFocusComponentForOrder);
_this3 = (0, _possibleConstructorReturn2.default)(
this,
(0, _getPrototypeOf2.default)(WrapFocusComponentForOrder).call(this, props)
);
(0, _defineProperty2.default)(
(0, _assertThisInitialized2.default)(_this3),
'isChildrenReseting',
function() {
return _this3.isChildrenNeedReset;
}
);
(0, _defineProperty2.default)(
(0, _assertThisInitialized2.default)(_this3),
'handleCompareWhenPropsReceive',
function(nextProps) {
var nextChildren = _react.default.Children.toArray(nextProps.children);
var currentChildren = _react.default.Children.toArray(_this3.props.children);
var isSame = true;
if (nextChildren.length !== currentChildren.length) {
isSame = false;
}
return isSame;
}
);
_this3.isChildrenNeedReset = false;
_this3.focusOrderProvider = {};
return _this3;
}
(0, _createClass2.default)(WrapFocusComponentForOrder, [
{
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps, nextContext) {
var isSame = this.handleCompareWhenPropsReceive(nextProps);
if (!isSame) {
this.isChildrenNeedReset = true;
}
}
},
{
key: 'componentDidUpdate',
value: function componentDidUpdate(prevProps, prevState, snapshot) {
this.isChildrenNeedReset = false;
}
},
{
key: 'render',
value: function render() {
var _this4 = this;
if (this.isChildrenReseting()) {
var oldObj = this.focusProvider;
this.focusOrderProvider = (0, _objectSpread2.default)({}, this.focusProvider);
}
return _react.default.createElement(_FocusOrderContext.default.Consumer, null, function() {
return _react.default.createElement(
_FocusOrderContext.default.Provider,
{
value: _this4.focusOrderProvider
},
_react.default.createElement(FocusComponent, _this4.props)
);
});
}
}
]);
return WrapFocusComponentForOrder;
})(_react.default.Component);
(0, _defineProperty2.default)(
WrapFocusComponentForOrder,
'displayName',
'withFocusOrder(withFocus('.concat(WrapedComponent.name || WrapedComponent.displayName, '))')
);
(0, _hoistNonReactStatics.default)(WrapFocusComponentForOrder, FocusComponent);
return WrapFocusComponentForOrder;
};
};
exports.default = _default;
//@ sourceMappingURL=withFocus.js.map