ant-design/components/tag/index.tsx

109 lines
2.7 KiB
TypeScript
Raw Normal View History

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';
import omit from 'omit.js';
2016-10-31 17:58:12 +08:00
import warning from 'warning';
import Icon from '../icon';
import splitObject from '../_util/splitObject';
2015-08-21 17:12:42 +08:00
2016-07-09 10:52:16 +08:00
export interface TagProps {
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
2016-07-09 10:52:16 +08:00
export default class Tag extends React.Component<TagProps, any> {
static defaultProps = {
prefixCls: 'ant-tag',
closable: false,
2016-07-13 11:14:24 +08:00
};
2015-07-30 23:52:44 +08:00
constructor(props) {
super(props);
2016-10-31 17:58:12 +08:00
warning(!('color' in props), '`Tag[color]` is deprecated, please override color by CSS instead.');
2015-07-30 23:52:44 +08:00
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
close = (e) => {
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
2016-10-20 22:10:46 +08:00
animationEnd = (_, existed) => {
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
2015-07-28 17:08:06 +08:00
render() {
2016-06-22 13:18:43 +08:00
const [{
2016-07-13 17:22:23 +08:00
prefixCls, closable, color, className, children,
2016-07-08 16:34:02 +08:00
}, otherProps] = splitObject(
this.props,
2016-07-13 11:14:24 +08:00
['prefixCls', 'closable', 'color', 'className', 'children']
2016-07-08 16:34:02 +08:00
);
2016-07-09 16:15:08 +08:00
const closeIcon = closable ? <Icon type="cross" onClick={this.close} /> : '';
2016-03-03 12:16:25 +08:00
const classString = classNames({
2016-01-27 01:47:12 +08:00
[prefixCls]: true,
[`${prefixCls}-${color}`]: !!color,
2016-09-30 11:30:51 +08:00
[`${prefixCls}-has-color`]: !!color,
[`${prefixCls}-close`]: this.state.closing,
2016-03-03 12:16:25 +08:00
[className]: !!className,
2016-01-27 01:47:12 +08:00
});
2016-07-08 10:23:20 +08:00
// fix https://fb.me/react-unknown-prop
const divProps = omit(otherProps, [
'onClose',
'afterClose',
]);
2016-01-27 01:51:54 +08:00
return (
2016-01-27 14:48:25 +08:00
<Animate component=""
showProp="data-show"
transitionName={`${prefixCls}-zoom`}
2016-01-27 14:48:25 +08:00
transitionAppear
onEnd={this.animationEnd}
2016-07-09 10:52:16 +08:00
>
2016-01-27 01:51:54 +08:00
{this.state.closed ? null : (
<div
data-show={!this.state.closing}
{...divProps}
className={classString}
style={{ backgroundColor: /blue|red|green|yellow/.test(color) ? null : color }}
>
2016-03-03 12:16:25 +08:00
<span className={`${prefixCls}-text`}>{children}</span>
2016-07-09 16:15:08 +08:00
{closeIcon}
2016-01-27 01:51:54 +08:00
</div>
2016-07-09 10:52:16 +08:00
) }
2016-01-26 23:40:20 +08:00
</Animate>
);
2015-07-28 17:08:06 +08:00
}
}