Skip to content

feat: update Badge #2419

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.

Sign up for GitHub

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

Merged
merged 2 commits into from
Jul 7, 2020
Merged

feat: update Badge #2419

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1a3e53c
feat: update Badge
liulinboyi Jun 12, 2020
9fa6fa8
Merge branch 'feat-vue3' into feat-Badge
tangjinzhou Jul 7, 2020
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
6 changes: 3 additions & 3 deletions components/_util/props-util.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import isPlainObject from 'lodash/isPlainObject';
import classNames from 'classnames';
import { isVNode, Fragment, Comment, Text } from 'vue';
import { isVNode, Fragment, Comment, Text, h } from 'vue';
import { camelize, hyphenate, isOn, resolvePropValue } from './util';
import isValid from './isValid';
// function getType(fn) {
Expand Down Expand Up @@ -187,7 +187,7 @@ const getComponent = (instance, prop = 'default', options = instance, execute =
};
const getComponentFromProp = (instance, prop, options = instance, execute = true) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

首先感谢 pr，但期望能够做一些基本的测试 这个方法已经不使用了
使用 getComponent 替换
另外麻烦同步修改下相应单测
npm test -- /components/badge/tests/index.test.js -- watch

Copy link
Contributor Author

@liulinboyi liulinboyi Jun 19, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

首先感谢 pr，但期望能够做一些基本的测试 这个方法已经不使用了
使用 getComponent 替换
另外麻烦同步修改下相应单测
npm test -- /components/badge/tests/index.test.js -- watch

好的，没问题。

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

首先感谢 pr，但期望能够做一些基本的测试 这个方法已经不使用了
使用 getComponent 替换
另外麻烦同步修改下相应单测
npm test -- /components/badge/tests/index.test.js -- watch

在写测试时，@vue/server-test-utils这个包没有Vue3的版本

import { render } from '@vue/server-test-utils';

image
提示版本不匹配

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

改成 mount

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

改成 mount

好的，我试一下。

import { mount } from '@vue/test-utils';
import Badge from '../index';
  it('badge dot not scaling count > 9', () => {
    const badge = {
      components: {Badge},
      template: '<Badge count="10" dot />',
    }
    const wrapper = mount(badge)
    expect(wrapper.findAll('.ant-card-multiple-words').length).toBe(0);
  });

"@vue/test-utils": "^2.0.0-alpha.6"

@tangjinzhou 是这样吗？谢谢！

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

如果能跑过就可以

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

如果能跑过就可以

好的。

if (instance.$createElement) {
const h = instance.$createElement;
// const h = instance.$createElement;
const temp = instance[prop];
if (temp !== undefined) {
return typeof temp === 'function' && execute ? temp(h, options) : temp;
Expand All @@ -199,7 +199,7 @@ const getComponentFromProp = (instance, prop, options = instance, execute = true
undefined
);
} else {
const h = instance.context.$createElement;
// const h = instance.context.$createElement;
const temp = getPropsData(instance)[prop];
if (temp !== undefined) {
return typeof temp === 'function' && execute ? temp(h, options) : temp;
Expand Down
11 changes: 7 additions & 4 deletions components/badge/Badge.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { cloneElement } from '../_util/vnode';
import getTransitionProps from '../_util/getTransitionProps';
import isNumeric from '../_util/isNumeric';
import { ConfigConsumerProps } from '../config-provider';
import { inject } from 'vue';

const BadgeProps = {
/** Number to show in badge */
Expand Down Expand Up @@ -40,8 +41,10 @@ export default {
dot: false,
overflowCount: 99,
}),
inject: {
configProvider: { default: () => ConfigConsumerProps },
setup() {
return {
configProvider: inject('configProvider', ConfigConsumerProps),
};
},
methods: {
getNumberedDispayCount() {
Expand Down Expand Up @@ -80,7 +83,7 @@ export default {
: { ...numberStyle };
},
getBadgeClassName(prefixCls) {
const children = filterEmpty(this.$slots.default);
const children = filterEmpty(this.$slots.default && this.$slots.default());
const hasStatus = this.hasStatus();
return classNames(prefixCls, {
[`${prefixCls}-status`]: hasStatus,
Expand Down Expand Up @@ -181,7 +184,7 @@ export default {
const prefixCls = getPrefixCls('badge', customizePrefixCls);
const scrollNumberPrefixCls = getPrefixCls('scroll-number', customizeScrollNumberPrefixCls);

const children = filterEmpty($slots.default);
const children = filterEmpty($slots.default && $slots.default());
let count = getComponentFromProp(this, 'count');
if (Array.isArray(count)) {
count = count[0];
Expand Down
7 changes: 5 additions & 2 deletions components/badge/ScrollNumber.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { getStyle } from '../_util/props-util';
import omit from 'omit.js';
import { cloneElement } from '../_util/vnode';
import { ConfigConsumerProps } from '../config-provider';
import { inject } from 'vue';

function getNumberArray(num) {
return num
Expand All @@ -31,8 +32,10 @@ const ScrollNumberProps = {
export default {
mixins: [BaseMixin],
props: ScrollNumberProps,
inject: {
configProvider: { default: () => ConfigConsumerProps },
setup() {
return {
configProvider: inject('configProvider', ConfigConsumerProps),
};
},
data() {
return {
Expand Down
6 changes: 2 additions & 4 deletions components/badge/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import Badge from './Badge';
import Base from '../base';

/* istanbul ignore next */
Badge.install = function(Vue) {
Vue.use(Base);
Vue.component(Badge.name, Badge);
Badge.install = function(app) {
app.component(Badge.name, Badge);
};

export default Badge;
3 changes: 3 additions & 0 deletions examples/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import '@babel/polyfill';
import { createApp } from 'vue';
import App from './App.vue';
import {
Badge,
AutoComplete,
Radio,
Spin,
Expand All @@ -23,6 +24,7 @@ import {
notification,
message,
} from 'ant-design-vue';

import 'ant-design-vue/style.js';

const basic = {
Expand Down Expand Up @@ -51,6 +53,7 @@ app
.use(Tooltip)
.use(Col)
.use(Row)
.use(Badge)
.use(Radio)
.use(Switch)
.use(Checkbox)
Expand Down