treehouse
/
mastodon
22
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

[Glitch] Use JSX syntax for Fragments 

Port 5a16bd7bf4 to glitch-soc
pull/62/head
Claire 2023-05-28 14:56:24 +02:00
parent 8278907ff7
commit a0bc0619ca
31 changed files with 110 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/javascript/flavours/glitch/components/account.jsx
View File

@ -1,4 +1,3 @@
import { Fragment } from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Avatar } from './avatar'; import { Avatar } from './avatar';
@ -97,10 +96,10 @@ class Account extends ImmutablePureComponent {
if (hidden) { if (hidden) {
return ( return (
<Fragment> <>
{account.get('display_name')} {account.get('display_name')}
{account.get('username')} {account.get('username')}
</Fragment> </>
); );
} }
@ -128,10 +127,10 @@ class Account extends ImmutablePureComponent {
hidingNotificationsButton = <IconButton active icon='bell-slash' title={intl.formatMessage(messages.mute_notifications, { name: account.get('username') })} onClick={this.handleMuteNotifications} />; hidingNotificationsButton = <IconButton active icon='bell-slash' title={intl.formatMessage(messages.mute_notifications, { name: account.get('username') })} onClick={this.handleMuteNotifications} />;
} }
buttons = ( buttons = (
<Fragment> <>
<IconButton active icon='volume-up' title={intl.formatMessage(messages.unmute, { name: account.get('username') })} onClick={this.handleMute} /> <IconButton active icon='volume-up' title={intl.formatMessage(messages.unmute, { name: account.get('username') })} onClick={this.handleMute} />
{hidingNotificationsButton} {hidingNotificationsButton}
</Fragment> </>
); );
} else if (defaultAction === 'mute') { } else if (defaultAction === 'mute') {
buttons = <IconButton icon='volume-off' title={intl.formatMessage(messages.mute, { name: account.get('username') })} onClick={this.handleMute} />; buttons = <IconButton icon='volume-off' title={intl.formatMessage(messages.mute, { name: account.get('username') })} onClick={this.handleMute} />;

14
app/javascript/flavours/glitch/components/admin/Counter.jsx
View File

@ -1,4 +1,4 @@
import { PureComponent, Fragment } from 'react'; import { PureComponent } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import api from 'flavours/glitch/api'; import api from 'flavours/glitch/api';
import { FormattedNumber } from 'react-intl'; import { FormattedNumber } from 'react-intl';
@ -62,25 +62,25 @@ export default class Counter extends PureComponent {
if (loading) { if (loading) {
content = ( content = (
<Fragment> <>
<span className='sparkline__value__total'><Skeleton width={43} /></span> <span className='sparkline__value__total'><Skeleton width={43} /></span>
<span className='sparkline__value__change'><Skeleton width={43} /></span> <span className='sparkline__value__change'><Skeleton width={43} /></span>
</Fragment> </>
); );
} else { } else {
const measure = data[0]; const measure = data[0];
const percentChange = measure.previous_total && percIncrease(measure.previous_total * 1, measure.total * 1); const percentChange = measure.previous_total && percIncrease(measure.previous_total * 1, measure.total * 1);
content = ( content = (
<Fragment> <>
<span className='sparkline__value__total'>{measure.human_value || <FormattedNumber value={measure.total} />}</span> <span className='sparkline__value__total'>{measure.human_value || <FormattedNumber value={measure.total} />}</span>
{measure.previous_total && (<span className={classNames('sparkline__value__change', { positive: percentChange > 0, negative: percentChange < 0 })}>{percentChange > 0 && '+'}<FormattedNumber value={percentChange} style='percent' /></span>)} {measure.previous_total && (<span className={classNames('sparkline__value__change', { positive: percentChange > 0, negative: percentChange < 0 })}>{percentChange > 0 && '+'}<FormattedNumber value={percentChange} style='percent' /></span>)}
</Fragment> </>
); );
} }
const inner = ( const inner = (
<Fragment> <>
<div className='sparkline__value'> <div className='sparkline__value'>
{content} {content}
</div> </div>
@ -96,7 +96,7 @@ export default class Counter extends PureComponent {
</Sparklines> </Sparklines>
)} )}
</div> </div>
</Fragment> </>
); );
if (href) { if (href) {

6
app/javascript/flavours/glitch/components/dropdown_menu.jsx
View File

@ -1,4 +1,4 @@
import { PureComponent, cloneElement, Children, Fragment } from 'react'; import { PureComponent, cloneElement, Children } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { IconButton } from './icon_button'; import { IconButton } from './icon_button';
@ -306,7 +306,7 @@ export default class Dropdown extends PureComponent {
); );
return ( return (
<Fragment> <>
<span ref={this.setTargetRef}> <span ref={this.setTargetRef}>
{button} {button}
</span> </span>
@ -329,7 +329,7 @@ export default class Dropdown extends PureComponent {
</div> </div>
)} )}
</Overlay> </Overlay>
</Fragment> </>
); );
} }

4
app/javascript/flavours/glitch/components/hashtag.jsx
View File

@ -1,5 +1,5 @@
// @ts-check // @ts-check
import { Component, Fragment } from 'react'; import { Component } from 'react';
import { Sparklines, SparklinesCurve } from 'react-sparklines'; import { Sparklines, SparklinesCurve } from 'react-sparklines';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
@ -70,7 +70,7 @@ const Hashtag = ({ name, href, to, people, uses, history, className, description
<div className={classNames('trends__item', className)}> <div className={classNames('trends__item', className)}>
<div className='trends__item__name'> <div className='trends__item__name'>
<Permalink href={href} to={to}> <Permalink href={href} to={to}>
{name ? <Fragment>#<span>{name}</span></Fragment> : <Skeleton width={50} />} {name ? <>#<span>{name}</span></> : <Skeleton width={50} />}
</Permalink> </Permalink>
{description ? ( {description ? (

4
app/javascript/flavours/glitch/components/icon_button.tsx
View File

@ -138,7 +138,7 @@ export class IconButton extends React.PureComponent<Props, States> {
} }
let contents = ( let contents = (
<React.Fragment> <>
<Icon id={icon} fixedWidth aria-hidden='true' />{' '} <Icon id={icon} fixedWidth aria-hidden='true' />{' '}
{typeof counter !== 'undefined' && ( {typeof counter !== 'undefined' && (
<span className='icon-button__counter'> <span className='icon-button__counter'>
@ -146,7 +146,7 @@ export class IconButton extends React.PureComponent<Props, States> {
</span> </span>
)} )}
{this.props.label} {this.props.label}
</React.Fragment> </>
); );
if (href != null) { if (href != null) {

14
app/javascript/flavours/glitch/components/navigation_portal.jsx
View File

@ -5,14 +5,12 @@ import Trends from 'flavours/glitch/features/getting_started/containers/trends_c
import AccountNavigation from 'flavours/glitch/features/account/navigation'; import AccountNavigation from 'flavours/glitch/features/account/navigation';
const DefaultNavigation = () => ( const DefaultNavigation = () => (
<> showTrends ? (
{showTrends && ( <>
<> <div className='flex-spacer' />
<div className='flex-spacer' /> <Trends />
<Trends /> </>
</> ) : null
)}
</>
); );
class NavigationPortal extends PureComponent { class NavigationPortal extends PureComponent {

6
app/javascript/flavours/glitch/containers/media_container.jsx
View File

@ -1,4 +1,4 @@
import { PureComponent, Fragment } from 'react'; import { PureComponent } from 'react';
import { createPortal } from 'react-dom'; import { createPortal } from 'react-dom';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { IntlProvider, addLocaleData } from 'react-intl'; import { IntlProvider, addLocaleData } from 'react-intl';
@ -75,7 +75,7 @@ export default class MediaContainer extends PureComponent {
return ( return (
<IntlProvider locale={locale} messages={messages}> <IntlProvider locale={locale} messages={messages}>
<Fragment> <>
{[].map.call(components, (component, i) => { {[].map.call(components, (component, i) => {
const componentName = component.getAttribute('data-component'); const componentName = component.getAttribute('data-component');
const Component = MEDIA_COMPONENTS[componentName]; const Component = MEDIA_COMPONENTS[componentName];
@ -115,7 +115,7 @@ export default class MediaContainer extends PureComponent {
/> />
)} )}
</ModalRoot> </ModalRoot>
</Fragment> </>
</IntlProvider> </IntlProvider>
); );
} }

5
app/javascript/flavours/glitch/features/account/components/header.jsx
View File

@ -1,4 +1,3 @@
import { Fragment } from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
@ -345,10 +344,10 @@ class Header extends ImmutablePureComponent {
{!suspended && ( {!suspended && (
<div className='account__header__tabs__buttons'> <div className='account__header__tabs__buttons'>
{!hidden && ( {!hidden && (
<Fragment> <>
{actionBtn} {actionBtn}
{bellBtn} {bellBtn}
</Fragment> </>
)} )}
<DropdownMenuContainer disabled={menu.length === 0} items={menu} icon='ellipsis-v' size={24} direction='right' /> <DropdownMenuContainer disabled={menu.length === 0} items={menu} icon='ellipsis-v' size={24} direction='right' />

6
app/javascript/flavours/glitch/features/compose/components/dropdown_menu.jsx
View File

@ -1,6 +1,6 @@
// Package imports. // Package imports.
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { PureComponent, Fragment } from 'react'; import { PureComponent } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { supportsPassiveEvents } from 'detect-passive-events'; import { supportsPassiveEvents } from 'detect-passive-events';
@ -152,14 +152,14 @@ export default class ComposerOptionsDropdownContent extends PureComponent {
if (!contents) { if (!contents) {
contents = ( contents = (
<Fragment> <>
{icon && <Icon className='icon' fixedWidth id={icon} />} {icon && <Icon className='icon' fixedWidth id={icon} />}
<div className='privacy-dropdown__option__content'> <div className='privacy-dropdown__option__content'>
<strong>{text}</strong> <strong>{text}</strong>
{meta} {meta}
</div> </div>
</Fragment> </>
); );
} }

5
app/javascript/flavours/glitch/features/compose/components/options.jsx
View File

@ -1,6 +1,5 @@
// Package imports. // Package imports.
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Fragment } from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
import Toggle from 'react-toggle'; import Toggle from 'react-toggle';
@ -101,14 +100,14 @@ class ToggleOptionImpl extends ImmutablePureComponent {
const { meta, text, checked } = this.props; const { meta, text, checked } = this.props;
return ( return (
<Fragment> <>
<Toggle checked={checked} onChange={this.handleChange} /> <Toggle checked={checked} onChange={this.handleChange} />
<div className='privacy-dropdown__option__content'> <div className='privacy-dropdown__option__content'>
<strong>{text}</strong> <strong>{text}</strong>
{meta} {meta}
</div> </div>
</Fragment> </>
); );
} }

6
app/javascript/flavours/glitch/features/explore/components/story.jsx
View File

@ -1,4 +1,4 @@
import { PureComponent, Fragment } from 'react'; import { PureComponent } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Blurhash } from 'flavours/glitch/components/blurhash'; import { Blurhash } from 'flavours/glitch/components/blurhash';
import { accountsCountRenderer } from 'flavours/glitch/components/hashtag'; import { accountsCountRenderer } from 'flavours/glitch/components/hashtag';
@ -38,10 +38,10 @@ export default class Story extends PureComponent {
<div className='story__thumbnail'> <div className='story__thumbnail'>
{thumbnail ? ( {thumbnail ? (
<Fragment> <>
<div className={classNames('story__thumbnail__preview', { 'story__thumbnail__preview--hidden': thumbnailLoaded })}><Blurhash hash={blurhash} /></div> <div className={classNames('story__thumbnail__preview', { 'story__thumbnail__preview--hidden': thumbnailLoaded })}><Blurhash hash={blurhash} /></div>
<img src={thumbnail} onLoad={this.handleImageLoad} alt='' role='presentation' /> <img src={thumbnail} onLoad={this.handleImageLoad} alt='' role='presentation' />
</Fragment> </>
) : <Skeleton />} ) : <Skeleton />}
</div> </div>
</a> </a>

6
app/javascript/flavours/glitch/features/explore/results.jsx
View File

@ -1,4 +1,4 @@
import { PureComponent, Fragment } from 'react'; import { PureComponent } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { injectIntl, defineMessages, FormattedMessage } from 'react-intl'; import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
@ -102,7 +102,7 @@ class Results extends PureComponent {
} }
return ( return (
<Fragment> <>
<div className='account__section-headline'> <div className='account__section-headline'>
<button onClick={this.handleSelectAll} className={type === 'all' && 'active'}><FormattedMessage id='search_results.all' defaultMessage='All' /></button> <button onClick={this.handleSelectAll} className={type === 'all' && 'active'}><FormattedMessage id='search_results.all' defaultMessage='All' /></button>
<button onClick={this.handleSelectAccounts} className={type === 'accounts' && 'active'}><FormattedMessage id='search_results.accounts' defaultMessage='People' /></button> <button onClick={this.handleSelectAccounts} className={type === 'accounts' && 'active'}><FormattedMessage id='search_results.accounts' defaultMessage='People' /></button>
@ -117,7 +117,7 @@ class Results extends PureComponent {
<Helmet> <Helmet>
<title>{intl.formatMessage(messages.title, { q })}</title> <title>{intl.formatMessage(messages.title, { q })}</title>
</Helmet> </Helmet>
</Fragment> </>
); );
} }

14
app/javascript/flavours/glitch/features/filters/added_to_filter.jsx
View File

@ -1,4 +1,4 @@
import { PureComponent, Fragment } from 'react'; import { PureComponent } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
@ -30,7 +30,7 @@ class AddedToFilter extends PureComponent {
let expiredMessage = null; let expiredMessage = null;
if (filter.get('expires_at') && filter.get('expires_at') < new Date()) { if (filter.get('expires_at') && filter.get('expires_at') < new Date()) {
expiredMessage = ( expiredMessage = (
<Fragment> <>
<h4 className='report-dialog-modal__subtitle'><FormattedMessage id='filter_modal.added.expired_title' defaultMessage='Expired filter!' /></h4> <h4 className='report-dialog-modal__subtitle'><FormattedMessage id='filter_modal.added.expired_title' defaultMessage='Expired filter!' /></h4>
<p className='report-dialog-modal__lead'> <p className='report-dialog-modal__lead'>
<FormattedMessage <FormattedMessage
@ -38,14 +38,14 @@ class AddedToFilter extends PureComponent {
defaultMessage='This filter category has expired, you will need to change the expiration date for it to apply.' defaultMessage='This filter category has expired, you will need to change the expiration date for it to apply.'
/> />
</p> </p>
</Fragment> </>
); );
} }
let contextMismatchMessage = null; let contextMismatchMessage = null;
if (contextType && !filter.get('context').includes(toServerSideType(contextType))) { if (contextType && !filter.get('context').includes(toServerSideType(contextType))) {
contextMismatchMessage = ( contextMismatchMessage = (
<Fragment> <>
<h4 className='report-dialog-modal__subtitle'><FormattedMessage id='filter_modal.added.context_mismatch_title' defaultMessage='Context mismatch!' /></h4> <h4 className='report-dialog-modal__subtitle'><FormattedMessage id='filter_modal.added.context_mismatch_title' defaultMessage='Context mismatch!' /></h4>
<p className='report-dialog-modal__lead'> <p className='report-dialog-modal__lead'>
<FormattedMessage <FormattedMessage
@ -53,7 +53,7 @@ class AddedToFilter extends PureComponent {
defaultMessage='This filter category does not apply to the context in which you have accessed this post. If you want the post to be filtered in this context too, you will have to edit the filter.' defaultMessage='This filter category does not apply to the context in which you have accessed this post. If you want the post to be filtered in this context too, you will have to edit the filter.'
/> />
</p> </p>
</Fragment> </>
); );
} }
@ -67,7 +67,7 @@ class AddedToFilter extends PureComponent {
); );
return ( return (
<Fragment> <>
<h3 className='report-dialog-modal__title'><FormattedMessage id='filter_modal.added.title' defaultMessage='Filter added!' /></h3> <h3 className='report-dialog-modal__title'><FormattedMessage id='filter_modal.added.title' defaultMessage='Filter added!' /></h3>
<p className='report-dialog-modal__lead'> <p className='report-dialog-modal__lead'>
<FormattedMessage <FormattedMessage
@ -94,7 +94,7 @@ class AddedToFilter extends PureComponent {
<div className='report-dialog-modal__actions'> <div className='report-dialog-modal__actions'>
<Button onClick={this.handleCloseClick}><FormattedMessage id='report.close' defaultMessage='Done' /></Button> <Button onClick={this.handleCloseClick}><FormattedMessage id='report.close' defaultMessage='Done' /></Button>
</div> </div>
</Fragment> </>
); );
} }

6
app/javascript/flavours/glitch/features/filters/select_filter.jsx
View File

@ -1,4 +1,4 @@
import { PureComponent, Fragment } from 'react'; import { PureComponent } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
@ -169,7 +169,7 @@ class SelectFilter extends PureComponent {
const results = this.search(); const results = this.search();
return ( return (
<Fragment> <>
<h3 className='report-dialog-modal__title'><FormattedMessage id='filter_modal.select_filter.title' defaultMessage='Filter this post' /></h3> <h3 className='report-dialog-modal__title'><FormattedMessage id='filter_modal.select_filter.title' defaultMessage='Filter this post' /></h3>
<p className='report-dialog-modal__lead'><FormattedMessage id='filter_modal.select_filter.subtitle' defaultMessage='Use an existing category or create a new one' /></p> <p className='report-dialog-modal__lead'><FormattedMessage id='filter_modal.select_filter.subtitle' defaultMessage='Use an existing category or create a new one' /></p>
@ -183,7 +183,7 @@ class SelectFilter extends PureComponent {
{isSearching && this.renderCreateNew(searchValue) } {isSearching && this.renderCreateNew(searchValue) }
</div> </div>
</Fragment> </>
); );
} }

5
app/javascript/flavours/glitch/features/follow_recommendations/index.jsx
View File

@ -1,4 +1,3 @@
import { Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
@ -86,7 +85,7 @@ class FollowRecommendations extends ImmutablePureComponent {
</div> </div>
{!isLoading && ( {!isLoading && (
<Fragment> <>
<div className='column-list'> <div className='column-list'>
{suggestions.size > 0 ? suggestions.map(suggestion => ( {suggestions.size > 0 ? suggestions.map(suggestion => (
<Account key={suggestion.get('account')} id={suggestion.get('account')} /> <Account key={suggestion.get('account')} id={suggestion.get('account')} />
@ -101,7 +100,7 @@ class FollowRecommendations extends ImmutablePureComponent {
<img src={imageGreeting} alt='' className='column-actions__background' /> <img src={imageGreeting} alt='' className='column-actions__background' />
<Button onClick={this.handleDone}><FormattedMessage id='follow_recommendations.done' defaultMessage='Done' /></Button> <Button onClick={this.handleDone}><FormattedMessage id='follow_recommendations.done' defaultMessage='Done' /></Button>
</div> </div>
</Fragment> </>
)} )}
</div> </div>

5
app/javascript/flavours/glitch/features/getting_started/index.jsx
View File

@ -1,4 +1,3 @@
import { Fragment } from 'react';
import Column from 'flavours/glitch/features/ui/components/column'; import Column from 'flavours/glitch/features/ui/components/column';
import ColumnLink from 'flavours/glitch/features/ui/components/column_link'; import ColumnLink from 'flavours/glitch/features/ui/components/column_link';
import ColumnSubheading from 'flavours/glitch/features/ui/components/column_subheading'; import ColumnSubheading from 'flavours/glitch/features/ui/components/column_subheading';
@ -173,13 +172,13 @@ class GettingStarted extends ImmutablePureComponent {
{multiColumn && <ColumnSubheading text={intl.formatMessage(messages.navigation_subheading)} />} {multiColumn && <ColumnSubheading text={intl.formatMessage(messages.navigation_subheading)} />}
{navItems} {navItems}
{signedIn && ( {signedIn && (
<Fragment> <>
<ColumnSubheading text={intl.formatMessage(messages.lists_subheading)} /> <ColumnSubheading text={intl.formatMessage(messages.lists_subheading)} />
{listItems} {listItems}
<ColumnSubheading text={intl.formatMessage(messages.settings_subheading)} /> <ColumnSubheading text={intl.formatMessage(messages.settings_subheading)} />
{ preferencesLink !== undefined && <ColumnLink icon='cog' text={intl.formatMessage(messages.preferences)} href={preferencesLink} /> } { preferencesLink !== undefined && <ColumnLink icon='cog' text={intl.formatMessage(messages.preferences)} href={preferencesLink} /> }
<ColumnLink icon='cogs' text={intl.formatMessage(messages.settings)} onClick={openSettings} /> <ColumnLink icon='cogs' text={intl.formatMessage(messages.settings)} onClick={openSettings} />
</Fragment> </>
)} )}
</div> </div>

5
app/javascript/flavours/glitch/features/notifications/components/follow_request.jsx
View File

@ -1,4 +1,3 @@
import { Fragment } from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Avatar } from 'flavours/glitch/components/avatar'; import { Avatar } from 'flavours/glitch/components/avatar';
@ -74,10 +73,10 @@ class FollowRequest extends ImmutablePureComponent {
if (hidden) { if (hidden) {
return ( return (
<Fragment> <>
{account.get('display_name')} {account.get('display_name')}
{account.get('username')} {account.get('username')}
</Fragment> </>
); );
} }

5
app/javascript/flavours/glitch/features/notifications/components/report.jsx
View File

@ -1,4 +1,3 @@
import { Fragment } from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl'; import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
@ -31,9 +30,9 @@ class Report extends ImmutablePureComponent {
if (hidden) { if (hidden) {
return ( return (
<Fragment> <>
{report.get('id')} {report.get('id')}
</Fragment> </>
); );
} }

8
app/javascript/flavours/glitch/features/notifications/index.jsx
View File

@ -323,12 +323,6 @@ class Notifications extends PureComponent {
</div> </div>
); );
const extraButton = (
<>
{extraButtons}
</>
);
return ( return (
<Column <Column
bindToDocument={!multiColumn} bindToDocument={!multiColumn}
@ -347,7 +341,7 @@ class Notifications extends PureComponent {
pinned={pinned} pinned={pinned}
multiColumn={multiColumn} multiColumn={multiColumn}
localSettings={this.props.localSettings} localSettings={this.props.localSettings}
extraButton={extraButton} extraButton={extraButtons}
appendContent={notifCleaningDrawer} appendContent={notifCleaningDrawer}
> >
<ColumnSettingsContainer /> <ColumnSettingsContainer />

6
app/javascript/flavours/glitch/features/report/category.jsx
View File

@ -1,4 +1,4 @@
import { PureComponent, Fragment } from 'react'; import { PureComponent } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
@ -72,7 +72,7 @@ class Category extends PureComponent {
]; ];
return ( return (
<Fragment> <>
<h3 className='report-dialog-modal__title'><FormattedMessage id='report.category.title' defaultMessage="Tell us what's going on with this {type}" values={{ type: intl.formatMessage(messages[startedFrom]) }} /></h3> <h3 className='report-dialog-modal__title'><FormattedMessage id='report.category.title' defaultMessage="Tell us what's going on with this {type}" values={{ type: intl.formatMessage(messages[startedFrom]) }} /></h3>
<p className='report-dialog-modal__lead'><FormattedMessage id='report.category.subtitle' defaultMessage='Choose the best match' /></p> <p className='report-dialog-modal__lead'><FormattedMessage id='report.category.subtitle' defaultMessage='Choose the best match' /></p>
@ -95,7 +95,7 @@ class Category extends PureComponent {
<div className='report-dialog-modal__actions'> <div className='report-dialog-modal__actions'>
<Button onClick={this.handleNextClick} disabled={category === null}><FormattedMessage id='report.next' defaultMessage='Next' /></Button> <Button onClick={this.handleNextClick} disabled={category === null}><FormattedMessage id='report.next' defaultMessage='Next' /></Button>
</div> </div>
</Fragment> </>
); );
} }

10
app/javascript/flavours/glitch/features/report/comment.jsx
View File

@ -1,4 +1,4 @@
import { PureComponent, Fragment } from 'react'; import { PureComponent } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { injectIntl, defineMessages, FormattedMessage } from 'react-intl'; import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
import Button from 'flavours/glitch/components/button'; import Button from 'flavours/glitch/components/button';
@ -47,7 +47,7 @@ class Comment extends PureComponent {
const { comment, isRemote, forward, domain, isSubmitting, intl } = this.props; const { comment, isRemote, forward, domain, isSubmitting, intl } = this.props;
return ( return (
<Fragment> <>
<h3 className='report-dialog-modal__title'><FormattedMessage id='report.comment.title' defaultMessage='Is there anything else you think we should know?' /></h3> <h3 className='report-dialog-modal__title'><FormattedMessage id='report.comment.title' defaultMessage='Is there anything else you think we should know?' /></h3>
<textarea <textarea
@ -60,14 +60,14 @@ class Comment extends PureComponent {
/> />
{isRemote && ( {isRemote && (
<Fragment> <>
<p className='report-dialog-modal__lead'><FormattedMessage id='report.forward_hint' defaultMessage='The account is from another server. Send an anonymized copy of the report there as well?' /></p> <p className='report-dialog-modal__lead'><FormattedMessage id='report.forward_hint' defaultMessage='The account is from another server. Send an anonymized copy of the report there as well?' /></p>
<label className='report-dialog-modal__toggle'> <label className='report-dialog-modal__toggle'>
<Toggle checked={forward} disabled={isSubmitting} onChange={this.handleForwardChange} /> <Toggle checked={forward} disabled={isSubmitting} onChange={this.handleForwardChange} />
<FormattedMessage id='report.forward' defaultMessage='Forward to {target}' values={{ target: domain }} /> <FormattedMessage id='report.forward' defaultMessage='Forward to {target}' values={{ target: domain }} />
</label> </label>
</Fragment> </>
)} )}
<div className='flex-spacer' /> <div className='flex-spacer' />
@ -75,7 +75,7 @@ class Comment extends PureComponent {
<div className='report-dialog-modal__actions'> <div className='report-dialog-modal__actions'>
<Button onClick={this.handleClick} disabled={isSubmitting}><FormattedMessage id='report.submit' defaultMessage='Submit report' /></Button> <Button onClick={this.handleClick} disabled={isSubmitting}><FormattedMessage id='report.submit' defaultMessage='Submit report' /></Button>
</div> </div>
</Fragment> </>
); );
} }

6
app/javascript/flavours/glitch/features/report/rules.jsx
View File

@ -1,4 +1,4 @@
import { PureComponent, Fragment } from 'react'; import { PureComponent } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
@ -33,7 +33,7 @@ class Rules extends PureComponent {
const { rules, selectedRuleIds } = this.props; const { rules, selectedRuleIds } = this.props;
return ( return (
<Fragment> <>
<h3 className='report-dialog-modal__title'><FormattedMessage id='report.rules.title' defaultMessage='Which rules are being violated?' /></h3> <h3 className='report-dialog-modal__title'><FormattedMessage id='report.rules.title' defaultMessage='Which rules are being violated?' /></h3>
<p className='report-dialog-modal__lead'><FormattedMessage id='report.rules.subtitle' defaultMessage='Select all that apply' /></p> <p className='report-dialog-modal__lead'><FormattedMessage id='report.rules.subtitle' defaultMessage='Select all that apply' /></p>
@ -56,7 +56,7 @@ class Rules extends PureComponent {
<div className='report-dialog-modal__actions'> <div className='report-dialog-modal__actions'>
<Button onClick={this.handleNextClick} disabled={selectedRuleIds.size < 1}><FormattedMessage id='report.next' defaultMessage='Next' /></Button> <Button onClick={this.handleNextClick} disabled={selectedRuleIds.size < 1}><FormattedMessage id='report.next' defaultMessage='Next' /></Button>
</div> </div>
</Fragment> </>
); );
} }

6
app/javascript/flavours/glitch/features/report/statuses.jsx
View File

@ -1,4 +1,4 @@
import { PureComponent, Fragment } from 'react'; import { PureComponent } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
@ -33,7 +33,7 @@ class Statuses extends PureComponent {
const { availableStatusIds, selectedStatusIds, onToggle, isLoading } = this.props; const { availableStatusIds, selectedStatusIds, onToggle, isLoading } = this.props;
return ( return (
<Fragment> <>
<h3 className='report-dialog-modal__title'><FormattedMessage id='report.statuses.title' defaultMessage='Are there any posts that back up this report?' /></h3> <h3 className='report-dialog-modal__title'><FormattedMessage id='report.statuses.title' defaultMessage='Are there any posts that back up this report?' /></h3>
<p className='report-dialog-modal__lead'><FormattedMessage id='report.statuses.subtitle' defaultMessage='Select all that apply' /></p> <p className='report-dialog-modal__lead'><FormattedMessage id='report.statuses.subtitle' defaultMessage='Select all that apply' /></p>
@ -53,7 +53,7 @@ class Statuses extends PureComponent {
<div className='report-dialog-modal__actions'> <div className='report-dialog-modal__actions'>
<Button onClick={this.handleNextClick}><FormattedMessage id='report.next' defaultMessage='Next' /></Button> <Button onClick={this.handleNextClick}><FormattedMessage id='report.next' defaultMessage='Next' /></Button>
</div> </div>
</Fragment> </>
); );
} }

10
app/javascript/flavours/glitch/features/report/thanks.jsx
View File

@ -1,4 +1,4 @@
import { PureComponent, Fragment } from 'react'; import { PureComponent } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
@ -48,17 +48,17 @@ class Thanks extends PureComponent {
const { account, submitted } = this.props; const { account, submitted } = this.props;
return ( return (
<Fragment> <>
<h3 className='report-dialog-modal__title'>{submitted ? <FormattedMessage id='report.thanks.title_actionable' defaultMessage="Thanks for reporting, we'll look into this." /> : <FormattedMessage id='report.thanks.title' defaultMessage="Don't want to see this?" />}</h3> <h3 className='report-dialog-modal__title'>{submitted ? <FormattedMessage id='report.thanks.title_actionable' defaultMessage="Thanks for reporting, we'll look into this." /> : <FormattedMessage id='report.thanks.title' defaultMessage="Don't want to see this?" />}</h3>
<p className='report-dialog-modal__lead'>{submitted ? <FormattedMessage id='report.thanks.take_action_actionable' defaultMessage='While we review this, you can take action against @{name}:' values={{ name: account.get('username') }} /> : <FormattedMessage id='report.thanks.take_action' defaultMessage='Here are your options for controlling what you see on Mastodon:' />}</p> <p className='report-dialog-modal__lead'>{submitted ? <FormattedMessage id='report.thanks.take_action_actionable' defaultMessage='While we review this, you can take action against @{name}:' values={{ name: account.get('username') }} /> : <FormattedMessage id='report.thanks.take_action' defaultMessage='Here are your options for controlling what you see on Mastodon:' />}</p>
{account.getIn(['relationship', 'following']) && ( {account.getIn(['relationship', 'following']) && (
<Fragment> <>
<h4 className='report-dialog-modal__subtitle'><FormattedMessage id='report.unfollow' defaultMessage='Unfollow @{name}' values={{ name: account.get('username') }} /></h4> <h4 className='report-dialog-modal__subtitle'><FormattedMessage id='report.unfollow' defaultMessage='Unfollow @{name}' values={{ name: account.get('username') }} /></h4>
<p className='report-dialog-modal__lead'><FormattedMessage id='report.unfollow_explanation' defaultMessage='You are following this account. To not see their posts in your home feed anymore, unfollow them.' /></p> <p className='report-dialog-modal__lead'><FormattedMessage id='report.unfollow_explanation' defaultMessage='You are following this account. To not see their posts in your home feed anymore, unfollow them.' /></p>
<Button secondary onClick={this.handleUnfollowClick}><FormattedMessage id='account.unfollow' defaultMessage='Unfollow' /></Button> <Button secondary onClick={this.handleUnfollowClick}><FormattedMessage id='account.unfollow' defaultMessage='Unfollow' /></Button>
<hr /> <hr />
</Fragment> </>
)} )}
<h4 className='report-dialog-modal__subtitle'><FormattedMessage id='account.mute' defaultMessage='Mute @{name}' values={{ name: account.get('username') }} /></h4> <h4 className='report-dialog-modal__subtitle'><FormattedMessage id='account.mute' defaultMessage='Mute @{name}' values={{ name: account.get('username') }} /></h4>
@ -76,7 +76,7 @@ class Thanks extends PureComponent {
<div className='report-dialog-modal__actions'> <div className='report-dialog-modal__actions'>
<Button onClick={this.handleCloseClick}><FormattedMessage id='report.close' defaultMessage='Done' /></Button> <Button onClick={this.handleCloseClick}><FormattedMessage id='report.close' defaultMessage='Done' /></Button>
</div> </div>
</Fragment> </>
); );
} }

23
app/javascript/flavours/glitch/features/status/components/detailed_status.jsx
View File

@ -1,4 +1,3 @@
import { Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { Avatar } from 'flavours/glitch/components/avatar'; import { Avatar } from 'flavours/glitch/components/avatar';
@ -227,10 +226,10 @@ class DetailedStatus extends ImmutablePureComponent {
} }
if (status.get('application')) { if (status.get('application')) {
applicationLink = <Fragment> · <a className='detailed-status__application' href={status.getIn(['application', 'website'])} target='_blank' rel='noopener noreferrer'>{status.getIn(['application', 'name'])}</a></Fragment>; applicationLink = <> · <a className='detailed-status__application' href={status.getIn(['application', 'website'])} target='_blank' rel='noopener noreferrer'>{status.getIn(['application', 'name'])}</a></>;
} }
const visibilityLink = <Fragment> · <VisibilityIcon visibility={status.get('visibility')} /></Fragment>; const visibilityLink = <> · <VisibilityIcon visibility={status.get('visibility')} /></>;
if (status.get('visibility') === 'direct') { if (status.get('visibility') === 'direct') {
reblogIcon = 'envelope'; reblogIcon = 'envelope';
@ -242,27 +241,27 @@ class DetailedStatus extends ImmutablePureComponent {
reblogLink = null; reblogLink = null;
} else if (this.context.router) { } else if (this.context.router) {
reblogLink = ( reblogLink = (
<Fragment> <>
<Fragment> · </Fragment> ·
<Link to={`/@${status.getIn(['account', 'acct'])}/${status.get('id')}/reblogs`} className='detailed-status__link'> <Link to={`/@${status.getIn(['account', 'acct'])}/${status.get('id')}/reblogs`} className='detailed-status__link'>
<Icon id={reblogIcon} /> <Icon id={reblogIcon} />
<span className='detailed-status__reblogs'> <span className='detailed-status__reblogs'>
<AnimatedNumber value={status.get('reblogs_count')} /> <AnimatedNumber value={status.get('reblogs_count')} />
</span> </span>
</Link> </Link>
</Fragment> </>
); );
} else { } else {
reblogLink = ( reblogLink = (
<Fragment> <>
<Fragment> · </Fragment> ·
<a href={`/interact/${status.get('id')}?type=reblog`} className='detailed-status__link' onClick={this.handleModalLink}> <a href={`/interact/${status.get('id')}?type=reblog`} className='detailed-status__link' onClick={this.handleModalLink}>
<Icon id={reblogIcon} /> <Icon id={reblogIcon} />
<span className='detailed-status__reblogs'> <span className='detailed-status__reblogs'>
<AnimatedNumber value={status.get('reblogs_count')} /> <AnimatedNumber value={status.get('reblogs_count')} />
</span> </span>
</a> </a>
</Fragment> </>
); );
} }
@ -288,10 +287,10 @@ class DetailedStatus extends ImmutablePureComponent {
if (status.get('edited_at')) { if (status.get('edited_at')) {
edited = ( edited = (
<Fragment> <>
<Fragment> · </Fragment> ·
<EditedTimestamp statusId={status.get('id')} timestamp={status.get('edited_at')} /> <EditedTimestamp statusId={status.get('id')} timestamp={status.get('edited_at')} />
</Fragment> </>
); );
} }

5
app/javascript/flavours/glitch/features/ui/components/actions_modal.jsx
View File

@ -1,4 +1,3 @@
import { Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
@ -35,13 +34,13 @@ export default class ActionsModal extends ImmutablePureComponent {
if (!contents) { if (!contents) {
contents = ( contents = (
<Fragment> <>
{icon && <IconButton title={text} icon={icon} role='presentation' tabIndex={-1} inverted />} {icon && <IconButton title={text} icon={icon} role='presentation' tabIndex={-1} inverted />}
<div> <div>
<div className={classNames({ 'actions-modal__item-label': !!meta })}>{text}</div> <div className={classNames({ 'actions-modal__item-label': !!meta })}>{text}</div>
<div>{meta}</div> <div>{meta}</div>
</div> </div>
</Fragment> </>
); );
} }

6
app/javascript/flavours/glitch/features/ui/components/compare_history_modal.jsx
View File

@ -1,4 +1,4 @@
import { PureComponent, Fragment } from 'react'; import { PureComponent } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
@ -65,10 +65,10 @@ class CompareHistoryModal extends PureComponent {
<div className='compare-history-modal__container'> <div className='compare-history-modal__container'>
<div className='status__content'> <div className='status__content'>
{currentVersion.get('spoiler_text').length > 0 && ( {currentVersion.get('spoiler_text').length > 0 && (
<Fragment> <>
<div className='translate' dangerouslySetInnerHTML={spoilerContent} lang={language} /> <div className='translate' dangerouslySetInnerHTML={spoilerContent} lang={language} />
<hr /> <hr />
</Fragment> </>
)} )}
<div className='status__content__text status__content__text--visible translate' dangerouslySetInnerHTML={content} lang={language} /> <div className='status__content__text status__content__text--visible translate' dangerouslySetInnerHTML={content} lang={language} />

10
app/javascript/flavours/glitch/features/ui/components/compose_panel.jsx
View File

@ -1,4 +1,4 @@
import { PureComponent, Fragment } from 'react'; import { PureComponent } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import SearchContainer from 'flavours/glitch/features/compose/containers/search_container'; import SearchContainer from 'flavours/glitch/features/compose/containers/search_container';
@ -36,17 +36,17 @@ class ComposePanel extends PureComponent {
<SearchContainer openInRoute /> <SearchContainer openInRoute />
{!signedIn && ( {!signedIn && (
<Fragment> <>
<ServerBanner /> <ServerBanner />
<div className='flex-spacer' /> <div className='flex-spacer' />
</Fragment> </>
)} )}
{signedIn && ( {signedIn && (
<Fragment> <>
<NavigationContainer /> <NavigationContainer />
<ComposeFormContainer singleColumn /> <ComposeFormContainer singleColumn />
</Fragment> </>
)} )}
<LinkFooter /> <LinkFooter />

6
app/javascript/flavours/glitch/features/ui/components/focal_point_modal.jsx
View File

@ -1,4 +1,4 @@
import { PureComponent, Fragment } from 'react'; import { PureComponent } from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
@ -315,7 +315,7 @@ class FocalPointModal extends ImmutablePureComponent {
{focals && <p><FormattedMessage id='upload_modal.hint' defaultMessage='Click or drag the circle on the preview to choose the focal point which will always be in view on all thumbnails.' /></p>} {focals && <p><FormattedMessage id='upload_modal.hint' defaultMessage='Click or drag the circle on the preview to choose the focal point which will always be in view on all thumbnails.' /></p>}
{thumbnailable && ( {thumbnailable && (
<Fragment> <>
<label className='setting-text-label' htmlFor='upload-modal__thumbnail'><FormattedMessage id='upload_form.thumbnail' defaultMessage='Change thumbnail' /></label> <label className='setting-text-label' htmlFor='upload-modal__thumbnail'><FormattedMessage id='upload_form.thumbnail' defaultMessage='Change thumbnail' /></label>
<Button disabled={isUploadingThumbnail || !media.get('unattached')} text={intl.formatMessage(messages.chooseImage)} onClick={this.handleFileInputClick} /> <Button disabled={isUploadingThumbnail || !media.get('unattached')} text={intl.formatMessage(messages.chooseImage)} onClick={this.handleFileInputClick} />
@ -335,7 +335,7 @@ class FocalPointModal extends ImmutablePureComponent {
</label> </label>
<hr className='setting-divider' /> <hr className='setting-divider' />
</Fragment> </>
)} )}
<label className='setting-text-label' htmlFor='upload-modal__description'> <label className='setting-text-label' htmlFor='upload-modal__description'>

10
app/javascript/flavours/glitch/features/ui/components/navigation_panel.jsx
View File

@ -1,4 +1,4 @@
import { Component, Fragment } from 'react'; import { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
import { timelinePreview, showTrends } from 'flavours/glitch/initial_state'; import { timelinePreview, showTrends } from 'flavours/glitch/initial_state';
@ -47,11 +47,11 @@ class NavigationPanel extends Component {
return ( return (
<div className='navigation-panel'> <div className='navigation-panel'>
{signedIn && ( {signedIn && (
<Fragment> <>
<ColumnLink transparent to='/home' icon='home' text={intl.formatMessage(messages.home)} /> <ColumnLink transparent to='/home' icon='home' text={intl.formatMessage(messages.home)} />
<ColumnLink transparent to='/notifications' icon={<NotificationsCounterIcon className='column-link__icon' />} text={intl.formatMessage(messages.notifications)} /> <ColumnLink transparent to='/notifications' icon={<NotificationsCounterIcon className='column-link__icon' />} text={intl.formatMessage(messages.notifications)} />
<FollowRequestsColumnLink /> <FollowRequestsColumnLink />
</Fragment> </>
)} )}
{showTrends ? ( {showTrends ? (
@ -75,7 +75,7 @@ class NavigationPanel extends Component {
)} )}
{signedIn && ( {signedIn && (
<Fragment> <>
<ColumnLink transparent to='/conversations' icon='at' text={intl.formatMessage(messages.direct)} /> <ColumnLink transparent to='/conversations' icon='at' text={intl.formatMessage(messages.direct)} />
<ColumnLink transparent to='/bookmarks' icon='bookmark' text={intl.formatMessage(messages.bookmarks)} /> <ColumnLink transparent to='/bookmarks' icon='bookmark' text={intl.formatMessage(messages.bookmarks)} />
<ColumnLink transparent to='/favourites' icon='star' text={intl.formatMessage(messages.favourites)} /> <ColumnLink transparent to='/favourites' icon='star' text={intl.formatMessage(messages.favourites)} />
@ -87,7 +87,7 @@ class NavigationPanel extends Component {
{!!preferencesLink && <ColumnLink transparent href={preferencesLink} icon='cog' text={intl.formatMessage(messages.preferences)} />} {!!preferencesLink && <ColumnLink transparent href={preferencesLink} icon='cog' text={intl.formatMessage(messages.preferences)} />}
<ColumnLink transparent onClick={onOpenSettings} icon='cogs' text={intl.formatMessage(messages.app_settings)} /> <ColumnLink transparent onClick={onOpenSettings} icon='cogs' text={intl.formatMessage(messages.app_settings)} />
</Fragment> </>
)} )}
<div className='navigation-panel__legal'> <div className='navigation-panel__legal'>

6
app/javascript/flavours/glitch/features/ui/components/zoomable_image.jsx
View File

@ -1,4 +1,4 @@
import { PureComponent, Fragment } from 'react'; import { PureComponent } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { IconButton } from 'flavours/glitch/components/icon_button'; import { IconButton } from 'flavours/glitch/components/icon_button';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
@ -411,7 +411,7 @@ class ZoomableImage extends PureComponent {
const zoomButtonTitle = this.state.zoomState === 'compress' ? intl.formatMessage(messages.compress) : intl.formatMessage(messages.expand); const zoomButtonTitle = this.state.zoomState === 'compress' ? intl.formatMessage(messages.compress) : intl.formatMessage(messages.expand);
return ( return (
<Fragment> <>
<IconButton <IconButton
className={`media-modal__zoom-button ${zoomButtonShouldHide}`} className={`media-modal__zoom-button ${zoomButtonShouldHide}`}
title={zoomButtonTitle} title={zoomButtonTitle}
@ -445,7 +445,7 @@ class ZoomableImage extends PureComponent {
onMouseDown={this.handleMouseDown} onMouseDown={this.handleMouseDown}
/> />
</div> </div>
</Fragment> </>
); );
} }