PLT-3202 Re-render timestamps when display settings switch between 12h and 24h (#3337)

* Made post timestamp switch from 12h to 24h without refreshing

* Made RHS post timestamps switch from 12h to 24h without refreshing
Этот коммит содержится в:
Harrison Healey
2016-06-15 08:13:17 -04:00
коммит произвёл Joram Wilander
родитель 3f4d38f58a
Коммит ba77aefe02
15 изменённых файлов: 110 добавлений и 79 удалений

Просмотреть файл

@@ -76,6 +76,10 @@ export default class Post extends React.Component {
return true;
}
if (nextProps.useMilitaryTime !== this.props.useMilitaryTime) {
return true;
}
if (!Utils.areObjectsEqual(nextProps.user, this.props.user)) {
return true;
}
@@ -187,6 +191,7 @@ export default class Post extends React.Component {
currentUser={this.props.currentUser}
compactDisplay={this.props.compactDisplay}
displayNameType={this.props.displayNameType}
useMilitaryTime={this.props.useMilitaryTime}
/>
<PostBody
post={post}
@@ -219,5 +224,6 @@ Post.propTypes = {
center: React.PropTypes.bool,
compactDisplay: React.PropTypes.bool,
previewCollapsed: React.PropTypes.string,
commentCount: React.PropTypes.number
commentCount: React.PropTypes.number,
useMilitaryTime: React.PropTypes.bool.isRequired
};

Просмотреть файл

@@ -69,6 +69,7 @@ export default class PostHeader extends React.Component {
sameUser={this.props.sameUser}
currentUser={this.props.currentUser}
compactDisplay={this.props.compactDisplay}
useMilitaryTime={this.props.useMilitaryTime}
/>
</li>
</ul>
@@ -91,5 +92,6 @@ PostHeader.propTypes = {
handleCommentClick: React.PropTypes.func.isRequired,
sameUser: React.PropTypes.bool.isRequired,
compactDisplay: React.PropTypes.bool,
displayNameType: React.PropTypes.string
displayNameType: React.PropTypes.string,
useMilitaryTime: React.PropTypes.bool.isRequired
};

Просмотреть файл

@@ -3,7 +3,7 @@
import $ from 'jquery';
import * as Utils from 'utils/utils.jsx';
import TimeSince from 'components/time_since.jsx';
import PostTime from './post_time.jsx';
import * as GlobalActions from 'actions/global_actions.jsx';
import TeamStore from 'stores/team_store.jsx';
import UserStore from 'stores/user_store.jsx';
@@ -217,10 +217,11 @@ export default class PostInfo extends React.Component {
return (
<ul className='post__header--info'>
<li className='col'>
<TimeSince
<PostTime
eventTime={post.create_at}
sameUser={this.props.sameUser}
compactDisplay={this.props.compactDisplay}
useMilitaryTime={this.props.useMilitaryTime}
/>
</li>
<li className='col col__reply'>
@@ -253,5 +254,6 @@ PostInfo.propTypes = {
handleCommentClick: React.PropTypes.func.isRequired,
sameUser: React.PropTypes.bool.isRequired,
currentUser: React.PropTypes.object.isRequired,
compactDisplay: React.PropTypes.bool
compactDisplay: React.PropTypes.bool,
useMilitaryTime: React.PropTypes.bool.isRequired
};

Просмотреть файл

@@ -264,6 +264,7 @@ export default class PostList extends React.Component {
commentCount={commentCount}
compactDisplay={this.props.compactDisplay}
previewCollapsed={this.props.previewsCollapsed}
useMilitaryTime={this.props.useMilitaryTime}
/>
);
@@ -525,5 +526,6 @@ PostList.propTypes = {
displayPostsInCenter: React.PropTypes.bool,
compactDisplay: React.PropTypes.bool,
previewsCollapsed: React.PropTypes.string,
useMilitaryTime: React.PropTypes.bool.isRequired,
isFocusPost: React.PropTypes.bool
};

Просмотреть файл

@@ -0,0 +1,52 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import React from 'react';
import Constants from 'utils/constants.jsx';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import {FormattedTime} from 'react-intl';
export default class PostTime extends React.Component {
constructor(props) {
super(props);
this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
}
componentDidMount() {
this.intervalId = setInterval(() => {
this.forceUpdate();
}, Constants.TIME_SINCE_UPDATE_INTERVAL);
}
componentWillUnmount() {
clearInterval(this.intervalId);
}
render() {
return (
<time className='post__time'>
<FormattedTime
value={this.props.eventTime}
hour='2-digit'
minute='2-digit'
hour12={!this.props.useMilitaryTime}
/>
</time>
);
}
}
PostTime.defaultProps = {
eventTime: 0,
sameUser: false
};
PostTime.propTypes = {
eventTime: React.PropTypes.number.isRequired,
sameUser: React.PropTypes.bool,
compactDisplay: React.PropTypes.bool,
useMilitaryTime: React.PropTypes.bool.isRequired
};

Просмотреть файл

@@ -52,7 +52,8 @@ export default class PostViewController extends React.Component {
displayNameType: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'false'),
displayPostsInCenter: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_CENTERED,
compactDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT,
previewsCollapsed: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.COLLAPSE_DISPLAY, 'false')
previewsCollapsed: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.COLLAPSE_DISPLAY, 'false'),
useMilitaryTime: PreferenceStore.getBool(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.USE_MILITARY_TIME, false)
};
}
@@ -80,7 +81,8 @@ export default class PostViewController extends React.Component {
displayNameType: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'false'),
displayPostsInCenter: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_CENTERED,
compactDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT,
previewsCollapsed: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.COLLAPSE_DISPLAY, 'false') + previewSuffix
previewsCollapsed: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.COLLAPSE_DISPLAY, 'false') + previewSuffix,
useMilitaryTime: PreferenceStore.getBool(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.USE_MILITARY_TIME, false)
});
}
@@ -142,6 +144,7 @@ export default class PostViewController extends React.Component {
displayPostsInCenter: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_CENTERED,
compactDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT,
previewsCollapsed: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.COLLAPSE_DISPLAY, 'false'),
useMilitaryTime: PreferenceStore.getBool(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.USE_MILITARY_TIME, false),
scrollType: ScrollTypes.NEW_MESSAGE
});
}
@@ -197,6 +200,10 @@ export default class PostViewController extends React.Component {
return true;
}
if (nextState.useMilitaryTime !== this.state.useMilitaryTime) {
return true;
}
if (nextState.lastViewed !== this.state.lastViewed) {
return true;
}
@@ -256,6 +263,7 @@ export default class PostViewController extends React.Component {
displayPostsInCenter={this.state.displayPostsInCenter}
compactDisplay={this.state.compactDisplay}
previewsCollapsed={this.state.previewsCollapsed}
useMilitaryTime={this.state.useMilitaryTime}
lastViewed={this.state.lastViewed}
/>
);