Remove deprecated features at React v15.5 (#1905)

* Remove deprecated features at React v15.5

- [x] React.PropTypes
- [x] react-addons-pure-render-mixin
- [x] react-addons-test-utils

* Uncommented out & Add browserify_rails options

* re-add react-addons-shallow

* Fix syntax error from resolve conflicts

* follow up 59a77923b3
This commit is contained in:
Yamagishi Kazutoshi 2017-04-22 03:05:35 +09:00 committed by Eugen
parent 27ea2a88c1
commit 1948f9e767
83 changed files with 1441 additions and 1291 deletions

View File

@ -1,5 +1,5 @@
import PureRenderMixin from 'react-addons-pure-render-mixin';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import Avatar from './avatar'; import Avatar from './avatar';
import DisplayName from './display_name'; import DisplayName from './display_name';
import Permalink from './permalink'; import Permalink from './permalink';
@ -19,30 +19,26 @@ const buttonsStyle = {
height: '18px' height: '18px'
}; };
const Account = React.createClass({ class Account extends React.PureComponent {
propTypes: { constructor (props, context) {
account: ImmutablePropTypes.map.isRequired, super(props, context);
me: React.PropTypes.number.isRequired, this.handleFollow = this.handleFollow.bind(this);
onFollow: React.PropTypes.func.isRequired, this.handleBlock = this.handleBlock.bind(this);
onBlock: React.PropTypes.func.isRequired, this.handleMute = this.handleMute.bind(this);
onMute: React.PropTypes.func.isRequired, }
intl: React.PropTypes.object.isRequired
},
mixins: [PureRenderMixin],
handleFollow () { handleFollow () {
this.props.onFollow(this.props.account); this.props.onFollow(this.props.account);
}, }
handleBlock () { handleBlock () {
this.props.onBlock(this.props.account); this.props.onBlock(this.props.account);
}, }
handleMute () { handleMute () {
this.props.onMute(this.props.account); this.props.onMute(this.props.account);
}, }
render () { render () {
const { account, me, intl } = this.props; const { account, me, intl } = this.props;
@ -86,6 +82,15 @@ const Account = React.createClass({
); );
} }
}); }
Account.propTypes = {
account: ImmutablePropTypes.map.isRequired,
me: PropTypes.number.isRequired,
onFollow: PropTypes.func.isRequired,
onBlock: PropTypes.func.isRequired,
onMute: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired
}
export default injectIntl(Account); export default injectIntl(Account);

View File

@ -1,14 +1,8 @@
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import PureRenderMixin from 'react-addons-pure-render-mixin';
const filename = url => url.split('/').pop().split('#')[0].split('?')[0]; const filename = url => url.split('/').pop().split('#')[0].split('?')[0];
const AttachmentList = React.createClass({ class AttachmentList extends React.PureComponent {
propTypes: {
media: ImmutablePropTypes.list.isRequired
},
mixins: [PureRenderMixin],
render () { render () {
const { media } = this.props; const { media } = this.props;
@ -29,6 +23,10 @@ const AttachmentList = React.createClass({
</div> </div>
); );
} }
}); }
AttachmentList.propTypes = {
media: ImmutablePropTypes.list.isRequired
};
export default AttachmentList; export default AttachmentList;

View File

@ -1,5 +1,6 @@
import AutosuggestAccountContainer from '../features/compose/containers/autosuggest_account_container'; import AutosuggestAccountContainer from '../features/compose/containers/autosuggest_account_container';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import { isRtl } from '../rtl'; import { isRtl } from '../rtl';
const textAtCursorMatchesToken = (str, caretPosition) => { const textAtCursorMatchesToken = (str, caretPosition) => {
@ -27,30 +28,23 @@ const textAtCursorMatchesToken = (str, caretPosition) => {
} }
}; };
const AutosuggestTextarea = React.createClass({ class AutosuggestTextarea extends React.Component {
propTypes: { constructor (props, context) {
value: React.PropTypes.string, super(props, context);
suggestions: ImmutablePropTypes.list, this.state = {
disabled: React.PropTypes.bool,
placeholder: React.PropTypes.string,
onSuggestionSelected: React.PropTypes.func.isRequired,
onSuggestionsClearRequested: React.PropTypes.func.isRequired,
onSuggestionsFetchRequested: React.PropTypes.func.isRequired,
onChange: React.PropTypes.func.isRequired,
onKeyUp: React.PropTypes.func,
onKeyDown: React.PropTypes.func,
onPaste: React.PropTypes.func.isRequired,
},
getInitialState () {
return {
suggestionsHidden: false, suggestionsHidden: false,
selectedSuggestion: 0, selectedSuggestion: 0,
lastToken: null, lastToken: null,
tokenStart: 0 tokenStart: 0
}; };
}, this.onChange = this.onChange.bind(this);
this.onKeyDown = this.onKeyDown.bind(this);
this.onBlur = this.onBlur.bind(this);
this.onSuggestionClick = this.onSuggestionClick.bind(this);
this.setTextarea = this.setTextarea.bind(this);
this.onPaste = this.onPaste.bind(this);
}
onChange (e) { onChange (e) {
const [ tokenStart, token ] = textAtCursorMatchesToken(e.target.value, e.target.selectionStart); const [ tokenStart, token ] = textAtCursorMatchesToken(e.target.value, e.target.selectionStart);
@ -68,7 +62,7 @@ const AutosuggestTextarea = React.createClass({
e.target.style.height = `${e.target.scrollHeight}px`; e.target.style.height = `${e.target.scrollHeight}px`;
this.props.onChange(e); this.props.onChange(e);
}, }
onKeyDown (e) { onKeyDown (e) {
const { suggestions, disabled } = this.props; const { suggestions, disabled } = this.props;
@ -118,7 +112,7 @@ const AutosuggestTextarea = React.createClass({
} }
this.props.onKeyDown(e); this.props.onKeyDown(e);
}, }
onBlur () { onBlur () {
// If we hide the suggestions immediately, then this will prevent the // If we hide the suggestions immediately, then this will prevent the
@ -128,30 +122,30 @@ const AutosuggestTextarea = React.createClass({
setTimeout(() => { setTimeout(() => {
this.setState({ suggestionsHidden: true }); this.setState({ suggestionsHidden: true });
}, 100); }, 100);
}, }
onSuggestionClick (suggestion, e) { onSuggestionClick (suggestion, e) {
e.preventDefault(); e.preventDefault();
this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestion); this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestion);
this.textarea.focus(); this.textarea.focus();
}, }
componentWillReceiveProps (nextProps) { componentWillReceiveProps (nextProps) {
if (nextProps.suggestions !== this.props.suggestions && nextProps.suggestions.size > 0 && this.state.suggestionsHidden) { if (nextProps.suggestions !== this.props.suggestions && nextProps.suggestions.size > 0 && this.state.suggestionsHidden) {
this.setState({ suggestionsHidden: false }); this.setState({ suggestionsHidden: false });
} }
}, }
setTextarea (c) { setTextarea (c) {
this.textarea = c; this.textarea = c;
}, }
onPaste (e) { onPaste (e) {
if (e.clipboardData && e.clipboardData.files.length === 1) { if (e.clipboardData && e.clipboardData.files.length === 1) {
this.props.onPaste(e.clipboardData.files) this.props.onPaste(e.clipboardData.files)
e.preventDefault(); e.preventDefault();
} }
}, }
render () { render () {
const { value, suggestions, disabled, placeholder, onKeyUp } = this.props; const { value, suggestions, disabled, placeholder, onKeyUp } = this.props;
@ -196,6 +190,20 @@ const AutosuggestTextarea = React.createClass({
); );
} }
}); };
AutosuggestTextarea.propTypes = {
value: PropTypes.string,
suggestions: ImmutablePropTypes.list,
disabled: PropTypes.bool,
placeholder: PropTypes.string,
onSuggestionSelected: PropTypes.func.isRequired,
onSuggestionsClearRequested: PropTypes.func.isRequired,
onSuggestionsFetchRequested: PropTypes.func.isRequired,
onChange: PropTypes.func.isRequired,
onKeyUp: PropTypes.func,
onKeyDown: PropTypes.func,
onPaste: PropTypes.func.isRequired,
};
export default AutosuggestTextarea; export default AutosuggestTextarea;

View File

@ -1,36 +1,23 @@
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PropTypes from 'prop-types';
const Avatar = React.createClass({ class Avatar extends React.PureComponent {
propTypes: { constructor (props, context) {
src: React.PropTypes.string.isRequired, super(props, context);
staticSrc: React.PropTypes.string, this.state = {
size: React.PropTypes.number.isRequired,
style: React.PropTypes.object,
animate: React.PropTypes.bool
},
getDefaultProps () {
return {
animate: false
};
},
getInitialState () {
return {
hovering: false hovering: false
}; };
}, this.handleMouseEnter = this.handleMouseEnter.bind(this);
this.handleMouseLeave = this.handleMouseLeave.bind(this);
mixins: [PureRenderMixin], }
handleMouseEnter () { handleMouseEnter () {
this.setState({ hovering: true }); this.setState({ hovering: true });
}, }
handleMouseLeave () { handleMouseLeave () {
this.setState({ hovering: false }); this.setState({ hovering: false });
}, }
render () { render () {
const { src, size, staticSrc, animate } = this.props; const { src, size, staticSrc, animate } = this.props;
@ -59,6 +46,18 @@ const Avatar = React.createClass({
); );
} }
}); }
Avatar.propTypes = {
src: PropTypes.string.isRequired,
staticSrc: PropTypes.string,
size: PropTypes.number.isRequired,
style: PropTypes.object,
animate: PropTypes.bool
};
Avatar.defaultProps = {
animate: false
};
export default Avatar; export default Avatar;

View File

@ -1,31 +1,17 @@
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PropTypes from 'prop-types';
const Button = React.createClass({ class Button extends React.PureComponent {
propTypes: { constructor (props, context) {
text: React.PropTypes.node, super(props, context);
onClick: React.PropTypes.func, this.handleClick = this.handleClick.bind(this);
disabled: React.PropTypes.bool, }
block: React.PropTypes.bool,
secondary: React.PropTypes.bool,
size: React.PropTypes.number,
style: React.PropTypes.object,
children: React.PropTypes.node
},
getDefaultProps () {
return {
size: 36
};
},
mixins: [PureRenderMixin],
handleClick (e) { handleClick (e) {
if (!this.props.disabled) { if (!this.props.disabled) {
this.props.onClick(); this.props.onClick();
} }
}, }
render () { render () {
const style = { const style = {
@ -57,6 +43,21 @@ const Button = React.createClass({
); );
} }
}); }
Button.propTypes = {
text: PropTypes.node,
onClick: PropTypes.func,
disabled: PropTypes.bool,
block: PropTypes.bool,
secondary: PropTypes.bool,
size: PropTypes.number,
style: PropTypes.object,
children: PropTypes.node
};
Button.defaultProps = {
size: 36
};
export default Button; export default Button;

View File

@ -1,4 +1,5 @@
import { Motion, spring } from 'react-motion'; import { Motion, spring } from 'react-motion';
import PropTypes from 'prop-types';
const Collapsable = ({ fullHeight, isVisible, children }) => ( const Collapsable = ({ fullHeight, isVisible, children }) => (
<Motion defaultStyle={{ opacity: !isVisible ? 0 : 100, height: isVisible ? fullHeight : 0 }} style={{ opacity: spring(!isVisible ? 0 : 100), height: spring(!isVisible ? 0 : fullHeight) }}> <Motion defaultStyle={{ opacity: !isVisible ? 0 : 100, height: isVisible ? fullHeight : 0 }} style={{ opacity: spring(!isVisible ? 0 : 100), height: spring(!isVisible ? 0 : fullHeight) }}>
@ -11,9 +12,9 @@ const Collapsable = ({ fullHeight, isVisible, children }) => (
); );
Collapsable.propTypes = { Collapsable.propTypes = {
fullHeight: React.PropTypes.number.isRequired, fullHeight: PropTypes.number.isRequired,
isVisible: React.PropTypes.bool.isRequired, isVisible: PropTypes.bool.isRequired,
children: React.PropTypes.node.isRequired children: PropTypes.node.isRequired
}; };
export default Collapsable; export default Collapsable;

View File

@ -1,23 +1,22 @@
import PureRenderMixin from 'react-addons-pure-render-mixin';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import PropTypes from 'prop-types';
const iconStyle = { const iconStyle = {
display: 'inline-block', display: 'inline-block',
marginRight: '5px' marginRight: '5px'
}; };
const ColumnBackButton = React.createClass({ class ColumnBackButton extends React.PureComponent {
contextTypes: { constructor (props, context) {
router: React.PropTypes.object super(props, context);
}, this.handleClick = this.handleClick.bind(this);
}
mixins: [PureRenderMixin],
handleClick () { handleClick () {
if (window.history && window.history.length === 1) this.context.router.push("/"); if (window.history && window.history.length === 1) this.context.router.push("/");
else this.context.router.goBack(); else this.context.router.goBack();
}, }
render () { render () {
return ( return (
@ -28,6 +27,10 @@ const ColumnBackButton = React.createClass({
); );
} }
}); };
ColumnBackButton.contextTypes = {
router: PropTypes.object
};
export default ColumnBackButton; export default ColumnBackButton;

View File

@ -1,5 +1,5 @@
import PureRenderMixin from 'react-addons-pure-render-mixin';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import PropTypes from 'prop-types';
const outerStyle = { const outerStyle = {
position: 'absolute', position: 'absolute',
@ -16,17 +16,16 @@ const iconStyle = {
marginRight: '5px' marginRight: '5px'
}; };
const ColumnBackButtonSlim = React.createClass({ class ColumnBackButtonSlim extends React.PureComponent {
contextTypes: { constructor (props, context) {
router: React.PropTypes.object super(props, context);
}, this.handleClick = this.handleClick.bind(this);
}
mixins: [PureRenderMixin],
handleClick () { handleClick () {
this.context.router.push('/'); this.context.router.push('/');
}, }
render () { render () {
return ( return (
@ -39,6 +38,10 @@ const ColumnBackButtonSlim = React.createClass({
); );
} }
}); }
ColumnBackButtonSlim.contextTypes = {
router: PropTypes.object
};
export default ColumnBackButtonSlim; export default ColumnBackButtonSlim;

View File

@ -1,5 +1,5 @@
import PureRenderMixin from 'react-addons-pure-render-mixin';
import { Motion, spring } from 'react-motion'; import { Motion, spring } from 'react-motion';
import PropTypes from 'prop-types';
const iconStyle = { const iconStyle = {
fontSize: '16px', fontSize: '16px',
@ -11,23 +11,16 @@ const iconStyle = {
zIndex: '3' zIndex: '3'
}; };
const ColumnCollapsable = React.createClass({ class ColumnCollapsable extends React.PureComponent {
propTypes: { constructor (props, context) {
icon: React.PropTypes.string.isRequired, super(props, context);
title: React.PropTypes.string, this.state = {
fullHeight: React.PropTypes.number.isRequired,
children: React.PropTypes.node,
onCollapse: React.PropTypes.func
},
getInitialState () {
return {
collapsed: true collapsed: true
}; };
},
mixins: [PureRenderMixin], this.handleToggleCollapsed = this.handleToggleCollapsed.bind(this);
}
handleToggleCollapsed () { handleToggleCollapsed () {
const currentState = this.state.collapsed; const currentState = this.state.collapsed;
@ -37,7 +30,7 @@ const ColumnCollapsable = React.createClass({
if (!currentState && this.props.onCollapse) { if (!currentState && this.props.onCollapse) {
this.props.onCollapse(); this.props.onCollapse();
} }
}, }
render () { render () {
const { icon, title, fullHeight, children } = this.props; const { icon, title, fullHeight, children } = this.props;
@ -60,6 +53,14 @@ const ColumnCollapsable = React.createClass({
</div> </div>
); );
} }
}); }
ColumnCollapsable.propTypes = {
icon: PropTypes.string.isRequired,
title: PropTypes.string,
fullHeight: PropTypes.number.isRequired,
children: PropTypes.node,
onCollapse: PropTypes.func
};
export default ColumnCollapsable; export default ColumnCollapsable;

View File

@ -1,15 +1,8 @@
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import escapeTextContentForBrowser from 'escape-html'; import escapeTextContentForBrowser from 'escape-html';
import emojify from '../emoji'; import emojify from '../emoji';
const DisplayName = React.createClass({ class DisplayName extends React.PureComponent {
propTypes: {
account: ImmutablePropTypes.map.isRequired
},
mixins: [PureRenderMixin],
render () { render () {
const displayName = this.props.account.get('display_name').length === 0 ? this.props.account.get('username') : this.props.account.get('display_name'); const displayName = this.props.account.get('display_name').length === 0 ? this.props.account.get('username') : this.props.account.get('display_name');
@ -22,6 +15,10 @@ const DisplayName = React.createClass({
); );
} }
}); };
DisplayName.propTypes = {
account: ImmutablePropTypes.map.isRequired
}
export default DisplayName; export default DisplayName;

View File

@ -1,26 +1,20 @@
import Dropdown, { DropdownTrigger, DropdownContent } from 'react-simple-dropdown'; import Dropdown, { DropdownTrigger, DropdownContent } from 'react-simple-dropdown';
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PropTypes from 'prop-types';
const DropdownMenu = React.createClass({ class DropdownMenu extends React.PureComponent {
propTypes: { constructor (props, context) {
icon: React.PropTypes.string.isRequired, super(props, context);
items: React.PropTypes.array.isRequired, this.state = {
size: React.PropTypes.number.isRequired,
direction: React.PropTypes.string
},
getDefaultProps () {
return {
direction: 'left' direction: 'left'
}; };
}, this.setRef = this.setRef.bind(this);
this.renderItem = this.renderItem.bind(this);
mixins: [PureRenderMixin], }
setRef (c) { setRef (c) {
this.dropdown = c; this.dropdown = c;
}, }
handleClick (i, e) { handleClick (i, e) {
const { action } = this.props.items[i]; const { action } = this.props.items[i];
@ -30,7 +24,7 @@ const DropdownMenu = React.createClass({
action(); action();
this.dropdown.hide(); this.dropdown.hide();
} }
}, }
renderItem (item, i) { renderItem (item, i) {
if (item === null) { if (item === null) {
@ -46,7 +40,7 @@ const DropdownMenu = React.createClass({
</a> </a>
</li> </li>
); );
}, }
render () { render () {
const { icon, items, size, direction } = this.props; const { icon, items, size, direction } = this.props;
@ -67,6 +61,13 @@ const DropdownMenu = React.createClass({
); );
} }
}); }
DropdownMenu.propTypes = {
icon: PropTypes.string.isRequired,
items: PropTypes.array.isRequired,
size: PropTypes.number.isRequired,
direction: PropTypes.string
};
export default DropdownMenu; export default DropdownMenu;

View File

@ -1,33 +1,30 @@
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PropTypes from 'prop-types';
const ExtendedVideoPlayer = React.createClass({ class ExtendedVideoPlayer extends React.PureComponent {
propTypes: { constructor (props, context) {
src: React.PropTypes.string.isRequired, super(props, context);
time: React.PropTypes.number, this.handleLoadedData = this.handleLoadedData.bind(this);
controls: React.PropTypes.bool.isRequired, this.setRef = this.setRef.bind(this);
muted: React.PropTypes.bool.isRequired }
},
mixins: [PureRenderMixin],
handleLoadedData () { handleLoadedData () {
if (this.props.time) { if (this.props.time) {
this.video.currentTime = this.props.time; this.video.currentTime = this.props.time;
} }
}, }
componentDidMount () { componentDidMount () {
this.video.addEventListener('loadeddata', this.handleLoadedData); this.video.addEventListener('loadeddata', this.handleLoadedData);
}, }
componentWillUnmount () { componentWillUnmount () {
this.video.removeEventListener('loadeddata', this.handleLoadedData); this.video.removeEventListener('loadeddata', this.handleLoadedData);
}, }
setRef (c) { setRef (c) {
this.video = c; this.video = c;
}, }
render () { render () {
return ( return (
@ -42,8 +39,15 @@ const ExtendedVideoPlayer = React.createClass({
/> />
</div> </div>
); );
}, }
}); }
ExtendedVideoPlayer.propTypes = {
src: PropTypes.string.isRequired,
time: PropTypes.number,
controls: PropTypes.bool.isRequired,
muted: PropTypes.bool.isRequired
};
export default ExtendedVideoPlayer; export default ExtendedVideoPlayer;

View File

@ -1,33 +1,12 @@
import PureRenderMixin from 'react-addons-pure-render-mixin';
import { Motion, spring } from 'react-motion'; import { Motion, spring } from 'react-motion';
import PropTypes from 'prop-types';
const IconButton = React.createClass({ class IconButton extends React.PureComponent {
propTypes: { constructor (props, context) {
title: React.PropTypes.string.isRequired, super(props, context);
icon: React.PropTypes.string.isRequired, this.handleClick = this.handleClick.bind(this);
onClick: React.PropTypes.func, }
size: React.PropTypes.number,
active: React.PropTypes.bool,
style: React.PropTypes.object,
activeStyle: React.PropTypes.object,
disabled: React.PropTypes.bool,
inverted: React.PropTypes.bool,
animate: React.PropTypes.bool,
overlay: React.PropTypes.bool
},
getDefaultProps () {
return {
size: 18,
active: false,
disabled: false,
animate: false,
overlay: false
};
},
mixins: [PureRenderMixin],
handleClick (e) { handleClick (e) {
e.preventDefault(); e.preventDefault();
@ -35,7 +14,7 @@ const IconButton = React.createClass({
if (!this.props.disabled) { if (!this.props.disabled) {
this.props.onClick(e); this.props.onClick(e);
} }
}, }
render () { render () {
let style = { let style = {
@ -84,6 +63,28 @@ const IconButton = React.createClass({
); );
} }
}); }
IconButton.propTypes = {
title: PropTypes.string.isRequired,
icon: PropTypes.string.isRequired,
onClick: PropTypes.func,
size: PropTypes.number,
active: PropTypes.bool,
style: PropTypes.object,
activeStyle: PropTypes.object,
disabled: PropTypes.bool,
inverted: PropTypes.bool,
animate: PropTypes.bool,
overlay: PropTypes.bool
};
IconButton.defaultProps = {
size: 18,
active: false,
disabled: false,
animate: false,
overlay: false
};
export default IconButton; export default IconButton;

View File

@ -1,4 +1,5 @@
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import PropTypes from 'prop-types';
const LoadMore = ({ onClick }) => ( const LoadMore = ({ onClick }) => (
<a href="#" className='load-more' role='button' onClick={onClick}> <a href="#" className='load-more' role='button' onClick={onClick}>
@ -7,7 +8,7 @@ const LoadMore = ({ onClick }) => (
); );
LoadMore.propTypes = { LoadMore.propTypes = {
onClick: React.PropTypes.func onClick: PropTypes.func
}; };
export default LoadMore; export default LoadMore;

View File

@ -1,5 +1,5 @@
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PropTypes from 'prop-types';
import IconButton from './icon_button'; import IconButton from './icon_button';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { isIOS } from '../is_mobile'; import { isIOS } from '../is_mobile';
@ -72,17 +72,12 @@ const gifvThumbStyle = {
cursor: 'zoom-in' cursor: 'zoom-in'
}; };
const Item = React.createClass({ class Item extends React.PureComponent {
propTypes: { constructor (props, context) {
attachment: ImmutablePropTypes.map.isRequired, super(props, context);
index: React.PropTypes.number.isRequired, this.handleClick = this.handleClick.bind(this);
size: React.PropTypes.number.isRequired, }
onClick: React.PropTypes.func.isRequired,
autoPlayGif: React.PropTypes.bool.isRequired
},
mixins: [PureRenderMixin],
handleClick (e) { handleClick (e) {
const { index, onClick } = this.props; const { index, onClick } = this.props;
@ -93,7 +88,7 @@ const Item = React.createClass({
} }
e.stopPropagation(); e.stopPropagation();
}, }
render () { render () {
const { attachment, index, size } = this.props; const { attachment, index, size } = this.props;
@ -184,34 +179,34 @@ const Item = React.createClass({
); );
} }
}); }
const MediaGallery = React.createClass({ Item.propTypes = {
attachment: ImmutablePropTypes.map.isRequired,
getInitialState () { index: PropTypes.number.isRequired,
return { size: PropTypes.number.isRequired,
visible: !this.props.sensitive onClick: PropTypes.func.isRequired,
autoPlayGif: PropTypes.bool.isRequired
}; };
},
propTypes: { class MediaGallery extends React.PureComponent {
sensitive: React.PropTypes.bool,
media: ImmutablePropTypes.list.isRequired,
height: React.PropTypes.number.isRequired,
onOpenMedia: React.PropTypes.func.isRequired,
intl: React.PropTypes.object.isRequired,
autoPlayGif: React.PropTypes.bool.isRequired
},
mixins: [PureRenderMixin], constructor (props, context) {
super(props, context);
this.state = {
visible: !props.sensitive
};
this.handleOpen = this.handleOpen.bind(this);
this.handleClick = this.handleClick.bind(this);
}
handleOpen (e) { handleOpen (e) {
this.setState({ visible: !this.state.visible }); this.setState({ visible: !this.state.visible });
}, }
handleClick (index) { handleClick (index) {
this.props.onOpenMedia(this.props.media, index); this.props.onOpenMedia(this.props.media, index);
}, }
render () { render () {
const { media, intl, sensitive } = this.props; const { media, intl, sensitive } = this.props;
@ -249,6 +244,15 @@ const MediaGallery = React.createClass({
); );
} }
}); }
MediaGallery.propTypes = {
sensitive: PropTypes.bool,
media: ImmutablePropTypes.list.isRequired,
height: PropTypes.number.isRequired,
onOpenMedia: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
autoPlayGif: PropTypes.bool.isRequired
};
export default injectIntl(MediaGallery); export default injectIntl(MediaGallery);

View File

@ -1,21 +1,18 @@
const Permalink = React.createClass({ import PropTypes from 'prop-types';
contextTypes: { class Permalink extends React.Component {
router: React.PropTypes.object
},
propTypes: { constructor (props, context) {
href: React.PropTypes.string.isRequired, super(props, context);
to: React.PropTypes.string.isRequired, this.handleClick = this.handleClick.bind(this);
children: React.PropTypes.node }
},
handleClick (e) { handleClick (e) {
if (e.button === 0) { if (e.button === 0) {
e.preventDefault(); e.preventDefault();
this.context.router.push(this.props.to); this.context.router.push(this.props.to);
} }
}, }
render () { render () {
const { href, children, ...other } = this.props; const { href, children, ...other } = this.props;
@ -23,6 +20,16 @@ const Permalink = React.createClass({
return <a href={href} onClick={this.handleClick} {...other}>{children}</a>; return <a href={href} onClick={this.handleClick} {...other}>{children}</a>;
} }
}); }
Permalink.contextTypes = {
router: PropTypes.object
};
Permalink.propTypes = {
href: PropTypes.string.isRequired,
to: PropTypes.string.isRequired,
children: PropTypes.node
};
export default Permalink; export default Permalink;

View File

@ -1,4 +1,5 @@
import { injectIntl, FormattedRelative } from 'react-intl'; import { injectIntl, FormattedRelative } from 'react-intl';
import PropTypes from 'prop-types';
const RelativeTimestamp = ({ intl, timestamp }) => { const RelativeTimestamp = ({ intl, timestamp }) => {
const date = new Date(timestamp); const date = new Date(timestamp);
@ -11,8 +12,8 @@ const RelativeTimestamp = ({ intl, timestamp }) => {
}; };
RelativeTimestamp.propTypes = { RelativeTimestamp.propTypes = {
intl: React.PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
timestamp: React.PropTypes.string.isRequired timestamp: PropTypes.string.isRequired
}; };
export default injectIntl(RelativeTimestamp); export default injectIntl(RelativeTimestamp);

View File

@ -1,7 +1,7 @@
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import Avatar from './avatar'; import Avatar from './avatar';
import RelativeTimestamp from './relative_timestamp'; import RelativeTimestamp from './relative_timestamp';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import DisplayName from './display_name'; import DisplayName from './display_name';
import MediaGallery from './media_gallery'; import MediaGallery from './media_gallery';
import VideoPlayer from './video_player'; import VideoPlayer from './video_player';
@ -12,41 +12,25 @@ import { FormattedMessage } from 'react-intl';
import emojify from '../emoji'; import emojify from '../emoji';
import escapeTextContentForBrowser from 'escape-html'; import escapeTextContentForBrowser from 'escape-html';
const Status = React.createClass({ class Status extends React.PureComponent {
contextTypes: { constructor (props, context) {
router: React.PropTypes.object super(props, context);
}, this.handleClick = this.handleClick.bind(this);
this.handleAccountClick = this.handleAccountClick.bind(this);
propTypes: { }
status: ImmutablePropTypes.map,
wrapped: React.PropTypes.bool,
onReply: React.PropTypes.func,
onFavourite: React.PropTypes.func,
onReblog: React.PropTypes.func,
onDelete: React.PropTypes.func,
onOpenMedia: React.PropTypes.func,
onOpenVideo: React.PropTypes.func,
onBlock: React.PropTypes.func,
me: React.PropTypes.number,
boostModal: React.PropTypes.bool,
autoPlayGif: React.PropTypes.bool,
muted: React.PropTypes.bool
},
mixins: [PureRenderMixin],
handleClick () { handleClick () {
const { status } = this.props; const { status } = this.props;
this.context.router.push(`/statuses/${status.getIn(['reblog', 'id'], status.get('id'))}`); this.context.router.push(`/statuses/${status.getIn(['reblog', 'id'], status.get('id'))}`);
}, }
handleAccountClick (id, e) { handleAccountClick (id, e) {
if (e.button === 0) { if (e.button === 0) {
e.preventDefault(); e.preventDefault();
this.context.router.push(`/accounts/${id}`); this.context.router.push(`/accounts/${id}`);
} }
}, }
render () { render () {
let media = ''; let media = '';
@ -112,6 +96,26 @@ const Status = React.createClass({
); );
} }
}); }
Status.contextTypes = {
router: PropTypes.object
};
Status.propTypes = {
status: ImmutablePropTypes.map,
wrapped: PropTypes.bool,
onReply: PropTypes.func,
onFavourite: PropTypes.func,
onReblog: PropTypes.func,
onDelete: PropTypes.func,
onOpenMedia: PropTypes.func,
onOpenVideo: PropTypes.func,
onBlock: PropTypes.func,
me: PropTypes.number,
boostModal: PropTypes.bool,
autoPlayGif: PropTypes.bool,
muted: PropTypes.bool
};
export default Status; export default Status;

View File

@ -1,5 +1,5 @@
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PropTypes from 'prop-types';
import IconButton from './icon_button'; import IconButton from './icon_button';
import DropdownMenu from './dropdown_menu'; import DropdownMenu from './dropdown_menu';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
@ -17,64 +17,57 @@ const messages = defineMessages({
report: { id: 'status.report', defaultMessage: 'Report @{name}' } report: { id: 'status.report', defaultMessage: 'Report @{name}' }
}); });
const StatusActionBar = React.createClass({ class StatusActionBar extends React.PureComponent {
contextTypes: { constructor (props, context) {
router: React.PropTypes.object super(props, context);
}, this.handleReplyClick = this.handleReplyClick.bind(this);
this.handleFavouriteClick = this.handleFavouriteClick.bind(this);
propTypes: { this.handleReblogClick = this.handleReblogClick.bind(this);
status: ImmutablePropTypes.map.isRequired, this.handleDeleteClick = this.handleDeleteClick.bind(this);
onReply: React.PropTypes.func, this.handleMentionClick = this.handleMentionClick.bind(this);
onFavourite: React.PropTypes.func, this.handleMuteClick = this.handleMuteClick.bind(this);
onReblog: React.PropTypes.func, this.handleBlockClick = this.handleBlockClick.bind(this);
onDelete: React.PropTypes.func, this.handleOpen = this.handleOpen.bind(this);
onMention: React.PropTypes.func, this.handleReport = this.handleReport.bind(this);
onMute: React.PropTypes.func, }
onBlock: React.PropTypes.func,
onReport: React.PropTypes.func,
me: React.PropTypes.number.isRequired,
intl: React.PropTypes.object.isRequired
},
mixins: [PureRenderMixin],
handleReplyClick () { handleReplyClick () {
this.props.onReply(this.props.status, this.context.router); this.props.onReply(this.props.status, this.context.router);
}, }
handleFavouriteClick () { handleFavouriteClick () {
this.props.onFavourite(this.props.status); this.props.onFavourite(this.props.status);
}, }
handleReblogClick (e) { handleReblogClick (e) {
this.props.onReblog(this.props.status, e); this.props.onReblog(this.props.status, e);
}, }
handleDeleteClick () { handleDeleteClick () {
this.props.onDelete(this.props.status); this.props.onDelete(this.props.status);
}, }
handleMentionClick () { handleMentionClick () {
this.props.onMention(this.props.status.get('account'), this.context.router); this.props.onMention(this.props.status.get('account'), this.context.router);
}, }
handleMuteClick () { handleMuteClick () {
this.props.onMute(this.props.status.get('account')); this.props.onMute(this.props.status.get('account'));
}, }
handleBlockClick () { handleBlockClick () {
this.props.onBlock(this.props.status.get('account')); this.props.onBlock(this.props.status.get('account'));
}, }
handleOpen () { handleOpen () {
this.context.router.push(`/statuses/${this.props.status.get('id')}`); this.context.router.push(`/statuses/${this.props.status.get('id')}`);
}, }
handleReport () { handleReport () {
this.props.onReport(this.props.status); this.props.onReport(this.props.status);
this.context.router.push('/report'); this.context.router.push('/report');
}, }
render () { render () {
const { status, me, intl } = this.props; const { status, me, intl } = this.props;
@ -119,6 +112,24 @@ const StatusActionBar = React.createClass({
); );
} }
}); }
StatusActionBar.contextTypes = {
router: PropTypes.object
};
StatusActionBar.propTypes = {
status: ImmutablePropTypes.map.isRequired,
onReply: PropTypes.func,
onFavourite: PropTypes.func,
onReblog: PropTypes.func,
onDelete: PropTypes.func,
onMention: PropTypes.func,
onMute: PropTypes.func,
onBlock: PropTypes.func,
onReport: PropTypes.func,
me: PropTypes.number.isRequired,
intl: PropTypes.object.isRequired
};
export default injectIntl(StatusActionBar); export default injectIntl(StatusActionBar);

View File

@ -1,29 +1,24 @@
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import escapeTextContentForBrowser from 'escape-html'; import escapeTextContentForBrowser from 'escape-html';
import PropTypes from 'prop-types';
import emojify from '../emoji'; import emojify from '../emoji';
import { isRtl } from '../rtl'; import { isRtl } from '../rtl';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import Permalink from './permalink'; import Permalink from './permalink';
const StatusContent = React.createClass({ class StatusContent extends React.PureComponent {
contextTypes: { constructor (props, context) {
router: React.PropTypes.object super(props, context);
}, this.state = {
propTypes: {
status: ImmutablePropTypes.map.isRequired,
onClick: React.PropTypes.func
},
getInitialState () {
return {
hidden: true hidden: true
}; };
}, this.onMentionClick = this.onMentionClick.bind(this);
this.onHashtagClick = this.onHashtagClick.bind(this);
mixins: [PureRenderMixin], this.handleMouseDown = this.handleMouseDown.bind(this)
this.handleMouseUp = this.handleMouseUp.bind(this);
this.handleSpoilerClick = this.handleSpoilerClick.bind(this);
};
componentDidMount () { componentDidMount () {
const node = ReactDOM.findDOMNode(this); const node = ReactDOM.findDOMNode(this);
@ -47,14 +42,14 @@ const StatusContent = React.createClass({
link.setAttribute('title', link.href); link.setAttribute('title', link.href);
} }
} }
}, }
onMentionClick (mention, e) { onMentionClick (mention, e) {
if (e.button === 0) { if (e.button === 0) {
e.preventDefault(); e.preventDefault();
this.context.router.push(`/accounts/${mention.get('id')}`); this.context.router.push(`/accounts/${mention.get('id')}`);
} }
}, }
onHashtagClick (hashtag, e) { onHashtagClick (hashtag, e) {
hashtag = hashtag.replace(/^#/, '').toLowerCase(); hashtag = hashtag.replace(/^#/, '').toLowerCase();
@ -63,11 +58,11 @@ const StatusContent = React.createClass({
e.preventDefault(); e.preventDefault();
this.context.router.push(`/timelines/tag/${hashtag}`); this.context.router.push(`/timelines/tag/${hashtag}`);
} }
}, }
handleMouseDown (e) { handleMouseDown (e) {
this.startXY = [e.clientX, e.clientY]; this.startXY = [e.clientX, e.clientY];
}, }
handleMouseUp (e) { handleMouseUp (e) {
const [ startX, startY ] = this.startXY; const [ startX, startY ] = this.startXY;
@ -82,12 +77,12 @@ const StatusContent = React.createClass({
} }
this.startXY = null; this.startXY = null;
}, }
handleSpoilerClick (e) { handleSpoilerClick (e) {
e.preventDefault(); e.preventDefault();
this.setState({ hidden: !this.state.hidden }); this.setState({ hidden: !this.state.hidden });
}, }
render () { render () {
const { status } = this.props; const { status } = this.props;
@ -146,8 +141,17 @@ const StatusContent = React.createClass({
/> />
); );
} }
}, }
}); }
StatusContent.contextTypes = {
router: PropTypes.object
};
StatusContent.propTypes = {
status: ImmutablePropTypes.map.isRequired,
onClick: PropTypes.func
};
export default StatusContent; export default StatusContent;

View File

@ -1,32 +1,18 @@
import Status from './status'; import Status from './status';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import { ScrollContainer } from 'react-router-scroll'; import { ScrollContainer } from 'react-router-scroll';
import PropTypes from 'prop-types';
import StatusContainer from '../containers/status_container'; import StatusContainer from '../containers/status_container';
import LoadMore from './load_more'; import LoadMore from './load_more';
const StatusList = React.createClass({ class StatusList extends React.PureComponent {
propTypes: { constructor (props, context) {
statusIds: ImmutablePropTypes.list.isRequired, super(props, context);
onScrollToBottom: React.PropTypes.func, this.handleScroll = this.handleScroll.bind(this);
onScrollToTop: React.PropTypes.func, this.setRef = this.setRef.bind(this);
onScroll: React.PropTypes.func, this.handleLoadMore = this.handleLoadMore.bind(this);
trackScroll: React.PropTypes.bool, }
isLoading: React.PropTypes.bool,
isUnread: React.PropTypes.bool,
hasMore: React.PropTypes.bool,
prepend: React.PropTypes.node,
emptyMessage: React.PropTypes.node
},
getDefaultProps () {
return {
trackScroll: true
};
},
mixins: [PureRenderMixin],
handleScroll (e) { handleScroll (e) {
const { scrollTop, scrollHeight, clientHeight } = e.target; const { scrollTop, scrollHeight, clientHeight } = e.target;
@ -40,38 +26,38 @@ const StatusList = React.createClass({
} else if (this.props.onScroll) { } else if (this.props.onScroll) {
this.props.onScroll(); this.props.onScroll();
} }
}, }
componentDidMount () { componentDidMount () {
this.attachScrollListener(); this.attachScrollListener();
}, }
componentDidUpdate (prevProps) { componentDidUpdate (prevProps) {
if (this.node.scrollTop > 0 && (prevProps.statusIds.size < this.props.statusIds.size && prevProps.statusIds.first() !== this.props.statusIds.first() && !!this._oldScrollPosition)) { if (this.node.scrollTop > 0 && (prevProps.statusIds.size < this.props.statusIds.size && prevProps.statusIds.first() !== this.props.statusIds.first() && !!this._oldScrollPosition)) {
this.node.scrollTop = this.node.scrollHeight - this._oldScrollPosition; this.node.scrollTop = this.node.scrollHeight - this._oldScrollPosition;
} }
}, }
componentWillUnmount () { componentWillUnmount () {
this.detachScrollListener(); this.detachScrollListener();
}, }
attachScrollListener () { attachScrollListener () {
this.node.addEventListener('scroll', this.handleScroll); this.node.addEventListener('scroll', this.handleScroll);
}, }
detachScrollListener () { detachScrollListener () {
this.node.removeEventListener('scroll', this.handleScroll); this.node.removeEventListener('scroll', this.handleScroll);
}, }
setRef (c) { setRef (c) {
this.node = c; this.node = c;
}, }
handleLoadMore (e) { handleLoadMore (e) {
e.preventDefault(); e.preventDefault();
this.props.onScrollToBottom(); this.props.onScrollToBottom();
}, }
render () { render () {
const { statusIds, onScrollToBottom, trackScroll, isLoading, isUnread, hasMore, prepend, emptyMessage } = this.props; const { statusIds, onScrollToBottom, trackScroll, isLoading, isUnread, hasMore, prepend, emptyMessage } = this.props;
@ -123,6 +109,23 @@ const StatusList = React.createClass({
} }
} }
}); }
StatusList.propTypes = {
statusIds: ImmutablePropTypes.list.isRequired,
onScrollToBottom: PropTypes.func,
onScrollToTop: PropTypes.func,
onScroll: PropTypes.func,
trackScroll: PropTypes.bool,
isLoading: PropTypes.bool,
isUnread: PropTypes.bool,
hasMore: PropTypes.bool,
prepend: PropTypes.node,
emptyMessage: PropTypes.node
};
StatusList.defaultProps = {
trackScroll: true
};
export default StatusList; export default StatusList;

View File

@ -1,5 +1,5 @@
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PropTypes from 'prop-types';
import IconButton from './icon_button'; import IconButton from './icon_button';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { isIOS } from '../is_mobile'; import { isIOS } from '../is_mobile';
@ -72,39 +72,30 @@ const expandButtonStyle = {
zIndex: '100' zIndex: '100'
}; };
const VideoPlayer = React.createClass({ class VideoPlayer extends React.PureComponent {
propTypes: {
media: ImmutablePropTypes.map.isRequired,
width: React.PropTypes.number,
height: React.PropTypes.number,
sensitive: React.PropTypes.bool,
intl: React.PropTypes.object.isRequired,
autoplay: React.PropTypes.bool,
onOpenVideo: React.PropTypes.func.isRequired
},
getDefaultProps () { constructor (props, context) {
return { super(props, context);
width: 239, this.state = {
height: 110
};
},
getInitialState () {
return {
visible: !this.props.sensitive, visible: !this.props.sensitive,
preview: true, preview: true,
muted: true, muted: true,
hasAudio: true, hasAudio: true,
videoError: false videoError: false
}; };
}, this.handleClick = this.handleClick.bind(this);
this.handleVideoClick = this.handleVideoClick.bind(this);
mixins: [PureRenderMixin], this.handleOpen = this.handleOpen.bind(this);
this.handleVisibility = this.handleVisibility.bind(this);
this.handleExpand = this.handleExpand.bind(this);
this.setRef = this.setRef.bind(this);
this.handleLoadedData = this.handleLoadedData.bind(this);
this.handleVideoError = this.handleVideoError.bind(this);
}
handleClick () { handleClick () {
this.setState({ muted: !this.state.muted }); this.setState({ muted: !this.state.muted });
}, }
handleVideoClick (e) { handleVideoClick (e) {
e.stopPropagation(); e.stopPropagation();
@ -116,37 +107,37 @@ const VideoPlayer = React.createClass({
} else { } else {
node.pause(); node.pause();
} }
}, }
handleOpen () { handleOpen () {
this.setState({ preview: !this.state.preview }); this.setState({ preview: !this.state.preview });
}, }
handleVisibility () { handleVisibility () {
this.setState({ this.setState({
visible: !this.state.visible, visible: !this.state.visible,
preview: true preview: true
}); });
}, }
handleExpand () { handleExpand () {
this.video.pause(); this.video.pause();
this.props.onOpenVideo(this.props.media, this.video.currentTime); this.props.onOpenVideo(this.props.media, this.video.currentTime);
}, }
setRef (c) { setRef (c) {
this.video = c; this.video = c;
}, }
handleLoadedData () { handleLoadedData () {
if (('WebkitAppearance' in document.documentElement.style && this.video.audioTracks.length === 0) || this.video.mozHasAudio === false) { if (('WebkitAppearance' in document.documentElement.style && this.video.audioTracks.length === 0) || this.video.mozHasAudio === false) {
this.setState({ hasAudio: false }); this.setState({ hasAudio: false });
} }
}, }
handleVideoError () { handleVideoError () {
this.setState({ videoError: true }); this.setState({ videoError: true });
}, }
componentDidMount () { componentDidMount () {
if (!this.video) { if (!this.video) {
@ -155,7 +146,7 @@ const VideoPlayer = React.createClass({
this.video.addEventListener('loadeddata', this.handleLoadedData); this.video.addEventListener('loadeddata', this.handleLoadedData);
this.video.addEventListener('error', this.handleVideoError); this.video.addEventListener('error', this.handleVideoError);
}, }
componentDidUpdate () { componentDidUpdate () {
if (!this.video) { if (!this.video) {
@ -164,7 +155,7 @@ const VideoPlayer = React.createClass({
this.video.addEventListener('loadeddata', this.handleLoadedData); this.video.addEventListener('loadeddata', this.handleLoadedData);
this.video.addEventListener('error', this.handleVideoError); this.video.addEventListener('error', this.handleVideoError);
}, }
componentWillUnmount () { componentWillUnmount () {
if (!this.video) { if (!this.video) {
@ -173,7 +164,7 @@ const VideoPlayer = React.createClass({
this.video.removeEventListener('loadeddata', this.handleLoadedData); this.video.removeEventListener('loadeddata', this.handleLoadedData);
this.video.removeEventListener('error', this.handleVideoError); this.video.removeEventListener('error', this.handleVideoError);
}, }
render () { render () {
const { media, intl, width, height, sensitive, autoplay } = this.props; const { media, intl, width, height, sensitive, autoplay } = this.props;
@ -247,6 +238,21 @@ const VideoPlayer = React.createClass({
); );
} }
}); }
VideoPlayer.propTypes = {
media: ImmutablePropTypes.map.isRequired,
width: PropTypes.number,
height: PropTypes.number,
sensitive: PropTypes.bool,
intl: PropTypes.object.isRequired,
autoplay: PropTypes.bool,
onOpenVideo: PropTypes.func.isRequired
};
VideoPlayer.defaultProps = {
width: 239,
height: 110
};
export default injectIntl(VideoPlayer); export default injectIntl(VideoPlayer);

View File

@ -1,4 +1,5 @@
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import PropTypes from 'prop-types';
import configureStore from '../store/configureStore'; import configureStore from '../store/configureStore';
import { import {
refreshTimelineSuccess, refreshTimelineSuccess,
@ -96,11 +97,7 @@ addLocaleData([
...id, ...id,
]); ]);
const Mastodon = React.createClass({ class Mastodon extends React.Component {
propTypes: {
locale: React.PropTypes.string.isRequired
},
componentDidMount() { componentDidMount() {
const { locale } = this.props; const { locale } = this.props;
@ -145,14 +142,14 @@ const Mastodon = React.createClass({
} }
store.dispatch(showOnboardingOnce()); store.dispatch(showOnboardingOnce());
}, }
componentWillUnmount () { componentWillUnmount () {
if (typeof this.subscription !== 'undefined') { if (typeof this.subscription !== 'undefined') {
this.subscription.close(); this.subscription.close();
this.subscription = null; this.subscription = null;
} }
}, }
render () { render () {
const { locale } = this.props; const { locale } = this.props;
@ -195,6 +192,10 @@ const Mastodon = React.createClass({
); );
} }
}); }
Mastodon.propTypes = {
locale: PropTypes.string.isRequired
};
export default Mastodon; export default Mastodon;

View File

@ -1,5 +1,5 @@
import PureRenderMixin from 'react-addons-pure-render-mixin';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import DropdownMenu from '../../../components/dropdown_menu'; import DropdownMenu from '../../../components/dropdown_menu';
import { Link } from 'react-router'; import { Link } from 'react-router';
import { defineMessages, injectIntl, FormattedMessage, FormattedNumber } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage, FormattedNumber } from 'react-intl';
@ -28,20 +28,7 @@ const outerLinksStyle = {
lineHeight: '18px' lineHeight: '18px'
}; };
const ActionBar = React.createClass({ class ActionBar extends React.PureComponent {
propTypes: {
account: ImmutablePropTypes.map.isRequired,
me: React.PropTypes.number.isRequired,
onFollow: React.PropTypes.func,
onBlock: React.PropTypes.func.isRequired,
onMention: React.PropTypes.func.isRequired,
onReport: React.PropTypes.func.isRequired,
onMute: React.PropTypes.func.isRequired,
intl: React.PropTypes.object.isRequired
},
mixins: [PureRenderMixin],
render () { render () {
const { account, me, intl } = this.props; const { account, me, intl } = this.props;
@ -100,6 +87,17 @@ const ActionBar = React.createClass({
); );
} }
}); }
ActionBar.propTypes = {
account: ImmutablePropTypes.map.isRequired,
me: PropTypes.number.isRequired,
onFollow: PropTypes.func,
onBlock: PropTypes.func.isRequired,
onMention: PropTypes.func.isRequired,
onReport: PropTypes.func.isRequired,
onMute: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired
};
export default injectIntl(ActionBar); export default injectIntl(ActionBar);

View File

@ -1,5 +1,5 @@
import PureRenderMixin from 'react-addons-pure-render-mixin';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import emojify from '../../../emoji'; import emojify from '../../../emoji';
import escapeTextContentForBrowser from 'escape-html'; import escapeTextContentForBrowser from 'escape-html';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
@ -21,30 +21,28 @@ const makeMapStateToProps = () => {
return mapStateToProps; return mapStateToProps;
}; };
const Avatar = React.createClass({ class Avatar extends React.PureComponent {
propTypes: { constructor (props, context) {
account: ImmutablePropTypes.map.isRequired, super(props, context);
autoPlayGif: React.PropTypes.bool.isRequired
},
getInitialState () { this.state = {
return {
isHovered: false isHovered: false
}; };
},
mixins: [PureRenderMixin], this.handleMouseOver = this.handleMouseOver.bind(this);
this.handleMouseOut = this.handleMouseOut.bind(this);
}
handleMouseOver () { handleMouseOver () {
if (this.state.isHovered) return; if (this.state.isHovered) return;
this.setState({ isHovered: true }); this.setState({ isHovered: true });
}, }
handleMouseOut () { handleMouseOut () {
if (!this.state.isHovered) return; if (!this.state.isHovered) return;
this.setState({ isHovered: false }); this.setState({ isHovered: false });
}, }
render () { render () {
const { account, autoPlayGif } = this.props; const { account, autoPlayGif } = this.props;
@ -69,19 +67,14 @@ const Avatar = React.createClass({
); );
} }
}); }
const Header = React.createClass({ Avatar.propTypes = {
account: ImmutablePropTypes.map.isRequired,
autoPlayGif: PropTypes.bool.isRequired
};
propTypes: { class Header extends React.Component {
account: ImmutablePropTypes.map,
me: React.PropTypes.number.isRequired,
onFollow: React.PropTypes.func.isRequired,
intl: React.PropTypes.object.isRequired,
autoPlayGif: React.PropTypes.bool.isRequired
},
mixins: [PureRenderMixin],
render () { render () {
const { account, me, intl } = this.props; const { account, me, intl } = this.props;
@ -142,6 +135,14 @@ const Header = React.createClass({
); );
} }
}); }
Header.propTypes = {
account: ImmutablePropTypes.map,
me: PropTypes.number.isRequired,
onFollow: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
autoPlayGif: PropTypes.bool.isRequired
};
export default connect(makeMapStateToProps)(injectIntl(Header)); export default connect(makeMapStateToProps)(injectIntl(Header));

View File

@ -1,46 +1,40 @@
import PureRenderMixin from 'react-addons-pure-render-mixin';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import InnerHeader from '../../account/components/header'; import InnerHeader from '../../account/components/header';
import ActionBar from '../../account/components/action_bar'; import ActionBar from '../../account/components/action_bar';
import MissingIndicator from '../../../components/missing_indicator'; import MissingIndicator from '../../../components/missing_indicator';
const Header = React.createClass({ class Header extends React.PureComponent {
contextTypes: {
router: React.PropTypes.object
},
propTypes: { constructor (props, context) {
account: ImmutablePropTypes.map, super(props, context);
me: React.PropTypes.number.isRequired, this.handleFollow = this.handleFollow.bind(this);
onFollow: React.PropTypes.func.isRequired, this.handleBlock = this.handleBlock.bind(this);
onBlock: React.PropTypes.func.isRequired, this.handleMention = this.handleMention.bind(this);
onMention: React.PropTypes.func.isRequired, this.handleReport = this.handleReport.bind(this);
onReport: React.PropTypes.func.isRequired, this.handleMute = this.handleMute.bind(this);
onMute: React.PropTypes.func.isRequired }
},
mixins: [PureRenderMixin],
handleFollow () { handleFollow () {
this.props.onFollow(this.props.account); this.props.onFollow(this.props.account);
}, }
handleBlock () { handleBlock () {
this.props.onBlock(this.props.account); this.props.onBlock(this.props.account);
}, }
handleMention () { handleMention () {
this.props.onMention(this.props.account, this.context.router); this.props.onMention(this.props.account, this.context.router);
}, }
handleReport () { handleReport () {
this.props.onReport(this.props.account); this.props.onReport(this.props.account);
this.context.router.push('/report'); this.context.router.push('/report');
}, }
handleMute() { handleMute() {
this.props.onMute(this.props.account); this.props.onMute(this.props.account);
}, }
render () { render () {
const { account, me } = this.props; const { account, me } = this.props;
@ -68,6 +62,20 @@ const Header = React.createClass({
</div> </div>
); );
} }
}); }
Header.propTypes = {
account: ImmutablePropTypes.map,
me: PropTypes.number.isRequired,
onFollow: PropTypes.func.isRequired,
onBlock: PropTypes.func.isRequired,
onMention: PropTypes.func.isRequired,
onReport: PropTypes.func.isRequired,
onMute: PropTypes.func.isRequired
};
Header.contextTypes = {
router: PropTypes.object
};
export default Header; export default Header;

View File

@ -1,6 +1,6 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import { import {
fetchAccount, fetchAccount,
fetchAccountTimeline, fetchAccountTimeline,
@ -20,36 +20,30 @@ const mapStateToProps = (state, props) => ({
me: state.getIn(['meta', 'me']) me: state.getIn(['meta', 'me'])
}); });
const AccountTimeline = React.createClass({ class AccountTimeline extends React.PureComponent {
propTypes: { constructor (props, context) {
params: React.PropTypes.object.isRequired, super(props, context);
dispatch: React.PropTypes.func.isRequired, this.handleScrollToBottom = this.handleScrollToBottom.bind(this);
statusIds: ImmutablePropTypes.list, }
isLoading: React.PropTypes.bool,
hasMore: React.PropTypes.bool,
me: React.PropTypes.number.isRequired
},
mixins: [PureRenderMixin],
componentWillMount () { componentWillMount () {
this.props.dispatch(fetchAccount(Number(this.props.params.accountId))); this.props.dispatch(fetchAccount(Number(this.props.params.accountId)));
this.props.dispatch(fetchAccountTimeline(Number(this.props.params.accountId))); this.props.dispatch(fetchAccountTimeline(Number(this.props.params.accountId)));
}, }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if (nextProps.params.accountId !== this.props.params.accountId && nextProps.params.accountId) { if (nextProps.params.accountId !== this.props.params.accountId && nextProps.params.accountId) {
this.props.dispatch(fetchAccount(Number(nextProps.params.accountId))); this.props.dispatch(fetchAccount(Number(nextProps.params.accountId)));
this.props.dispatch(fetchAccountTimeline(Number(nextProps.params.accountId))); this.props.dispatch(fetchAccountTimeline(Number(nextProps.params.accountId)));
} }
}, }
handleScrollToBottom () { handleScrollToBottom () {
if (!this.props.isLoading && this.props.hasMore) { if (!this.props.isLoading && this.props.hasMore) {
this.props.dispatch(expandAccountTimeline(Number(this.props.params.accountId))); this.props.dispatch(expandAccountTimeline(Number(this.props.params.accountId)));
} }
}, }
render () { render () {
const { statusIds, isLoading, hasMore, me } = this.props; const { statusIds, isLoading, hasMore, me } = this.props;
@ -78,6 +72,15 @@ const AccountTimeline = React.createClass({
); );
} }
}); }
AccountTimeline.propTypes = {
params: PropTypes.object.isRequired,
dispatch: PropTypes.func.isRequired,
statusIds: ImmutablePropTypes.list,
isLoading: PropTypes.bool,
hasMore: PropTypes.bool,
me: PropTypes.number.isRequired
};
export default connect(mapStateToProps)(AccountTimeline); export default connect(mapStateToProps)(AccountTimeline);

View File

@ -1,6 +1,6 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import LoadingIndicator from '../../components/loading_indicator'; import LoadingIndicator from '../../components/loading_indicator';
import { ScrollContainer } from 'react-router-scroll'; import { ScrollContainer } from 'react-router-scroll';
import Column from '../ui/components/column'; import Column from '../ui/components/column';
@ -17,19 +17,16 @@ const mapStateToProps = state => ({
accountIds: state.getIn(['user_lists', 'blocks', 'items']) accountIds: state.getIn(['user_lists', 'blocks', 'items'])
}); });
const Blocks = React.createClass({ class Blocks extends React.PureComponent {
propTypes: {
params: React.PropTypes.object.isRequired,
dispatch: React.PropTypes.func.isRequired,
accountIds: ImmutablePropTypes.list,
intl: React.PropTypes.object.isRequired
},
mixins: [PureRenderMixin], constructor (props, context) {
super(props, context);
this.handleScroll = this.handleScroll.bind(this);
}
componentWillMount () { componentWillMount () {
this.props.dispatch(fetchBlocks()); this.props.dispatch(fetchBlocks());
}, }
handleScroll (e) { handleScroll (e) {
const { scrollTop, scrollHeight, clientHeight } = e.target; const { scrollTop, scrollHeight, clientHeight } = e.target;
@ -37,7 +34,7 @@ const Blocks = React.createClass({
if (scrollTop === scrollHeight - clientHeight) { if (scrollTop === scrollHeight - clientHeight) {
this.props.dispatch(expandBlocks()); this.props.dispatch(expandBlocks());
} }
}, }
render () { render () {
const { intl, accountIds } = this.props; const { intl, accountIds } = this.props;
@ -63,6 +60,13 @@ const Blocks = React.createClass({
</Column> </Column>
); );
} }
}); }
Blocks.propTypes = {
params: PropTypes.object.isRequired,
dispatch: PropTypes.func.isRequired,
accountIds: ImmutablePropTypes.list,
intl: PropTypes.object.isRequired
};
export default connect(mapStateToProps)(injectIntl(Blocks)); export default connect(mapStateToProps)(injectIntl(Blocks));

View File

@ -1,5 +1,5 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PropTypes from 'prop-types';
import StatusListContainer from '../ui/containers/status_list_container'; import StatusListContainer from '../ui/containers/status_list_container';
import Column from '../ui/components/column'; import Column from '../ui/components/column';
import { import {
@ -25,17 +25,7 @@ const mapStateToProps = state => ({
let subscription; let subscription;
const CommunityTimeline = React.createClass({ class CommunityTimeline extends React.PureComponent {
propTypes: {
dispatch: React.PropTypes.func.isRequired,
intl: React.PropTypes.object.isRequired,
streamingAPIBaseURL: React.PropTypes.string.isRequired,
accessToken: React.PropTypes.string.isRequired,
hasUnread: React.PropTypes.bool
},
mixins: [PureRenderMixin],
componentDidMount () { componentDidMount () {
const { dispatch, streamingAPIBaseURL, accessToken } = this.props; const { dispatch, streamingAPIBaseURL, accessToken } = this.props;
@ -72,14 +62,14 @@ const CommunityTimeline = React.createClass({
} }
}); });
}, }
componentWillUnmount () { componentWillUnmount () {
// if (typeof subscription !== 'undefined') { // if (typeof subscription !== 'undefined') {
// subscription.close(); // subscription.close();
// subscription = null; // subscription = null;
// } // }
}, }
render () { render () {
const { intl, hasUnread } = this.props; const { intl, hasUnread } = this.props;
@ -90,8 +80,16 @@ const CommunityTimeline = React.createClass({
<StatusListContainer type='community' emptyMessage={<FormattedMessage id='empty_column.community' defaultMessage='The local timeline is empty. Write something publicly to get the ball rolling!' />} /> <StatusListContainer type='community' emptyMessage={<FormattedMessage id='empty_column.community' defaultMessage='The local timeline is empty. Write something publicly to get the ball rolling!' />} />
</Column> </Column>
); );
}, }
}); }
CommunityTimeline.propTypes = {
dispatch: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
streamingAPIBaseURL: PropTypes.string.isRequired,
accessToken: PropTypes.string.isRequired,
hasUnread: PropTypes.bool
};
export default connect(mapStateToProps)(injectIntl(CommunityTimeline)); export default connect(mapStateToProps)(injectIntl(CommunityTimeline));

View File

@ -1,20 +1,13 @@
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PropTypes from 'prop-types';
const CharacterCounter = React.createClass({ class CharacterCounter extends React.PureComponent {
propTypes: {
text: React.PropTypes.string.isRequired,
max: React.PropTypes.number.isRequired
},
mixins: [PureRenderMixin],
checkRemainingText (diff) { checkRemainingText (diff) {
if (diff <= 0) { if (diff <= 0) {
return <span style={{ fontSize: '16px', cursor: 'default', color: '#ff5050' }}>{diff}</span>; return <span style={{ fontSize: '16px', cursor: 'default', color: '#ff5050' }}>{diff}</span>;
} }
return <span style={{ fontSize: '16px', cursor: 'default' }}>{diff}</span>; return <span style={{ fontSize: '16px', cursor: 'default' }}>{diff}</span>;
}, }
render () { render () {
const diff = this.props.max - this.props.text.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, "_").length; const diff = this.props.max - this.props.text.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, "_").length;
@ -22,6 +15,11 @@ const CharacterCounter = React.createClass({
return this.checkRemainingText(diff); return this.checkRemainingText(diff);
} }
}); }
CharacterCounter.propTypes = {
text: PropTypes.string.isRequired,
max: PropTypes.number.isRequired
}
export default CharacterCounter; export default CharacterCounter;

View File

@ -1,7 +1,7 @@
import CharacterCounter from './character_counter'; import CharacterCounter from './character_counter';
import Button from '../../../components/button'; import Button from '../../../components/button';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import ReplyIndicatorContainer from '../containers/reply_indicator_container'; import ReplyIndicatorContainer from '../containers/reply_indicator_container';
import AutosuggestTextarea from '../../../components/autosuggest_textarea'; import AutosuggestTextarea from '../../../components/autosuggest_textarea';
import { debounce } from 'react-decoration'; import { debounce } from 'react-decoration';
@ -22,67 +22,53 @@ const messages = defineMessages({
publish: { id: 'compose_form.publish', defaultMessage: 'Toot' } publish: { id: 'compose_form.publish', defaultMessage: 'Toot' }
}); });
const ComposeForm = React.createClass({ class ComposeForm extends React.PureComponent {
propTypes: { constructor (props, context) {
intl: React.PropTypes.object.isRequired, super(props, context);
text: React.PropTypes.string.isRequired, this.handleChange = this.handleChange.bind(this);
suggestion_token: React.PropTypes.string, this.handleKeyDown = this.handleKeyDown.bind(this);
suggestions: ImmutablePropTypes.list, this.handleSubmit = this.handleSubmit.bind(this);
spoiler: React.PropTypes.bool, this.onSuggestionsClearRequested = this.onSuggestionsClearRequested.bind(this);
privacy: React.PropTypes.string, this.onSuggestionsFetchRequested = this.onSuggestionsFetchRequested.bind(this);
spoiler_text: React.PropTypes.string, this.onSuggestionSelected = this.onSuggestionSelected.bind(this);
focusDate: React.PropTypes.instanceOf(Date), this.handleChangeSpoilerText = this.handleChangeSpoilerText.bind(this);
preselectDate: React.PropTypes.instanceOf(Date), this.setAutosuggestTextarea = this.setAutosuggestTextarea.bind(this);
is_submitting: React.PropTypes.bool, this.handleEmojiPick = this.handleEmojiPick.bind(this);
is_uploading: React.PropTypes.bool, }
me: React.PropTypes.number,
needsPrivacyWarning: React.PropTypes.bool,
mentionedDomains: React.PropTypes.array.isRequired,
onChange: React.PropTypes.func.isRequired,
onSubmit: React.PropTypes.func.isRequired,
onClearSuggestions: React.PropTypes.func.isRequired,
onFetchSuggestions: React.PropTypes.func.isRequired,
onSuggestionSelected: React.PropTypes.func.isRequired,
onChangeSpoilerText: React.PropTypes.func.isRequired,
onPaste: React.PropTypes.func.isRequired,
onPickEmoji: React.PropTypes.func.isRequired
},
mixins: [PureRenderMixin],
handleChange (e) { handleChange (e) {
this.props.onChange(e.target.value); this.props.onChange(e.target.value);
}, }
handleKeyDown (e) { handleKeyDown (e) {
if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) { if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) {
this.props.onSubmit(); this.props.onSubmit();
} }
}, }
handleSubmit () { handleSubmit () {
this.autosuggestTextarea.textarea.style.height = "auto"; this.autosuggestTextarea.textarea.style.height = "auto";
this.props.onSubmit(); this.props.onSubmit();
}, }
onSuggestionsClearRequested () { onSuggestionsClearRequested () {
this.props.onClearSuggestions(); this.props.onClearSuggestions();
}, }
@debounce(500) @debounce(500)
onSuggestionsFetchRequested (token) { onSuggestionsFetchRequested (token) {
this.props.onFetchSuggestions(token); this.props.onFetchSuggestions(token);
}, }
onSuggestionSelected (tokenStart, token, value) { onSuggestionSelected (tokenStart, token, value) {
this._restoreCaret = null; this._restoreCaret = null;
this.props.onSuggestionSelected(tokenStart, token, value); this.props.onSuggestionSelected(tokenStart, token, value);
}, }
handleChangeSpoilerText (e) { handleChangeSpoilerText (e) {
this.props.onChangeSpoilerText(e.target.value); this.props.onChangeSpoilerText(e.target.value);
}, }
componentWillReceiveProps (nextProps) { componentWillReceiveProps (nextProps) {
// If this is the update where we've finished uploading, // If this is the update where we've finished uploading,
@ -90,7 +76,7 @@ const ComposeForm = React.createClass({
if (!nextProps.is_uploading && this.props.is_uploading) { if (!nextProps.is_uploading && this.props.is_uploading) {
this._restoreCaret = this.autosuggestTextarea.textarea.selectionStart; this._restoreCaret = this.autosuggestTextarea.textarea.selectionStart;
} }
}, }
componentDidUpdate (prevProps) { componentDidUpdate (prevProps) {
// This statement does several things: // This statement does several things:
@ -117,17 +103,17 @@ const ComposeForm = React.createClass({
this.autosuggestTextarea.textarea.setSelectionRange(selectionStart, selectionEnd); this.autosuggestTextarea.textarea.setSelectionRange(selectionStart, selectionEnd);
this.autosuggestTextarea.textarea.focus(); this.autosuggestTextarea.textarea.focus();
} }
}, }
setAutosuggestTextarea (c) { setAutosuggestTextarea (c) {
this.autosuggestTextarea = c; this.autosuggestTextarea = c;
}, }
handleEmojiPick (data) { handleEmojiPick (data) {
const position = this.autosuggestTextarea.textarea.selectionStart; const position = this.autosuggestTextarea.textarea.selectionStart;
this._restoreCaret = position + data.shortname.length + 1; this._restoreCaret = position + data.shortname.length + 1;
this.props.onPickEmoji(position, data); this.props.onPickEmoji(position, data);
}, }
render () { render () {
const { intl, needsPrivacyWarning, mentionedDomains, onPaste } = this.props; const { intl, needsPrivacyWarning, mentionedDomains, onPaste } = this.props;
@ -207,6 +193,31 @@ const ComposeForm = React.createClass({
); );
} }
}); }
ComposeForm.propTypes = {
intl: PropTypes.object.isRequired,
text: PropTypes.string.isRequired,
suggestion_token: PropTypes.string,
suggestions: ImmutablePropTypes.list,
spoiler: PropTypes.bool,
privacy: PropTypes.string,
spoiler_text: PropTypes.string,
focusDate: PropTypes.instanceOf(Date),
preselectDate: PropTypes.instanceOf(Date),
is_submitting: PropTypes.bool,
is_uploading: PropTypes.bool,
me: PropTypes.number,
needsPrivacyWarning: PropTypes.bool,
mentionedDomains: PropTypes.array.isRequired,
onChange: PropTypes.func.isRequired,
onSubmit: PropTypes.func.isRequired,
onClearSuggestions: PropTypes.func.isRequired,
onFetchSuggestions: PropTypes.func.isRequired,
onSuggestionSelected: PropTypes.func.isRequired,
onChangeSpoilerText: PropTypes.func.isRequired,
onPaste: PropTypes.func.isRequired,
onPickEmoji: PropTypes.func.isRequired
};
export default injectIntl(ComposeForm); export default injectIntl(ComposeForm);

View File

@ -1,6 +1,6 @@
import Dropdown, { DropdownTrigger, DropdownContent } from 'react-simple-dropdown'; import Dropdown, { DropdownTrigger, DropdownContent } from 'react-simple-dropdown';
import EmojiPicker from 'emojione-picker'; import EmojiPicker from 'emojione-picker';
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PropTypes from 'prop-types';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
const messages = defineMessages({ const messages = defineMessages({
@ -19,23 +19,22 @@ const style = {
top: '5px' top: '5px'
}; };
const EmojiPickerDropdown = React.createClass({ class EmojiPickerDropdown extends React.PureComponent {
propTypes: { constructor (props, context) {
intl: React.PropTypes.object.isRequired, super(props, context);
onPickEmoji: React.PropTypes.func.isRequired this.setRef = this.setRef.bind(this);
}, this.handleChange = this.handleChange.bind(this);
}
mixins: [PureRenderMixin],
setRef (c) { setRef (c) {
this.dropdown = c; this.dropdown = c;
}, }
handleChange (data) { handleChange (data) {
this.dropdown.hide(); this.dropdown.hide();
this.props.onPickEmoji(data); this.props.onPickEmoji(data);
}, }
render () { render () {
const { intl } = this.props; const { intl } = this.props;
@ -53,6 +52,11 @@ const EmojiPickerDropdown = React.createClass({
); );
} }
}); }
EmojiPickerDropdown.propTypes = {
intl: PropTypes.object.isRequired,
onPickEmoji: PropTypes.func.isRequired
};
export default injectIntl(EmojiPickerDropdown); export default injectIntl(EmojiPickerDropdown);

View File

@ -1,4 +1,3 @@
import PureRenderMixin from 'react-addons-pure-render-mixin';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import Avatar from '../../../components/avatar'; import Avatar from '../../../components/avatar';
import IconButton from '../../../components/icon_button'; import IconButton from '../../../components/icon_button';
@ -7,12 +6,7 @@ import Permalink from '../../../components/permalink';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { Link } from 'react-router'; import { Link } from 'react-router';
const NavigationBar = React.createClass({ class NavigationBar extends React.PureComponent {
propTypes: {
account: ImmutablePropTypes.map.isRequired
},
mixins: [PureRenderMixin],
render () { render () {
return ( return (
@ -27,6 +21,10 @@ const NavigationBar = React.createClass({
); );
} }
}); }
NavigationBar.propTypes = {
account: ImmutablePropTypes.map.isRequired
};
export default NavigationBar; export default NavigationBar;

View File

@ -1,4 +1,4 @@
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PropTypes from 'prop-types';
import { injectIntl, defineMessages } from 'react-intl'; import { injectIntl, defineMessages } from 'react-intl';
import IconButton from '../../../components/icon_button'; import IconButton from '../../../components/icon_button';
@ -19,51 +19,48 @@ const iconStyle = {
height: null height: null
}; };
const PrivacyDropdown = React.createClass({ class PrivacyDropdown extends React.PureComponent {
propTypes: { constructor (props, context) {
value: React.PropTypes.string.isRequired, super(props, context);
onChange: React.PropTypes.func.isRequired, this.state = {
intl: React.PropTypes.object.isRequired
},
getInitialState () {
return {
open: false open: false
}; };
}, this.handleToggle = this.handleToggle.bind(this);
this.handleClick = this.handleClick.bind(this);
mixins: [PureRenderMixin], this.onGlobalClick = this.onGlobalClick.bind(this);
this.setRef = this.setRef.bind(this);
}
handleToggle () { handleToggle () {
this.setState({ open: !this.state.open }); this.setState({ open: !this.state.open });
}, }
handleClick (value, e) { handleClick (value, e) {
e.preventDefault(); e.preventDefault();
this.setState({ open: false }); this.setState({ open: false });
this.props.onChange(value); this.props.onChange(value);
}, }
onGlobalClick (e) { onGlobalClick (e) {
if (e.target !== this.node && !this.node.contains(e.target) && this.state.open) { if (e.target !== this.node && !this.node.contains(e.target) && this.state.open) {
this.setState({ open: false }); this.setState({ open: false });
} }
}, }
componentDidMount () { componentDidMount () {
window.addEventListener('click', this.onGlobalClick); window.addEventListener('click', this.onGlobalClick);
window.addEventListener('touchstart', this.onGlobalClick); window.addEventListener('touchstart', this.onGlobalClick);
}, }
componentWillUnmount () { componentWillUnmount () {
window.removeEventListener('click', this.onGlobalClick); window.removeEventListener('click', this.onGlobalClick);
window.removeEventListener('touchstart', this.onGlobalClick); window.removeEventListener('touchstart', this.onGlobalClick);
}, }
setRef (c) { setRef (c) {
this.node = c; this.node = c;
}, }
render () { render () {
const { value, onChange, intl } = this.props; const { value, onChange, intl } = this.props;
@ -96,6 +93,12 @@ const PrivacyDropdown = React.createClass({
); );
} }
}); }
PrivacyDropdown.propTypes = {
value: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired
};
export default injectIntl(PrivacyDropdown); export default injectIntl(PrivacyDropdown);

View File

@ -1,5 +1,5 @@
import PureRenderMixin from 'react-addons-pure-render-mixin';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import Avatar from '../../../components/avatar'; import Avatar from '../../../components/avatar';
import IconButton from '../../../components/icon_button'; import IconButton from '../../../components/icon_button';
import DisplayName from '../../../components/display_name'; import DisplayName from '../../../components/display_name';
@ -10,30 +10,24 @@ const messages = defineMessages({
cancel: { id: 'reply_indicator.cancel', defaultMessage: 'Cancel' } cancel: { id: 'reply_indicator.cancel', defaultMessage: 'Cancel' }
}); });
const ReplyIndicator = React.createClass({ class ReplyIndicator extends React.PureComponent {
contextTypes: { constructor (props, context) {
router: React.PropTypes.object super(props, context);
}, this.handleClick = this.handleClick.bind(this);
this.handleAccountClick = this.handleAccountClick.bind(this);
propTypes: { }
status: ImmutablePropTypes.map,
onCancel: React.PropTypes.func.isRequired,
intl: React.PropTypes.object.isRequired
},
mixins: [PureRenderMixin],
handleClick () { handleClick () {
this.props.onCancel(); this.props.onCancel();
}, }
handleAccountClick (e) { handleAccountClick (e) {
if (e.button === 0) { if (e.button === 0) {
e.preventDefault(); e.preventDefault();
this.context.router.push(`/accounts/${this.props.status.getIn(['account', 'id'])}`); this.context.router.push(`/accounts/${this.props.status.getIn(['account', 'id'])}`);
} }
}, }
render () { render () {
const { status, intl } = this.props; const { status, intl } = this.props;
@ -60,6 +54,16 @@ const ReplyIndicator = React.createClass({
); );
} }
}); }
ReplyIndicator.contextTypes = {
router: PropTypes.object
};
ReplyIndicator.propTypes = {
status: ImmutablePropTypes.map,
onCancel: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired
};
export default injectIntl(ReplyIndicator); export default injectIntl(ReplyIndicator);

View File

@ -1,48 +1,43 @@
import PureRenderMixin from 'react-addons-pure-render-mixin';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
const messages = defineMessages({ const messages = defineMessages({
placeholder: { id: 'search.placeholder', defaultMessage: 'Search' } placeholder: { id: 'search.placeholder', defaultMessage: 'Search' }
}); });
const Search = React.createClass({ class Search extends React.PureComponent {
propTypes: { constructor (props, context) {
value: React.PropTypes.string.isRequired, super(props, context);
submitted: React.PropTypes.bool, this.handleChange = this.handleChange.bind(this);
onChange: React.PropTypes.func.isRequired, this.handleKeyDown = this.handleKeyDown.bind(this);
onSubmit: React.PropTypes.func.isRequired, this.handleFocus = this.handleFocus.bind(this);
onClear: React.PropTypes.func.isRequired, }
onShow: React.PropTypes.func.isRequired,
intl: React.PropTypes.object.isRequired
},
mixins: [PureRenderMixin],
handleChange (e) { handleChange (e) {
this.props.onChange(e.target.value); this.props.onChange(e.target.value);
}, }
handleClear (e) { handleClear (e) {
e.preventDefault(); e.preventDefault();
this.props.onClear(); this.props.onClear();
}, }
handleKeyDown (e) { handleKeyDown (e) {
if (e.key === 'Enter') { if (e.key === 'Enter') {
e.preventDefault(); e.preventDefault();
this.props.onSubmit(); this.props.onSubmit();
} }
}, }
noop () { noop () {
}, }
handleFocus () { handleFocus () {
this.props.onShow(); this.props.onShow();
}, }
render () { render () {
const { intl, value, submitted } = this.props; const { intl, value, submitted } = this.props;
@ -68,6 +63,16 @@ const Search = React.createClass({
); );
} }
}); }
Search.propTypes = {
value: PropTypes.string.isRequired,
submitted: PropTypes.bool,
onChange: PropTypes.func.isRequired,
onSubmit: PropTypes.func.isRequired,
onClear: PropTypes.func.isRequired,
onShow: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired
};
export default injectIntl(Search); export default injectIntl(Search);

View File

@ -1,17 +1,10 @@
import PureRenderMixin from 'react-addons-pure-render-mixin';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import AccountContainer from '../../../containers/account_container'; import AccountContainer from '../../../containers/account_container';
import StatusContainer from '../../../containers/status_container'; import StatusContainer from '../../../containers/status_container';
import { Link } from 'react-router'; import { Link } from 'react-router';
const SearchResults = React.createClass({ class SearchResults extends React.PureComponent {
propTypes: {
results: ImmutablePropTypes.map.isRequired
},
mixins: [PureRenderMixin],
render () { render () {
const { results } = this.props; const { results } = this.props;
@ -63,6 +56,10 @@ const SearchResults = React.createClass({
); );
} }
}); }
SearchResults.propTypes = {
results: ImmutablePropTypes.map.isRequired
};
export default SearchResults; export default SearchResults;

View File

@ -1,20 +1,16 @@
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PropTypes from 'prop-types';
const TextIconButton = React.createClass({ class TextIconButton extends React.PureComponent {
propTypes: { constructor (props, context) {
label: React.PropTypes.string.isRequired, super(props, context);
title: React.PropTypes.string, this.handleClick = this.handleClick.bind(this);
active: React.PropTypes.bool, }
onClick: React.PropTypes.func.isRequired
},
mixins: [PureRenderMixin],
handleClick (e) { handleClick (e) {
e.preventDefault(); e.preventDefault();
this.props.onClick(); this.props.onClick();
}, }
render () { render () {
const { label, title, active } = this.props; const { label, title, active } = this.props;
@ -26,6 +22,13 @@ const TextIconButton = React.createClass({
); );
} }
}); }
TextIconButton.propTypes = {
label: PropTypes.string.isRequired,
title: PropTypes.string,
active: PropTypes.bool,
onClick: PropTypes.func.isRequired
};
export default TextIconButton; export default TextIconButton;

View File

@ -1,5 +1,5 @@
import PureRenderMixin from 'react-addons-pure-render-mixin';
import IconButton from '../../../components/icon_button'; import IconButton from '../../../components/icon_button';
import PropTypes from 'prop-types';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
const messages = defineMessages({ const messages = defineMessages({
@ -11,31 +11,28 @@ const iconStyle = {
height: null height: null
}; };
const UploadButton = React.createClass({ class UploadButton extends React.PureComponent {
propTypes: { constructor (props, context) {
disabled: React.PropTypes.bool, super(props, context);
onSelectFile: React.PropTypes.func.isRequired, this.handleChange = this.handleChange.bind(this);
style: React.PropTypes.object, this.handleClick = this.handleClick.bind(this);
resetFileKey: React.PropTypes.number, this.setRef = this.setRef.bind(this);
intl: React.PropTypes.object.isRequired }
},
mixins: [PureRenderMixin],
handleChange (e) { handleChange (e) {
if (e.target.files.length > 0) { if (e.target.files.length > 0) {
this.props.onSelectFile(e.target.files); this.props.onSelectFile(e.target.files);
} }
}, }
handleClick () { handleClick () {
this.fileElement.click(); this.fileElement.click();
}, }
setRef (c) { setRef (c) {
this.fileElement = c; this.fileElement = c;
}, }
render () { render () {
const { intl, resetFileKey, disabled } = this.props; const { intl, resetFileKey, disabled } = this.props;
@ -48,6 +45,14 @@ const UploadButton = React.createClass({
); );
} }
}); }
UploadButton.propTypes = {
disabled: PropTypes.bool,
onSelectFile: PropTypes.func.isRequired,
style: PropTypes.object,
resetFileKey: PropTypes.number,
intl: PropTypes.object.isRequired
};
export default injectIntl(UploadButton); export default injectIntl(UploadButton);

View File

@ -1,5 +1,5 @@
import PureRenderMixin from 'react-addons-pure-render-mixin';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import IconButton from '../../../components/icon_button'; import IconButton from '../../../components/icon_button';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
import UploadProgressContainer from '../containers/upload_progress_container'; import UploadProgressContainer from '../containers/upload_progress_container';
@ -9,15 +9,7 @@ const messages = defineMessages({
undo: { id: 'upload_form.undo', defaultMessage: 'Undo' } undo: { id: 'upload_form.undo', defaultMessage: 'Undo' }
}); });
const UploadForm = React.createClass({ class UploadForm extends React.PureComponent {
propTypes: {
media: ImmutablePropTypes.list.isRequired,
onRemoveFile: React.PropTypes.func.isRequired,
intl: React.PropTypes.object.isRequired
},
mixins: [PureRenderMixin],
render () { render () {
const { intl, media } = this.props; const { intl, media } = this.props;
@ -42,6 +34,12 @@ const UploadForm = React.createClass({
); );
} }
}); }
UploadForm.propTypes = {
media: ImmutablePropTypes.list.isRequired,
onRemoveFile: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired
};
export default injectIntl(UploadForm); export default injectIntl(UploadForm);

View File

@ -1,15 +1,8 @@
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PropTypes from 'prop-types';
import { Motion, spring } from 'react-motion'; import { Motion, spring } from 'react-motion';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
const UploadProgress = React.createClass({ class UploadProgress extends React.PureComponent {
propTypes: {
active: React.PropTypes.bool,
progress: React.PropTypes.number
},
mixins: [PureRenderMixin],
render () { render () {
const { active, progress } = this.props; const { active, progress } = this.props;
@ -39,6 +32,11 @@ const UploadProgress = React.createClass({
); );
} }
}); }
UploadProgress.propTypes = {
active: PropTypes.bool,
progress: PropTypes.number
};
export default UploadProgress; export default UploadProgress;

View File

@ -1,4 +1,5 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import TextIconButton from '../components/text_icon_button'; import TextIconButton from '../components/text_icon_button';
import { changeComposeSensitivity } from '../../../actions/compose'; import { changeComposeSensitivity } from '../../../actions/compose';
import { Motion, spring } from 'react-motion'; import { Motion, spring } from 'react-motion';
@ -21,14 +22,7 @@ const mapDispatchToProps = dispatch => ({
}); });
const SensitiveButton = React.createClass({ class SensitiveButton extends React.PureComponent {
propTypes: {
visible: React.PropTypes.bool,
active: React.PropTypes.bool,
onClick: React.PropTypes.func.isRequired,
intl: React.PropTypes.object.isRequired
},
render () { render () {
const { visible, active, onClick, intl } = this.props; const { visible, active, onClick, intl } = this.props;
@ -44,6 +38,13 @@ const SensitiveButton = React.createClass({
); );
} }
}); }
SensitiveButton.propTypes = {
visible: PropTypes.bool,
active: PropTypes.bool,
onClick: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired
};
export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(SensitiveButton)); export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(SensitiveButton));

View File

@ -1,7 +1,7 @@
import ComposeFormContainer from './containers/compose_form_container'; import ComposeFormContainer from './containers/compose_form_container';
import UploadFormContainer from './containers/upload_form_container'; import UploadFormContainer from './containers/upload_form_container';
import NavigationContainer from './containers/navigation_container'; import NavigationContainer from './containers/navigation_container';
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PropTypes from 'prop-types';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { mountCompose, unmountCompose } from '../../actions/compose'; import { mountCompose, unmountCompose } from '../../actions/compose';
import { Link } from 'react-router'; import { Link } from 'react-router';
@ -22,24 +22,15 @@ const mapStateToProps = state => ({
showSearch: state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']) showSearch: state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden'])
}); });
const Compose = React.createClass({ class Compose extends React.PureComponent {
propTypes: {
dispatch: React.PropTypes.func.isRequired,
withHeader: React.PropTypes.bool,
showSearch: React.PropTypes.bool,
intl: React.PropTypes.object.isRequired
},
mixins: [PureRenderMixin],
componentDidMount () { componentDidMount () {
this.props.dispatch(mountCompose()); this.props.dispatch(mountCompose());
}, }
componentWillUnmount () { componentWillUnmount () {
this.props.dispatch(unmountCompose()); this.props.dispatch(unmountCompose());
}, }
render () { render () {
const { withHeader, showSearch, intl } = this.props; const { withHeader, showSearch, intl } = this.props;
@ -82,6 +73,13 @@ const Compose = React.createClass({
); );
} }
}); }
Compose.propTypes = {
dispatch: PropTypes.func.isRequired,
withHeader: PropTypes.bool,
showSearch: PropTypes.bool,
intl: PropTypes.object.isRequired
};
export default connect(mapStateToProps)(injectIntl(Compose)); export default connect(mapStateToProps)(injectIntl(Compose));

View File

@ -1,5 +1,5 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import LoadingIndicator from '../../components/loading_indicator'; import LoadingIndicator from '../../components/loading_indicator';
import { fetchFavouritedStatuses, expandFavouritedStatuses } from '../../actions/favourites'; import { fetchFavouritedStatuses, expandFavouritedStatuses } from '../../actions/favourites';
@ -18,26 +18,20 @@ const mapStateToProps = state => ({
me: state.getIn(['meta', 'me']) me: state.getIn(['meta', 'me'])
}); });
const Favourites = React.createClass({ class Favourites extends React.PureComponent {
propTypes: { constructor (props, context) {
params: React.PropTypes.object.isRequired, super(props, context);
dispatch: React.PropTypes.func.isRequired, this.handleScrollToBottom = this.handleScrollToBottom.bind(this);
statusIds: ImmutablePropTypes.list.isRequired, }
loaded: React.PropTypes.bool,
intl: React.PropTypes.object.isRequired,
me: React.PropTypes.number.isRequired
},
mixins: [PureRenderMixin],
componentWillMount () { componentWillMount () {
this.props.dispatch(fetchFavouritedStatuses()); this.props.dispatch(fetchFavouritedStatuses());
}, }
handleScrollToBottom () { handleScrollToBottom () {
this.props.dispatch(expandFavouritedStatuses()); this.props.dispatch(expandFavouritedStatuses());
}, }
render () { render () {
const { statusIds, loaded, intl, me } = this.props; const { statusIds, loaded, intl, me } = this.props;
@ -58,6 +52,15 @@ const Favourites = React.createClass({
); );
} }
}); }
Favourites.propTypes = {
params: PropTypes.object.isRequired,
dispatch: PropTypes.func.isRequired,
statusIds: ImmutablePropTypes.list.isRequired,
loaded: PropTypes.bool,
intl: PropTypes.object.isRequired,
me: PropTypes.number.isRequired
};
export default connect(mapStateToProps)(injectIntl(Favourites)); export default connect(mapStateToProps)(injectIntl(Favourites));

View File

@ -1,5 +1,5 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import LoadingIndicator from '../../components/loading_indicator'; import LoadingIndicator from '../../components/loading_indicator';
import { fetchFavourites } from '../../actions/interactions'; import { fetchFavourites } from '../../actions/interactions';
@ -12,25 +12,17 @@ const mapStateToProps = (state, props) => ({
accountIds: state.getIn(['user_lists', 'favourited_by', Number(props.params.statusId)]) accountIds: state.getIn(['user_lists', 'favourited_by', Number(props.params.statusId)])
}); });
const Favourites = React.createClass({ class Favourites extends React.PureComponent {
propTypes: {
params: React.PropTypes.object.isRequired,
dispatch: React.PropTypes.func.isRequired,
accountIds: ImmutablePropTypes.list
},
mixins: [PureRenderMixin],
componentWillMount () { componentWillMount () {
this.props.dispatch(fetchFavourites(Number(this.props.params.statusId))); this.props.dispatch(fetchFavourites(Number(this.props.params.statusId)));
}, }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if (nextProps.params.statusId !== this.props.params.statusId && nextProps.params.statusId) { if (nextProps.params.statusId !== this.props.params.statusId && nextProps.params.statusId) {
this.props.dispatch(fetchFavourites(Number(nextProps.params.statusId))); this.props.dispatch(fetchFavourites(Number(nextProps.params.statusId)));
} }
}, }
render () { render () {
const { accountIds } = this.props; const { accountIds } = this.props;
@ -56,6 +48,12 @@ const Favourites = React.createClass({
); );
} }
}); }
Favourites.propTypes = {
params: PropTypes.object.isRequired,
dispatch: PropTypes.func.isRequired,
accountIds: ImmutablePropTypes.list
};
export default connect(mapStateToProps)(Favourites); export default connect(mapStateToProps)(Favourites);

View File

@ -1,3 +1,4 @@
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import Permalink from '../../../components/permalink'; import Permalink from '../../../components/permalink';
import Avatar from '../../../components/avatar'; import Avatar from '../../../components/avatar';
@ -50,9 +51,9 @@ const AccountAuthorize = ({ intl, account, onAuthorize, onReject }) => {
AccountAuthorize.propTypes = { AccountAuthorize.propTypes = {
account: ImmutablePropTypes.map.isRequired, account: ImmutablePropTypes.map.isRequired,
onAuthorize: React.PropTypes.func.isRequired, onAuthorize: PropTypes.func.isRequired,
onReject: React.PropTypes.func.isRequired, onReject: PropTypes.func.isRequired,
intl: React.PropTypes.object.isRequired intl: PropTypes.object.isRequired
}; };
export default injectIntl(AccountAuthorize); export default injectIntl(AccountAuthorize);

View File

@ -1,5 +1,5 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import LoadingIndicator from '../../components/loading_indicator'; import LoadingIndicator from '../../components/loading_indicator';
import { ScrollContainer } from 'react-router-scroll'; import { ScrollContainer } from 'react-router-scroll';
@ -17,19 +17,16 @@ const mapStateToProps = state => ({
accountIds: state.getIn(['user_lists', 'follow_requests', 'items']) accountIds: state.getIn(['user_lists', 'follow_requests', 'items'])
}); });
const FollowRequests = React.createClass({ class FollowRequests extends React.PureComponent {
propTypes: {
params: React.PropTypes.object.isRequired,
dispatch: React.PropTypes.func.isRequired,
accountIds: ImmutablePropTypes.list,
intl: React.PropTypes.object.isRequired
},
mixins: [PureRenderMixin], constructor (props, context) {
super(props, context);
this.handleScroll = this.handleScroll.bind(this);
}
componentWillMount () { componentWillMount () {
this.props.dispatch(fetchFollowRequests()); this.props.dispatch(fetchFollowRequests());
}, }
handleScroll (e) { handleScroll (e) {
const { scrollTop, scrollHeight, clientHeight } = e.target; const { scrollTop, scrollHeight, clientHeight } = e.target;
@ -37,7 +34,7 @@ const FollowRequests = React.createClass({
if (scrollTop === scrollHeight - clientHeight) { if (scrollTop === scrollHeight - clientHeight) {
this.props.dispatch(expandFollowRequests()); this.props.dispatch(expandFollowRequests());
} }
}, }
render () { render () {
const { intl, accountIds } = this.props; const { intl, accountIds } = this.props;
@ -63,6 +60,13 @@ const FollowRequests = React.createClass({
</Column> </Column>
); );
} }
}); }
FollowRequests.propTypes = {
params: PropTypes.object.isRequired,
dispatch: PropTypes.func.isRequired,
accountIds: ImmutablePropTypes.list,
intl: PropTypes.object.isRequired
};
export default connect(mapStateToProps)(injectIntl(FollowRequests)); export default connect(mapStateToProps)(injectIntl(FollowRequests));

View File

@ -1,5 +1,5 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import LoadingIndicator from '../../components/loading_indicator'; import LoadingIndicator from '../../components/loading_indicator';
import { import {
@ -18,27 +18,25 @@ const mapStateToProps = (state, props) => ({
accountIds: state.getIn(['user_lists', 'followers', Number(props.params.accountId), 'items']) accountIds: state.getIn(['user_lists', 'followers', Number(props.params.accountId), 'items'])
}); });
const Followers = React.createClass({ class Followers extends React.PureComponent {
propTypes: { constructor (props, context) {
params: React.PropTypes.object.isRequired, super(props, context);
dispatch: React.PropTypes.func.isRequired, this.handleScroll = this.handleScroll.bind(this);
accountIds: ImmutablePropTypes.list this.handleLoadMore = this.handleLoadMore.bind(this);
}, }
mixins: [PureRenderMixin],
componentWillMount () { componentWillMount () {
this.props.dispatch(fetchAccount(Number(this.props.params.accountId))); this.props.dispatch(fetchAccount(Number(this.props.params.accountId)));
this.props.dispatch(fetchFollowers(Number(this.props.params.accountId))); this.props.dispatch(fetchFollowers(Number(this.props.params.accountId)));
}, }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if (nextProps.params.accountId !== this.props.params.accountId && nextProps.params.accountId) { if (nextProps.params.accountId !== this.props.params.accountId && nextProps.params.accountId) {
this.props.dispatch(fetchAccount(Number(nextProps.params.accountId))); this.props.dispatch(fetchAccount(Number(nextProps.params.accountId)));
this.props.dispatch(fetchFollowers(Number(nextProps.params.accountId))); this.props.dispatch(fetchFollowers(Number(nextProps.params.accountId)));
} }
}, }
handleScroll (e) { handleScroll (e) {
const { scrollTop, scrollHeight, clientHeight } = e.target; const { scrollTop, scrollHeight, clientHeight } = e.target;
@ -46,12 +44,12 @@ const Followers = React.createClass({
if (scrollTop === scrollHeight - clientHeight) { if (scrollTop === scrollHeight - clientHeight) {
this.props.dispatch(expandFollowers(Number(this.props.params.accountId))); this.props.dispatch(expandFollowers(Number(this.props.params.accountId)));
} }
}, }
handleLoadMore (e) { handleLoadMore (e) {
e.preventDefault(); e.preventDefault();
this.props.dispatch(expandFollowers(Number(this.props.params.accountId))); this.props.dispatch(expandFollowers(Number(this.props.params.accountId)));
}, }
render () { render () {
const { accountIds } = this.props; const { accountIds } = this.props;
@ -81,6 +79,12 @@ const Followers = React.createClass({
); );
} }
}); }
Followers.propTypes = {
params: PropTypes.object.isRequired,
dispatch: PropTypes.func.isRequired,
accountIds: ImmutablePropTypes.list
};
export default connect(mapStateToProps)(Followers); export default connect(mapStateToProps)(Followers);

View File

@ -1,5 +1,5 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import LoadingIndicator from '../../components/loading_indicator'; import LoadingIndicator from '../../components/loading_indicator';
import { import {
@ -18,27 +18,25 @@ const mapStateToProps = (state, props) => ({
accountIds: state.getIn(['user_lists', 'following', Number(props.params.accountId), 'items']) accountIds: state.getIn(['user_lists', 'following', Number(props.params.accountId), 'items'])
}); });
const Following = React.createClass({ class Following extends React.PureComponent {
propTypes: { constructor (props, context) {
params: React.PropTypes.object.isRequired, super(props, context);
dispatch: React.PropTypes.func.isRequired, this.handleScroll = this.handleScroll.bind(this);
accountIds: ImmutablePropTypes.list this.handleLoadMore = this.handleLoadMore.bind(this);
}, }
mixins: [PureRenderMixin],
componentWillMount () { componentWillMount () {
this.props.dispatch(fetchAccount(Number(this.props.params.accountId))); this.props.dispatch(fetchAccount(Number(this.props.params.accountId)));
this.props.dispatch(fetchFollowing(Number(this.props.params.accountId))); this.props.dispatch(fetchFollowing(Number(this.props.params.accountId)));
}, }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if (nextProps.params.accountId !== this.props.params.accountId && nextProps.params.accountId) { if (nextProps.params.accountId !== this.props.params.accountId && nextProps.params.accountId) {
this.props.dispatch(fetchAccount(Number(nextProps.params.accountId))); this.props.dispatch(fetchAccount(Number(nextProps.params.accountId)));
this.props.dispatch(fetchFollowing(Number(nextProps.params.accountId))); this.props.dispatch(fetchFollowing(Number(nextProps.params.accountId)));
} }
}, }
handleScroll (e) { handleScroll (e) {
const { scrollTop, scrollHeight, clientHeight } = e.target; const { scrollTop, scrollHeight, clientHeight } = e.target;
@ -46,12 +44,12 @@ const Following = React.createClass({
if (scrollTop === scrollHeight - clientHeight) { if (scrollTop === scrollHeight - clientHeight) {
this.props.dispatch(expandFollowing(Number(this.props.params.accountId))); this.props.dispatch(expandFollowing(Number(this.props.params.accountId)));
} }
}, }
handleLoadMore (e) { handleLoadMore (e) {
e.preventDefault(); e.preventDefault();
this.props.dispatch(expandFollowing(Number(this.props.params.accountId))); this.props.dispatch(expandFollowing(Number(this.props.params.accountId)));
}, }
render () { render () {
const { accountIds } = this.props; const { accountIds } = this.props;
@ -81,6 +79,12 @@ const Following = React.createClass({
); );
} }
}); }
Following.propTypes = {
params: PropTypes.object.isRequired,
dispatch: PropTypes.func.isRequired,
accountIds: ImmutablePropTypes.list
};
export default connect(mapStateToProps)(Following); export default connect(mapStateToProps)(Following);

View File

@ -3,6 +3,7 @@ import ColumnLink from '../ui/components/column_link';
import { Link } from 'react-router'; import { Link } from 'react-router';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
const messages = defineMessages({ const messages = defineMessages({
@ -53,7 +54,7 @@ const GettingStarted = ({ intl, me }) => {
}; };
GettingStarted.propTypes = { GettingStarted.propTypes = {
intl: React.PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
me: ImmutablePropTypes.map.isRequired me: ImmutablePropTypes.map.isRequired
}; };

View File

@ -1,5 +1,5 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PropTypes from 'prop-types';
import StatusListContainer from '../ui/containers/status_list_container'; import StatusListContainer from '../ui/containers/status_list_container';
import Column from '../ui/components/column'; import Column from '../ui/components/column';
import { import {
@ -17,17 +17,7 @@ const mapStateToProps = state => ({
accessToken: state.getIn(['meta', 'access_token']) accessToken: state.getIn(['meta', 'access_token'])
}); });
const HashtagTimeline = React.createClass({ class HashtagTimeline extends React.PureComponent {
propTypes: {
params: React.PropTypes.object.isRequired,
dispatch: React.PropTypes.func.isRequired,
streamingAPIBaseURL: React.PropTypes.string.isRequired,
accessToken: React.PropTypes.string.isRequired,
hasUnread: React.PropTypes.bool
},
mixins: [PureRenderMixin],
_subscribe (dispatch, id) { _subscribe (dispatch, id) {
const { streamingAPIBaseURL, accessToken } = this.props; const { streamingAPIBaseURL, accessToken } = this.props;
@ -46,14 +36,14 @@ const HashtagTimeline = React.createClass({
} }
}); });
}, }
_unsubscribe () { _unsubscribe () {
if (typeof this.subscription !== 'undefined') { if (typeof this.subscription !== 'undefined') {
this.subscription.close(); this.subscription.close();
this.subscription = null; this.subscription = null;
} }
}, }
componentDidMount () { componentDidMount () {
const { dispatch } = this.props; const { dispatch } = this.props;
@ -61,7 +51,7 @@ const HashtagTimeline = React.createClass({
dispatch(refreshTimeline('tag', id)); dispatch(refreshTimeline('tag', id));
this._subscribe(dispatch, id); this._subscribe(dispatch, id);
}, }
componentWillReceiveProps (nextProps) { componentWillReceiveProps (nextProps) {
if (nextProps.params.id !== this.props.params.id) { if (nextProps.params.id !== this.props.params.id) {
@ -69,11 +59,11 @@ const HashtagTimeline = React.createClass({
this._unsubscribe(); this._unsubscribe();
this._subscribe(this.props.dispatch, nextProps.params.id); this._subscribe(this.props.dispatch, nextProps.params.id);
} }
}, }
componentWillUnmount () { componentWillUnmount () {
this._unsubscribe(); this._unsubscribe();
}, }
render () { render () {
const { id, hasUnread } = this.props.params; const { id, hasUnread } = this.props.params;
@ -84,8 +74,16 @@ const HashtagTimeline = React.createClass({
<StatusListContainer type='tag' id={id} emptyMessage={<FormattedMessage id='empty_column.hashtag' defaultMessage='There is nothing in this hashtag yet.' />} /> <StatusListContainer type='tag' id={id} emptyMessage={<FormattedMessage id='empty_column.hashtag' defaultMessage='There is nothing in this hashtag yet.' />} />
</Column> </Column>
); );
}, }
}); }
HashtagTimeline.propTypes = {
params: PropTypes.object.isRequired,
dispatch: PropTypes.func.isRequired,
streamingAPIBaseURL: PropTypes.string.isRequired,
accessToken: PropTypes.string.isRequired,
hasUnread: PropTypes.bool
};
export default connect(mapStateToProps)(HashtagTimeline); export default connect(mapStateToProps)(HashtagTimeline);

View File

@ -1,4 +1,4 @@
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import ColumnCollapsable from '../../../components/column_collapsable'; import ColumnCollapsable from '../../../components/column_collapsable';
@ -25,16 +25,7 @@ const rowStyle = {
}; };
const ColumnSettings = React.createClass({ class ColumnSettings extends React.PureComponent {
propTypes: {
settings: ImmutablePropTypes.map.isRequired,
onChange: React.PropTypes.func.isRequired,
onSave: React.PropTypes.func.isRequired,
intl: React.PropTypes.object.isRequired
},
mixins: [PureRenderMixin],
render () { render () {
const { settings, onChange, onSave, intl } = this.props; const { settings, onChange, onSave, intl } = this.props;
@ -62,6 +53,13 @@ const ColumnSettings = React.createClass({
); );
} }
}); }
ColumnSettings.propTypes = {
settings: ImmutablePropTypes.map.isRequired,
onChange: PropTypes.func.isRequired,
onSave: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired
}
export default injectIntl(ColumnSettings); export default injectIntl(ColumnSettings);

View File

@ -1,3 +1,4 @@
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
const style = { const style = {
@ -9,18 +10,16 @@ const style = {
width: '100%' width: '100%'
}; };
const SettingText = React.createClass({ class SettingText extends React.PureComponent {
propTypes: { constructor (props, context) {
settings: ImmutablePropTypes.map.isRequired, super(props, context);
settingKey: React.PropTypes.array.isRequired, this.handleChange = this.handleChange.bind(this);
label: React.PropTypes.string.isRequired, }
onChange: React.PropTypes.func.isRequired
},
handleChange (e) { handleChange (e) {
this.props.onChange(this.props.settingKey, e.target.value) this.props.onChange(this.props.settingKey, e.target.value)
}, }
render () { render () {
const { settings, settingKey, label } = this.props; const { settings, settingKey, label } = this.props;
@ -36,6 +35,13 @@ const SettingText = React.createClass({
); );
} }
}); }
SettingText.propTypes = {
settings: ImmutablePropTypes.map.isRequired,
settingKey: PropTypes.array.isRequired,
label: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired
};
export default SettingText; export default SettingText;

View File

@ -1,5 +1,5 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PropTypes from 'prop-types';
import StatusListContainer from '../ui/containers/status_list_container'; import StatusListContainer from '../ui/containers/status_list_container';
import Column from '../ui/components/column'; import Column from '../ui/components/column';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
@ -14,14 +14,7 @@ const mapStateToProps = state => ({
hasUnread: state.getIn(['timelines', 'home', 'unread']) > 0 hasUnread: state.getIn(['timelines', 'home', 'unread']) > 0
}); });
const HomeTimeline = React.createClass({ class HomeTimeline extends React.PureComponent {
propTypes: {
intl: React.PropTypes.object.isRequired,
hasUnread: React.PropTypes.bool
},
mixins: [PureRenderMixin],
render () { render () {
const { intl, hasUnread } = this.props; const { intl, hasUnread } = this.props;
@ -32,8 +25,13 @@ const HomeTimeline = React.createClass({
<StatusListContainer {...this.props} type='home' emptyMessage={<FormattedMessage id='empty_column.home' defaultMessage="You aren't following anyone yet. Visit {public} or use search to get started and meet other users." values={{ public: <Link to='/timelines/public'><FormattedMessage id='empty_column.home.public_timeline' defaultMessage='the public timeline' /></Link> }} />} /> <StatusListContainer {...this.props} type='home' emptyMessage={<FormattedMessage id='empty_column.home' defaultMessage="You aren't following anyone yet. Visit {public} or use search to get started and meet other users." values={{ public: <Link to='/timelines/public'><FormattedMessage id='empty_column.home.public_timeline' defaultMessage='the public timeline' /></Link> }} />} />
</Column> </Column>
); );
}, }
}); }
HomeTimeline.propTypes = {
intl: PropTypes.object.isRequired,
hasUnread: PropTypes.bool
};
export default connect(mapStateToProps)(injectIntl(HomeTimeline)); export default connect(mapStateToProps)(injectIntl(HomeTimeline));

View File

@ -1,5 +1,5 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import LoadingIndicator from '../../components/loading_indicator'; import LoadingIndicator from '../../components/loading_indicator';
import { ScrollContainer } from 'react-router-scroll'; import { ScrollContainer } from 'react-router-scroll';
@ -17,19 +17,16 @@ const mapStateToProps = state => ({
accountIds: state.getIn(['user_lists', 'mutes', 'items']) accountIds: state.getIn(['user_lists', 'mutes', 'items'])
}); });
const Mutes = React.createClass({ class Mutes extends React.PureComponent {
propTypes: {
params: React.PropTypes.object.isRequired,
dispatch: React.PropTypes.func.isRequired,
accountIds: ImmutablePropTypes.list,
intl: React.PropTypes.object.isRequired
},
mixins: [PureRenderMixin], constructor (props, context) {
super(props, context);
this.handleScroll = this.handleScroll.bind(this);
}
componentWillMount () { componentWillMount () {
this.props.dispatch(fetchMutes()); this.props.dispatch(fetchMutes());
}, }
handleScroll (e) { handleScroll (e) {
const { scrollTop, scrollHeight, clientHeight } = e.target; const { scrollTop, scrollHeight, clientHeight } = e.target;
@ -37,7 +34,7 @@ const Mutes = React.createClass({
if (scrollTop === scrollHeight - clientHeight) { if (scrollTop === scrollHeight - clientHeight) {
this.props.dispatch(expandMutes()); this.props.dispatch(expandMutes());
} }
}, }
render () { render () {
const { intl, accountIds } = this.props; const { intl, accountIds } = this.props;
@ -63,6 +60,13 @@ const Mutes = React.createClass({
</Column> </Column>
); );
} }
}); }
Mutes.propTypes = {
params: PropTypes.object.isRequired,
dispatch: PropTypes.func.isRequired,
accountIds: ImmutablePropTypes.list,
intl: PropTypes.object.isRequired
};
export default connect(mapStateToProps)(injectIntl(Mutes)); export default connect(mapStateToProps)(injectIntl(Mutes));

View File

@ -1,15 +1,11 @@
import PropTypes from 'prop-types';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
const messages = defineMessages({ const messages = defineMessages({
clear: { id: 'notifications.clear', defaultMessage: 'Clear notifications' } clear: { id: 'notifications.clear', defaultMessage: 'Clear notifications' }
}); });
const ClearColumnButton = React.createClass({ class ClearColumnButton extends React.Component {
propTypes: {
onClick: React.PropTypes.func.isRequired,
intl: React.PropTypes.object.isRequired
},
render () { render () {
const { intl } = this.props; const { intl } = this.props;
@ -20,6 +16,11 @@ const ClearColumnButton = React.createClass({
</div> </div>
); );
} }
}) }
ClearColumnButton.propTypes = {
onClick: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired
};
export default injectIntl(ClearColumnButton); export default injectIntl(ClearColumnButton);

View File

@ -1,4 +1,4 @@
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import ColumnCollapsable from '../../../components/column_collapsable'; import ColumnCollapsable from '../../../components/column_collapsable';
@ -23,18 +23,7 @@ const rowStyle = {
}; };
const ColumnSettings = React.createClass({ class ColumnSettings extends React.PureComponent {
propTypes: {
settings: ImmutablePropTypes.map.isRequired,
onChange: React.PropTypes.func.isRequired,
onSave: React.PropTypes.func.isRequired,
intl: React.PropTypes.shape({
formatMessage: React.PropTypes.func.isRequired
}).isRequired
},
mixins: [PureRenderMixin],
render () { render () {
const { settings, intl, onChange, onSave } = this.props; const { settings, intl, onChange, onSave } = this.props;
@ -82,6 +71,15 @@ const ColumnSettings = React.createClass({
); );
} }
}); }
ColumnSettings.propTypes = {
settings: ImmutablePropTypes.map.isRequired,
onChange: PropTypes.func.isRequired,
onSave: PropTypes.func.isRequired,
intl: PropTypes.shape({
formatMessage: PropTypes.func.isRequired
}).isRequired
};
export default injectIntl(ColumnSettings); export default injectIntl(ColumnSettings);

View File

@ -1,4 +1,3 @@
import PureRenderMixin from 'react-addons-pure-render-mixin';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import StatusContainer from '../../../containers/status_container'; import StatusContainer from '../../../containers/status_container';
import AccountContainer from '../../../containers/account_container'; import AccountContainer from '../../../containers/account_container';
@ -11,13 +10,7 @@ const linkStyle = {
fontWeight: '500' fontWeight: '500'
}; };
const Notification = React.createClass({ class Notification extends React.PureComponent {
propTypes: {
notification: ImmutablePropTypes.map.isRequired
},
mixins: [PureRenderMixin],
renderFollow (account, link) { renderFollow (account, link) {
return ( return (
@ -33,11 +26,11 @@ const Notification = React.createClass({
<AccountContainer id={account.get('id')} withNote={false} /> <AccountContainer id={account.get('id')} withNote={false} />
</div> </div>
); );
}, }
renderMention (notification) { renderMention (notification) {
return <StatusContainer id={notification.get('status')} />; return <StatusContainer id={notification.get('status')} />;
}, }
renderFavourite (notification, link) { renderFavourite (notification, link) {
return ( return (
@ -53,7 +46,7 @@ const Notification = React.createClass({
<StatusContainer id={notification.get('status')} muted={true} /> <StatusContainer id={notification.get('status')} muted={true} />
</div> </div>
); );
}, }
renderReblog (notification, link) { renderReblog (notification, link) {
return ( return (
@ -69,7 +62,7 @@ const Notification = React.createClass({
<StatusContainer id={notification.get('status')} muted={true} /> <StatusContainer id={notification.get('status')} muted={true} />
</div> </div>
); );
}, }
render () { // eslint-disable-line consistent-return render () { // eslint-disable-line consistent-return
const { notification } = this.props; const { notification } = this.props;
@ -90,6 +83,10 @@ const Notification = React.createClass({
} }
} }
}); }
Notification.propTypes = {
notification: ImmutablePropTypes.map.isRequired
};
export default Notification; export default Notification;

View File

@ -1,3 +1,4 @@
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import Toggle from 'react-toggle'; import Toggle from 'react-toggle';
@ -23,10 +24,10 @@ const SettingToggle = ({ settings, settingKey, label, onChange, htmlFor = '' })
SettingToggle.propTypes = { SettingToggle.propTypes = {
settings: ImmutablePropTypes.map.isRequired, settings: ImmutablePropTypes.map.isRequired,
settingKey: React.PropTypes.array.isRequired, settingKey: PropTypes.array.isRequired,
label: React.PropTypes.node.isRequired, label: PropTypes.node.isRequired,
onChange: React.PropTypes.func.isRequired, onChange: PropTypes.func.isRequired,
htmlFor: React.PropTypes.string htmlFor: PropTypes.string
}; };
export default SettingToggle; export default SettingToggle;

View File

@ -1,5 +1,5 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import Column from '../ui/components/column'; import Column from '../ui/components/column';
import { expandNotifications, clearNotifications, scrollTopNotifications } from '../../actions/notifications'; import { expandNotifications, clearNotifications, scrollTopNotifications } from '../../actions/notifications';
@ -28,24 +28,15 @@ const mapStateToProps = state => ({
isUnread: state.getIn(['notifications', 'unread']) > 0 isUnread: state.getIn(['notifications', 'unread']) > 0
}); });
const Notifications = React.createClass({ class Notifications extends React.PureComponent {
propTypes: { constructor (props, context) {
notifications: ImmutablePropTypes.list.isRequired, super(props, context);
dispatch: React.PropTypes.func.isRequired, this.handleScroll = this.handleScroll.bind(this);
trackScroll: React.PropTypes.bool, this.handleLoadMore = this.handleLoadMore.bind(this);
intl: React.PropTypes.object.isRequired, this.handleClear = this.handleClear.bind(this);
isLoading: React.PropTypes.bool, this.setRef = this.setRef.bind(this);
isUnread: React.PropTypes.bool }
},
getDefaultProps () {
return {
trackScroll: true
};
},
mixins: [PureRenderMixin],
handleScroll (e) { handleScroll (e) {
const { scrollTop, scrollHeight, clientHeight } = e.target; const { scrollTop, scrollHeight, clientHeight } = e.target;
@ -59,28 +50,28 @@ const Notifications = React.createClass({
} else { } else {
this.props.dispatch(scrollTopNotifications(false)); this.props.dispatch(scrollTopNotifications(false));
} }
}, }
componentDidUpdate (prevProps) { componentDidUpdate (prevProps) {
if (this.node.scrollTop > 0 && (prevProps.notifications.size < this.props.notifications.size && prevProps.notifications.first() !== this.props.notifications.first() && !!this._oldScrollPosition)) { if (this.node.scrollTop > 0 && (prevProps.notifications.size < this.props.notifications.size && prevProps.notifications.first() !== this.props.notifications.first() && !!this._oldScrollPosition)) {
this.node.scrollTop = this.node.scrollHeight - this._oldScrollPosition; this.node.scrollTop = this.node.scrollHeight - this._oldScrollPosition;
} }
}, }
handleLoadMore (e) { handleLoadMore (e) {
e.preventDefault(); e.preventDefault();
this.props.dispatch(expandNotifications()); this.props.dispatch(expandNotifications());
}, }
handleClear () { handleClear () {
if (window.confirm(this.props.intl.formatMessage(messages.confirm))) { if (window.confirm(this.props.intl.formatMessage(messages.confirm))) {
this.props.dispatch(clearNotifications()); this.props.dispatch(clearNotifications());
} }
}, }
setRef (c) { setRef (c) {
this.node = c; this.node = c;
}, }
render () { render () {
const { intl, notifications, trackScroll, isLoading, isUnread } = this.props; const { intl, notifications, trackScroll, isLoading, isUnread } = this.props;
@ -137,6 +128,19 @@ const Notifications = React.createClass({
} }
} }
}); }
Notifications.propTypes = {
notifications: ImmutablePropTypes.list.isRequired,
dispatch: PropTypes.func.isRequired,
trackScroll: PropTypes.bool,
intl: PropTypes.object.isRequired,
isLoading: PropTypes.bool,
isUnread: PropTypes.bool
};
Notifications.defaultProps = {
trackScroll: true
};
export default connect(mapStateToProps)(injectIntl(Notifications)); export default connect(mapStateToProps)(injectIntl(Notifications));

View File

@ -1,5 +1,5 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PropTypes from 'prop-types';
import StatusListContainer from '../ui/containers/status_list_container'; import StatusListContainer from '../ui/containers/status_list_container';
import Column from '../ui/components/column'; import Column from '../ui/components/column';
import { import {
@ -25,17 +25,7 @@ const mapStateToProps = state => ({
let subscription; let subscription;
const PublicTimeline = React.createClass({ class PublicTimeline extends React.PureComponent {
propTypes: {
dispatch: React.PropTypes.func.isRequired,
intl: React.PropTypes.object.isRequired,
streamingAPIBaseURL: React.PropTypes.string.isRequired,
accessToken: React.PropTypes.string.isRequired,
hasUnread: React.PropTypes.bool
},
mixins: [PureRenderMixin],
componentDidMount () { componentDidMount () {
const { dispatch, streamingAPIBaseURL, accessToken } = this.props; const { dispatch, streamingAPIBaseURL, accessToken } = this.props;
@ -72,14 +62,14 @@ const PublicTimeline = React.createClass({
} }
}); });
}, }
componentWillUnmount () { componentWillUnmount () {
// if (typeof subscription !== 'undefined') { // if (typeof subscription !== 'undefined') {
// subscription.close(); // subscription.close();
// subscription = null; // subscription = null;
// } // }
}, }
render () { render () {
const { intl, hasUnread } = this.props; const { intl, hasUnread } = this.props;
@ -90,8 +80,16 @@ const PublicTimeline = React.createClass({
<StatusListContainer type='public' emptyMessage={<FormattedMessage id='empty_column.public' defaultMessage='There is nothing here! Write something publicly, or manually follow users from other instances to fill it up' />} /> <StatusListContainer type='public' emptyMessage={<FormattedMessage id='empty_column.public' defaultMessage='There is nothing here! Write something publicly, or manually follow users from other instances to fill it up' />} />
</Column> </Column>
); );
}, }
}); }
PublicTimeline.propTypes = {
dispatch: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
streamingAPIBaseURL: PropTypes.string.isRequired,
accessToken: PropTypes.string.isRequired,
hasUnread: PropTypes.bool
};
export default connect(mapStateToProps)(injectIntl(PublicTimeline)); export default connect(mapStateToProps)(injectIntl(PublicTimeline));

View File

@ -1,5 +1,5 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import LoadingIndicator from '../../components/loading_indicator'; import LoadingIndicator from '../../components/loading_indicator';
import { fetchReblogs } from '../../actions/interactions'; import { fetchReblogs } from '../../actions/interactions';
@ -12,25 +12,17 @@ const mapStateToProps = (state, props) => ({
accountIds: state.getIn(['user_lists', 'reblogged_by', Number(props.params.statusId)]) accountIds: state.getIn(['user_lists', 'reblogged_by', Number(props.params.statusId)])
}); });
const Reblogs = React.createClass({ class Reblogs extends React.PureComponent {
propTypes: {
params: React.PropTypes.object.isRequired,
dispatch: React.PropTypes.func.isRequired,
accountIds: ImmutablePropTypes.list
},
mixins: [PureRenderMixin],
componentWillMount () { componentWillMount () {
this.props.dispatch(fetchReblogs(Number(this.props.params.statusId))); this.props.dispatch(fetchReblogs(Number(this.props.params.statusId)));
}, }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if (nextProps.params.statusId !== this.props.params.statusId && nextProps.params.statusId) { if (nextProps.params.statusId !== this.props.params.statusId && nextProps.params.statusId) {
this.props.dispatch(fetchReblogs(Number(nextProps.params.statusId))); this.props.dispatch(fetchReblogs(Number(nextProps.params.statusId)));
} }
}, }
render () { render () {
const { accountIds } = this.props; const { accountIds } = this.props;
@ -56,6 +48,12 @@ const Reblogs = React.createClass({
); );
} }
}); }
Reblogs.propTypes = {
params: PropTypes.object.isRequired,
dispatch: PropTypes.func.isRequired,
accountIds: ImmutablePropTypes.list
};
export default connect(mapStateToProps)(Reblogs); export default connect(mapStateToProps)(Reblogs);

View File

@ -1,18 +1,9 @@
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import emojify from '../../../emoji'; import emojify from '../../../emoji';
import Toggle from 'react-toggle'; import Toggle from 'react-toggle';
const StatusCheckBox = React.createClass({ class StatusCheckBox extends React.PureComponent {
propTypes: {
status: ImmutablePropTypes.map.isRequired,
checked: React.PropTypes.bool,
onToggle: React.PropTypes.func.isRequired,
disabled: React.PropTypes.bool
},
mixins: [PureRenderMixin],
render () { render () {
const { status, checked, onToggle, disabled } = this.props; const { status, checked, onToggle, disabled } = this.props;
@ -37,6 +28,13 @@ const StatusCheckBox = React.createClass({
); );
} }
}); }
StatusCheckBox.propTypes = {
status: ImmutablePropTypes.map.isRequired,
checked: PropTypes.bool,
onToggle: PropTypes.func.isRequired,
disabled: PropTypes.bool
};
export default StatusCheckBox; export default StatusCheckBox;

View File

@ -1,7 +1,7 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { cancelReport, changeReportComment, submitReport } from '../../actions/reports'; import { cancelReport, changeReportComment, submitReport } from '../../actions/reports';
import { fetchAccountTimeline } from '../../actions/accounts'; import { fetchAccountTimeline } from '../../actions/accounts';
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import Column from '../ui/components/column'; import Column from '../ui/components/column';
import Button from '../../components/button'; import Button from '../../components/button';
@ -38,28 +38,19 @@ const textareaStyle = {
marginBottom: '10px' marginBottom: '10px'
}; };
const Report = React.createClass({ class Report extends React.PureComponent {
contextTypes: { constructor (props, context) {
router: React.PropTypes.object super(props, context);
}, this.handleCommentChange = this.handleCommentChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
propTypes: { }
isSubmitting: React.PropTypes.bool,
account: ImmutablePropTypes.map,
statusIds: ImmutablePropTypes.orderedSet.isRequired,
comment: React.PropTypes.string.isRequired,
dispatch: React.PropTypes.func.isRequired,
intl: React.PropTypes.object.isRequired
},
mixins: [PureRenderMixin],
componentWillMount () { componentWillMount () {
if (!this.props.account) { if (!this.props.account) {
this.context.router.replace('/'); this.context.router.replace('/');
} }
}, }
componentDidMount () { componentDidMount () {
if (!this.props.account) { if (!this.props.account) {
@ -67,22 +58,22 @@ const Report = React.createClass({
} }
this.props.dispatch(fetchAccountTimeline(this.props.account.get('id'))); this.props.dispatch(fetchAccountTimeline(this.props.account.get('id')));
}, }
componentWillReceiveProps (nextProps) { componentWillReceiveProps (nextProps) {
if (this.props.account !== nextProps.account && nextProps.account) { if (this.props.account !== nextProps.account && nextProps.account) {
this.props.dispatch(fetchAccountTimeline(nextProps.account.get('id'))); this.props.dispatch(fetchAccountTimeline(nextProps.account.get('id')));
} }
}, }
handleCommentChange (e) { handleCommentChange (e) {
this.props.dispatch(changeReportComment(e.target.value)); this.props.dispatch(changeReportComment(e.target.value));
}, }
handleSubmit () { handleSubmit () {
this.props.dispatch(submitReport()); this.props.dispatch(submitReport());
this.context.router.replace('/'); this.context.router.replace('/');
}, }
render () { render () {
const { account, comment, intl, statusIds, isSubmitting } = this.props; const { account, comment, intl, statusIds, isSubmitting } = this.props;
@ -126,6 +117,19 @@ const Report = React.createClass({
); );
} }
}); }
Report.contextTypes = {
router: PropTypes.object
};
Report.propTypes = {
isSubmitting: PropTypes.bool,
account: ImmutablePropTypes.map,
statusIds: ImmutablePropTypes.orderedSet.isRequired,
comment: PropTypes.string.isRequired,
dispatch: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired
};
export default connect(makeMapStateToProps)(injectIntl(Report)); export default connect(makeMapStateToProps)(injectIntl(Report));

View File

@ -1,4 +1,4 @@
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PropTypes from 'prop-types';
import IconButton from '../../../components/icon_button'; import IconButton from '../../../components/icon_button';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import DropdownMenu from '../../../components/dropdown_menu'; import DropdownMenu from '../../../components/dropdown_menu';
@ -13,50 +13,42 @@ const messages = defineMessages({
report: { id: 'status.report', defaultMessage: 'Report @{name}' } report: { id: 'status.report', defaultMessage: 'Report @{name}' }
}); });
const ActionBar = React.createClass({ class ActionBar extends React.PureComponent {
contextTypes: { constructor (props, context) {
router: React.PropTypes.object super(props, context);
}, this.handleReplyClick = this.handleReplyClick.bind(this);
this.handleReblogClick = this.handleReblogClick.bind(this);
propTypes: { this.handleFavouriteClick = this.handleFavouriteClick.bind(this);
status: ImmutablePropTypes.map.isRequired, this.handleDeleteClick = this.handleDeleteClick.bind(this);
onReply: React.PropTypes.func.isRequired, this.handleMentionClick = this.handleMentionClick.bind(this);
onReblog: React.PropTypes.func.isRequired, this.handleReport = this.handleReport.bind(this);
onFavourite: React.PropTypes.func.isRequired, }
onDelete: React.PropTypes.func.isRequired,
onMention: React.PropTypes.func.isRequired,
onReport: React.PropTypes.func,
me: React.PropTypes.number.isRequired,
intl: React.PropTypes.object.isRequired
},
mixins: [PureRenderMixin],
handleReplyClick () { handleReplyClick () {
this.props.onReply(this.props.status); this.props.onReply(this.props.status);
}, }
handleReblogClick (e) { handleReblogClick (e) {
this.props.onReblog(this.props.status, e); this.props.onReblog(this.props.status, e);
}, }
handleFavouriteClick () { handleFavouriteClick () {
this.props.onFavourite(this.props.status); this.props.onFavourite(this.props.status);
}, }
handleDeleteClick () { handleDeleteClick () {
this.props.onDelete(this.props.status); this.props.onDelete(this.props.status);
}, }
handleMentionClick () { handleMentionClick () {
this.props.onMention(this.props.status.get('account'), this.context.router); this.props.onMention(this.props.status.get('account'), this.context.router);
}, }
handleReport () { handleReport () {
this.props.onReport(this.props.status); this.props.onReport(this.props.status);
this.context.router.push('/report'); this.context.router.push('/report');
}, }
render () { render () {
const { status, me, intl } = this.props; const { status, me, intl } = this.props;
@ -85,6 +77,22 @@ const ActionBar = React.createClass({
); );
} }
}); }
ActionBar.contextTypes = {
router: PropTypes.object
};
ActionBar.propTypes = {
status: ImmutablePropTypes.map.isRequired,
onReply: PropTypes.func.isRequired,
onReblog: PropTypes.func.isRequired,
onFavourite: PropTypes.func.isRequired,
onDelete: PropTypes.func.isRequired,
onMention: PropTypes.func.isRequired,
onReport: PropTypes.func,
me: PropTypes.number.isRequired,
intl: PropTypes.object.isRequired
};
export default injectIntl(ActionBar); export default injectIntl(ActionBar);

View File

@ -1,4 +1,3 @@
import PureRenderMixin from 'react-addons-pure-render-mixin';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
const contentStyle = { const contentStyle = {
@ -28,12 +27,7 @@ const getHostname = url => {
return parser.hostname; return parser.hostname;
}; };
const Card = React.createClass({ class Card extends React.PureComponent {
propTypes: {
card: ImmutablePropTypes.map
},
mixins: [PureRenderMixin],
render () { render () {
const { card } = this.props; const { card } = this.props;
@ -64,6 +58,10 @@ const Card = React.createClass({
</a> </a>
); );
} }
}); }
Card.propTypes = {
card: ImmutablePropTypes.map
};
export default Card; export default Card;

View File

@ -1,4 +1,4 @@
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import Avatar from '../../../components/avatar'; import Avatar from '../../../components/avatar';
import DisplayName from '../../../components/display_name'; import DisplayName from '../../../components/display_name';
@ -10,20 +10,12 @@ import { Link } from 'react-router';
import { FormattedDate, FormattedNumber } from 'react-intl'; import { FormattedDate, FormattedNumber } from 'react-intl';
import CardContainer from '../containers/card_container'; import CardContainer from '../containers/card_container';
const DetailedStatus = React.createClass({ class DetailedStatus extends React.PureComponent {
contextTypes: { constructor (props, context) {
router: React.PropTypes.object super(props, context);
}, this.handleAccountClick = this.handleAccountClick.bind(this);
}
propTypes: {
status: ImmutablePropTypes.map.isRequired,
onOpenMedia: React.PropTypes.func.isRequired,
onOpenVideo: React.PropTypes.func.isRequired,
autoPlayGif: React.PropTypes.bool,
},
mixins: [PureRenderMixin],
handleAccountClick (e) { handleAccountClick (e) {
if (e.button === 0) { if (e.button === 0) {
@ -32,7 +24,7 @@ const DetailedStatus = React.createClass({
} }
e.stopPropagation(); e.stopPropagation();
}, }
render () { render () {
const status = this.props.status.get('reblog') ? this.props.status.get('reblog') : this.props.status; const status = this.props.status.get('reblog') ? this.props.status.get('reblog') : this.props.status;
@ -74,6 +66,17 @@ const DetailedStatus = React.createClass({
); );
} }
}); }
DetailedStatus.contextTypes = {
router: PropTypes.object
};
DetailedStatus.propTypes = {
status: ImmutablePropTypes.map.isRequired,
onOpenMedia: PropTypes.func.isRequired,
onOpenVideo: PropTypes.func.isRequired,
autoPlayGif: PropTypes.bool,
};
export default DetailedStatus; export default DetailedStatus;

View File

@ -1,5 +1,5 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { fetchStatus } from '../../actions/statuses'; import { fetchStatus } from '../../actions/statuses';
import Immutable from 'immutable'; import Immutable from 'immutable';
@ -46,33 +46,30 @@ const makeMapStateToProps = () => {
return mapStateToProps; return mapStateToProps;
}; };
const Status = React.createClass({ class Status extends React.PureComponent {
contextTypes: {
router: React.PropTypes.object
},
propTypes: { constructor (props, context) {
params: React.PropTypes.object.isRequired, super(props, context);
dispatch: React.PropTypes.func.isRequired, this.handleFavouriteClick = this.handleFavouriteClick.bind(this);
status: ImmutablePropTypes.map, this.handleReplyClick = this.handleReplyClick.bind(this);
ancestorsIds: ImmutablePropTypes.list, this.handleModalReblog = this.handleModalReblog.bind(this);
descendantsIds: ImmutablePropTypes.list, this.handleReblogClick = this.handleReblogClick.bind(this);
me: React.PropTypes.number, this.handleDeleteClick = this.handleDeleteClick.bind(this);
boostModal: React.PropTypes.bool, this.handleMentionClick = this.handleMentionClick.bind(this);
autoPlayGif: React.PropTypes.bool this.handleOpenMedia = this.handleOpenMedia.bind(this);
}, this.handleOpenVideo = this.handleOpenVideo.bind(this);
this.handleReport = this.handleReport.bind(this);
mixins: [PureRenderMixin], }
componentWillMount () { componentWillMount () {
this.props.dispatch(fetchStatus(Number(this.props.params.statusId))); this.props.dispatch(fetchStatus(Number(this.props.params.statusId)));
}, }
componentWillReceiveProps (nextProps) { componentWillReceiveProps (nextProps) {
if (nextProps.params.statusId !== this.props.params.statusId && nextProps.params.statusId) { if (nextProps.params.statusId !== this.props.params.statusId && nextProps.params.statusId) {
this.props.dispatch(fetchStatus(Number(nextProps.params.statusId))); this.props.dispatch(fetchStatus(Number(nextProps.params.statusId)));
} }
}, }
handleFavouriteClick (status) { handleFavouriteClick (status) {
if (status.get('favourited')) { if (status.get('favourited')) {
@ -80,15 +77,15 @@ const Status = React.createClass({
} else { } else {
this.props.dispatch(favourite(status)); this.props.dispatch(favourite(status));
} }
}, }
handleReplyClick (status) { handleReplyClick (status) {
this.props.dispatch(replyCompose(status, this.context.router)); this.props.dispatch(replyCompose(status, this.context.router));
}, }
handleModalReblog (status) { handleModalReblog (status) {
this.props.dispatch(reblog(status)); this.props.dispatch(reblog(status));
}, }
handleReblogClick (status, e) { handleReblogClick (status, e) {
if (status.get('reblogged')) { if (status.get('reblogged')) {
@ -100,31 +97,31 @@ const Status = React.createClass({
this.props.dispatch(openModal('BOOST', { status, onReblog: this.handleModalReblog })); this.props.dispatch(openModal('BOOST', { status, onReblog: this.handleModalReblog }));
} }
} }
}, }
handleDeleteClick (status) { handleDeleteClick (status) {
this.props.dispatch(deleteStatus(status.get('id'))); this.props.dispatch(deleteStatus(status.get('id')));
}, }
handleMentionClick (account, router) { handleMentionClick (account, router) {
this.props.dispatch(mentionCompose(account, router)); this.props.dispatch(mentionCompose(account, router));
}, }
handleOpenMedia (media, index) { handleOpenMedia (media, index) {
this.props.dispatch(openModal('MEDIA', { media, index })); this.props.dispatch(openModal('MEDIA', { media, index }));
}, }
handleOpenVideo (media, time) { handleOpenVideo (media, time) {
this.props.dispatch(openModal('VIDEO', { media, time })); this.props.dispatch(openModal('VIDEO', { media, time }));
}, }
handleReport (status) { handleReport (status) {
this.props.dispatch(initReport(status.get('account'), status)); this.props.dispatch(initReport(status.get('account'), status));
}, }
renderChildren (list) { renderChildren (list) {
return list.map(id => <StatusContainer key={id} id={id} />); return list.map(id => <StatusContainer key={id} id={id} />);
}, }
render () { render () {
let ancestors, descendants; let ancestors, descendants;
@ -167,6 +164,21 @@ const Status = React.createClass({
); );
} }
}); }
Status.contextTypes = {
router: PropTypes.object
};
Status.propTypes = {
params: PropTypes.object.isRequired,
dispatch: PropTypes.func.isRequired,
status: ImmutablePropTypes.map,
ancestorsIds: ImmutablePropTypes.list,
descendantsIds: ImmutablePropTypes.list,
me: PropTypes.number,
boostModal: PropTypes.bool,
autoPlayGif: PropTypes.bool
};
export default connect(makeMapStateToProps)(Status); export default connect(makeMapStateToProps)(Status);

View File

@ -1,5 +1,5 @@
import PureRenderMixin from 'react-addons-pure-render-mixin';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import IconButton from '../../../components/icon_button'; import IconButton from '../../../components/icon_button';
import Button from '../../../components/button'; import Button from '../../../components/button';
@ -12,24 +12,18 @@ const messages = defineMessages({
reblog: { id: 'status.reblog', defaultMessage: 'Boost' } reblog: { id: 'status.reblog', defaultMessage: 'Boost' }
}); });
const BoostModal = React.createClass({ class BoostModal extends React.PureComponent {
contextTypes: {
router: React.PropTypes.object
},
propTypes: { constructor (props, context) {
status: ImmutablePropTypes.map.isRequired, super(props, context);
onReblog: React.PropTypes.func.isRequired, this.handleReblog = this.handleReblog.bind(this);
onClose: React.PropTypes.func.isRequired, this.handleAccountClick = this.handleAccountClick.bind(this);
intl: React.PropTypes.object.isRequired }
},
mixins: [PureRenderMixin],
handleReblog() { handleReblog() {
this.props.onReblog(this.props.status); this.props.onReblog(this.props.status);
this.props.onClose(); this.props.onClose();
}, }
handleAccountClick (e) { handleAccountClick (e) {
if (e.button === 0) { if (e.button === 0) {
@ -37,7 +31,7 @@ const BoostModal = React.createClass({
this.props.onClose(); this.props.onClose();
this.context.router.push(`/accounts/${this.props.status.getIn(['account', 'id'])}`); this.context.router.push(`/accounts/${this.props.status.getIn(['account', 'id'])}`);
} }
}, }
render () { render () {
const { status, intl, onClose } = this.props; const { status, intl, onClose } = this.props;
@ -72,6 +66,17 @@ const BoostModal = React.createClass({
); );
} }
}); }
BoostModal.contextTypes = {
router: PropTypes.object
};
BoostModal.propTypes = {
status: ImmutablePropTypes.map.isRequired,
onReblog: PropTypes.func.isRequired,
onClose: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired
};
export default injectIntl(BoostModal); export default injectIntl(BoostModal);

View File

@ -1,5 +1,5 @@
import ColumnHeader from './column_header'; import ColumnHeader from './column_header';
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PropTypes from 'prop-types';
const easingOutQuint = (x, t, b, c, d) => c*((t=t/d-1)*t*t*t*t + 1) + b; const easingOutQuint = (x, t, b, c, d) => c*((t=t/d-1)*t*t*t*t + 1) + b;
@ -29,17 +29,13 @@ const scrollTop = (node) => {
}; };
}; };
const Column = React.createClass({ class Column extends React.PureComponent {
propTypes: { constructor (props, context) {
heading: React.PropTypes.string, super(props, context);
icon: React.PropTypes.string, this.handleHeaderClick = this.handleHeaderClick.bind(this);
children: React.PropTypes.node, this.handleWheel = this.handleWheel.bind(this);
active: React.PropTypes.bool, }
hideHeadingOnMobile: React.PropTypes.bool
},
mixins: [PureRenderMixin],
handleHeaderClick () { handleHeaderClick () {
const scrollable = ReactDOM.findDOMNode(this).querySelector('.scrollable'); const scrollable = ReactDOM.findDOMNode(this).querySelector('.scrollable');
@ -47,13 +43,13 @@ const Column = React.createClass({
return; return;
} }
this._interruptScrollAnimation = scrollTop(scrollable); this._interruptScrollAnimation = scrollTop(scrollable);
}, }
handleWheel () { handleWheel () {
if (typeof this._interruptScrollAnimation !== 'undefined') { if (typeof this._interruptScrollAnimation !== 'undefined') {
this._interruptScrollAnimation(); this._interruptScrollAnimation();
} }
}, }
render () { render () {
const { heading, icon, children, active, hideHeadingOnMobile } = this.props; const { heading, icon, children, active, hideHeadingOnMobile } = this.props;
@ -72,6 +68,14 @@ const Column = React.createClass({
); );
} }
}); }
Column.propTypes = {
heading: PropTypes.string,
icon: PropTypes.string,
children: PropTypes.node,
active: PropTypes.bool,
hideHeadingOnMobile: PropTypes.bool
};
export default Column; export default Column;

View File

@ -1,20 +1,15 @@
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PropTypes from 'prop-types'
const ColumnHeader = React.createClass({ class ColumnHeader extends React.PureComponent {
propTypes: { constructor (props, context) {
icon: React.PropTypes.string, super(props, context);
type: React.PropTypes.string, this.handleClick = this.handleClick.bind(this);
active: React.PropTypes.bool, }
onClick: React.PropTypes.func,
hideOnMobile: React.PropTypes.bool
},
mixins: [PureRenderMixin],
handleClick () { handleClick () {
this.props.onClick(); this.props.onClick();
}, }
render () { render () {
const { type, active, hideOnMobile } = this.props; const { type, active, hideOnMobile } = this.props;
@ -33,6 +28,14 @@ const ColumnHeader = React.createClass({
); );
} }
}); }
ColumnHeader.propTypes = {
icon: PropTypes.string,
type: PropTypes.string,
active: PropTypes.bool,
onClick: PropTypes.func,
hideOnMobile: PropTypes.bool
};
export default ColumnHeader; export default ColumnHeader;

View File

@ -1,3 +1,4 @@
import PropTypes from 'prop-types';
import { Link } from 'react-router'; import { Link } from 'react-router';
const outerStyle = { const outerStyle = {
@ -30,12 +31,12 @@ const ColumnLink = ({ icon, text, to, href, method, hideOnMobile }) => {
}; };
ColumnLink.propTypes = { ColumnLink.propTypes = {
icon: React.PropTypes.string.isRequired, icon: PropTypes.string.isRequired,
text: React.PropTypes.string.isRequired, text: PropTypes.string.isRequired,
to: React.PropTypes.string, to: PropTypes.string,
href: React.PropTypes.string, href: PropTypes.string,
method: React.PropTypes.string, method: PropTypes.string,
hideOnMobile: React.PropTypes.bool hideOnMobile: PropTypes.bool
}; };
export default ColumnLink; export default ColumnLink;

View File

@ -1,4 +1,4 @@
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PropTypes from 'prop-types';
const style = { const style = {
display: 'flex', display: 'flex',
@ -6,13 +6,7 @@ const style = {
overflowX: 'auto' overflowX: 'auto'
}; };
const ColumnsArea = React.createClass({ class ColumnsArea extends React.PureComponent {
propTypes: {
children: React.PropTypes.node
},
mixins: [PureRenderMixin],
render () { render () {
return ( return (
@ -22,6 +16,10 @@ const ColumnsArea = React.createClass({
); );
} }
}); }
ColumnsArea.propTypes = {
children: PropTypes.node
};
export default ColumnsArea; export default ColumnsArea;

View File

@ -1,6 +1,6 @@
import LoadingIndicator from '../../../components/loading_indicator'; import LoadingIndicator from '../../../components/loading_indicator';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import ExtendedVideoPlayer from '../../../components/extended_video_player'; import ExtendedVideoPlayer from '../../../components/extended_video_player';
import ImageLoader from 'react-imageloader'; import ImageLoader from 'react-imageloader';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
@ -44,30 +44,25 @@ const closeStyle = {
right: '4px' right: '4px'
}; };
const MediaModal = React.createClass({ class MediaModal extends React.PureComponent {
propTypes: { constructor (props, context) {
media: ImmutablePropTypes.list.isRequired, super(props, context);
index: React.PropTypes.number.isRequired, this.state = {
onClose: React.PropTypes.func.isRequired,
intl: React.PropTypes.object.isRequired
},
getInitialState () {
return {
index: null index: null
}; };
}, this.handleNextClick = this.handleNextClick.bind(this);
this.handlePrevClick = this.handlePrevClick.bind(this);
mixins: [PureRenderMixin], this.handleKeyUp = this.handleKeyUp.bind(this);
}
handleNextClick () { handleNextClick () {
this.setState({ index: (this.getIndex() + 1) % this.props.media.size}); this.setState({ index: (this.getIndex() + 1) % this.props.media.size});
}, }
handlePrevClick () { handlePrevClick () {
this.setState({ index: (this.getIndex() - 1) % this.props.media.size}); this.setState({ index: (this.getIndex() - 1) % this.props.media.size});
}, }
handleKeyUp (e) { handleKeyUp (e) {
switch(e.key) { switch(e.key) {
@ -78,19 +73,19 @@ const MediaModal = React.createClass({
this.handleNextClick(); this.handleNextClick();
break; break;
} }
}, }
componentDidMount () { componentDidMount () {
window.addEventListener('keyup', this.handleKeyUp, false); window.addEventListener('keyup', this.handleKeyUp, false);
}, }
componentWillUnmount () { componentWillUnmount () {
window.removeEventListener('keyup', this.handleKeyUp); window.removeEventListener('keyup', this.handleKeyUp);
}, }
getIndex () { getIndex () {
return this.state.index !== null ? this.state.index : this.props.index; return this.state.index !== null ? this.state.index : this.props.index;
}, }
render () { render () {
const { media, intl, onClose } = this.props; const { media, intl, onClose } = this.props;
@ -128,6 +123,13 @@ const MediaModal = React.createClass({
); );
} }
}); }
MediaModal.propTypes = {
media: ImmutablePropTypes.list.isRequired,
index: PropTypes.number.isRequired,
onClose: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired
};
export default injectIntl(MediaModal); export default injectIntl(MediaModal);

View File

@ -1,4 +1,4 @@
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PropTypes from 'prop-types';
import MediaModal from './media_modal'; import MediaModal from './media_modal';
import OnboardingModal from './onboarding_modal'; import OnboardingModal from './onboarding_modal';
import VideoModal from './video_modal'; import VideoModal from './video_modal';
@ -12,37 +12,34 @@ const MODAL_COMPONENTS = {
'BOOST': BoostModal 'BOOST': BoostModal
}; };
const ModalRoot = React.createClass({ class ModalRoot extends React.PureComponent {
propTypes: { constructor (props, context) {
type: React.PropTypes.string, super(props, context);
props: React.PropTypes.object, this.handleKeyUp = this.handleKeyUp.bind(this);
onClose: React.PropTypes.func.isRequired }
},
mixins: [PureRenderMixin],
handleKeyUp (e) { handleKeyUp (e) {
if (e.key === 'Escape' && !!this.props.type) { if (e.key === 'Escape' && !!this.props.type) {
this.props.onClose(); this.props.onClose();
} }
}, }
componentDidMount () { componentDidMount () {
window.addEventListener('keyup', this.handleKeyUp, false); window.addEventListener('keyup', this.handleKeyUp, false);
}, }
componentWillUnmount () { componentWillUnmount () {
window.removeEventListener('keyup', this.handleKeyUp); window.removeEventListener('keyup', this.handleKeyUp);
}, }
willEnter () { willEnter () {
return { opacity: 0, scale: 0.98 }; return { opacity: 0, scale: 0.98 };
}, }
willLeave () { willLeave () {
return { opacity: spring(0), scale: spring(0.98) }; return { opacity: spring(0), scale: spring(0.98) };
}, }
render () { render () {
const { type, props, onClose } = this.props; const { type, props, onClose } = this.props;
@ -81,6 +78,12 @@ const ModalRoot = React.createClass({
); );
} }
}); }
ModalRoot.propTypes = {
type: PropTypes.string,
props: PropTypes.object,
onClose: PropTypes.func.isRequired
};
export default ModalRoot; export default ModalRoot;

View File

@ -1,5 +1,5 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import Permalink from '../../../components/permalink'; import Permalink from '../../../components/permalink';
@ -32,8 +32,8 @@ const PageOne = ({ acct, domain }) => (
); );
PageOne.propTypes = { PageOne.propTypes = {
acct: React.PropTypes.string.isRequired, acct: PropTypes.string.isRequired,
domain: React.PropTypes.string.isRequired domain: PropTypes.string.isRequired
}; };
const PageTwo = () => ( const PageTwo = () => (
@ -85,7 +85,7 @@ const PageThree = ({ me, domain }) => (
PageThree.propTypes = { PageThree.propTypes = {
me: ImmutablePropTypes.map.isRequired, me: ImmutablePropTypes.map.isRequired,
domain: React.PropTypes.string.isRequired domain: PropTypes.string.isRequired
}; };
const PageFour = ({ domain, intl }) => ( const PageFour = ({ domain, intl }) => (
@ -119,8 +119,8 @@ const PageFour = ({ domain, intl }) => (
); );
PageFour.propTypes = { PageFour.propTypes = {
domain: React.PropTypes.string.isRequired, domain: PropTypes.string.isRequired,
intl: React.PropTypes.object.isRequired intl: PropTypes.object.isRequired
}; };
const PageSix = ({ admin }) => { const PageSix = ({ admin }) => {
@ -157,33 +157,27 @@ const mapStateToProps = state => ({
domain: state.getIn(['meta', 'domain']) domain: state.getIn(['meta', 'domain'])
}); });
const OnboardingModal = React.createClass({ class OnboardingModal extends React.PureComponent {
propTypes: { constructor (props, context) {
onClose: React.PropTypes.func.isRequired, super(props, context);
intl: React.PropTypes.object.isRequired, this.state = {
me: ImmutablePropTypes.map.isRequired,
domain: React.PropTypes.string.isRequired,
admin: ImmutablePropTypes.map
},
getInitialState () {
return {
currentIndex: 0 currentIndex: 0
}; };
}, this.handleSkip = this.handleSkip.bind(this);
this.handleDot = this.handleDot.bind(this);
mixins: [PureRenderMixin], this.handleNext = this.handleNext.bind(this);
}
handleSkip (e) { handleSkip (e) {
e.preventDefault(); e.preventDefault();
this.props.onClose(); this.props.onClose();
}, }
handleDot (i, e) { handleDot (i, e) {
e.preventDefault(); e.preventDefault();
this.setState({ currentIndex: i }); this.setState({ currentIndex: i });
}, }
handleNext (maxNum, e) { handleNext (maxNum, e) {
e.preventDefault(); e.preventDefault();
@ -193,7 +187,7 @@ const OnboardingModal = React.createClass({
} else { } else {
this.props.onClose(); this.props.onClose();
} }
}, }
render () { render () {
const { me, admin, domain, intl } = this.props; const { me, admin, domain, intl } = this.props;
@ -251,6 +245,14 @@ const OnboardingModal = React.createClass({
); );
} }
}); }
OnboardingModal.propTypes = {
onClose: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
me: ImmutablePropTypes.map.isRequired,
domain: PropTypes.string.isRequired,
admin: ImmutablePropTypes.map
}
export default connect(mapStateToProps)(injectIntl(OnboardingModal)); export default connect(mapStateToProps)(injectIntl(OnboardingModal));

View File

@ -1,7 +1,7 @@
import { Link } from 'react-router'; import { Link } from 'react-router';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
const TabsBar = React.createClass({ class TabsBar extends React.PureComponent {
render () { render () {
return ( return (
@ -18,6 +18,6 @@ const TabsBar = React.createClass({
); );
} }
}); }
export default TabsBar; export default TabsBar;

View File

@ -1,14 +1,8 @@
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PropTypes from 'prop-types';
import { Motion, spring } from 'react-motion'; import { Motion, spring } from 'react-motion';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
const UploadArea = React.createClass({ class UploadArea extends React.PureComponent {
propTypes: {
active: React.PropTypes.bool
},
mixins: [PureRenderMixin],
render () { render () {
const { active } = this.props; const { active } = this.props;
@ -27,6 +21,10 @@ const UploadArea = React.createClass({
); );
} }
}); }
UploadArea.propTypes = {
active: PropTypes.bool
};
export default UploadArea; export default UploadArea;

View File

@ -1,6 +1,6 @@
import LoadingIndicator from '../../../components/loading_indicator'; import LoadingIndicator from '../../../components/loading_indicator';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import ExtendedVideoPlayer from '../../../components/extended_video_player'; import ExtendedVideoPlayer from '../../../components/extended_video_player';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
import IconButton from '../../../components/icon_button'; import IconButton from '../../../components/icon_button';
@ -16,16 +16,7 @@ const closeStyle = {
right: '4px' right: '4px'
}; };
const VideoModal = React.createClass({ class VideoModal extends React.PureComponent {
propTypes: {
media: ImmutablePropTypes.map.isRequired,
time: React.PropTypes.number,
onClose: React.PropTypes.func.isRequired,
intl: React.PropTypes.object.isRequired
},
mixins: [PureRenderMixin],
render () { render () {
const { media, intl, time, onClose } = this.props; const { media, intl, time, onClose } = this.props;
@ -42,6 +33,13 @@ const VideoModal = React.createClass({
); );
} }
}); }
VideoModal.propTypes = {
media: ImmutablePropTypes.map.isRequired,
time: PropTypes.number,
onClose: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired
};
export default injectIntl(VideoModal); export default injectIntl(VideoModal);

View File

@ -1,6 +1,6 @@
import ColumnsArea from './components/columns_area'; import ColumnsArea from './components/columns_area';
import NotificationsContainer from './containers/notifications_container'; import NotificationsContainer from './containers/notifications_container';
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PropTypes from 'prop-types';
import LoadingBarContainer from './containers/loading_bar_container'; import LoadingBarContainer from './containers/loading_bar_container';
import HomeTimeline from '../home_timeline'; import HomeTimeline from '../home_timeline';
import Compose from '../compose'; import Compose from '../compose';
@ -15,26 +15,26 @@ import { refreshTimeline } from '../../actions/timelines';
import { refreshNotifications } from '../../actions/notifications'; import { refreshNotifications } from '../../actions/notifications';
import UploadArea from './components/upload_area'; import UploadArea from './components/upload_area';
const UI = React.createClass({ class UI extends React.PureComponent {
propTypes: { constructor (props, context) {
dispatch: React.PropTypes.func.isRequired, super(props, context);
children: React.PropTypes.node this.state = {
},
getInitialState () {
return {
width: window.innerWidth, width: window.innerWidth,
draggingOver: false draggingOver: false
}; };
}, this.handleResize = this.handleResize.bind(this);
this.handleDragEnter = this.handleDragEnter.bind(this);
mixins: [PureRenderMixin], this.handleDragOver = this.handleDragOver.bind(this);
this.handleDrop = this.handleDrop.bind(this);
this.handleDragLeave = this.handleDragLeave.bind(this);
this.setRef = this.setRef.bind(this);
}
@debounce(500) @debounce(500)
handleResize () { handleResize () {
this.setState({ width: window.innerWidth }); this.setState({ width: window.innerWidth });
}, }
handleDragEnter (e) { handleDragEnter (e) {
e.preventDefault(); e.preventDefault();
@ -50,7 +50,7 @@ const UI = React.createClass({
if (e.dataTransfer && e.dataTransfer.items.length > 0) { if (e.dataTransfer && e.dataTransfer.items.length > 0) {
this.setState({ draggingOver: true }); this.setState({ draggingOver: true });
} }
}, }
handleDragOver (e) { handleDragOver (e) {
e.preventDefault(); e.preventDefault();
@ -63,7 +63,7 @@ const UI = React.createClass({
} }
return false; return false;
}, }
handleDrop (e) { handleDrop (e) {
e.preventDefault(); e.preventDefault();
@ -73,7 +73,7 @@ const UI = React.createClass({
if (e.dataTransfer && e.dataTransfer.files.length === 1) { if (e.dataTransfer && e.dataTransfer.files.length === 1) {
this.props.dispatch(uploadCompose(e.dataTransfer.files)); this.props.dispatch(uploadCompose(e.dataTransfer.files));
} }
}, }
handleDragLeave (e) { handleDragLeave (e) {
e.preventDefault(); e.preventDefault();
@ -86,7 +86,7 @@ const UI = React.createClass({
} }
this.setState({ draggingOver: false }); this.setState({ draggingOver: false });
}, }
componentWillMount () { componentWillMount () {
window.addEventListener('resize', this.handleResize, { passive: true }); window.addEventListener('resize', this.handleResize, { passive: true });
@ -97,7 +97,7 @@ const UI = React.createClass({
this.props.dispatch(refreshTimeline('home')); this.props.dispatch(refreshTimeline('home'));
this.props.dispatch(refreshNotifications()); this.props.dispatch(refreshNotifications());
}, }
componentWillUnmount () { componentWillUnmount () {
window.removeEventListener('resize', this.handleResize); window.removeEventListener('resize', this.handleResize);
@ -105,11 +105,11 @@ const UI = React.createClass({
document.removeEventListener('dragover', this.handleDragOver); document.removeEventListener('dragover', this.handleDragOver);
document.removeEventListener('drop', this.handleDrop); document.removeEventListener('drop', this.handleDrop);
document.removeEventListener('dragleave', this.handleDragLeave); document.removeEventListener('dragleave', this.handleDragLeave);
}, }
setRef (c) { setRef (c) {
this.node = c; this.node = c;
}, }
render () { render () {
const { width, draggingOver } = this.state; const { width, draggingOver } = this.state;
@ -148,6 +148,11 @@ const UI = React.createClass({
); );
} }
}); }
UI.propTypes = {
dispatch: PropTypes.func.isRequired,
children: PropTypes.node
};
export default connect()(UI); export default connect()(UI);

View File

@ -73,7 +73,7 @@ module Mastodon
config.middleware.use Rack::Deflater config.middleware.use Rack::Deflater
config.browserify_rails.source_map_environments << 'development' config.browserify_rails.source_map_environments << 'development'
config.browserify_rails.commandline_options = '--transform [ babelify --presets [ es2015 react ] ] --extension=".jsx"' config.browserify_rails.commandline_options = '--transform [ babelify --presets [ es2015 react ] --plugins [ transform-decorators-legacy ] ] --extension=".jsx"'
config.browserify_rails.evaluate_node_modules = true config.browserify_rails.evaluate_node_modules = true
config.to_prepare do config.to_prepare do

View File

@ -28,7 +28,7 @@
"dotenv": "^4.0.0", "dotenv": "^4.0.0",
"emojione": "^2.2.7", "emojione": "^2.2.7",
"emojione-picker": "^2.0.1", "emojione-picker": "^2.0.1",
"enzyme": "^2.7.1", "enzyme": "^2.8.2",
"es6-promise": "^3.2.1", "es6-promise": "^3.2.1",
"escape-html": "^1.0.3", "escape-html": "^1.0.3",
"eventsource": "^0.2.1", "eventsource": "^0.2.1",
@ -41,26 +41,26 @@
"node-sass": "^4.5.2", "node-sass": "^4.5.2",
"npmlog": "^4.0.2", "npmlog": "^4.0.2",
"pg": "^6.1.2", "pg": "^6.1.2",
"react": "^15.4.2", "prop-types": "^15.5.8",
"react": "^15.5.4",
"react-addons-perf": "^15.4.2", "react-addons-perf": "^15.4.2",
"react-addons-pure-render-mixin": "^15.4.2", "react-addons-shallow-compare": "^15.5.2",
"react-addons-shallow-compare": "^15.4.2",
"react-addons-test-utils": "^15.4.2",
"react-autosuggest": "^7.0.1", "react-autosuggest": "^7.0.1",
"react-decoration": "^1.4.0", "react-decoration": "^1.4.0",
"react-dom": "^15.4.2", "react-dom": "^15.5.4",
"react-imageloader": "^2.1.0", "react-imageloader": "^2.1.0",
"react-immutable-proptypes": "^2.1.0", "react-immutable-proptypes": "^2.1.0",
"react-intl": "^2.1.5", "react-intl": "^2.1.5",
"react-motion": "^0.4.5", "react-motion": "^0.4.5",
"react-notification": "^6.6.0", "react-notification": "^6.6.0",
"react-proxy": "^1.1.8", "react-proxy": "^1.1.8",
"react-redux": "^5.0.3", "react-redux": "^5.0.4",
"react-redux-loading-bar": "2.4.1", "react-redux-loading-bar": "2.4.1",
"react-router": "^2.8.0", "react-router": "^2.8.0",
"react-router-scroll": "^0.3.2", "react-router-scroll": "^0.3.2",
"react-simple-dropdown": "^1.1.4", "react-simple-dropdown": "^1.1.4",
"react-storybook-addon-intl": "^0.1.0", "react-storybook-addon-intl": "^0.1.0",
"react-test-renderer": "^15.5.4",
"react-toggle": "^2.1.1", "react-toggle": "^2.1.1",
"redis": "^2.6.5", "redis": "^2.6.5",
"redux": "^3.6.0", "redux": "^3.6.0",

117
yarn.lock
View File

@ -1254,7 +1254,7 @@ babel-runtime@6.x.x, babel-runtime@^6.0.0, babel-runtime@^6.11.6, babel-runtime@
core-js "^2.4.0" core-js "^2.4.0"
regenerator-runtime "^0.10.0" regenerator-runtime "^0.10.0"
babel-template@^6.16.0, babel-template@^6.23.0: babel-template@^6.16.0, babel-template@^6.22.0, babel-template@^6.23.0, babel-template@^6.3.0:
version "6.23.0" version "6.23.0"
resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.23.0.tgz#04d4f270adbb3aa704a8143ae26faa529238e638" resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.23.0.tgz#04d4f270adbb3aa704a8143ae26faa529238e638"
dependencies: dependencies:
@ -1264,26 +1264,6 @@ babel-template@^6.16.0, babel-template@^6.23.0:
babylon "^6.11.0" babylon "^6.11.0"
lodash "^4.2.0" lodash "^4.2.0"
babel-template@^6.22.0:
version "6.22.0"
resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.22.0.tgz#403d110905a4626b317a2a1fcb8f3b73204b2edb"
dependencies:
babel-runtime "^6.22.0"
babel-traverse "^6.22.0"
babel-types "^6.22.0"
babylon "^6.11.0"
lodash "^4.2.0"
babel-template@^6.3.0:
version "6.16.0"
resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.16.0.tgz#e149dd1a9f03a35f817ddbc4d0481988e7ebc8ca"
dependencies:
babel-runtime "^6.9.0"
babel-traverse "^6.16.0"
babel-types "^6.16.0"
babylon "^6.11.0"
lodash "^4.2.0"
babel-traverse@^6.16.0, babel-traverse@^6.22.0, babel-traverse@^6.22.1, babel-traverse@^6.23.0, babel-traverse@^6.23.1: babel-traverse@^6.16.0, babel-traverse@^6.22.0, babel-traverse@^6.22.1, babel-traverse@^6.23.0, babel-traverse@^6.23.1:
version "6.23.1" version "6.23.1"
resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.23.1.tgz#d3cb59010ecd06a97d81310065f966b699e14f48" resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.23.1.tgz#d3cb59010ecd06a97d81310065f966b699e14f48"
@ -1974,6 +1954,13 @@ create-hmac@^1.1.0, create-hmac@^1.1.2:
create-hash "^1.1.0" create-hash "^1.1.0"
inherits "^2.0.1" inherits "^2.0.1"
create-react-class@^15.5.1:
version "15.5.2"
resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.5.2.tgz#6a8758348df660b88326a0e764d569f274aad681"
dependencies:
fbjs "^0.8.9"
object-assign "^4.1.1"
cross-spawn@^3.0.0: cross-spawn@^3.0.0:
version "3.0.1" version "3.0.1"
resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-3.0.1.tgz#1256037ecb9f0c5f79e3d6ef135e30770184b982" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-3.0.1.tgz#1256037ecb9f0c5f79e3d6ef135e30770184b982"
@ -2409,9 +2396,9 @@ entities@^1.1.1, entities@~1.1.1:
version "1.1.1" version "1.1.1"
resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0" resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
enzyme@^2.7.1: enzyme@^2.8.2:
version "2.7.1" version "2.8.2"
resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-2.7.1.tgz#76370e1d99e91f73091bb8c4314b7c128cc2d621" resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-2.8.2.tgz#6c8bcb05012abc4aa4bc3213fb23780b9b5b1714"
dependencies: dependencies:
cheerio "^0.22.0" cheerio "^0.22.0"
function.prototype.name "^1.0.0" function.prototype.name "^1.0.0"
@ -2421,6 +2408,7 @@ enzyme@^2.7.1:
object.assign "^4.0.4" object.assign "^4.0.4"
object.entries "^1.0.3" object.entries "^1.0.3"
object.values "^1.0.3" object.values "^1.0.3"
prop-types "^15.5.4"
uuid "^2.0.3" uuid "^2.0.3"
errno@^0.1.3: errno@^0.1.3:
@ -2435,16 +2423,7 @@ error-ex@^1.2.0:
dependencies: dependencies:
is-arrayish "^0.2.1" is-arrayish "^0.2.1"
es-abstract@^1.3.2: es-abstract@^1.3.2, es-abstract@^1.4.3, es-abstract@^1.5.0, es-abstract@^1.5.1, es-abstract@^1.7.0:
version "1.6.1"
resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.6.1.tgz#bb8a2064120abcf928a086ea3d9043114285ec99"
dependencies:
es-to-primitive "^1.1.1"
function-bind "^1.1.0"
is-callable "^1.1.3"
is-regex "^1.0.3"
es-abstract@^1.4.3, es-abstract@^1.5.0, es-abstract@^1.5.1, es-abstract@^1.7.0:
version "1.7.0" version "1.7.0"
resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.7.0.tgz#dfade774e01bfcd97f96180298c449c8623fb94c" resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.7.0.tgz#dfade774e01bfcd97f96180298c449c8623fb94c"
dependencies: dependencies:
@ -2762,16 +2741,16 @@ fastparse@^1.1.1:
version "1.1.1" version "1.1.1"
resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8" resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
fbjs@^0.8.1, fbjs@^0.8.4: fbjs@^0.8.4, fbjs@^0.8.9:
version "0.8.5" version "0.8.12"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.5.tgz#f69ba8a876096cb1b9bffe4d7c1e71c19d39d008" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04"
dependencies: dependencies:
core-js "^1.0.0" core-js "^1.0.0"
immutable "^3.7.6"
isomorphic-fetch "^2.1.1" isomorphic-fetch "^2.1.1"
loose-envify "^1.0.0" loose-envify "^1.0.0"
object-assign "^4.1.0" object-assign "^4.1.0"
promise "^7.1.1" promise "^7.1.1"
setimmediate "^1.0.5"
ua-parser-js "^0.7.9" ua-parser-js "^0.7.9"
figures@^1.3.5: figures@^1.3.5:
@ -3221,7 +3200,7 @@ ignore@^3.2.0:
version "3.2.7" version "3.2.7"
resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.2.7.tgz#4810ca5f1d8eca5595213a34b94f2eb4ed926bbd" resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.2.7.tgz#4810ca5f1d8eca5595213a34b94f2eb4ed926bbd"
immutable@^3.7.6, immutable@^3.8.1: immutable@^3.8.1:
version "3.8.1" version "3.8.1"
resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.1.tgz#200807f11ab0f72710ea485542de088075f68cd2" resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.1.tgz#200807f11ab0f72710ea485542de088075f68cd2"
@ -4373,6 +4352,10 @@ object-assign@^3.0.0:
version "3.0.0" version "3.0.0"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-3.0.0.tgz#9bedd5ca0897949bca47e7ff408062d549f587f2" resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-3.0.0.tgz#9bedd5ca0897949bca47e7ff408062d549f587f2"
object-assign@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
object-is@^1.0.1: object-is@^1.0.1:
version "1.0.1" version "1.0.1"
resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.0.1.tgz#0aa60ec9989a0b3ed795cf4d06f62cf1ad6539b6" resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.0.1.tgz#0aa60ec9989a0b3ed795cf4d06f62cf1ad6539b6"
@ -5017,6 +5000,12 @@ promise@^7.1.1:
dependencies: dependencies:
asap "~2.0.3" asap "~2.0.3"
prop-types@^15.0.0, prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@~15.5.7:
version "15.5.8"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.8.tgz#6b7b2e141083be38c8595aa51fc55775c7199394"
dependencies:
fbjs "^0.8.9"
proxy-addr@~1.1.3: proxy-addr@~1.1.3:
version "1.1.3" version "1.1.3"
resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.3.tgz#dc97502f5722e888467b3fa2297a7b1ff47df074" resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.3.tgz#dc97502f5722e888467b3fa2297a7b1ff47df074"
@ -5131,23 +5120,16 @@ react-addons-perf@^15.4.2:
fbjs "^0.8.4" fbjs "^0.8.4"
object-assign "^4.1.0" object-assign "^4.1.0"
react-addons-pure-render-mixin@>=0.14.0, react-addons-pure-render-mixin@^15.4.2: react-addons-pure-render-mixin@>=0.14.0:
version "15.4.2" version "15.4.2"
resolved "https://registry.yarnpkg.com/react-addons-pure-render-mixin/-/react-addons-pure-render-mixin-15.4.2.tgz#a8433c71c45e2368503721921dc47bdaf1fbabcd" resolved "https://registry.yarnpkg.com/react-addons-pure-render-mixin/-/react-addons-pure-render-mixin-15.4.2.tgz#a8433c71c45e2368503721921dc47bdaf1fbabcd"
dependencies: dependencies:
fbjs "^0.8.4" fbjs "^0.8.4"
object-assign "^4.1.0" object-assign "^4.1.0"
react-addons-shallow-compare@^15.4.2: react-addons-shallow-compare@^15.5.2:
version "15.4.2" version "15.5.2"
resolved "https://registry.yarnpkg.com/react-addons-shallow-compare/-/react-addons-shallow-compare-15.4.2.tgz#027ffd9720e3a1e0b328dcd8fc62e214a0d174a5" resolved "https://registry.yarnpkg.com/react-addons-shallow-compare/-/react-addons-shallow-compare-15.5.2.tgz#7cb0ee7acc8d7c93fcc202df0bf47ba916a7bdad"
dependencies:
fbjs "^0.8.4"
object-assign "^4.1.0"
react-addons-test-utils@^15.4.2:
version "15.4.2"
resolved "https://registry.yarnpkg.com/react-addons-test-utils/-/react-addons-test-utils-15.4.2.tgz#93bcaa718fcae7360d42e8fb1c09756cc36302a2"
dependencies: dependencies:
fbjs "^0.8.4" fbjs "^0.8.4"
object-assign "^4.1.0" object-assign "^4.1.0"
@ -5190,13 +5172,14 @@ react-docgen@^2.12.1:
node-dir "^0.1.10" node-dir "^0.1.10"
recast "^0.11.5" recast "^0.11.5"
react-dom@^15.4.2: react-dom@^15.5.4:
version "15.4.2" version "15.5.4"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.4.2.tgz#015363f05b0a1fd52ae9efdd3a0060d90695208f" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.5.4.tgz#ba0c28786fd52ed7e4f2135fe0288d462aef93da"
dependencies: dependencies:
fbjs "^0.8.1" fbjs "^0.8.9"
loose-envify "^1.1.0" loose-envify "^1.1.0"
object-assign "^4.1.0" object-assign "^4.1.0"
prop-types "~15.5.7"
react-element-to-jsx-string@^5.0.0: react-element-to-jsx-string@^5.0.0:
version "5.0.7" version "5.0.7"
@ -5299,15 +5282,17 @@ react-redux@^4.4.5:
lodash "^4.2.0" lodash "^4.2.0"
loose-envify "^1.1.0" loose-envify "^1.1.0"
react-redux@^5.0.3: react-redux@^5.0.4:
version "5.0.3" version "5.0.4"
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.3.tgz#86c3b68d56e74294a42e2a740ab66117ef6c019f" resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.4.tgz#1563babadcfb2672f57f9ceaa439fb16bf85d55b"
dependencies: dependencies:
create-react-class "^15.5.1"
hoist-non-react-statics "^1.0.3" hoist-non-react-statics "^1.0.3"
invariant "^2.0.0" invariant "^2.0.0"
lodash "^4.2.0" lodash "^4.2.0"
lodash-es "^4.2.0" lodash-es "^4.2.0"
loose-envify "^1.1.0" loose-envify "^1.1.0"
prop-types "^15.0.0"
react-router-scroll@^0.3.2: react-router-scroll@^0.3.2:
version "0.3.2" version "0.3.2"
@ -5350,6 +5335,13 @@ react-stubber@^1.0.0:
dependencies: dependencies:
babel-runtime "^6.5.0" babel-runtime "^6.5.0"
react-test-renderer@^15.5.4:
version "15.5.4"
resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-15.5.4.tgz#d4ebb23f613d685ea8f5390109c2d20fbf7c83bc"
dependencies:
fbjs "^0.8.9"
object-assign "^4.1.0"
react-themeable@^1.1.0: react-themeable@^1.1.0:
version "1.1.0" version "1.1.0"
resolved "https://registry.yarnpkg.com/react-themeable/-/react-themeable-1.1.0.tgz#7d4466dd9b2b5fa75058727825e9f152ba379a0e" resolved "https://registry.yarnpkg.com/react-themeable/-/react-themeable-1.1.0.tgz#7d4466dd9b2b5fa75058727825e9f152ba379a0e"
@ -5372,13 +5364,14 @@ react-virtualized@^8.11.4:
dom-helpers "^2.4.0 || ^3.0.0" dom-helpers "^2.4.0 || ^3.0.0"
loose-envify "^1.3.0" loose-envify "^1.3.0"
react@^15.4.2: react@^15.5.4:
version "15.4.2" version "15.5.4"
resolved "https://registry.yarnpkg.com/react/-/react-15.4.2.tgz#41f7991b26185392ba9bae96c8889e7e018397ef" resolved "https://registry.yarnpkg.com/react/-/react-15.5.4.tgz#fa83eb01506ab237cdc1c8c3b1cea8de012bf047"
dependencies: dependencies:
fbjs "^0.8.4" fbjs "^0.8.9"
loose-envify "^1.1.0" loose-envify "^1.1.0"
object-assign "^4.1.0" object-assign "^4.1.0"
prop-types "^15.5.7"
read-only-stream@^2.0.0: read-only-stream@^2.0.0:
version "2.0.0" version "2.0.0"
@ -5791,7 +5784,7 @@ set-immediate-shim@^1.0.1:
version "1.0.1" version "1.0.1"
resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61" resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
setimmediate@^1.0.4: setimmediate@^1.0.4, setimmediate@^1.0.5:
version "1.0.5" version "1.0.5"
resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285" resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"