You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
63 lines
1.3 KiB
63 lines
1.3 KiB
import React, { Component } from 'react'
|
|
import {
|
|
Dimensions,
|
|
FlatList,
|
|
StyleSheet,
|
|
Text,
|
|
TouchableOpacity,
|
|
} from 'react-native'
|
|
|
|
const { width, height } = Dimensions.get('screen')
|
|
|
|
export default class PropSlider extends Component {
|
|
render() {
|
|
return (
|
|
<FlatList
|
|
horizontal
|
|
style={styles.list}
|
|
data={this.data()}
|
|
renderItem={this.renderItem}
|
|
contentContainerStyle={styles.content}
|
|
keyExtractor={item => item.name}
|
|
/>
|
|
)
|
|
}
|
|
|
|
data = () =>
|
|
this.props.data.map(
|
|
prop => ((prop.selected = this.props.selectedProp === prop.name), prop)
|
|
)
|
|
|
|
onPress = index => () => this.props.onSelect(this.props.data[index].name)
|
|
|
|
renderItem = ({ item, index }) => (
|
|
<TouchableOpacity
|
|
key={item.name}
|
|
style={[styles.item, this.getStyle(item)]}
|
|
onPress={this.onPress(index)}
|
|
>
|
|
<Text key={item.name}>{item.name}</Text>
|
|
</TouchableOpacity>
|
|
)
|
|
|
|
getStyle = item => ({
|
|
backgroundColor: item.selected ? '#82e584' : '#abcdef',
|
|
width: this.props.width ? this.props.width : 100,
|
|
height: 30,
|
|
})
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
list: {
|
|
width,
|
|
},
|
|
content: {
|
|
padding: 20,
|
|
},
|
|
item: {
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
marginHorizontal: 5,
|
|
borderRadius: 10,
|
|
},
|
|
})
|