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

Convert most Placeholder components into TSX

Browse source
This commit is contained in:
Alex Gleason 2022-05-01 12:53:53 -05:00
parent 5def7a087d
commit 311ec14200
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
11 changed files with 94 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
app/soapbox/features/placeholder/components/placeholder_account.js
View file

@ -1,23 +0,0 @@
import React from 'react';
import PlaceholderAvatar from './placeholder_avatar';
import PlaceholderDisplayName from './placeholder_display_name';
export default class PlaceholderAccount extends React.Component {
render() {
return (
<div className='account'>
<div className='account__wrapper'>
<span className='account__display-name'>
<div className='account__avatar-wrapper'>
<PlaceholderAvatar size={36} />
</div>
<PlaceholderDisplayName minLength={3} maxLength={25} />
</span>
</div>
</div>
);
}
}

22
app/soapbox/features/placeholder/components/placeholder_account.tsx Normal file
View file

@ -0,0 +1,22 @@
import React from 'react';
import PlaceholderAvatar from './placeholder_avatar';
import PlaceholderDisplayName from './placeholder_display_name';
/** Fake account to display while data is loading. */
const PlaceholderAccount: React.FC = () => {
return (
<div className='account'>
<div className='account__wrapper'>
<span className='account__display-name'>
<div className='account__avatar-wrapper'>
<PlaceholderAvatar size={36} />
</div>
<PlaceholderDisplayName minLength={3} maxLength={25} />
</span>
</div>
</div>
);
};
export default PlaceholderAccount;

3
app/soapbox/features/placeholder/components/placeholder_card.js → app/soapbox/features/placeholder/components/placeholder_card.tsx
View file

@ -3,7 +3,8 @@ import * as React from 'react';
import { randomIntFromInterval, generateText } from '../utils';
const PlaceholderCard = () => (
/** Fake link preview to display while data is loading. */
const PlaceholderCard: React.FC = () => (
<div className={classNames('status-card', {
'animate-pulse': true,
})}

32
app/soapbox/features/placeholder/components/placeholder_chat.js
View file

@ -1,32 +0,0 @@
import React from 'react';
import { randomIntFromInterval, generateText } from '../utils';
import PlaceholderAvatar from './placeholder_avatar';
import PlaceholderDisplayName from './placeholder_display_name';
export default class PlaceholderAccount extends React.Component {
render() {
const messageLength = randomIntFromInterval(5, 75);
return (
<div className='chat-list-item chat-list-item--placeholder'>
<div className='account'>
<div className='account__wrapper'>
<div className='account__display-name'>
<div className='account__avatar-wrapper'>
<PlaceholderAvatar size={36} />
</div>
<PlaceholderDisplayName minLength={3} maxLength={25} />
<span className='chat__last-message'>
{generateText(messageLength)}
</span>
</div>
</div>
</div>
</div>
);
}
}

31
app/soapbox/features/placeholder/components/placeholder_chat.tsx Normal file
View file

@ -0,0 +1,31 @@
import React from 'react';
import { randomIntFromInterval, generateText } from '../utils';
import PlaceholderAvatar from './placeholder_avatar';
import PlaceholderDisplayName from './placeholder_display_name';
/** Fake chat to display while data is loading. */
const PlaceholderChat: React.FC = () => {
const messageLength = randomIntFromInterval(5, 75);
return (
<div className='chat-list-item chat-list-item--placeholder'>
<div className='account'>
<div className='account__wrapper'>
<div className='account__display-name'>
<div className='account__avatar-wrapper'>
<PlaceholderAvatar size={36} />
</div>
<PlaceholderDisplayName minLength={3} maxLength={25} />
<span className='chat__last-message'>
{generateText(messageLength)}
</span>
</div>
</div>
</div>
</div>
);
};
export default PlaceholderChat;

21
app/soapbox/features/placeholder/components/placeholder_hashtag.js
View file

@ -1,21 +0,0 @@
import React from 'react';
import { generateText, randomIntFromInterval } from '../utils';
export default class PlaceholderHashtag extends React.Component {
render() {
const length = randomIntFromInterval(15, 30);
return (
<div className='placeholder-hashtag'>
<div className='trends__item'>
<div className='trends__item__name'>
{generateText(length)}
</div>
</div>
</div>
);
}
}

20
app/soapbox/features/placeholder/components/placeholder_hashtag.tsx Normal file
View file

@ -0,0 +1,20 @@
import React from 'react';
import { generateText, randomIntFromInterval } from '../utils';
/** Fake hashtag to display while data is loading. */
const PlaceholderHashtag: React.FC = () => {
const length = randomIntFromInterval(15, 30);
return (
<div className='placeholder-hashtag'>
<div className='trends__item'>
<div className='trends__item__name'>
{generateText(length)}
</div>
</div>
</div>
);
};
export default PlaceholderHashtag;

17
app/soapbox/features/placeholder/components/placeholder_material_status.js
View file

@ -1,17 +0,0 @@
import React from 'react';
import PlaceholderStatus from './placeholder_status';
export default class PlaceholderMaterialStatus extends React.Component {
render() {
return (
<div className='material-status' tabIndex={-1} aria-hidden>
<div className='material-status__status' tabIndex={0}>
<PlaceholderStatus {...this.props} focusable={false} />
</div>
</div>
);
}
}

16
app/soapbox/features/placeholder/components/placeholder_material_status.tsx Normal file
View file

@ -0,0 +1,16 @@
import React from 'react';
import PlaceholderStatus from './placeholder_status';
/** Fake material status to display while data is loading. */
const PlaceholderMaterialStatus: React.FC = () => {
return (
<div className='material-status' tabIndex={-1} aria-hidden>
<div className='material-status__status' tabIndex={0}>
<PlaceholderStatus />
</div>
</div>
);
};
export default PlaceholderMaterialStatus;

1
app/soapbox/features/placeholder/components/placeholder_notification.js → app/soapbox/features/placeholder/components/placeholder_notification.tsx
View file

@ -4,6 +4,7 @@ import PlaceholderAvatar from './placeholder_avatar';
import PlaceholderDisplayName from './placeholder_display_name';
import PlaceholderStatusContent from './placeholder_status_content';
/** Fake notification to display while data is loading. */
const PlaceholderNotification = () => (
<div className='bg-white dark:bg-slate-800 px-4 py-6 sm:p-6'>
<div className='w-full animate-pulse'>

3
app/soapbox/features/placeholder/components/placeholder_status.tsx
View file

@ -9,7 +9,8 @@ interface IPlaceholderStatus {
thread?: boolean
}
const PlaceholderStatus = ({ thread = false }: IPlaceholderStatus) => (
/** Fake status to display while data is loading. */
const PlaceholderStatus: React.FC<IPlaceholderStatus> = ({ thread = false }) => (
<div
className={classNames({
'status-placeholder bg-white dark:bg-slate-800': true,