mirror of
https://framagit.org/tykayn/mastodon.git
synced 2023-08-25 08:33:12 +02:00
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.
This commit is contained in:
parent
44a3584e2d
commit
2991a7cfe6
1
.babelrc
1
.babelrc
@ -14,6 +14,7 @@
|
||||
"plugins": [
|
||||
"syntax-dynamic-import",
|
||||
"transform-object-rest-spread",
|
||||
"transform-class-properties",
|
||||
[
|
||||
"react-intl",
|
||||
{
|
||||
|
@ -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,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;
|
||||
|
@ -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;
|
||||
|
@ -3,23 +3,31 @@ import PropTypes from 'prop-types';
|
||||
|
||||
class Avatar extends React.PureComponent {
|
||||
|
||||
constructor (props, context) {
|
||||
super(props, context);
|
||||
static propTypes = {
|
||||
src: PropTypes.string.isRequired,
|
||||
staticSrc: PropTypes.string,
|
||||
size: PropTypes.number.isRequired,
|
||||
style: PropTypes.object,
|
||||
animate: PropTypes.bool,
|
||||
inline: PropTypes.bool
|
||||
};
|
||||
|
||||
this.state = {
|
||||
hovering: false
|
||||
};
|
||||
static defaultProps = {
|
||||
animate: false,
|
||||
size: 20,
|
||||
inline: false
|
||||
};
|
||||
|
||||
this.handleMouseEnter = this.handleMouseEnter.bind(this);
|
||||
this.handleMouseLeave = this.handleMouseLeave.bind(this);
|
||||
}
|
||||
state = {
|
||||
hovering: true
|
||||
};
|
||||
|
||||
handleMouseEnter () {
|
||||
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;
|
||||
|
@ -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;
|
||||
|
@ -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);
|
||||
}
|
||||
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
|
||||
};
|
||||
|
||||
handleClick (e) {
|
||||
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;
|
||||
|
@ -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,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;
|
||||
|
@ -4,16 +4,19 @@ import PropTypes from 'prop-types';
|
||||
|
||||
class ColumnCollapsable extends React.PureComponent {
|
||||
|
||||
constructor (props, context) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
collapsed: true
|
||||
};
|
||||
static propTypes = {
|
||||
icon: PropTypes.string.isRequired,
|
||||
title: PropTypes.string,
|
||||
fullHeight: PropTypes.number.isRequired,
|
||||
children: PropTypes.node,
|
||||
onCollapse: PropTypes.func
|
||||
};
|
||||
|
||||
this.handleToggleCollapsed = this.handleToggleCollapsed.bind(this);
|
||||
}
|
||||
state = {
|
||||
collapsed: true
|
||||
};
|
||||
|
||||
handleToggleCollapsed () {
|
||||
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;
|
||||
|
@ -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;
|
||||
|
@ -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
|
||||
};
|
||||
|
||||
setRef (c) {
|
||||
static defaultProps = {
|
||||
ariaLabel: "Menu"
|
||||
};
|
||||
|
||||
state = {
|
||||
direction: 'left'
|
||||
};
|
||||
|
||||
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;
|
||||
|
@ -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);
|
||||
}
|
||||
static propTypes = {
|
||||
src: PropTypes.string.isRequired,
|
||||
time: PropTypes.number,
|
||||
controls: PropTypes.bool.isRequired,
|
||||
muted: PropTypes.bool.isRequired
|
||||
};
|
||||
|
||||
handleLoadedData () {
|
||||
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;
|
||||
|
@ -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);
|
||||
}
|
||||
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
|
||||
};
|
||||
|
||||
handleClick (e) {
|
||||
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;
|
||||
|
@ -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
|
||||
};
|
||||
|
||||
handleOpen (e) {
|
||||
state = {
|
||||
visible: !props.sensitive
|
||||
};
|
||||
|
||||
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);
|
||||
|
@ -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);
|
||||
}
|
||||
static contextTypes = {
|
||||
router: PropTypes.object
|
||||
};
|
||||
|
||||
handleClick (e) {
|
||||
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;
|
||||
|
@ -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);
|
||||
}
|
||||
static contextTypes = {
|
||||
router: PropTypes.object
|
||||
};
|
||||
|
||||
handleClick () {
|
||||
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;
|
||||
|
@ -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);
|
||||
}
|
||||
static contextTypes = {
|
||||
router: PropTypes.object
|
||||
};
|
||||
|
||||
handleReplyClick () {
|
||||
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);
|
||||
|
@ -9,19 +9,17 @@ import Permalink from './permalink';
|
||||
|
||||
class StatusContent extends React.PureComponent {
|
||||
|
||||
constructor (props, context) {
|
||||
super(props, context);
|
||||
static contextTypes = {
|
||||
router: PropTypes.object
|
||||
};
|
||||
|
||||
this.state = {
|
||||
hidden: true
|
||||
};
|
||||
static propTypes = {
|
||||
status: ImmutablePropTypes.map.isRequired,
|
||||
onClick: PropTypes.func
|
||||
};
|
||||
|
||||
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);
|
||||
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;
|
||||
|
@ -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);
|
||||
}
|
||||
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
|
||||
};
|
||||
|
||||
handleScroll (e) {
|
||||
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;
|
||||
|
@ -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
|
||||
};
|
||||
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
|
||||
};
|
||||
|
||||
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);
|
||||
}
|
||||
static defaultProps = {
|
||||
width: 239,
|
||||
height: 110
|
||||
};
|
||||
|
||||
handleClick () {
|
||||
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);
|
||||
|
@ -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);
|
||||
|
@ -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));
|
||||
|
@ -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
|
||||
};
|
||||
|
||||
handleFollow () {
|
||||
static contextTypes = {
|
||||
router: PropTypes.object
|
||||
};
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||