Select: #998, fix scroll unlimited loop with PureComponent

libs/animate/transition.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { Transition as ReactTransition } from 'react-transition-group';
-import { View } from '../';
+import View from '../view';
 
 const noneFun = () => undefined;
 

libs/index.js

@@ -6,6 +6,7 @@
 export { default as CollapseTransition } from './collapse';
 export { default as Transition } from './transition';
 export { default as Component } from './component';
+export { default as PureComponent } from './pureComponent';
 export { default as PropTypes } from './props';
 export { default as View } from './view';
 export { default as Animate } from './animate';

libs/pureComponent/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+export default class PureComponent extends React.PureComponent {
+ classNames(...args) {
+ return classnames(args);
+ }
+
+ className(...args) {
+ const { className } = this.props;
+ return this.classNames.apply(this, args.concat([className]));
+ }
+
+ style(args) {
+ const { style } = this.props;
+ return Object.assign({}, args, style)
+ }
+}
+
+PureComponent.propTypes = {
+ className: PropTypes.string,
+ style: PropTypes.object
+};

src/scrollbar/Scrollbar.jsx

@@ -2,13 +2,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom'
 
-import { PropTypes, Component } from '../../libs';
+import { PropTypes, PureComponent } from '../../libs';
 import { addResizeListener, removeResizeListener } from '../../libs/utils/resize-event';
 
 import { getScrollBarWidth } from './scrollbar-width';
 import { Bar } from './Bar'
 
-export class Scrollbar extends Component {
+export class Scrollbar extends PureComponent {
  constructor(props) {
  super(props);
 
@@ -61,7 +61,7 @@ export class Scrollbar extends Component {
 
  _update() {
  let heightPercentage, widthPercentage;
- const wrap = this.wrap;
+ const { wrap, state } = this;
  if (!wrap) return;
 
  heightPercentage = (wrap.clientHeight * 100 / wrap.scrollHeight);
@@ -70,7 +70,9 @@ export class Scrollbar extends Component {
  let sizeHeight = (heightPercentage < 100) ? (heightPercentage + '%') : '';
  let sizeWidth = (widthPercentage < 100) ? (widthPercentage + '%') : '';
 
- this.setState({sizeHeight, sizeWidth})
+ if (state.sizeHeight !== sizeHeight || state.sizeWidth !== sizeWidth) {
+ this.setState({sizeHeight, sizeWidth})
+ }
  }
 
  render() {

src/upload/UploadList.jsx

@@ -1,7 +1,7 @@
 /* @flow */
 import React from 'react';
 import { Component, PropTypes, Transition, View } from '../../libs';
-import { Progress } from '../../src';
+import Progress from '../progress/Progress';
 
 export default class UploadList extends Component {
  constructor(props: Object) {