[Glitch] Rewrite `<LoadingIndicator/>` as FC and TS (#25364)

Port a86886b1fd to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
pull/62/head
alfe 2023-06-14 02:26:25 +09:00 committed by Claire
parent 0a212cfa7f
commit 9bf63257fb
24 changed files with 55 additions and 53 deletions

View File

@ -0,0 +1,27 @@
interface Props {
size: number;
strokeWidth: number;
}
export const CircularProgress: React.FC<Props> = ({ size, strokeWidth }) => {
const viewBox = `0 0 ${size} ${size}`;
const radius = (size - strokeWidth) / 2;
return (
<svg
width={size}
height={size}
viewBox={viewBox}
className='circular-progress'
role='progressbar'
>
<circle
fill='none'
cx={size / 2}
cy={size / 2}
r={radius}
strokeWidth={`${strokeWidth}px`}
/>
</svg>
);
};

View File

@ -8,8 +8,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import { supportsPassiveEvents } from 'detect-passive-events'; import { supportsPassiveEvents } from 'detect-passive-events';
import Overlay from 'react-overlays/Overlay'; import Overlay from 'react-overlays/Overlay';
import { CircularProgress } from 'flavours/glitch/components/loading_indicator'; import { CircularProgress } from "./circular_progress";
import { IconButton } from './icon_button'; import { IconButton } from './icon_button';
const listenerOptions = supportsPassiveEvents ? { passive: true, capture: true } : true; const listenerOptions = supportsPassiveEvents ? { passive: true, capture: true } : true;

View File

@ -1,31 +0,0 @@
import PropTypes from 'prop-types';
export const CircularProgress = ({ size, strokeWidth }) => {
const viewBox = `0 0 ${size} ${size}`;
const radius = (size - strokeWidth) / 2;
return (
<svg width={size} heigh={size} viewBox={viewBox} className='circular-progress' role='progressbar'>
<circle
fill='none'
cx={size / 2}
cy={size / 2}
r={radius}
strokeWidth={`${strokeWidth}px`}
/>
</svg>
);
};
CircularProgress.propTypes = {
size: PropTypes.number.isRequired,
strokeWidth: PropTypes.number.isRequired,
};
const LoadingIndicator = () => (
<div className='loading-indicator'>
<CircularProgress size={50} strokeWidth={6} />
</div>
);
export default LoadingIndicator;

View File

@ -0,0 +1,7 @@
import { CircularProgress } from './circular_progress';
export const LoadingIndicator: React.FC = () => (
<div className='loading-indicator'>
<CircularProgress size={50} strokeWidth={6} />
</div>
);

View File

@ -17,7 +17,7 @@ import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from
import { LoadMore } from './load_more'; import { LoadMore } from './load_more';
import { LoadPending } from './load_pending'; import { LoadPending } from './load_pending';
import LoadingIndicator from './loading_indicator'; import { LoadingIndicator } from './loading_indicator';
const MOUSE_IDLE_DELAY = 300; const MOUSE_IDLE_DELAY = 300;

View File

@ -10,7 +10,7 @@ import { lookupAccount, fetchAccount } from 'flavours/glitch/actions/accounts';
import { openModal } from 'flavours/glitch/actions/modal'; import { openModal } from 'flavours/glitch/actions/modal';
import { expandAccountMediaTimeline } from 'flavours/glitch/actions/timelines'; import { expandAccountMediaTimeline } from 'flavours/glitch/actions/timelines';
import { LoadMore } from 'flavours/glitch/components/load_more'; import { LoadMore } from 'flavours/glitch/components/load_more';
import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
import ScrollContainer from 'flavours/glitch/containers/scroll_container'; import ScrollContainer from 'flavours/glitch/containers/scroll_container';
import ProfileColumnHeader from 'flavours/glitch/features/account/components/profile_column_header'; import ProfileColumnHeader from 'flavours/glitch/features/account/components/profile_column_header';
import HeaderContainer from 'flavours/glitch/features/account_timeline/containers/header_container'; import HeaderContainer from 'flavours/glitch/features/account_timeline/containers/header_container';

View File

@ -16,7 +16,7 @@ import { getAccountHidden } from 'flavours/glitch/selectors';
import { fetchFeaturedTags } from '../../actions/featured_tags'; import { fetchFeaturedTags } from '../../actions/featured_tags';
import { expandAccountFeaturedTimeline, expandAccountTimeline } from '../../actions/timelines'; import { expandAccountFeaturedTimeline, expandAccountTimeline } from '../../actions/timelines';
import LoadingIndicator from '../../components/loading_indicator'; import { LoadingIndicator } from '../../components/loading_indicator';
import StatusList from '../../components/status_list'; import StatusList from '../../components/status_list';
import Column from '../ui/components/column'; import Column from '../ui/components/column';

View File

@ -10,7 +10,7 @@ import { debounce } from 'lodash';
import { fetchBlocks, expandBlocks } from 'flavours/glitch/actions/blocks'; import { fetchBlocks, expandBlocks } from 'flavours/glitch/actions/blocks';
import ColumnBackButtonSlim from 'flavours/glitch/components/column_back_button_slim'; import ColumnBackButtonSlim from 'flavours/glitch/components/column_back_button_slim';
import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
import AccountContainer from 'flavours/glitch/containers/account_container'; import AccountContainer from 'flavours/glitch/containers/account_container';
import Column from 'flavours/glitch/features/ui/components/column'; import Column from 'flavours/glitch/features/ui/components/column';

View File

@ -14,7 +14,7 @@ import { fetchDirectory, expandDirectory } from 'flavours/glitch/actions/directo
import Column from 'flavours/glitch/components/column'; import Column from 'flavours/glitch/components/column';
import ColumnHeader from 'flavours/glitch/components/column_header'; import ColumnHeader from 'flavours/glitch/components/column_header';
import { LoadMore } from 'flavours/glitch/components/load_more'; import { LoadMore } from 'flavours/glitch/components/load_more';
import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
import { RadioButton } from 'flavours/glitch/components/radio_button'; import { RadioButton } from 'flavours/glitch/components/radio_button';
import ScrollContainer from 'flavours/glitch/containers/scroll_container'; import ScrollContainer from 'flavours/glitch/containers/scroll_container';

View File

@ -14,7 +14,7 @@ import ScrollableList from 'flavours/glitch/components/scrollable_list';
import { fetchDomainBlocks, expandDomainBlocks } from '../../actions/domain_blocks'; import { fetchDomainBlocks, expandDomainBlocks } from '../../actions/domain_blocks';
import ColumnBackButtonSlim from '../../components/column_back_button_slim'; import ColumnBackButtonSlim from '../../components/column_back_button_slim';
import LoadingIndicator from '../../components/loading_indicator'; import { LoadingIndicator } from '../../components/loading_indicator';
import DomainContainer from '../../containers/domain_container'; import DomainContainer from '../../containers/domain_container';
import Column from '../ui/components/column'; import Column from '../ui/components/column';

View File

@ -8,7 +8,7 @@ import { connect } from 'react-redux';
import { fetchTrendingLinks } from 'flavours/glitch/actions/trends'; import { fetchTrendingLinks } from 'flavours/glitch/actions/trends';
import DismissableBanner from 'flavours/glitch/components/dismissable_banner'; import DismissableBanner from 'flavours/glitch/components/dismissable_banner';
import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
import Story from './components/story'; import Story from './components/story';

View File

@ -12,7 +12,7 @@ import { connect } from 'react-redux';
import { expandSearch } from 'flavours/glitch/actions/search'; import { expandSearch } from 'flavours/glitch/actions/search';
import { ImmutableHashtag as Hashtag } from 'flavours/glitch/components/hashtag'; import { ImmutableHashtag as Hashtag } from 'flavours/glitch/components/hashtag';
import { LoadMore } from 'flavours/glitch/components/load_more'; import { LoadMore } from 'flavours/glitch/components/load_more';
import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
import Account from 'flavours/glitch/containers/account_container'; import Account from 'flavours/glitch/containers/account_container';
import Status from 'flavours/glitch/containers/status_container'; import Status from 'flavours/glitch/containers/status_container';

View File

@ -7,7 +7,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { fetchSuggestions, dismissSuggestion } from 'flavours/glitch/actions/suggestions'; import { fetchSuggestions, dismissSuggestion } from 'flavours/glitch/actions/suggestions';
import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
import AccountCard from 'flavours/glitch/features/directory/components/account_card'; import AccountCard from 'flavours/glitch/features/directory/components/account_card';
const mapStateToProps = state => ({ const mapStateToProps = state => ({

View File

@ -9,7 +9,7 @@ import { connect } from 'react-redux';
import { fetchTrendingHashtags } from 'flavours/glitch/actions/trends'; import { fetchTrendingHashtags } from 'flavours/glitch/actions/trends';
import DismissableBanner from 'flavours/glitch/components/dismissable_banner'; import DismissableBanner from 'flavours/glitch/components/dismissable_banner';
import { ImmutableHashtag as Hashtag } from 'flavours/glitch/components/hashtag'; import { ImmutableHashtag as Hashtag } from 'flavours/glitch/components/hashtag';
import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';

View File

@ -11,7 +11,7 @@ import { connect } from 'react-redux';
import { fetchFavourites } from 'flavours/glitch/actions/interactions'; import { fetchFavourites } from 'flavours/glitch/actions/interactions';
import ColumnHeader from 'flavours/glitch/components/column_header'; import ColumnHeader from 'flavours/glitch/components/column_header';
import { Icon } from 'flavours/glitch/components/icon'; import { Icon } from 'flavours/glitch/components/icon';
import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
import ScrollableList from 'flavours/glitch/components/scrollable_list'; import ScrollableList from 'flavours/glitch/components/scrollable_list';
import AccountContainer from 'flavours/glitch/containers/account_container'; import AccountContainer from 'flavours/glitch/containers/account_container';
import Column from 'flavours/glitch/features/ui/components/column'; import Column from 'flavours/glitch/features/ui/components/column';

View File

@ -14,7 +14,7 @@ import {
fetchFollowers, fetchFollowers,
expandFollowers, expandFollowers,
} from 'flavours/glitch/actions/accounts'; } from 'flavours/glitch/actions/accounts';
import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
import ScrollableList from 'flavours/glitch/components/scrollable_list'; import ScrollableList from 'flavours/glitch/components/scrollable_list';
import { TimelineHint } from 'flavours/glitch/components/timeline_hint'; import { TimelineHint } from 'flavours/glitch/components/timeline_hint';
import AccountContainer from 'flavours/glitch/containers/account_container'; import AccountContainer from 'flavours/glitch/containers/account_container';

View File

@ -14,7 +14,7 @@ import {
fetchFollowing, fetchFollowing,
expandFollowing, expandFollowing,
} from 'flavours/glitch/actions/accounts'; } from 'flavours/glitch/actions/accounts';
import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
import ScrollableList from 'flavours/glitch/components/scrollable_list'; import ScrollableList from 'flavours/glitch/components/scrollable_list';
import { TimelineHint } from 'flavours/glitch/components/timeline_hint'; import { TimelineHint } from 'flavours/glitch/components/timeline_hint';
import AccountContainer from 'flavours/glitch/containers/account_container'; import AccountContainer from 'flavours/glitch/containers/account_container';

View File

@ -18,7 +18,7 @@ import { expandListTimeline } from 'flavours/glitch/actions/timelines';
import Column from 'flavours/glitch/components/column'; import Column from 'flavours/glitch/components/column';
import ColumnHeader from 'flavours/glitch/components/column_header'; import ColumnHeader from 'flavours/glitch/components/column_header';
import { Icon } from 'flavours/glitch/components/icon'; import { Icon } from 'flavours/glitch/components/icon';
import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
import { RadioButton } from 'flavours/glitch/components/radio_button'; import { RadioButton } from 'flavours/glitch/components/radio_button';
import BundleColumnError from 'flavours/glitch/features/ui/components/bundle_column_error'; import BundleColumnError from 'flavours/glitch/features/ui/components/bundle_column_error';
import StatusListContainer from 'flavours/glitch/features/ui/containers/status_list_container'; import StatusListContainer from 'flavours/glitch/features/ui/containers/status_list_container';

View File

@ -11,7 +11,7 @@ import { createSelector } from 'reselect';
import { fetchLists } from 'flavours/glitch/actions/lists'; import { fetchLists } from 'flavours/glitch/actions/lists';
import ColumnBackButtonSlim from 'flavours/glitch/components/column_back_button_slim'; import ColumnBackButtonSlim from 'flavours/glitch/components/column_back_button_slim';
import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
import ScrollableList from 'flavours/glitch/components/scrollable_list'; import ScrollableList from 'flavours/glitch/components/scrollable_list';
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';

View File

@ -12,7 +12,7 @@ import { debounce } from 'lodash';
import { fetchMutes, expandMutes } from 'flavours/glitch/actions/mutes'; import { fetchMutes, expandMutes } from 'flavours/glitch/actions/mutes';
import ColumnBackButtonSlim from 'flavours/glitch/components/column_back_button_slim'; import ColumnBackButtonSlim from 'flavours/glitch/components/column_back_button_slim';
import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
import ScrollableList from 'flavours/glitch/components/scrollable_list'; import ScrollableList from 'flavours/glitch/components/scrollable_list';
import AccountContainer from 'flavours/glitch/containers/account_container'; import AccountContainer from 'flavours/glitch/containers/account_container';
import Column from 'flavours/glitch/features/ui/components/column'; import Column from 'flavours/glitch/features/ui/components/column';

View File

@ -11,7 +11,7 @@ import { connect } from 'react-redux';
import { fetchReblogs } from 'flavours/glitch/actions/interactions'; import { fetchReblogs } from 'flavours/glitch/actions/interactions';
import ColumnHeader from 'flavours/glitch/components/column_header'; import ColumnHeader from 'flavours/glitch/components/column_header';
import { Icon } from 'flavours/glitch/components/icon'; import { Icon } from 'flavours/glitch/components/icon';
import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
import ScrollableList from 'flavours/glitch/components/scrollable_list'; import ScrollableList from 'flavours/glitch/components/scrollable_list';
import AccountContainer from 'flavours/glitch/containers/account_container'; import AccountContainer from 'flavours/glitch/containers/account_container';
import Column from 'flavours/glitch/features/ui/components/column'; import Column from 'flavours/glitch/features/ui/components/column';

View File

@ -8,7 +8,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import Button from 'flavours/glitch/components/button'; import Button from 'flavours/glitch/components/button';
import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
import StatusCheckBox from 'flavours/glitch/features/report/containers/status_check_box_container'; import StatusCheckBox from 'flavours/glitch/features/report/containers/status_check_box_container';

View File

@ -46,7 +46,7 @@ import {
undoStatusTranslation, undoStatusTranslation,
} from 'flavours/glitch/actions/statuses'; } from 'flavours/glitch/actions/statuses';
import { Icon } from 'flavours/glitch/components/icon'; import { Icon } from 'flavours/glitch/components/icon';
import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
import { textForScreenReader, defaultMediaVisibility } from 'flavours/glitch/components/status'; import { textForScreenReader, defaultMediaVisibility } from 'flavours/glitch/components/status';
import ScrollContainer from 'flavours/glitch/containers/scroll_container'; import ScrollContainer from 'flavours/glitch/containers/scroll_container';
import StatusContainer from 'flavours/glitch/containers/status_container'; import StatusContainer from 'flavours/glitch/containers/status_container';

View File

@ -1,4 +1,4 @@
import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
// Keep the markup in sync with <BundleModalError /> // Keep the markup in sync with <BundleModalError />
// (make sure they have the same dimensions) // (make sure they have the same dimensions)