Untitled
unknown
plain_text
2 years ago
5.3 kB
6
Indexable
/* eslint-disable react-native/no-inline-styles */ /** * * FeedItem * */ import React, { useRef, useState, useEffect, useMemo } from 'react'; import { Alert, StyleSheet } from 'react-native'; import { Image, Picker, Text, View } from 'react-native-ui-lib'; import Icon from 'react-native-vector-icons/FontAwesome'; import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'; import VectorIcons from 'react-native-vector-icons'; import Ionicons from 'react-native-vector-icons/Ionicons'; import { find, map, filter as _filter } from 'lodash'; import { Colors } from 'react-native-ui-lib'; import DateFormat from '../../rb-components/DateFormat'; import { AllComponents, FeedTag } from './registry'; import { FlipFavorite, GetFavorites } from '../../../api/favorites'; type Props = { title?: string; report: any; company?: any; filter?: Function; component: string; }; const AllTags = _filter(Object.values(FeedTag), i => !isNaN(Number(i))); const FeedItem = ({ title, report, company, component, filter }: Props) => { const picker = useRef(); const { mutate: flipFav, isLoading: isFlipLoading } = FlipFavorite( company?.id, ); const { data: favorites, isLoading: isFavsLoading } = GetFavorites( company?.id, ); const C = AllComponents[component].component; const dTitle = AllComponents[component].title; const icon = AllComponents[component].icon; const isFavorite = find(favorites, i => i === component); const isLoading = isFlipLoading || isFavsLoading; const iconName = "heart"; const IconComponent = iconName in Icon ? Icon : MaterialCommunityIcon; return ( <View flex-1 spread marginV-5 marginH-2> {title || dTitle ? ( <View style={styles.box}> <View style={styles.image}> <IconComponent name={icon} size={45} color={Colors.white} /> </View> <View style={styles.titleContainer}> <Text style={styles.title} body white> {title || dTitle} </Text> </View> </View> ) : null} <View flex-1 backgroundColor={Colors.$backgroundElevatedLight} paddingT-5> <C report={report} company={company} /> </View> <View flex row left spread padding-10 backgroundColor={Colors.$backgroundElevatedLight} style={{ borderTopWidth: 2, borderTopColor: Colors.grey60 }}> <View> <Text text100 grey30 marginL-10> Reported on: </Text> <DateFormat /> </View> <View flex right row> <Icon name={isLoading ? 'refresh' : isFavorite ? 'heart' : 'heart-o'} color={isFavorite ? Colors.red10 : Colors.grey30} style={{ color: isFavorite ? Colors.red10 : Colors.grey30, fontSize: 24, marginRight: 20, }} disabled={isLoading} onPress={() => { // setIsFavorite(!isFavorite); flipFav(component); }} /> <Picker ref={picker} value={[]} useSafeArea enableModalBlur={false} onChange={(items: any) => filter && filter(AllComponents[component], items) } mode={Picker.modes.MULTI} selectionLimit={3} topBarProps={{ doneLabel: 'Filter', useSafeAre: true, containerStyle: {}, includeStatusBar: false, doneButtonProps: { color: Colors.orange40, backgroundColor: Colors.orange40, size: 'small', outlineColor: Colors.orange40, outline: true, }, }} renderPicker={(_value?: any, _label?: string) => { return ( <Ionicons name="filter-outline" style={{ color: Colors.grey30, fontSize: 24, }} /> ); }} trailingAccessory={ <Ionicons name="filter-outline" style={{ color: Colors.grey30, fontSize: 24 }} /> }> {map(AllTags, option => ( <Picker.Item key={option} value={option} label={FeedTag[option]} /> ))} </Picker> </View> </View> </View> ); }; const styles = StyleSheet.create({ feedItem: { flex: 1, borderWidth: 1, borderColor: '#dddddd', // height: hp(80), marginTop: 15, marginBottom: 15, backgroundColor: Colors.White, }, box: { backgroundColor: Colors.orange40, height: 70, flexDirection: 'row', alignItems: 'center', borderRadius: 5, justifyContent: 'space-around', }, imageContainer: { marginRight: 10, }, image: { left: 15, position: 'absolute', }, titleContainer: { alignItems: 'center', justifyContent: 'center', marginLeft: 25, }, title: { fontSize: 21, }, }); export default FeedItem;
Editor is loading...