[Glitch] Split `EmptyAccount` out of `Account` component
Partial port of b8a2430642
to glitch-soc
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
parent
32ec0d2472
commit
b8cbaba283
|
@ -5,11 +5,11 @@ import { defineMessages, injectIntl } from 'react-intl';
|
||||||
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';
|
||||||
|
|
||||||
import { Skeleton } from 'flavours/glitch/components/skeleton';
|
|
||||||
import { counterRenderer } from 'flavours/glitch/components/common_counter';
|
import { counterRenderer } from 'flavours/glitch/components/common_counter';
|
||||||
import ShortNumber from 'flavours/glitch/components/short_number';
|
import ShortNumber from 'flavours/glitch/components/short_number';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import { VerifiedBadge } from 'flavours/glitch/components/verified_badge';
|
import { VerifiedBadge } from 'flavours/glitch/components/verified_badge';
|
||||||
|
import { EmptyAccount } from 'flavours/glitch/components/empty_account';
|
||||||
|
|
||||||
import { me } from '../initial_state';
|
import { me } from '../initial_state';
|
||||||
|
|
||||||
|
@ -81,20 +81,7 @@ class Account extends ImmutablePureComponent {
|
||||||
const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction, size, minimal } = this.props;
|
const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction, size, minimal } = this.props;
|
||||||
|
|
||||||
if (!account) {
|
if (!account) {
|
||||||
return (
|
return <EmptyAccount size={size} minimal={minimal} />;
|
||||||
<div className={classNames('account', { 'account--minimal': minimal })}>
|
|
||||||
<div className='account__wrapper'>
|
|
||||||
<div className='account__display-name'>
|
|
||||||
<div className='account__avatar-wrapper'><Skeleton width={size} height={size} /></div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<DisplayName />
|
|
||||||
<Skeleton width='7ch' />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (hidden) {
|
if (hidden) {
|
||||||
|
|
|
@ -0,0 +1,33 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import classNames from 'classnames';
|
||||||
|
|
||||||
|
import { DisplayName } from 'flavours/glitch/components/display_name';
|
||||||
|
import { Skeleton } from 'flavours/glitch/components/skeleton';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
size?: number;
|
||||||
|
minimal?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const EmptyAccount: React.FC<Props> = ({
|
||||||
|
size = 46,
|
||||||
|
minimal = false,
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div className={classNames('account', { 'account--minimal': minimal })}>
|
||||||
|
<div className='account__wrapper'>
|
||||||
|
<div className='account__display-name'>
|
||||||
|
<div className='account__avatar-wrapper'>
|
||||||
|
<Skeleton width={size} height={size} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<DisplayName />
|
||||||
|
<Skeleton width='7ch' />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
Loading…
Reference in New Issue