` by default. You can change this
* behavior by providing a `component` prop.
* If you use React v16+ and would like to avoid a wrapping `
` element
* you can pass in `component={null}`. This is useful if the wrapping div
* borks your css styles.
*/
component: _propTypes.default.any,
/**
* A set of `
` components, that are toggled `in` and out as they
* leave. the `` will inject specific transition props, so
* remember to spread them through if you are wrapping the `` as
* with our `` example.
*
* While this component is meant for multiple `Transition` or `CSSTransition`
* children, sometimes you may want to have a single transition child with
* content that you want to be transitioned out and in when you change it
* (e.g. routes, images etc.) In that case you can change the `key` prop of
* the transition child as you change its content, this will cause
* `TransitionGroup` to transition the child out and back in.
*/
children: _propTypes.default.node,
/**
* A convenience prop that enables or disables appear animations
* for all children. Note that specifying this will override any defaults set
* on individual children Transitions.
*/
appear: _propTypes.default.bool,
/**
* A convenience prop that enables or disables enter animations
* for all children. Note that specifying this will override any defaults set
* on individual children Transitions.
*/
enter: _propTypes.default.bool,
/**
* A convenience prop that enables or disables exit animations
* for all children. Note that specifying this will override any defaults set
* on individual children Transitions.
*/
exit: _propTypes.default.bool,
/**
* You may need to apply reactive updates to a child as it is exiting.
* This is generally done by using `cloneElement` however in the case of an exiting
* child the element has already been removed and not accessible to the consumer.
*
* If you do need to update a child as it leaves you can provide a `childFactory`
* to wrap every child, even the ones that are leaving.
*
* @type Function(child: ReactElement) -> ReactElement
*/
childFactory: _propTypes.default.func
} : {};
TransitionGroup.defaultProps = defaultProps;
var _default = (0, _reactLifecyclesCompat.polyfill)(TransitionGroup);
exports.default = _default;
module.exports = exports["default"];
/***/ }),
/* 117 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
var _extends2 = __webpack_require__(4);
var _extends3 = _interopRequireDefault(_extends2);
var _classCallCheck2 = __webpack_require__(1);
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _possibleConstructorReturn2 = __webpack_require__(2);
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = __webpack_require__(3);
var _inherits3 = _interopRequireDefault(_inherits2);
var _class, _temp;
var _react = __webpack_require__(0);
var _react2 = _interopRequireDefault(_react);
var _reactDom = __webpack_require__(12);
var _propTypes = __webpack_require__(5);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _classnames3 = __webpack_require__(6);
var _classnames4 = _interopRequireDefault(_classnames3);
var _reactLifecyclesCompat = __webpack_require__(10);
var _util = __webpack_require__(8);
var _manager = __webpack_require__(243);
var _manager2 = _interopRequireDefault(_manager);
var _gateway = __webpack_require__(118);
var _gateway2 = _interopRequireDefault(_gateway);
var _position = __webpack_require__(119);
var _position2 = _interopRequireDefault(_position);
var _findNode = __webpack_require__(53);
var _findNode2 = _interopRequireDefault(_findNode);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { default: obj };
}
var saveLastFocusNode = _util.focus.saveLastFocusNode,
getFocusNodeList = _util.focus.getFocusNodeList,
backLastFocusNode = _util.focus.backLastFocusNode;
var makeChain = _util.func.makeChain,
noop = _util.func.noop,
bindCtx = _util.func.bindCtx;
var isScrollDisplay = function isScrollDisplay(element) {
try {
var scrollbarStyle = window.getComputedStyle(element, '::-webkit-scrollbar');
return !scrollbarStyle || scrollbarStyle.getPropertyValue('display') !== 'none';
} catch (e) {
// ignore error for firefox
}
return true;
};
var hasScroll = function hasScroll() {
var doc = document.documentElement;
return doc.scrollHeight > doc.clientHeight && _util.dom.scrollbar().width > 0 && isScrollDisplay(document.documentElement) && isScrollDisplay(document.body);
};
var prefixes = ['-webkit-', '-moz-', '-o-', 'ms-', ''];
var getStyleProperty = function getStyleProperty(node, name) {
var style = window.getComputedStyle(node);
var ret = '';
for (var i = 0; i < prefixes.length; i++) {
ret = style.getPropertyValue(prefixes[i] + name);
if (ret) {
break;
}
}
return ret;
};
var modals = [];
var bodyOverflow = void 0,
bodyPaddingRight = void 0;
/**
* Overlay
* */
var Overlay = (_temp = _class = function (_Component) {
(0, _inherits3.default)(Overlay, _Component);
function Overlay(props) {
(0, _classCallCheck3.default)(this, Overlay);
var _this = (0, _possibleConstructorReturn3.default)(this, _Component.call(this, props));
_this.saveContentRef = function (ref) {
_this.contentRef = ref;
};
_this.saveGatewayRef = function (ref) {
_this.gatewayRef = ref;
};
_this.lastAlign = props.align;
bindCtx(_this, ['handlePosition', 'handleAnimateEnd', 'handleDocumentKeyDown', 'handleDocumentClick', 'handleMaskClick', 'beforeOpen', 'beforeClose']);
_this.state = {
visible: false,
status: 'none',
animation: _this.getAnimation(props),
beforeOpen: _this.beforeOpen,
beforeClose: _this.beforeClose
};
_this.timeoutMap = {};
return _this;
}
Overlay.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
var willOpen = !prevState.visible && nextProps.visible;
var willClose = prevState.visible && !nextProps.visible;
if (willOpen) {
prevState.beforeOpen();
nextProps.beforeOpen();
} else if (willClose) {
prevState.beforeClose();
nextProps.beforeClose();
}
var nextState = {};
if (nextProps.animation || nextProps.animation === false) {
nextState.animation = nextProps.animation;
}
if (nextProps.animation !== false && _util.support.animation) {
if (willOpen) {
nextState.visible = true;
nextState.status = 'mounting';
} else if (willClose) {
// can not set visible=false directly, otherwise animation not work without dom
// nextState.visible = false;
nextState.status = 'leaving';
}
} else if ('visible' in nextProps && nextProps.visible !== prevState.visible) {
nextState.visible = nextProps.visible;
}
return nextState;
};
Overlay.prototype.componentDidMount = function componentDidMount() {
if (this.state.visible) {
this.doAnimation(true, false);
this._isMounted = true;
}
this.addDocumentEvents();
_manager2.default.addOverlay(this);
};
Overlay.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
if (!this._isMounted && this.props.visible) {
this._isMounted = true;
}
if (this.props.align !== prevProps.align) {
this.lastAlign = prevProps.align;
}
var willOpen = !prevProps.visible && this.props.visible;
var willClose = prevProps.visible && !this.props.visible;
(willOpen || willClose) && this.doAnimation(willOpen, willClose);
};
Overlay.prototype.componentWillUnmount = function componentWillUnmount() {
this._isDestroyed = true;
this._isMounted = false;
_manager2.default.removeOverlay(this);
this.removeDocumentEvents();
if (this.focusTimeout) {
clearTimeout(this.focusTimeout);
}
if (this._animation) {
this._animation.off();
this._animation = null;
}
this.beforeClose();
};
Overlay.prototype.doAnimation = function doAnimation(open, close) {
var _this2 = this;
if (this.state.animation && _util.support.animation) {
if (open) {
this.onEntering();
} else if (close) {
this.onLeaving();
}
this.addAnimationEvents();
} else {
var wrapperNode = this.getWrapperNode();
if (open) {
// fix https://github.com/alibaba-fusion/next/issues/1901
setTimeout(function () {
_this2.props.onOpen();
_this2.props.afterOpen();
_util.dom.addClass(wrapperNode, 'opened');
_manager2.default.addOverlay(_this2);
});
} else if (close) {
this.props.onClose();
this.props.afterClose();
_util.dom.removeClass(wrapperNode, 'opened');
_manager2.default.removeOverlay(this);
}
this.setFocusNode();
}
};
Overlay.prototype.getAnimation = function getAnimation(props) {
if (props.animation === false) {
return false;
}
if (props.animation) {
return props.animation;
}
return this.getAnimationByAlign(props.align);
};
Overlay.prototype.getAnimationByAlign = function getAnimationByAlign(align) {
switch (align[0]) {
case 't':
return {
in: 'expandInDown',
out: 'expandOutUp'
};
case 'b':
return {
in: 'expandInUp',
out: 'expandOutDown'
};
default:
return {
in: 'expandInDown',
out: 'expandOutUp'
};
}
};
Overlay.prototype.addAnimationEvents = function addAnimationEvents() {
var _this3 = this;
setTimeout(function () {
var node = _this3.getContentNode();
if (node) {
var id = (0, _util.guid)();
_this3._animation = _util.events.on(node, _util.support.animation.end, _this3.handleAnimateEnd.bind(_this3, id));
var animationDelay = parseFloat(getStyleProperty(node, 'animation-delay')) || 0;
var animationDuration = parseFloat(getStyleProperty(node, 'animation-duration')) || 0;
var time = animationDelay + animationDuration;
if (time) {
_this3.timeoutMap[id] = setTimeout(function () {
_this3.handleAnimateEnd(id);
}, time * 1000 + 200);
}
}
});
};
Overlay.prototype.handlePosition = function handlePosition(config) {
var align = config.align.join(' ');
if (!('animation' in this.props) && this.props.needAdjust && this.lastAlign !== align) {
this.setState({
animation: this.getAnimationByAlign(align)
});
}
var status = this.state.status;
if (status === 'mounting') {
this.setState({
status: 'entering'
});
}
this.lastAlign = align;
};
Overlay.prototype.handleAnimateEnd = function handleAnimateEnd(id) {
if (this.timeoutMap[id]) {
clearTimeout(this.timeoutMap[id]);
}
delete this.timeoutMap[id];
if (this._animation) {
this._animation.off();
this._animation = null;
}
if (!this._isMounted) {
return;
}
if (this.state.status === 'leaving') {
this.setState({
visible: false,
status: 'none'
});
this.onLeaved();
} else if (this.state.status === 'entering') {
this.setState({
status: 'none'
});
this.onEntered();
}
};
Overlay.prototype.onEntering = function onEntering() {
var _this4 = this;
if (this._isDestroyed) {
return;
}
// make sure overlay.ref has been called (eg: menu/popup-item called overlay.getInstance().getContentNode().)
setTimeout(function () {
var wrapperNode = _this4.getWrapperNode();
_util.dom.addClass(wrapperNode, 'opened');
_this4.props.onOpen();
});
};
Overlay.prototype.onLeaving = function onLeaving() {
var wrapperNode = this.getWrapperNode();
_util.dom.removeClass(wrapperNode, 'opened');
this.props.onClose();
};
Overlay.prototype.onEntered = function onEntered() {
_manager2.default.addOverlay(this);
this.setFocusNode();
this.props.afterOpen();
};
Overlay.prototype.onLeaved = function onLeaved() {
_manager2.default.removeOverlay(this);
this.setFocusNode();
this.props.afterClose();
};
Overlay.prototype.beforeOpen = function beforeOpen() {
if (this.props.disableScroll) {
if (modals.length === 0) {
var style = {
overflow: 'hidden'
};
var body = document.body;
bodyOverflow = body.style.overflow;
if (hasScroll()) {
bodyPaddingRight = body.style.paddingRight;
style.paddingRight = _util.dom.getStyle(body, 'paddingRight') + _util.dom.scrollbar().width + 'px';
}
_util.dom.setStyle(body, style);
}
modals.push(this);
}
};
Overlay.prototype.beforeClose = function beforeClose() {
if (this.props.disableScroll) {
var index = modals.indexOf(this);
if (index > -1) {
if (modals.length === 1) {
var style = {
overflow: bodyOverflow
};
if (hasScroll()) {
style.paddingRight = bodyPaddingRight;
}
_util.dom.setStyle(document.body, style);
bodyOverflow = undefined;
bodyPaddingRight = undefined;
}
modals.splice(index, 1);
}
}
};
Overlay.prototype.setFocusNode = function setFocusNode() {
var _this5 = this;
if (!this.props.autoFocus) {
return;
}
if (this.state.visible && !this._hasFocused) {
saveLastFocusNode();
// 这个时候很可能上一个弹层的关闭事件还未触发,导致焦点已经回到触发的元素
// 这里延时处理一下,延时的时间为 document.click 捕获触发的延时时间
this.focusTimeout = setTimeout(function () {
var node = _this5.getContentNode();
if (node) {
var focusNodeList = getFocusNodeList(node);
if (focusNodeList.length) {
focusNodeList[0].focus();
}
_this5._hasFocused = true;
}
}, 100);
} else if (!this.state.visible && this._hasFocused) {
backLastFocusNode();
this._hasFocused = false;
}
};
Overlay.prototype.getContent = function getContent() {
return this.contentRef;
};
Overlay.prototype.getContentNode = function getContentNode() {
try {
return (0, _reactDom.findDOMNode)(this.contentRef);
} catch (err) {
return null;
}
};
Overlay.prototype.getWrapperNode = function getWrapperNode() {
return this.gatewayRef ? this.gatewayRef.getChildNode() : null;
};
/**
* document global event
*/
Overlay.prototype.addDocumentEvents = function addDocumentEvents() {
if (this.props.canCloseByEsc) {
this._keydownEvents = _util.events.on(document, 'keydown', this.handleDocumentKeyDown);
}
if (this.props.canCloseByOutSideClick) {
this._clickEvents = _util.events.on(document, 'click', this.handleDocumentClick);
this._touchEvents = _util.events.on(document, 'touchend', this.handleDocumentClick);
}
};
Overlay.prototype.removeDocumentEvents = function removeDocumentEvents() {
if (this._keydownEvents) {
this._keydownEvents.off();
this._keydownEvents = null;
}
if (this._clickEvents) {
this._clickEvents.off();
this._clickEvents = null;
}
if (this._touchEvents) {
this._touchEvents.off();
this._touchEvents = null;
}
};
Overlay.prototype.handleDocumentKeyDown = function handleDocumentKeyDown(e) {
if (this.state.visible && e.keyCode === _util.KEYCODE.ESC && _manager2.default.isCurrentOverlay(this)) {
this.props.onRequestClose('keyboard', e);
}
};
Overlay.prototype.isInShadowDOM = function isInShadowDOM(node) {
return node.getRootNode ? node.getRootNode().nodeType === 11 : false;
};
Overlay.prototype.getEventPath = function getEventPath(event) {
// 参考 https://github.com/spring-media/react-shadow-dom-retarget-events/blob/master/index.js#L29
return event.path || event.composedPath && event.composedPath() || this.composedPath(event.target);
};
Overlay.prototype.composedPath = function composedPath(el) {
var path = [];
while (el) {
path.push(el);
if (el.tagName === 'HTML') {
path.push(document);
path.push(window);
return path;
}
el = el.parentElement;
}
};
Overlay.prototype.matchInShadowDOM = function matchInShadowDOM(node, e) {
if (this.isInShadowDOM(node)) {
// Shadow DOM 环境中,触发点击事件,监听 document click 事件获得的事件源
// 并非实际触发的 dom 节点,而是 Shadow DOM 的 host 节点
// 进而会导致如 Select 组件的下拉弹层打开后立即关闭等问题
// 因此额外增加 node 和 eventPath 的判断
var eventPath = this.getEventPath(e);
return node === eventPath[0] || node.contains(eventPath[0]);
}
return false;
};
Overlay.prototype.handleDocumentClick = function handleDocumentClick(e) {
var _this6 = this;
if (this.state.visible) {
var safeNode = this.props.safeNode;
var safeNodes = Array.isArray(safeNode) ? [].concat(safeNode) : [safeNode];
safeNodes.unshift(function () {
return _this6.getWrapperNode();
});
for (var i = 0; i < safeNodes.length; i++) {
var node = (0, _findNode2.default)(safeNodes[i], this.props);
// HACK: 如果触发点击的节点是弹层内部的节点,并且在被点击后立即销毁,那么此时无法使用 node.contains(e.target)
// 来判断此时点击的节点是否是弹层内部的节点,额外判断
if (node && (node === e.target || node.contains(e.target) || this.matchInShadowDOM(node, e) || e.target !== document && !document.documentElement.contains(e.target))) {
return;
}
}
this.props.onRequestClose('docClick', e);
}
};
Overlay.prototype.handleMaskClick = function handleMaskClick(e) {
if (this.props.canCloseByMask) {
this.props.onRequestClose('maskClick', e);
}
};
// 兼容过去的用法: this.popupRef.getInstance().overlay.getInstance().getContentNode()
Overlay.prototype.getInstance = function getInstance() {
return this;
};
Overlay.prototype.render = function render() {
var _props = this.props,
prefix = _props.prefix,
className = _props.className,
style = _props.style,
propChildren = _props.children,
target = _props.target,
align = _props.align,
offset = _props.offset,
container = _props.container,
hasMask = _props.hasMask,
needAdjust = _props.needAdjust,
autoFit = _props.autoFit,
beforePosition = _props.beforePosition,
onPosition = _props.onPosition,
wrapperStyle = _props.wrapperStyle,
rtl = _props.rtl,
propShouldUpdatePosition = _props.shouldUpdatePosition,
cache = _props.cache,
wrapperClassName = _props.wrapperClassName,
onMaskMouseEnter = _props.onMaskMouseEnter,
onMaskMouseLeave = _props.onMaskMouseLeave,
maskClass = _props.maskClass,
isChildrenInMask = _props.isChildrenInMask,
pinFollowBaseElementWhenFixed = _props.pinFollowBaseElementWhenFixed;
var _state = this.state,
stateVisible = _state.visible,
status = _state.status,
animation = _state.animation;
var children = stateVisible || cache && this._isMounted ? propChildren : null;
if (children) {
var _classnames, _classnames2;
var child = _react.Children.only(children);
// if chlild is a functional component wrap in a component to allow a ref to be set
if (typeof child.type === 'function' && !(child.type.prototype instanceof _react.Component)) {
child = _react2.default.createElement('div', { role: 'none' }, child);
}
var childClazz = (0, _classnames4.default)((_classnames = {}, _classnames[prefix + 'overlay-inner'] = true, _classnames[animation.in] = status === 'entering' || status === 'mounting', _classnames[animation.out] = status === 'leaving', _classnames[child.props.className] = !!child.props.className, _classnames[className] = !!className, _classnames));
if (typeof child.ref === 'string') {
throw new Error('Can not set ref by string in Overlay, use function instead.');
}
children = _react2.default.cloneElement(child, {
className: childClazz,
style: (0, _extends3.default)({}, child.props.style, style),
ref: makeChain(this.saveContentRef, child.ref),
'aria-hidden': !stateVisible && cache && this._isMounted,
onClick: this.props.onClick
});
if (align) {
var shouldUpdatePosition = status === 'leaving' ? false : propShouldUpdatePosition;
children = _react2.default.createElement(_position2.default, {
children: children,
target: target,
align: align,
offset: offset,
autoFit: autoFit,
container: container,
needAdjust: needAdjust,
pinFollowBaseElementWhenFixed: pinFollowBaseElementWhenFixed,
beforePosition: beforePosition,
onPosition: makeChain(this.handlePosition, onPosition),
shouldUpdatePosition: shouldUpdatePosition,
rtl: rtl
});
}
var wrapperClazz = (0, _classnames4.default)([prefix + 'overlay-wrapper', wrapperClassName]);
var newWrapperStyle = (0, _extends3.default)({}, {
display: stateVisible ? '' : 'none'
}, wrapperStyle);
var maskClazz = (0, _classnames4.default)((_classnames2 = {}, _classnames2[prefix + 'overlay-backdrop'] = true, _classnames2[maskClass] = !!maskClass, _classnames2));
children = _react2.default.createElement('div', {
className: wrapperClazz,
style: newWrapperStyle,
dir: rtl ? 'rtl' : undefined
}, hasMask ? _react2.default.createElement('div', {
className: maskClazz,
onClick: this.handleMaskClick,
onMouseEnter: onMaskMouseEnter,
onMouseLeave: onMaskMouseLeave,
dir: rtl ? 'rtl' : undefined
}, isChildrenInMask && children) : null, !isChildrenInMask && children);
}
return _react2.default.createElement(_gateway2.default, (0, _extends3.default)({ container: container, target: target, children: children }, {
ref: this.saveGatewayRef
}));
};
return Overlay;
}(_react.Component), _class.propTypes = {
prefix: _propTypes2.default.string,
pure: _propTypes2.default.bool,
rtl: _propTypes2.default.bool,
className: _propTypes2.default.string,
style: _propTypes2.default.object,
/**
* 弹层内容
*/
children: _propTypes2.default.any,
/**
* 是否显示弹层
*/
visible: _propTypes2.default.bool,
/**
* 弹层请求关闭时触发事件的回调函数
* @param {String} type 弹层关闭的来源
* @param {Object} e DOM 事件
*/
onRequestClose: _propTypes2.default.func,
/**
* 弹层定位的参照元素
*/
target: _propTypes2.default.any,
/**
* 弹层相对于参照元素的定位, 详见开发指南的[定位部分](#定位)
*/
align: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.bool]),
/**
* 弹层相对于trigger的定位的微调, 接收数组[hoz, ver], 表示弹层在 left / top 上的增量
* e.g. [100, 100] 表示往右(RTL 模式下是往左) 、下分布偏移100px
*/
offset: _propTypes2.default.array,
/**
* 渲染组件的容器,如果是函数需要返回 ref,如果是字符串则是该 DOM 的 id,也可以直接传入 DOM 节点
*/
container: _propTypes2.default.any,
/**
* 是否显示遮罩
*/
hasMask: _propTypes2.default.bool,
/**
* 是否支持 esc 按键关闭弹层
*/
canCloseByEsc: _propTypes2.default.bool,
/**
* 点击弹层外的区域是否关闭弹层,不显示遮罩时生效
*/
canCloseByOutSideClick: _propTypes2.default.bool,
/**
* 点击遮罩区域是否关闭弹层,显示遮罩时生效
*/
canCloseByMask: _propTypes2.default.bool,
/**
* 弹层打开前触发事件的回调函数
*/
beforeOpen: _propTypes2.default.func,
/**
* 弹层打开时触发事件的回调函数
*/
onOpen: _propTypes2.default.func,
/**
* 弹层打开后触发事件的回调函数, 如果有动画,则在动画结束后触发
*/
afterOpen: _propTypes2.default.func,
/**
* 弹层关闭前触发事件的回调函数
*/
beforeClose: _propTypes2.default.func,
/**
* 弹层关闭时触发事件的回调函数
*/
onClose: _propTypes2.default.func,
/**
* 弹层关闭后触发事件的回调函数, 如果有动画,则在动画结束后触发
*/
afterClose: _propTypes2.default.func,
/**
* 弹层定位完成前触发的事件
*/
beforePosition: _propTypes2.default.func,
/**
* 弹层定位完成时触发的事件
* @param {Object} config 定位的参数
* @param {Array} config.align 对齐方式,如 ['cc', 'cc'](如果开启 needAdjust,可能和预先设置的 align 不同)
* @param {Number} config.top 距离视口顶部距离
* @param {Number} config.left 距离视口左侧距离
* @param {Object} node 定位参照的容器节点
*/
onPosition: _propTypes2.default.func,
/**
* 是否在每次弹层重新渲染后强制更新定位信息,一般用于弹层内容区域大小发生变化时,仍需保持原来的定位方式
*/
shouldUpdatePosition: _propTypes2.default.bool,
/**
* 弹层打开时是否让其中的元素自动获取焦点
*/
autoFocus: _propTypes2.default.bool,
/**
* 当弹层由于页面滚动等情况不在可视区域时,是否自动调整定位以出现在可视区域
*/
needAdjust: _propTypes2.default.bool,
/**
* 是否禁用页面滚动
*/
disableScroll: _propTypes2.default.bool,
/**
* 隐藏时是否保留子节点
*/
cache: _propTypes2.default.bool,
/**
* 安全节点,当点击 document 的时候,如果包含该节点则不会关闭弹层,如果是函数需要返回 ref,如果是字符串则是该 DOM 的 id,也可以直接传入 DOM 节点,或者以上值组成的数组
*/
safeNode: _propTypes2.default.any,
/**
* 弹层的根节点的样式类
*/
wrapperClassName: _propTypes2.default.string,
/**
* 弹层的根节点的内联样式
*/
wrapperStyle: _propTypes2.default.object,
/**
* 配置动画的播放方式,支持 { in: 'enter-class', out: 'leave-class' } 的对象参数,如果设置为 false,则不播放动画。 请参考 Animate 组件的文档获取可用的动画名
* @default { in: 'expandInDown', out: 'expandOutUp' }
*/
animation: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.bool]),
onMaskMouseEnter: _propTypes2.default.func,
onMaskMouseLeave: _propTypes2.default.func,
onClick: _propTypes2.default.func,
maskClass: _propTypes2.default.string,
isChildrenInMask: _propTypes2.default.bool,
// 当 pin 元素(一般是弹层)是 fixed 布局的时候,pin 元素是否要跟随 base 元素(一般是trigger)
// 举例来说,dialog/drawer 这类组件弹层是不跟随trigger的,而 fixed 布局下的subNav是跟随trigger的
pinFollowBaseElementWhenFixed: _propTypes2.default.bool
}, _class.defaultProps = {
prefix: 'next-',
pure: false,
visible: false,
onRequestClose: noop,
target: _position2.default.VIEWPORT,
align: 'tl bl',
offset: [0, 0],
hasMask: false,
canCloseByEsc: true,
canCloseByOutSideClick: true,
canCloseByMask: true,
beforeOpen: noop,
onOpen: noop,
afterOpen: noop,
beforeClose: noop,
onClose: noop,
afterClose: noop,
beforePosition: noop,
onPosition: noop,
onMaskMouseEnter: noop,
onMaskMouseLeave: noop,
shouldUpdatePosition: false,
autoFocus: false,
needAdjust: true,
disableScroll: false,
cache: false,
isChildrenInMask: false,
onClick: function onClick(e) {
return e.stopPropagation();
},
maskClass: ''
}, _temp);
Overlay.displayName = 'Overlay';
exports.default = (0, _reactLifecyclesCompat.polyfill)(Overlay);
module.exports = exports['default'];
/***/ }),
/* 118 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
var _classCallCheck2 = __webpack_require__(1);
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _possibleConstructorReturn2 = __webpack_require__(2);
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = __webpack_require__(3);
var _inherits3 = _interopRequireDefault(_inherits2);
var _class, _temp;
var _react = __webpack_require__(0);
var _react2 = _interopRequireDefault(_react);
var _reactDom = __webpack_require__(12);
var _propTypes = __webpack_require__(5);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _reactLifecyclesCompat = __webpack_require__(10);
var _util = __webpack_require__(8);
var _findNode = __webpack_require__(53);
var _findNode2 = _interopRequireDefault(_findNode);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { default: obj };
}
var makeChain = _util.func.makeChain;
var getContainerNode = function getContainerNode(props) {
var targetNode = (0, _findNode2.default)(props.target);
return (0, _findNode2.default)(props.container, targetNode);
};
var Gateway = (_temp = _class = function (_Component) {
(0, _inherits3.default)(Gateway, _Component);
function Gateway(props) {
(0, _classCallCheck3.default)(this, Gateway);
var _this = (0, _possibleConstructorReturn3.default)(this, _Component.call(this, props));
_this.saveChildRef = function (ref) {
_this.child = ref;
};
_this.state = {
containerNode: null
};
return _this;
}
Gateway.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps) {
return {
containerNode: getContainerNode(nextProps)
};
};
Gateway.prototype.componentDidMount = function componentDidMount() {
this.forceUpdate();
};
Gateway.prototype.getChildNode = function getChildNode() {
try {
return (0, _reactDom.findDOMNode)(this.child);
} catch (err) {
return null;
}
};
Gateway.prototype.render = function render() {
var containerNode = this.state.containerNode;
if (!containerNode) {
return null;
}
var children = this.props.children;
var child = children ? _react.Children.only(children) : null;
if (!child) {
return null;
}
if (typeof child.ref === 'string') {
throw new Error('Can not set ref by string in Gateway, use function instead.');
}
child = _react2.default.cloneElement(child, {
ref: makeChain(this.saveChildRef, child.ref)
});
return (0, _reactDom.createPortal)(child, containerNode);
};
return Gateway;
}(_react.Component), _class.propTypes = {
children: _propTypes2.default.node,
container: _propTypes2.default.any,
target: _propTypes2.default.any
}, _class.defaultProps = {
container: function container() {
return document.body;
}
}, _temp);
Gateway.displayName = 'Gateway';
exports.default = (0, _reactLifecyclesCompat.polyfill)(Gateway);
module.exports = exports['default'];
/***/ }),
/* 119 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
exports.default = undefined;
var _classCallCheck2 = __webpack_require__(1);
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _possibleConstructorReturn2 = __webpack_require__(2);
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = __webpack_require__(3);
var _inherits3 = _interopRequireDefault(_inherits2);
var _class, _temp;
var _react = __webpack_require__(0);
var _reactDom = __webpack_require__(12);
var _propTypes = __webpack_require__(5);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _util = __webpack_require__(8);
var _position = __webpack_require__(244);
var _position2 = _interopRequireDefault(_position);
var _findNode = __webpack_require__(53);
var _findNode2 = _interopRequireDefault(_findNode);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { default: obj };
}
var noop = _util.func.noop,
bindCtx = _util.func.bindCtx;
var getStyle = _util.dom.getStyle;
var place = _position2.default.place;
var Position = (_temp = _class = function (_Component) {
(0, _inherits3.default)(Position, _Component);
function Position(props) {
(0, _classCallCheck3.default)(this, Position);
var _this = (0, _possibleConstructorReturn3.default)(this, _Component.call(this, props));
bindCtx(_this, ['handleResize']);
return _this;
}
Position.prototype.componentDidMount = function componentDidMount() {
this.setPosition();
if (this.props.needListenResize) {
_util.events.on(window, 'resize', this.handleResize);
}
};
Position.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
var props = this.props;
if ('align' in props && props.align !== prevProps.align || props.shouldUpdatePosition) {
this.shouldUpdatePosition = true;
}
if (this.shouldUpdatePosition) {
this.setPosition();
this.shouldUpdatePosition = false;
}
};
Position.prototype.componentWillUnmount = function componentWillUnmount() {
if (this.props.needListenResize) {
_util.events.off(window, 'resize', this.handleResize);
}
clearTimeout(this.resizeTimeout);
};
Position.prototype.setPosition = function setPosition() {
var _props = this.props,
align = _props.align,
offset = _props.offset,
beforePosition = _props.beforePosition,
onPosition = _props.onPosition,
needAdjust = _props.needAdjust,
container = _props.container,
rtl = _props.rtl,
pinFollowBaseElementWhenFixed = _props.pinFollowBaseElementWhenFixed,
autoFit = _props.autoFit;
beforePosition();
var contentNode = this.getContentNode();
var targetNode = this.getTargetNode();
if (contentNode && targetNode) {
var resultAlign = place({
pinElement: contentNode,
baseElement: targetNode,
pinFollowBaseElementWhenFixed: pinFollowBaseElementWhenFixed,
align: align,
offset: offset,
autoFit: autoFit,
container: container,
needAdjust: needAdjust,
isRtl: rtl
});
var top = getStyle(contentNode, 'top');
var left = getStyle(contentNode, 'left');
onPosition({
align: resultAlign.split(' '),
top: top,
left: left
}, contentNode);
}
};
Position.prototype.getContentNode = function getContentNode() {
try {
return (0, _reactDom.findDOMNode)(this);
} catch (err) {
return null;
}
};
Position.prototype.getTargetNode = function getTargetNode() {
var target = this.props.target;
return target === _position2.default.VIEWPORT ? _position2.default.VIEWPORT : (0, _findNode2.default)(target, this.props);
};
Position.prototype.handleResize = function handleResize() {
var _this2 = this;
clearTimeout(this.resizeTimeout);
this.resizeTimeout = setTimeout(function () {
_this2.setPosition();
}, 200);
};
Position.prototype.render = function render() {
return _react.Children.only(this.props.children);
};
return Position;
}(_react.Component), _class.VIEWPORT = _position2.default.VIEWPORT, _class.propTypes = {
children: _propTypes2.default.node,
target: _propTypes2.default.any,
container: _propTypes2.default.any,
align: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.bool]),
offset: _propTypes2.default.array,
beforePosition: _propTypes2.default.func,
onPosition: _propTypes2.default.func,
needAdjust: _propTypes2.default.bool,
autoFit: _propTypes2.default.bool,
needListenResize: _propTypes2.default.bool,
shouldUpdatePosition: _propTypes2.default.bool,
rtl: _propTypes2.default.bool,
pinFollowBaseElementWhenFixed: _propTypes2.default.bool
}, _class.defaultProps = {
align: 'tl bl',
offset: [0, 0],
beforePosition: noop,
onPosition: noop,
needAdjust: true,
autoFit: false,
needListenResize: true,
shouldUpdatePosition: false,
rtl: false
}, _temp);
Position.displayName = 'Position';
exports.default = Position;
module.exports = exports['default'];
/***/ }),
/* 120 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
var _extends2 = __webpack_require__(4);
var _extends3 = _interopRequireDefault(_extends2);
exports.getDisabledCompatibleTrigger = getDisabledCompatibleTrigger;
var _react = __webpack_require__(0);
var _react2 = _interopRequireDefault(_react);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { default: obj };
}
function getDisabledCompatibleTrigger(element) {
if (element.type.displayName === 'Config(Button)' && element.props.disabled) {
var displayStyle = element.props.style && element.props.style.display ? element.props.style.display : 'inline-block';
var child = _react2.default.cloneElement(element, {
style: (0, _extends3.default)({}, element.props.style, {
pointerEvents: 'none'
})
});
return (
// eslint-disable-next-line
_react2.default.createElement('span', { style: { display: displayStyle, cursor: 'not-allowed' } }, child)
);
}
return element;
}
/***/ }),
/* 121 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
var _configProvider = __webpack_require__(9);
var _configProvider2 = _interopRequireDefault(_configProvider);
var _util = __webpack_require__(8);
var _tag = __webpack_require__(77);
var _tag2 = _interopRequireDefault(_tag);
var _tagGroup = __webpack_require__(255);
var _tagGroup2 = _interopRequireDefault(_tagGroup);
var _selectable = __webpack_require__(256);
var _selectable2 = _interopRequireDefault(_selectable);
var _closeable = __webpack_require__(257);
var _closeable2 = _interopRequireDefault(_closeable);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { default: obj };
}
var ConfigTag = _configProvider2.default.config(_tag2.default, {
transfrom: /* istanbul ignore next */function transfrom(props, deprecated) {
var shape = props.shape,
type = props.type;
if (shape === 'selectable') {
deprecated('shape=selectable', 'Tag.Selectable', 'Tag');
}
if (shape === 'deletable') {
deprecated('shape=deletable', 'Tag.Closeable', 'Tag');
}
if (shape === 'link') {
deprecated('shape=link', 'x', 'Tag');
}
if (shape === 'readonly' || shape === 'interactive') {
_util.log.warning('Warning: [ shape=' + shape + ' ] is deprecated at [ Tag ]');
}
if (type === 'secondary') {
_util.log.warning('Warning: [ type=secondary ] is deprecated at [ Tag ]');
}
['count', 'marked', 'value', 'onChange'].forEach(function (key) {
if (key in props) {
_util.log.warning('Warning: [ ' + key + ' ] is deprecated at [ Tag ]');
}
});
if ('selected' in props || 'defaultSelected' in props) {
_util.log.warning('Warning: [ selected|defaultSelected ] is deprecated at [ Tag ], use [ checked|defaultChecked ] at [ Tag.Selectable ] instead of it');
}
if ('closed' in props) {
_util.log.warning('Warning: [ closed ] is deprecated at [ Tag ], use [ onClose ] at [ Tag.Closeable ] instead of it');
}
if ('onSelect' in props) {
deprecated('onSelect', '', 'Tag');
}
if ('afterClose' in props) {
_util.log.warning('Warning: [ afterClose ] is deprecated at [ Tag ], use [ afterClose ] at [ Tag.Closeable ] instead of it');
}
return props;
}
});
ConfigTag.Group = _configProvider2.default.config(_tagGroup2.default);
ConfigTag.Selectable = _configProvider2.default.config(_selectable2.default);
// 有的地方叫做 Closeable 有的地方用Closeable, 为了保持兼容 文档类出现 Closeable, Closeable可以继续用
ConfigTag.Closable = _configProvider2.default.config(_closeable2.default);
ConfigTag.Closeable = ConfigTag.Closable;
exports.default = ConfigTag;
module.exports = exports['default'];
/***/ }),
/* 122 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
exports.default = undefined;
var _extends2 = __webpack_require__(4);
var _extends3 = _interopRequireDefault(_extends2);
var _classCallCheck2 = __webpack_require__(1);
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _possibleConstructorReturn2 = __webpack_require__(2);
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = __webpack_require__(3);
var _inherits3 = _interopRequireDefault(_inherits2);
var _class, _temp;
var _react = __webpack_require__(0);
var _react2 = _interopRequireDefault(_react);
var _propTypes = __webpack_require__(5);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _classnames = __webpack_require__(6);
var _classnames2 = _interopRequireDefault(_classnames);
var _icon = __webpack_require__(11);
var _icon2 = _interopRequireDefault(_icon);
var _util = __webpack_require__(8);
var _base = __webpack_require__(123);
var _base2 = _interopRequireDefault(_base);
var _group = __webpack_require__(124);
var _group2 = _interopRequireDefault(_group);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { default: obj };
}
// preventDefault here can stop onBlur to keep focus state
function preventDefault(e) {
e.preventDefault();
}
/** Input */
var Input = (_temp = _class = function (_Base) {
(0, _inherits3.default)(Input, _Base);
function Input(props) {
(0, _classCallCheck3.default)(this, Input);
var _this = (0, _possibleConstructorReturn3.default)(this, _Base.call(this, props));
_this.handleKeyDown = function (e) {
if (e.keyCode === 13) {
_this.props.onPressEnter(e);
}
_this.onKeyDown(e);
};
_this.handleKeyDownFromClear = function (e) {
if (e.keyCode === 13) {
_this.onClear(e);
}
};
var value = void 0;
if ('value' in props) {
value = props.value;
} else {
value = props.defaultValue;
}
_this.state = {
value: typeof value === 'undefined' ? '' : value
};
return _this;
}
// `Enter` was considered to be two chars in chrome , but one char in ie.
// so we make all `Enter` to be two chars
Input.prototype.getValueLength = function getValueLength(value) {
var nv = '' + value;
var strLen = this.props.getValueLength(nv);
if (typeof strLen !== 'number') {
strLen = nv.length;
}
return strLen;
};
Input.prototype.renderControl = function renderControl() {
var _props = this.props,
hasClear = _props.hasClear,
readOnly = _props.readOnly,
state = _props.state,
prefix = _props.prefix,
hint = _props.hint,
extra = _props.extra,
locale = _props.locale;
var lenWrap = this.renderLength();
var stateWrap = null;
if (state === 'success') {
stateWrap = _react2.default.createElement(_icon2.default, {
type: 'success-filling',
className: prefix + 'input-success-icon'
});
} else if (state === 'loading') {
stateWrap = _react2.default.createElement(_icon2.default, {
type: 'loading',
className: prefix + 'input-loading-icon'
});
} else if (state === 'warning') {
stateWrap = _react2.default.createElement(_icon2.default, {
type: 'warning',
className: prefix + 'input-warning-icon'
});
}
var clearWrap = null;
var showClear = hasClear && !readOnly && !!('' + this.state.value);
if (hint || showClear) {
var hintIcon = null;
if (hint) {
if (typeof hint === 'string') {
hintIcon = _react2.default.createElement(_icon2.default, { type: hint, className: prefix + 'input-hint' });
} else if ((0, _react.isValidElement)(hint)) {
hintIcon = (0, _react.cloneElement)(hint, {
className: (0, _classnames2.default)(hint.props.className, prefix + 'input-hint')
});
} else {
hintIcon = hint;
}
} else {
hintIcon = _react2.default.createElement(_icon2.default, {
type: 'delete-filling',
role: 'button',
tabIndex: '0',
className: prefix + 'input-hint ' + prefix + 'input-clear-icon',
'aria-label': locale.clear,
onClick: this.onClear.bind(this),
onMouseDown: preventDefault,
onKeyDown: this.handleKeyDownFromClear
});
}
clearWrap = _react2.default.createElement('span', { className: prefix + 'input-hint-wrap' }, hasClear && hint ? _react2.default.createElement(_icon2.default, {
type: 'delete-filling',
role: 'button',
tabIndex: '0',
className: prefix + 'input-clear ' + prefix + 'input-clear-icon',
'aria-label': locale.clear,
onClick: this.onClear.bind(this),
onMouseDown: preventDefault,
onKeyDown: this.handleKeyDownFromClear
}) : null, hintIcon);
}
if (state === 'loading') {
clearWrap = null;
}
return clearWrap || lenWrap || stateWrap || extra ? _react2.default.createElement('span', { className: prefix + 'input-control' }, clearWrap, lenWrap, stateWrap, extra) : null;
};
Input.prototype.renderLabel = function renderLabel() {
var _props2 = this.props,
label = _props2.label,
prefix = _props2.prefix,
id = _props2.id;
return label ? _react2.default.createElement('label', { className: prefix + 'input-label', htmlFor: id }, label) : null;
};
Input.prototype.renderInner = function renderInner(inner, cls) {
return inner ? _react2.default.createElement('span', { className: cls }, inner) : null;
};
Input.prototype.onClear = function onClear(e) {
if (this.props.disabled) {
return;
}
// 非受控模式清空内部数据
if (!('value' in this.props)) {
this.setState({
value: ''
});
}
this.props.onChange('', e, 'clear');
this.focus();
};
Input.prototype.render = function render() {
var _classNames, _classNames2, _classNames3, _classNames4, _classNames5, _classNames6, _classNames7;
var _props3 = this.props,
size = _props3.size,
htmlType = _props3.htmlType,
htmlSize = _props3.htmlSize,
autoComplete = _props3.autoComplete,
autoFocus = _props3.autoFocus,
disabled = _props3.disabled,
style = _props3.style,
innerBefore = _props3.innerBefore,
innerAfter = _props3.innerAfter,
innerBeforeClassName = _props3.innerBeforeClassName,
innerAfterClassName = _props3.innerAfterClassName,
className = _props3.className,
hasBorder = _props3.hasBorder,
prefix = _props3.prefix,
isPreview = _props3.isPreview,
renderPreview = _props3.renderPreview,
addonBefore = _props3.addonBefore,
addonAfter = _props3.addonAfter,
addonTextBefore = _props3.addonTextBefore,
addonTextAfter = _props3.addonTextAfter,
inputRender = _props3.inputRender,
rtl = _props3.rtl;
var hasAddon = addonBefore || addonAfter || addonTextBefore || addonTextAfter;
var cls = (0, _classnames2.default)(this.getClass(), (_classNames = {}, _classNames['' + prefix + size] = true, _classNames[prefix + 'hidden'] = this.props.htmlType === 'hidden', _classNames[prefix + 'noborder'] = !hasBorder || this.props.htmlType === 'file', _classNames[prefix + 'input-group-auto-width'] = hasAddon, _classNames[className] = !!className && !hasAddon, _classNames));
var innerCls = prefix + 'input-inner';
var innerBeforeCls = (0, _classnames2.default)((_classNames2 = {}, _classNames2[innerCls] = true, _classNames2[prefix + 'before'] = true, _classNames2[innerBeforeClassName] = innerBeforeClassName, _classNames2));
var innerAfterCls = (0, _classnames2.default)((_classNames3 = {}, _classNames3[innerCls] = true, _classNames3[prefix + 'after'] = true, _classNames3[innerAfterClassName] = innerAfterClassName, _classNames3));
var previewCls = (0, _classnames2.default)((_classNames4 = {}, _classNames4[prefix + 'form-preview'] = true, _classNames4[className] = !!className, _classNames4));
var props = this.getProps();
// custom data attributes are assigned to the top parent node
// data-类自定义数据属性分配到顶层node节点
var dataProps = _util.obj.pickAttrsWith(this.props, 'data-');
// Custom props are transparently transmitted to the core input node by default
// 自定义属性默认透传到核心node节点:input
var others = _util.obj.pickOthers((0, _extends3.default)({}, dataProps, Input.propTypes), this.props);
if (isPreview) {
var value = props.value;
var label = this.props.label;
if (typeof renderPreview === 'function') {
return _react2.default.createElement('div', (0, _extends3.default)({}, others, { className: previewCls }), renderPreview(value, this.props));
}
return _react2.default.createElement('div', (0, _extends3.default)({}, others, { className: previewCls }), addonBefore || addonTextBefore, label, innerBefore, value, innerAfter, addonAfter || addonTextAfter);
}
var inputEl = _react2.default.createElement('input', (0, _extends3.default)({}, others, props, {
height: '100%',
type: htmlType,
size: htmlSize,
autoFocus: autoFocus,
autoComplete: autoComplete,
onKeyDown: this.handleKeyDown,
ref: this.saveRef
}));
var inputWrap = _react2.default.createElement('span', (0, _extends3.default)({}, dataProps, {
dir: rtl ? 'rtl' : undefined,
className: cls,
style: hasAddon ? undefined : style
}), this.renderLabel(), this.renderInner(innerBefore, innerBeforeCls), inputRender(inputEl), this.renderInner(innerAfter, innerAfterCls), this.renderControl());
var groupCls = (0, _classnames2.default)((_classNames5 = {}, _classNames5[prefix + 'input-group-text'] = true, _classNames5['' + prefix + size] = !!size, _classNames5[prefix + 'disabled'] = disabled, _classNames5));
var addonBeforeCls = (0, _classnames2.default)((_classNames6 = {}, _classNames6[groupCls] = addonTextBefore, _classNames6));
var addonAfterCls = (0, _classnames2.default)((_classNames7 = {}, _classNames7[groupCls] = addonTextAfter, _classNames7));
if (hasAddon) {
return _react2.default.createElement(_group2.default, (0, _extends3.default)({}, dataProps, {
className: className,
style: style,
addonBefore: addonBefore || addonTextBefore,
addonBeforeClassName: addonBeforeCls,
addonAfter: addonAfter || addonTextAfter,
addonAfterClassName: addonAfterCls
}), inputWrap);
}
return inputWrap;
};
return Input;
}(_base2.default), _class.getDerivedStateFromProps = _base2.default.getDerivedStateFromProps, _class.propTypes = (0, _extends3.default)({}, _base2.default.propTypes, {
/**
* label
*/
label: _propTypes2.default.node,
/**
* 是否出现clear按钮
*/
hasClear: _propTypes2.default.bool,
/**
* 是否有边框
*/
hasBorder: _propTypes2.default.bool,
/**
* 状态
* @enumdesc 错误, 校验中, 成功, 警告
*/
state: _propTypes2.default.oneOf(['error', 'loading', 'success', 'warning']),
/**
* 按下回车的回调
*/
onPressEnter: _propTypes2.default.func,
onClear: _propTypes2.default.func,
/**
* 原生type
*/
htmlType: _propTypes2.default.string,
htmlSize: _propTypes2.default.string,
/**
* 水印 (Icon的type类型,和hasClear占用一个地方)
*/
hint: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.node]),
/**
* 文字前附加内容
*/
innerBefore: _propTypes2.default.node,
/**
* 文字后附加内容
*/
innerAfter: _propTypes2.default.node,
/**
* 输入框前附加内容
*/
addonBefore: _propTypes2.default.node,
/**
* 输入框后附加内容
*/
addonAfter: _propTypes2.default.node,
/**
* 输入框前附加文字
*/
addonTextBefore: _propTypes2.default.node,
/**
* 输入框后附加文字
*/
addonTextAfter: _propTypes2.default.node,
/**
* (原生input支持)
*/
autoComplete: _propTypes2.default.string,
/**
* 自动聚焦(原生input支持)
*/
autoFocus: _propTypes2.default.bool,
inputRender: _propTypes2.default.func,
extra: _propTypes2.default.node,
innerBeforeClassName: _propTypes2.default.string,
innerAfterClassName: _propTypes2.default.string,
/**
* 是否为预览态
*/
isPreview: _propTypes2.default.bool,
/**
* 预览态模式下渲染的内容
* @param {number} value 评分值
*/
renderPreview: _propTypes2.default.func
}), _class.defaultProps = (0, _extends3.default)({}, _base2.default.defaultProps, {
autoComplete: 'off',
hasBorder: true,
isPreview: false,
onPressEnter: _util.func.noop,
inputRender: function inputRender(el) {
return el;
}
}), _temp);
exports.default = Input;
module.exports = exports['default'];
/***/ }),
/* 123 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
var _extends2 = __webpack_require__(4);
var _extends3 = _interopRequireDefault(_extends2);
var _classCallCheck2 = __webpack_require__(1);
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _possibleConstructorReturn2 = __webpack_require__(2);
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = __webpack_require__(3);
var _inherits3 = _interopRequireDefault(_inherits2);
var _class, _temp2;
var _react = __webpack_require__(0);
var _react2 = _interopRequireDefault(_react);
var _propTypes = __webpack_require__(5);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _classnames = __webpack_require__(6);
var _classnames2 = _interopRequireDefault(_classnames);
var _reactLifecyclesCompat = __webpack_require__(10);
var _configProvider = __webpack_require__(9);
var _configProvider2 = _interopRequireDefault(_configProvider);
var _util = __webpack_require__(8);
var _zhCn = __webpack_require__(13);
var _zhCn2 = _interopRequireDefault(_zhCn);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { default: obj };
}
var Base = (_temp2 = _class = function (_React$Component) {
(0, _inherits3.default)(Base, _React$Component);
function Base() {
var _temp, _this, _ret;
(0, _classCallCheck3.default)(this, Base);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.saveRef = function (input) {
_this.inputRef = input;
}, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
}
Base.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
if ('value' in nextProps && nextProps.value !== prevState.value) {
var value = nextProps.value;
return {
value: value === undefined || value === null ? '' : value
};
}
return null;
};
Base.prototype.ieHack = function ieHack(value) {
return value;
};
Base.prototype.onChange = function onChange(e) {
if ('stopPropagation' in e) {
e.stopPropagation();
} else if ('cancelBubble' in e) {
e.cancelBubble();
}
var value = e.target.value;
if (this.props.trim) {
value = value.trim();
}
value = this.ieHack(value);
// not controlled
if (!('value' in this.props)) {
this.setState({
value: value
});
}
// Number('') = 0
if (value && this.props.htmlType === 'number') {
value = Number(value);
}
this.props.onChange(value, e);
};
Base.prototype.onKeyDown = function onKeyDown(e) {
var value = e.target.value;
var maxLength = this.props.maxLength;
var len = maxLength > 0 && value ? this.getValueLength(value) : 0;
var opts = {};
// has enable trim and has input whitespace
if (this.props.trim && e.keyCode === 32) {
opts.beTrimed = true;
}
// has defined maxLength and has over max length and has not input backspace and delete
if (maxLength > 0 && (len > maxLength + 1 || (len === maxLength || len === maxLength + 1) && e.keyCode !== 8 && e.keyCode !== 46)) {
opts.overMaxLength = true;
}
this.props.onKeyDown(e, opts);
};
Base.prototype.onFocus = function onFocus(e) {
this.setState({
focus: true
});
this.props.onFocus(e);
};
Base.prototype.onBlur = function onBlur(e) {
this.setState({
focus: false
});
this.props.onBlur(e);
};
Base.prototype.renderLength = function renderLength() {
var _classNames;
var _props = this.props,
maxLength = _props.maxLength,
hasLimitHint = _props.hasLimitHint,
prefix = _props.prefix,
rtl = _props.rtl;
var len = maxLength > 0 && this.state.value ? this.getValueLength(this.state.value) : 0;
var classesLenWrap = (0, _classnames2.default)((_classNames = {}, _classNames[prefix + 'input-len'] = true, _classNames[prefix + 'error'] = len > maxLength, _classNames));
var content = rtl ? maxLength + '/' + len : len + '/' + maxLength;
return maxLength && hasLimitHint ? _react2.default.createElement('span', { className: classesLenWrap }, content) : null;
};
Base.prototype.renderControl = function renderControl() {
var lenWrap = this.renderLength();
return lenWrap ? _react2.default.createElement('span', { className: this.props.prefix + 'input-control' }, lenWrap) : null;
};
Base.prototype.getClass = function getClass() {
var _classNames2;
var _props2 = this.props,
disabled = _props2.disabled,
state = _props2.state,
prefix = _props2.prefix;
return (0, _classnames2.default)((_classNames2 = {}, _classNames2[prefix + 'input'] = true, _classNames2[prefix + 'disabled'] = !!disabled, _classNames2[prefix + 'error'] = state === 'error', _classNames2[prefix + 'warning'] = state === 'warning', _classNames2[prefix + 'focus'] = this.state.focus, _classNames2));
};
Base.prototype.getProps = function getProps() {
var _props3 = this.props,
placeholder = _props3.placeholder,
inputStyle = _props3.inputStyle,
disabled = _props3.disabled,
readOnly = _props3.readOnly,
cutString = _props3.cutString,
maxLength = _props3.maxLength,
name = _props3.name;
var props = {
style: inputStyle,
placeholder: placeholder,
disabled: disabled,
readOnly: readOnly,
name: name,
maxLength: cutString ? maxLength : undefined,
value: this.state.value,
onChange: this.onChange.bind(this),
onBlur: this.onBlur.bind(this),
onFocus: this.onFocus.bind(this)
};
// fix accessibility:auto process status of aria disabled
if (disabled) {
props['aria-disabled'] = disabled;
}
return props;
};
Base.prototype.getInputNode = function getInputNode() {
return this.inputRef;
};
Base.prototype.focus = function focus(start, end) {
this.inputRef.focus();
if (typeof start === 'number') {
this.inputRef.selectionStart = start;
}
if (typeof end === 'number') {
this.inputRef.selectionEnd = end;
}
};
return Base;
}(_react2.default.Component), _class.propTypes = (0, _extends3.default)({}, _configProvider2.default.propTypes, {
/**
* 当前值
*/
value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
/**
* 初始化值
*/
defaultValue: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
/**
* 发生改变的时候触发的回调
* @param {String} value 数据
* @param {Event} e DOM事件对象
*/
onChange: _propTypes2.default.func,
/**
* 键盘按下的时候触发的回调
* @param {Event} e DOM事件对象
* @param {Object} opts 可扩展的附加信息:
- opts.overMaxLength: {Boolean} 已超出最大长度
- opts.beTrimed: {Boolean} 输入的空格被清理
*/
onKeyDown: _propTypes2.default.func,
/**
* 禁用状态
*/
disabled: _propTypes2.default.bool,
/**
* 最大长度
*/
maxLength: _propTypes2.default.number,
/**
* 是否展现最大长度样式
*/
hasLimitHint: _propTypes2.default.bool,
/**
* 当设置了maxLength时,是否截断超出字符串
*/
cutString: _propTypes2.default.bool,
/**
* 只读
*/
readOnly: _propTypes2.default.bool,
/**
* onChange返回会自动去除头尾空字符
*/
trim: _propTypes2.default.bool,
/**
* 输入提示
*/
placeholder: _propTypes2.default.string,
/**
* 获取焦点时候触发的回调
* @param {Event} e DOM事件对象
*/
onFocus: _propTypes2.default.func,
/**
* 失去焦点时候触发的回调
* @param {Event} e DOM事件对象
*/
onBlur: _propTypes2.default.func,
/**
* 自定义字符串计算长度方式
* @param {String} value 数据
* @returns {Number} 自定义长度
*/
getValueLength: _propTypes2.default.func,
inputStyle: _propTypes2.default.object,
/**
* 自定义class
*/
className: _propTypes2.default.string,
/**
* 自定义内联样式
*/
style: _propTypes2.default.object,
/**
* 原生type
*/
htmlType: _propTypes2.default.string,
/**
* name
*/
name: _propTypes2.default.string,
rtl: _propTypes2.default.bool,
state: _propTypes2.default.oneOf(['error', 'loading', 'success', 'warning']),
locale: _propTypes2.default.object,
/**
* 是否为预览态
*/
isPreview: _propTypes2.default.bool,
/**
* 预览态模式下渲染的内容
* @param {number} value 评分值
*/
renderPreview: _propTypes2.default.func,
/**
* 尺寸
* @enumdesc 小, 中, 大
*/
size: _propTypes2.default.oneOf(['small', 'medium', 'large'])
}), _class.defaultProps = {
disabled: false,
prefix: 'next-',
size: 'medium',
maxLength: null,
hasLimitHint: false,
cutString: true,
readOnly: false,
isPreview: false,
trim: false,
onFocus: _util.func.noop,
onBlur: _util.func.noop,
onChange: _util.func.noop,
onKeyDown: _util.func.noop,
getValueLength: _util.func.noop,
locale: _zhCn2.default.Input
}, _temp2);
Base.displayName = 'Base';
exports.default = (0, _reactLifecyclesCompat.polyfill)(Base);
module.exports = exports['default'];
/***/ }),
/* 124 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
var _extends2 = __webpack_require__(4);
var _extends3 = _interopRequireDefault(_extends2);
var _objectWithoutProperties2 = __webpack_require__(7);
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _classCallCheck2 = __webpack_require__(1);
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _possibleConstructorReturn2 = __webpack_require__(2);
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = __webpack_require__(3);
var _inherits3 = _interopRequireDefault(_inherits2);
var _class, _temp;
var _react = __webpack_require__(0);
var _react2 = _interopRequireDefault(_react);
var _propTypes = __webpack_require__(5);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _classnames = __webpack_require__(6);
var _classnames2 = _interopRequireDefault(_classnames);
var _configProvider = __webpack_require__(9);
var _configProvider2 = _interopRequireDefault(_configProvider);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { default: obj };
}
/**
* Input.Group
*/
var Group = (_temp = _class = function (_React$Component) {
(0, _inherits3.default)(Group, _React$Component);
function Group() {
(0, _classCallCheck3.default)(this, Group);
return (0, _possibleConstructorReturn3.default)(this, _React$Component.apply(this, arguments));
}
Group.prototype.render = function render() {
var _classNames, _classNames2, _classNames3;
var _props = this.props,
className = _props.className,
style = _props.style,
children = _props.children,
prefix = _props.prefix,
addonBefore = _props.addonBefore,
addonAfter = _props.addonAfter,
addonBeforeClassName = _props.addonBeforeClassName,
addonAfterClassName = _props.addonAfterClassName,
rtl = _props.rtl,
others = (0, _objectWithoutProperties3.default)(_props, ['className', 'style', 'children', 'prefix', 'addonBefore', 'addonAfter', 'addonBeforeClassName', 'addonAfterClassName', 'rtl']);
var cls = (0, _classnames2.default)((_classNames = {}, _classNames[prefix + 'input-group'] = true, _classNames[className] = !!className, _classNames));
var addonCls = prefix + 'input-group-addon';
var beforeCls = (0, _classnames2.default)(addonCls, (_classNames2 = {}, _classNames2[prefix + 'before'] = true, _classNames2[addonBeforeClassName] = addonBeforeClassName, _classNames2));
var afterCls = (0, _classnames2.default)(addonCls, (_classNames3 = {}, _classNames3[prefix + 'after'] = true, _classNames3[addonAfterClassName] = addonAfterClassName, _classNames3));
var before = addonBefore ? _react2.default.createElement('span', { className: beforeCls }, addonBefore) : null;
var after = addonAfter ? _react2.default.createElement('span', { className: afterCls }, addonAfter) : null;
return _react2.default.createElement('span', (0, _extends3.default)({}, others, {
dir: rtl ? 'rtl' : undefined,
className: cls,
style: style
}), before, children, after);
};
return Group;
}(_react2.default.Component), _class.propTypes = {
/**
* 样式前缀
*/
prefix: _propTypes2.default.string,
className: _propTypes2.default.string,
style: _propTypes2.default.object,
children: _propTypes2.default.node,
/**
* 输入框前附加内容
*/
addonBefore: _propTypes2.default.node,
/**
* 输入框前附加内容css
*/
addonBeforeClassName: _propTypes2.default.string,
/**
* 输入框后附加内容
*/
addonAfter: _propTypes2.default.node,
/**
* 输入框后额外css
*/
addonAfterClassName: _propTypes2.default.string,
/**
* rtl
*/
rtl: _propTypes2.default.bool
}, _class.defaultProps = {
prefix: 'next-'
}, _temp);
Group.displayName = 'Group';
exports.default = _configProvider2.default.config(Group);
module.exports = exports['default'];
/***/ }),
/* 125 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
exports.default = undefined;
var _extends2 = __webpack_require__(4);
var _extends3 = _interopRequireDefault(_extends2);
var _classCallCheck2 = __webpack_require__(1);
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _possibleConstructorReturn2 = __webpack_require__(2);
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = __webpack_require__(3);
var _inherits3 = _interopRequireDefault(_inherits2);
var _class, _temp;
var _react = __webpack_require__(0);
var _react2 = _interopRequireDefault(_react);
var _reactDom = __webpack_require__(12);
var _propTypes = __webpack_require__(5);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _classnames = __webpack_require__(6);
var _classnames2 = _interopRequireDefault(_classnames);
var _util = __webpack_require__(8);
var _menu = __webpack_require__(16);
var _menu2 = _interopRequireDefault(_menu);
var _overlay = __webpack_require__(15);
var _overlay2 = _interopRequireDefault(_overlay);
var _input = __webpack_require__(19);
var _input2 = _interopRequireDefault(_input);
var _zhCn = __webpack_require__(13);
var _zhCn2 = _interopRequireDefault(_zhCn);
var _dataStore = __webpack_require__(272);
var _dataStore2 = _interopRequireDefault(_dataStore);
var _virtualList = __webpack_require__(45);
var _virtualList2 = _interopRequireDefault(_virtualList);
var _util2 = __webpack_require__(80);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { default: obj };
}
var Popup = _overlay2.default.Popup;
var MenuItem = _menu2.default.Item,
MenuGroup = _menu2.default.Group;
var noop = _util.func.noop,
bindCtx = _util.func.bindCtx,
makeChain = _util.func.makeChain;
function preventDefault(e) {
e.preventDefault();
}
var Base = (_temp = _class = function (_React$Component) {
(0, _inherits3.default)(Base, _React$Component);
function Base(props) {
(0, _classCallCheck3.default)(this, Base);
var _this = (0, _possibleConstructorReturn3.default)(this, _React$Component.call(this, props));
_this.saveSelectRef = function (ref) {
_this.selectDOM = (0, _reactDom.findDOMNode)(ref);
};
_this.saveInputRef = function (ref) {
if (ref && ref.getInstance()) {
_this.inputRef = ref.getInstance();
}
};
_this.savePopupRef = function (ref) {
_this.popupRef = ref;
if (_this.props.popupProps && typeof _this.props.popupProps.ref === 'function') {
_this.props.popupProps.ref(ref);
}
};
_this.dataStore = new _dataStore2.default({
filter: props.filter,
filterLocal: props.filterLocal,
showDataSourceChildren: props.showDataSourceChildren
});
_this.state = {
dataStore: _this.dataStore,
value: 'value' in props ? props.value : props.defaultValue,
visible: 'visible' in props ? props.visible : props.defaultVisible,
dataSource: _this.setDataSource(_this.props),
width: 100,
// current highlight key
highlightKey: null,
srReader: ''
};
bindCtx(_this, ['handleMenuBodyClick', 'handleVisibleChange', 'focusInput', 'beforeOpen', 'beforeClose', 'afterClose', 'handleResize']);
return _this;
}
Base.prototype.componentDidMount = function componentDidMount() {
var _this2 = this;
// overlay 还没有完成 mount,所以需要滞后同步宽度
setTimeout(function () {
return _this2.syncWidth();
}, 0);
_util.events.on(window, 'resize', this.handleResize);
};
Base.prototype.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
if (prevProps.label !== this.props.label || prevState.value !== this.state.value) {
this.syncWidth();
}
};
Base.prototype.componentWillUnmount = function componentWillUnmount() {
_util.events.off(window, 'resize', this.handleResize);
clearTimeout(this.resizeTimeout);
};
/**
* Calculate and set width of popup menu
* @protected
*/
Base.prototype.syncWidth = function syncWidth() {
var _this3 = this;
var _props2 = this.props,
popupStyle = _props2.popupStyle,
popupProps = _props2.popupProps;
if (popupStyle && 'width' in popupStyle || popupProps && popupProps.style && 'width' in popupProps.style) {
return;
}
var width = _util.dom.getStyle(this.selectDOM, 'width');
if (width && this.width !== width) {
this.width = width;
if (this.popupRef && this.shouldAutoWidth()) {
// overy 的 node 节点可能没有挂载完成,所以这里需要异步
setTimeout(function () {
if (_this3.popupRef && _this3.popupRef.getInstance().overlay) {
_util.dom.setStyle(_this3.popupRef.getInstance().overlay.getInstance().getContentNode(), 'width', _this3.width);
}
}, 0);
}
}
};
Base.prototype.handleResize = function handleResize() {
var _this4 = this;
clearTimeout(this.resizeTimeout);
if (this.state.visible) {
this.resizeTimeout = setTimeout(function () {
_this4.syncWidth();
}, 200);
}
};
/**
* Get structured dataSource, for cache
* @protected
* @param {Object} [props=this.props]
* @return {Array}
*/
Base.prototype.setDataSource = function setDataSource(props) {
var dataSource = props.dataSource,
children = props.children;
// children is higher priority then dataSource
if (_react.Children.count(children)) {
return this.dataStore.updateByDS(children, true);
} else if (Array.isArray(dataSource)) {
return this.dataStore.updateByDS(dataSource, false);
}
return [];
};
/**
* Set popup visible
* @protected
* @param {boolean} visible
* @param {string} type trigger type
*/
Base.prototype.setVisible = function setVisible(visible, type) {
if (this.props.disabled || this.state.visible === visible) {
return;
}
if (!('visible' in this.props)) {
this.setState({
visible: visible
});
}
this.props.onVisibleChange(visible, type);
};
Base.prototype.setFirstHightLightKeyForMenu = function setFirstHightLightKeyForMenu() {
if (!this.props.autoHighlightFirstItem) {
return;
}
// 设置高亮 item key
if (this.dataStore.getMenuDS().length && this.dataStore.getEnableDS().length) {
var highlightKey = '' + this.dataStore.getEnableDS()[0].value;
this.setState({
highlightKey: highlightKey
});
this.props.onToggleHighlightItem(highlightKey, 'autoFirstItem');
}
};
Base.prototype.handleChange = function handleChange(value) {
var _props3;
// 非受控模式清空内部数据
if (!('value' in this.props)) {
this.setState({
value: value
});
}
for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
(_props3 = this.props).onChange.apply(_props3, [value].concat(args));
};
/**
* Handle Menu body click
* @param {Event} e click event
*/
Base.prototype.handleMenuBodyClick = function handleMenuBodyClick(e) {
this.focusInput(e);
};
/**
* Toggle highlight MenuItem
* @private
* @param {number} dir -1: up, 1: down
*/
Base.prototype.toggleHighlightItem = function toggleHighlightItem(dir) {
if (!this.state.visible) {
this.setVisible(true, 'enter');
return;
}
var maxCount = this.dataStore.getEnableDS().length;
// When there is no enabled item
if (!maxCount) {
return false;
}
var highlightKey = this.state.highlightKey;
var highlightIndex = -1;
// find previous highlight index
highlightKey !== null && this.dataStore.getEnableDS().some(function (item, index) {
if ('' + item.value === highlightKey) {
highlightIndex = index;
}
return highlightIndex > -1;
});
// toggle highlight index
highlightIndex += dir;
if (highlightIndex < 0) {
highlightIndex = maxCount - 1;
}
if (highlightIndex >= maxCount) {
highlightIndex = 0;
}
// get highlight key
var highlightItem = this.dataStore.getEnableDS()[highlightIndex];
highlightKey = highlightItem ? '' + highlightItem.value : null;
this.setState({ highlightKey: highlightKey, srReader: highlightItem.label });
this.scrollMenuIntoView();
return highlightItem;
};
// scroll into focus item
Base.prototype.scrollMenuIntoView = function scrollMenuIntoView() {
var _this5 = this;
var prefix = this.props.prefix;
clearTimeout(this.highlightTimer);
this.highlightTimer = setTimeout(function () {
try {
var menuNode = (0, _reactDom.findDOMNode)(_this5.menuRef);
var itemNode = menuNode.querySelector('.' + prefix + 'select-menu-item.' + prefix + 'focused');
itemNode && itemNode.scrollIntoViewIfNeeded();
} catch (ex) {
// I don't care...
}
});
};
/**
* render popup menu header
* @abstract
*/
Base.prototype.renderMenuHeader = function renderMenuHeader() {
var menuProps = this.props.menuProps;
if (menuProps && 'header' in menuProps) {
return menuProps.header;
}
return null;
};
Base.prototype.handleSelect = function handleSelect() {};
/**
* render popup children
* @protected
* @param {object} props
*/
Base.prototype.renderMenu = function renderMenu() {
var _classNames,
_this6 = this;
var _props4 = this.props,
prefix = _props4.prefix,
mode = _props4.mode,
locale = _props4.locale,
notFoundContent = _props4.notFoundContent,
useVirtual = _props4.useVirtual,
menuProps = _props4.menuProps;
var _state = this.state,
dataSource = _state.dataSource,
highlightKey = _state.highlightKey;
var value = this.state.value;
var selectedKeys = void 0;
if ((0, _util2.isNull)(value) || value.length === 0 || this.isAutoComplete) {
selectedKeys = [];
} else if ((0, _util2.isSingle)(mode)) {
selectedKeys = [(0, _util2.valueToSelectKey)(value)];
} else {
selectedKeys = [].concat(value).map(function (n) {
return (0, _util2.valueToSelectKey)(n);
});
}
var children = this.renderMenuItem(dataSource);
var menuClassName = (0, _classnames2.default)((_classNames = {}, _classNames[prefix + 'select-menu'] = true, _classNames[prefix + 'select-menu-empty'] = !children || !children.length, _classNames));
if (!children || !children.length) {
children = _react2.default.createElement('span', { className: prefix + 'select-menu-empty-content' }, notFoundContent || locale.notFoundContent);
}
var customProps = (0, _extends3.default)({}, menuProps, {
children: children,
role: 'listbox',
selectedKeys: selectedKeys,
focusedKey: highlightKey,
focusable: false,
selectMode: (0, _util2.isSingle)(mode) ? 'single' : 'multiple',
onSelect: this.handleMenuSelect,
onItemClick: this.handleItemClick,
header: this.renderMenuHeader(),
onClick: this.handleMenuBodyClick,
onMouseDown: preventDefault,
className: menuClassName
});
var menuStyle = this.shouldAutoWidth() ? { width: this.width } : { minWidth: this.width };
return useVirtual && children.length ? _react2.default.createElement('div', {
className: prefix + 'select-menu-wrapper',
style: (0, _extends3.default)({ position: 'relative' }, menuStyle)
}, _react2.default.createElement(_virtualList2.default, {
itemsRenderer: function itemsRenderer(items, _ref) {
return _react2.default.createElement(_menu2.default, (0, _extends3.default)({
ref: function ref(c) {
_ref(c);
_this6.menuRef = c;
},
flatenContent: true
}, customProps), items);
}
}, children)) : _react2.default.createElement(_menu2.default, (0, _extends3.default)({}, customProps, { style: menuStyle }));
};
/**
* render menu item
* @protected
* @param {Array} dataSource
*/
Base.prototype.renderMenuItem = function renderMenuItem(dataSource) {
var _this7 = this;
var _props5 = this.props,
prefix = _props5.prefix,
itemRender = _props5.itemRender,
showDataSourceChildren = _props5.showDataSourceChildren;
// If it has.
var searchKey = void 0;
if (this.isAutoComplete) {
// In AutoComplete, value is the searchKey
searchKey = this.state.value;
} else {
searchKey = this.state.searchValue;
}
return dataSource.map(function (item, index) {
if (!item) {
return null;
}
if (Array.isArray(item.children) && showDataSourceChildren) {
return _react2.default.createElement(MenuGroup, { key: index, label: item.label }, _this7.renderMenuItem(item.children));
} else {
var itemProps = {
role: 'option',
key: item.value,
className: prefix + 'select-menu-item',
disabled: item.disabled
};
if ('title' in item) {
itemProps.title = item.title;
}
return _react2.default.createElement(MenuItem, itemProps, itemRender(item, searchKey));
}
});
};
/**
* 点击 arrow 或 label 的时候焦点切到 input 中
* @override
*/
Base.prototype.focusInput = function focusInput() {
this.inputRef.focus();
};
Base.prototype.focus = function focus() {
var _inputRef;
(_inputRef = this.inputRef).focus.apply(_inputRef, arguments);
};
Base.prototype.beforeOpen = function beforeOpen() {
var _state2 = this.state,
value = _state2.value,
highlightKey = _state2.highlightKey;
if (this.props.mode === 'single' && !value && !highlightKey) {
this.setFirstHightLightKeyForMenu();
}
this.syncWidth();
};
Base.prototype.beforeClose = function beforeClose() {};
Base.prototype.afterClose = function afterClose() {};
Base.prototype.shouldAutoWidth = function shouldAutoWidth() {
if (this.props.popupComponent) {
return false;
}
return this.props.autoWidth;
};
Base.prototype.render = function render(props) {
var _classNames2;
var prefix = props.prefix,
mode = props.mode,
popupProps = props.popupProps,
popupContainer = props.popupContainer,
popupClassName = props.popupClassName,
popupStyle = props.popupStyle,
popupContent = props.popupContent,
canCloseByTrigger = props.canCloseByTrigger,
followTrigger = props.followTrigger,
cache = props.cache,
popupComponent = props.popupComponent,
isPreview = props.isPreview,
renderPreview = props.renderPreview,
style = props.style,
className = props.className;
var cls = (0, _classnames2.default)((_classNames2 = {}, _classNames2[prefix + 'select-auto-complete-menu'] = !popupContent && this.isAutoComplete, _classNames2[prefix + 'select-' + mode + '-menu'] = !popupContent && !!mode, _classNames2), popupClassName || popupProps.className);
if (isPreview) {
if (this.isAutoComplete) {
return _react2.default.createElement(_input2.default, {
style: style,
className: className,
isPreview: isPreview,
renderPreview: renderPreview,
value: this.state.value
});
} else {
var valueDS = this.valueDataSource.valueDS;
if (typeof renderPreview === 'function') {
var _classNames3;
var previewCls = (0, _classnames2.default)((_classNames3 = {}, _classNames3[prefix + 'form-preview'] = true, _classNames3[className] = !!className, _classNames3));
return _react2.default.createElement('div', { style: style, className: previewCls }, renderPreview(valueDS, this.props));
} else {
var fillProps = this.props.fillProps;
if (mode === 'single') {
return _react2.default.createElement(_input2.default, {
style: style,
className: className,
isPreview: isPreview,
value: fillProps ? valueDS[fillProps] : valueDS.label
});
} else {
return _react2.default.createElement(_input2.default, {
style: style,
className: className,
isPreview: isPreview,
value: valueDS.map(function (i) {
return i.label;
}).join(', ')
});
}
}
}
}
var _props = (0, _extends3.default)({
triggerType: 'click',
autoFocus: !!this.props.popupAutoFocus,
cache: cache
}, popupProps, {
//beforeOpen node not mount, afterOpen too slow.
// from display:none to block, we may need to recompute width
beforeOpen: makeChain(this.beforeOpen, popupProps.beforeOpen),
beforeClose: makeChain(this.beforeClose, popupProps.beforeClose),
afterClose: makeChain(this.afterClose, popupProps.afterClose),
canCloseByTrigger: canCloseByTrigger,
followTrigger: followTrigger,
visible: this.state.visible,
onVisibleChange: this.handleVisibleChange,
shouldUpdatePosition: true,
container: popupContainer || popupProps.container,
className: cls,
style: popupStyle || popupProps.style
});
var Tag = popupComponent ? popupComponent : Popup;
return _react2.default.createElement(Tag, (0, _extends3.default)({}, _props, {
trigger: this.renderSelect(),
ref: this.savePopupRef
}), popupContent ? _react2.default.createElement('div', {
className: prefix + 'select-popup-wrap',
style: this.shouldAutoWidth() ? { width: this.width } : {}
}, popupContent) : this.renderMenu());
};
return Base;
}(_react2.default.Component), _class.propTypes = {
prefix: _propTypes2.default.string,
/**
* 选择器尺寸
*/
size: _propTypes2.default.oneOf(['small', 'medium', 'large']),
// 当前值,用于受控模式
value: _propTypes2.default.any, // to be override
// 初始化的默认值
defaultValue: _propTypes2.default.any, // to be override
/**
* 没有值的时候的占位符
*/
placeholder: _propTypes2.default.string,
/**
* 下拉菜单是否与选择器对齐
*/
autoWidth: _propTypes2.default.bool,
/**
* 自定义内联 label
*/
label: _propTypes2.default.node,
/**
* 是否有清除按钮(单选模式有效)
*/
hasClear: _propTypes2.default.bool,
/**
* 校验状态
*/
state: _propTypes2.default.oneOf(['error', 'loading']),
/**
* 是否只读,只读模式下可以展开弹层但不能选
*/
readOnly: _propTypes2.default.bool,
/**
* 是否禁用选择器
*/
disabled: _propTypes2.default.bool,
/**
* 当前弹层是否显示
*/
visible: _propTypes2.default.bool,
/**
* 弹层初始化是否显示
*/
defaultVisible: _propTypes2.default.bool,
/**
* 弹层显示或隐藏时触发的回调
* @param {Boolean} visible 弹层是否显示
* @param {String} type 触发弹层显示或隐藏的来源 fromContent 表示由Dropdown内容触发; fromTrigger 表示由trigger的点击触发; docClick 表示由document的点击触发
*/
onVisibleChange: _propTypes2.default.func,
/**
* 弹层挂载的容器节点
*/
popupContainer: _propTypes2.default.any,
/**
* 弹层的 className
*/
popupClassName: _propTypes2.default.any,
/**
* 弹层的内联样式
*/
popupStyle: _propTypes2.default.object,
/**
* 添加到弹层上的属性
*/
popupProps: _propTypes2.default.object,
/**
* 是否跟随滚动
*/
followTrigger: _propTypes2.default.bool,
/**
* 自定义弹层的内容
*/
popupContent: _propTypes2.default.node,
/**
* 添加到菜单上的属性
*/
menuProps: _propTypes2.default.object,
/**
* 是否使用本地过滤,在数据源为远程的时候需要关闭此项
*/
filterLocal: _propTypes2.default.bool,
/**
* 本地过滤方法,返回一个 Boolean 值确定是否保留
*/
filter: _propTypes2.default.func,
/**
* 键盘上下键切换菜单高亮选项的回调
*/
onToggleHighlightItem: _propTypes2.default.func,
/**
* 是否开启虚拟滚动模式
*/
useVirtual: _propTypes2.default.bool,
// 自定义类名
className: _propTypes2.default.any,
children: _propTypes2.default.any,
dataSource: _propTypes2.default.array,
itemRender: _propTypes2.default.func,
mode: _propTypes2.default.string,
notFoundContent: _propTypes2.default.node,
locale: _propTypes2.default.object,
rtl: _propTypes2.default.bool,
popupComponent: _propTypes2.default.any,
/**
* 是否为预览态
*/
isPreview: _propTypes2.default.bool,
/**
* 预览态模式下渲染的内容
* @param {number} value 评分值
*/
renderPreview: _propTypes2.default.func,
/**
* 自动高亮第一个元素
*/
autoHighlightFirstItem: _propTypes2.default.bool,
showDataSourceChildren: _propTypes2.default.bool
}, _class.defaultProps = {
prefix: 'next-',
size: 'medium',
autoWidth: true,
onChange: noop,
onVisibleChange: noop,
onToggleHighlightItem: noop,
popupProps: {},
filterLocal: true,
filter: _util2.filter,
itemRender: function itemRender(item) {
return item.label || item.value;
},
locale: _zhCn2.default.Select,
autoHighlightFirstItem: true,
showDataSourceChildren: true
}, _temp);
Base.displayName = 'Base';
exports.default = Base;
module.exports = exports['default'];
/***/ }),
/* 126 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
var _extends2 = __webpack_require__(4);
var _extends3 = _interopRequireDefault(_extends2);
var _classCallCheck2 = __webpack_require__(1);
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _possibleConstructorReturn2 = __webpack_require__(2);
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = __webpack_require__(3);
var _inherits3 = _interopRequireDefault(_inherits2);
var _typeof2 = __webpack_require__(14);
var _typeof3 = _interopRequireDefault(_typeof2);
var _class, _temp, _initialiseProps;
var _react = __webpack_require__(0);
var _react2 = _interopRequireDefault(_react);
var _reactDom = __webpack_require__(12);
var _propTypes = __webpack_require__(5);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _classnames = __webpack_require__(6);
var _classnames2 = _interopRequireDefault(_classnames);
var _reactLifecyclesCompat = __webpack_require__(10);
var _subMenu = __webpack_require__(127);
var _subMenu2 = _interopRequireDefault(_subMenu);
var _configProvider = __webpack_require__(9);
var _configProvider2 = _interopRequireDefault(_configProvider);
var _util = __webpack_require__(8);
var _util2 = __webpack_require__(79);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { default: obj };
}
var bindCtx = _util.func.bindCtx;
var pickOthers = _util.obj.pickOthers,
isNil = _util.obj.isNil;
var noop = function noop() {};
var MENUITEM_OVERFLOWED_CLASSNAME = 'menuitem-overflowed';
var getIndicatorsItem = function getIndicatorsItem(items, isPlaceholder) {
var _cx;
var prefix = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
var renderMore = arguments[3];
var moreCls = (0, _classnames2.default)((_cx = {}, _cx[prefix + 'menu-more'] = true, _cx));
var style = {};
// keep placehold to get width
if (isPlaceholder) {
style.visibility = 'hidden';
style.display = 'inline-block';
// indicators which not in use, just display: none
} else if (items && items.length === 0) {
style.display = 'none';
style.visibility = 'unset';
}
if (renderMore && typeof renderMore === 'function') {
return _react2.default.cloneElement(renderMore(items), {
style: style
});
}
return _react2.default.createElement(_subMenu2.default, { label: '\xB7\xB7\xB7', noIcon: true, className: moreCls, style: style }, items);
};
var addIndicators = function addIndicators(_ref) {
var children = _ref.children,
lastVisibleIndex = _ref.lastVisibleIndex,
prefix = _ref.prefix,
renderMore = _ref.renderMore;
var arr = [];
children.forEach(function (child, index) {
var overflowedItems = [];
if (index > lastVisibleIndex) {
child = _react2.default.cloneElement(child, {
key: 'more-' + index,
style: { display: 'none' },
className: (child.className || '') + ' ' + MENUITEM_OVERFLOWED_CLASSNAME
});
}
if (index === lastVisibleIndex + 1) {
overflowedItems = children.slice(lastVisibleIndex + 1).map(function (c, i) {
return _react2.default.cloneElement(c, {
key: 'more-' + index + '-' + i
});
});
arr.push(getIndicatorsItem(overflowedItems, false, prefix, renderMore));
}
arr.push(child);
});
arr.push(getIndicatorsItem([], true, prefix, renderMore));
return arr;
};
var getNewChildren = function getNewChildren(_ref2) {
var children = _ref2.children,
root = _ref2.root,
lastVisibleIndex = _ref2.lastVisibleIndex,
hozInLine = _ref2.hozInLine,
prefix = _ref2.prefix,
renderMore = _ref2.renderMore;
var k2n = {};
var p2n = {};
var arr = hozInLine ? addIndicators({
children: children,
lastVisibleIndex: lastVisibleIndex,
prefix: prefix,
renderMore: renderMore
}) : children;
var loop = function loop(children, posPrefix) {
var indexWrapper = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : { index: 0 };
var inlineLevel = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
var keyArray = [];
return _react.Children.map(children, function (child) {
if (child && (typeof child.type === 'function' ||
// `React.forwardRef(render)` returns a forwarding
// object that includes `render` method, and the specific
// `child.type` will be an object instead of a class or
// function.
(0, _typeof3.default)(child.type) === 'object') && 'menuChildType' in child.type) {
var newChild = void 0;
var pos = void 0;
var props = { root: root };
if (['item', 'submenu', 'group'].indexOf(child.type.menuChildType) > -1) {
pos = posPrefix + '-' + indexWrapper.index++;
var key = typeof child.key === 'string' ? child.key : pos;
// filter out duplicate keys
if (keyArray.indexOf(key) > -1) {
return;
}
keyArray.push(key);
var level = pos.split('-').length - 1;
k2n[key] = p2n[pos] = {
key: key,
pos: pos,
mode: child.props.mode,
type: child.type.menuChildType,
disabled: child.props.disabled,
label: child.props.label || child.props.children
};
props.level = level;
props.inlineLevel = inlineLevel;
props._key = key;
props.groupIndent = child.type.menuChildType === 'group' ? 1 : 0;
}
// paddingLeft(or paddingRight in rtl) only make sense in inline mode
// parent know children's inlineLevel
// if parent's mode is popup, then children's inlineLevel must be 1;
// else inlineLevel should add 1
var childLevel = (child.props.mode || props.root.props.mode) === 'popup' ? 1 : inlineLevel + 1;
switch (child.type.menuChildType) {
case 'submenu':
newChild = (0, _react.cloneElement)(child, props, loop(child.props.children, pos, undefined, childLevel));
break;
case 'group':
newChild = (0, _react.cloneElement)(child, props, loop(child.props.children, posPrefix, indexWrapper, props.level));
break;
case 'item':
case 'divider':
newChild = (0, _react.cloneElement)(child, props);
break;
default:
newChild = child;
break;
}
return newChild;
}
return child;
});
};
var newChildren = loop(arr, '0');
return {
newChildren: newChildren,
_k2n: k2n,
_p2n: p2n
};
};
/**
* Menu
*/
var Menu = (_temp = _class = function (_Component) {
(0, _inherits3.default)(Menu, _Component);
function Menu(props) {
(0, _classCallCheck3.default)(this, Menu);
var _this = (0, _possibleConstructorReturn3.default)(this, _Component.call(this, props));
_initialiseProps.call(_this);
var _this$props = _this.props,
prefix = _this$props.prefix,
children = _this$props.children,
selectedKeys = _this$props.selectedKeys,
defaultSelectedKeys = _this$props.defaultSelectedKeys,
focusedKey = _this$props.focusedKey,
focusable = _this$props.focusable,
autoFocus = _this$props.autoFocus,
hozInLine = _this$props.hozInLine,
renderMore = _this$props.renderMore;
_this.state = {
lastVisibleIndex: undefined
};
var _getNewChildren = getNewChildren({
root: _this,
hozInLine: hozInLine,
prefix: prefix,
children: children,
renderMore: renderMore
}),
newChildren = _getNewChildren.newChildren,
_k2n = _getNewChildren._k2n,
_p2n = _getNewChildren._p2n;
var tabbableKey = focusable ? (0, _util2.getFirstAvaliablelChildKey)('0', _p2n) : undefined;
_this.state = {
root: _this,
lastVisibleIndex: undefined,
newChildren: newChildren,
_k2n: _k2n,
_p2n: _p2n,
tabbableKey: tabbableKey,
openKeys: _this.getInitOpenKeys(props, _k2n, _p2n),
selectedKeys: (0, _util2.normalizeToArray)(selectedKeys || defaultSelectedKeys),
focusedKey: !isNil(_this.props.focusedKey) ? focusedKey : focusable && autoFocus ? tabbableKey : null
};
bindCtx(_this, ['handleOpen', 'handleSelect', 'handleItemClick', 'handleItemKeyDown', 'onBlur', 'adjustChildrenWidth']);
_this.popupNodes = [];
return _this;
}
Menu.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
var state = {};
if ('openKeys' in nextProps) {
state.openKeys = (0, _util2.normalizeToArray)(nextProps.openKeys);
}
if ('selectedKeys' in nextProps) {
state.selectedKeys = (0, _util2.normalizeToArray)(nextProps.selectedKeys);
}
if ('focusedKey' in nextProps) {
state.focusedKey = nextProps.focusedKey;
}
var hozInLine = nextProps.hozInLine,
children = nextProps.children,
prefix = nextProps.prefix,
renderMore = nextProps.renderMore;
var _getNewChildren2 = getNewChildren({
root: prevState.root,
hozInLine: hozInLine,
lastVisibleIndex: prevState.lastVisibleIndex,
prefix: prefix,
children: children,
renderMore: renderMore
}),
newChildren = _getNewChildren2.newChildren,
_k2n = _getNewChildren2._k2n,
_p2n = _getNewChildren2._p2n;
state.newChildren = newChildren;
state._k2n = _k2n;
state._p2n = _p2n;
if (nextProps.focusable) {
if (prevState.tabbableKey in _k2n) {
if (prevState.focusedKey) {
state.tabbableKey = prevState.focusedKey;
}
} else {
state.tabbableKey = (0, _util2.getFirstAvaliablelChildKey)('0', _p2n);
}
}
return state;
};
Menu.prototype.componentDidMount = function componentDidMount() {
this.menuNode = (0, _reactDom.findDOMNode)(this);
this.adjustChildrenWidth();
if (this.props.hozInLine) {
_util.events.on(window, 'resize', this.adjustChildrenWidth);
}
};
Menu.prototype.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
if (prevState.lastVisibleIndex !== this.state.lastVisibleIndex) {
this.adjustChildrenWidth();
}
};
Menu.prototype.componentWillUnmount = function componentWillUnmount() {
_util.events.off(window, 'resize', this.adjustChildrenWidth);
};
Menu.prototype.adjustChildrenWidth = function adjustChildrenWidth() {
var _props = this.props,
direction = _props.direction,
prefix = _props.prefix,
header = _props.header,
footer = _props.footer,
hozInLine = _props.hozInLine;
if (direction !== 'hoz' || !hozInLine) {
return;
}
if (!this.menuNode && !this.menuContent) {
return;
}
var children = [],
spaceWidth = void 0;
if (header || footer) {
children = this.menuContent.children;
spaceWidth = (0, _util2.getWidth)(this.menuNode) - (0, _util2.getWidth)(this.menuHeader) - (0, _util2.getWidth)(this.menuFooter);
} else {
children = this.menuNode.children;
spaceWidth = (0, _util2.getWidth)(this.menuNode);
}
if (children.length < 2) {
return;
}
var currentSumWidth = 0,
lastVisibleIndex = -1;
var menuItemNodes = [].slice.call(children).filter(function (node) {
return node.className.split(' ').indexOf(prefix + 'menu-more') < 0;
});
var overflowedItems = menuItemNodes.filter(function (c) {
return c.className.split(' ').indexOf(MENUITEM_OVERFLOWED_CLASSNAME) >= 0;
});
overflowedItems.forEach(function (c) {
_util.dom.setStyle(c, 'display', 'inline-block');
});
var lastIndicator = children[children.length - 1];
_util.dom.setStyle(lastIndicator, 'display', 'inline-block');
var moreWidth = (0, _util2.getWidth)(lastIndicator);
_util.dom.setStyle(lastIndicator, 'display', 'none');
this.menuItemSizes = menuItemNodes.map(function (c) {
return (0, _util2.getWidth)(c);
});
overflowedItems.forEach(function (c) {
_util.dom.setStyle(c, 'display', 'none');
});
this.menuItemSizes.forEach(function (liWidth) {
currentSumWidth += liWidth;
if (currentSumWidth + moreWidth <= spaceWidth) {
lastVisibleIndex++;
}
});
this.setState((0, _extends3.default)({
lastVisibleIndex: lastVisibleIndex
}, this.getUpdateChildren()));
};
Menu.prototype.onBlur = function onBlur(e) {
this.setState({
focusedKey: undefined
});
this.props.onBlur && this.props.onBlur(e);
};
Menu.prototype.getInitOpenKeys = function getInitOpenKeys(props, _k2n, _p2n) {
var initOpenKeys = void 0;
var openKeys = props.openKeys,
defaultOpenKeys = props.defaultOpenKeys,
defaultOpenAll = props.defaultOpenAll,
mode = props.mode,
openMode = props.openMode;
if (openKeys) {
initOpenKeys = openKeys;
} else if (defaultOpenAll && mode === 'inline' && openMode === 'multiple') {
initOpenKeys = Object.keys(_k2n).filter(function (key) {
return _k2n[key].type === 'submenu';
});
} else {
initOpenKeys = defaultOpenKeys;
}
return (0, _util2.normalizeToArray)(initOpenKeys);
};
Menu.prototype.getIndicatorsItem = function getIndicatorsItem(items, isPlaceholder) {
var _cx2;
var _props2 = this.props,
prefix = _props2.prefix,
renderMore = _props2.renderMore;
var moreCls = (0, _classnames2.default)((_cx2 = {}, _cx2[prefix + 'menu-more'] = true, _cx2));
var style = {};
// keep placehold to get width
if (isPlaceholder) {
style.visibility = 'hidden';
style.display = 'inline-block';
// indicators which not in use, just display: none
} else if (items && items.length === 0) {
style.display = 'none';
style.visibility = 'unset';
}
if (renderMore && typeof renderMore === 'function') {
return _react2.default.cloneElement(renderMore(items), {
style: style
});
}
return _react2.default.createElement(_subMenu2.default, { label: '\xB7\xB7\xB7', noIcon: true, className: moreCls, style: style }, items);
};
Menu.prototype.handleOpen = function handleOpen(key, open, triggerType, e) {
var newOpenKeys = void 0;
var _props3 = this.props,
mode = _props3.mode,
openMode = _props3.openMode;
var _state = this.state,
openKeys = _state.openKeys,
_k2n = _state._k2n;
var index = openKeys.indexOf(key);
if (open && index === -1) {
if (mode === 'inline') {
if (openMode === 'single') {
newOpenKeys = openKeys.filter(function (k) {
return _k2n[k] && !(0, _util2.isSibling)(_k2n[key].pos, _k2n[k].pos);
});
newOpenKeys.push(key);
} else {
newOpenKeys = openKeys.concat(key);
}
} else {
newOpenKeys = openKeys.filter(function (k) {
return _k2n[k] && (0, _util2.isAncestor)(_k2n[key].pos, _k2n[k].pos);
});
newOpenKeys.push(key);
}
} else if (!open && index > -1) {
if (mode === 'inline') {
newOpenKeys = [].concat(openKeys.slice(0, index), openKeys.slice(index + 1));
} else if (triggerType === 'docClick') {
if (!this.popupNodes.concat(this.menuNode).some(function (node) {
return node.contains(e.target);
})) {
newOpenKeys = [];
}
} else {
newOpenKeys = openKeys.filter(function (k) {
return k !== key && _k2n[k] && !(0, _util2.isAncestor)(_k2n[k].pos, _k2n[key].pos);
});
}
}
if (newOpenKeys) {
if (isNil(this.props.openKeys)) {
this.setState((0, _extends3.default)({
openKeys: newOpenKeys
}, this.getUpdateChildren()));
}
this.props.onOpen(newOpenKeys, {
key: key,
open: open
});
}
};
Menu.prototype.getPath = function getPath(key, _k2n, _p2n) {
var keyPath = [];
var labelPath = [];
var pos = _k2n[key].pos;
var nums = pos.split('-');
for (var i = 1; i < nums.length - 1; i++) {
var parentNums = nums.slice(0, i + 1);
var parentPos = parentNums.join('-');
var parent = _p2n[parentPos];
keyPath.push(parent.key);
labelPath.push(parent.label);
}
return {
keyPath: keyPath,
labelPath: labelPath
};
};
Menu.prototype.handleSelect = function handleSelect(key, select, menuItem) {
var _state2 = this.state,
_k2n = _state2._k2n,
_p2n = _state2._p2n;
var pos = _k2n[key].pos;
var level = pos.split('-').length - 1;
if (this.props.shallowSelect && level > 1) {
return;
}
var newSelectedKeys = void 0;
var selectMode = this.props.selectMode;
var selectedKeys = this.state.selectedKeys;
var index = selectedKeys.indexOf(key);
if (select && index === -1) {
if (selectMode === 'single') {
newSelectedKeys = [key];
} else if (selectMode === 'multiple') {
newSelectedKeys = selectedKeys.concat(key);
}
} else if (!select && index > -1 && selectMode === 'multiple') {
newSelectedKeys = [].concat(selectedKeys.slice(0, index), selectedKeys.slice(index + 1));
}
if (newSelectedKeys) {
if (isNil(this.props.selectedKeys)) {
this.setState({
selectedKeys: newSelectedKeys
});
}
this.props.onSelect(newSelectedKeys, menuItem, (0, _extends3.default)({
key: key,
select: select,
label: _k2n[key].label
}, this.getPath(key, _k2n, _p2n)));
}
};
Menu.prototype.handleItemClick = function handleItemClick(key, item, e) {
var _k2n = this.state._k2n;
if (this.props.focusable) {
if (isNil(this.props.focusedKey)) {
this.setState({
focusedKey: key
});
}
this.props.onItemFocus(key, item, e);
}
if (item.props.type === 'item') {
if (item.props.parentMode === 'popup' && this.state.openKeys.length) {
if (isNil(this.props.openKeys)) {
this.setState({
openKeys: []
});
}
this.props.onOpen([], {
key: this.state.openKeys.sort(function (prevKey, nextKey) {
return _k2n[nextKey].pos.split('-').length - _k2n[prevKey].pos.split('-').length;
})[0],
open: false
});
}
this.props.onItemClick(key, item, e);
}
};
Menu.prototype.getAvailableKey = function getAvailableKey(pos, prev) {
var _p2n = this.state._p2n;
var ps = Object.keys(_p2n).filter(function (p) {
return (0, _util2.isAvailablePos)(pos, p, _p2n);
});
if (ps.length > 1) {
var index = ps.indexOf(pos);
var targetIndex = void 0;
if (prev) {
targetIndex = index === 0 ? ps.length - 1 : index - 1;
} else {
targetIndex = index === ps.length - 1 ? 0 : index + 1;
}
return _p2n[ps[targetIndex]].key;
}
return null;
};
Menu.prototype.getParentKey = function getParentKey(pos) {
return this.state._p2n[pos.slice(0, pos.length - 2)].key;
};
Menu.prototype.handleItemKeyDown = function handleItemKeyDown(key, type, item, e) {
if ([_util.KEYCODE.UP, _util.KEYCODE.DOWN, _util.KEYCODE.RIGHT, _util.KEYCODE.LEFT, _util.KEYCODE.ENTER, _util.KEYCODE.ESC, _util.KEYCODE.SPACE].indexOf(e.keyCode) > -1) {
e.preventDefault();
e.stopPropagation();
}
var focusedKey = this.state.focusedKey;
var _state3 = this.state,
_p2n = _state3._p2n,
_k2n = _state3._k2n;
var direction = this.props.direction;
var pos = _k2n[key].pos;
var level = pos.split('-').length - 1;
switch (e.keyCode) {
case _util.KEYCODE.UP:
{
var avaliableKey = this.getAvailableKey(pos, true);
if (avaliableKey) {
focusedKey = avaliableKey;
}
break;
}
case _util.KEYCODE.DOWN:
{
var _avaliableKey = void 0;
if (direction === 'hoz' && level === 1 && type === 'submenu') {
this.handleOpen(key, true);
_avaliableKey = (0, _util2.getFirstAvaliablelChildKey)(pos, _p2n);
} else {
_avaliableKey = this.getAvailableKey(pos, false);
}
if (_avaliableKey) {
focusedKey = _avaliableKey;
}
break;
}
case _util.KEYCODE.RIGHT:
{
var _avaliableKey2 = void 0;
if (direction === 'hoz' && level === 1) {
_avaliableKey2 = this.getAvailableKey(pos, false);
} else if (type === 'submenu') {
this.handleOpen(key, true);
_avaliableKey2 = (0, _util2.getFirstAvaliablelChildKey)(pos, _p2n);
}
if (_avaliableKey2) {
focusedKey = _avaliableKey2;
}
break;
}
case _util.KEYCODE.ENTER:
{
if (type === 'submenu') {
this.handleOpen(key, true);
var _avaliableKey3 = (0, _util2.getFirstAvaliablelChildKey)(pos, _p2n);
if (_avaliableKey3) {
focusedKey = _avaliableKey3;
}
}
break;
}
case _util.KEYCODE.LEFT:
{
if (direction === 'hoz' && level === 1) {
var _avaliableKey4 = this.getAvailableKey(pos, true);
if (_avaliableKey4) {
focusedKey = _avaliableKey4;
}
} else if (level > 1) {
var parentKey = this.getParentKey(pos);
this.handleOpen(parentKey, false);
focusedKey = parentKey;
}
break;
}
case _util.KEYCODE.ESC:
if (level > 1) {
var _parentKey = this.getParentKey(pos);
this.handleOpen(_parentKey, false);
focusedKey = _parentKey;
}
break;
case _util.KEYCODE.TAB:
focusedKey = null;
break;
default:
break;
}
if (focusedKey !== this.state.focusedKey) {
if (isNil(this.props.focusedKey)) {
this.setState({
focusedKey: focusedKey
});
}
this.props.onItemKeyDown(focusedKey, item, e);
this.props.onItemFocus(focusedKey, e);
}
};
Menu.prototype.render = function render() {
var _cx3;
var _props4 = this.props,
prefix = _props4.prefix,
className = _props4.className,
direction = _props4.direction,
hozAlign = _props4.hozAlign,
header = _props4.header,
footer = _props4.footer,
embeddable = _props4.embeddable,
selectMode = _props4.selectMode,
hozInLine = _props4.hozInLine,
rtl = _props4.rtl,
flatenContent = _props4.flatenContent;
var newChildren = this.state.newChildren;
var others = pickOthers(Object.keys(Menu.propTypes), this.props);
var newClassName = (0, _classnames2.default)((_cx3 = {}, _cx3[prefix + 'menu'] = true, _cx3[prefix + 'ver'] = direction === 'ver', _cx3[prefix + 'hoz'] = direction === 'hoz', _cx3[prefix + 'menu-embeddable'] = embeddable, _cx3[prefix + 'menu-nowrap'] = hozInLine, _cx3[className] = !!className, _cx3));
var role = direction === 'hoz' ? 'menubar' : 'menu';
var ariaMultiselectable = void 0;
if ('selectMode' in this.props) {
role = 'listbox';
ariaMultiselectable = !!(selectMode === 'multiple');
}
var headerElement = header ? _react2.default.createElement('li', { className: prefix + 'menu-header', ref: this.menuHeaderRef }, header) : null;
var itemsElement = !flatenContent && (header || footer) ? _react2.default.createElement('ul', {
className: prefix + 'menu-content',
ref: this.menuContentRef
}, newChildren) : newChildren;
var footerElement = footer ? _react2.default.createElement('li', { className: prefix + 'menu-footer', ref: this.menuFooterRef }, footer) : null;
var shouldWrapItemsAndFooter = hozAlign === 'right' && !!header;
if (rtl) {
others.dir = 'rtl';
}
return _react2.default.createElement('ul', (0, _extends3.default)({
role: role,
onBlur: this.onBlur,
className: newClassName,
onKeyDown: this.handleEnter,
'aria-multiselectable': ariaMultiselectable
}, others), headerElement, shouldWrapItemsAndFooter ? _react2.default.createElement('div', { className: prefix + 'menu-hoz-right' }, itemsElement, footerElement) : null, !shouldWrapItemsAndFooter ? itemsElement : null, !shouldWrapItemsAndFooter ? footerElement : null);
};
return Menu;
}(_react.Component), _class.isNextMenu = true, _class.propTypes = (0, _extends3.default)({}, _configProvider2.default.propTypes, {
prefix: _propTypes2.default.string,
pure: _propTypes2.default.bool,
rtl: _propTypes2.default.bool,
className: _propTypes2.default.string,
/**
* 菜单项和子菜单
*/
children: _propTypes2.default.node,
/**
* 点击菜单项触发的回调函数
* @param {String} key 点击的菜单项的 key 值
* @param {Object} item 点击的菜单项对象
* @param {Object} event 点击的事件对象
*/
onItemClick: _propTypes2.default.func,
/**
* 当前打开的子菜单的 key 值
*/
openKeys: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.array]),
/**
* 初始打开的子菜单的 key 值
*/
defaultOpenKeys: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.array]),
/**
* 初始展开所有的子菜单,只在 mode 设置为 'inline' 以及 openMode 设置为 'multiple' 下生效,优先级高于 defaultOpenKeys
*/
defaultOpenAll: _propTypes2.default.bool,
/**
* 打开或关闭子菜单触发的回调函数
* @param {Array} key 打开的所有子菜单的 key 值
* @param {Object} extra 额外参数
* @param {String} extra.key 当前操作子菜单的 key 值
* @param {Boolean} extra.open 是否是打开
*/
onOpen: _propTypes2.default.func,
/**
* 子菜单打开的模式
*/
mode: _propTypes2.default.oneOf(['inline', 'popup']),
/**
* 子菜单打开的触发行为
*/
triggerType: _propTypes2.default.oneOf(['click', 'hover']),
/**
* 展开内连子菜单的模式,同时可以展开一个子菜单还是多个子菜单,该属性仅在 mode 为 inline 时生效
*/
openMode: _propTypes2.default.oneOf(['single', 'multiple']),
/**
* 内连子菜单缩进距离
*/
inlineIndent: _propTypes2.default.number,
inlineArrowDirection: _propTypes2.default.oneOf(['down', 'right']),
/**
* 是否自动让弹层的宽度和菜单项保持一致,如果弹层的宽度比菜单项小则和菜单项保持一致,如果宽度大于菜单项则不做处理
*/
popupAutoWidth: _propTypes2.default.bool,
/**
* 弹层的对齐方式
*/
popupAlign: _propTypes2.default.oneOf(['follow', 'outside']),
/**
* 弹层自定义 props
*/
popupProps: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.func]),
/**
* 弹出子菜单自定义 className
*/
popupClassName: _propTypes2.default.string,
/**
* 弹出子菜单自定义 style
*/
popupStyle: _propTypes2.default.object,
/**
* 当前选中菜单项的 key 值
*/
selectedKeys: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.array]),
/**
* 初始选中菜单项的 key 值
*/
defaultSelectedKeys: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.array]),
/**
* 选中或取消选中菜单项触发的回调函数
* @param {Array} selectedKeys 选中的所有菜单项的值
* @param {Object} item 选中或取消选中的菜单项
* @param {Object} extra 额外参数
* @param {Boolean} extra.select 是否是选中
* @param {Array} extra.key 菜单项的 key
* @param {Object} extra.label 菜单项的文本
* @param {Array} extra.keyPath 菜单项 key 的路径
*/
onSelect: _propTypes2.default.func,
/**
* 选中模式,单选还是多选,默认无值,不可选
*/
selectMode: _propTypes2.default.oneOf(['single', 'multiple']),
/**
* 是否只能选择第一层菜单项(不能选择子菜单中的菜单项)
*/
shallowSelect: _propTypes2.default.bool,
/**
* 是否显示选中图标,如果设置为 false 需配合配置平台设置选中时的背景色以示区分
*/
hasSelectedIcon: _propTypes2.default.bool,
labelToggleChecked: _propTypes2.default.bool,
/**
* 是否将选中图标居右,仅当 hasSelectedIcon 为true 时生效。
* 注意:SubMenu 上的选中图标一直居左,不受此API控制
*/
isSelectIconRight: _propTypes2.default.bool,
/**
* 菜单第一层展示方向
*/
direction: _propTypes2.default.oneOf(['ver', 'hoz']),
/**
* 横向菜单条 item 和 footer 的对齐方向,在 direction 设置为 'hoz' 并且 header 存在时生效
*/
hozAlign: _propTypes2.default.oneOf(['left', 'right']),
/**
* 横向菜单模式下,是否维持在一行,即超出一行折叠成 SubMenu 显示, 仅在 direction='hoz' mode='popup' 时生效
*/
hozInLine: _propTypes2.default.bool,
renderMore: _propTypes2.default.func,
/**
* 自定义菜单头部
*/
header: _propTypes2.default.node,
/**
* 自定义菜单尾部
*/
footer: _propTypes2.default.node,
/**
* 是否自动获得焦点
*/
autoFocus: _propTypes2.default.bool,
/**
* 当前获得焦点的子菜单或菜单项 key 值
*/
focusedKey: _propTypes2.default.string,
focusable: _propTypes2.default.bool,
onItemFocus: _propTypes2.default.func,
onBlur: _propTypes2.default.func,
/**
* 是否开启嵌入式模式,一般用于Layout的布局中,开启后没有默认背景、外层border、box-shadow,可以配合`