Antd 组件库中,包含有 Trigger 的组件,它们都有类似的组件结构。以下组件都可以归为这一类:
ToolTip
Popover
PopConfrim
Cascader
DataPicker
TimePicker
Select
TreeSelect
Dropdown
这些组件的特点,就是都有弹框。通过点击, hover, 或是改变焦点的方式,打开或关闭弹框。而这个特点,就是 Trigger 组件所要实现的功能:弹框可见性的控制。
看图
黄
先看很黄的这一组,Popover/PopConfirm -> Tooltip -> rcTooltip -> rcTrigger -> child
这类组件,可以为弹框传入自定义的内容或组件。Popover 和 PopConfirm 都是从 Tooltip 整容来的,为弹窗添加了常用的功能。
其中,内部组件 Trigger,负责为组件添加监听事件,来控制弹框的可见性。
// rc-trigger\lib\Trigger.js
var ALL_HANDLERS = ['onClick', 'onMouseDown', 'onTouchStart', 'onMouseEnter', 'onMouseLeave', 'onFocus', 'onBlur'];
可以看出,Trigger 支持 onClick, onMouseDown, onTouchStart, onMouseEnter, onFocus 来触发弹窗,通过 onClick, onMouseLeave, onBlur 来取消弹窗。弹窗的打开与关闭方式可以不是对应的,例如可以 mouseEnter 打开,click 关闭。我们写弹窗组件的时候,也能把这一部分逻辑抽象出来,感觉应该很棒。
当我们用 React 写弹窗组件的时候,肯定想过要如何添加点击取消功能。使用遮罩,会有一次无效操作,对选框类弹框就不太好了。Antd 的做法是添加全局监听事件,通过判断点击的元素,是否包含在组件或弹框中,即可判断是否为取消弹框的点击。下面是 Antd 中判断组件包含性的方法
function contains(root, n) {
var node = n;
while (node) {
if (node === root) {
return true;
}
node = node.parentNode;
}
return false;
}
除了添加监听事件,Trigger 还有一个很重要的功能,就是弹框的渲染。Trigger 中的弹框并没有渲染进正常的文档流中,它 mixin 了一个 getContainerRenderMixin 内部组件,该组件通过 React 的非稳定方法 unstable_renderSubtreeIntoContainer(),将组件挂载到 document.body 下。因为如果把弹窗渲染在正常文档流中,组件的定位会受到父元素定位的影响,我们知道,如果父元素为静态定位,定位标的就会变成再父一级元素。将弹窗挂载在 body 下,就能解决这个问题。
虽然弹框脱离了正常文档流,但其仍受父组件控制。而组件包裹的子组件仍然渲染在正常文档流。
// rc-util\lib\getContainerRenderMixin2
_reactDom2["default"].unstable_renderSubtreeIntoContainer(instance, component, instance._container, function callback() {
instance._component = this;
if (ready) {
ready.call(this);
}
});
绿
很绿的一组,也是寄生于 Trigger,但不属于 Tooltip 一族,它们的弹窗内容被传入了定义好的组件,定制性更强。从 Trigger 这一层开始,结构都差不多。
蓝
蓝色代表忧伤,看到这么多层嵌套,看着是挺忧伤的。Popup -> Animate -> AnimateChild -> rcAlign -> PopupInner -> LazyRenderBox -> content
Popup
Popup 组件负责按参数,配置弹框的各种特性,像要不要遮罩、zIndex设多少、隐藏要不要卸载掉弹框等,把这些属性渲染到功能组件中
Animate
Animate 和 AnimateChild,顾名思义,就是搞动画的。Animate 组件类似于 React 的 ReactTransitionGroup 组件,它会调用子组件中的钩子函数,来控制动画效果。
// rc-animate\lib\AnimateChild.js
componentWillUnmount: function componentWillUnmount() {
this.stop();
},
componentWillEnter: function componentWillEnter(done) {
if (_util2["default"].isEnterSupported(this.props)) {
this.transition('enter', done);
} else {
done();
}
},
componentWillAppear: function componentWillAppear(done) {
if (_util2["default"].isAppearSupported(this.props)) {
this.transition('appear', done);
} else {
done();
}
},
componentWillLeave: function componentWillLeave(done) {
if (_util2["default"].isLeaveSupported(this.props)) {
this.transition('leave', done);
} else {
done();
}
},
AnimateChild
AnimateChild 在生命周期的钩子函数中,通过改变类名,如改变后缀 -appear, -enter, -leave,来执行动画效果。Antd 动画主要是 CSS3 动画。
.zoom-motion(@className, @keyframeName, @duration: @animation-duration-base) {
.make-motion(@className, @keyframeName, @duration);
.@{className}-enter,
.@{className}-appear {
transform: scale(0); // need this by yiminghe
animation-timing-function: @ease-out-circ;
}
.@{className}-leave {
animation-timing-function: @ease-in-out-circ;
}
}
Align
Align 组件负责对齐元素。前面说了,Popup 脱离了正常文档流,挂在了 document.body 上。那如何把两个风马牛不相及的元素对齐呢?还要考虑到窗口改变时也能对得上。靠的是元素的可视矩阵(区域)计算,说的挺轻巧,反正代码我还没看懂。
// rc-align\node_modules\dom-align\lib\index.js
function domAlign(el, refNode, align) {
// masive code
}
PopupInner
渲染了个div,添了个 LazyRenderBox 功能组件
LazyRenderBox
这个组件很懒,因为你看不见它的时候,它就不干活了。
shouldComponentUpdate: function shouldComponentUpdate(nextProps) {
return nextProps.hiddenClassName || nextProps.visible;
},
content
之前的一沓都是套在外面的衣服,你的 content 才是用户想看的。
尽管 React 组件树很复杂,但是最终渲染出来的 Dom 树却是格外的清爽。
最后
Antd 不简单,看来写一套靠谱的组件可不是闹着玩的,一些看似简单的功能,实现起来却是十分的复杂。一沓代码看下来,可能就领悟了皮毛,却感觉已经受益匪浅了。