diff --git a/apps/mobile/src/components/SimpleList/index.js b/apps/mobile/src/components/SimpleList/index.js new file mode 100644 index 000000000..d1689f377 --- /dev/null +++ b/apps/mobile/src/components/SimpleList/index.js @@ -0,0 +1,175 @@ +import React, {useState} from 'react'; +import {FlatList, Platform, RefreshControl, Text, View} from 'react-native'; +import {SIZE, WEIGHT} from '../../common/common'; +import {inputRef} from '../../components/SearchInput'; +import {useTracked} from '../../provider'; +import {ACTIONS} from '../../provider/actions'; +import {eSendEvent} from '../../services/eventManager'; +import {eScrollEvent} from '../../services/events'; + +const SimpleList = ({ + data, + type, + placeholder, + onRefresh, + renderItem, + focused, + refreshing, + placeholderText, +}) => { + const [state, dispatch] = useTracked(); + const {colors, selectionMode} = state; + const searchResults = {...state.searchResults}; + + const _onScroll = event => { + if (!event) return; + let y = event.nativeEvent.contentOffset.y; + + eSendEvent(eScrollEvent, y); + }; + + const _ListFooterComponent = data[0] ? ( + + + - End - + + + ) : null; + + const _ListHeaderComponent_S = + searchResults.type === type && searchResults.results.length > 0 ? ( + + + Search Results for {searchResults.keyword} + + { + inputRef.current?.setNativeProps({ + text: '', + }); + dispatch({ + type: ACTIONS.SEARCH_RESULTS, + results: { + results: [], + type: null, + keyword: null, + }, + }); + }} + style={{ + fontFamily: WEIGHT.regular, + color: colors.errorText, + fontSize: SIZE.xs, + }}> + Clear + + + ) : ( + + ); + + const _ListEmptyComponent = ( + + <> + {placeholder} + + {placeholderText} + + + + ); + + const _listKeyExtractor = (item, index) => + item.dateCreated.toString() + index.toString(); + + return ( + 0 + ? searchResults.results + : data + } + refreshControl={ + + } + keyExtractor={_listKeyExtractor} + ListFooterComponent={_ListFooterComponent} + onScroll={_onScroll} + ListHeaderComponent={_ListHeaderComponent_S} + ListEmptyComponent={_ListEmptyComponent} + contentContainerStyle={{ + width: '100%', + alignSelf: 'center', + minHeight: '100%', + }} + style={{ + height: '100%', + }} + renderItem={renderItem} + /> + ); +}; + +export default SimpleList;