Adds spoiler hotkey support to detailed statuses

This commit is contained in:
kibigo! 2017-11-27 14:05:03 -08:00
parent f3c3df62ab
commit 6a48efe16c
2 changed files with 19 additions and 2 deletions

View file

@ -41,7 +41,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
render () { render () {
const status = this.props.status.get('reblog') ? this.props.status.get('reblog') : this.props.status; const status = this.props.status.get('reblog') ? this.props.status.get('reblog') : this.props.status;
const { settings } = this.props; const { expanded, setExpansion, settings } = this.props;
let media = ''; let media = '';
let mediaIcon = null; let mediaIcon = null;
@ -109,6 +109,8 @@ export default class DetailedStatus extends ImmutablePureComponent {
status={status} status={status}
media={media} media={media}
mediaIcon={mediaIcon} mediaIcon={mediaIcon}
expanded={expanded}
setExpansion={setExpansion}
/> />
<div className='detailed-status__meta'> <div className='detailed-status__meta'>

View file

@ -71,6 +71,7 @@ export default class Status extends ImmutablePureComponent {
state = { state = {
fullscreen: false, fullscreen: false,
isExpanded: null,
}; };
componentWillMount () { componentWillMount () {
@ -88,6 +89,12 @@ export default class Status extends ImmutablePureComponent {
} }
} }
handleExpandedToggle = () => {
if (this.props.status.get('spoiler_text')) {
this.setExpansion(this.state.isExpanded ? null : true);
}
};
handleFavouriteClick = (status) => { handleFavouriteClick = (status) => {
if (status.get('favourited')) { if (status.get('favourited')) {
this.props.dispatch(unfavourite(status)); this.props.dispatch(unfavourite(status));
@ -241,6 +248,10 @@ export default class Status extends ImmutablePureComponent {
)); ));
} }
setExpansion = value => {
this.setState({ isExpanded: value ? true : null });
}
setRef = c => { setRef = c => {
this.node = c; this.node = c;
} }
@ -272,8 +283,9 @@ export default class Status extends ImmutablePureComponent {
render () { render () {
let ancestors, descendants; let ancestors, descendants;
const { setExpansion } = this;
const { status, settings, ancestorsIds, descendantsIds } = this.props; const { status, settings, ancestorsIds, descendantsIds } = this.props;
const { fullscreen } = this.state; const { fullscreen, isExpanded } = this.state;
if (status === null) { if (status === null) {
return ( return (
@ -300,6 +312,7 @@ export default class Status extends ImmutablePureComponent {
boost: this.handleHotkeyBoost, boost: this.handleHotkeyBoost,
mention: this.handleHotkeyMention, mention: this.handleHotkeyMention,
openProfile: this.handleHotkeyOpenProfile, openProfile: this.handleHotkeyOpenProfile,
toggleSpoiler: this.handleExpandedToggle,
}; };
return ( return (
@ -317,6 +330,8 @@ export default class Status extends ImmutablePureComponent {
settings={settings} settings={settings}
onOpenVideo={this.handleOpenVideo} onOpenVideo={this.handleOpenVideo}
onOpenMedia={this.handleOpenMedia} onOpenMedia={this.handleOpenMedia}
expanded={isExpanded}
setExpansion={setExpansion}
/> />
<ActionBar <ActionBar