bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Accordion: use children instead of content

Browse source
This commit is contained in:
Alex Gleason 2020-12-31 20:18:57 -06:00
parent a8893907d4
commit a1db330b14
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
3 changed files with 31 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
app/soapbox/features/public_timeline/index.js
View file

@ -92,27 +92,26 @@ class CommunityTimeline extends React.PureComponent {
<div className='explanation-box'>
<Accordion
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&apos;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}
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&apos;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>
<StatusListContainer
scrollKey={`${timelineId}_timeline`}

21
app/soapbox/features/soapbox_config/index.js
View file

@ -308,19 +308,18 @@ class SoapboxConfig extends ImmutablePureComponent {
</FieldsGroup>
<Accordion
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}
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>
<div className='actions'>
<button name='button' type='submit' className='btn button button-primary'>

6
app/soapbox/features/ui/components/accordion.js
View file

@ -12,7 +12,7 @@ export default @injectIntl class Accordion extends React.PureComponent {
static propTypes = {
headline: PropTypes.node.isRequired,
content: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
children: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
expanded: PropTypes.bool,
onToggle: PropTypes.func,
intl: PropTypes.object.isRequired,
@ -29,7 +29,7 @@ export default @injectIntl class Accordion extends React.PureComponent {
}
render() {
const { headline, content, expanded, intl } = this.props;
const { headline, children, expanded, intl } = this.props;
return (
<div className={classNames('accordion', { 'accordion--expanded' : expanded })}>
@ -42,7 +42,7 @@ export default @injectIntl class Accordion extends React.PureComponent {
{headline}
</button>
<div className='accordion__content'>
{content}
{children}
</div>
</div>
);