monorail
/
mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix upload file input being re-rendered needlessly

This commit is contained in:
Eugen Rochko 2017-01-16 14:21:55 +01:00
parent 7d53ee73f3
commit 1a33e4042e
3 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/assets/javascripts/components/features/compose/components/upload_button.jsx
View File

@ -12,7 +12,8 @@ const UploadButton = React.createClass({
disabled: React.PropTypes.bool, disabled: React.PropTypes.bool,
onSelectFile: React.PropTypes.func.isRequired, onSelectFile: React.PropTypes.func.isRequired,
style: React.PropTypes.object, style: React.PropTypes.object,
key: React.PropTypes.number resetFileKey: React.PropTypes.number,
intl: React.PropTypes.object.isRequired
}, },
mixins: [PureRenderMixin], mixins: [PureRenderMixin],
@ -32,12 +33,12 @@ const UploadButton = React.createClass({
}, },
render () { render () {
const { intl } = this.props; const { intl, resetFileKey, disabled } = this.props;
return ( return (
<div style={this.props.style}> <div style={this.props.style}>
<IconButton icon='photo' title={intl.formatMessage(messages.upload)} disabled={this.props.disabled} onClick={this.handleClick} size={24} /> <IconButton icon='photo' title={intl.formatMessage(messages.upload)} disabled={disabled} onClick={this.handleClick} size={24} />
<input key={this.props.key} ref={this.setRef} type='file' multiple={false} onChange={this.handleChange} disabled={this.props.disabled} style={{ display: 'none' }} /> <input key={resetFileKey} ref={this.setRef} type='file' multiple={false} onChange={this.handleChange} disabled={disabled} style={{ display: 'none' }} />
</div> </div>
); );
} }

2
app/assets/javascripts/components/features/compose/containers/upload_button_container.jsx
View File

@ -4,7 +4,7 @@ import { uploadCompose } from '../../../actions/compose';
const mapStateToProps = state => ({ const mapStateToProps = state => ({
disabled: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size > 3 || state.getIn(['compose', 'media_attachments']).some(m => m.get('type') === 'video')), disabled: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size > 3 || state.getIn(['compose', 'media_attachments']).some(m => m.get('type') === 'video')),
key: Math.floor((Math.random() * 0x10000)) resetFileKey: state.getIn(['compose', 'resetFileKey'])
}); });
const mapDispatchToProps = dispatch => ({ const mapDispatchToProps = dispatch => ({

4
app/assets/javascripts/components/reducers/compose.jsx
View File

@ -38,7 +38,8 @@ const initialState = Immutable.Map({
media_attachments: Immutable.List(), media_attachments: Immutable.List(),
suggestion_token: null, suggestion_token: null,
suggestions: Immutable.List(), suggestions: Immutable.List(),
me: null me: null,
resetFileKey: Math.floor((Math.random() * 0x10000))
}); });
function statusToTextMentions(state, status) { function statusToTextMentions(state, status) {
@ -65,6 +66,7 @@ function appendMedia(state, media) {
return state.withMutations(map => { return state.withMutations(map => {
map.update('media_attachments', list => list.push(media)); map.update('media_attachments', list => list.push(media));
map.set('is_uploading', false); map.set('is_uploading', false);
map.set('resetFileKey', Math.floor((Math.random() * 0x10000)));
map.update('text', oldText => `${oldText} ${media.get('text_url')}`.trim()); map.update('text', oldText => `${oldText} ${media.get('text_url')}`.trim());
}); });
}; };