2016-09-18 10:12:21 +08:00
|
|
|
import React from 'react';
|
|
|
|
import ReactDOM from 'react-dom';
|
2015-08-21 17:12:42 +08:00
|
|
|
import Animate from 'rc-animate';
|
2016-01-27 01:47:12 +08:00
|
|
|
import classNames from 'classnames';
|
2016-09-10 17:17:55 +08:00
|
|
|
import omit from 'omit.js';
|
2016-10-31 17:58:12 +08:00
|
|
|
import Icon from '../icon';
|
2016-11-10 11:14:03 +08:00
|
|
|
import CheckableTag from './CheckableTag';
|
2015-08-21 17:12:42 +08:00
|
|
|
|
2017-09-25 22:14:49 +08:00
|
|
|
export { CheckableTagProps } from './CheckableTag';
|
|
|
|
|
2016-07-09 10:52:16 +08:00
|
|
|
export interface TagProps {
|
2016-12-19 15:19:15 +08:00
|
|
|
prefixCls?: string;
|
|
|
|
className?: string;
|
2016-11-10 10:29:06 +08:00
|
|
|
color?: string;
|
2016-07-13 11:14:24 +08:00
|
|
|
/** 标签是否可以关闭 */
|
|
|
|
closable?: boolean;
|
|
|
|
/** 关闭时的回调 */
|
|
|
|
onClose?: Function;
|
|
|
|
/** 动画关闭后的回调 */
|
|
|
|
afterClose?: Function;
|
|
|
|
style?: React.CSSProperties;
|
2016-07-09 10:52:16 +08:00
|
|
|
}
|
2016-07-13 11:14:24 +08:00
|
|
|
|
2017-07-31 00:42:25 +08:00
|
|
|
export interface TagState {
|
|
|
|
closing: boolean;
|
|
|
|
closed: boolean;
|
|
|
|
}
|
|
|
|
|
|
|
|
export default class Tag extends React.Component<TagProps, TagState> {
|
2016-11-10 11:14:03 +08:00
|
|
|
static CheckableTag = CheckableTag;
|
2016-03-29 14:01:10 +08:00
|
|
|
static defaultProps = {
|
|
|
|
prefixCls: 'ant-tag',
|
|
|
|
closable: false,
|
2016-07-13 11:14:24 +08:00
|
|
|
};
|
2016-03-29 14:01:10 +08:00
|
|
|
|
2016-11-10 10:29:06 +08:00
|
|
|
constructor(props: TagProps) {
|
2015-07-30 23:52:44 +08:00
|
|
|
super(props);
|
|
|
|
|
|
|
|
this.state = {
|
2015-08-21 17:27:29 +08:00
|
|
|
closing: false,
|
2016-01-26 23:40:20 +08:00
|
|
|
closed: false,
|
2015-07-30 23:52:44 +08:00
|
|
|
};
|
|
|
|
}
|
2015-08-20 11:46:02 +08:00
|
|
|
|
2017-07-31 00:42:25 +08:00
|
|
|
close = (e: React.MouseEvent<HTMLElement>) => {
|
2016-10-24 16:30:38 +08:00
|
|
|
const onClose = this.props.onClose;
|
|
|
|
if (onClose) {
|
|
|
|
onClose(e);
|
|
|
|
}
|
2016-07-13 11:14:24 +08:00
|
|
|
if (e.defaultPrevented) {
|
|
|
|
return;
|
|
|
|
}
|
2016-08-24 16:09:55 +08:00
|
|
|
const dom = ReactDOM.findDOMNode(this) as HTMLElement;
|
2016-06-28 16:16:27 +08:00
|
|
|
dom.style.width = `${dom.getBoundingClientRect().width}px`;
|
2015-08-20 13:56:08 +08:00
|
|
|
// It's Magic Code, don't know why
|
2016-06-28 16:16:27 +08:00
|
|
|
dom.style.width = `${dom.getBoundingClientRect().width}px`;
|
2015-07-30 23:52:44 +08:00
|
|
|
this.setState({
|
2016-01-26 23:40:20 +08:00
|
|
|
closing: true,
|
2015-07-30 23:52:44 +08:00
|
|
|
});
|
2015-07-28 17:08:06 +08:00
|
|
|
}
|
2015-08-21 17:27:29 +08:00
|
|
|
|
2017-07-31 00:42:25 +08:00
|
|
|
animationEnd = (_: string, existed: boolean) => {
|
2016-04-16 20:24:50 +08:00
|
|
|
if (!existed && !this.state.closed) {
|
2016-01-27 01:20:05 +08:00
|
|
|
this.setState({
|
|
|
|
closed: true,
|
|
|
|
closing: false,
|
|
|
|
});
|
2016-10-24 16:30:38 +08:00
|
|
|
|
|
|
|
const afterClose = this.props.afterClose;
|
|
|
|
if (afterClose) {
|
|
|
|
afterClose();
|
|
|
|
}
|
2016-01-27 01:20:05 +08:00
|
|
|
}
|
2015-08-21 17:12:42 +08:00
|
|
|
}
|
2015-08-19 17:26:55 +08:00
|
|
|
|
2017-07-31 00:42:25 +08:00
|
|
|
isPresetColor(color?: string): boolean {
|
|
|
|
if (!color) { return false; }
|
2017-01-13 21:25:55 +08:00
|
|
|
return /^(pink|red|yellow|orange|cyan|green|blue|purple)(-inverse)?$/.test(color);
|
|
|
|
}
|
|
|
|
|
2015-07-28 17:08:06 +08:00
|
|
|
render() {
|
2016-12-20 10:23:25 +08:00
|
|
|
const { prefixCls, closable, color, className, children, style, ...otherProps } = this.props;
|
2016-07-09 16:15:08 +08:00
|
|
|
const closeIcon = closable ? <Icon type="cross" onClick={this.close} /> : '';
|
2017-01-13 21:25:55 +08:00
|
|
|
const isPresetColor = this.isPresetColor(color);
|
2016-11-30 10:20:23 +08:00
|
|
|
const classString = classNames(prefixCls, {
|
2017-01-13 21:25:55 +08:00
|
|
|
[`${prefixCls}-${color}`]: isPresetColor,
|
|
|
|
[`${prefixCls}-has-color`]: (color && !isPresetColor),
|
2016-02-17 18:04:42 +08:00
|
|
|
[`${prefixCls}-close`]: this.state.closing,
|
2016-11-30 10:20:23 +08:00
|
|
|
}, className);
|
2016-07-08 10:23:20 +08:00
|
|
|
// fix https://fb.me/react-unknown-prop
|
|
|
|
const divProps = omit(otherProps, [
|
|
|
|
'onClose',
|
|
|
|
'afterClose',
|
|
|
|
]);
|
2017-07-03 16:57:11 +08:00
|
|
|
const tagStyle = {
|
2017-01-13 21:25:55 +08:00
|
|
|
backgroundColor: (color && !isPresetColor) ? color : null,
|
2017-07-03 16:57:11 +08:00
|
|
|
...style,
|
|
|
|
};
|
2016-11-25 12:03:39 +08:00
|
|
|
const tag = this.state.closed ? null : (
|
|
|
|
<div
|
|
|
|
data-show={!this.state.closing}
|
|
|
|
{...divProps}
|
|
|
|
className={classString}
|
|
|
|
style={tagStyle}
|
|
|
|
>
|
|
|
|
<span className={`${prefixCls}-text`}>{children}</span>
|
|
|
|
{closeIcon}
|
|
|
|
</div>
|
|
|
|
);
|
2016-01-27 01:51:54 +08:00
|
|
|
return (
|
2016-11-09 17:10:05 +08:00
|
|
|
<Animate
|
|
|
|
component=""
|
2016-01-27 14:48:25 +08:00
|
|
|
showProp="data-show"
|
2016-02-17 18:04:42 +08:00
|
|
|
transitionName={`${prefixCls}-zoom`}
|
2017-05-31 15:48:11 +08:00
|
|
|
transitionAppear
|
2016-06-06 13:54:10 +08:00
|
|
|
onEnd={this.animationEnd}
|
2016-11-09 17:10:05 +08:00
|
|
|
>
|
2016-11-25 12:03:39 +08:00
|
|
|
{tag}
|
2016-01-26 23:40:20 +08:00
|
|
|
</Animate>
|
|
|
|
);
|
2015-07-28 17:08:06 +08:00
|
|
|
}
|
|
|
|
}
|