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

[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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app/javascript/flavours/glitch/components/circular_progress.tsx Normal file
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>
);
};

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

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

31
app/javascript/flavours/glitch/components/loading_indicator.jsx
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;

7
app/javascript/flavours/glitch/components/loading_indicator.tsx Normal file
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>
);

2
app/javascript/flavours/glitch/components/scrollable_list.jsx
View File

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

2
app/javascript/flavours/glitch/features/account_gallery/index.jsx
View File

@ -10,7 +10,7 @@ import { lookupAccount, fetchAccount } from 'flavours/glitch/actions/accounts';
import { openModal } from 'flavours/glitch/actions/modal';
import { expandAccountMediaTimeline } from 'flavours/glitch/actions/timelines';
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 ProfileColumnHeader from 'flavours/glitch/features/account/components/profile_column_header';
import HeaderContainer from 'flavours/glitch/features/account_timeline/containers/header_container';

2
app/javascript/flavours/glitch/features/account_timeline/index.jsx
View File

@ -16,7 +16,7 @@ import { getAccountHidden } from 'flavours/glitch/selectors';
import { fetchFeaturedTags } from '../../actions/featured_tags';
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 Column from '../ui/components/column';

2
app/javascript/flavours/glitch/features/blocks/index.jsx
View File

@ -10,7 +10,7 @@ import { debounce } from 'lodash';
import { fetchBlocks, expandBlocks } from 'flavours/glitch/actions/blocks';
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 Column from 'flavours/glitch/features/ui/components/column';

2
app/javascript/flavours/glitch/features/directory/index.jsx
View File

@ -14,7 +14,7 @@ import { fetchDirectory, expandDirectory } from 'flavours/glitch/actions/directo
import Column from 'flavours/glitch/components/column';
import ColumnHeader from 'flavours/glitch/components/column_header';
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 ScrollContainer from 'flavours/glitch/containers/scroll_container';

2
app/javascript/flavours/glitch/features/domain_blocks/index.jsx
View File

@ -14,7 +14,7 @@ import ScrollableList from 'flavours/glitch/components/scrollable_list';
import { fetchDomainBlocks, expandDomainBlocks } from '../../actions/domain_blocks';
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 Column from '../ui/components/column';

2
app/javascript/flavours/glitch/features/explore/links.jsx
View File

@ -8,7 +8,7 @@ import { connect } from 'react-redux';
import { fetchTrendingLinks } from 'flavours/glitch/actions/trends';
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';

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

@ -12,7 +12,7 @@ import { connect } from 'react-redux';
import { expandSearch } from 'flavours/glitch/actions/search';
import { ImmutableHashtag as Hashtag } from 'flavours/glitch/components/hashtag';
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 Status from 'flavours/glitch/containers/status_container';

2
app/javascript/flavours/glitch/features/explore/suggestions.jsx
View File

@ -7,7 +7,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux';
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';
const mapStateToProps = state => ({

2
app/javascript/flavours/glitch/features/explore/tags.jsx
View File

@ -9,7 +9,7 @@ import { connect } from 'react-redux';
import { fetchTrendingHashtags } from 'flavours/glitch/actions/trends';
import DismissableBanner from 'flavours/glitch/components/dismissable_banner';
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';

2
app/javascript/flavours/glitch/features/favourites/index.jsx
View File

@ -11,7 +11,7 @@ import { connect } from 'react-redux';
import { fetchFavourites } from 'flavours/glitch/actions/interactions';
import ColumnHeader from 'flavours/glitch/components/column_header';
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 AccountContainer from 'flavours/glitch/containers/account_container';
import Column from 'flavours/glitch/features/ui/components/column';

2
app/javascript/flavours/glitch/features/followers/index.jsx
View File

@ -14,7 +14,7 @@ import {
fetchFollowers,
expandFollowers,
} 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 { TimelineHint } from 'flavours/glitch/components/timeline_hint';
import AccountContainer from 'flavours/glitch/containers/account_container';

2
app/javascript/flavours/glitch/features/following/index.jsx
View File

@ -14,7 +14,7 @@ import {
fetchFollowing,
expandFollowing,
} 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 { TimelineHint } from 'flavours/glitch/components/timeline_hint';
import AccountContainer from 'flavours/glitch/containers/account_container';

2
app/javascript/flavours/glitch/features/list_timeline/index.jsx
View File

@ -18,7 +18,7 @@ import { expandListTimeline } from 'flavours/glitch/actions/timelines';
import Column from 'flavours/glitch/components/column';
import ColumnHeader from 'flavours/glitch/components/column_header';
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 BundleColumnError from 'flavours/glitch/features/ui/components/bundle_column_error';
import StatusListContainer from 'flavours/glitch/features/ui/containers/status_list_container';

2
app/javascript/flavours/glitch/features/lists/index.jsx
View File

@ -11,7 +11,7 @@ import { createSelector } from 'reselect';
import { fetchLists } from 'flavours/glitch/actions/lists';
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 Column from 'flavours/glitch/features/ui/components/column';
import ColumnLink from 'flavours/glitch/features/ui/components/column_link';

2
app/javascript/flavours/glitch/features/mutes/index.jsx
View File

@ -12,7 +12,7 @@ import { debounce } from 'lodash';
import { fetchMutes, expandMutes } from 'flavours/glitch/actions/mutes';
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 AccountContainer from 'flavours/glitch/containers/account_container';
import Column from 'flavours/glitch/features/ui/components/column';

2
app/javascript/flavours/glitch/features/reblogs/index.jsx
View File

@ -11,7 +11,7 @@ import { connect } from 'react-redux';
import { fetchReblogs } from 'flavours/glitch/actions/interactions';
import ColumnHeader from 'flavours/glitch/components/column_header';
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 AccountContainer from 'flavours/glitch/containers/account_container';
import Column from 'flavours/glitch/features/ui/components/column';

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

@ -8,7 +8,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux';
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';

2
app/javascript/flavours/glitch/features/status/index.jsx
View File

@ -46,7 +46,7 @@ import {
undoStatusTranslation,
} from 'flavours/glitch/actions/statuses';
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 ScrollContainer from 'flavours/glitch/containers/scroll_container';
import StatusContainer from 'flavours/glitch/containers/status_container';

2
app/javascript/flavours/glitch/features/ui/components/modal_loading.jsx
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 />
// (make sure they have the same dimensions)