Add an Intl polyfill

This commit is contained in:
Eugen Rochko 2016-11-17 16:34:36 +01:00
parent 7ac574d9a9
commit a6e4f754fc
7 changed files with 19 additions and 29 deletions

View file

@ -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');

View file

@ -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;

View file

@ -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>

View file

@ -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: {

View file

@ -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>
);

View file

@ -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",

View file

@ -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"