test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-01 19:49:59 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

Fix tag render

Browse Source
This commit is contained in:
afc163 2015-08-20 11:46:02 +08:00
parent e5419c79ef
commit 59ea12f172
1 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
components/tag/index.jsx
View File

@ -1,14 +1,17 @@
import React from 'react'; import React from 'react';
const prefixCls = 'ant-tag'; const prefixCls = 'ant-tag';
import { transitionEndEvent, addEventListenerOnce } from '../util/index';
class AntTag extends React.Component { class AntTag extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
closing: false,
closed: false closed: false
}; };
} }
close(e) { close(e) {
let dom = React.findDOMNode(this); let dom = React.findDOMNode(this);
dom.style.width = dom.offsetWidth + 'px'; dom.style.width = dom.offsetWidth + 'px';
@ -16,7 +19,13 @@ class AntTag extends React.Component {
// 重复是去除浏览器渲染bug； // 重复是去除浏览器渲染bug；
dom.style.width = dom.offsetWidth + 'px'; dom.style.width = dom.offsetWidth + 'px';
this.setState({ this.setState({
closed: true closing: true
});
addEventListenerOnce(dom, transitionEndEvent, () => {
this.setState({
closed: true,
closing: false
});
}); });
this.props.onClose.call(this, e); this.props.onClose.call(this, e);
} }
@ -24,12 +33,12 @@ class AntTag extends React.Component {
render() { render() {
let close = this.props.closable ? let close = this.props.closable ?
<i className="anticon anticon-cross" onClick={this.close.bind(this)}></i> : ''; <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; 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} /> <a className={this.props.prefixCls + '-text'} {...this.props} />
{close} {close}
</div>; </div>;