77 lines
1.6 KiB
JavaScript
77 lines
1.6 KiB
JavaScript
import React, { useEffect, useCallback, useState } from 'react';
|
|
import { Text, StyleSheet, ActivityIndicator } from 'react-native';
|
|
import PropTypes from 'prop-types';
|
|
|
|
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 }) => {
|
|
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>
|
|
);
|
|
};
|
|
|
|
LoadMore.propTypes = {
|
|
load: PropTypes.func,
|
|
type: PropTypes.string,
|
|
runOnRender: PropTypes.bool
|
|
};
|
|
|
|
export default LoadMore;
|