Add an Intl polyfill
This commit is contained in:
parent
7ac574d9a9
commit
a6e4f754fc
|
@ -5,6 +5,11 @@ window.React = require('react');
|
|||
window.ReactDOM = require('react-dom');
|
||||
window.Perf = require('react-addons-perf');
|
||||
|
||||
if (!window.Intl) {
|
||||
require('intl');
|
||||
require('intl/locale-data/jsonp/en.js');
|
||||
}
|
||||
|
||||
//= require_tree ./components
|
||||
|
||||
window.Mastodon = require('./components/containers/mastodon');
|
||||
|
|
|
@ -4,21 +4,12 @@ import {
|
|||
FormattedRelative
|
||||
} from 'react-intl';
|
||||
|
||||
const RelativeTimestamp = ({ timestamp, now }) => {
|
||||
const diff = (new Date(now)) - (new Date(timestamp));
|
||||
|
||||
if (diff < 0) {
|
||||
return <FormattedMessage id='relative_time.just_now' defaultMessage='Just now' />
|
||||
} else if (diff > (3600 * 24 * 7 * 1000)) {
|
||||
return <FormattedDate value={timestamp} />
|
||||
} else {
|
||||
return <FormattedRelative value={timestamp} initialNow={now} updateInterval={0} />
|
||||
}
|
||||
const RelativeTimestamp = ({ timestamp }) => {
|
||||
return <FormattedRelative value={new Date(timestamp)} />;
|
||||
};
|
||||
|
||||
RelativeTimestamp.propTypes = {
|
||||
timestamp: React.PropTypes.string.isRequired,
|
||||
now: React.PropTypes.any
|
||||
timestamp: React.PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default RelativeTimestamp;
|
||||
|
|
|
@ -18,22 +18,8 @@ const StatusList = React.createClass({
|
|||
};
|
||||
},
|
||||
|
||||
getInitialState () {
|
||||
return {
|
||||
now: (new Date()).toString()
|
||||
};
|
||||
},
|
||||
|
||||
mixins: [PureRenderMixin],
|
||||
|
||||
componentDidMount () {
|
||||
this._interval = setInterval(() => this.setState({ now: (new Date()).toString() }), 60000);
|
||||
},
|
||||
|
||||
componentWillUnmount () {
|
||||
clearInterval(this._interval);
|
||||
},
|
||||
|
||||
handleScroll (e) {
|
||||
const { scrollTop, scrollHeight, clientHeight } = e.target;
|
||||
|
||||
|
@ -61,7 +47,7 @@ const StatusList = React.createClass({
|
|||
<div className='scrollable' onScroll={this.handleScroll}>
|
||||
<div>
|
||||
{statusIds.map((statusId) => {
|
||||
return <StatusContainer key={statusId} id={statusId} now={this.state.now} />;
|
||||
return <StatusContainer key={statusId} id={statusId} />;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -32,7 +32,8 @@ import Following from '../features/following';
|
|||
import Reblogs from '../features/reblogs';
|
||||
import Favourites from '../features/favourites';
|
||||
import HashtagTimeline from '../features/hashtag_timeline';
|
||||
import { IntlProvider } from 'react-intl';
|
||||
import { IntlProvider, addLocaleData } from 'react-intl';
|
||||
import en from 'react-intl/locale-data/en';
|
||||
|
||||
const store = configureStore();
|
||||
|
||||
|
@ -40,6 +41,8 @@ const browserHistory = useRouterHistory(createBrowserHistory)({
|
|||
basename: '/web'
|
||||
});
|
||||
|
||||
addLocaleData([...en]);
|
||||
|
||||
const Mastodon = React.createClass({
|
||||
|
||||
propTypes: {
|
||||
|
|
|
@ -54,7 +54,7 @@ const DetailedStatus = React.createClass({
|
|||
{media}
|
||||
|
||||
<div style={{ marginTop: '15px', color: '#616b86', fontSize: '14px', lineHeight: '18px' }}>
|
||||
<a className='detailed-status__datetime' style={{ color: 'inherit' }} href={status.get('url')} target='_blank' rel='noopener'><FormattedDate value={status.get('created_at')} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' /></a> · <Link to={`/statuses/${status.get('id')}/reblogs`} style={{ color: 'inherit', textDecoration: 'none' }}><i className='fa fa-retweet' /><span style={{ fontWeight: '500', fontSize: '12px', marginLeft: '6px', display: 'inline-block' }}><FormattedNumber value={status.get('reblogs_count')} /></span></Link> · <Link to={`/statuses/${status.get('id')}/favourites`} style={{ color: 'inherit', textDecoration: 'none' }}><i className='fa fa-star' /><span style={{ fontWeight: '500', fontSize: '12px', marginLeft: '6px', display: 'inline-block' }}><FormattedNumber value={status.get('favourites_count')} /></span></Link>
|
||||
<a className='detailed-status__datetime' style={{ color: 'inherit' }} href={status.get('url')} target='_blank' rel='noopener'><FormattedDate value={new Date(status.get('created_at'))} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' /></a> · <Link to={`/statuses/${status.get('id')}/reblogs`} style={{ color: 'inherit', textDecoration: 'none' }}><i className='fa fa-retweet' /><span style={{ fontWeight: '500', fontSize: '12px', marginLeft: '6px', display: 'inline-block' }}><FormattedNumber value={status.get('reblogs_count')} /></span></Link> · <Link to={`/statuses/${status.get('id')}/favourites`} style={{ color: 'inherit', textDecoration: 'none' }}><i className='fa fa-star' /><span style={{ fontWeight: '500', fontSize: '12px', marginLeft: '6px', display: 'inline-block' }}><FormattedNumber value={status.get('favourites_count')} /></span></Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -43,6 +43,7 @@
|
|||
"babel-plugin-transform-decorators-legacy": "^1.3.4",
|
||||
"emojione": "^2.2.6",
|
||||
"http-link-header": "^0.5.0",
|
||||
"intl": "^1.2.5",
|
||||
"react-autosuggest": "^7.0.1",
|
||||
"react-decoration": "^1.4.0",
|
||||
"react-intl": "^2.1.5",
|
||||
|
|
|
@ -2497,6 +2497,10 @@ interpret@^1.0.0:
|
|||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.1.tgz#d579fb7f693b858004947af39fa0db49f795602c"
|
||||
|
||||
intl:
|
||||
version "1.2.5"
|
||||
resolved "https://registry.yarnpkg.com/intl/-/intl-1.2.5.tgz#82244a2190c4e419f8371f5aa34daa3420e2abde"
|
||||
|
||||
intl-format-cache@^2.0.5:
|
||||
version "2.0.5"
|
||||
resolved "https://registry.yarnpkg.com/intl-format-cache/-/intl-format-cache-2.0.5.tgz#b484cefcb9353f374f25de389a3ceea1af18d7c9"
|
||||
|
|
Reference in a new issue