Accordion: use children instead of content
This commit is contained in:
parent
a8893907d4
commit
a1db330b14
3 changed files with 31 additions and 33 deletions
|
@ -92,27 +92,26 @@ class CommunityTimeline extends React.PureComponent {
|
||||||
<div className='explanation-box'>
|
<div className='explanation-box'>
|
||||||
<Accordion
|
<Accordion
|
||||||
headline={<FormattedMessage id='fediverse_tab.explanation_box.title' defaultMessage='What is the Fediverse?' />}
|
headline={<FormattedMessage id='fediverse_tab.explanation_box.title' defaultMessage='What is the Fediverse?' />}
|
||||||
content={(
|
|
||||||
<FormattedMessage
|
|
||||||
id='fediverse_tab.explanation_box.explanation'
|
|
||||||
defaultMessage='{site_title} is part of the Fediverse, a social network made up of thousands of independent social media sites (aka "servers"). The posts you see here are from 3rd-party servers. You have the freedom to engage with them, or to block any server you don't like. Pay attention to the full username after the second @ symbol to know which server a post is from. To see only {site_title} posts, visit {local}.'
|
|
||||||
values={{
|
|
||||||
site_title: siteTitle,
|
|
||||||
local: (
|
|
||||||
<Link to='/timeline/local'>
|
|
||||||
<FormattedMessage
|
|
||||||
id='empty_column.home.local_tab'
|
|
||||||
defaultMessage='the {site_title} tab'
|
|
||||||
values={{ site_title: siteTitle }}
|
|
||||||
/>
|
|
||||||
</Link>
|
|
||||||
),
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
expanded={explanationBoxExpanded}
|
expanded={explanationBoxExpanded}
|
||||||
onToggle={this.toggleExplanationBox}
|
onToggle={this.toggleExplanationBox}
|
||||||
/>
|
>
|
||||||
|
<FormattedMessage
|
||||||
|
id='fediverse_tab.explanation_box.explanation'
|
||||||
|
defaultMessage='{site_title} is part of the Fediverse, a social network made up of thousands of independent social media sites (aka "servers"). The posts you see here are from 3rd-party servers. You have the freedom to engage with them, or to block any server you don't like. Pay attention to the full username after the second @ symbol to know which server a post is from. To see only {site_title} posts, visit {local}.'
|
||||||
|
values={{
|
||||||
|
site_title: siteTitle,
|
||||||
|
local: (
|
||||||
|
<Link to='/timeline/local'>
|
||||||
|
<FormattedMessage
|
||||||
|
id='empty_column.home.local_tab'
|
||||||
|
defaultMessage='the {site_title} tab'
|
||||||
|
values={{ site_title: siteTitle }}
|
||||||
|
/>
|
||||||
|
</Link>
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Accordion>
|
||||||
</div>
|
</div>
|
||||||
<StatusListContainer
|
<StatusListContainer
|
||||||
scrollKey={`${timelineId}_timeline`}
|
scrollKey={`${timelineId}_timeline`}
|
||||||
|
|
|
@ -308,19 +308,18 @@ class SoapboxConfig extends ImmutablePureComponent {
|
||||||
</FieldsGroup>
|
</FieldsGroup>
|
||||||
<Accordion
|
<Accordion
|
||||||
headline={intl.formatMessage(messages.rawJSONLabel)}
|
headline={intl.formatMessage(messages.rawJSONLabel)}
|
||||||
content={(
|
|
||||||
<div className={this.state.jsonValid ? 'code-editor' : 'code-editor code-editor--invalid'}>
|
|
||||||
<SimpleTextarea
|
|
||||||
hint={intl.formatMessage(messages.rawJSONHint)}
|
|
||||||
value={this.state.rawJSON}
|
|
||||||
onChange={this.handleEditJSON}
|
|
||||||
rows={12}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
expanded={this.state.jsonEditorExpanded}
|
expanded={this.state.jsonEditorExpanded}
|
||||||
onToggle={this.toggleJSONEditor}
|
onToggle={this.toggleJSONEditor}
|
||||||
/>
|
>
|
||||||
|
<div className={this.state.jsonValid ? 'code-editor' : 'code-editor code-editor--invalid'}>
|
||||||
|
<SimpleTextarea
|
||||||
|
hint={intl.formatMessage(messages.rawJSONHint)}
|
||||||
|
value={this.state.rawJSON}
|
||||||
|
onChange={this.handleEditJSON}
|
||||||
|
rows={12}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Accordion>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<div className='actions'>
|
<div className='actions'>
|
||||||
<button name='button' type='submit' className='btn button button-primary'>
|
<button name='button' type='submit' className='btn button button-primary'>
|
||||||
|
|
|
@ -12,7 +12,7 @@ export default @injectIntl class Accordion extends React.PureComponent {
|
||||||
|
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
headline: PropTypes.node.isRequired,
|
headline: PropTypes.node.isRequired,
|
||||||
content: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
|
children: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
|
||||||
expanded: PropTypes.bool,
|
expanded: PropTypes.bool,
|
||||||
onToggle: PropTypes.func,
|
onToggle: PropTypes.func,
|
||||||
intl: PropTypes.object.isRequired,
|
intl: PropTypes.object.isRequired,
|
||||||
|
@ -29,7 +29,7 @@ export default @injectIntl class Accordion extends React.PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { headline, content, expanded, intl } = this.props;
|
const { headline, children, expanded, intl } = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={classNames('accordion', { 'accordion--expanded' : expanded })}>
|
<div className={classNames('accordion', { 'accordion--expanded' : expanded })}>
|
||||||
|
@ -42,7 +42,7 @@ export default @injectIntl class Accordion extends React.PureComponent {
|
||||||
{headline}
|
{headline}
|
||||||
</button>
|
</button>
|
||||||
<div className='accordion__content'>
|
<div className='accordion__content'>
|
||||||
{content}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in a new issue