mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-25 11:40:04 +08:00
Fix tag render
This commit is contained in:
parent
e5419c79ef
commit
59ea12f172
@ -1,14 +1,17 @@
|
||||
import React from 'react';
|
||||
const prefixCls = 'ant-tag';
|
||||
import { transitionEndEvent, addEventListenerOnce } from '../util/index';
|
||||
|
||||
class AntTag extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
closing: false,
|
||||
closed: false
|
||||
};
|
||||
}
|
||||
|
||||
close(e) {
|
||||
let dom = React.findDOMNode(this);
|
||||
dom.style.width = dom.offsetWidth + 'px';
|
||||
@ -16,7 +19,13 @@ class AntTag extends React.Component {
|
||||
// 重复是去除浏览器渲染bug;
|
||||
dom.style.width = dom.offsetWidth + 'px';
|
||||
this.setState({
|
||||
closed: true
|
||||
closing: true
|
||||
});
|
||||
addEventListenerOnce(dom, transitionEndEvent, () => {
|
||||
this.setState({
|
||||
closed: true,
|
||||
closing: false
|
||||
});
|
||||
});
|
||||
this.props.onClose.call(this, e);
|
||||
}
|
||||
@ -24,12 +33,12 @@ class AntTag extends React.Component {
|
||||
render() {
|
||||
let close = this.props.closable ?
|
||||
<i className="anticon anticon-cross" onClick={this.close.bind(this)}></i> : '';
|
||||
let colorClass = this.props.prefixCls + '-' + this.props.color;
|
||||
let colorClass = this.props.color ? this.props.prefixCls + '-' + this.props.color : '';
|
||||
|
||||
let className = this.props.prefixCls + ' ' + colorClass;
|
||||
className = this.state.closed ? className + ' ' + this.props.prefixCls + '-close' : className;
|
||||
className = this.state.closing ? className + ' ' + this.props.prefixCls + '-close' : className;
|
||||
|
||||
return <div className={className}>
|
||||
return (this.state.closed && !this.state.closing) ? null : <div className={className}>
|
||||
<a className={this.props.prefixCls + '-text'} {...this.props} />
|
||||
{close}
|
||||
</div>;
|
||||
|
Loading…
Reference in New Issue
Block a user