render() { const {text, backgroundColor} = this.props; return ( <View style={[styles.container, {backgroundColor}]}> <Text style={styles.cardText}>{text}</Text> </View> ); }
// create a component const LocationCard = ({item, name, text, secondary, cardPress}) => { const themeContainer = { backgroundColor: secondary ? theme.color.secondary : theme.color.primary }; const themeName = { color: secondary ? theme.color.secondaryLight : theme.color.primaryLight }; const themeText = { color: secondary ? '#878787' : theme.color.primaryLight }; return ( <TouchableOpacity style={[styles.container, themeContainer]} onPress={() => cardPress(item)}> <View style={styles.arrowWrapper}> <Image source={secondary ? ArrowBlack : Arrow} style={styles.arrow} /> </View> <Text numberOfLines={1} ellipsizeMode="tail" style={[styles.cardTitle, themeName]}> {name} </Text> <Text style={[styles.cardText, themeText]}>{text}</Text> </TouchableOpacity> ); }
/** * Simplify PromptElement into RichElementSpeech * to easier processing by the compiler * @param {Array<PromptElement>} elements List of PromptElement * to simplify into RichElementSpeech * @return {Array<RichElementSpeech>} */ simplifyPromptElements(elements) { return elements.map((response) => { if (typeof response !== 'string') { return { speech: response.speech || '', displayText: response.displayText, cardText: response.cardText, }; } /** @type {RichElementSpeech} */ const printed = { speech: response, displayText: response.match(/^<audio src=".+?"\/>$/) ? '' : response, }; return printed; }); }
info={props.info.firstOption} totalVotes={props.info.firstOption.votes + props.info.secondOption.votes} /> : <Text style={styles.cardText}>{props.info.firstOption.option}</Text>} </TouchableOpacity> <TouchableOpacity onPress={() => props.hasVoted === false && props.onVote('secondOption', props.info.id)} style={[styles.card, {backgroundColor: '#E71575'}]}> info={props.info.secondOption} totalVotes={props.info.firstOption.votes + props.info.secondOption.votes} /> : <Text style={styles.cardText}>{props.info.secondOption.option}</Text>} </TouchableOpacity> </View>
render() { const { data } = this.props; return ( <div data-qa={data.get('name')} style={[styles.card, styles.offset, styles.activeCard]} onTouchTap={this.handleTouchTap} > <Card style={styles.card}> {this.renderCardMedia(data)} <CardText style={styles.cardText}> {data.get('shortDescription')} </CardText> <CardActions style={styles.cardAction}> <FlatButton containerElement={<Link to={`/book/${data.get('name')}`} />} label="Details" style={styles.flatButton} /> <FlatButton label="Download" style={styles.flatButton} onTouchTap={(event) => event.stopPropagation()} /> </CardActions> </Card> </div> ); }
imageFood:"https://d1nsq2txwd94q7.cloudfront.net/public/files/production/recipes/images/4734/thumb/r_4734_1550829145.jpg", precio:"$100.00"})}> <Text style={style.cardText}>Chicken</Text> <Image style={style.cardImage} source={require('../assets/chicken.jpg')} /> </TouchableOpacity> imageFood:"https://images.squarespace-cdn.com/content/v1/5c54b9347a1fbd277f85fbe6/1549079845173-4ON76ETE3HML6RL4M7FU/ke17ZwdGBToddI8pDm48kJ0lej6MlCqKAUx1EqBpSQQUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8N_N4V1vUb5AoIIIbLZhVYxCRW4BPu10St3TBAUQYVKcsCUlr2_RWyHhBmLwvddopt0kox41Ncyh6WdZCVnnhw9FspE4q2BscMKK5-NBcyqH/pizza.jpg?format=2500w", precio:"$100.00"})}> <Text style={style.cardText}>Pizza</Text> <Image style={style.cardImage} source={require('../assets/pizza.jpg')}/> </TouchableOpacity> imageFood:"https://keyassets-p2.timeincuk.net/wp/prod/wp-content/uploads/sites/53/2016/02/Thai-coconut-rice-recipe.jpg", precio:"$100.00"})}> <Text style={style.cardText}>Thai</Text> <Image style={style.cardImage} source={require('../assets/thai.jpg')}/> </TouchableOpacity>
style={styles.cardText}
</FloatingActionButton> <CardText style={styles.cardText}
render() { const {text, backgroundColor}=this.props; return ( <View style={[styles.cardContainer ,{backgroundColor} ]} > <Text style={styles.cardText} >{text}</Text> </View> ) }