mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 12:09:14 +08:00
Merge branch 'badge-anim' of github.com:ant-design/ant-design into badge-anim
This commit is contained in:
commit
f7176f31f4
@ -1,6 +1,6 @@
|
||||
import React, {createElement} from 'react';
|
||||
import {findDOMNode} from 'react-dom';
|
||||
import {toArrayChildren, getPartNumber, getTranslateY} from './utils';
|
||||
import React, { createElement } from 'react';
|
||||
import { findDOMNode } from 'react-dom';
|
||||
import { toArrayChildren, getPartNumber, getTranslateY } from './utils';
|
||||
import assign from 'object-assign';
|
||||
|
||||
class AntNumber extends React.Component {
|
||||
@ -16,15 +16,17 @@ class AntNumber extends React.Component {
|
||||
};
|
||||
}
|
||||
|
||||
getNumberOnly(c, style) {
|
||||
getNumberOnly(index, style) {
|
||||
const childrenToReturn = [];
|
||||
for (let i = 0; i < 30; i++) {
|
||||
let count = i >= 10 ? i % 10 : i;
|
||||
const children = <p key={i}>{count}</p>;
|
||||
childrenToReturn.push(children);
|
||||
childrenToReturn.push(<p key={i}>{count}</p>);
|
||||
}
|
||||
const key = 'only_' + c;
|
||||
return createElement('span', {className: `${this.props.prefixCls}-only`, style: style, key: key}, childrenToReturn);
|
||||
return createElement('span', {
|
||||
className: `${this.props.prefixCls}-only`,
|
||||
style: style,
|
||||
key: index,
|
||||
}, childrenToReturn);
|
||||
}
|
||||
|
||||
setEndState(style) {
|
||||
@ -108,6 +110,7 @@ class AntNumber extends React.Component {
|
||||
return createElement(this.props.component, props, childrenToRender);
|
||||
}
|
||||
}
|
||||
|
||||
AntNumber.defaultProps = {
|
||||
prefixCls: 'ant-number',
|
||||
count: null,
|
||||
|
@ -33,7 +33,7 @@ const Test = React.createClass({
|
||||
show: !this.state.show
|
||||
});
|
||||
},
|
||||
onNumberClick(){
|
||||
onNumberClick() {
|
||||
const count = this.state.count;
|
||||
this.setState({
|
||||
count: count ? 0 : 5
|
||||
@ -45,9 +45,15 @@ const Test = React.createClass({
|
||||
<a href="#" className="head-example"></a>
|
||||
</Badge>
|
||||
<Badge dot={this.state.show}>
|
||||
<a href="#">一个链接</a>
|
||||
<a href="#" className="head-example"></a>
|
||||
</Badge>
|
||||
<div style={{ marginTop: 10 }}>
|
||||
<Button type="ghost" onClick={this.onNumberClick} style={{marginRight: 6}}>
|
||||
切换数字显隐
|
||||
</Button>
|
||||
<Button type="ghost" onClick={this.onClick} style={{marginRight: 6}}>
|
||||
切换红点显隐
|
||||
</Button>
|
||||
<ButtonGroup>
|
||||
<Button type="ghost" onClick={this.decline}>
|
||||
<Icon type="minus" />
|
||||
@ -56,8 +62,6 @@ const Test = React.createClass({
|
||||
<Icon type="plus" />
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
<Button type="ghost" onClick={this.onClick} style={{marginLeft:10}}>点切换</Button>
|
||||
<Button type="ghost" onClick={this.onNumberClick} style={{marginLeft:10}}>数字切换</Button>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
|
@ -31,7 +31,7 @@ class AntBadge extends React.Component {
|
||||
transitionAppear={true}>
|
||||
{
|
||||
hidden ? null :
|
||||
<AntNumber data-show={!hidden} className={className} count={count} callback = {this.props.animEnd}/>
|
||||
<AntNumber data-show={!hidden} className={className} count={count} />
|
||||
}
|
||||
</Animate>
|
||||
</span>
|
||||
@ -43,7 +43,6 @@ AntBadge.defaultProps = {
|
||||
prefixCls: 'ant-badge',
|
||||
count: null,
|
||||
dot: false,
|
||||
animEnd: null
|
||||
};
|
||||
|
||||
AntBadge.propTypes = {
|
||||
@ -52,7 +51,6 @@ AntBadge.propTypes = {
|
||||
React.PropTypes.number
|
||||
]),
|
||||
dot: React.PropTypes.bool,
|
||||
animEnd: React.PropTypes.func
|
||||
};
|
||||
|
||||
export default AntBadge;
|
||||
|
Loading…
Reference in New Issue
Block a user