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