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
Этот коммит содержится в:
коммит произвёл
Joram Wilander
родитель
3f4d38f58a
Коммит
ba77aefe02
@@ -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
|
||||
};
|
||||
|
||||
52
webapp/components/post_view/components/post_time.jsx
Обычный файл
52
webapp/components/post_view/components/post_time.jsx
Обычный файл
@@ -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}
|
||||
/>
|
||||
);
|
||||
|
||||
Ссылка в новой задаче
Block a user