Accordions See merge request soapbox-pub/soapbox-fe!285chats_delete_account
Alex Gleason
4 years ago
commit
645474a77c
@ -0,0 +1,51 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { defineMessages, injectIntl } from 'react-intl';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
|
||||||
|
const messages = defineMessages({
|
||||||
|
collapse: { id: 'accordion.collapse', defaultMessage: 'Collapse' },
|
||||||
|
expand: { id: 'accordion.expand', defaultMessage: 'Expand' },
|
||||||
|
});
|
||||||
|
|
||||||
|
export default @injectIntl class Accordion extends React.PureComponent {
|
||||||
|
|
||||||
|
static propTypes = {
|
||||||
|
headline: PropTypes.string.isRequired,
|
||||||
|
content: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
|
||||||
|
expanded: PropTypes.bool,
|
||||||
|
onToggle: PropTypes.func,
|
||||||
|
intl: PropTypes.object.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
static defaultProps = {
|
||||||
|
expanded: false,
|
||||||
|
onToggle: () => {},
|
||||||
|
}
|
||||||
|
|
||||||
|
handleToggle = (e) => {
|
||||||
|
this.props.onToggle(!this.props.expanded);
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { headline, content, expanded, intl } = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={classNames('accordion', { 'accordion--expanded' : expanded })}>
|
||||||
|
<button
|
||||||
|
type='button'
|
||||||
|
className='accordion__title'
|
||||||
|
onClick={this.handleToggle}
|
||||||
|
title={intl.formatMessage(expanded ? messages.collapse : messages.expand)}
|
||||||
|
>
|
||||||
|
{headline}
|
||||||
|
</button>
|
||||||
|
<div className='accordion__content'>
|
||||||
|
{content}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -1,67 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
|
||||||
import { connect } from 'react-redux';
|
|
||||||
import { defineMessages, injectIntl } from 'react-intl';
|
|
||||||
import IconButton from 'soapbox/components/icon_button';
|
|
||||||
import { changeSetting, getSettings } from 'soapbox/actions/settings';
|
|
||||||
|
|
||||||
|
|
||||||
const messages = defineMessages({
|
|
||||||
collapse: { id: 'explanation_box.collapse', defaultMessage: 'Collapse explanation box' },
|
|
||||||
expand: { id: 'explanation_box.expand', defaultMessage: 'Expand explanation box' },
|
|
||||||
});
|
|
||||||
|
|
||||||
const mapStateToProps = state => {
|
|
||||||
return {
|
|
||||||
settings: getSettings(state),
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const mapDispatchToProps = (dispatch) => ({
|
|
||||||
toggleExplanationBox(setting) {
|
|
||||||
dispatch(changeSetting(['explanationBox'], setting));
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
export default @connect(mapStateToProps, mapDispatchToProps)
|
|
||||||
@injectIntl
|
|
||||||
class ExplanationBox extends React.PureComponent {
|
|
||||||
|
|
||||||
static propTypes = {
|
|
||||||
title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
|
|
||||||
explanation: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
|
|
||||||
dismissable: PropTypes.bool,
|
|
||||||
intl: PropTypes.object.isRequired,
|
|
||||||
settings: ImmutablePropTypes.map.isRequired,
|
|
||||||
toggleExplanationBox: PropTypes.func,
|
|
||||||
};
|
|
||||||
|
|
||||||
handleToggleExplanationBox = () => {
|
|
||||||
this.props.toggleExplanationBox(this.props.settings.get('explanationBox') === true ? false : true);
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { title, explanation, dismissable, settings, intl } = this.props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='explanation-box'>
|
|
||||||
{title && <div className='explanation-box__title'>{title}
|
|
||||||
<IconButton
|
|
||||||
className='explanation_box__toggle' size={20}
|
|
||||||
title={settings.get('explanationBox') ? intl.formatMessage(messages.collapse) : intl.formatMessage(messages.expand)}
|
|
||||||
icon={settings.get('explanationBox') ? 'angle-down' : 'angle-up'}
|
|
||||||
onClick={this.handleToggleExplanationBox}
|
|
||||||
/>
|
|
||||||
</div>}
|
|
||||||
{settings.get('explanationBox') &&
|
|
||||||
<div className='explanation-box__explanation'>
|
|
||||||
{explanation}
|
|
||||||
{dismissable && <span className='explanation-box__dismiss'>Dismiss</span>}
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -0,0 +1,62 @@
|
|||||||
|
.explanation-box {
|
||||||
|
margin: 5px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion {
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
padding: 15px 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
background-color: var(--brand-color--faint);
|
||||||
|
border-radius: 8px;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
font-weight: bold !important;
|
||||||
|
font-size: 16px !important;
|
||||||
|
background: transparent !important;
|
||||||
|
color: var(--primary-text-color) !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
text-transform: none !important;
|
||||||
|
text-align: left !important;
|
||||||
|
display: flex !important;
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
border: 0;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
font-family: ForkAwesome;
|
||||||
|
font-size: 20px;
|
||||||
|
padding-left: 10px;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--expanded &__title {
|
||||||
|
margin-bottom: 10px !important;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--expanded &__content {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--brand-color--hicontrast);
|
||||||
|
text-decoration: underline;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in new issue