From 810c3a791991e5f3900d46f191f209ec32567e2a Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 15 Nov 2020 08:49:29 +0800 Subject: [PATCH 1/5] fix(Skeleton): avatar-size can be number type (#7555) --- src/skeleton/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/skeleton/index.tsx b/src/skeleton/index.tsx index fa68231d8..549546cc3 100644 --- a/src/skeleton/index.tsx +++ b/src/skeleton/index.tsx @@ -13,7 +13,7 @@ export type SkeletonProps = { avatar?: boolean; loading: boolean; animate: boolean; - avatarSize: string; + avatarSize: number | string; avatarShape: 'square' | 'round'; titleWidth: number | string; rowWidth: number | string | (number | string)[]; @@ -109,7 +109,7 @@ Skeleton.props = { default: true, }, avatarSize: { - type: String, + type: [Number, String], default: '32px', }, avatarShape: { From 3f4e0a04c5353582bca2ad32ce82be2803744d83 Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 15 Nov 2020 08:52:50 +0800 Subject: [PATCH 2/5] feat(Skeleton): add @skeleton-avatar-size less var (#7556) --- src/skeleton/index.less | 2 ++ src/skeleton/index.tsx | 5 +---- src/skeleton/test/__snapshots__/demo.spec.js.snap | 4 ++-- src/skeleton/test/__snapshots__/index.spec.js.snap | 2 +- src/style/var.less | 1 + 5 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/skeleton/index.less b/src/skeleton/index.less index 95ab87c47..4cf5dfd6d 100644 --- a/src/skeleton/index.less +++ b/src/skeleton/index.less @@ -6,6 +6,8 @@ &__avatar { flex-shrink: 0; + width: @skeleton-avatar-size; + height: @skeleton-avatar-size; margin-right: @padding-md; background-color: @skeleton-avatar-background-color; diff --git a/src/skeleton/index.tsx b/src/skeleton/index.tsx index 549546cc3..2c4b13752 100644 --- a/src/skeleton/index.tsx +++ b/src/skeleton/index.tsx @@ -96,6 +96,7 @@ Skeleton.props = { title: Boolean, round: Boolean, avatar: Boolean, + avatarSize: [Number, String], row: { type: [Number, String], default: 0, @@ -108,10 +109,6 @@ Skeleton.props = { type: Boolean, default: true, }, - avatarSize: { - type: [Number, String], - default: '32px', - }, avatarShape: { type: String, default: 'round', diff --git a/src/skeleton/test/__snapshots__/demo.spec.js.snap b/src/skeleton/test/__snapshots__/demo.spec.js.snap index 785a20ad3..d444eb00b 100644 --- a/src/skeleton/test/__snapshots__/demo.spec.js.snap +++ b/src/skeleton/test/__snapshots__/demo.spec.js.snap @@ -14,7 +14,7 @@ exports[`renders demo correctly 1`] = `
-
+

@@ -28,7 +28,7 @@ exports[`renders demo correctly 1`] = `
-
+

diff --git a/src/skeleton/test/__snapshots__/index.spec.js.snap b/src/skeleton/test/__snapshots__/index.spec.js.snap index 0ffcccc95..0e75e9c6a 100644 --- a/src/skeleton/test/__snapshots__/index.spec.js.snap +++ b/src/skeleton/test/__snapshots__/index.spec.js.snap @@ -19,7 +19,7 @@ exports[`render chidren 1`] = `
Content
`; exports[`round prop 1`] = `
-
+

diff --git a/src/style/var.less b/src/style/var.less index 92f0481e1..1fbaf7fc6 100644 --- a/src/style/var.less +++ b/src/style/var.less @@ -648,6 +648,7 @@ @skeleton-row-height: 16px; @skeleton-row-background-color: @active-color; @skeleton-row-margin-top: @padding-sm; +@skeleton-avatar-size: 32px; @skeleton-avatar-background-color: @active-color; @skeleton-animation-duration: 1.2s; From 3e990f8d797bc36fb6aaae8d168dec95f9ac1511 Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 15 Nov 2020 08:56:32 +0800 Subject: [PATCH 3/5] feat(Skeleton): add @skeleton-title-width less var (#7557) --- src/skeleton/index.less | 1 + src/skeleton/index.tsx | 9 +++------ src/skeleton/test/__snapshots__/demo.spec.js.snap | 6 +++--- src/skeleton/test/__snapshots__/index.spec.js.snap | 2 +- src/style/var.less | 1 + 5 files changed, 9 insertions(+), 10 deletions(-) diff --git a/src/skeleton/index.less b/src/skeleton/index.less index 4cf5dfd6d..38e56ff68 100644 --- a/src/skeleton/index.less +++ b/src/skeleton/index.less @@ -31,6 +31,7 @@ } &__title { + width: @skeleton-title-width; margin: 0; } diff --git a/src/skeleton/index.tsx b/src/skeleton/index.tsx index 2c4b13752..bc8383ab9 100644 --- a/src/skeleton/index.tsx +++ b/src/skeleton/index.tsx @@ -13,9 +13,9 @@ export type SkeletonProps = { avatar?: boolean; loading: boolean; animate: boolean; - avatarSize: number | string; + titleWidth?: number | string; + avatarSize?: number | string; avatarShape: 'square' | 'round'; - titleWidth: number | string; rowWidth: number | string | (number | string)[]; }; @@ -96,6 +96,7 @@ Skeleton.props = { title: Boolean, round: Boolean, avatar: Boolean, + titleWidth: [Number, String], avatarSize: [Number, String], row: { type: [Number, String], @@ -113,10 +114,6 @@ Skeleton.props = { type: String, default: 'round', }, - titleWidth: { - type: [Number, String], - default: '40%', - }, rowWidth: { type: [Number, String, Array], default: DEFAULT_ROW_WIDTH, diff --git a/src/skeleton/test/__snapshots__/demo.spec.js.snap b/src/skeleton/test/__snapshots__/demo.spec.js.snap index d444eb00b..5efd62c2a 100644 --- a/src/skeleton/test/__snapshots__/demo.spec.js.snap +++ b/src/skeleton/test/__snapshots__/demo.spec.js.snap @@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
-

+

@@ -16,7 +16,7 @@ exports[`renders demo correctly 1`] = `
-

+

@@ -30,7 +30,7 @@ exports[`renders demo correctly 1`] = `
-

+

diff --git a/src/skeleton/test/__snapshots__/index.spec.js.snap b/src/skeleton/test/__snapshots__/index.spec.js.snap index 0e75e9c6a..c6b34a297 100644 --- a/src/skeleton/test/__snapshots__/index.spec.js.snap +++ b/src/skeleton/test/__snapshots__/index.spec.js.snap @@ -21,7 +21,7 @@ exports[`round prop 1`] = `
-

+

`; diff --git a/src/style/var.less b/src/style/var.less index 1fbaf7fc6..df5fe7ffb 100644 --- a/src/style/var.less +++ b/src/style/var.less @@ -648,6 +648,7 @@ @skeleton-row-height: 16px; @skeleton-row-background-color: @active-color; @skeleton-row-margin-top: @padding-sm; +@skeleton-title-width: 40%; @skeleton-avatar-size: 32px; @skeleton-avatar-background-color: @active-color; @skeleton-animation-duration: 1.2s; From 97f2028e4eb22f169d68d0c82f8a9bd9f3be7540 Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 15 Nov 2020 08:59:46 +0800 Subject: [PATCH 4/5] docs(DropdownItem): update title slot description (#7558) --- src/dropdown-menu/README.zh-CN.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/dropdown-menu/README.zh-CN.md b/src/dropdown-menu/README.zh-CN.md index eeadceabe..9dbe767b1 100644 --- a/src/dropdown-menu/README.zh-CN.md +++ b/src/dropdown-menu/README.zh-CN.md @@ -164,10 +164,10 @@ export default { ### DropdownItem Slots -| 名称 | 说明 | -| ------- | -------------------------- | -| default | 菜单内容 | -| title | 自定义标题，不支持动态渲染 | +| 名称 | 说明 | +| ------- | ---------------- | +| default | 菜单内容 | +| title | 自定义菜单项标题 | ### DropdownItem 方法 From d78438a899a599d936e893674f09f99dd8e75b29 Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 15 Nov 2020 10:43:12 +0800 Subject: [PATCH 5/5] fix(IndexBar): incorrect behavior inside popup (#7559) --- src/index-anchor/index.js | 21 +++++++++++++++++++-- src/index-bar/index.js | 22 ++++------------------ src/index-bar/test/index.spec.js | 14 ++------------ 3 files changed, 25 insertions(+), 32 deletions(-) diff --git a/src/index-anchor/index.js b/src/index-anchor/index.js index 2852203a8..f93ca0dc4 100644 --- a/src/index-anchor/index.js +++ b/src/index-anchor/index.js @@ -1,6 +1,7 @@ import { createNamespace } from '../utils'; import { ChildrenMixin } from '../mixins/relation'; import { BORDER_BOTTOM } from '../utils/constant'; +import { getScrollTop, getRootScrollTop } from '../utils/dom/scroll'; const [createComponent, bem] = createNamespace('index-anchor'); @@ -15,6 +16,7 @@ export default createComponent({ return { top: 0, left: null, + rect: { top: 0, height: 0 }, width: null, active: false, }; @@ -39,20 +41,35 @@ export default createComponent({ }, mounted() { - this.height = this.$el.offsetHeight; + const rect = this.$el.getBoundingClientRect(); + this.rect.height = rect.height; }, methods: { scrollIntoView() { this.$el.scrollIntoView(); }, + + getRect(scroller, scrollerRect) { + const el = this.$el; + const elRect = el.getBoundingClientRect(); + this.rect.height = elRect.height; + + if (scroller === window || scroller === document.body) { + this.rect.top = elRect.top + getRootScrollTop(); + } else { + this.rect.top = elRect.top + getScrollTop(scroller) - scrollerRect.top; + } + + return this.rect; + }, }, render() { const { sticky } = this; return ( -
+
({ - height: item.height, - top: this.getElementTop(item.$el, scrollerRect), - })); + const rects = this.children.map((item) => + item.getRect(this.scroller, scrollerRect) + ); const active = this.getActiveAnchorIndex(scrollTop, rects); @@ -131,7 +129,7 @@ export default createComponent({ } else if (index === active - 1) { const activeItemTop = rects[active].top - scrollTop; item.active = activeItemTop > 0; - item.top = activeItemTop + scrollerRect.top - item.height; + item.top = activeItemTop + scrollerRect.top - rects[index].height; } else { item.active = false; } @@ -150,18 +148,6 @@ export default createComponent({ }; }, - getElementTop(ele, scrollerRect) { - const { scroller } = this; - - if (scroller === window || scroller === document.body) { - return getElementTop(ele); - } - - const eleRect = ele.getBoundingClientRect(); - - return eleRect.top - scrollerRect.top + getScrollTop(scroller); - }, - getActiveAnchorIndex(scrollTop, rects) { for (let i = this.children.length - 1; i >= 0; i--) { const prevHeight = i > 0 ? rects[i - 1].height : 0; diff --git a/src/index-bar/test/index.spec.js b/src/index-bar/test/index.spec.js index 65390e9fb..9d557d693 100644 --- a/src/index-bar/test/index.spec.js +++ b/src/index-bar/test/index.spec.js @@ -1,13 +1,5 @@ import { mount, trigger, triggerDrag, mockScrollIntoView } from '../../../test'; -function mockOffsetHeight(offsetHeight) { - Object.defineProperty(HTMLElement.prototype, 'offsetHeight', { - get() { - return offsetHeight; - }, - }); -} - test('should allow to custom anchor text', () => { const wrapper = mount({ template: ` @@ -97,11 +89,10 @@ test('should update active anchor after page scroll', () => { const { index } = this.dataset; return { top: index ? index * 10 : 0, + height: 10, }; }; - mockOffsetHeight(10); - const wrapper = mount({ template: ` @@ -138,11 +129,10 @@ test('should emit change event when active index changed', () => { const { index } = this.dataset; return { top: index ? index * 10 : 0, + height: 10, }; }; - mockOffsetHeight(10); - const onChange = jest.fn(); mount({