github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: icon to normal component #1947

pull/1965/head
tanjinzhou 2020-03-26 17:25:10 +08:00
parent ff9f408879
commit e249b085d2
1 changed files with 7 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
components/icon/index.js
View File

@ -13,7 +13,7 @@ import {
import warning from '../_util/warning'; import warning from '../_util/warning';
import LocaleReceiver from '../locale-provider/LocaleReceiver'; import LocaleReceiver from '../locale-provider/LocaleReceiver';
import { getTwoToneColor, setTwoToneColor } from './twoTonePrimaryColor'; import { getTwoToneColor, setTwoToneColor } from './twoTonePrimaryColor';
import { filterEmpty, getClass } from '../_util/props-util'; import { filterEmpty, getListeners } from '../_util/props-util';
import Base from '../base'; import Base from '../base';
// Initial setting // Initial setting
@ -23,7 +23,8 @@ const defaultTheme = 'outlined';
let dangerousTheme; let dangerousTheme;
function renderIcon(h, locale, context) { function renderIcon(h, locale, context) {
const { props, slots, listeners, data } = context; const { $props: props, $slots } = context;
const listeners = getListeners(context);
const { const {
// affect inner <svg>...</svg> // affect inner <svg>...</svg>
type, type,
@ -36,8 +37,7 @@ function renderIcon(h, locale, context) {
rotate, rotate,
tabIndex, tabIndex,
} = props; } = props;
const slotsMap = slots(); let children = filterEmpty($slots.default);
let children = filterEmpty(slotsMap.default);
children = children.length === 0 ? undefined : children; children = children.length === 0 ? undefined : children;
warning( warning(
Boolean(type || Component || children), Boolean(type || Component || children),
@ -46,7 +46,6 @@ function renderIcon(h, locale, context) {
); );
const classString = classNames({ const classString = classNames({
...getClass(context),
[`anticon`]: true, [`anticon`]: true,
[`anticon-${type}`]: !!type, [`anticon-${type}`]: !!type,
}); });
@ -131,16 +130,13 @@ function renderIcon(h, locale, context) {
if (iconTabIndex === undefined && 'click' in listeners) { if (iconTabIndex === undefined && 'click' in listeners) {
iconTabIndex = -1; iconTabIndex = -1;
} }
const { attrs, ...restDataProps } = data;
// functional component not support nativeOn，https://github.com/vuejs/vue/issues/7526 // functional component not support nativeOn，https://github.com/vuejs/vue/issues/7526
const iProps = { const iProps = {
...restDataProps,
attrs: { attrs: {
...attrs,
'aria-label': type && `${locale.icon}: ${type}`, 'aria-label': type && `${locale.icon}: ${type}`,
tabIndex: iconTabIndex, tabIndex: iconTabIndex,
}, },
on: { ...listeners, ...data.nativeOn }, on: listeners,
class: classString, class: classString,
staticClass: '', staticClass: '',
}; };
@ -148,7 +144,6 @@ function renderIcon(h, locale, context) {
} }
const Icon = { const Icon = {
functional: true,
name: 'AIcon', name: 'AIcon',
props: { props: {
tabIndex: PropTypes.number, tabIndex: PropTypes.number,
@ -161,11 +156,11 @@ const Icon = {
twoToneColor: PropTypes.string, twoToneColor: PropTypes.string,
role: PropTypes.string, role: PropTypes.string,
}, },
render(h, context) { render(h) {
return ( return (
<LocaleReceiver <LocaleReceiver
componentName="Icon" componentName="Icon"
scopedSlots={{ default: locale => renderIcon(h, locale, context) }} scopedSlots={{ default: locale => renderIcon(h, locale, this) }}
/> />
); );
}, },