65 lines
1.6 KiB
TypeScript
65 lines
1.6 KiB
TypeScript
import React, { useCallback, useEffect, useState } from 'react';
|
|
import { ActivityIndicator, StyleSheet, Text } from 'react-native';
|
|
|
|
import { themes } from '../../../constants/colors';
|
|
import { MESSAGE_TYPE_LOAD_NEXT_CHUNK, MESSAGE_TYPE_LOAD_PREVIOUS_CHUNK } from '../../../constants/messageTypeLoad';
|
|
import { useTheme } from '../../../theme';
|
|
import Touch from '../../../utils/touch';
|
|
import sharedStyles from '../../Styles';
|
|
import I18n from '../../../i18n';
|
|
|
|
const styles = StyleSheet.create({
|
|
button: {
|
|
paddingVertical: 16,
|
|
alignItems: 'center',
|
|
justifyContent: 'center'
|
|
},
|
|
text: {
|
|
fontSize: 16,
|
|
...sharedStyles.textMedium
|
|
}
|
|
});
|
|
|
|
const LoadMore = ({ load, type, runOnRender }: { load: Function; type: string; runOnRender: boolean }): React.ReactElement => {
|
|
const { theme } = useTheme();
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const handleLoad = useCallback(async () => {
|
|
try {
|
|
if (loading) {
|
|
return;
|
|
}
|
|
setLoading(true);
|
|
await load();
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [loading]);
|
|
|
|
useEffect(() => {
|
|
if (runOnRender) {
|
|
handleLoad();
|
|
}
|
|
}, []);
|
|
|
|
let text = 'Load_More';
|
|
if (type === MESSAGE_TYPE_LOAD_NEXT_CHUNK) {
|
|
text = 'Load_Newer';
|
|
}
|
|
if (type === MESSAGE_TYPE_LOAD_PREVIOUS_CHUNK) {
|
|
text = 'Load_Older';
|
|
}
|
|
|
|
return (
|
|
<Touch onPress={handleLoad} style={styles.button} theme={theme} enabled={!loading}>
|
|
{loading ? (
|
|
<ActivityIndicator color={themes[theme].auxiliaryText} />
|
|
) : (
|
|
<Text style={[styles.text, { color: themes[theme].titleText }]}>{I18n.t(text)}</Text>
|
|
)}
|
|
</Touch>
|
|
);
|
|
};
|
|
|
|
export default LoadMore;
|