Browse Source

Use ES Class Fields & Static Properties (#3008)

Use ES Class Fields & Static Properties (currently stage 2) for improve class outlook.

Added babel-plugin-transform-class-properties as a Babel plugin.
pull/4/head
Yamagishi Kazutoshi 5 years ago
committed by Eugen Rochko
parent
commit
2991a7cfe6
79 changed files with 865 additions and 1155 deletions
  1. +1
    -0
      .babelrc
  2. +9
    -9
      app/javascript/mastodon/components/account.js
  3. +5
    -4
      app/javascript/mastodon/components/attachment_list.js
  4. +20
    -20
      app/javascript/mastodon/components/autosuggest_textarea.js
  5. +21
    -28
      app/javascript/mastodon/components/avatar.js
  6. +6
    -5
      app/javascript/mastodon/components/avatar_overlay.js
  7. +16
    -21
      app/javascript/mastodon/components/button.js
  8. +5
    -10
      app/javascript/mastodon/components/column_back_button.js
  9. +4
    -9
      app/javascript/mastodon/components/column_back_button_slim.js
  10. +13
    -18
      app/javascript/mastodon/components/column_collapsable.js
  11. +4
    -4
      app/javascript/mastodon/components/display_name.js
  12. +18
    -23
      app/javascript/mastodon/components/dropdown_menu.js
  13. +9
    -15
      app/javascript/mastodon/components/extended_video_player.js
  14. +24
    -29
      app/javascript/mastodon/components/icon_button.js
  15. +23
    -32
      app/javascript/mastodon/components/media_gallery.js
  16. +12
    -17
      app/javascript/mastodon/components/permalink.js
  17. +23
    -29
      app/javascript/mastodon/components/status.js
  18. +27
    -40
      app/javascript/mastodon/components/status_action_bar.js
  19. +17
    -28
      app/javascript/mastodon/components/status_content.js
  20. +21
    -28
      app/javascript/mastodon/components/status_list.js
  21. +31
    -43
      app/javascript/mastodon/components/video_player.js
  22. +11
    -11
      app/javascript/mastodon/features/account/components/action_bar.js
  23. +17
    -24
      app/javascript/mastodon/features/account/components/header.js
  24. +19
    -27
      app/javascript/mastodon/features/account_timeline/components/header.js
  25. +10
    -15
      app/javascript/mastodon/features/account_timeline/index.js
  26. +7
    -7
      app/javascript/mastodon/features/blocks/index.js
  27. +8
    -8
      app/javascript/mastodon/features/community_timeline/index.js
  28. +4
    -4
      app/javascript/mastodon/features/compose/components/autosuggest_account.js
  29. +5
    -5
      app/javascript/mastodon/features/compose/components/character_counter.js
  30. +37
    -50
      app/javascript/mastodon/features/compose/components/compose_form.js
  31. +13
    -20
      app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js
  32. +4
    -4
      app/javascript/mastodon/features/compose/components/navigation_bar.js
  33. +13
    -20
      app/javascript/mastodon/features/compose/components/privacy_dropdown.js
  34. +11
    -17
      app/javascript/mastodon/features/compose/components/reply_indicator.js
  35. +14
    -22
      app/javascript/mastodon/features/compose/components/search.js
  36. +4
    -4
      app/javascript/mastodon/features/compose/components/search_results.js
  37. +9
    -14
      app/javascript/mastodon/features/compose/components/text_icon_button.js
  38. +11
    -18
      app/javascript/mastodon/features/compose/components/upload_button.js
  39. +6
    -6
      app/javascript/mastodon/features/compose/components/upload_form.js
  40. +5
    -5
      app/javascript/mastodon/features/compose/components/upload_progress.js
  41. +3
    -7
      app/javascript/mastodon/features/compose/components/warning.js
  42. +7
    -7
      app/javascript/mastodon/features/compose/containers/sensitive_button_container.js
  43. +7
    -7
      app/javascript/mastodon/features/compose/index.js
  44. +8
    -13
      app/javascript/mastodon/features/favourited_statuses/index.js
  45. +6
    -6
      app/javascript/mastodon/features/favourites/index.js
  46. +7
    -7
      app/javascript/mastodon/features/follow_requests/components/account_authorize.js
  47. +8
    -12
      app/javascript/mastodon/features/follow_requests/index.js
  48. +8
    -14
      app/javascript/mastodon/features/followers/index.js
  49. +8
    -14
      app/javascript/mastodon/features/following/index.js
  50. +5
    -5
      app/javascript/mastodon/features/getting_started/index.js
  51. +8
    -8
      app/javascript/mastodon/features/hashtag_timeline/index.js
  52. +7
    -7
      app/javascript/mastodon/features/home_timeline/components/column_settings.js
  53. +8
    -13
      app/javascript/mastodon/features/home_timeline/components/setting_text.js
  54. +6
    -6
      app/javascript/mastodon/features/home_timeline/index.js
  55. +5
    -5
      app/javascript/mastodon/features/notifications/components/clear_column_button.js
  56. +9
    -9
      app/javascript/mastodon/features/notifications/components/column_settings.js
  57. +4
    -4
      app/javascript/mastodon/features/notifications/components/notification.js
  58. +17
    -25
      app/javascript/mastodon/features/notifications/index.js
  59. +8
    -8
      app/javascript/mastodon/features/public_timeline/index.js
  60. +6
    -6
      app/javascript/mastodon/features/reblogs/index.js
  61. +7
    -7
      app/javascript/mastodon/features/report/components/status_check_box.js
  62. +14
    -20
      app/javascript/mastodon/features/report/index.js
  63. +22
    -32
      app/javascript/mastodon/features/status/components/action_bar.js
  64. +4
    -4
      app/javascript/mastodon/features/status/components/card.js
  65. +12
    -17
      app/javascript/mastodon/features/status/components/detailed_status.js
  66. +24
    -37
      app/javascript/mastodon/features/status/index.js
  67. +13
    -13
      app/javascript/mastodon/features/ui/components/boost_modal.js
  68. +10
    -17
      app/javascript/mastodon/features/ui/components/column.js
  69. +10
    -15
      app/javascript/mastodon/features/ui/components/column_header.js
  70. +4
    -4
      app/javascript/mastodon/features/ui/components/columns_area.js
  71. +10
    -16
      app/javascript/mastodon/features/ui/components/confirmation_modal.js
  72. +14
    -20
      app/javascript/mastodon/features/ui/components/media_modal.js
  73. +6
    -11
      app/javascript/mastodon/features/ui/components/modal_root.js
  74. +15
    -21
      app/javascript/mastodon/features/ui/components/onboarding_modal.js
  75. +5
    -11
      app/javascript/mastodon/features/ui/components/upload_area.js
  76. +7
    -7
      app/javascript/mastodon/features/ui/components/video_modal.js
  77. +16
    -27
      app/javascript/mastodon/features/ui/index.js
  78. +1
    -0
      package.json
  79. +9
    -0
      yarn.lock

+ 1
- 0
.babelrc View File

@ -14,6 +14,7 @@
"plugins": [
"syntax-dynamic-import",
"transform-object-rest-spread",
"transform-class-properties",
[
"react-intl",
{

+ 9
- 9
app/javascript/mastodon/components/account.js View File

@ -18,6 +18,15 @@ const messages = defineMessages({
class Account extends ImmutablePureComponent {
static 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
};
constructor (props, context) {
super(props, context);
this.handleFollow = this.handleFollow.bind(this);
@ -81,13 +90,4 @@ class Account extends ImmutablePureComponent {
}
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);

+ 5
- 4
app/javascript/mastodon/components/attachment_list.js View File

@ -5,6 +5,10 @@ const filename = url => url.split('/').pop().split('#')[0].split('?')[0];
class AttachmentList extends React.PureComponent {
static propTypes = {
media: ImmutablePropTypes.list.isRequired
};
render () {
const { media } = this.props;
@ -24,10 +28,7 @@ class AttachmentList extends React.PureComponent {
</div>
);
}
}
AttachmentList.propTypes = {
media: ImmutablePropTypes.list.isRequired
};
}
export default AttachmentList;

+ 20
- 20
app/javascript/mastodon/components/autosuggest_textarea.js View File

@ -32,6 +32,25 @@ const textAtCursorMatchesToken = (str, caretPosition) => {
class AutosuggestTextarea extends ImmutablePureComponent {
static 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,
autoFocus: PropTypes.bool
};
static defaultProps = {
autoFucus: true
};
constructor (props, context) {
super(props, context);
this.state = {
@ -194,25 +213,6 @@ class AutosuggestTextarea extends ImmutablePureComponent {
);
}
};
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,
autoFocus: PropTypes.bool
};
AutosuggestTextarea.defaultProps = {
autoFucus: true,
};
}
export default AutosuggestTextarea;

+ 21
- 28
app/javascript/mastodon/components/avatar.js View File

@ -3,23 +3,31 @@ import PropTypes from 'prop-types';
class Avatar extends React.PureComponent {
constructor (props, context) {
super(props, context);
this.state = {
hovering: false
};
this.handleMouseEnter = this.handleMouseEnter.bind(this);
this.handleMouseLeave = this.handleMouseLeave.bind(this);
}
handleMouseEnter () {
static propTypes = {
src: PropTypes.string.isRequired,
staticSrc: PropTypes.string,
size: PropTypes.number.isRequired,
style: PropTypes.object,
animate: PropTypes.bool,
inline: PropTypes.bool
};
static defaultProps = {
animate: false,
size: 20,
inline: false
};
state = {
hovering: true
};
handleMouseEnter = () => {
if (this.props.animate) return;
this.setState({ hovering: true });
}
handleMouseLeave () {
handleMouseLeave = () => {
if (this.props.animate) return;
this.setState({ hovering: false });
}
@ -59,19 +67,4 @@ class Avatar extends React.PureComponent {
}
Avatar.propTypes = {
src: PropTypes.string.isRequired,
staticSrc: PropTypes.string,
size: PropTypes.number.isRequired,
style: PropTypes.object,
animate: PropTypes.bool,
inline: PropTypes.bool
};
Avatar.defaultProps = {
animate: false,
size: 20,
inline: false
};
export default Avatar;

+ 6
- 5
app/javascript/mastodon/components/avatar_overlay.js View File

@ -2,6 +2,11 @@ import React from 'react';
import PropTypes from 'prop-types';
class AvatarOverlay extends React.PureComponent {
static propTypes = {
staticSrc: PropTypes.string.isRequired,
overlaySrc: PropTypes.string.isRequired
};
render() {
const {staticSrc, overlaySrc} = this.props;
@ -20,11 +25,7 @@ class AvatarOverlay extends React.PureComponent {
</div>
);
}
}
AvatarOverlay.propTypes = {
staticSrc: PropTypes.string.isRequired,
overlaySrc: PropTypes.string.isRequired,
};
}
export default AvatarOverlay;

+ 16
- 21
app/javascript/mastodon/components/button.js View File

@ -3,12 +3,22 @@ import PropTypes from 'prop-types';
class Button extends React.PureComponent {
constructor (props, context) {
super(props, context);
this.handleClick = this.handleClick.bind(this);
}
handleClick (e) {
static 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
};
static defaultProps = {
size: 36
};
handleClick = (e) => {
if (!this.props.disabled) {
this.props.onClick();
}
@ -32,19 +42,4 @@ class Button extends React.PureComponent {
}
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;

+ 5
- 10
app/javascript/mastodon/components/column_back_button.js View File

@ -4,12 +4,11 @@ import PropTypes from 'prop-types';
class ColumnBackButton extends React.PureComponent {
constructor (props, context) {
super(props, context);
this.handleClick = this.handleClick.bind(this);
}
static contextTypes = {
router: PropTypes.object
};
handleClick () {
handleClick = () => {
if (window.history && window.history.length === 1) this.context.router.push("/");
else this.context.router.goBack();
}
@ -23,10 +22,6 @@ class ColumnBackButton extends React.PureComponent {
);
}
};
ColumnBackButton.contextTypes = {
router: PropTypes.object
};
}
export default ColumnBackButton;

+ 4
- 9
app/javascript/mastodon/components/column_back_button_slim.js View File

@ -4,12 +4,11 @@ import PropTypes from 'prop-types';
class ColumnBackButtonSlim extends React.PureComponent {
constructor (props, context) {
super(props, context);
this.handleClick = this.handleClick.bind(this);
}
static contextTypes = {
router: PropTypes.object
};
handleClick () {
handleClick = () => {
this.context.router.push('/');
}
@ -25,8 +24,4 @@ class ColumnBackButtonSlim extends React.PureComponent {
}
}
ColumnBackButtonSlim.contextTypes = {
router: PropTypes.object
};
export default ColumnBackButtonSlim;

+ 13
- 18
app/javascript/mastodon/components/column_collapsable.js View File

@ -4,16 +4,19 @@ import PropTypes from 'prop-types';
class ColumnCollapsable extends React.PureComponent {
constructor (props, context) {
super(props, context);
this.state = {
collapsed: true
};
this.handleToggleCollapsed = this.handleToggleCollapsed.bind(this);
}
handleToggleCollapsed () {
static propTypes = {
icon: PropTypes.string.isRequired,
title: PropTypes.string,
fullHeight: PropTypes.number.isRequired,
children: PropTypes.node,
onCollapse: PropTypes.func
};
state = {
collapsed: true
};
handleToggleCollapsed = () => {
const currentState = this.state.collapsed;
this.setState({ collapsed: !currentState });
@ -46,12 +49,4 @@ class ColumnCollapsable extends React.PureComponent {
}
}
ColumnCollapsable.propTypes = {
icon: PropTypes.string.isRequired,
title: PropTypes.string,
fullHeight: PropTypes.number.isRequired,
children: PropTypes.node,
onCollapse: PropTypes.func
};
export default ColumnCollapsable;

+ 4
- 4
app/javascript/mastodon/components/display_name.js View File

@ -5,6 +5,10 @@ import emojify from '../emoji';
class DisplayName extends React.PureComponent {
static propTypes = {
account: ImmutablePropTypes.map.isRequired
};
render () {
const displayName = this.props.account.get('display_name').length === 0 ? this.props.account.get('username') : this.props.account.get('display_name');
const displayNameHTML = { __html: emojify(escapeTextContentForBrowser(displayName)) };
@ -16,10 +20,6 @@ class DisplayName extends React.PureComponent {
);
}
};
DisplayName.propTypes = {
account: ImmutablePropTypes.map.isRequired
}
export default DisplayName;

+ 18
- 23
app/javascript/mastodon/components/dropdown_menu.js View File

@ -4,20 +4,27 @@ import PropTypes from 'prop-types';
class DropdownMenu extends React.PureComponent {
constructor (props, context) {
super(props, context);
this.state = {
direction: 'left'
};
this.setRef = this.setRef.bind(this);
this.renderItem = this.renderItem.bind(this);
}
static propTypes = {
icon: PropTypes.string.isRequired,
items: PropTypes.array.isRequired,
size: PropTypes.number.isRequired,
direction: PropTypes.string,
ariaLabel: PropTypes.string
};
static defaultProps = {
ariaLabel: "Menu"
};
state = {
direction: 'left'
};
setRef (c) {
setRef = (c) => {
this.dropdown = c;
}
handleClick (i, e) {
handleClick = (i, e) => {
const { action } = this.props.items[i];
if (typeof action === 'function') {
@ -27,7 +34,7 @@ class DropdownMenu extends React.PureComponent {
}
}
renderItem (item, i) {
renderItem = (item, i) => {
if (item === null) {
return <li key={ 'sep' + i } className='dropdown__sep' />;
}
@ -64,16 +71,4 @@ class DropdownMenu extends React.PureComponent {
}
DropdownMenu.propTypes = {
icon: PropTypes.string.isRequired,
items: PropTypes.array.isRequired,
size: PropTypes.number.isRequired,
direction: PropTypes.string,
ariaLabel: PropTypes.string
};
DropdownMenu.defaultProps = {
ariaLabel: "Menu"
};
export default DropdownMenu;

+ 9
- 15
app/javascript/mastodon/components/extended_video_player.js View File

@ -3,13 +3,14 @@ import PropTypes from 'prop-types';
class ExtendedVideoPlayer extends React.PureComponent {
constructor (props, context) {
super(props, context);
this.handleLoadedData = this.handleLoadedData.bind(this);
this.setRef = this.setRef.bind(this);
}
handleLoadedData () {
static propTypes = {
src: PropTypes.string.isRequired,
time: PropTypes.number,
controls: PropTypes.bool.isRequired,
muted: PropTypes.bool.isRequired
};
handleLoadedData = () => {
if (this.props.time) {
this.video.currentTime = this.props.time;
}
@ -23,7 +24,7 @@ class ExtendedVideoPlayer extends React.PureComponent {
this.video.removeEventListener('loadeddata', this.handleLoadedData);
}
setRef (c) {
setRef = (c) => {
this.video = c;
}
@ -44,11 +45,4 @@ class ExtendedVideoPlayer extends React.PureComponent {
}
ExtendedVideoPlayer.propTypes = {
src: PropTypes.string.isRequired,
time: PropTypes.number,
controls: PropTypes.bool.isRequired,
muted: PropTypes.bool.isRequired
};
export default ExtendedVideoPlayer;

+ 24
- 29
app/javascript/mastodon/components/icon_button.js View File

@ -4,12 +4,30 @@ import PropTypes from 'prop-types';
class IconButton extends React.PureComponent {
constructor (props, context) {
super(props, context);
this.handleClick = this.handleClick.bind(this);
}
handleClick (e) {
static propTypes = {
className: PropTypes.string,
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
};
static defaultProps = {
size: 18,
active: false,
disabled: false,
animate: false,
overlay: false
};
handleClick = (e) => {
e.preventDefault();
if (!this.props.disabled) {
@ -70,27 +88,4 @@ class IconButton extends React.PureComponent {
}
IconButton.propTypes = {
className: PropTypes.string,
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;

+ 23
- 32
app/javascript/mastodon/components/media_gallery.js View File

@ -10,12 +10,16 @@ const messages = defineMessages({
});
class Item extends React.PureComponent {
constructor (props, context) {
super(props, context);
this.handleClick = this.handleClick.bind(this);
}
handleClick (e) {
static propTypes = {
attachment: ImmutablePropTypes.map.isRequired,
index: PropTypes.number.isRequired,
size: PropTypes.number.isRequired,
onClick: PropTypes.func.isRequired,
autoPlayGif: PropTypes.bool.isRequired
};
handleClick = (e) => {
const { index, onClick } = this.props;
if (e.button === 0) {
@ -119,30 +123,26 @@ class Item extends React.PureComponent {
}
Item.propTypes = {
attachment: ImmutablePropTypes.map.isRequired,
index: PropTypes.number.isRequired,
size: PropTypes.number.isRequired,
onClick: PropTypes.func.isRequired,
autoPlayGif: PropTypes.bool.isRequired
};
class MediaGallery extends React.PureComponent {
constructor (props, context) {
super(props, context);
this.state = {
visible: !props.sensitive
};
this.handleOpen = this.handleOpen.bind(this);
this.handleClick = this.handleClick.bind(this);
}
static propTypes = {
sensitive: PropTypes.bool,
media: ImmutablePropTypes.list.isRequired,
height: PropTypes.number.isRequired,
onOpenMedia: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
autoPlayGif: PropTypes.bool.isRequired
};
state = {
visible: !props.sensitive
};
handleOpen (e) {
handleOpen = (e) => {
this.setState({ visible: !this.state.visible });
}
handleClick (index) {
handleClick = (index) => {
this.props.onOpenMedia(this.props.media, index);
}
@ -184,13 +184,4 @@ class MediaGallery extends React.PureComponent {
}
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);

+ 12
- 17
app/javascript/mastodon/components/permalink.js View File

@ -3,12 +3,18 @@ import PropTypes from 'prop-types';
class Permalink extends React.PureComponent {
constructor (props, context) {
super(props, context);
this.handleClick = this.handleClick.bind(this);
}
handleClick (e) {
static contextTypes = {
router: PropTypes.object
};
static propTypes = {
className: PropTypes.string,
href: PropTypes.string.isRequired,
to: PropTypes.string.isRequired,
children: PropTypes.node
};
handleClick = (e) => {
if (e.button === 0) {
e.preventDefault();
this.context.router.push(this.props.to);
@ -27,15 +33,4 @@ class Permalink extends React.PureComponent {
}
Permalink.contextTypes = {
router: PropTypes.object
};
Permalink.propTypes = {
className: PropTypes.string,
href: PropTypes.string.isRequired,
to: PropTypes.string.isRequired,
children: PropTypes.node
};
export default Permalink;

+ 23
- 29
app/javascript/mastodon/components/status.js View File

@ -17,18 +17,33 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
class Status extends ImmutablePureComponent {
constructor (props, context) {
super(props, context);
this.handleClick = this.handleClick.bind(this);
this.handleAccountClick = this.handleAccountClick.bind(this);
}
handleClick () {
static contextTypes = {
router: PropTypes.object
};
static propTypes = {
status: ImmutablePropTypes.map,
account: 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
};
handleClick = () => {
const { status } = this.props;
this.context.router.push(`/statuses/${status.getIn(['reblog', 'id'], status.get('id'))}`);
}
handleAccountClick (id, e) {
handleAccountClick = (id, e) => {
if (e.button === 0) {
e.preventDefault();
this.context.router.push(`/accounts/${id}`);
@ -108,25 +123,4 @@ class Status extends ImmutablePureComponent {
}
Status.contextTypes = {
router: PropTypes.object
};
Status.propTypes = {
status: ImmutablePropTypes.map,
account: 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;

+ 27
- 40
app/javascript/mastodon/components/status_action_bar.js View File

@ -21,52 +21,57 @@ const messages = defineMessages({
class StatusActionBar extends React.PureComponent {
constructor (props, context) {
super(props, context);
this.handleReplyClick = this.handleReplyClick.bind(this);
this.handleFavouriteClick = this.handleFavouriteClick.bind(this);
this.handleReblogClick = this.handleReblogClick.bind(this);
this.handleDeleteClick = this.handleDeleteClick.bind(this);
this.handleMentionClick = this.handleMentionClick.bind(this);
this.handleMuteClick = this.handleMuteClick.bind(this);
this.handleBlockClick = this.handleBlockClick.bind(this);
this.handleOpen = this.handleOpen.bind(this);
this.handleReport = this.handleReport.bind(this);
}
handleReplyClick () {
static contextTypes = {
router: PropTypes.object
};
static 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
};
handleReplyClick = () => {
this.props.onReply(this.props.status, this.context.router);
}
handleFavouriteClick () {
handleFavouriteClick = () => {
this.props.onFavourite(this.props.status);
}
handleReblogClick (e) {
handleReblogClick = (e) => {
this.props.onReblog(this.props.status, e);
}
handleDeleteClick () {
handleDeleteClick = () => {
this.props.onDelete(this.props.status);
}
handleMentionClick () {
handleMentionClick = () => {
this.props.onMention(this.props.status.get('account'), this.context.router);
}
handleMuteClick () {
handleMuteClick = () => {
this.props.onMute(this.props.status.get('account'));
}
handleBlockClick () {
handleBlockClick = () => {
this.props.onBlock(this.props.status.get('account'));
}
handleOpen () {
handleOpen = () => {
this.context.router.push(`/statuses/${this.props.status.get('id')}`);
}
handleReport () {
handleReport = () => {
this.props.onReport(this.props.status);
this.context.router.push('/report');
}
@ -122,22 +127,4 @@ class StatusActionBar extends React.PureComponent {
}
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);

+ 17
- 28
app/javascript/mastodon/components/status_content.js View File

@ -9,19 +9,17 @@ import Permalink from './permalink';
class StatusContent extends React.PureComponent {
constructor (props, context) {
super(props, context);
this.state = {
hidden: true
};
this.onMentionClick = this.onMentionClick.bind(this);
this.onHashtagClick = this.onHashtagClick.bind(this);
this.handleMouseDown = this.handleMouseDown.bind(this)
this.handleMouseUp = this.handleMouseUp.bind(this);
this.handleSpoilerClick = this.handleSpoilerClick.bind(this);
this.setRef = this.setRef.bind(this);
static contextTypes = {
router: PropTypes.object
};
static propTypes = {
status: ImmutablePropTypes.map.isRequired,
onClick: PropTypes.func
};
state = {
hidden: true
};
componentDidMount () {
@ -46,14 +44,14 @@ class StatusContent extends React.PureComponent {
}
}
onMentionClick (mention, e) {
onMentionClick = (mention, e) => {
if (e.button === 0) {
e.preventDefault();
this.context.router.push(`/accounts/${mention.get('id')}`);
}
}
onHashtagClick (hashtag, e) {
onHashtagClick = (hashtag, e) => {
hashtag = hashtag.replace(/^#/, '').toLowerCase();
if (e.button === 0) {
@ -62,11 +60,11 @@ class StatusContent extends React.PureComponent {
}
}
handleMouseDown (e) {
handleMouseDown = (e) => {
this.startXY = [e.clientX, e.clientY];
}
handleMouseUp (e) {
handleMouseUp = (e) => {
const [ startX, startY ] = this.startXY;
const [ deltaX, deltaY ] = [Math.abs(e.clientX - startX), Math.abs(e.clientY - startY)];
@ -81,12 +79,12 @@ class StatusContent extends React.PureComponent {
this.startXY = null;
}
handleSpoilerClick (e) {
handleSpoilerClick = (e) => {
e.preventDefault();
this.setState({ hidden: !this.state.hidden });
}
setRef (c) {
setRef = (c) => {
this.node = c;
}
@ -158,13 +156,4 @@ class StatusContent extends React.PureComponent {
}
StatusContent.contextTypes = {
router: PropTypes.object
};
StatusContent.propTypes = {
status: ImmutablePropTypes.map.isRequired,
onClick: PropTypes.func
};
export default StatusContent;

+ 21
- 28
app/javascript/mastodon/components/status_list.js View File

@ -9,14 +9,25 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
class StatusList extends ImmutablePureComponent {
constructor (props, context) {
super(props, context);
this.handleScroll = this.handleScroll.bind(this);
this.setRef = this.setRef.bind(this);
this.handleLoadMore = this.handleLoadMore.bind(this);
}
handleScroll (e) {
static propTypes = {
scrollKey: PropTypes.string.isRequired,
statusIds: ImmutablePropTypes.list.isRequired,
onScrollToBottom: PropTypes.func,
onScrollToTop: PropTypes.func,
onScroll: PropTypes.func,
shouldUpdateScroll: PropTypes.func,
isLoading: PropTypes.bool,
isUnread: PropTypes.bool,
hasMore: PropTypes.bool,
prepend: PropTypes.node,
emptyMessage: PropTypes.node
};
static defaultProps = {
trackScroll: true
};
handleScroll = (e) => {
const { scrollTop, scrollHeight, clientHeight } = e.target;
const offset = scrollHeight - scrollTop - clientHeight;
this._oldScrollPosition = scrollHeight - scrollTop;
@ -52,11 +63,11 @@ class StatusList extends ImmutablePureComponent {
this.node.removeEventListener('scroll', this.handleScroll);
}
setRef (c) {
setRef = (c) => {
this.node = c;
}
handleLoadMore (e) {
handleLoadMore = (e) => {
e.preventDefault();
this.props.onScrollToBottom();
}
@ -109,22 +120,4 @@ class StatusList extends ImmutablePureComponent {
}
StatusList.propTypes = {
scrollKey: PropTypes.string.isRequired,
statusIds: ImmutablePropTypes.list.isRequired,
onScrollToBottom: PropTypes.func,
onScrollToTop: PropTypes.func,
onScroll: PropTypes.func,
shouldUpdateScroll: PropTypes.func,
isLoading: PropTypes.bool,
isUnread: PropTypes.bool,
hasMore: PropTypes.bool,
prepend: PropTypes.node,
emptyMessage: PropTypes.node
};
StatusList.defaultProps = {
trackScroll: true
};
export default StatusList;

+ 31
- 43
app/javascript/mastodon/components/video_player.js View File

@ -13,31 +13,34 @@ const messages = defineMessages({
class VideoPlayer extends React.PureComponent {
constructor (props, context) {
super(props, context);
this.state = {
visible: !this.props.sensitive,
preview: true,
muted: true,
hasAudio: true,
videoError: false
};
this.handleClick = this.handleClick.bind(this);
this.handleVideoClick = this.handleVideoClick.bind(this);
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 () {
static 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
};
static defaultProps = {
width: 239,
height: 110
};
state = {
visible: !this.props.sensitive,
preview: true,
muted: true,
hasAudio: true,
videoError: false
};
handleClick = () => {
this.setState({ muted: !this.state.muted });
}
handleVideoClick (e) {
handleVideoClick = (e) => {
e.stopPropagation();
const node = this.video;
@ -49,33 +52,33 @@ class VideoPlayer extends React.PureComponent {
}
}
handleOpen () {
handleOpen = () => {
this.setState({ preview: !this.state.preview });
}
handleVisibility () {
handleVisibility = () => {
this.setState({
visible: !this.state.visible,
preview: true
});
}
handleExpand () {
handleExpand = () => {
this.video.pause();
this.props.onOpenVideo(this.props.media, this.video.currentTime);
}
setRef (c) {
setRef = (c) => {
this.video = c;
}
handleLoadedData () {
handleLoadedData = () => {
if (('WebkitAppearance' in document.documentElement.style && this.video.audioTracks.length === 0) || this.video.mozHasAudio === false) {
this.setState({ hasAudio: false });
}
}
handleVideoError () {
handleVideoError = () => {
this.setState({ videoError: true });
}
@ -191,19 +194,4 @@ class VideoPlayer extends React.PureComponent {
}
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);

+ 11
- 11
app/javascript/mastodon/features/account/components/action_bar.js View File

@ -20,6 +20,17 @@ const messages = defineMessages({
class ActionBar extends React.PureComponent {
static 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
};
render () {
const { account, me, intl } = this.props;
@ -79,15 +90,4 @@ class ActionBar extends React.PureComponent {
}
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);

+ 17
- 24
app/javascript/mastodon/features/account/components/header.js View File

@ -25,23 +25,21 @@ const makeMapStateToProps = () => {
class Avatar extends ImmutablePureComponent {
constructor (props, context) {
super(props, context);
static propTypes = {
account: ImmutablePropTypes.map.isRequired,
autoPlayGif: PropTypes.bool.isRequired
};
this.state = {
isHovered: false
};
state = {
isHovered: false
};
this.handleMouseOver = this.handleMouseOver.bind(this);
this.handleMouseOut = this.handleMouseOut.bind(this);
}
handleMouseOver () {
handleMouseOver = () => {
if (this.state.isHovered) return;
this.setState({ isHovered: true });
}
handleMouseOut () {
handleMouseOut = () => {
if (!this.state.isHovered) return;
this.setState({ isHovered: false });
}
@ -71,13 +69,16 @@ class Avatar extends ImmutablePureComponent {
}
Avatar.propTypes = {
account: ImmutablePropTypes.map.isRequired,
autoPlayGif: PropTypes.bool.isRequired
};
class Header extends ImmutablePureComponent {
static propTypes = {
account: ImmutablePropTypes.map,
me: PropTypes.number.isRequired,
onFollow: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
autoPlayGif: PropTypes.bool.isRequired
};
render () {
const { account, me, intl } = this.props;
@ -139,12 +140,4 @@ class Header extends ImmutablePureComponent {
}
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));

+ 19
- 27
app/javascript/mastodon/features/account_timeline/components/header.js View File

@ -8,33 +8,38 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
class Header extends ImmutablePureComponent {
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);
}
static 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
};
static contextTypes = {
router: PropTypes.object
};
handleFollow () {
handleFollow = () => {
this.props.onFollow(this.props.account);
}
handleBlock () {
handleBlock = () => {
this.props.onBlock(this.props.account);
}
handleMention () {
handleMention = () => {
this.props.onMention(this.props.account, this.context.router);
}
handleReport () {
handleReport = () => {
this.props.onReport(this.props.account);
this.context.router.push('/report');
}
handleMute() {
handleMute = () => {
this.props.onMute(this.props.account);
}
@ -64,20 +69,7 @@ class Header extends ImmutablePureComponent {
</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;

+ 10
- 15
app/javascript/mastodon/features/account_timeline/index.js View File

@ -24,24 +24,28 @@ const mapStateToProps = (state, props) => ({
class AccountTimeline extends ImmutablePureComponent {
constructor (props, context) {
super(props, context);
this.handleScrollToBottom = this.handleScrollToBottom.bind(this);
}
static propTypes = {
params: PropTypes.object.isRequired,
dispatch: PropTypes.func.isRequired,
statusIds: ImmutablePropTypes.list,
isLoading: PropTypes.bool,
hasMore: PropTypes.bool,
me: PropTypes.number.isRequired
};
componentWillMount () {
this.props.dispatch(fetchAccount(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) {
this.props.dispatch(fetchAccount(Number(nextProps.params.accountId)));
this.props.dispatch(fetchAccountTimeline(Number(nextProps.params.accountId)));
}
}
handleScrollToBottom () {
handleScrollToBottom = () => {
if (!this.props.isLoading && this.props.hasMore) {
this.props.dispatch(expandAccountTimeline(Number(this.props.params.accountId)));
}
@ -77,13 +81,4 @@ class AccountTimeline extends ImmutablePureComponent {
}
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);

+ 7
- 7
app/javascript/mastodon/features/blocks/index.js View File

@ -21,6 +21,13 @@ const mapStateToProps = state => ({
class Blocks extends ImmutablePureComponent {
static propTypes = {
params: PropTypes.object.isRequired,
dispatch: PropTypes.func.isRequired,
accountIds: ImmutablePropTypes.list,
intl: PropTypes.object.isRequired
};
constructor (props, context) {
super(props, context);
this.handleScroll = this.handleScroll.bind(this);
@ -64,11 +71,4 @@ class Blocks extends ImmutablePureComponent {
}
}
Blocks.propTypes = {
params: PropTypes.object.isRequired,
dispatch: PropTypes.func.isRequired,
accountIds: ImmutablePropTypes.list,
intl: PropTypes.object.isRequired
};
export default connect(mapStateToProps)(injectIntl(Blocks));

+ 8
- 8
app/javascript/mastodon/features/community_timeline/index.js View File

@ -28,6 +28,14 @@ let subscription;
class CommunityTimeline extends React.PureComponent {
static propTypes = {
dispatch: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
streamingAPIBaseURL: PropTypes.string.isRequired,
accessToken: PropTypes.string.isRequired,
hasUnread: PropTypes.bool
};
componentDidMount () {
const { dispatch, streamingAPIBaseURL, accessToken } = this.props;
@ -85,12 +93,4 @@ class CommunityTimeline extends React.PureComponent {
}
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));

+ 4
- 4
app/javascript/mastodon/features/compose/components/autosuggest_account.js View File

@ -6,6 +6,10 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
class AutosuggestAccount extends ImmutablePureComponent {
static propTypes = {
account: ImmutablePropTypes.map.isRequired
};
render () {
const { account } = this.props;
@ -19,8 +23,4 @@ class AutosuggestAccount extends ImmutablePureComponent {
}
AutosuggestAccount.propTypes = {
account: ImmutablePropTypes.map.isRequired
};
export default AutosuggestAccount;

+ 5
- 5
app/javascript/mastodon/features/compose/components/character_counter.js