{
+ const index = UserList.indexOf(this.state.user);
+ this.setState({
+ user: index < UserList.length - 1 ? UserList[index + 1] : UserList[0],
+ color: index < colorList.length - 1 ? colorList[index + 1] : colorList[0],
+ });
+ }
+ render() {
+ return (
+
+
{this.state.user}
+
+
+ );
+ }
+}
+
+ReactDOM.render(
+, mountNode);
+````
diff --git a/components/avatar/index.tsx b/components/avatar/index.tsx
index 2068216c49..4320b0539c 100644
--- a/components/avatar/index.tsx
+++ b/components/avatar/index.tsx
@@ -24,9 +24,8 @@ export default class Avatar extends React.Component
{
shape: 'circle',
size: 'default',
};
- refs: {
- avatarChildren: HTMLElement;
- };
+
+ private avatarChildren: any;
constructor(props) {
super(props);
@@ -36,7 +35,18 @@ export default class Avatar extends React.Component {
}
componentDidMount() {
- const childrenNode = this.refs.avatarChildren;
+ this.setScale();
+ }
+
+ componentDidUpdate(prevProps, prevState) {
+ if (prevProps.children !== this.props.children
+ || (prevState.scale !== this.state.scale && this.state.scale === 1)) {
+ this.setScale();
+ }
+ }
+
+ setScale = () => {
+ const childrenNode = this.avatarChildren;
if (childrenNode) {
const childrenWidth = childrenNode.offsetWidth;
const avatarWidth = ReactDOM.findDOMNode(this).getBoundingClientRect().width;
@@ -45,6 +55,10 @@ export default class Avatar extends React.Component {
this.setState({
scale: (avatarWidth - 8) / childrenWidth,
});
+ } else {
+ this.setState({
+ scale: 1,
+ });
}
}
}
@@ -54,21 +68,12 @@ export default class Avatar extends React.Component {
prefixCls, shape, size, src, icon, className, ...others,
} = this.props;
- let sizeCls = '';
- switch (size) {
- case 'large':
- sizeCls = 'lg';
- break;
- case 'small':
- sizeCls = 'sm';
- break;
- default:
- sizeCls = '';
- break;
- }
+ const sizeCls = classNames({
+ [`${prefixCls}-lg`]: size === 'large',
+ [`${prefixCls}-sm`]: size === 'small',
+ });
- const classString = classNames(prefixCls, className, {
- [`${prefixCls}-${sizeCls}`]: sizeCls,
+ const classString = classNames(prefixCls, className, sizeCls, {
[`${prefixCls}-${shape}`]: shape,
[`${prefixCls}-image`]: src,
[`${prefixCls}-icon`]: icon,
@@ -80,17 +85,30 @@ export default class Avatar extends React.Component {
} else if (icon) {
children = ;
} else {
- const childrenNode = this.refs.avatarChildren;
- if (childrenNode && this.state.scale !== 1) {
+ const childrenNode = this.avatarChildren;
+ if (childrenNode || this.state.scale !== 1) {
const childrenStyle: React.CSSProperties = {
+ msTransform: `scale(${this.state.scale})`,
+ WebkitTransform: `scale(${this.state.scale})`,
transform: `scale(${this.state.scale})`,
position: 'absolute',
display: 'inline-block',
- left: `calc(50% - ${childrenNode.offsetWidth / 2}px)`,
+ left: `calc(50% - ${Math.round(childrenNode.offsetWidth / 2)}px)`,
};
- children = {children};
+ children = this.avatarChildren = span}
+ style={childrenStyle}
+ >
+ {children}
+ ;
} else {
- children = {children};
+ children = this.avatarChildren = span}
+ >
+ {children}
+ ;
}
}
return (
diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap
index d0c4ffbc15..c759bfb5f1 100644
--- a/components/form/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/form/__tests__/__snapshots__/demo.test.js.snap
@@ -2268,13 +2268,9 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
/>