feat: update back-top && badge
wangxueliang
parent
3eb046f10a
commit
40ddc851bc
|
|
@ -4,6 +4,7 @@ import addEventListener from '../_util/Dom/addEventListener';
|
|||
import getScroll from '../_util/getScroll';
|
||||
import BaseMixin from '../_util/BaseMixin';
|
||||
import getTransitionProps from '../_util/getTransitionProps';
|
||||
import { ConfigConsumerProps } from '../config-provider';
|
||||
|
||||
const easeInOutCubic = (t, b, c, d) => {
|
||||
const cc = c - b;
|
||||
|
|
@ -24,6 +25,7 @@ const BackTopProps = {
|
|||
// onClick?: React.MouseEventHandler<any>;
|
||||
target: PropTypes.func,
|
||||
prefixCls: PropTypes.string,
|
||||
// visible: PropTypes.bool, // Only for test. Don't use it.
|
||||
};
|
||||
|
||||
const BackTop = {
|
||||
|
|
@ -33,13 +35,15 @@ const BackTop = {
|
|||
...BackTopProps,
|
||||
visibilityHeight: PropTypes.number.def(400),
|
||||
},
|
||||
inject: {
|
||||
configProvider: { default: () => ({}) },
|
||||
},
|
||||
data() {
|
||||
this.scrollEvent = null;
|
||||
return {
|
||||
visible: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
const getTarget = this.target || getDefaultTarget;
|
||||
|
|
@ -101,7 +105,10 @@ const BackTop = {
|
|||
},
|
||||
|
||||
render() {
|
||||
const { prefixCls = 'ant-back-top', $slots, $listeners } = this;
|
||||
const { prefixCls: customizePrefixCls, $slots, $listeners } = this;
|
||||
|
||||
const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
|
||||
const prefixCls = getPrefixCls('back-top', customizePrefixCls);
|
||||
|
||||
const defaultElement = (
|
||||
<div class={`${prefixCls}-content`}>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import { initDefaultProps, filterEmpty, getComponentFromProp } from '../_util/pr
|
|||
import { cloneElement } from '../_util/vnode';
|
||||
import getTransitionProps from '../_util/getTransitionProps';
|
||||
import isNumeric from '../_util/isNumeric';
|
||||
import { ConfigConsumerProps } from '../config-provider';
|
||||
|
||||
export const BadgeProps = {
|
||||
/** Number to show in badge */
|
||||
|
|
@ -26,15 +27,16 @@ export const BadgeProps = {
|
|||
export default {
|
||||
name: 'ABadge',
|
||||
props: initDefaultProps(BadgeProps, {
|
||||
prefixCls: 'ant-badge',
|
||||
scrollNumberPrefixCls: 'ant-scroll-number',
|
||||
showZero: false,
|
||||
dot: false,
|
||||
overflowCount: 99,
|
||||
}),
|
||||
inject: {
|
||||
configProvider: { default: () => ({}) },
|
||||
},
|
||||
methods: {
|
||||
getBadgeClassName() {
|
||||
const { prefixCls, status } = this.$props;
|
||||
getBadgeClassName(prefixCls) {
|
||||
const { status } = this.$props;
|
||||
const children = filterEmpty(this.$slots.default);
|
||||
return classNames(prefixCls, {
|
||||
[`${prefixCls}-status`]: !!status,
|
||||
|
|
@ -78,7 +80,7 @@ export default {
|
|||
return this.getNumberedDispayCount();
|
||||
},
|
||||
|
||||
getScollNumberTitle() {
|
||||
getScrollNumberTitle() {
|
||||
const { title } = this.$props;
|
||||
const count = this.badgeCount;
|
||||
if (title) {
|
||||
|
|
@ -98,8 +100,8 @@ export default {
|
|||
: numberStyle;
|
||||
},
|
||||
|
||||
renderStatusText() {
|
||||
const { prefixCls, text } = this.$props;
|
||||
renderStatusText(prefixCls) {
|
||||
const { text } = this.$props;
|
||||
const hidden = this.isHidden();
|
||||
return hidden || !text ? null : <span class={`${prefixCls}-status-text`}>{text}</span>;
|
||||
},
|
||||
|
|
@ -115,8 +117,8 @@ export default {
|
|||
});
|
||||
},
|
||||
|
||||
renderBadgeNumber() {
|
||||
const { prefixCls, scrollNumberPrefixCls, status } = this.$props;
|
||||
renderBadgeNumber(prefixCls, scrollNumberPrefixCls) {
|
||||
const { status } = this.$props;
|
||||
const count = this.badgeCount;
|
||||
const displayCount = this.getDispayCount();
|
||||
const isDot = this.isDot();
|
||||
|
|
@ -138,7 +140,7 @@ export default {
|
|||
className={scrollNumberCls}
|
||||
count={displayCount}
|
||||
displayComponent={this.renderDispayComponent()} // <Badge status="success" count={<Icon type="xxx" />}></Badge>
|
||||
title={this.getScollNumberTitle()}
|
||||
title={this.getScrollNumberTitle()}
|
||||
style={this.getStyleWithOffset()}
|
||||
key="scrollNumber"
|
||||
/>
|
||||
|
|
@ -147,15 +149,26 @@ export default {
|
|||
},
|
||||
|
||||
render() {
|
||||
const { prefixCls, status, text, $slots } = this;
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
scrollNumberPrefixCls: customizeScrollNumberPrefixCls,
|
||||
status,
|
||||
text,
|
||||
$slots,
|
||||
} = this;
|
||||
|
||||
const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
|
||||
const prefixCls = getPrefixCls('badge', customizePrefixCls);
|
||||
const scrollNumberPrefixCls = getPrefixCls('scroll-number', customizeScrollNumberPrefixCls);
|
||||
|
||||
const children = filterEmpty($slots.default);
|
||||
let count = getComponentFromProp(this, 'count');
|
||||
if (Array.isArray(count)) {
|
||||
count = count[0];
|
||||
}
|
||||
this.badgeCount = count;
|
||||
const scrollNumber = this.renderBadgeNumber();
|
||||
const statusText = this.renderStatusText();
|
||||
const scrollNumber = this.renderBadgeNumber(prefixCls, scrollNumberPrefixCls);
|
||||
const statusText = this.renderStatusText(prefixCls);
|
||||
const statusCls = classNames({
|
||||
[`${prefixCls}-status-dot`]: !!status,
|
||||
[`${prefixCls}-status-${status}`]: !!status,
|
||||
|
|
@ -166,7 +179,7 @@ export default {
|
|||
return (
|
||||
<span
|
||||
{...{ on: this.$listeners }}
|
||||
class={this.getBadgeClassName()}
|
||||
class={this.getBadgeClassName(prefixCls)}
|
||||
style={this.getStyleWithOffset()}
|
||||
>
|
||||
<span class={statusCls} />
|
||||
|
|
@ -178,7 +191,7 @@ export default {
|
|||
const transitionProps = getTransitionProps(children.length ? `${prefixCls}-zoom` : '');
|
||||
|
||||
return (
|
||||
<span {...{ on: this.$listeners }} class={this.getBadgeClassName()}>
|
||||
<span {...{ on: this.$listeners }} class={this.getBadgeClassName(prefixCls)}>
|
||||
{children}
|
||||
<transition {...transitionProps}>{scrollNumber}</transition>
|
||||
{statusText}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import BaseMixin from '../_util/BaseMixin';
|
|||
import { getStyle } from '../_util/props-util';
|
||||
import omit from 'omit.js';
|
||||
import { cloneElement } from '../_util/vnode';
|
||||
import { ConfigConsumerProps } from '../config-provider';
|
||||
|
||||
function getNumberArray(num) {
|
||||
return num
|
||||
|
|
@ -16,7 +17,7 @@ function getNumberArray(num) {
|
|||
}
|
||||
|
||||
const ScrollNumberProps = {
|
||||
prefixCls: PropTypes.string.def('ant-scroll-number'),
|
||||
prefixCls: PropTypes.string,
|
||||
count: PropTypes.any,
|
||||
component: PropTypes.string,
|
||||
title: PropTypes.oneOfType([PropTypes.number, PropTypes.string, null]),
|
||||
|
|
@ -27,6 +28,9 @@ const ScrollNumberProps = {
|
|||
export default {
|
||||
mixins: [BaseMixin],
|
||||
props: ScrollNumberProps,
|
||||
inject: {
|
||||
configProvider: { default: () => ({}) },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
animateStarted: true,
|
||||
|
|
@ -93,7 +97,7 @@ export default {
|
|||
return childrenToReturn;
|
||||
},
|
||||
|
||||
renderCurrentNumber(num, i) {
|
||||
renderCurrentNumber(prefixCls, num, i) {
|
||||
const position = this.getPositionByNum(num, i);
|
||||
const removeTransition =
|
||||
this.animateStarted || getNumberArray(this.lastCount)[i] === undefined;
|
||||
|
|
@ -104,25 +108,33 @@ export default {
|
|||
transform: `translateY(${-position * 100}%)`,
|
||||
};
|
||||
return (
|
||||
<span class={`${this.prefixCls}-only`} style={style} key={i}>
|
||||
<span class={`${prefixCls}-only`} style={style} key={i}>
|
||||
{this.renderNumberList(position)}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
|
||||
renderNumberElement() {
|
||||
renderNumberElement(prefixCls) {
|
||||
const { sCount } = this;
|
||||
if (!sCount || isNaN(sCount)) {
|
||||
return sCount;
|
||||
}
|
||||
return getNumberArray(sCount)
|
||||
.map((num, i) => this.renderCurrentNumber(num, i))
|
||||
if (sCount && Number(sCount) % 1 === 0) {
|
||||
return getNumberArray(sCount)
|
||||
.map((num, i) => this.renderCurrentNumber(prefixCls, num, i))
|
||||
.reverse();
|
||||
}
|
||||
return sCount;
|
||||
},
|
||||
},
|
||||
|
||||
render() {
|
||||
const { prefixCls, title, component: Tag = 'sup', displayComponent, className } = this;
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
title,
|
||||
component: Tag = 'sup',
|
||||
displayComponent,
|
||||
className,
|
||||
} = this;
|
||||
const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
|
||||
const prefixCls = getPrefixCls('scroll-number', customizePrefixCls);
|
||||
if (displayComponent) {
|
||||
return cloneElement(displayComponent, {
|
||||
class: `${prefixCls}-custom-component`,
|
||||
|
|
@ -148,6 +160,6 @@ export default {
|
|||
newProps.style.boxShadow = `0 0 0 1px ${style.borderColor} inset`;
|
||||
}
|
||||
|
||||
return <Tag {...newProps}>{this.renderNumberElement()}</Tag>;
|
||||
return <Tag {...newProps}>{this.renderNumberElement(prefixCls)}</Tag>;
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Badge badge should support float number 1`] = `"3.5"`;
|
||||
|
||||
exports[`Badge badge should support float number 2`] = `<span class="ant-badge ant-badge-not-a-wrapper"><sup title="3.5" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" data-show="true">3.5</sup></span>`;
|
||||
|
||||
exports[`Badge should be compatible with borderColor style 1`] = `<span class="ant-badge ant-badge-not-a-wrapper" style="background-color: rgb(255, 255, 255); color: rgb(153, 153, 153); border-color: #d9d9d9;"><sup title="4" class="ant-scroll-number ant-badge-count" data-show="true"><span class="ant-scroll-number-only" style="transition: none; transform: translateY(-1400%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="current">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span>`;
|
||||
|
||||
exports[`Badge should render when count is changed 1`] = `<span class="ant-badge ant-badge-not-a-wrapper"><sup title="10" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" data-show="true"><span class="ant-scroll-number-only" style="transition: none; transform: translateY(-2100%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="current">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span><span class="ant-scroll-number-only" style="transform: translateY(-2000%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="current">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span>`;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { mount } from '@vue/test-utils';
|
||||
import { render } from '@vue/server-test-utils';
|
||||
import Badge from '../index';
|
||||
|
||||
import { asyncExpect } from '@/tests/utils';
|
||||
|
|
@ -11,6 +12,20 @@ describe('Badge', () => {
|
|||
});
|
||||
expect(badge.findAll('.ant-card-multiple-words').length).toBe(0);
|
||||
});
|
||||
it('badge should support float number', () => {
|
||||
let wrapper = render({
|
||||
render() {
|
||||
return <Badge count={3.5} />;
|
||||
},
|
||||
});
|
||||
expect(wrapper.text()).toMatchSnapshot();
|
||||
wrapper = mount({
|
||||
render() {
|
||||
return <Badge count={3.5} />;
|
||||
},
|
||||
});
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
it('badge dot not showing count == 0', () => {
|
||||
const badge = mount({
|
||||
render() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue