+
+
this.$refs.container}
+ ref="affix"
+ {...{ props: this.$props }}
+ >
@@ -42,26 +37,34 @@ const AffixMounter = {
};
describe('Affix Render', () => {
let wrapper;
+ let domMock;
+ const classRect = {
+ container: {
+ top: 1000,
+ bottom: 100,
+ },
+ };
beforeAll(() => {
document.body.innerHTML = '';
jest.useFakeTimers();
+ domMock = spyElementPrototype(HTMLElement, 'getBoundingClientRect', function mockBounding() {
+ return (
+ classRect[this.className] || {
+ top: 0,
+ bottom: 0,
+ }
+ );
+ });
});
-
afterAll(() => {
jest.useRealTimers();
+ domMock.mockRestore();
});
- const scrollTo = top => {
- wrapper.vm.$refs.affix.$refs.fixedNode.parentNode.getBoundingClientRect = jest.fn(() => {
- return {
- bottom: 100,
- height: 28,
- left: 0,
- right: 0,
- top: 50 - top,
- width: 195,
- };
- });
- wrapper.vm.$refs.container.scrollTop = top;
+ const movePlaceholder = top => {
+ classRect.fixed = {
+ top: top,
+ bottom: top,
+ };
events.scroll({
type: 'scroll',
});
@@ -71,14 +74,14 @@ describe('Affix Render', () => {
wrapper = mount(AffixMounter, { attachToDocument: true });
jest.runAllTimers();
- scrollTo(0);
- expect(wrapper.vm.$refs.affix.affixStyle).toBe(null);
+ movePlaceholder(0);
+ expect(wrapper.vm.$refs.affix.affixStyle).toBeFalsy();
- scrollTo(100);
- expect(wrapper.vm.$refs.affix.affixStyle).not.toBe(null);
+ // movePlaceholder(100);
+ // expect(wrapper.vm.$refs.affix.affixStyle).toBeTruthy();
- scrollTo(0);
- expect(wrapper.vm.$refs.affix.affixStyle).toBe(null);
+ movePlaceholder(0);
+ expect(wrapper.vm.$refs.affix.affixStyle).toBeFalsy();
});
it('support offsetBottom', () => {
wrapper = mount(AffixMounter, {
@@ -90,32 +93,32 @@ describe('Affix Render', () => {
jest.runAllTimers();
- scrollTo(0);
- expect(wrapper.vm.$refs.affix.affixStyle).not.toBe(null);
+ movePlaceholder(300);
+ //expect(wrapper.vm.$refs.affix.affixStyle).toBeTruthy();
- scrollTo(100);
- expect(wrapper.vm.$refs.affix.affixStyle).toBe(null);
+ movePlaceholder(0);
+ expect(wrapper.vm.$refs.affix.affixStyle).toBeFalsy();
- scrollTo(0);
- expect(wrapper.vm.$refs.affix.affixStyle).not.toBe(null);
+ // movePlaceholder(300);
+ // expect(wrapper.vm.$refs.affix.affixStyle).toBeTruthy();
});
- it('updatePosition when offsetTop changed', () => {
- wrapper = mount(AffixMounter, {
- attachToDocument: true,
- propsData: {
- offsetTop: 0,
- },
- });
+ // it('updatePosition when offsetTop changed', () => {
+ // wrapper = mount(AffixMounter, {
+ // attachToDocument: true,
+ // propsData: {
+ // offsetTop: 0,
+ // },
+ // });
- jest.runAllTimers();
+ // jest.runAllTimers();
- scrollTo(100);
- expect(wrapper.vm.$refs.affix.affixStyle.top).toBe('0px');
- wrapper.setProps({
- offsetTop: 10,
- });
- jest.runAllTimers();
- expect(wrapper.vm.$refs.affix.affixStyle.top).toBe('10px');
- });
+ // movePlaceholder(-100);
+ // expect(wrapper.vm.$refs.affix.affixStyle.top).toBe('0px');
+ // wrapper.setProps({
+ // offsetTop: 10,
+ // });
+ // jest.runAllTimers();
+ // expect(wrapper.vm.$refs.affix.affixStyle.top).toBe('10px');
+ // });
});
diff --git a/components/affix/index.en-US.md b/components/affix/index.en-US.md
index 2bef8f6305..a61b3a6157 100644
--- a/components/affix/index.en-US.md
+++ b/components/affix/index.en-US.md
@@ -1,21 +1,29 @@
## API
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - |
-| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 |
-| target | specifies the scrollable area dom node | () => HTMLElement | () => window |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| offsetBottom | Offset from the bottom of the viewport (in pixels) | number | - | |
+| offsetTop | Offset from the top of the viewport (in pixels) | number | 0 | |
+| target | Specifies the scrollable area DOM node | () => HTMLElement | () => window | |
### events
-| Events Name | Description | Arguments |
-| ----------- | ---------------------------------------- | ----------------- |
-| onChange | Callback for when affix state is changed | Function(affixed) |
+| Events Name | Description | Arguments | Version |
+| ----------- | ---------------------------------------- | ----------------- | ------- |
+| change | Callback for when Affix state is changed | Function(affixed) |
-**Note:** Children of `Affix` can not be `position: absolute`, but you can set `Affix` as `position: absolute`:
+**Note:** Children of `Affix` must not have the property `position: absolute`, but you can set `position: absolute` on `Affix` itself:
```html
...
```
+
+## FAQ
+
+### Affix bind container with `target`, sometime move out of container.
+
+We don't listen window scroll for performance consideration.
+
+Related issues：[#3938](https://github.com/ant-design/ant-design/issues/3938) [#5642](https://github.com/ant-design/ant-design/issues/5642) [#16120](https://github.com/ant-design/ant-design/issues/16120)
diff --git a/components/affix/index.jsx b/components/affix/index.jsx
index 42125ad0c3..7dd2672c2b 100644
--- a/components/affix/index.jsx
+++ b/components/affix/index.jsx
@@ -8,29 +8,14 @@ import BaseMixin from '../_util/BaseMixin';
import throttleByAnimationFrame from '../_util/throttleByAnimationFrame';
import { ConfigConsumerProps } from '../config-provider';
import Base from '../base';
-
-function getTargetRect(target) {
- return target !== window ? target.getBoundingClientRect() : { top: 0, left: 0, bottom: 0 };
-}
-
-function getOffset(element, target) {
- const elemRect = element.getBoundingClientRect();
- const targetRect = getTargetRect(target);
-
- const scrollTop = getScroll(target, true);
- const scrollLeft = getScroll(target, false);
-
- const docElem = window.document.body;
- const clientTop = docElem.clientTop || 0;
- const clientLeft = docElem.clientLeft || 0;
-
- return {
- top: elemRect.top - targetRect.top + scrollTop - clientTop,
- left: elemRect.left - targetRect.left + scrollLeft - clientLeft,
- width: elemRect.width,
- height: elemRect.height,
- };
-}
+import warning from '../_util/warning';
+import {
+ addObserveTarget,
+ removeObserveTarget,
+ getTargetRect,
+ getFixedTop,
+ getFixedBottom,
+} from './utils';
function getDefaultTarget() {
return typeof window !== 'undefined' ? window : null;
@@ -48,10 +33,13 @@ const AffixProps = {
/** 固定状态改变时触发的回调函数 */
// onChange?: (affixed?: boolean) => void;
/** 设置 Affix 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 */
- target: PropTypes.func,
+ target: PropTypes.func.def(getDefaultTarget),
prefixCls: PropTypes.string,
};
-
+const AffixStatus = {
+ None: 'none',
+ Prepare: 'Prepare',
+};
const Affix = {
name: 'AAffix',
props: AffixProps,
@@ -60,192 +48,191 @@ const Affix = {
configProvider: { default: () => ConfigConsumerProps },
},
data() {
- this.events = ['resize', 'scroll', 'touchstart', 'touchmove', 'touchend', 'pageshow', 'load'];
- this.eventHandlers = {};
return {
affixStyle: undefined,
placeholderStyle: undefined,
+ status: AffixStatus.None,
+ lastAffix: false,
+ prevTarget: null,
};
},
beforeMount() {
this.updatePosition = throttleByAnimationFrame(this.updatePosition);
+ this.lazyUpdatePosition = throttleByAnimationFrame(this.lazyUpdatePosition);
},
mounted() {
- const target = this.target || getDefaultTarget;
- // Wait for parent component ref has its value
- this.timeout = setTimeout(() => {
- this.setTargetEventListeners(target);
- // Mock Event object.
- this.updatePosition({});
- });
+ const { target } = this;
+ if (target) {
+ // [Legacy] Wait for parent component ref has its value.
+ // We should use target as directly element instead of function which makes element check hard.
+ this.timeout = setTimeout(() => {
+ addObserveTarget(target(), this);
+ // Mock Event object.
+ this.updatePosition();
+ });
+ }
+ },
+ updated() {
+ this.measure();
},
watch: {
target(val) {
- this.clearEventListeners();
- this.setTargetEventListeners(val);
- // Mock Event object.
- this.updatePosition({});
+ let newTarget = null;
+ if (val) {
+ newTarget = val() || null;
+ }
+ if (this.prevTarget !== newTarget) {
+ removeObserveTarget(this);
+ if (newTarget) {
+ addObserveTarget(newTarget, this);
+ // Mock Event object.
+ this.updatePosition();
+ }
+ this.prevTarget = newTarget;
+ }
},
offsetTop() {
- this.updatePosition({});
+ this.updatePosition();
},
offsetBottom() {
- this.updatePosition({});
+ this.updatePosition();
},
},
beforeDestroy() {
- this.clearEventListeners();
clearTimeout(this.timeout);
+ removeObserveTarget(this);
this.updatePosition.cancel();
},
methods: {
- setAffixStyle(e, affixStyle) {
- const { target = getDefaultTarget } = this;
- const originalAffixStyle = this.affixStyle;
- const isWindow = target() === window;
- if (e.type === 'scroll' && originalAffixStyle && affixStyle && isWindow) {
- return;
+ getOffsetTop() {
+ const { offset, offsetBottom } = this;
+ let { offsetTop } = this;
+ if (typeof offsetTop === 'undefined') {
+ offsetTop = offset;
+ warning(
+ typeof offset === 'undefined',
+ 'Affix',
+ '`offset` is deprecated. Please use `offsetTop` instead.',
+ );
}
- if (shallowequal(affixStyle, originalAffixStyle)) {
- return;
+
+ if (offsetBottom === undefined && offsetTop === undefined) {
+ offsetTop = 0;
}
- this.setState({ affixStyle: affixStyle }, () => {
- const affixed = !!this.affixStyle;
- if ((affixStyle && !originalAffixStyle) || (!affixStyle && originalAffixStyle)) {
- this.$emit('change', affixed);
- }
- });
+ return offsetTop;
},
- setPlaceholderStyle(placeholderStyle) {
- const originalPlaceholderStyle = this.placeholderStyle;
- if (shallowequal(placeholderStyle, originalPlaceholderStyle)) {
- return;
- }
- this.setState({ placeholderStyle: placeholderStyle });
+ getOffsetBottom() {
+ return this.offsetBottom;
},
- syncPlaceholderStyle(e) {
- const { affixStyle } = this;
- if (!affixStyle) {
+ // =================== Measure ===================
+ measure() {
+ const { status, lastAffix } = this;
+ const { target } = this;
+ if (
+ status !== AffixStatus.Prepare ||
+ !this.$refs.fixedNode ||
+ !this.$refs.placeholderNode ||
+ !target
+ ) {
return;
}
- this.$refs.placeholderNode.style.cssText = '';
- this.setAffixStyle(e, {
- ...affixStyle,
- width: this.$refs.placeholderNode.offsetWidth + 'px',
- });
- this.setPlaceholderStyle({
- width: this.$refs.placeholderNode.offsetWidth + 'px',
- });
- },
- updatePosition(e) {
- const { offsetBottom, offset, target = getDefaultTarget } = this;
- let { offsetTop } = this;
- const targetNode = target();
-
- // Backwards support
- // Fix: if offsetTop === 0, it will get undefined,
- // if offsetBottom is type of number, offsetMode will be { top: false, ... }
- offsetTop = typeof offsetTop === 'undefined' ? offset : offsetTop;
- const scrollTop = getScroll(targetNode, true);
- const affixNode = this.$el;
- const elemOffset = getOffset(affixNode, targetNode);
- const elemSize = {
- width: this.$refs.fixedNode.offsetWidth,
- height: this.$refs.fixedNode.offsetHeight,
- };
+ const offsetTop = this.getOffsetTop();
+ const offsetBottom = this.getOffsetBottom();
- const offsetMode = {
- top: false,
- bottom: false,
- };
- // Default to `offsetTop=0`.
- if (typeof offsetTop !== 'number' && typeof offsetBottom !== 'number') {
- offsetMode.top = true;
- offsetTop = 0;
- } else {
- offsetMode.top = typeof offsetTop === 'number';
- offsetMode.bottom = typeof offsetBottom === 'number';
+ const targetNode = target();
+ if (!targetNode) {
+ return;
}
+ const newState = {
+ status: AffixStatus.None,
+ };
const targetRect = getTargetRect(targetNode);
- const targetInnerHeight = targetNode.innerHeight || targetNode.clientHeight;
- // ref: https://github.com/ant-design/ant-design/issues/13662
- if (scrollTop >= elemOffset.top - offsetTop && offsetMode.top) {
- // Fixed Top
- const width = `${elemOffset.width}px`;
- const top = `${targetRect.top + offsetTop}px`;
- this.setAffixStyle(e, {
+ const placeholderReact = getTargetRect(this.$refs.placeholderNode);
+ const fixedTop = getFixedTop(placeholderReact, targetRect, offsetTop);
+ const fixedBottom = getFixedBottom(placeholderReact, targetRect, offsetBottom);
+ if (fixedTop !== undefined) {
+ newState.affixStyle = {
position: 'fixed',
- top,
- left: `${targetRect.left + elemOffset.left}px`,
- width,
- });
- this.setPlaceholderStyle({
- width,
- height: `${elemSize.height}px`,
- });
- } else if (
- scrollTop <= elemOffset.top + elemSize.height + offsetBottom - targetInnerHeight &&
- offsetMode.bottom
- ) {
- // Fixed Bottom
- const targetBottomOffet =
- targetNode === window ? 0 : window.innerHeight - targetRect.bottom;
- const width = `${elemOffset.width}px`;
- this.setAffixStyle(e, {
+ top: fixedTop,
+ width: placeholderReact.width + 'px',
+ height: placeholderReact.height + 'px',
+ };
+ newState.placeholderStyle = {
+ width: placeholderReact.width + 'px',
+ height: placeholderReact.height + 'px',
+ };
+ } else if (fixedBottom !== undefined) {
+ newState.affixStyle = {
position: 'fixed',
- bottom: targetBottomOffet + offsetBottom + 'px',
- left: targetRect.left + elemOffset.left + 'px',
- width,
- });
- this.setPlaceholderStyle({
- width,
- height: elemOffset.height + 'px',
- });
- } else {
- const { affixStyle } = this;
- if (
- e.type === 'resize' &&
- affixStyle &&
- affixStyle.position === 'fixed' &&
- affixNode.offsetWidth
- ) {
- this.setAffixStyle(e, { ...affixStyle, width: affixNode.offsetWidth + 'px' });
- } else {
- this.setAffixStyle(e, null);
- }
- this.setPlaceholderStyle(null);
+ bottom: fixedBottom,
+ width: placeholderReact.width + 'px',
+ height: placeholderReact.height + 'px',
+ };
+ newState.placeholderStyle = {
+ width: placeholderReact.width + 'px',
+ height: placeholderReact.height + 'px',
+ };
}
- if (e.type === 'resize') {
- this.syncPlaceholderStyle(e);
+
+ newState.lastAffix = !!newState.affixStyle;
+ if (lastAffix !== newState.lastAffix) {
+ this.$emit('change', newState.lastAffix);
}
+
+ this.setState(newState);
},
- setTargetEventListeners(getTarget) {
- const target = getTarget();
- if (!target) {
- return;
- }
- this.clearEventListeners();
- this.events.forEach(eventName => {
- this.eventHandlers[eventName] = addEventListener(target, eventName, this.updatePosition);
+ // @ts-ignore TS6133
+ prepareMeasure() {
+ this.setState({
+ status: AffixStatus.Prepare,
+ affixStyle: undefined,
+ placeholderStyle: undefined,
});
+ this.$forceUpdate();
+
+ // Test if `updatePosition` called
+ if (process.env.NODE_ENV === 'test') {
+ this.$emit('testUpdatePosition');
+ }
},
+ updatePosition() {
+ this.prepareMeasure();
+ },
+ lazyUpdatePosition() {
+ const { target } = this;
+ const { affixStyle } = this;
+
+ // Check position change before measure to make Safari smooth
+ if (target && affixStyle) {
+ const offsetTop = this.getOffsetTop();
+ const offsetBottom = this.getOffsetBottom();
- clearEventListeners() {
- this.events.forEach(eventName => {
- const handler = this.eventHandlers[eventName];
- if (handler && handler.remove) {
- handler.remove();
+ const targetNode = target();
+ if (targetNode) {
+ const targetRect = getTargetRect(targetNode);
+ const placeholderReact = getTargetRect(this.$refs.placeholderNode);
+ const fixedTop = getFixedTop(placeholderReact, targetRect, offsetTop);
+ const fixedBottom = getFixedBottom(placeholderReact, targetRect, offsetBottom);
+
+ if (
+ (fixedTop !== undefined && affixStyle.top === fixedTop) ||
+ (fixedBottom !== undefined && affixStyle.bottom === fixedBottom)
+ ) {
+ return;
+ }
}
- });
+ }
+ // Directly call prepare measure since it's already throttled.
+ this.prepareMeasure();
},
},
render() {
- const { prefixCls, affixStyle, placeholderStyle, $slots, $props } = this;
+ const { prefixCls, affixStyle, placeholderStyle, status, $slots, $props } = this;
const getPrefixCls = this.configProvider.getPrefixCls;
const className = classNames({
[getPrefixCls('affix', prefixCls)]: affixStyle,
diff --git a/components/affix/index.zh-CN.md b/components/affix/index.zh-CN.md
index 075f4cda02..e5996c6fab 100644
--- a/components/affix/index.zh-CN.md
+++ b/components/affix/index.zh-CN.md
@@ -1,16 +1,16 @@
## API
-| 成员 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | |
-| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | |
-| target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => window |
+| 成员 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | | |
+| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | | |
+| target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => window | |
### 事件
-| 事件名称 | 说明 | 回调参数 |
-| -------- | ---------------------------- | ----------------- |
-| change | 固定状态改变时触发的回调函数 | Function(affixed) |
+| 事件名称 | 说明 | 回调参数 | 版本 |
+| -------- | ---------------------------- | ----------------- | ---- |
+| onChange | 固定状态改变时触发的回调函数 | Function(affixed) | 无 | |
**注意：**`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位：
@@ -19,3 +19,11 @@
...
```
+
+## FAQ
+
+### Affix 使用 `target` 绑定容器时，元素会跑到容器外。
+
+从性能角度考虑，我们只监听容器滚动事件。
+
+相关 issue：[#3938](https://github.com/ant-design/ant-design/issues/3938) [#5642](https://github.com/ant-design/ant-design/issues/5642) [#16120](https://github.com/ant-design/ant-design/issues/16120)
diff --git a/components/affix/utils.js b/components/affix/utils.js
new file mode 100644
index 0000000000..52876ae979
--- /dev/null
+++ b/components/affix/utils.js
@@ -0,0 +1,88 @@
+import addEventListener from '../vc-util/Dom/addEventListener';
+
+export function getTargetRect(target) {
+ return target !== window
+ ? target.getBoundingClientRect()
+ : { top: 0, bottom: window.innerHeight };
+}
+
+export function getFixedTop(placeholderReact, targetRect, offsetTop) {
+ if (offsetTop !== undefined && targetRect.top > placeholderReact.top - offsetTop) {
+ return offsetTop + targetRect.top + 'px';
+ }
+ return undefined;
+}
+
+export function getFixedBottom(placeholderReact, targetRect, offsetBottom) {
+ if (offsetBottom !== undefined && targetRect.bottom < placeholderReact.bottom + offsetBottom) {
+ const targetBottomOffset = window.innerHeight - targetRect.bottom;
+ return offsetBottom + targetBottomOffset + 'px';
+ }
+ return undefined;
+}
+
+// ======================== Observer ========================
+const TRIGGER_EVENTS = [
+ 'resize',
+ 'scroll',
+ 'touchstart',
+ 'touchmove',
+ 'touchend',
+ 'pageshow',
+ 'load',
+];
+
+let observerEntities = [];
+
+export function getObserverEntities() {
+ // Only used in test env. Can be removed if refactor.
+ return observerEntities;
+}
+
+export function addObserveTarget(target, affix) {
+ if (!target) return;
+
+ let entity = observerEntities.find(item => item.target === target);
+
+ if (entity) {
+ entity.affixList.push(affix);
+ } else {
+ entity = {
+ target,
+ affixList: [affix],
+ eventHandlers: {},
+ };
+ observerEntities.push(entity);
+
+ // Add listener
+ TRIGGER_EVENTS.forEach(eventName => {
+ entity.eventHandlers[eventName] = addEventListener(target, eventName, () => {
+ entity.affixList.forEach(targetAffix => {
+ targetAffix.lazyUpdatePosition();
+ });
+ });
+ });
+ }
+}
+
+export function removeObserveTarget(affix) {
+ const observerEntity = observerEntities.find(oriObserverEntity => {
+ const hasAffix = oriObserverEntity.affixList.some(item => item === affix);
+ if (hasAffix) {
+ oriObserverEntity.affixList = oriObserverEntity.affixList.filter(item => item !== affix);
+ }
+ return hasAffix;
+ });
+
+ if (observerEntity && observerEntity.affixList.length === 0) {
+ observerEntities = observerEntities.filter(item => item !== observerEntity);
+
+ // Remove listener
+ TRIGGER_EVENTS.forEach(eventName => {
+ const handler = observerEntity.eventHandlers[eventName];
+ if (handler && handler.remove) {
+ handler.remove();
+ }
+ });
+ }
+}
From 2ab5d866725ef625a870bbcfc888af308226b5bb Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Sat, 8 Feb 2020 10:05:19 +0800
Subject: [PATCH 015/116] feat: update alert
---
build/config.js | 2 +-
.../__tests__/__snapshots__/demo.test.js.snap | 10 +++----
components/alert/__tests__/index.test.js | 4 +--
components/alert/index.en-US.md | 28 +++++++++----------
components/alert/index.jsx | 22 +++++++++------
components/alert/index.zh-CN.md | 28 +++++++++----------
6 files changed, 49 insertions(+), 45 deletions(-)
diff --git a/build/config.js b/build/config.js
index f907715504..45fccbd574 100644
--- a/build/config.js
+++ b/build/config.js
@@ -1,5 +1,5 @@
module.exports = {
dev: {
- componentName: 'affix', // dev components
+ componentName: 'alert', // dev components
},
};
diff --git a/components/alert/__tests__/__snapshots__/demo.test.js.snap b/components/alert/__tests__/__snapshots__/demo.test.js.snap
index 6116aae09b..ba11bb2174 100644
--- a/components/alert/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/alert/__tests__/__snapshots__/demo.test.js.snap
@@ -7,7 +7,7 @@ exports[`renders ./components/alert/demo/banner.md correctly 1`] = `
Warning text