Last active
September 17, 2018 09:30
-
-
Save jesusaguilera/84c2feca99b8e0e1358f436a7edd0794 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import { | |
| View, | |
| TouchableOpacity, | |
| } from 'react-native'; | |
| // Styles | |
| import {settings} from '../assets/styles/settings'; | |
| import {baseStyles} from '../assets/styles/base'; | |
| export class Listing extends React.Component { | |
| constructor(props) { | |
| super(props) | |
| this.state = { | |
| } | |
| } | |
| render() { | |
| return ( | |
| <TouchableOpacity | |
| style={[ | |
| baseStyles.listing.item, | |
| this.props.noBorder === true ? baseStyles.listing.itemNoBorder : {}, | |
| this.props.style | |
| ]} | |
| onPress={this.props.onPress} | |
| > | |
| <View style={[ | |
| baseStyles.listing.itemLeft, | |
| this.props.leftVertical === true ? baseStyles.listing.column : {}, | |
| this.props.styleLeft | |
| ]}> | |
| {this.props.left} | |
| </View> | |
| <View style={[ | |
| baseStyles.listing.itemRight, | |
| this.props.rightVertical === true ? baseStyles.listing.column : {}, | |
| this.props.styleRight | |
| ]}> | |
| {this.props.right} | |
| </View> | |
| </TouchableOpacity> | |
| ) | |
| } | |
| } | |
| /* Use | |
| <Listing | |
| style={notifications.item} | |
| left={ | |
| <View style={{flexDirection: 'row'}}> | |
| <View style={[baseStyles.icons.wrapperIcon, baseStyles.listing.wrapperIcon]}> | |
| <SvgGift /> | |
| </View> | |
| <View> | |
| <Text style={[baseStyles.texts.boldSmall, baseStyles.texts.dark]}>Tienes 1 consumición</Text> | |
| <Text style={baseStyles.texts.regularSmall}>El relaciones públicas Jose Manuel te ha invitado a un consumición.</Text> | |
| <Text style={[baseStyles.texts.regularExtraSmall, baseStyles.texts.mute, notifications.time]}>Hace 88 minutos</Text> | |
| </View> | |
| </View> | |
| } | |
| onPress={()=> alert('beep boop!')} | |
| noBorder={true} | |
| /> | |
| */ | |
| /* Styles | |
| // Styles | |
| import {settings} from '../settings'; | |
| import {widthEdgeChecker} from '../helpers/edgeChecker'; | |
| export const listing = { | |
| wrapperList : { | |
| width: '100%', | |
| }, | |
| item : { | |
| borderBottomColor: settings.$greyLight, | |
| borderBottomWidth: 1, | |
| flexDirection: 'row', | |
| alignItems: 'center', | |
| justifyContent: 'space-between', | |
| minHeight: settings.$sizeTwentyFive, | |
| paddingVertical: settings.$sizeFive | |
| }, | |
| itemNoBorder : { | |
| borderBottomWidth: 0, | |
| }, | |
| column : { | |
| flexDirection: 'column', | |
| alignItems: 'flex-start', | |
| justifyContent: 'center' | |
| }, | |
| itemWithAvatar : { | |
| height: settings.$sizeSixteen, | |
| paddingLeft: 46 | |
| }, | |
| itemLeft : { | |
| flex: settings.$sizeThree, | |
| flexDirection: 'row', | |
| alignItems: 'center', | |
| }, | |
| itemRight : { | |
| height: '100%', | |
| flexDirection: 'row', | |
| flex: 1, | |
| justifyContent: 'flex-end', | |
| alignItems: 'center', | |
| }, | |
| alignTop : { | |
| alignItems: 'flex-start' | |
| }, | |
| // Wrapper icon | |
| wrapperIcon : { | |
| marginRight: settings.$sizeNine | |
| }, | |
| // @Wrapper icon | |
| // Avatar | |
| avatar : { | |
| position: 'absolute', | |
| top: settings.$sizeOne, | |
| left: 0 | |
| }, | |
| // @Avatar | |
| // Titles | |
| titled : { | |
| marginBottom: settings.$sizeOne | |
| }, | |
| titleCentered : { | |
| paddingTop: settings.$sizeThree | |
| }, | |
| // @Titles | |
| subtitle : { | |
| maxWidth: 188, | |
| marginTop: settings.$sizeOne | |
| }, | |
| // FlatList separator | |
| flatListSeparator : { | |
| backgroundColor: settings.$greyLight, | |
| width: '100%', | |
| height: 1 | |
| }, | |
| // @FlatList separator | |
| } | |
| */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment