custom-app
Version:
ITIMS��Ʒ�鿪��ר��React���,�Dz��ý��ּ�dhcc-app���������
774 lines (638 loc) • 24.8 kB
JavaScript
'use strict';
exports.__esModule = true;
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _reactDom = require('react-dom');
var _reactLifecyclesCompat = require('react-lifecycles-compat');
var _contains = require('rc-util/lib/Dom/contains');
var _contains2 = _interopRequireDefault(_contains);
var _addEventListener = require('rc-util/lib/Dom/addEventListener');
var _addEventListener2 = _interopRequireDefault(_addEventListener);
var _ContainerRender = require('rc-util/lib/ContainerRender');
var _ContainerRender2 = _interopRequireDefault(_ContainerRender);
var _Portal = require('rc-util/lib/Portal');
var _Portal2 = _interopRequireDefault(_Portal);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _utils = require('./utils');
var _Popup = require('./Popup');
var _Popup2 = _interopRequireDefault(_Popup);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function noop() {}
function returnEmptyString() {
return '';
}
function returnDocument() {
return window.document;
}
var ALL_HANDLERS = ['onClick', 'onMouseDown', 'onTouchStart', 'onMouseEnter', 'onMouseLeave', 'onFocus', 'onBlur', 'onContextMenu'];
var IS_REACT_16 = !!_reactDom.createPortal;
var contextTypes = {
rcTrigger: _propTypes2['default'].shape({
onPopupMouseDown: _propTypes2['default'].func
})
};
var Trigger = function (_React$Component) {
(0, _inherits3['default'])(Trigger, _React$Component);
function Trigger(props) {
(0, _classCallCheck3['default'])(this, Trigger);
var _this = (0, _possibleConstructorReturn3['default'])(this, _React$Component.call(this, props));
_initialiseProps.call(_this);
var popupVisible = void 0;
if ('popupVisible' in props) {
popupVisible = !!props.popupVisible;
} else {
popupVisible = !!props.defaultPopupVisible;
}
_this.state = {
prevPopupVisible: popupVisible,
popupVisible: popupVisible
};
ALL_HANDLERS.forEach(function (h) {
_this['fire' + h] = function (e) {
_this.fireEvents(h, e);
};
});
return _this;
}
Trigger.prototype.getChildContext = function getChildContext() {
return {
rcTrigger: {
onPopupMouseDown: this.onPopupMouseDown
}
};
};
Trigger.prototype.componentDidMount = function componentDidMount() {
this.componentDidUpdate({}, {
popupVisible: this.state.popupVisible
});
};
Trigger.prototype.componentDidUpdate = function componentDidUpdate(_, prevState) {
var props = this.props;
var state = this.state;
var triggerAfterPopupVisibleChange = function triggerAfterPopupVisibleChange() {
if (prevState.popupVisible !== state.popupVisible) {
props.afterPopupVisibleChange(state.popupVisible);
}
};
if (!IS_REACT_16) {
this.renderComponent(null, triggerAfterPopupVisibleChange);
}
// We must listen to `mousedown` or `touchstart`, edge case:
// https://github.com/ant-design/ant-design/issues/5804
// https://github.com/react-component/calendar/issues/250
// https://github.com/react-component/trigger/issues/50
if (state.popupVisible) {
var currentDocument = void 0;
if (!this.clickOutsideHandler && (this.isClickToHide() || this.isContextMenuToShow())) {
currentDocument = props.getDocument();
this.clickOutsideHandler = (0, _addEventListener2['default'])(currentDocument, 'mousedown', this.onDocumentClick);
}
// always hide on mobile
if (!this.touchOutsideHandler) {
currentDocument = currentDocument || props.getDocument();
this.touchOutsideHandler = (0, _addEventListener2['default'])(currentDocument, 'touchstart', this.onDocumentClick);
}
// close popup when trigger type contains 'onContextMenu' and document is scrolling.
if (!this.contextMenuOutsideHandler1 && this.isContextMenuToShow()) {
currentDocument = currentDocument || props.getDocument();
this.contextMenuOutsideHandler1 = (0, _addEventListener2['default'])(currentDocument, 'scroll', this.onContextMenuClose);
}
// close popup when trigger type contains 'onContextMenu' and window is blur.
if (!this.contextMenuOutsideHandler2 && this.isContextMenuToShow()) {
this.contextMenuOutsideHandler2 = (0, _addEventListener2['default'])(window, 'blur', this.onContextMenuClose);
}
return;
}
this.clearOutsideHandler();
};
Trigger.prototype.componentWillUnmount = function componentWillUnmount() {
this.clearDelayTimer();
this.clearOutsideHandler();
clearTimeout(this.mouseDownTimeout);
};
Trigger.getDerivedStateFromProps = function getDerivedStateFromProps(_ref, prevState) {
var popupVisible = _ref.popupVisible;
var newState = {};
if (popupVisible !== undefined && prevState.popupVisible !== popupVisible) {
newState.popupVisible = popupVisible;
newState.prevPopupVisible = prevState.popupVisible;
}
return newState;
};
Trigger.prototype.getPopupDomNode = function getPopupDomNode() {
// for test
if (this._component && this._component.getPopupDomNode) {
return this._component.getPopupDomNode();
}
return null;
};
Trigger.prototype.getPopupAlign = function getPopupAlign() {
var props = this.props;
var popupPlacement = props.popupPlacement,
popupAlign = props.popupAlign,
builtinPlacements = props.builtinPlacements;
if (popupPlacement && builtinPlacements) {
return (0, _utils.getAlignFromPlacement)(builtinPlacements, popupPlacement, popupAlign);
}
return popupAlign;
};
/**
* @param popupVisible Show or not the popup element
* @param event SyntheticEvent, used for `pointAlign`
*/
Trigger.prototype.setPopupVisible = function setPopupVisible(popupVisible, event) {
var alignPoint = this.props.alignPoint;
var prevPopupVisible = this.state.popupVisible;
this.clearDelayTimer();
if (prevPopupVisible !== popupVisible) {
if (!('popupVisible' in this.props)) {
this.setState({ popupVisible: popupVisible, prevPopupVisible: prevPopupVisible });
}
this.props.onPopupVisibleChange(popupVisible);
}
// Always record the point position since mouseEnterDelay will delay the show
if (alignPoint && event) {
this.setPoint(event);
}
};
Trigger.prototype.delaySetPopupVisible = function delaySetPopupVisible(visible, delayS, event) {
var _this2 = this;
var delay = delayS * 1000;
this.clearDelayTimer();
if (delay) {
var point = event ? { pageX: event.pageX, pageY: event.pageY } : null;
this.delayTimer = setTimeout(function () {
_this2.setPopupVisible(visible, point);
_this2.clearDelayTimer();
}, delay);
} else {
this.setPopupVisible(visible, event);
}
};
Trigger.prototype.clearDelayTimer = function clearDelayTimer() {
if (this.delayTimer) {
clearTimeout(this.delayTimer);
this.delayTimer = null;
}
};
Trigger.prototype.clearOutsideHandler = function clearOutsideHandler() {
if (this.clickOutsideHandler) {
this.clickOutsideHandler.remove();
this.clickOutsideHandler = null;
}
if (this.contextMenuOutsideHandler1) {
this.contextMenuOutsideHandler1.remove();
this.contextMenuOutsideHandler1 = null;
}
if (this.contextMenuOutsideHandler2) {
this.contextMenuOutsideHandler2.remove();
this.contextMenuOutsideHandler2 = null;
}
if (this.touchOutsideHandler) {
this.touchOutsideHandler.remove();
this.touchOutsideHandler = null;
}
};
Trigger.prototype.createTwoChains = function createTwoChains(event) {
var childPros = this.props.children.props;
var props = this.props;
if (childPros[event] && props[event]) {
return this['fire' + event];
}
return childPros[event] || props[event];
};
Trigger.prototype.isClickToShow = function isClickToShow() {
var _props = this.props,
action = _props.action,
showAction = _props.showAction;
return action.indexOf('click') !== -1 || showAction.indexOf('click') !== -1;
};
Trigger.prototype.isContextMenuToShow = function isContextMenuToShow() {
var _props2 = this.props,
action = _props2.action,
showAction = _props2.showAction;
return action.indexOf('contextMenu') !== -1 || showAction.indexOf('contextMenu') !== -1;
};
Trigger.prototype.isClickToHide = function isClickToHide() {
var _props3 = this.props,
action = _props3.action,
hideAction = _props3.hideAction;
return action.indexOf('click') !== -1 || hideAction.indexOf('click') !== -1;
};
Trigger.prototype.isMouseEnterToShow = function isMouseEnterToShow() {
var _props4 = this.props,
action = _props4.action,
showAction = _props4.showAction;
return action.indexOf('hover') !== -1 || showAction.indexOf('mouseEnter') !== -1;
};
Trigger.prototype.isMouseLeaveToHide = function isMouseLeaveToHide() {
var _props5 = this.props,
action = _props5.action,
hideAction = _props5.hideAction;
return action.indexOf('hover') !== -1 || hideAction.indexOf('mouseLeave') !== -1;
};
Trigger.prototype.isFocusToShow = function isFocusToShow() {
var _props6 = this.props,
action = _props6.action,
showAction = _props6.showAction;
return action.indexOf('focus') !== -1 || showAction.indexOf('focus') !== -1;
};
Trigger.prototype.isBlurToHide = function isBlurToHide() {
var _props7 = this.props,
action = _props7.action,
hideAction = _props7.hideAction;
return action.indexOf('focus') !== -1 || hideAction.indexOf('blur') !== -1;
};
Trigger.prototype.forcePopupAlign = function forcePopupAlign() {
if (this.state.popupVisible && this._component && this._component.alignInstance) {
this._component.alignInstance.forceAlign();
}
};
Trigger.prototype.fireEvents = function fireEvents(type, e) {
var childCallback = this.props.children.props[type];
if (childCallback) {
childCallback(e);
}
var callback = this.props[type];
if (callback) {
callback(e);
}
};
Trigger.prototype.close = function close() {
this.setPopupVisible(false);
};
Trigger.prototype.render = function render() {
var _this3 = this;
var popupVisible = this.state.popupVisible;
var _props8 = this.props,
children = _props8.children,
forceRender = _props8.forceRender,
alignPoint = _props8.alignPoint,
className = _props8.className;
var child = _react2['default'].Children.only(children);
var newChildProps = { key: 'trigger' };
if (this.isContextMenuToShow()) {
newChildProps.onContextMenu = this.onContextMenu;
} else {
newChildProps.onContextMenu = this.createTwoChains('onContextMenu');
}
if (this.isClickToHide() || this.isClickToShow()) {
newChildProps.onClick = this.onClick;
newChildProps.onMouseDown = this.onMouseDown;
newChildProps.onTouchStart = this.onTouchStart;
} else {
newChildProps.onClick = this.createTwoChains('onClick');
newChildProps.onMouseDown = this.createTwoChains('onMouseDown');
newChildProps.onTouchStart = this.createTwoChains('onTouchStart');
}
if (this.isMouseEnterToShow()) {
newChildProps.onMouseEnter = this.onMouseEnter;
if (alignPoint) {
newChildProps.onMouseMove = this.onMouseMove;
}
} else {
newChildProps.onMouseEnter = this.createTwoChains('onMouseEnter');
}
if (this.isMouseLeaveToHide()) {
newChildProps.onMouseLeave = this.onMouseLeave;
} else {
newChildProps.onMouseLeave = this.createTwoChains('onMouseLeave');
}
if (this.isFocusToShow() || this.isBlurToHide()) {
newChildProps.onFocus = this.onFocus;
newChildProps.onBlur = this.onBlur;
} else {
newChildProps.onFocus = this.createTwoChains('onFocus');
newChildProps.onBlur = this.createTwoChains('onBlur');
}
var childrenClassName = (0, _classnames2['default'])(child && child.props && child.props.className, className);
if (childrenClassName) {
newChildProps.className = childrenClassName;
}
var trigger = _react2['default'].cloneElement(child, newChildProps);
if (!IS_REACT_16) {
return _react2['default'].createElement(
_ContainerRender2['default'],
{
parent: this,
visible: popupVisible,
autoMount: false,
forceRender: forceRender,
getComponent: this.getComponent,
getContainer: this.getContainer
},
function (_ref2) {
var renderComponent = _ref2.renderComponent;
_this3.renderComponent = renderComponent;
return trigger;
}
);
}
var portal = void 0;
// prevent unmounting after it's rendered
if (popupVisible || this._component || forceRender) {
portal = _react2['default'].createElement(
_Portal2['default'],
{ key: 'portal', getContainer: this.getContainer, didUpdate: this.handlePortalUpdate },
this.getComponent()
);
}
return [trigger, portal];
};
return Trigger;
}(_react2['default'].Component);
Trigger.propTypes = {
children: _propTypes2['default'].any,
action: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].arrayOf(_propTypes2['default'].string)]),
showAction: _propTypes2['default'].any,
hideAction: _propTypes2['default'].any,
getPopupClassNameFromAlign: _propTypes2['default'].any,
onPopupVisibleChange: _propTypes2['default'].func,
afterPopupVisibleChange: _propTypes2['default'].func,
popup: _propTypes2['default'].oneOfType([_propTypes2['default'].node, _propTypes2['default'].func]).isRequired,
popupStyle: _propTypes2['default'].object,
prefixCls: _propTypes2['default'].string,
popupClassName: _propTypes2['default'].string,
className: _propTypes2['default'].string,
popupPlacement: _propTypes2['default'].string,
builtinPlacements: _propTypes2['default'].object,
popupTransitionName: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].object]),
popupAnimation: _propTypes2['default'].any,
mouseEnterDelay: _propTypes2['default'].number,
mouseLeaveDelay: _propTypes2['default'].number,
zIndex: _propTypes2['default'].number,
focusDelay: _propTypes2['default'].number,
blurDelay: _propTypes2['default'].number,
getPopupContainer: _propTypes2['default'].func,
getDocument: _propTypes2['default'].func,
forceRender: _propTypes2['default'].bool,
destroyPopupOnHide: _propTypes2['default'].bool,
mask: _propTypes2['default'].bool,
maskClosable: _propTypes2['default'].bool,
onPopupAlign: _propTypes2['default'].func,
popupAlign: _propTypes2['default'].object,
popupVisible: _propTypes2['default'].bool,
defaultPopupVisible: _propTypes2['default'].bool,
maskTransitionName: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].object]),
maskAnimation: _propTypes2['default'].string,
stretch: _propTypes2['default'].string,
alignPoint: _propTypes2['default'].bool // Maybe we can support user pass position in the future
};
Trigger.contextTypes = contextTypes;
Trigger.childContextTypes = contextTypes;
Trigger.defaultProps = {
prefixCls: 'rc-trigger-popup',
getPopupClassNameFromAlign: returnEmptyString,
getDocument: returnDocument,
onPopupVisibleChange: noop,
afterPopupVisibleChange: noop,
onPopupAlign: noop,
popupClassName: '',
mouseEnterDelay: 0,
mouseLeaveDelay: 0.1,
focusDelay: 0,
blurDelay: 0.15,
popupStyle: {},
destroyPopupOnHide: false,
popupAlign: {},
defaultPopupVisible: false,
mask: false,
maskClosable: true,
action: [],
showAction: [],
hideAction: []
};
var _initialiseProps = function _initialiseProps() {
var _this4 = this;
this.onMouseEnter = function (e) {
var mouseEnterDelay = _this4.props.mouseEnterDelay;
_this4.fireEvents('onMouseEnter', e);
_this4.delaySetPopupVisible(true, mouseEnterDelay, mouseEnterDelay ? null : e);
};
this.onMouseMove = function (e) {
_this4.fireEvents('onMouseMove', e);
_this4.setPoint(e);
};
this.onMouseLeave = function (e) {
_this4.fireEvents('onMouseLeave', e);
_this4.delaySetPopupVisible(false, _this4.props.mouseLeaveDelay);
};
this.onPopupMouseEnter = function () {
_this4.clearDelayTimer();
};
this.onPopupMouseLeave = function (e) {
// https://github.com/react-component/trigger/pull/13
// react bug?
if (e.relatedTarget && !e.relatedTarget.setTimeout && _this4._component && _this4._component.getPopupDomNode && (0, _contains2['default'])(_this4._component.getPopupDomNode(), e.relatedTarget)) {
return;
}
_this4.delaySetPopupVisible(false, _this4.props.mouseLeaveDelay);
};
this.onFocus = function (e) {
_this4.fireEvents('onFocus', e);
// incase focusin and focusout
_this4.clearDelayTimer();
if (_this4.isFocusToShow()) {
_this4.focusTime = Date.now();
_this4.delaySetPopupVisible(true, _this4.props.focusDelay);
}
};
this.onMouseDown = function (e) {
_this4.fireEvents('onMouseDown', e);
_this4.preClickTime = Date.now();
};
this.onTouchStart = function (e) {
_this4.fireEvents('onTouchStart', e);
_this4.preTouchTime = Date.now();
};
this.onBlur = function (e) {
_this4.fireEvents('onBlur', e);
_this4.clearDelayTimer();
if (_this4.isBlurToHide()) {
_this4.delaySetPopupVisible(false, _this4.props.blurDelay);
}
};
this.onContextMenu = function (e) {
e.preventDefault();
_this4.fireEvents('onContextMenu', e);
_this4.setPopupVisible(true, e);
};
this.onContextMenuClose = function () {
if (_this4.isContextMenuToShow()) {
_this4.close();
}
};
this.onClick = function (event) {
_this4.fireEvents('onClick', event);
// focus will trigger click
if (_this4.focusTime) {
var preTime = void 0;
if (_this4.preClickTime && _this4.preTouchTime) {
preTime = Math.min(_this4.preClickTime, _this4.preTouchTime);
} else if (_this4.preClickTime) {
preTime = _this4.preClickTime;
} else if (_this4.preTouchTime) {
preTime = _this4.preTouchTime;
}
if (Math.abs(preTime - _this4.focusTime) < 20) {
return;
}
_this4.focusTime = 0;
}
_this4.preClickTime = 0;
_this4.preTouchTime = 0;
// Only prevent default when all the action is click.
// https://github.com/ant-design/ant-design/issues/17043
// https://github.com/ant-design/ant-design/issues/17291
if (_this4.isClickToShow() && (_this4.isClickToHide() || _this4.isBlurToHide()) && event && event.preventDefault) {
event.preventDefault();
}
var nextVisible = !_this4.state.popupVisible;
if (_this4.isClickToHide() && !nextVisible || nextVisible && _this4.isClickToShow()) {
_this4.setPopupVisible(!_this4.state.popupVisible, event);
}
};
this.onPopupMouseDown = function () {
var _context$rcTrigger = _this4.context.rcTrigger,
rcTrigger = _context$rcTrigger === undefined ? {} : _context$rcTrigger;
_this4.hasPopupMouseDown = true;
clearTimeout(_this4.mouseDownTimeout);
_this4.mouseDownTimeout = setTimeout(function () {
_this4.hasPopupMouseDown = false;
}, 0);
if (rcTrigger.onPopupMouseDown) {
rcTrigger.onPopupMouseDown.apply(rcTrigger, arguments);
}
};
this.onDocumentClick = function (event) {
if (_this4.props.mask && !_this4.props.maskClosable) {
return;
}
var target = event.target;
var root = (0, _reactDom.findDOMNode)(_this4);
if (!(0, _contains2['default'])(root, target) && !_this4.hasPopupMouseDown) {
_this4.close();
}
};
this.getRootDomNode = function () {
return (0, _reactDom.findDOMNode)(_this4);
};
this.getPopupClassNameFromAlign = function (align) {
var className = [];
var _props9 = _this4.props,
popupPlacement = _props9.popupPlacement,
builtinPlacements = _props9.builtinPlacements,
prefixCls = _props9.prefixCls,
alignPoint = _props9.alignPoint,
getPopupClassNameFromAlign = _props9.getPopupClassNameFromAlign;
if (popupPlacement && builtinPlacements) {
className.push((0, _utils.getAlignPopupClassName)(builtinPlacements, prefixCls, align, alignPoint));
}
if (getPopupClassNameFromAlign) {
className.push(getPopupClassNameFromAlign(align));
}
return className.join(' ');
};
this.getComponent = function () {
var _props10 = _this4.props,
prefixCls = _props10.prefixCls,
destroyPopupOnHide = _props10.destroyPopupOnHide,
popupClassName = _props10.popupClassName,
action = _props10.action,
onPopupAlign = _props10.onPopupAlign,
popupAnimation = _props10.popupAnimation,
popupTransitionName = _props10.popupTransitionName,
popupStyle = _props10.popupStyle,
mask = _props10.mask,
maskAnimation = _props10.maskAnimation,
maskTransitionName = _props10.maskTransitionName,
zIndex = _props10.zIndex,
popup = _props10.popup,
stretch = _props10.stretch,
alignPoint = _props10.alignPoint;
var _state = _this4.state,
popupVisible = _state.popupVisible,
point = _state.point;
var align = _this4.getPopupAlign();
var mouseProps = {};
if (_this4.isMouseEnterToShow()) {
mouseProps.onMouseEnter = _this4.onPopupMouseEnter;
}
if (_this4.isMouseLeaveToHide()) {
mouseProps.onMouseLeave = _this4.onPopupMouseLeave;
}
mouseProps.onMouseDown = _this4.onPopupMouseDown;
mouseProps.onTouchStart = _this4.onPopupMouseDown;
return _react2['default'].createElement(
_Popup2['default'],
(0, _extends3['default'])({
prefixCls: prefixCls,
destroyPopupOnHide: destroyPopupOnHide,
visible: popupVisible,
point: alignPoint && point,
className: popupClassName,
action: action,
align: align,
onAlign: onPopupAlign,
animation: popupAnimation,
getClassNameFromAlign: _this4.getPopupClassNameFromAlign
}, mouseProps, {
stretch: stretch,
getRootDomNode: _this4.getRootDomNode,
style: popupStyle,
mask: mask,
zIndex: zIndex,
transitionName: popupTransitionName,
maskAnimation: maskAnimation,
maskTransitionName: maskTransitionName,
ref: _this4.savePopup
}),
typeof popup === 'function' ? popup() : popup
);
};
this.getContainer = function () {
var props = _this4.props;
var popupContainer = document.createElement('div');
// Make sure default popup container will never cause scrollbar appearing
// https://github.com/react-component/trigger/issues/41
popupContainer.style.position = 'absolute';
popupContainer.style.top = '0';
popupContainer.style.left = '0';
popupContainer.style.width = '100%';
var mountNode = props.getPopupContainer ? props.getPopupContainer((0, _reactDom.findDOMNode)(_this4)) : props.getDocument().body;
mountNode.appendChild(popupContainer);
return popupContainer;
};
this.setPoint = function (point) {
var alignPoint = _this4.props.alignPoint;
if (!alignPoint || !point) return;
_this4.setState({
point: {
pageX: point.pageX,
pageY: point.pageY
}
});
};
this.handlePortalUpdate = function () {
if (_this4.state.prevPopupVisible !== _this4.state.popupVisible) {
_this4.props.afterPopupVisibleChange(_this4.state.popupVisible);
}
};
this.savePopup = function (node) {
_this4._component = node;
};
};
(0, _reactLifecyclesCompat.polyfill)(Trigger);
exports['default'] = Trigger;
module.exports = exports['default'];