Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: Anchor、Alert、Avatar、Badge、BackTop、Col、Form、Layout、Menu、Space、Spin、Switch、Row、Result、Rate #4171

Merged
merged 68 commits into from
Jun 7, 2021
Merged
Changes from 1 commit
Commits
Show all changes
68 commits
Select commit Hold shift + click to select a range
44cd93e
chore: remove resize-observer-polyfill
tangjinzhou Apr 17, 2021
7315bfd
Merge remote-tracking branch 'origin/next' into v3
tangjinzhou May 10, 2021
184957e
refactor: align
tangjinzhou May 10, 2021
4d178de
refactor(v3/avatar): refactor using composition api (#4052)
John60676 May 10, 2021
7a2f28a
fix: avatar src scale not update
tangjinzhou May 10, 2021
11ffa8d
refactor: resizeObserver
tangjinzhou May 10, 2021
170a169
refactor: divider
tangjinzhou May 11, 2021
dbbd07d
refactor: localeProvider
tangjinzhou May 11, 2021
5bcca46
refactor(v3/back-top): use composition api (#4060)
sendya May 11, 2021
b96fc44
refactor: backtop
tangjinzhou May 11, 2021
3a13ef2
refactor: empty
tangjinzhou May 11, 2021
8f02b6d
refactor: transButton
tangjinzhou May 11, 2021
49ad768
Merge remote-tracking branch 'origin/next' into v3
tangjinzhou May 12, 2021
0984951
feat(v3/avatar): add avatar group (#4062)
John60676 May 12, 2021
4a5c4cd
refactor: avatar
tangjinzhou May 12, 2021
7acf577
refactor: avatar
tangjinzhou May 13, 2021
ea8ff66
style: rename useProvide
tangjinzhou May 13, 2021
67952ab
refactor: menu (#4110)
tangjinzhou May 23, 2021
7b494fd
fix: menu
tangjinzhou May 23, 2021
8179361
refactor: menu
tangjinzhou May 24, 2021
3d0edbc
refactor: remove rc-menu
tangjinzhou May 24, 2021
0c9951a
fix: menu rtl error
tangjinzhou May 24, 2021
1139aa5
style: lint
tangjinzhou May 24, 2021
1877d66
refactor(Anchor): use composition api (#4054)
sendya May 24, 2021
fbe3a48
refactor: anchor
tangjinzhou May 24, 2021
a6e30c2
refactor: anchor
tangjinzhou May 24, 2021
de4693c
refactor: anchor
tangjinzhou May 24, 2021
44ccaa1
feat: update
tangjinzhou May 25, 2021
69b9f80
fix: icon class lose
tangjinzhou May 25, 2021
372ac5c
refactor(v3/badge): use composition api (#4076)
sendya May 25, 2021
e442b0d
refactor: badge
tangjinzhou May 25, 2021
a01be5c
fix: badge inheritAttrs
tangjinzhou May 25, 2021
fe99051
refactor: grid
tangjinzhou May 25, 2021
3825c65
refactor: layout
tangjinzhou May 26, 2021
a049a66
fix: menu not close
tangjinzhou May 26, 2021
42916f5
refactor: space
tangjinzhou May 26, 2021
3b89f59
refactor: result
tangjinzhou May 26, 2021
e9854da
refactor: affix
tangjinzhou May 26, 2021
5ee3d30
refactor: comment
tangjinzhou May 26, 2021
2089961
refactor: form
tangjinzhou May 26, 2021
b53a91c
feat: spin add rtl
tangjinzhou May 26, 2021
ad2b447
feat: export spin type
tangjinzhou May 26, 2021
d2a1c42
refactor: pageHeader
tangjinzhou May 26, 2021
5096ee4
refactor: page-header
tangjinzhou May 27, 2021
c889882
refactor: skeleton
tangjinzhou May 28, 2021
b68bb81
refactor: typography
tangjinzhou May 28, 2021
2b78d2d
refactor(v3/rate): use composition api
sendya May 28, 2021
7ec594c
fix: add useRef hook
sendya May 28, 2021
c2bba2e
refactor: form
tangjinzhou May 28, 2021
0a2940e
fix: menu not update
tangjinzhou May 28, 2021
3d2a04d
refactor: form
tangjinzhou May 30, 2021
7214710
refactor: form
tangjinzhou May 31, 2021
f9ccbfd
fix: slide animate not work
tangjinzhou May 31, 2021
b8c52b3
fix: menu mode error
tangjinzhou May 31, 2021
6b2af5c
fix: menu icon
tangjinzhou May 31, 2021
3186b92
Merge branch 'refactor/v3/rate' of git://github.com/sendya/ant-design…
tangjinzhou Jun 1, 2021
836ae6d
Merge branch 'sendya-refactor/v3/rate' into v3
tangjinzhou Jun 1, 2021
bc85604
refactor: rate
tangjinzhou Jun 2, 2021
a58cb3c
perf: remove rate
tangjinzhou Jun 2, 2021
08a5ff3
feat: add vc-overflow
tangjinzhou Jun 2, 2021
1281e4a
refactor: menu
tangjinzhou Jun 7, 2021
2b0afda
fix: remove flex check (#4165)
zkwolf Jun 7, 2021
0d02391
Merge remote-tracking branch 'origin/next' into v3
tangjinzhou Jun 7, 2021
62ca3a9
fix: dist locale file lose #3684
tangjinzhou Jun 7, 2021
2cfc6cc
release 2.2.0-beta.1
tangjinzhou Jun 7, 2021
5cc10c6
dcos: update changelog
tangjinzhou Jun 7, 2021
dde7719
chore: update type
tangjinzhou Jun 7, 2021
772ac3c
docs: update changelog
tangjinzhou Jun 7, 2021
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 0 additions & 17 deletions components/_util/getScroll.js

This file was deleted.

27 changes: 27 additions & 0 deletions components/_util/getScroll.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
export function isWindow(obj: any) {
return obj !== null && obj !== undefined && obj === obj.window;
}

export default function getScroll(
target: HTMLElement | Window | Document | null,
top: boolean,
): number {
if (typeof window === 'undefined') {
return 0;
}
const method = top ? 'scrollTop' : 'scrollLeft';
let result = 0;
if (isWindow(target)) {
result = (target as Window)[top ? 'pageYOffset' : 'pageXOffset'];
} else if (target instanceof Document) {
result = target.documentElement[method];
} else if (target) {
result = (target as HTMLElement)[method];
}
if (target && !isWindow(target) && typeof result !== 'number') {
result = ((target as HTMLElement).ownerDocument || (target as Document)).documentElement?.[
method
];
}
return result;
}
16 changes: 9 additions & 7 deletions components/_util/scrollTo.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import getScroll from './getScroll';
import raf from './raf';
import getScroll, { isWindow } from './getScroll';
import { easeInOutCubic } from './easings';

interface ScrollToOptions {
/** Scroll container, default as window */
getContainer?: () => HTMLElement | Window;
getContainer?: () => HTMLElement | Window | Document;
/** Scroll end callback */
callback?: () => any;
/** Animation duration, default as 450 */
@@ -12,7 +13,6 @@ interface ScrollToOptions {

export default function scrollTo(y: number, options: ScrollToOptions = {}) {
const { getContainer = () => window, callback, duration = 450 } = options;

const container = getContainer();
const scrollTop = getScroll(container, true);
const startTime = Date.now();
@@ -21,16 +21,18 @@ export default function scrollTo(y: number, options: ScrollToOptions = {}) {
const timestamp = Date.now();
const time = timestamp - startTime;
const nextScrollTop = easeInOutCubic(time > duration ? duration : time, scrollTop, y, duration);
if (container === window) {
window.scrollTo(window.pageXOffset, nextScrollTop);
if (isWindow(container)) {
(container as Window).scrollTo(window.pageXOffset, nextScrollTop);
} else if (container instanceof HTMLDocument || container.constructor.name === 'HTMLDocument') {
(container as HTMLDocument).documentElement.scrollTop = nextScrollTop;
} else {
(container as HTMLElement).scrollTop = nextScrollTop;
}
if (time < duration) {
requestAnimationFrame(frameFunc);
raf(frameFunc);
} else if (typeof callback === 'function') {
callback();
}
};
requestAnimationFrame(frameFunc);
raf(frameFunc);
}
94 changes: 65 additions & 29 deletions components/back-top/index.tsx
Original file line number Diff line number Diff line change
@@ -7,27 +7,26 @@ import {
onBeforeUnmount,
onMounted,
reactive,
PropType,
ref,
watch,
onDeactivated,
computed,
} from 'vue';
import classNames from '../_util/classNames';
import VerticalAlignTopOutlined from '@ant-design/icons-vue/VerticalAlignTopOutlined';
import PropTypes from '../_util/vue-types';
import addEventListener from '../vc-util/Dom/addEventListener';
import getScroll from '../_util/getScroll';
import { getTransitionProps, Transition } from '../_util/transition';
import { defaultConfigProvider } from '../config-provider';
import scrollTo from '../_util/scrollTo';
import { withInstall } from '../_util/type';

function getDefaultTarget() {
return window;
}
import throttleByAnimationFrame from '../_util/throttleByAnimationFrame';

export const backTopProps = {
// 滚动高度达到此参数值才出现 BackTop
visibilityHeight: PropTypes.number.def(400),
// 回到顶部所需时间(ms) @4.4.0
duration: PropTypes.number.def(450),
// 设置需要监听其滚动事件的元素,值为一个返回对应 DOM 元素的函数
target: PropTypes.func,
target: Function as PropType<() => HTMLElement | Window | Document>,
prefixCls: PropTypes.string,
onClick: PropTypes.func,
// visible: PropTypes.looseBool, // Only for test. Don't use it.
@@ -42,12 +41,15 @@ const BackTop = defineComponent({
emits: ['click'],
setup(props, { slots, attrs, emit }) {
const configProvider = inject('configProvider', defaultConfigProvider);

const domRef = ref();
const state = reactive({
visible: false,
scrollEvent: null,
});

const getDefaultTarget = () =>
domRef.value && domRef.value.ownerDocument ? domRef.value.ownerDocument : window;

const scrollToTop = (e: Event) => {
const { target = getDefaultTarget, duration } = props;
scrollTo(0, {
@@ -57,51 +59,85 @@ const BackTop = defineComponent({
emit('click', e);
};

const handleScroll = () => {
const { visibilityHeight, target = getDefaultTarget } = props;
const scrollTop = getScroll(target(), true);
const handleScroll = throttleByAnimationFrame((e: Event | { target: any }) => {
const { visibilityHeight } = props;
const scrollTop = getScroll(e.target, true);
state.visible = scrollTop > visibilityHeight;
});

const bindScrollEvent = () => {
const { target } = props;
const getTarget = target || getDefaultTarget;
const container = getTarget();
state.scrollEvent = addEventListener(container, 'scroll', (e: Event) => {
handleScroll(e);
});
handleScroll({
target: container,
});
};

const scrollRemove = () => {
if (state.scrollEvent) {
state.scrollEvent.remove();
}
(handleScroll as any).cancel();
};

watch(
() => props.target,
() => {
scrollRemove();
nextTick(() => {
bindScrollEvent();
});
},
);

onMounted(() => {
nextTick(() => {
const getTarget = props.target || getDefaultTarget;
state.scrollEvent = addEventListener(getTarget(), 'scroll', handleScroll);
handleScroll();
bindScrollEvent();
});
});

onActivated(() => {
nextTick(() => {
handleScroll();
bindScrollEvent();
});
});

onDeactivated(() => {
scrollRemove();
});

onBeforeUnmount(() => {
if (state.scrollEvent) {
state.scrollEvent.remove();
}
scrollRemove();
});

return () => {
const { prefixCls: customizePrefixCls } = props;
const prefixCls = computed(() => configProvider.getPrefixCls('back-top', props.prefixCls));

const getPrefixCls = configProvider.getPrefixCls;
const prefixCls = getPrefixCls('back-top', customizePrefixCls);
const classString = classNames(prefixCls, attrs.class);
return () => {
const defaultElement = (
<div class={`${prefixCls}-content`}>
<div class={`${prefixCls}-icon`} />
<div class={`${prefixCls.value}-content`}>
<div class={`${prefixCls.value}-icon`}>
<VerticalAlignTopOutlined />
</div>
</div>
);
const divProps = {
...attrs,
onClick: scrollToTop,
class: classString,
class: {
[`${prefixCls.value}`]: true,
[`${attrs.class}`]: attrs.class,
[`${prefixCls}-rtl`]: configProvider.direction === 'rtl',
},
};

const backTopBtn = state.visible ? (
<div {...divProps}>{slots.default?.() || defaultElement}</div>
<div {...divProps} ref={domRef}>
{slots.default?.() || defaultElement}
</div>
) : null;
const transitionProps = getTransitionProps('fade');
return <Transition {...transitionProps}>{backTopBtn}</Transition>;
17 changes: 10 additions & 7 deletions components/back-top/style/index.less
Original file line number Diff line number Diff line change
@@ -18,6 +18,12 @@
display: none;
}

&-rtl {
right: auto;
left: 100px;
direction: rtl;
}

&-content {
width: 40px;
height: 40px;
@@ -26,20 +32,17 @@
text-align: center;
background-color: @back-top-bg;
border-radius: 20px;
transition: all 0.3s @ease-in-out;
transition: all 0.3s;

&:hover {
background-color: @back-top-hover-bg;
transition: all 0.3s @ease-in-out;
transition: all 0.3s;
}
}

&-icon {
width: 14px;
height: 16px;
margin: 12px auto;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAoCAYAAACWwljjAAAABGdBTUEAALGPC/xhBQAAAbtJREFUWAntmMtKw0AUhhMvS5cuxILgQlRUpIggIoKIIoigG1eC+AA+jo+i6FIXBfeuXIgoeKVeitVWJX5HWhhDksnUpp3FDPyZk3Nm5nycmZKkXhAEOXSA3lG7muTeRzmfy6HneUvIhnYkQK+Q9NhAA0Opg0vBEhjBKHiyb8iGMyQMOYuK41BcBSypAL+MYXSKjtFAW7EAGEO3qN4uMQbbAkXiSfRQJ1H6a+yhlkKRcAoVFYiweYNjtCVQJJpBz2GCiPt7fBOZQpFgDpUikse5HgnkM4Fi4QX0Fpc5wf9EbLqpUCy4jMoJSXWhFwbMNgWKhVbRhy5jirhs9fy/oFhgHVVTJEs7RLZ8sSEoJm6iz7SZDMbJ+/OKERQTttCXQRLToRUmrKWCYuA2+jbN0MB4OQobYShfdTCgn/sL1K36M7TLrN3n+758aPy2rrpR6+/od5E8tf/A1uLS9aId5T7J3CNYihkQ4D9PiMdMC7mp4rjB9kjFjZp8BlnVHJBuO1yFXIV0FdDF3RlyFdJVQBdv5AxVdIsq8apiZ2PyYO1EVykesGfZEESsCkweyR8MUW+V8uJ1gkYipmpdP1pm2aJVPEGzAAAAAElFTkSuQmCC)
~'100%/100%' no-repeat;
font-size: 24px;
line-height: 40px;
}
}