Chore: Evaluate ActivityIndicator - TypeScript (#3914)
* update: `BackgroundContainer` and `ActivityIndicator` * update: return type for `RCActivityIndicator` * update: return type for `BackgroundContainer`
This commit is contained in:
parent
334b1bad7b
commit
38b2b08278
|
@ -1,14 +1,11 @@
|
|||
import React from 'react';
|
||||
import { ActivityIndicator, ActivityIndicatorProps, StyleSheet } from 'react-native';
|
||||
|
||||
import { useTheme } from '../theme';
|
||||
import { themes } from '../constants/colors';
|
||||
|
||||
type TTheme = 'light' | 'dark' | 'black' | string;
|
||||
|
||||
interface IActivityIndicator extends ActivityIndicatorProps {
|
||||
theme?: TTheme;
|
||||
absolute?: boolean;
|
||||
props?: object;
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
|
@ -27,8 +24,11 @@ const styles = StyleSheet.create({
|
|||
}
|
||||
});
|
||||
|
||||
const RCActivityIndicator = ({ theme = 'light', absolute, ...props }: IActivityIndicator) => (
|
||||
const RCActivityIndicator = ({ absolute, ...props }: IActivityIndicator): React.ReactElement => {
|
||||
const { theme } = useTheme();
|
||||
return (
|
||||
<ActivityIndicator style={[styles.indicator, absolute && styles.absolute]} color={themes[theme].auxiliaryText} {...props} />
|
||||
);
|
||||
};
|
||||
|
||||
export default RCActivityIndicator;
|
||||
|
|
|
@ -34,7 +34,7 @@ const Item = ({ item, theme }: IMessageBoxCommandsPreviewItem) => {
|
|||
resizeMode={FastImage.resizeMode.cover}
|
||||
onLoadStart={() => setLoading(true)}
|
||||
onLoad={() => setLoading(false)}>
|
||||
{loading ? <ActivityIndicator theme={theme} /> : null}
|
||||
{loading ? <ActivityIndicator /> : null}
|
||||
</FastImage>
|
||||
) : (
|
||||
<CustomIcon name='attach' size={36} color={themes[theme!].actionTintColor} />
|
||||
|
|
|
@ -116,8 +116,7 @@ export default class RCTextInput extends React.PureComponent<IRCTextInputProps,
|
|||
|
||||
get loading() {
|
||||
const { theme } = this.props;
|
||||
// @ts-ignore
|
||||
return <ActivityIndicator style={[styles.iconContainer, styles.iconRight, { color: themes[theme].bodyText }]} />;
|
||||
return <ActivityIndicator style={[styles.iconContainer, styles.iconRight]} color={themes[theme].bodyText} />;
|
||||
}
|
||||
|
||||
tooglePassword = () => {
|
||||
|
|
|
@ -66,7 +66,7 @@ export const Overflow = ({ element, loading, action, parser, theme }: IOverflow)
|
|||
{!loading ? (
|
||||
<CustomIcon size={18} name='kebab' color={themes[theme].bodyText} />
|
||||
) : (
|
||||
<ActivityIndicator style={styles.loading} theme={theme} />
|
||||
<ActivityIndicator style={styles.loading} />
|
||||
)}
|
||||
</Touchable>
|
||||
<Popover
|
||||
|
|
|
@ -96,7 +96,7 @@ const Button = React.memo(({ loading, paused, onPress, theme }: IButton) => (
|
|||
hitSlop={BUTTON_HIT_SLOP}
|
||||
background={Touchable.SelectableBackgroundBorderless()}>
|
||||
{loading ? (
|
||||
<ActivityIndicator style={[styles.playPauseButton, styles.audioLoading]} theme={theme} />
|
||||
<ActivityIndicator style={[styles.playPauseButton, styles.audioLoading]} />
|
||||
) : (
|
||||
<CustomIcon name={paused ? 'play-filled' : 'pause-filled'} size={36} color={themes[theme].tintColor} />
|
||||
)}
|
||||
|
|
|
@ -258,7 +258,7 @@ const Reply = React.memo(
|
|||
styles.backdrop,
|
||||
{ backgroundColor: themes[theme].bannerBackground, opacity: themes[theme].attachmentLoadingOpacity }
|
||||
]}></View>
|
||||
<RCActivityIndicator theme={theme} />
|
||||
<RCActivityIndicator />
|
||||
</View>
|
||||
) : null}
|
||||
</View>
|
||||
|
|
|
@ -77,11 +77,7 @@ const Video = React.memo(
|
|||
onPress={onPress}
|
||||
style={[styles.button, { backgroundColor: themes[theme].videoBackground }]}
|
||||
background={Touchable.Ripple(themes[theme].bannerBackground)}>
|
||||
{loading ? (
|
||||
<RCActivityIndicator theme={theme} />
|
||||
) : (
|
||||
<CustomIcon name='play-filled' size={54} color={themes[theme].buttonText} />
|
||||
)}
|
||||
{loading ? <RCActivityIndicator /> : <CustomIcon name='play-filled' size={54} color={themes[theme].buttonText} />}
|
||||
</Touchable>
|
||||
<Markdown
|
||||
msg={file.description}
|
||||
|
|
|
@ -192,7 +192,7 @@ class AttachmentView extends React.Component<IAttachmentViewProps, IAttachmentVi
|
|||
<View style={[styles.container, { backgroundColor: themes[theme].backgroundColor }]}>
|
||||
<StatusBar barStyle='light-content' backgroundColor={themes[theme].previewBackground} />
|
||||
{content}
|
||||
{loading ? <RCActivityIndicator absolute size='large' theme={theme} /> : null}
|
||||
{loading ? <RCActivityIndicator absolute size='large' /> : null}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -175,7 +175,7 @@ class AuthenticationWebView extends React.PureComponent<IAuthenticationWebView,
|
|||
|
||||
render() {
|
||||
const { loading } = this.state;
|
||||
const { route, theme } = this.props;
|
||||
const { route } = this.props;
|
||||
const { url, authType } = route.params;
|
||||
const isIframe = authType === 'iframe';
|
||||
|
||||
|
@ -196,7 +196,7 @@ class AuthenticationWebView extends React.PureComponent<IAuthenticationWebView,
|
|||
this.setState({ loading: false });
|
||||
}}
|
||||
/>
|
||||
{loading ? <ActivityIndicator size='large' theme={theme} absolute /> : null}
|
||||
{loading ? <ActivityIndicator size='large' absolute /> : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -353,7 +353,7 @@ const CannedResponsesListView = ({ navigation, route }: ICannedResponsesListView
|
|||
onEndReached={onEndReached}
|
||||
onEndReachedThreshold={0.5}
|
||||
ItemSeparatorComponent={List.Separator}
|
||||
ListFooterComponent={loading ? <ActivityIndicator theme={theme} /> : null}
|
||||
ListFooterComponent={loading ? <ActivityIndicator /> : null}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -292,7 +292,7 @@ class DirectoryView extends React.Component<IDirectoryViewProps, any> {
|
|||
renderItem={this.renderItem}
|
||||
ItemSeparatorComponent={List.Separator}
|
||||
keyboardShouldPersistTaps='always'
|
||||
ListFooterComponent={loading ? <ActivityIndicator theme={theme} /> : null}
|
||||
ListFooterComponent={loading ? <ActivityIndicator /> : null}
|
||||
onEndReached={() => this.load({})}
|
||||
/>
|
||||
{showOptionsDropdown ? (
|
||||
|
|
|
@ -198,7 +198,7 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): JSX.Elem
|
|||
removeClippedSubviews={isIOS}
|
||||
onEndReached={() => (isSearching ? searchTotal : total) > API_FETCH_COUNT ?? load()}
|
||||
ItemSeparatorComponent={List.Separator}
|
||||
ListFooterComponent={loading ? <ActivityIndicator theme={theme} /> : null}
|
||||
ListFooterComponent={loading ? <ActivityIndicator /> : null}
|
||||
scrollIndicatorInsets={{ right: 1 }}
|
||||
/>
|
||||
</SafeAreaView>
|
||||
|
|
|
@ -117,7 +117,7 @@ class JitsiMeetView extends React.Component<IJitsiMeetViewProps, IJitsiMeetViewS
|
|||
|
||||
render() {
|
||||
const { userInfo, loading } = this.state;
|
||||
const { route, theme } = this.props;
|
||||
const { route } = this.props;
|
||||
const onlyAudio = route.params?.onlyAudio ?? false;
|
||||
const options = isAndroid ? { url: this.url, userInfo, audioOnly: onlyAudio } : null;
|
||||
return (
|
||||
|
@ -129,7 +129,7 @@ class JitsiMeetView extends React.Component<IJitsiMeetViewProps, IJitsiMeetViewS
|
|||
style={StyleSheet.absoluteFill}
|
||||
options={options}
|
||||
/>
|
||||
{loading ? <ActivityIndicator theme={theme} /> : null}
|
||||
{loading ? <ActivityIndicator /> : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -369,7 +369,7 @@ class MessagesView extends React.Component<IMessagesViewProps, any> {
|
|||
style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]}
|
||||
keyExtractor={item => item._id}
|
||||
onEndReached={this.load}
|
||||
ListFooterComponent={loading ? <ActivityIndicator theme={theme} /> : null}
|
||||
ListFooterComponent={loading ? <ActivityIndicator /> : null}
|
||||
/>
|
||||
</SafeAreaView>
|
||||
);
|
||||
|
|
|
@ -277,7 +277,7 @@ class ModalBlockView extends React.Component<IModalBlockViewProps, IModalBlockVi
|
|||
}
|
||||
)}
|
||||
</View>
|
||||
{loading ? <ActivityIndicator absolute size='large' theme={theme} /> : null}
|
||||
{loading ? <ActivityIndicator absolute size='large' /> : null}
|
||||
</KeyboardAwareScrollView>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -636,7 +636,7 @@ class RoomMembersView extends React.Component<IRoomMembersViewProps, IRoomMember
|
|||
ListHeaderComponent={this.renderSearchBar}
|
||||
ListFooterComponent={() => {
|
||||
if (isLoading) {
|
||||
return <ActivityIndicator theme={theme} />;
|
||||
return <ActivityIndicator />;
|
||||
}
|
||||
return null;
|
||||
}}
|
||||
|
|
|
@ -319,9 +319,9 @@ class ListContainer extends React.Component<IListContainerProps, IListContainerS
|
|||
};
|
||||
|
||||
renderFooter = () => {
|
||||
const { rid, theme, loading } = this.props;
|
||||
const { rid, loading } = this.props;
|
||||
if (loading && rid) {
|
||||
return <ActivityIndicator theme={theme} />;
|
||||
return <ActivityIndicator />;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
|
|
@ -1000,7 +1000,7 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
|
|||
const height = displayMode === DisplayMode.Condensed ? ROW_HEIGHT_CONDENSED : ROW_HEIGHT;
|
||||
|
||||
if (loading) {
|
||||
return <ActivityIndicator theme={theme} />;
|
||||
return <ActivityIndicator />;
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
|
@ -291,7 +291,7 @@ class SearchMessagesView extends React.Component<ISearchMessagesViewProps, ISear
|
|||
style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]}
|
||||
keyExtractor={item => item._id}
|
||||
onEndReached={this.onEndReached}
|
||||
ListFooterComponent={loading ? <ActivityIndicator theme={theme} /> : null}
|
||||
ListFooterComponent={loading ? <ActivityIndicator /> : null}
|
||||
onEndReachedThreshold={0.5}
|
||||
removeClippedSubviews={isIOS}
|
||||
{...scrollPersistTaps}
|
||||
|
|
|
@ -450,7 +450,7 @@ class ShareListView extends React.Component<IShareListViewProps, IState> {
|
|||
const { theme } = this.props;
|
||||
|
||||
if (loading) {
|
||||
return <ActivityIndicator theme={theme} />;
|
||||
return <ActivityIndicator />;
|
||||
}
|
||||
|
||||
if (needsPermission) {
|
||||
|
|
|
@ -540,9 +540,8 @@ class TeamChannelsView extends React.Component<ITeamChannelsViewProps, ITeamChan
|
|||
|
||||
renderFooter = () => {
|
||||
const { loadingMore } = this.state;
|
||||
const { theme } = this.props;
|
||||
if (loadingMore) {
|
||||
return <ActivityIndicator theme={theme} />;
|
||||
return <ActivityIndicator />;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
|
|
@ -524,7 +524,7 @@ class ThreadMessagesView extends React.Component<IThreadMessagesViewProps, IThre
|
|||
removeClippedSubviews={isIOS}
|
||||
ItemSeparatorComponent={List.Separator}
|
||||
ListHeaderComponent={this.renderHeader}
|
||||
ListFooterComponent={loading ? <ActivityIndicator theme={theme} /> : null}
|
||||
ListFooterComponent={loading ? <ActivityIndicator /> : null}
|
||||
scrollIndicatorInsets={{ right: 1 }} // https://github.com/facebook/react-native/issues/26610#issuecomment-539843444
|
||||
/>
|
||||
);
|
||||
|
|
|
@ -114,7 +114,6 @@ class UserNotificationPreferencesView extends React.Component<
|
|||
};
|
||||
|
||||
render() {
|
||||
const { theme } = this.props;
|
||||
const { loading } = this.state;
|
||||
return (
|
||||
<SafeAreaView testID='user-notification-preference-view'>
|
||||
|
@ -159,7 +158,7 @@ class UserNotificationPreferencesView extends React.Component<
|
|||
</List.Section>
|
||||
</>
|
||||
) : (
|
||||
<ActivityIndicator theme={theme} />
|
||||
<ActivityIndicator />
|
||||
)}
|
||||
</List.Container>
|
||||
</SafeAreaView>
|
||||
|
|
Loading…
Reference in New Issue