Use immutable list in UploadButton to avoid wasteful re-render (#3394)
This commit is contained in:
		
							parent
							
								
									45837c533e
								
							
						
					
					
						commit
						5e41c26203
					
				
					 1 changed files with 6 additions and 4 deletions
				
			
		| 
						 | 
					@ -3,6 +3,8 @@ import IconButton from '../../../components/icon_button';
 | 
				
			||||||
import PropTypes from 'prop-types';
 | 
					import PropTypes from 'prop-types';
 | 
				
			||||||
import { defineMessages, injectIntl } from 'react-intl';
 | 
					import { defineMessages, injectIntl } from 'react-intl';
 | 
				
			||||||
import { connect } from 'react-redux';
 | 
					import { connect } from 'react-redux';
 | 
				
			||||||
 | 
					import ImmutablePureComponent from 'react-immutable-pure-component';
 | 
				
			||||||
 | 
					import ImmutablePropTypes from 'react-immutable-proptypes';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const messages = defineMessages({
 | 
					const messages = defineMessages({
 | 
				
			||||||
  upload: { id: 'upload_button.label', defaultMessage: 'Add media' },
 | 
					  upload: { id: 'upload_button.label', defaultMessage: 'Add media' },
 | 
				
			||||||
| 
						 | 
					@ -10,7 +12,7 @@ const messages = defineMessages({
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const makeMapStateToProps = () => {
 | 
					const makeMapStateToProps = () => {
 | 
				
			||||||
  const mapStateToProps = (state, props) => ({
 | 
					  const mapStateToProps = (state, props) => ({
 | 
				
			||||||
    acceptContentTypes: state.getIn(['media_attachments', 'accept_content_types']).toArray(),
 | 
					    acceptContentTypes: state.getIn(['media_attachments', 'accept_content_types']),
 | 
				
			||||||
  });
 | 
					  });
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  return mapStateToProps;
 | 
					  return mapStateToProps;
 | 
				
			||||||
| 
						 | 
					@ -21,14 +23,14 @@ const iconStyle = {
 | 
				
			||||||
  lineHeight: '27px',
 | 
					  lineHeight: '27px',
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
class UploadButton extends React.PureComponent {
 | 
					class UploadButton extends ImmutablePureComponent {
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  static propTypes = {
 | 
					  static propTypes = {
 | 
				
			||||||
    disabled: PropTypes.bool,
 | 
					    disabled: PropTypes.bool,
 | 
				
			||||||
    onSelectFile: PropTypes.func.isRequired,
 | 
					    onSelectFile: PropTypes.func.isRequired,
 | 
				
			||||||
    style: PropTypes.object,
 | 
					    style: PropTypes.object,
 | 
				
			||||||
    resetFileKey: PropTypes.number,
 | 
					    resetFileKey: PropTypes.number,
 | 
				
			||||||
    acceptContentTypes: PropTypes.arrayOf(PropTypes.string).isRequired,
 | 
					    acceptContentTypes: ImmutablePropTypes.listOf(PropTypes.string).isRequired,
 | 
				
			||||||
    intl: PropTypes.object.isRequired,
 | 
					    intl: PropTypes.object.isRequired,
 | 
				
			||||||
  };
 | 
					  };
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -58,7 +60,7 @@ class UploadButton extends React.PureComponent {
 | 
				
			||||||
          ref={this.setRef}
 | 
					          ref={this.setRef}
 | 
				
			||||||
          type='file'
 | 
					          type='file'
 | 
				
			||||||
          multiple={false}
 | 
					          multiple={false}
 | 
				
			||||||
          accept={ acceptContentTypes.join(',')}
 | 
					          accept={ acceptContentTypes.toArray().join(',')}
 | 
				
			||||||
          onChange={this.handleChange}
 | 
					          onChange={this.handleChange}
 | 
				
			||||||
          disabled={disabled}
 | 
					          disabled={disabled}
 | 
				
			||||||
          style={{ display: 'none' }}
 | 
					          style={{ display: 'none' }}
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		
		Reference in a new issue