mirror of
https://github.com/ecency/ecency-mobile.git
synced 2025-01-01 18:23:02 +03:00
implemented range selector component
This commit is contained in:
parent
e7018569ad
commit
dfc874d46f
src/screens/coinDetails/children
@ -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
|
||||
});
|
||||
|
@ -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>
|
||||
</>
|
||||
)
|
||||
|
||||
|
@ -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[]
|
||||
|
Loading…
Reference in New Issue
Block a user