mirror of
https://git.bsd.gay/fef/nyastodon.git
synced 2024-12-27 08:23:41 +01:00
Minor refactoring
This commit is contained in:
parent
707b8d7d75
commit
fc8577cf2b
2 changed files with 55 additions and 44 deletions
50
app/javascript/flavours/glitch/components/spoilers.js
Normal file
50
app/javascript/flavours/glitch/components/spoilers.js
Normal file
|
@ -0,0 +1,50 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
export default
|
||||
class Spoilers extends React.PureComponent {
|
||||
static propTypes = {
|
||||
spoilerText: PropTypes.string,
|
||||
children: PropTypes.node,
|
||||
};
|
||||
|
||||
state = {
|
||||
hidden: true,
|
||||
}
|
||||
|
||||
handleSpoilerClick = () => {
|
||||
this.setState({ hidden: !this.state.hidden });
|
||||
}
|
||||
|
||||
render () {
|
||||
const { spoilerText, children } = this.props;
|
||||
const { hidden } = this.state;
|
||||
|
||||
const toggleText = hidden ?
|
||||
<FormattedMessage
|
||||
id='status.show_more'
|
||||
defaultMessage='Show more'
|
||||
key='0'
|
||||
/> :
|
||||
<FormattedMessage
|
||||
id='status.show_less'
|
||||
defaultMessage='Show less'
|
||||
key='0'
|
||||
/>;
|
||||
|
||||
return ([
|
||||
<p className='spoiler__text'>
|
||||
{spoilerText}
|
||||
{' '}
|
||||
<button tabIndex='0' className='status__content__spoiler-link' onClick={this.handleSpoilerClick}>
|
||||
{toggleText}
|
||||
</button>
|
||||
</p>,
|
||||
<div className={`status__content__spoiler ${!hidden ? 'status__content__spoiler--visible' : ''}`}>
|
||||
{children}
|
||||
</div>
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
|
@ -28,6 +28,7 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
|||
import { boostModal, favouriteModal, deleteModal } from 'flavours/glitch/util/initial_state';
|
||||
import { showAlertForError } from '../actions/alerts';
|
||||
import AccountContainer from 'flavours/glitch/containers/account_container';
|
||||
import Spoilers from '../components/spoilers';
|
||||
|
||||
const messages = defineMessages({
|
||||
deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
|
||||
|
@ -41,46 +42,6 @@ const messages = defineMessages({
|
|||
unfilterConfirm: { id: 'confirmations.unfilter.confirm', defaultMessage: 'Show' },
|
||||
});
|
||||
|
||||
class SpoilerMachin extends React.PureComponent {
|
||||
state = {
|
||||
hidden: true,
|
||||
}
|
||||
|
||||
handleSpoilerClick = () => {
|
||||
this.setState({ hidden: !this.state.hidden });
|
||||
}
|
||||
|
||||
render () {
|
||||
const { spoilerText, children } = this.props;
|
||||
const { hidden } = this.state;
|
||||
|
||||
const toggleText = hidden ?
|
||||
<FormattedMessage
|
||||
id='status.show_more'
|
||||
defaultMessage='Show more'
|
||||
key='0'
|
||||
/> :
|
||||
<FormattedMessage
|
||||
id='status.show_less'
|
||||
defaultMessage='Show less'
|
||||
key='0'
|
||||
/>;
|
||||
|
||||
return ([
|
||||
<p className='spoiler__text'>
|
||||
{spoilerText}
|
||||
{' '}
|
||||
<button tabIndex='0' className='status__content__spoiler-link' onClick={this.handleSpoilerClick}>
|
||||
{toggleText}
|
||||
</button>
|
||||
</p>,
|
||||
<div className={`status__content__spoiler ${!hidden ? 'status__content__spoiler--visible' : ''}`}>
|
||||
{children}
|
||||
</div>
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
const makeMapStateToProps = () => {
|
||||
const getStatus = makeGetStatus();
|
||||
|
||||
|
@ -243,14 +204,14 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
|
|||
message: [
|
||||
<FormattedMessage id='confirmations.unfilter' defaultMessage='Information about this filtered toot' />,
|
||||
<div className='filtered-status-info'>
|
||||
<SpoilerMachin spoilerText='Author'>
|
||||
<Spoilers spoilerText='Author'>
|
||||
<AccountContainer id={status.getIn(['account', 'id'])} />
|
||||
</SpoilerMachin>
|
||||
<SpoilerMachin spoilerText='Matching filters'>
|
||||
</Spoilers>
|
||||
<Spoilers spoilerText='Matching filters'>
|
||||
<ul>
|
||||
{matchingFilters.map(filter => <li>{filter.get('phrase')}</li>)}
|
||||
</ul>
|
||||
</SpoilerMachin>
|
||||
</Spoilers>
|
||||
</div>
|
||||
],
|
||||
confirm: intl.formatMessage(messages.unfilterConfirm),
|
||||
|
|
Loading…
Reference in a new issue