implemented range selector component

This commit is contained in:
Nouman Tahir 2022-02-14 19:49:09 +05:00
parent e7018569ad
commit dfc874d46f
3 changed files with 80 additions and 4 deletions

View File

@ -43,5 +43,20 @@ export default EStyleSheet.create({
color: '$primaryDarkText',
fontSize: 14,
marginBottom:24,
} as TextStyle,
rangeContainer:{
flexDirection:'row',
alignItems:'center',
justifyContent:'space-between',
borderRadius:32,
} as ViewStyle,
rangeOptionWrapper:{
borderRadius:32,
paddingVertical:16,
paddingHorizontal:24
} as ViewStyle,
textRange:{
fontSize:18,
} as TextStyle
});

View File

@ -10,7 +10,7 @@ export const CoinBasics = () => {
<Text style={styles.textCoinTitle}>HIVE</Text>
</View>
<Text style={styles.textHeaderChange}>Change <Text style={styles.textPositive}>+10.13</Text></Text>
<Text style={styles.textHeaderChange}>Change <Text style={styles.textPositive}>+10.13%</Text></Text>
</>
)

View File

@ -1,11 +1,72 @@
import React from 'react'
import React, { useState } from 'react'
import { View, Text } from 'react-native'
import EStyleSheet from 'react-native-extended-stylesheet'
import { TouchableOpacity } from 'react-native-gesture-handler'
import styles from './children.styles'
interface RangeOption {
label:string;
value:number;
}
export const RangeSelector = () => {
const [selectedRange, setSelectedRange] = useState(1);
const _onSelection = (range:number) => {
console.log('selection', range)
setSelectedRange(range);
//TODO: implement on range change prop
}
const _renderRangeButtons = FILTERS.map((item:RangeOption)=>(
<TouchableOpacity onPress={()=>_onSelection(item.value)} >
<View style={{
...styles.rangeOptionWrapper,
backgroundColor: EStyleSheet.value(
item.value === selectedRange ?
'$primaryDarkText':'$primaryLightBackground'
)
}}>
<Text style={{
...styles.textRange,
color: EStyleSheet.value(
item.value === selectedRange ?
'$white':'$primaryDarkText'
)
}}>
{item.label}
</Text>
</View>
</TouchableOpacity>
))
return (
<View style={styles.card}>
<Text>Range Selector</Text>
<View style={[styles.card, styles.rangeContainer]}>
{_renderRangeButtons}
</View>
)
}
const FILTERS = [
{
label:'24H',
value:1
},
{
label:'1W',
value:7
},
{
label:'1M',
value:20
},
{
label:'1Y',
value:365
},
{
label:'All',
value:0
},
] as RangeOption[]