Skip to content

refactor: spinner #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 7, 2022
Merged

refactor: spinner #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9a7c6af
refactor: spinner
funnyzak Apr 7, 2022
e613d6f
refactor: webviewer
funnyzak Apr 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 6 additions & 8 deletions src/components/common/Spinner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
import React from 'react'
import { View, StyleProp, ViewStyle, ActivityIndicator, TextStyle } from 'react-native'
import { Text } from './Text'
import { ITheme, useTheme } from '@src/theme'
import { ITheme, SylCommon, useTheme } from '@src/theme'

const Spinner = ({
size = 'large',
style,
text
}: {
size?: number | 'small' | 'large' | undefined
size?: 'small' | 'large' | undefined
style?: StyleProp<ViewStyle>
text?: string
}) => {
const { theme } = useTheme()

return (
<View style={[styles.containerStyle(theme), style]}>
<View style={[SylCommon.Layout.fill, styles.containerStyle(theme), style]}>
<ActivityIndicator size={size} color={theme.colors.secondary} />
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
<Text adjustsFontSizeToFit={true} style={styles.textStyle(theme)}>
{text}
</Text>
Expand All @@ -30,14 +30,12 @@ export { Spinner }

const styles = {
containerStyle: (_theme: ITheme): ViewStyle => ({
flex: 1,
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column'
}),
textStyle: (_theme: ITheme): TextStyle => ({
..._theme.typography.captionText,
marginTop: _theme.spacing.small,
color: _theme.colors.secondary
..._theme.typography.bodyText,
marginTop: _theme.spacing.small
})
}
5 changes: 3 additions & 2 deletions src/components/loading/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,13 @@ import { ActivityIndicator, View } from 'react-native'

interface IProps {
visible: boolean
size?: number
}

const LoadingComponent = ({ visible }: IProps) => {
const LoadingComponent = ({ visible, size = 70 }: IProps) => {
const { theme } = useTheme()

return <View>{visible && <ActivityIndicator color={theme.colors.secondary} size={48} />}</View>
return <View>{visible && <ActivityIndicator color={theme.colors.secondary} size={size} />}</View>
}

const Loading = React.memo(LoadingComponent)
Expand Down
7 changes: 4 additions & 3 deletions src/screens/common/WebLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ const WebLink = ({ route, navigation }: ScreenProps) => {
const [loading, setLoading] = React.useState(true)

useEffect(() => {
navigation.setOptions({ title: translate('placeholder.loading') })
if (loading) {
navigation.setOptions({ title: translate('placeholder.loading') })
}
}, [])

useLayoutEffect(() => {
Expand All @@ -32,7 +34,7 @@ const WebLink = ({ route, navigation }: ScreenProps) => {

return (
<View style={[SylCommon.Layout.fill, SylCommon.View.background(theme)]}>
{loading && <Spinner style={{ height: '100%', marginTop: '50%', marginBottom: 10000 }} />}
{loading && <Spinner text="努力载入中..." />}
<WebView
originWhitelist={['*']}
source={{ uri: route.params.url }}
Expand All @@ -45,7 +47,6 @@ const WebLink = ({ route, navigation }: ScreenProps) => {
console.warn('WebView error: ', nativeEvent)
}}
onLoadEnd={(syntheticEvent) => {
// update component to be aware of loading status
const { nativeEvent } = syntheticEvent
setLoading(false)

Expand Down