verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

Chore: Evaluate ActivityIndicator - TypeScript (#3914) 

* update: `BackgroundContainer` and `ActivityIndicator`

* update: return type for `RCActivityIndicator`

* update: return type for `BackgroundContainer`
This commit is contained in:
Gerzon Z 2022-03-17 22:37:10 -04:00 committed by GitHub
parent 334b1bad7b
commit 38b2b08278
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 32 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/containers/ActivityIndicator.tsx
View File

@ -1,14 +1,11 @@
import React from 'react'; import React from 'react';
import { ActivityIndicator, ActivityIndicatorProps, StyleSheet } from 'react-native'; import { ActivityIndicator, ActivityIndicatorProps, StyleSheet } from 'react-native';
import { useTheme } from '../theme';
import { themes } from '../constants/colors'; import { themes } from '../constants/colors';
type TTheme = 'light' | 'dark' | 'black' | string;
interface IActivityIndicator extends ActivityIndicatorProps { interface IActivityIndicator extends ActivityIndicatorProps {
theme?: TTheme;
absolute?: boolean; absolute?: boolean;
props?: object;
} }
const styles = StyleSheet.create({ 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 => {
<ActivityIndicator style={[styles.indicator, absolute && styles.absolute]} color={themes[theme].auxiliaryText} {...props} /> const { theme } = useTheme();
); return (
<ActivityIndicator style={[styles.indicator, absolute && styles.absolute]} color={themes[theme].auxiliaryText} {...props} />
);
};
export default RCActivityIndicator; export default RCActivityIndicator;

2
app/containers/MessageBox/CommandsPreview/Item.tsx
View File

@ -34,7 +34,7 @@ const Item = ({ item, theme }: IMessageBoxCommandsPreviewItem) => {
resizeMode={FastImage.resizeMode.cover} resizeMode={FastImage.resizeMode.cover}
onLoadStart={() => setLoading(true)} onLoadStart={() => setLoading(true)}
onLoad={() => setLoading(false)}> onLoad={() => setLoading(false)}>
{loading ? <ActivityIndicator theme={theme} /> : null} {loading ? <ActivityIndicator /> : null}
</FastImage> </FastImage>
) : ( ) : (
<CustomIcon name='attach' size={36} color={themes[theme!].actionTintColor} /> <CustomIcon name='attach' size={36} color={themes[theme!].actionTintColor} />

3
app/containers/TextInput.tsx
View File

@ -116,8 +116,7 @@ export default class RCTextInput extends React.PureComponent<IRCTextInputProps,
get loading() { get loading() {
const { theme } = this.props; 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 = () => { tooglePassword = () => {

2
app/containers/UIKit/Overflow.tsx
View File

@ -66,7 +66,7 @@ export const Overflow = ({ element, loading, action, parser, theme }: IOverflow)
{!loading ? ( {!loading ? (
<CustomIcon size={18} name='kebab' color={themes[theme].bodyText} /> <CustomIcon size={18} name='kebab' color={themes[theme].bodyText} />
) : ( ) : (
<ActivityIndicator style={styles.loading} theme={theme} /> <ActivityIndicator style={styles.loading} />
)} )}
</Touchable> </Touchable>
<Popover <Popover

2
app/containers/message/Audio.tsx
View File

@ -96,7 +96,7 @@ const Button = React.memo(({ loading, paused, onPress, theme }: IButton) => (
hitSlop={BUTTON_HIT_SLOP} hitSlop={BUTTON_HIT_SLOP}
background={Touchable.SelectableBackgroundBorderless()}> background={Touchable.SelectableBackgroundBorderless()}>
{loading ? ( {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} /> <CustomIcon name={paused ? 'play-filled' : 'pause-filled'} size={36} color={themes[theme].tintColor} />
)} )}

2
app/containers/message/Reply.tsx
View File

@ -258,7 +258,7 @@ const Reply = React.memo(
styles.backdrop, styles.backdrop,
{ backgroundColor: themes[theme].bannerBackground, opacity: themes[theme].attachmentLoadingOpacity } { backgroundColor: themes[theme].bannerBackground, opacity: themes[theme].attachmentLoadingOpacity }
]}></View> ]}></View>
<RCActivityIndicator theme={theme} /> <RCActivityIndicator />
</View> </View>
) : null} ) : null}
</View> </View>

6
app/containers/message/Video.tsx
View File

@ -77,11 +77,7 @@ const Video = React.memo(
onPress={onPress} onPress={onPress}
style={[styles.button, { backgroundColor: themes[theme].videoBackground }]} style={[styles.button, { backgroundColor: themes[theme].videoBackground }]}
background={Touchable.Ripple(themes[theme].bannerBackground)}> background={Touchable.Ripple(themes[theme].bannerBackground)}>
{loading ? ( {loading ? <RCActivityIndicator /> : <CustomIcon name='play-filled' size={54} color={themes[theme].buttonText} />}
<RCActivityIndicator theme={theme} />
) : (
<CustomIcon name='play-filled' size={54} color={themes[theme].buttonText} />
)}
</Touchable> </Touchable>
<Markdown <Markdown
msg={file.description} msg={file.description}

2
app/views/AttachmentView.tsx
View File

@ -192,7 +192,7 @@ class AttachmentView extends React.Component<IAttachmentViewProps, IAttachmentVi
<View style={[styles.container, { backgroundColor: themes[theme].backgroundColor }]}> <View style={[styles.container, { backgroundColor: themes[theme].backgroundColor }]}>
<StatusBar barStyle='light-content' backgroundColor={themes[theme].previewBackground} /> <StatusBar barStyle='light-content' backgroundColor={themes[theme].previewBackground} />
{content} {content}
{loading ? <RCActivityIndicator absolute size='large' theme={theme} /> : null} {loading ? <RCActivityIndicator absolute size='large' /> : null}
</View> </View>
); );
} }

4
app/views/AuthenticationWebView.tsx
View File

@ -175,7 +175,7 @@ class AuthenticationWebView extends React.PureComponent<IAuthenticationWebView,
render() { render() {
const { loading } = this.state; const { loading } = this.state;
const { route, theme } = this.props; const { route } = this.props;
const { url, authType } = route.params; const { url, authType } = route.params;
const isIframe = authType === 'iframe'; const isIframe = authType === 'iframe';
@ -196,7 +196,7 @@ class AuthenticationWebView extends React.PureComponent<IAuthenticationWebView,
this.setState({ loading: false }); this.setState({ loading: false });
}} }}
/> />
{loading ? <ActivityIndicator size='large' theme={theme} absolute /> : null} {loading ? <ActivityIndicator size='large' absolute /> : null}
</> </>
); );
} }

2
app/views/CannedResponsesListView/index.tsx
View File

@ -353,7 +353,7 @@ const CannedResponsesListView = ({ navigation, route }: ICannedResponsesListView
onEndReached={onEndReached} onEndReached={onEndReached}
onEndReachedThreshold={0.5} onEndReachedThreshold={0.5}
ItemSeparatorComponent={List.Separator} ItemSeparatorComponent={List.Separator}
ListFooterComponent={loading ? <ActivityIndicator theme={theme} /> : null} ListFooterComponent={loading ? <ActivityIndicator /> : null}
/> />
); );
}; };

2
app/views/DirectoryView/index.tsx
View File

@ -292,7 +292,7 @@ class DirectoryView extends React.Component<IDirectoryViewProps, any> {
renderItem={this.renderItem} renderItem={this.renderItem}
ItemSeparatorComponent={List.Separator} ItemSeparatorComponent={List.Separator}
keyboardShouldPersistTaps='always' keyboardShouldPersistTaps='always'
ListFooterComponent={loading ? <ActivityIndicator theme={theme} /> : null} ListFooterComponent={loading ? <ActivityIndicator /> : null}
onEndReached={() => this.load({})} onEndReached={() => this.load({})}
/> />
{showOptionsDropdown ? ( {showOptionsDropdown ? (

2
app/views/DiscussionsView/index.tsx
View File

@ -198,7 +198,7 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): JSX.Elem
removeClippedSubviews={isIOS} removeClippedSubviews={isIOS}
onEndReached={() => (isSearching ? searchTotal : total) > API_FETCH_COUNT ?? load()} onEndReached={() => (isSearching ? searchTotal : total) > API_FETCH_COUNT ?? load()}
ItemSeparatorComponent={List.Separator} ItemSeparatorComponent={List.Separator}
ListFooterComponent={loading ? <ActivityIndicator theme={theme} /> : null} ListFooterComponent={loading ? <ActivityIndicator /> : null}
scrollIndicatorInsets={{ right: 1 }} scrollIndicatorInsets={{ right: 1 }}
/> />
</SafeAreaView> </SafeAreaView>

4
app/views/JitsiMeetView.tsx
View File

@ -117,7 +117,7 @@ class JitsiMeetView extends React.Component<IJitsiMeetViewProps, IJitsiMeetViewS
render() { render() {
const { userInfo, loading } = this.state; const { userInfo, loading } = this.state;
const { route, theme } = this.props; const { route } = this.props;
const onlyAudio = route.params?.onlyAudio ?? false; const onlyAudio = route.params?.onlyAudio ?? false;
const options = isAndroid ? { url: this.url, userInfo, audioOnly: onlyAudio } : null; const options = isAndroid ? { url: this.url, userInfo, audioOnly: onlyAudio } : null;
return ( return (
@ -129,7 +129,7 @@ class JitsiMeetView extends React.Component<IJitsiMeetViewProps, IJitsiMeetViewS
style={StyleSheet.absoluteFill} style={StyleSheet.absoluteFill}
options={options} options={options}
/> />
{loading ? <ActivityIndicator theme={theme} /> : null} {loading ? <ActivityIndicator /> : null}
</> </>
); );
} }

2
app/views/MessagesView/index.tsx
View File

@ -369,7 +369,7 @@ class MessagesView extends React.Component<IMessagesViewProps, any> {
style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]} style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]}
keyExtractor={item => item._id} keyExtractor={item => item._id}
onEndReached={this.load} onEndReached={this.load}
ListFooterComponent={loading ? <ActivityIndicator theme={theme} /> : null} ListFooterComponent={loading ? <ActivityIndicator /> : null}
/> />
</SafeAreaView> </SafeAreaView>
); );

2
app/views/ModalBlockView.tsx
View File

@ -277,7 +277,7 @@ class ModalBlockView extends React.Component<IModalBlockViewProps, IModalBlockVi
} }
)} )}
</View> </View>
{loading ? <ActivityIndicator absolute size='large' theme={theme} /> : null} {loading ? <ActivityIndicator absolute size='large' /> : null}
</KeyboardAwareScrollView> </KeyboardAwareScrollView>
); );
} }

2
app/views/RoomMembersView/index.tsx
View File

@ -636,7 +636,7 @@ class RoomMembersView extends React.Component<IRoomMembersViewProps, IRoomMember
ListHeaderComponent={this.renderSearchBar} ListHeaderComponent={this.renderSearchBar}
ListFooterComponent={() => { ListFooterComponent={() => {
if (isLoading) { if (isLoading) {
return <ActivityIndicator theme={theme} />; return <ActivityIndicator />;
} }
return null; return null;
}} }}

4
app/views/RoomView/List/index.tsx
View File

@ -319,9 +319,9 @@ class ListContainer extends React.Component<IListContainerProps, IListContainerS
}; };
renderFooter = () => { renderFooter = () => {
const { rid, theme, loading } = this.props; const { rid, loading } = this.props;
if (loading && rid) { if (loading && rid) {
return <ActivityIndicator theme={theme} />; return <ActivityIndicator />;
} }
return null; return null;
}; };

2
app/views/RoomsListView/index.tsx
View File

@ -1000,7 +1000,7 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
const height = displayMode === DisplayMode.Condensed ? ROW_HEIGHT_CONDENSED : ROW_HEIGHT; const height = displayMode === DisplayMode.Condensed ? ROW_HEIGHT_CONDENSED : ROW_HEIGHT;
if (loading) { if (loading) {
return <ActivityIndicator theme={theme} />; return <ActivityIndicator />;
} }
return ( return (

2
app/views/SearchMessagesView/index.tsx
View File

@ -291,7 +291,7 @@ class SearchMessagesView extends React.Component<ISearchMessagesViewProps, ISear
style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]} style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]}
keyExtractor={item => item._id} keyExtractor={item => item._id}
onEndReached={this.onEndReached} onEndReached={this.onEndReached}
ListFooterComponent={loading ? <ActivityIndicator theme={theme} /> : null} ListFooterComponent={loading ? <ActivityIndicator /> : null}
onEndReachedThreshold={0.5} onEndReachedThreshold={0.5}
removeClippedSubviews={isIOS} removeClippedSubviews={isIOS}
{...scrollPersistTaps} {...scrollPersistTaps}

2
app/views/ShareListView/index.tsx
View File

@ -450,7 +450,7 @@ class ShareListView extends React.Component<IShareListViewProps, IState> {
const { theme } = this.props; const { theme } = this.props;
if (loading) { if (loading) {
return <ActivityIndicator theme={theme} />; return <ActivityIndicator />;
} }
if (needsPermission) { if (needsPermission) {

3
app/views/TeamChannelsView.tsx
View File

@ -540,9 +540,8 @@ class TeamChannelsView extends React.Component<ITeamChannelsViewProps, ITeamChan
renderFooter = () => { renderFooter = () => {
const { loadingMore } = this.state; const { loadingMore } = this.state;
const { theme } = this.props;
if (loadingMore) { if (loadingMore) {
return <ActivityIndicator theme={theme} />; return <ActivityIndicator />;
} }
return null; return null;
}; };

2
app/views/ThreadMessagesView/index.tsx
View File

@ -524,7 +524,7 @@ class ThreadMessagesView extends React.Component<IThreadMessagesViewProps, IThre
removeClippedSubviews={isIOS} removeClippedSubviews={isIOS}
ItemSeparatorComponent={List.Separator} ItemSeparatorComponent={List.Separator}
ListHeaderComponent={this.renderHeader} 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 scrollIndicatorInsets={{ right: 1 }} // https://github.com/facebook/react-native/issues/26610#issuecomment-539843444
/> />
); );

3
app/views/UserNotificationPreferencesView/index.tsx
View File

@ -114,7 +114,6 @@ class UserNotificationPreferencesView extends React.Component<
}; };
render() { render() {
const { theme } = this.props;
const { loading } = this.state; const { loading } = this.state;
return ( return (
<SafeAreaView testID='user-notification-preference-view'> <SafeAreaView testID='user-notification-preference-view'>
@ -159,7 +158,7 @@ class UserNotificationPreferencesView extends React.Component<
</List.Section> </List.Section>
</> </>
) : ( ) : (
<ActivityIndicator theme={theme} /> <ActivityIndicator />
)} )}
</List.Container> </List.Container>
</SafeAreaView> </SafeAreaView>