From 2991a7cfe685ca9b42230b7030b9e7d0ece94c88 Mon Sep 17 00:00:00 2001 From: Yamagishi Kazutoshi Date: Fri, 12 May 2017 21:44:10 +0900 Subject: 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. --- app/javascript/mastodon/components/account.js | 18 +++--- .../mastodon/components/attachment_list.js | 9 +-- .../mastodon/components/autosuggest_textarea.js | 40 ++++++------ app/javascript/mastodon/components/avatar.js | 49 ++++++-------- .../mastodon/components/avatar_overlay.js | 11 ++-- app/javascript/mastodon/components/button.js | 37 +++++------ .../mastodon/components/column_back_button.js | 15 ++--- .../mastodon/components/column_back_button_slim.js | 13 ++-- .../mastodon/components/column_collapsable.js | 31 ++++----- app/javascript/mastodon/components/display_name.js | 8 +-- .../mastodon/components/dropdown_menu.js | 41 ++++++------ .../mastodon/components/extended_video_player.js | 24 +++---- app/javascript/mastodon/components/icon_button.js | 53 +++++++--------- .../mastodon/components/media_gallery.js | 55 +++++++--------- app/javascript/mastodon/components/permalink.js | 29 ++++----- app/javascript/mastodon/components/status.js | 52 +++++++-------- .../mastodon/components/status_action_bar.js | 67 ++++++++------------ .../mastodon/components/status_content.js | 45 +++++-------- app/javascript/mastodon/components/status_list.js | 49 ++++++-------- app/javascript/mastodon/components/video_player.js | 74 +++++++++------------- 20 files changed, 308 insertions(+), 412 deletions(-) (limited to 'app/javascript/mastodon/components') diff --git a/app/javascript/mastodon/components/account.js b/app/javascript/mastodon/components/account.js index 9016bedb6..5850a8791 100644 --- a/app/javascript/mastodon/components/account.js +++ b/app/javascript/mastodon/components/account.js @@ -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); diff --git a/app/javascript/mastodon/components/attachment_list.js b/app/javascript/mastodon/components/attachment_list.js index 6df578b77..f6449e2c0 100644 --- a/app/javascript/mastodon/components/attachment_list.js +++ b/app/javascript/mastodon/components/attachment_list.js @@ -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 { ); } -} -AttachmentList.propTypes = { - media: ImmutablePropTypes.list.isRequired -}; +} export default AttachmentList; diff --git a/app/javascript/mastodon/components/autosuggest_textarea.js b/app/javascript/mastodon/components/autosuggest_textarea.js index 4d8f2882c..61e101f29 100644 --- a/app/javascript/mastodon/components/autosuggest_textarea.js +++ b/app/javascript/mastodon/components/autosuggest_textarea.js @@ -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; diff --git a/app/javascript/mastodon/components/avatar.js b/app/javascript/mastodon/components/avatar.js index 76c561c91..90c84f32a 100644 --- a/app/javascript/mastodon/components/avatar.js +++ b/app/javascript/mastodon/components/avatar.js @@ -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; diff --git a/app/javascript/mastodon/components/avatar_overlay.js b/app/javascript/mastodon/components/avatar_overlay.js index afa0c6667..b76750513 100644 --- a/app/javascript/mastodon/components/avatar_overlay.js +++ b/app/javascript/mastodon/components/avatar_overlay.js @@ -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 { ); } -} -AvatarOverlay.propTypes = { - staticSrc: PropTypes.string.isRequired, - overlaySrc: PropTypes.string.isRequired, -}; +} export default AvatarOverlay; diff --git a/app/javascript/mastodon/components/button.js b/app/javascript/mastodon/components/button.js index 1063e0289..40a17f92e 100644 --- a/app/javascript/mastodon/components/button.js +++ b/app/javascript/mastodon/components/button.js @@ -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; diff --git a/app/javascript/mastodon/components/column_back_button.js b/app/javascript/mastodon/components/column_back_button.js index bedc417fd..a4971f5f8 100644 --- a/app/javascript/mastodon/components/column_back_button.js +++ b/app/javascript/mastodon/components/column_back_button.js @@ -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; diff --git a/app/javascript/mastodon/components/column_back_button_slim.js b/app/javascript/mastodon/components/column_back_button_slim.js index 9aa7e92c2..6966a138d 100644 --- a/app/javascript/mastodon/components/column_back_button_slim.js +++ b/app/javascript/mastodon/components/column_back_button_slim.js @@ -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; diff --git a/app/javascript/mastodon/components/column_collapsable.js b/app/javascript/mastodon/components/column_collapsable.js index 797946859..3154c977f 100644 --- a/app/javascript/mastodon/components/column_collapsable.js +++ b/app/javascript/mastodon/components/column_collapsable.js @@ -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; diff --git a/app/javascript/mastodon/components/display_name.js b/app/javascript/mastodon/components/display_name.js index 6bdd06db7..e122debf4 100644 --- a/app/javascript/mastodon/components/display_name.js +++ b/app/javascript/mastodon/components/display_name.js @@ -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; diff --git a/app/javascript/mastodon/components/dropdown_menu.js b/app/javascript/mastodon/components/dropdown_menu.js index aed0757b1..99432463c 100644 --- a/app/javascript/mastodon/components/dropdown_menu.js +++ b/app/javascript/mastodon/components/dropdown_menu.js @@ -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
  • ; } @@ -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; diff --git a/app/javascript/mastodon/components/extended_video_player.js b/app/javascript/mastodon/components/extended_video_player.js index 34ede66fd..a07d27186 100644 --- a/app/javascript/mastodon/components/extended_video_player.js +++ b/app/javascript/mastodon/components/extended_video_player.js @@ -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; diff --git a/app/javascript/mastodon/components/icon_button.js b/app/javascript/mastodon/components/icon_button.js index 87324b6c8..b229e5748 100644 --- a/app/javascript/mastodon/components/icon_button.js +++ b/app/javascript/mastodon/components/icon_button.js @@ -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; diff --git a/app/javascript/mastodon/components/media_gallery.js b/app/javascript/mastodon/components/media_gallery.js index dc08c457d..92b1825bf 100644 --- a/app/javascript/mastodon/components/media_gallery.js +++ b/app/javascript/mastodon/components/media_gallery.js @@ -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); diff --git a/app/javascript/mastodon/components/permalink.js b/app/javascript/mastodon/components/permalink.js index 26444f27c..531ece33f 100644 --- a/app/javascript/mastodon/components/permalink.js +++ b/app/javascript/mastodon/components/permalink.js @@ -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; diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js index 4c4fb7e75..e82f1d7aa 100644 --- a/app/javascript/mastodon/components/status.js +++ b/app/javascript/mastodon/components/status.js @@ -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; diff --git a/app/javascript/mastodon/components/status_action_bar.js b/app/javascript/mastodon/components/status_action_bar.js index 1c2445232..b3d5e442c 100644 --- a/app/javascript/mastodon/components/status_action_bar.js +++ b/app/javascript/mastodon/components/status_action_bar.js @@ -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); diff --git a/app/javascript/mastodon/components/status_content.js b/app/javascript/mastodon/components/status_content.js index e613f829f..f7d6b750f 100644 --- a/app/javascript/mastodon/components/status_content.js +++ b/app/javascript/mastodon/components/status_content.js @@ -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; diff --git a/app/javascript/mastodon/components/status_list.js b/app/javascript/mastodon/components/status_list.js index 9abf1fbfe..0413e9d5f 100644 --- a/app/javascript/mastodon/components/status_list.js +++ b/app/javascript/mastodon/components/status_list.js @@ -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; diff --git a/app/javascript/mastodon/components/video_player.js b/app/javascript/mastodon/components/video_player.js index dd3ea0ed4..ba6d97c84 100644 --- a/app/javascript/mastodon/components/video_player.js +++ b/app/javascript/mastodon/components/video_player.js @@ -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); -- cgit