ant-design-vue/components/tag/index.tsx

152 lines
3.8 KiB
TypeScript
Raw Normal View History

2020-10-24 01:53:25 +00:00
import {
inject,
ref,
HTMLAttributes,
defineComponent,
App,
watchEffect,
PropType,
ExtractPropTypes,
} from 'vue';
2020-09-23 09:51:02 +00:00
import classNames from '../_util/classNames';
2020-10-04 14:08:12 +00:00
import PropTypes from '../_util/vue-types';
2020-08-23 11:33:01 +00:00
import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
import Wave from '../_util/wave';
import {
PresetColorTypes,
PresetStatusColorTypes,
PresetColorType,
PresetStatusColorType,
} from '../_util/colors';
2020-09-23 09:51:02 +00:00
import { LiteralUnion } from '../_util/type';
import { defaultConfigProvider } from '../config-provider';
2020-08-23 11:33:01 +00:00
import CheckableTag from './CheckableTag';
const PresetColorRegex = new RegExp(`^(${PresetColorTypes.join('|')})(-inverse)?$`);
const PresetStatusColorRegex = new RegExp(`^(${PresetStatusColorTypes.join('|')})$`);
2020-10-24 01:53:25 +00:00
const tagProps = {
prefixCls: PropTypes.string,
color: {
type: String as PropType<LiteralUnion<PresetColorType | PresetStatusColorType, string>>,
},
closable: PropTypes.looseBool.def(false),
closeIcon: PropTypes.VNodeChild,
visible: PropTypes.looseBool,
onClose: {
type: Function as PropType<(e: MouseEvent) => void>,
},
icon: PropTypes.VNodeChild,
};
export type TagProps = HTMLAttributes & Partial<ExtractPropTypes<typeof tagProps>>;
2020-08-23 11:33:01 +00:00
const Tag = defineComponent({
2020-10-01 15:01:31 +00:00
name: 'ATag',
2020-10-04 14:08:12 +00:00
emits: ['update:visible', 'close'],
setup(props: TagProps, { slots, emit, attrs }) {
const { getPrefixCls } = inject('configProvider', defaultConfigProvider);
2020-08-23 11:33:01 +00:00
const visible = ref(true);
2020-10-04 14:08:12 +00:00
watchEffect(() => {
if (props.visible !== undefined) {
visible.value = props.visible!;
}
});
const handleCloseClick = (e: MouseEvent) => {
e.stopPropagation();
emit('update:visible', false);
emit('close', e);
if (e.defaultPrevented) {
return;
}
if (props.visible === undefined) {
visible.value = false;
}
};
const isPresetColor = (): boolean => {
const { color } = props;
if (!color) {
return false;
}
return PresetColorRegex.test(color) || PresetStatusColorRegex.test(color);
};
2020-09-23 09:51:02 +00:00
2020-08-23 11:33:01 +00:00
return () => {
const {
prefixCls: customizePrefixCls,
icon,
color,
2020-10-04 14:08:12 +00:00
closeIcon = slots.closeIcon?.(),
2020-08-23 11:33:01 +00:00
closable = false,
2020-09-23 09:51:02 +00:00
} = props;
2020-08-23 11:33:01 +00:00
const presetColor = isPresetColor();
const prefixCls = getPrefixCls('tag', customizePrefixCls);
const renderCloseIcon = () => {
if (closable) {
return closeIcon ? (
<div class={`${prefixCls}-close-icon`} onClick={handleCloseClick}>
{closeIcon}
</div>
) : (
<CloseOutlined class={`${prefixCls}-close-icon`} onClick={handleCloseClick} />
);
}
return null;
};
const tagStyle = {
backgroundColor: color && !isPresetColor() ? color : undefined,
};
2020-10-04 14:08:12 +00:00
const tagClassName = classNames(prefixCls, {
[`${prefixCls}-${color}`]: presetColor,
[`${prefixCls}-has-color`]: color && !presetColor,
[`${prefixCls}-hidden`]: !visible.value,
});
2020-08-23 11:33:01 +00:00
const iconNode = icon || null;
const children = slots.default?.();
const kids = iconNode ? (
<>
{iconNode}
<span>{children}</span>
</>
) : (
children
);
2020-10-04 14:08:12 +00:00
const isNeedWave = 'onClick' in attrs;
2020-08-23 11:33:01 +00:00
const tagNode = (
2020-10-24 01:53:25 +00:00
<span class={tagClassName} style={tagStyle}>
2020-08-23 11:33:01 +00:00
{kids}
{renderCloseIcon()}
</span>
);
return isNeedWave ? <Wave>{tagNode}</Wave> : tagNode;
};
},
});
2020-10-24 01:53:25 +00:00
Tag.props = tagProps;
2020-10-04 14:08:12 +00:00
2020-08-23 11:33:01 +00:00
Tag.CheckableTag = CheckableTag;
2020-10-24 01:53:25 +00:00
Tag.install = function(app: App) {
2020-08-23 11:33:01 +00:00
app.component(Tag.name, Tag);
app.component(CheckableTag.name, CheckableTag);
2020-10-13 11:14:56 +00:00
return app;
2020-08-23 11:33:01 +00:00
};
2020-10-24 01:53:25 +00:00
export default Tag as typeof Tag & {
readonly CheckableTag: typeof CheckableTag;
};