zent
Version:
一套前端设计语言和基于React的实现
413 lines (319 loc) • 11.2 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _createClass2 = require('babel-runtime/helpers/createClass');
var _createClass3 = _interopRequireDefault(_createClass2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
require('react');
var _capitalize = require('lodash/capitalize');
var _capitalize2 = _interopRequireDefault(_capitalize);
var _throttle = require('lodash/throttle');
var _throttle2 = _interopRequireDefault(_throttle);
var _uniq = require('lodash/uniq');
var _uniq2 = _interopRequireDefault(_uniq);
var _isBrowser = require('../../utils/isBrowser');
var _isBrowser2 = _interopRequireDefault(_isBrowser);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _Trigger2 = require('./Trigger');
var _Trigger3 = _interopRequireDefault(_Trigger2);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var MOUSE_EVENT_WHITE_LIST = ['down', 'up', 'move', 'over', 'out', 'enter', 'leave'];
function isMouseEventSuffix(suffix) {
return MOUSE_EVENT_WHITE_LIST.indexOf(suffix) !== -1;
}
// Hover识别的状态
var HoverState = {
Init: 1,
// Leave识别开始必须先由内出去
Started: 2,
// 延迟等待中
Pending: 3,
Finish: 255
};
/**
* 创建一个新state，每个state是一次性的，识别完成后需要创建一个新的state
*
* @param {string} name state的名称
* @param {function} onFinish 识别成功时的回调函数
*/
var makeState = function makeState(name, onFinish) {
var initState = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : HoverState.Init;
var state = initState;
return {
transit: function transit(nextState) {
// console.log(`${name}: ${state} -> ${nextState}`); // eslint-disable-line
state = nextState;
if (state === HoverState.Finish) {
onFinish();
}
},
is: function is(st) {
return st === state;
},
name: name
};
};
function forEachHook(hooks, action) {
if (!hooks) {
return;
}
if (!_isBrowser2['default']) return;
var hookNames = Object.keys(hooks);
hookNames.forEach(function (hookName) {
var eventName = isMouseEventSuffix(hookName) ? 'mouse' + hookName : hookName;
if (action === 'install') {
window.addEventListener(eventName, hooks[hookName], true);
} else if (action === 'uninstall') {
window.removeEventListener(eventName, hooks[hookName], true);
}
});
}
function makeRecognizer(state, options) {
var recognizer = (0, _extends3['default'])({}, options, {
destroy: function destroy() {
if (!state.is(HoverState.Finish)) {
forEachHook(recognizer.global, 'uninstall');
// console.log(`destroy ${state.name}`); // eslint-disable-line
}
}
});
forEachHook(recognizer.global, 'install');
return recognizer;
}
/**
* 进入和离开的识别是独立的recognizer，每个recognizer可以绑定任意`onmouse***`事件。
* 组件内部只需要提供识别完成后的回调函数，不需要知道recognizer的细节。
*
* local下的事件是直接绑定在trigger上的
* global下的事件是绑定在window上的capture事件
*/
/**
* 进入状态的识别
*/
function makeHoverEnterRecognizer(_ref) {
var enterDelay = _ref.enterDelay,
onEnter = _ref.onEnter;
var state = makeState('enter', onEnter);
var timerId = void 0;
var recognizer = makeRecognizer(state, {
local: {
enter: function enter() {
state.transit(HoverState.Pending);
timerId = setTimeout(function () {
state.transit(HoverState.Finish);
forEachHook(recognizer.global, 'uninstall');
}, enterDelay);
},
leave: function leave() {
if (timerId) {
clearTimeout(timerId);
timerId = undefined;
state.transit(HoverState.Init);
}
}
}
});
return recognizer;
}
/**
* 离开状态的识别
*/
function makeHoverLeaveRecognizer(_ref2) {
var leaveDelay = _ref2.leaveDelay,
onLeave = _ref2.onLeave,
isOutSide = _ref2.isOutSide,
quirk = _ref2.quirk;
var state = makeState('leave', onLeave);
var recognizer = void 0;
var timerId = void 0;
var gotoFinishState = function gotoFinishState() {
state.transit(HoverState.Finish);
forEachHook(recognizer.global, 'uninstall');
};
recognizer = makeRecognizer(state, {
global: {
move: (0, _throttle2['default'])(function (evt) {
var target = evt.target;
if (isOutSide(target)) {
if (!quirk && !state.is(HoverState.Started)) {
return;
}
state.transit(HoverState.Pending);
timerId = setTimeout(gotoFinishState, leaveDelay);
} else {
if (state.is(HoverState.Init)) {
state.transit(HoverState.Started);
return;
}
if (!state.is(HoverState.Pending)) {
return;
}
if (timerId) {
clearTimeout(timerId);
timerId = undefined;
state.transit(HoverState.Started);
}
}
}, 16),
// 页面失去焦点的时候强制关闭，否则会出现必须先移动进来再出去才能关闭的问题
blur: function blur(evt) {
// 确保事件来自 window
// React 的事件系统会 bubble blur事件，但是原生的是不会 bubble 的。
// https://github.com/facebook/react/issues/6410#issuecomment-292895495
var target = evt.target || evt.srcElement;
if (target !== window) {
return;
}
if (timerId) {
clearTimeout(timerId);
timerId = undefined;
}
gotoFinishState();
}
}
});
return recognizer;
}
function callHook(recognizer, namespace, hookName) {
var ns = recognizer && recognizer[namespace];
for (var _len = arguments.length, args = Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
args[_key - 3] = arguments[_key];
}
if (ns && ns[hookName]) ns[hookName].apply(ns, args);
}
function destroyRecognizer(recognizer) {
if (recognizer) {
recognizer.destroy();
}
}
var PopoverHoverTrigger = function (_Trigger) {
(0, _inherits3['default'])(PopoverHoverTrigger, _Trigger);
function PopoverHoverTrigger() {
var _ref3;
var _temp, _this, _ret;
(0, _classCallCheck3['default'])(this, PopoverHoverTrigger);
for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
return _ret = (_temp = (_this = (0, _possibleConstructorReturn3['default'])(this, (_ref3 = PopoverHoverTrigger.__proto__ || Object.getPrototypeOf(PopoverHoverTrigger)).call.apply(_ref3, [this].concat(args))), _this), _this.open = function () {
_this.props.open();
}, _this.close = function () {
_this.props.close();
}, _this.state = {
enterRecognizer: null,
leaveRecognizer: null
}, _temp), (0, _possibleConstructorReturn3['default'])(_this, _ret);
}
(0, _createClass3['default'])(PopoverHoverTrigger, [{
key: 'makeEnterRecognizer',
value: function makeEnterRecognizer() {
var _props = this.props,
showDelay = _props.showDelay,
quirk = _props.quirk;
return makeHoverEnterRecognizer({
enterDelay: showDelay,
onEnter: this.open,
quirk: quirk
});
}
}, {
key: 'makeLeaveRecognizer',
value: function makeLeaveRecognizer() {
var _props2 = this.props,
quirk = _props2.quirk,
hideDelay = _props2.hideDelay,
isOutsideStacked = _props2.isOutsideStacked;
return makeHoverLeaveRecognizer({
leaveDelay: hideDelay,
onLeave: this.close,
isOutSide: isOutsideStacked,
quirk: quirk
});
}
}, {
key: 'getTriggerProps',
value: function getTriggerProps(child) {
var _this2 = this;
var _state = this.state,
enterRecognizer = _state.enterRecognizer,
leaveRecognizer = _state.leaveRecognizer;
var enterHooks = enterRecognizer && enterRecognizer.local || {};
var leaveHooks = leaveRecognizer && leaveRecognizer.local || {};
var eventNames = (0, _uniq2['default'])([].concat(Object.keys(enterHooks), Object.keys(leaveHooks))).map(function (name) {
return 'onMouse' + (0, _capitalize2['default'])(name);
});
var eventNameToHookName = function eventNameToHookName(eventName) {
return eventName.slice('onMouse'.length).toLowerCase();
};
return eventNames.reduce(function (events, evtName) {
var hookName = eventNameToHookName(evtName);
events[evtName] = function (evt) {
callHook(enterRecognizer, 'local', hookName);
callHook(leaveRecognizer, 'local', hookName);
_this2.triggerEvent(child, evtName, evt);
};
return events;
}, {});
}
}, {
key: 'cleanup',
value: function cleanup() {
// ensure global events are removed
destroyRecognizer(this.state.enterRecognizer);
destroyRecognizer(this.state.leaveRecognizer);
}
}, {
key: 'initRecognizers',
value: function initRecognizers(props) {
props = props || this.props;
var _props3 = props,
contentVisible = _props3.contentVisible;
this.cleanup();
this.setState({
enterRecognizer: contentVisible ? null : this.makeEnterRecognizer(),
leaveRecognizer: contentVisible ? this.makeLeaveRecognizer() : null
});
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
this.cleanup();
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
this.initRecognizers();
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
var contentVisible = nextProps.contentVisible;
// visibility changed, create new recognizers
if (contentVisible !== this.props.contentVisible) {
this.initRecognizers(nextProps);
}
}
}]);
return PopoverHoverTrigger;
}(_Trigger3['default']);
PopoverHoverTrigger.propTypes = (0, _extends3['default'])({}, _Trigger2.PopoverTriggerPropTypes, {
showDelay: _propTypes2['default'].number,
hideDelay: _propTypes2['default'].number,
isOutside: _propTypes2['default'].func,
quirk: _propTypes2['default'].bool
});
PopoverHoverTrigger.defaultProps = {
showDelay: 150,
hideDelay: 150,
quirk: false
};
exports['default'] = PopoverHoverTrigger;