From 5e41c2620318bf064c8dbfed4055505f467cab95 Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Sun, 28 May 2017 10:15:35 -0700 Subject: [PATCH] Use immutable list in UploadButton to avoid wasteful re-render (#3394) --- .../features/compose/components/upload_button.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/app/javascript/mastodon/features/compose/components/upload_button.js b/app/javascript/mastodon/features/compose/components/upload_button.js index bc5cfd1bccc..2791ed66e5b 100644 --- a/app/javascript/mastodon/features/compose/components/upload_button.js +++ b/app/javascript/mastodon/features/compose/components/upload_button.js @@ -3,6 +3,8 @@ import IconButton from '../../../components/icon_button'; import PropTypes from 'prop-types'; import { defineMessages, injectIntl } from 'react-intl'; import { connect } from 'react-redux'; +import ImmutablePureComponent from 'react-immutable-pure-component'; +import ImmutablePropTypes from 'react-immutable-proptypes'; const messages = defineMessages({ upload: { id: 'upload_button.label', defaultMessage: 'Add media' }, @@ -10,7 +12,7 @@ const messages = defineMessages({ const makeMapStateToProps = () => { const mapStateToProps = (state, props) => ({ - acceptContentTypes: state.getIn(['media_attachments', 'accept_content_types']).toArray(), + acceptContentTypes: state.getIn(['media_attachments', 'accept_content_types']), }); return mapStateToProps; @@ -21,14 +23,14 @@ const iconStyle = { lineHeight: '27px', }; -class UploadButton extends React.PureComponent { +class UploadButton extends ImmutablePureComponent { static propTypes = { disabled: PropTypes.bool, onSelectFile: PropTypes.func.isRequired, style: PropTypes.object, resetFileKey: PropTypes.number, - acceptContentTypes: PropTypes.arrayOf(PropTypes.string).isRequired, + acceptContentTypes: ImmutablePropTypes.listOf(PropTypes.string).isRequired, intl: PropTypes.object.isRequired, }; @@ -58,7 +60,7 @@ class UploadButton extends React.PureComponent { ref={this.setRef} type='file' multiple={false} - accept={ acceptContentTypes.join(',')} + accept={ acceptContentTypes.toArray().join(',')} onChange={this.handleChange} disabled={disabled} style={{ display: 'none' }}