autonomic-cooperative/hometown
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

30
app/assets/javascripts/components/features/account/components/action_bar.jsx
View File

@ -1,5 +1,5 @@
import PureRenderMixin from 'react-addons-pure-render-mixin';
import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import DropdownMenu from '../../../components/dropdown_menu';
import { Link } from 'react-router';
import { defineMessages, injectIntl, FormattedMessage, FormattedNumber } from 'react-intl';
@ -28,20 +28,7 @@ const outerLinksStyle = {
lineHeight: '18px'
};
const ActionBar = React.createClass({
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],
class ActionBar extends React.PureComponent {
render () {
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);

53
app/assets/javascripts/components/features/account/components/header.jsx
View File

@ -1,5 +1,5 @@
import PureRenderMixin from 'react-addons-pure-render-mixin';
import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import emojify from '../../../emoji';
import escapeTextContentForBrowser from 'escape-html';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
@ -21,30 +21,28 @@ const makeMapStateToProps = () => {
return mapStateToProps;
};
const Avatar = React.createClass({
class Avatar extends React.PureComponent {
propTypes: {
account: ImmutablePropTypes.map.isRequired,
autoPlayGif: React.PropTypes.bool.isRequired
},
getInitialState () {
return {
constructor (props, context) {
super(props, context);
this.state = {
isHovered: false
};
},
mixins: [PureRenderMixin],
this.handleMouseOver = this.handleMouseOver.bind(this);
this.handleMouseOut = this.handleMouseOut.bind(this);
}
handleMouseOver () {
if (this.state.isHovered) return;
this.setState({ isHovered: true });
},
}
handleMouseOut () {
if (!this.state.isHovered) return;
this.setState({ isHovered: false });
},
}
render () {
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: {
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],
class Header extends React.Component {
render () {
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));

52
app/assets/javascripts/components/features/account_timeline/components/header.jsx
View File

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

35
app/assets/javascripts/components/features/account_timeline/index.jsx
View File

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

28
app/assets/javascripts/components/features/blocks/index.jsx
View File

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

30
app/assets/javascripts/components/features/community_timeline/index.jsx
View File

@ -1,5 +1,5 @@
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 Column from '../ui/components/column';
import {
@ -25,17 +25,7 @@ const mapStateToProps = state => ({
let subscription;
const CommunityTimeline = React.createClass({
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],
class CommunityTimeline extends React.PureComponent {
componentDidMount () {
const { dispatch, streamingAPIBaseURL, accessToken } = this.props;
@ -72,14 +62,14 @@ const CommunityTimeline = React.createClass({
}
});
},
}
componentWillUnmount () {
// if (typeof subscription !== 'undefined') {
// subscription.close();
// subscription = null;
// }
},
}
render () {
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!' />} />
</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));

20
app/assets/javascripts/components/features/compose/components/character_counter.jsx
View File

@ -1,20 +1,13 @@
import PureRenderMixin from 'react-addons-pure-render-mixin';
import PropTypes from 'prop-types';
const CharacterCounter = React.createClass({
propTypes: {
text: React.PropTypes.string.isRequired,
max: React.PropTypes.number.isRequired
},
mixins: [PureRenderMixin],
class CharacterCounter extends React.PureComponent {
checkRemainingText (diff) {
if (diff <= 0) {
return <span style={{ fontSize: '16px', cursor: 'default', color: '#ff5050' }}>{diff}</span>;
}
return <span style={{ fontSize: '16px', cursor: 'default' }}>{diff}</span>;
},
}
render () {
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);
}
});
}
CharacterCounter.propTypes = {
text: PropTypes.string.isRequired,
max: PropTypes.number.isRequired
}
export default CharacterCounter;

91
app/assets/javascripts/components/features/compose/components/compose_form.jsx
View File

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

26
app/assets/javascripts/components/features/compose/components/emoji_picker_dropdown.jsx
View File

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

14
app/assets/javascripts/components/features/compose/components/navigation_bar.jsx
View File

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

43
app/assets/javascripts/components/features/compose/components/privacy_dropdown.jsx
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 IconButton from '../../../components/icon_button';
@ -19,51 +19,48 @@ const iconStyle = {
height: null
};
const PrivacyDropdown = React.createClass({
class PrivacyDropdown extends React.PureComponent {
propTypes: {
value: React.PropTypes.string.isRequired,
onChange: React.PropTypes.func.isRequired,
intl: React.PropTypes.object.isRequired
},
getInitialState () {
return {
constructor (props, context) {
super(props, context);
this.state = {
open: false
};
},
mixins: [PureRenderMixin],
this.handleToggle = this.handleToggle.bind(this);
this.handleClick = this.handleClick.bind(this);
this.onGlobalClick = this.onGlobalClick.bind(this);
this.setRef = this.setRef.bind(this);
}
handleToggle () {
this.setState({ open: !this.state.open });
},
}
handleClick (value, e) {
e.preventDefault();
this.setState({ open: false });
this.props.onChange(value);
},
}
onGlobalClick (e) {
if (e.target !== this.node && !this.node.contains(e.target) && this.state.open) {
this.setState({ open: false });
}
},
}
componentDidMount () {
window.addEventListener('click', this.onGlobalClick);
window.addEventListener('touchstart', this.onGlobalClick);
},
}
componentWillUnmount () {
window.removeEventListener('click', this.onGlobalClick);
window.removeEventListener('touchstart', this.onGlobalClick);
},
}
setRef (c) {
this.node = c;
},
}
render () {
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);

36
app/assets/javascripts/components/features/compose/components/reply_indicator.jsx
View File

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

43
app/assets/javascripts/components/features/compose/components/search.jsx
View File

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

15
app/assets/javascripts/components/features/compose/components/search_results.jsx
View File

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

27
app/assets/javascripts/components/features/compose/components/text_icon_button.jsx
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: {
label: React.PropTypes.string.isRequired,
title: React.PropTypes.string,
active: React.PropTypes.bool,
onClick: React.PropTypes.func.isRequired
},
mixins: [PureRenderMixin],
constructor (props, context) {
super(props, context);
this.handleClick = this.handleClick.bind(this);
}
handleClick (e) {
e.preventDefault();
this.props.onClick();
},
}
render () {
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;

35
app/assets/javascripts/components/features/compose/components/upload_button.jsx
View File

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

20
app/assets/javascripts/components/features/compose/components/upload_form.jsx
View File

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

18
app/assets/javascripts/components/features/compose/components/upload_progress.jsx
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 { FormattedMessage } from 'react-intl';
const UploadProgress = React.createClass({
propTypes: {
active: React.PropTypes.bool,
progress: React.PropTypes.number
},
mixins: [PureRenderMixin],
class UploadProgress extends React.PureComponent {
render () {
const { active, progress } = this.props;
@ -39,6 +32,11 @@ const UploadProgress = React.createClass({
);
}
});
}
UploadProgress.propTypes = {
active: PropTypes.bool,
progress: PropTypes.number
};
export default UploadProgress;

19
app/assets/javascripts/components/features/compose/containers/sensitive_button_container.jsx
View File

@ -1,4 +1,5 @@
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import TextIconButton from '../components/text_icon_button';
import { changeComposeSensitivity } from '../../../actions/compose';
import { Motion, spring } from 'react-motion';
@ -21,14 +22,7 @@ const mapDispatchToProps = dispatch => ({
});
const SensitiveButton = React.createClass({
propTypes: {
visible: React.PropTypes.bool,
active: React.PropTypes.bool,
onClick: React.PropTypes.func.isRequired,
intl: React.PropTypes.object.isRequired
},
class SensitiveButton extends React.PureComponent {
render () {
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));

26
app/assets/javascripts/components/features/compose/index.jsx
View File

@ -1,7 +1,7 @@
import ComposeFormContainer from './containers/compose_form_container';
import UploadFormContainer from './containers/upload_form_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 { mountCompose, unmountCompose } from '../../actions/compose';
import { Link } from 'react-router';
@ -22,24 +22,15 @@ const mapStateToProps = state => ({
showSearch: state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden'])
});
const Compose = React.createClass({
propTypes: {
dispatch: React.PropTypes.func.isRequired,
withHeader: React.PropTypes.bool,
showSearch: React.PropTypes.bool,
intl: React.PropTypes.object.isRequired
},
mixins: [PureRenderMixin],
class Compose extends React.PureComponent {
componentDidMount () {
this.props.dispatch(mountCompose());
},
}
componentWillUnmount () {
this.props.dispatch(unmountCompose());
},
}
render () {
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));

33
app/assets/javascripts/components/features/favourited_statuses/index.jsx
View File

@ -1,5 +1,5 @@
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 LoadingIndicator from '../../components/loading_indicator';
import { fetchFavouritedStatuses, expandFavouritedStatuses } from '../../actions/favourites';
@ -18,26 +18,20 @@ const mapStateToProps = state => ({
me: state.getIn(['meta', 'me'])
});
const Favourites = React.createClass({
class Favourites extends React.PureComponent {
propTypes: {
params: React.PropTypes.object.isRequired,
dispatch: React.PropTypes.func.isRequired,
statusIds: ImmutablePropTypes.list.isRequired,
loaded: React.PropTypes.bool,
intl: React.PropTypes.object.isRequired,
me: React.PropTypes.number.isRequired
},
mixins: [PureRenderMixin],
constructor (props, context) {
super(props, context);
this.handleScrollToBottom = this.handleScrollToBottom.bind(this);
}
componentWillMount () {
this.props.dispatch(fetchFavouritedStatuses());
},
}
handleScrollToBottom () {
this.props.dispatch(expandFavouritedStatuses());
},
}
render () {
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));

24
app/assets/javascripts/components/features/favourites/index.jsx
View File

@ -1,5 +1,5 @@
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 LoadingIndicator from '../../components/loading_indicator';
import { fetchFavourites } from '../../actions/interactions';
@ -12,25 +12,17 @@ const mapStateToProps = (state, props) => ({
accountIds: state.getIn(['user_lists', 'favourited_by', Number(props.params.statusId)])
});
const Favourites = React.createClass({
propTypes: {
params: React.PropTypes.object.isRequired,
dispatch: React.PropTypes.func.isRequired,
accountIds: ImmutablePropTypes.list
},
mixins: [PureRenderMixin],
class Favourites extends React.PureComponent {
componentWillMount () {
this.props.dispatch(fetchFavourites(Number(this.props.params.statusId)));
},
}
componentWillReceiveProps(nextProps) {
if (nextProps.params.statusId !== this.props.params.statusId && nextProps.params.statusId) {
this.props.dispatch(fetchFavourites(Number(nextProps.params.statusId)));
}
},
}
render () {
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);

7
app/assets/javascripts/components/features/follow_requests/components/account_authorize.jsx
View File

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

28
app/assets/javascripts/components/features/follow_requests/index.jsx
View File

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

32
app/assets/javascripts/components/features/followers/index.jsx
View File

@ -1,5 +1,5 @@
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 LoadingIndicator from '../../components/loading_indicator';
import {
@ -18,27 +18,25 @@ const mapStateToProps = (state, props) => ({
accountIds: state.getIn(['user_lists', 'followers', Number(props.params.accountId), 'items'])
});
const Followers = React.createClass({
class Followers extends React.PureComponent {
propTypes: {
params: React.PropTypes.object.isRequired,
dispatch: React.PropTypes.func.isRequired,
accountIds: ImmutablePropTypes.list
},
mixins: [PureRenderMixin],
constructor (props, context) {
super(props, context);
this.handleScroll = this.handleScroll.bind(this);
this.handleLoadMore = this.handleLoadMore.bind(this);
}
componentWillMount () {
this.props.dispatch(fetchAccount(Number(this.props.params.accountId)));
this.props.dispatch(fetchFollowers(Number(this.props.params.accountId)));
},
}
componentWillReceiveProps(nextProps) {
if (nextProps.params.accountId !== this.props.params.accountId && nextProps.params.accountId) {
this.props.dispatch(fetchAccount(Number(nextProps.params.accountId)));
this.props.dispatch(fetchFollowers(Number(nextProps.params.accountId)));
}
},
}
handleScroll (e) {
const { scrollTop, scrollHeight, clientHeight } = e.target;
@ -46,12 +44,12 @@ const Followers = React.createClass({
if (scrollTop === scrollHeight - clientHeight) {
this.props.dispatch(expandFollowers(Number(this.props.params.accountId)));
}
},
}
handleLoadMore (e) {
e.preventDefault();
this.props.dispatch(expandFollowers(Number(this.props.params.accountId)));
},
}
render () {
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);

32
app/assets/javascripts/components/features/following/index.jsx
View File

@ -1,5 +1,5 @@
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 LoadingIndicator from '../../components/loading_indicator';
import {
@ -18,27 +18,25 @@ const mapStateToProps = (state, props) => ({
accountIds: state.getIn(['user_lists', 'following', Number(props.params.accountId), 'items'])
});
const Following = React.createClass({
class Following extends React.PureComponent {
propTypes: {
params: React.PropTypes.object.isRequired,
dispatch: React.PropTypes.func.isRequired,
accountIds: ImmutablePropTypes.list
},
mixins: [PureRenderMixin],
constructor (props, context) {
super(props, context);
this.handleScroll = this.handleScroll.bind(this);
this.handleLoadMore = this.handleLoadMore.bind(this);
}
componentWillMount () {
this.props.dispatch(fetchAccount(Number(this.props.params.accountId)));
this.props.dispatch(fetchFollowing(Number(this.props.params.accountId)));
},
}
componentWillReceiveProps(nextProps) {
if (nextProps.params.accountId !== this.props.params.accountId && nextProps.params.accountId) {
this.props.dispatch(fetchAccount(Number(nextProps.params.accountId)));
this.props.dispatch(fetchFollowing(Number(nextProps.params.accountId)));
}
},
}
handleScroll (e) {
const { scrollTop, scrollHeight, clientHeight } = e.target;
@ -46,12 +44,12 @@ const Following = React.createClass({
if (scrollTop === scrollHeight - clientHeight) {
this.props.dispatch(expandFollowing(Number(this.props.params.accountId)));
}
},
}
handleLoadMore (e) {
e.preventDefault();
this.props.dispatch(expandFollowing(Number(this.props.params.accountId)));
},
}
render () {
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);

3
app/assets/javascripts/components/features/getting_started/index.jsx
View File

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

36
app/assets/javascripts/components/features/hashtag_timeline/index.jsx
View File

@ -1,5 +1,5 @@
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 Column from '../ui/components/column';
import {
@ -17,17 +17,7 @@ const mapStateToProps = state => ({
accessToken: state.getIn(['meta', 'access_token'])
});
const HashtagTimeline = React.createClass({
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],
class HashtagTimeline extends React.PureComponent {
_subscribe (dispatch, id) {
const { streamingAPIBaseURL, accessToken } = this.props;
@ -46,14 +36,14 @@ const HashtagTimeline = React.createClass({
}
});
},
}
_unsubscribe () {
if (typeof this.subscription !== 'undefined') {
this.subscription.close();
this.subscription = null;
}
},
}
componentDidMount () {
const { dispatch } = this.props;
@ -61,7 +51,7 @@ const HashtagTimeline = React.createClass({
dispatch(refreshTimeline('tag', id));
this._subscribe(dispatch, id);
},
}
componentWillReceiveProps (nextProps) {
if (nextProps.params.id !== this.props.params.id) {
@ -69,11 +59,11 @@ const HashtagTimeline = React.createClass({
this._unsubscribe();
this._subscribe(this.props.dispatch, nextProps.params.id);
}
},
}
componentWillUnmount () {
this._unsubscribe();
},
}
render () {
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.' />} />
</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);

22
app/assets/javascripts/components/features/home_timeline/components/column_settings.jsx
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 { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import ColumnCollapsable from '../../../components/column_collapsable';
@ -25,16 +25,7 @@ const rowStyle = {
};
const ColumnSettings = React.createClass({
propTypes: {
settings: ImmutablePropTypes.map.isRequired,
onChange: React.PropTypes.func.isRequired,
onSave: React.PropTypes.func.isRequired,
intl: React.PropTypes.object.isRequired
},
mixins: [PureRenderMixin],
class ColumnSettings extends React.PureComponent {
render () {
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);

24
app/assets/javascripts/components/features/home_timeline/components/setting_text.jsx
View File

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

20
app/assets/javascripts/components/features/home_timeline/index.jsx
View File

@ -1,5 +1,5 @@
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 Column from '../ui/components/column';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
@ -14,14 +14,7 @@ const mapStateToProps = state => ({
hasUnread: state.getIn(['timelines', 'home', 'unread']) > 0
});
const HomeTimeline = React.createClass({
propTypes: {
intl: React.PropTypes.object.isRequired,
hasUnread: React.PropTypes.bool
},
mixins: [PureRenderMixin],
class HomeTimeline extends React.PureComponent {
render () {
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> }} />} />
</Column>
);
},
}
});
}
HomeTimeline.propTypes = {
intl: PropTypes.object.isRequired,
hasUnread: PropTypes.bool
};
export default connect(mapStateToProps)(injectIntl(HomeTimeline));

28
app/assets/javascripts/components/features/mutes/index.jsx
View File

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

15
app/assets/javascripts/components/features/notifications/components/clear_column_button.jsx
View File

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

26
app/assets/javascripts/components/features/notifications/components/column_settings.jsx
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 { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import ColumnCollapsable from '../../../components/column_collapsable';
@ -23,18 +23,7 @@ const rowStyle = {
};
const ColumnSettings = React.createClass({
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],
class ColumnSettings extends React.PureComponent {
render () {
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);

23
app/assets/javascripts/components/features/notifications/components/notification.jsx
View File

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

9
app/assets/javascripts/components/features/notifications/components/setting_toggle.jsx
View File

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

52
app/assets/javascripts/components/features/notifications/index.jsx
View File

@ -1,5 +1,5 @@
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 Column from '../ui/components/column';
import { expandNotifications, clearNotifications, scrollTopNotifications } from '../../actions/notifications';
@ -28,24 +28,15 @@ const mapStateToProps = state => ({
isUnread: state.getIn(['notifications', 'unread']) > 0
});
const Notifications = React.createClass({
class Notifications extends React.PureComponent {
propTypes: {
notifications: ImmutablePropTypes.list.isRequired,
dispatch: React.PropTypes.func.isRequired,
trackScroll: React.PropTypes.bool,
intl: React.PropTypes.object.isRequired,
isLoading: React.PropTypes.bool,
isUnread: React.PropTypes.bool
},
getDefaultProps () {
return {
trackScroll: true
};
},
mixins: [PureRenderMixin],
constructor (props, context) {
super(props, context);
this.handleScroll = this.handleScroll.bind(this);
this.handleLoadMore = this.handleLoadMore.bind(this);
this.handleClear = this.handleClear.bind(this);
this.setRef = this.setRef.bind(this);
}
handleScroll (e) {
const { scrollTop, scrollHeight, clientHeight } = e.target;
@ -59,28 +50,28 @@ const Notifications = React.createClass({
} else {
this.props.dispatch(scrollTopNotifications(false));
}
},
}
componentDidUpdate (prevProps) {
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;
}
},
}
handleLoadMore (e) {
e.preventDefault();
this.props.dispatch(expandNotifications());
},
}
handleClear () {
if (window.confirm(this.props.intl.formatMessage(messages.confirm))) {
this.props.dispatch(clearNotifications());
}
},
}
setRef (c) {
this.node = c;
},
}
render () {
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));

30
app/assets/javascripts/components/features/public_timeline/index.jsx
View File

@ -1,5 +1,5 @@
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 Column from '../ui/components/column';
import {
@ -25,17 +25,7 @@ const mapStateToProps = state => ({
let subscription;
const PublicTimeline = React.createClass({
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],
class PublicTimeline extends React.PureComponent {
componentDidMount () {
const { dispatch, streamingAPIBaseURL, accessToken } = this.props;
@ -72,14 +62,14 @@ const PublicTimeline = React.createClass({
}
});
},
}
componentWillUnmount () {
// if (typeof subscription !== 'undefined') {
// subscription.close();
// subscription = null;
// }
},
}
render () {
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' />} />
</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));

24
app/assets/javascripts/components/features/reblogs/index.jsx
View File

@ -1,5 +1,5 @@
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 LoadingIndicator from '../../components/loading_indicator';
import { fetchReblogs } from '../../actions/interactions';
@ -12,25 +12,17 @@ const mapStateToProps = (state, props) => ({
accountIds: state.getIn(['user_lists', 'reblogged_by', Number(props.params.statusId)])
});
const Reblogs = React.createClass({
propTypes: {
params: React.PropTypes.object.isRequired,
dispatch: React.PropTypes.func.isRequired,
accountIds: ImmutablePropTypes.list
},
mixins: [PureRenderMixin],
class Reblogs extends React.PureComponent {
componentWillMount () {
this.props.dispatch(fetchReblogs(Number(this.props.params.statusId)));
},
}
componentWillReceiveProps(nextProps) {
if (nextProps.params.statusId !== this.props.params.statusId && nextProps.params.statusId) {
this.props.dispatch(fetchReblogs(Number(nextProps.params.statusId)));
}
},
}
render () {
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);

22
app/assets/javascripts/components/features/report/components/status_check_box.jsx
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 emojify from '../../../emoji';
import Toggle from 'react-toggle';
const StatusCheckBox = React.createClass({
propTypes: {
status: ImmutablePropTypes.map.isRequired,
checked: React.PropTypes.bool,
onToggle: React.PropTypes.func.isRequired,
disabled: React.PropTypes.bool
},
mixins: [PureRenderMixin],
class StatusCheckBox extends React.PureComponent {
render () {
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;

48
app/assets/javascripts/components/features/report/index.jsx
View File

@ -1,7 +1,7 @@
import { connect } from 'react-redux';
import { cancelReport, changeReportComment, submitReport } from '../../actions/reports';
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 Column from '../ui/components/column';
import Button from '../../components/button';
@ -38,28 +38,19 @@ const textareaStyle = {
marginBottom: '10px'
};
const Report = React.createClass({
class Report extends React.PureComponent {
contextTypes: {
router: React.PropTypes.object
},
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],
constructor (props, context) {
super(props, context);
this.handleCommentChange = this.handleCommentChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
componentWillMount () {
if (!this.props.account) {
this.context.router.replace('/');
}
},
}
componentDidMount () {
if (!this.props.account) {
@ -67,22 +58,22 @@ const Report = React.createClass({
}
this.props.dispatch(fetchAccountTimeline(this.props.account.get('id')));
},
}
componentWillReceiveProps (nextProps) {
if (this.props.account !== nextProps.account && nextProps.account) {
this.props.dispatch(fetchAccountTimeline(nextProps.account.get('id')));
}
},
}
handleCommentChange (e) {
this.props.dispatch(changeReportComment(e.target.value));
},
}
handleSubmit () {
this.props.dispatch(submitReport());
this.context.router.replace('/');
},
}
render () {
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));

60
app/assets/javascripts/components/features/status/components/action_bar.jsx
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 ImmutablePropTypes from 'react-immutable-proptypes';
import DropdownMenu from '../../../components/dropdown_menu';
@ -13,50 +13,42 @@ const messages = defineMessages({
report: { id: 'status.report', defaultMessage: 'Report @{name}' }
});
const ActionBar = React.createClass({
class ActionBar extends React.PureComponent {
contextTypes: {
router: React.PropTypes.object
},
propTypes: {
status: ImmutablePropTypes.map.isRequired,
onReply: React.PropTypes.func.isRequired,
onReblog: React.PropTypes.func.isRequired,
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],
constructor (props, context) {
super(props, context);
this.handleReplyClick = this.handleReplyClick.bind(this);
this.handleReblogClick = this.handleReblogClick.bind(this);
this.handleFavouriteClick = this.handleFavouriteClick.bind(this);
this.handleDeleteClick = this.handleDeleteClick.bind(this);
this.handleMentionClick = this.handleMentionClick.bind(this);
this.handleReport = this.handleReport.bind(this);
}
handleReplyClick () {
this.props.onReply(this.props.status);
},
}
handleReblogClick (e) {
this.props.onReblog(this.props.status, e);
},
}
handleFavouriteClick () {
this.props.onFavourite(this.props.status);
},
}
handleDeleteClick () {
this.props.onDelete(this.props.status);
},
}
handleMentionClick () {
this.props.onMention(this.props.status.get('account'), this.context.router);
},
}
handleReport () {
this.props.onReport(this.props.status);
this.context.router.push('/report');
},
}
render () {
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);

14
app/assets/javascripts/components/features/status/components/card.jsx
View File

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

35
app/assets/javascripts/components/features/status/components/detailed_status.jsx
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 Avatar from '../../../components/avatar';
import DisplayName from '../../../components/display_name';
@ -10,20 +10,12 @@ import { Link } from 'react-router';
import { FormattedDate, FormattedNumber } from 'react-intl';
import CardContainer from '../containers/card_container';
const DetailedStatus = React.createClass({
class DetailedStatus extends React.PureComponent {
contextTypes: {
router: React.PropTypes.object
},
propTypes: {
status: ImmutablePropTypes.map.isRequired,
onOpenMedia: React.PropTypes.func.isRequired,
onOpenVideo: React.PropTypes.func.isRequired,
autoPlayGif: React.PropTypes.bool,
},
mixins: [PureRenderMixin],
constructor (props, context) {
super(props, context);
this.handleAccountClick = this.handleAccountClick.bind(this);
}
handleAccountClick (e) {
if (e.button === 0) {
@ -32,7 +24,7 @@ const DetailedStatus = React.createClass({
}
e.stopPropagation();
},
}
render () {
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;

72
app/assets/javascripts/components/features/status/index.jsx
View File

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

37
app/assets/javascripts/components/features/ui/components/boost_modal.jsx
View File

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

32
app/assets/javascripts/components/features/ui/components/column.jsx
View File

@ -1,5 +1,5 @@
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;
@ -29,17 +29,13 @@ const scrollTop = (node) => {
};
};
const Column = React.createClass({
class Column extends React.PureComponent {
propTypes: {
heading: React.PropTypes.string,
icon: React.PropTypes.string,
children: React.PropTypes.node,
active: React.PropTypes.bool,
hideHeadingOnMobile: React.PropTypes.bool
},
mixins: [PureRenderMixin],
constructor (props, context) {
super(props, context);
this.handleHeaderClick = this.handleHeaderClick.bind(this);
this.handleWheel = this.handleWheel.bind(this);
}
handleHeaderClick () {
const scrollable = ReactDOM.findDOMNode(this).querySelector('.scrollable');
@ -47,13 +43,13 @@ const Column = React.createClass({
return;
}
this._interruptScrollAnimation = scrollTop(scrollable);
},
}
handleWheel () {
if (typeof this._interruptScrollAnimation !== 'undefined') {
this._interruptScrollAnimation();
}
},
}
render () {
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;

29
app/assets/javascripts/components/features/ui/components/column_header.jsx
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: {
icon: React.PropTypes.string,
type: React.PropTypes.string,
active: React.PropTypes.bool,
onClick: React.PropTypes.func,
hideOnMobile: React.PropTypes.bool
},
mixins: [PureRenderMixin],
constructor (props, context) {
super(props, context);
this.handleClick = this.handleClick.bind(this);
}
handleClick () {
this.props.onClick();
},
}
render () {
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;

13
app/assets/javascripts/components/features/ui/components/column_link.jsx
View File

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

16
app/assets/javascripts/components/features/ui/components/columns_area.jsx
View File

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

44
app/assets/javascripts/components/features/ui/components/media_modal.jsx
View File

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

33
app/assets/javascripts/components/features/ui/components/modal_root.jsx
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 OnboardingModal from './onboarding_modal';
import VideoModal from './video_modal';
@ -12,37 +12,34 @@ const MODAL_COMPONENTS = {
'BOOST': BoostModal
};
const ModalRoot = React.createClass({
class ModalRoot extends React.PureComponent {
propTypes: {
type: React.PropTypes.string,
props: React.PropTypes.object,
onClose: React.PropTypes.func.isRequired
},
mixins: [PureRenderMixin],
constructor (props, context) {
super(props, context);
this.handleKeyUp = this.handleKeyUp.bind(this);
}
handleKeyUp (e) {
if (e.key === 'Escape' && !!this.props.type) {
this.props.onClose();
}
},
}
componentDidMount () {
window.addEventListener('keyup', this.handleKeyUp, false);
},
}
componentWillUnmount () {
window.removeEventListener('keyup', this.handleKeyUp);
},
}
willEnter () {
return { opacity: 0, scale: 0.98 };
},
}
willLeave () {
return { opacity: spring(0), scale: spring(0.98) };
},
}
render () {
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;

50
app/assets/javascripts/components/features/ui/components/onboarding_modal.jsx
View File

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

4
app/assets/javascripts/components/features/ui/components/tabs_bar.jsx
View File

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

16
app/assets/javascripts/components/features/ui/components/upload_area.jsx
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 { FormattedMessage } from 'react-intl';
const UploadArea = React.createClass({
propTypes: {
active: React.PropTypes.bool
},
mixins: [PureRenderMixin],
class UploadArea extends React.PureComponent {
render () {
const { active } = this.props;
@ -27,6 +21,10 @@ const UploadArea = React.createClass({
);
}
});
}
UploadArea.propTypes = {
active: PropTypes.bool
};
export default UploadArea;

22
app/assets/javascripts/components/features/ui/components/video_modal.jsx
View File

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

47
app/assets/javascripts/components/features/ui/index.jsx
View File

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