mirror of
https://github.com/ecency/ecency-mobile.git
synced 2024-12-18 10:52:16 +03:00
started to work with new boost screen design
This commit is contained in:
u-e
parent
3b6dfba2f3
commit
d90d7a3d74
@ -1,4 +0,0 @@
|
||||
import BoostItemsList from './view/boostItemsListView';
|
||||
|
||||
export { BoostItemsList };
|
||||
export default BoostItemsList;
|
||||
@ -1,53 +0,0 @@
|
||||
import EStyleSheet from 'react-native-extended-stylesheet';
|
||||
|
||||
export default EStyleSheet.create({
|
||||
pointText: {
|
||||
color: '$primaryBlue',
|
||||
fontSize: 26,
|
||||
marginTop: 24,
|
||||
justifyContent: 'center',
|
||||
alignSelf: 'center',
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
priceText: {
|
||||
color: '$editorButtonColor',
|
||||
fontSize: 22,
|
||||
marginTop: 24,
|
||||
justifyContent: 'center',
|
||||
alignSelf: 'center',
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
placeTitleText: {
|
||||
color: '$primaryBlue',
|
||||
paddingTop: 5,
|
||||
fontSize: 15,
|
||||
textAlign: 'center',
|
||||
},
|
||||
placeIcon: {
|
||||
width: 30,
|
||||
height: 30,
|
||||
},
|
||||
activeIconWrapper: {
|
||||
backgroundColor: '$white',
|
||||
},
|
||||
slide: {
|
||||
borderRadius: 6,
|
||||
flex: 1,
|
||||
shadowOpacity: 0.5,
|
||||
shadowColor: '$shadowColor',
|
||||
paddingBottom: 5,
|
||||
shadowOffset: {
|
||||
height: 3,
|
||||
},
|
||||
},
|
||||
slideContainer: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
width: '$deviceWidth / 2',
|
||||
height: '$deviceHeight / 7',
|
||||
padding: '5%',
|
||||
},
|
||||
slider: {
|
||||
height: '$deviceHeight / 6',
|
||||
},
|
||||
});
|
||||
@ -1,94 +0,0 @@
|
||||
import React, { Component } from 'react';
|
||||
// External Component
|
||||
import { Text, View, Image, Dimensions, TouchableOpacity } from 'react-native';
|
||||
import Carousel from 'react-native-snap-carousel';
|
||||
|
||||
// Styles
|
||||
import styles from './boostItemsListStyles';
|
||||
|
||||
/*
|
||||
* Props Name Description Value
|
||||
*@props --> selectedSlide selected slide index for casousel Number
|
||||
*@props --> handleOnPlaceSelect when place selected its trigger Function
|
||||
*@props --> selectedPlace selected place index for casousel Number
|
||||
*
|
||||
*/
|
||||
const DEVICE_WIDTH = Dimensions.get('window').width;
|
||||
|
||||
class BoostItemsListView extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {};
|
||||
}
|
||||
|
||||
_renderPlaceListItem = ({ item }) => (
|
||||
<TouchableOpacity
|
||||
style={[styles.slide, { backgroundColor: item.color }]}
|
||||
onPress={() => this._handleOnSlidePress(item)}
|
||||
>
|
||||
<View style={styles.slideContainer}>
|
||||
<Text style={styles.pointText}>{item.name}</Text>
|
||||
<View>
|
||||
<Text style={styles.priceText}>{item.price}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
|
||||
_handleOnSlidePress = item => {
|
||||
const { items, navigateToRoom } = this.props;
|
||||
const activeSlideIndex = this._carousel.currentIndex;
|
||||
const isSelectedSlideCentered = items[activeSlideIndex] === item;
|
||||
|
||||
if (isSelectedSlideCentered) {
|
||||
if (navigateToRoom) navigateToRoom(item);
|
||||
} else {
|
||||
const nextSlideIndex = items.findIndex(place => place === item);
|
||||
const lastSlideIndex = items.length - 1;
|
||||
|
||||
if (
|
||||
(activeSlideIndex === lastSlideIndex && nextSlideIndex === 0) ||
|
||||
(activeSlideIndex === 0 && nextSlideIndex === lastSlideIndex)
|
||||
) {
|
||||
if (activeSlideIndex > nextSlideIndex) {
|
||||
this._carousel.snapToNext();
|
||||
} else {
|
||||
this._carousel.snapToPrev();
|
||||
}
|
||||
} else if (activeSlideIndex > nextSlideIndex) {
|
||||
this._carousel.snapToPrev();
|
||||
} else {
|
||||
this._carousel.snapToNext();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { items, onSnapToItem } = this.props;
|
||||
|
||||
return (
|
||||
<View>
|
||||
<Carousel
|
||||
ref={c => {
|
||||
this._carousel = c;
|
||||
}}
|
||||
snapOnAndroid
|
||||
firstItem={3}
|
||||
showsHorizontalScrollIndicator={false}
|
||||
data={items}
|
||||
renderItem={this._renderPlaceListItem}
|
||||
sliderWidth={DEVICE_WIDTH}
|
||||
itemWidth={DEVICE_WIDTH / 2}
|
||||
onSnapToItem={index => onSnapToItem(index)}
|
||||
slideStyle={styles.slide}
|
||||
containerCustomStyle={styles.slider}
|
||||
inactiveSlideOpacity={1}
|
||||
activeOpacity={1}
|
||||
loop
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default BoostItemsListView;
|
||||
@ -296,7 +296,7 @@
|
||||
"next": "NEXT"
|
||||
},
|
||||
"boost": {
|
||||
"title": "Boost",
|
||||
"title": "Get eSteem Points",
|
||||
"buy": "GET ESTM",
|
||||
"next": "NEXT"
|
||||
},
|
||||
|
||||
@ -1,25 +1,28 @@
|
||||
import React, { Component } from 'react';
|
||||
import { injectIntl } from 'react-intl';
|
||||
import { View, Text, ImageBackground } from 'react-native';
|
||||
import { View, Text } from 'react-native';
|
||||
|
||||
// Components
|
||||
import { BasicHeader } from '../../../components/basicHeader';
|
||||
import { BoostItemsList } from '../../../components/boostItemsList';
|
||||
import { MainButton } from '../../../components/mainButton';
|
||||
import { Icon } from '../../../components/icon';
|
||||
|
||||
// Styles
|
||||
import globalStyles from '../../../globalStyles';
|
||||
import styles from './boostScreenStyles';
|
||||
|
||||
const SIDE_MENU_BACKGROUND = require('../../../assets/side_menu_background.png');
|
||||
|
||||
const BOOST_DATA = [
|
||||
{ name: '100 ESTM', color: '#fff', price: '1$', description: 'For beginner users' },
|
||||
{ name: '200 ESTM', color: '#fff', price: '2$', description: 'awesome point' },
|
||||
{ name: '500 ESTM', color: '#fff', price: '5$', description: 'awesome point' },
|
||||
{ name: '1000 ESTM', color: '#fff', price: '10$', description: 'awesome point' },
|
||||
{ name: '5000 ESTM', color: '#fff', price: '50$', description: 'Most using' },
|
||||
{ name: '10000 ESTM', color: '#fff', price: '100$', description: 'Popular choice' },
|
||||
{
|
||||
name: '10000 ESTM',
|
||||
priceText: '100$',
|
||||
price: 100,
|
||||
description: 'BEST DEAL!',
|
||||
},
|
||||
{ name: '5000 ESTM', priceText: '50.00$', price: 50, description: 'POPULAR' },
|
||||
{ name: '1000 ESTM', priceText: '10.00$', price: 10, description: '' },
|
||||
{ name: '500 ESTM', priceText: '5.00$', price: 5, description: '' },
|
||||
{ name: '200 ESTM', priceText: '2.00$', price: 2, description: '' },
|
||||
{ name: '100 ESTM', priceText: '1.00$', price: 1, description: '' },
|
||||
];
|
||||
|
||||
class BoostScreen extends Component {
|
||||
@ -50,32 +53,38 @@ class BoostScreen extends Component {
|
||||
id: 'boost.title',
|
||||
})}
|
||||
/>
|
||||
<ImageBackground source={SIDE_MENU_BACKGROUND} style={styles.descriptionWrapper}>
|
||||
<Text style={styles.title}>{BOOST_DATA[selectedBoost].name}</Text>
|
||||
<Text style={styles.description}>{BOOST_DATA[selectedBoost].description}</Text>
|
||||
</ImageBackground>
|
||||
|
||||
<View style={styles.wrapper}>
|
||||
<BoostItemsList
|
||||
items={BOOST_DATA}
|
||||
handleOnPlaceSelect={item => console.log(item)}
|
||||
selectedSlide={4}
|
||||
onSnapToItem={item => this.setState({ selectedBoost: item })}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.button}>
|
||||
<MainButton
|
||||
onPress={() => alert(selectedBoost)}
|
||||
iconName="rocket"
|
||||
iconType="MaterialCommunityIcons"
|
||||
iconColor="white"
|
||||
text={intl.formatMessage({
|
||||
id: 'boost.buy',
|
||||
})}
|
||||
isDisable={false}
|
||||
isLoading={false}
|
||||
/>
|
||||
</View>
|
||||
{BOOST_DATA.map(item => (
|
||||
<View style={styles.boostLine}>
|
||||
{item.description && (
|
||||
<View style={styles.descriptionWrapper}>
|
||||
<Text>{item.description}</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<MainButton
|
||||
style={styles.button}
|
||||
onPress={() => alert(selectedBoost)}
|
||||
height={50}
|
||||
text={intl.formatMessage({
|
||||
id: 'boost.buy',
|
||||
})}
|
||||
isDisable={false}
|
||||
isLoading={false}
|
||||
>
|
||||
<View style={styles.buttonContent}>
|
||||
<Text style={styles.buttonText}>{item.name}</Text>
|
||||
<View style={styles.buttonIconWrapper}>
|
||||
<Icon name="add" iconType="MaterialIcons" color="#357ce6" size={23} />
|
||||
</View>
|
||||
</View>
|
||||
</MainButton>
|
||||
|
||||
<View style={styles.priceWrapper}>
|
||||
<Text>{item.priceText}</Text>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
@ -5,30 +5,41 @@ export default EStyleSheet.create({
|
||||
flex: 1,
|
||||
position: 'absolute',
|
||||
top: '$deviceHeight / 3',
|
||||
// backgroundColor: '$primaryBlue',
|
||||
},
|
||||
descriptionWrapper: {
|
||||
height: '$deviceHeight / 3.5',
|
||||
flexDirection: 'column',
|
||||
boostLine: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
},
|
||||
title: {
|
||||
color: '$white',
|
||||
fontSize: 26,
|
||||
marginTop: 24,
|
||||
justifyContent: 'center',
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
description: {
|
||||
color: '$white',
|
||||
fontSize: 18,
|
||||
marginTop: 24,
|
||||
justifyContent: 'center',
|
||||
},
|
||||
button: {
|
||||
marginTop: 150,
|
||||
marginVertical: 8,
|
||||
marginVertical: 12,
|
||||
alignSelf: 'center',
|
||||
paddingHorizontal: 24,
|
||||
paddingHorizontal: 18,
|
||||
minWidth: '$deviceWidth / 2.4',
|
||||
},
|
||||
buttonContent: {
|
||||
flexDirection: 'row',
|
||||
},
|
||||
buttonText: {
|
||||
color: '$pureWhite',
|
||||
fontSize: 14,
|
||||
fontWeight: 'bold',
|
||||
alignSelf: 'center',
|
||||
width: 100,
|
||||
},
|
||||
buttonIconWrapper: {
|
||||
backgroundColor: '$pureWhite',
|
||||
borderRadius: 20,
|
||||
width: 24,
|
||||
height: 24,
|
||||
},
|
||||
priceWrapper: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
alignSelf: 'center',
|
||||
},
|
||||
descriptionWrapper: {
|
||||
backgroundColor: '#c10000',
|
||||
width: '$deviceWidth / 3',
|
||||
},
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user