Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sponsors Page #95

Open
wants to merge 7 commits into
base: develop
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 6 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 102 additions & 0 deletions src/components/CopyTextButton/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
import React, { Component, PropTypes } from 'react';
// dependencies
import { View, Text, TouchableHighlight, StyleSheet, Clipboard , Animated, Easing } from 'react-native';
import CustomText from '../CustomText/CustomText';

import * as Colors from '../../style/vars/colors';

class CopyTextButton extends Component {

constructor(props) {
super(props);
this.state = {
copied: new Animated.Value(0)
};
}

onCopyToClipboard(text) {
Clipboard.setString(text);
this.animateAlert();
}

animateAlert() {
const endVal = (this.state.copied._value === 0) ? 1 : 0;
Animated.timing(
this.state.copied,
{
toValue: endVal,
duration: 200,
easing: Easing.inout
}
).start(() => {
if (this.state.copied._value === 1) {
setTimeout(() => this.animateAlert(), 1000);
}
});
}

render() {
const {text, buttonStyle, textStyle} = this.props;

const transition = this.state.copied.interpolate({
inputRange: [0, 1],
outputRange: [60, 45]
});

return (
<View>
<TouchableHighlight
style={[Styles.initialButton, buttonStyle]}
onPress={() => this.onCopyToClipboard(text)}>
<View>
<CustomText textStyle={[Styles.initialText, textStyle]}>{text}</CustomText>
</View>
</TouchableHighlight>

<Animated.View
style={[Styles.copyAlert, {opacity: this.state.copied, top: transition}]}>
<CustomText textStyle={[Styles.initialText, Styles.copyAlertText]}>Copied to Clipboard</CustomText>
</Animated.View>
</View>
);
}
}

const Styles = StyleSheet.create({
initialButton: {
padding: 10,
paddingLeft: 15,
paddingRight: 15,
backgroundColor: Colors.darkMaroon
},
initialText: {
fontWeight: '600',
textAlign: 'center'
},
copyAlert: {
position: 'absolute',
backgroundColor: "#000",
borderRadius: 15,
padding: 8,
paddingLeft: 30,
paddingRight: 30,
overflow: 'hidden',
alignSelf: 'center'
},
copyAlertText: {
fontWeight: '400',
fontSize: 12
}
})

CopyTextButton.propTypes = {
text: PropTypes.string,
/*
Styling props
=============
buttonStyle: Button container Styling
textStyle: title Styling
*/
};

export default CopyTextButton;
3 changes: 2 additions & 1 deletion src/components/Link/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,12 @@ import { View, Text, ScrollView, Linking, StyleSheet } from 'react-native';
import { yellow, redSecondary } from '../../style/vars/colors';

// Link component
const Link = ({url, name, textStyle}) => (
const Link = ({url, name, textStyle, children}) => (
<Text
style={[Styles.link, textStyle]}
onPress={()=> Linking.openURL(url)}>
{name}
{children}
</Text>
);

Expand Down
11 changes: 11 additions & 0 deletions src/components/NavigationBar/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -144,3 +144,14 @@ export const SupportNavHeader = (leftComponents = [], rightComponents = []) => {
headerStyle: headerStyles.common
};
};

export const SponsorsNavHeader = (leftComponents = [], rightComponents = []) => {
return {
drawerLabel: 'Sponsors / Deals',
title: "Sponsors / Deals",
headerTitle: renderTitle("Sponsors / Deals"),
headerLeft: renderSide(leftComponents, "left"),
headerRight: renderSide(rightComponents, "right"),
headerStyle: headerStyles.common
};
};
2 changes: 1 addition & 1 deletion src/components/SearchBar/SearchBar.js
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ const Styles = StyleSheet.create({
paddingRight: styleVar.sidePadding,
shadowColor: '#000',
shadowOffset: {width: 1, height: 1},
shadowOpacity: 0.8,
shadowOpacity: 0.5,
shadowRadius: 2,
zIndex: 50
},
Expand Down
2 changes: 1 addition & 1 deletion src/containers/About/content.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"Nick 'OffInBed' DeJesus - Frontend Developer and Creator",
"Ray Mills - Sexy User Experience Designer",
"Stephen 'Speed Kicks' Stafford - Divine Backend Developer",
"Danny Nguyen - Frontend Developer Genius that likes shoes",
"Danny Nguyen - Frontend Developer with an affinity towards hype shoes",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lol

"Quentin Ross - Graphic Artist, Creator of the new logo!",
"Ron Maurice 'Scrub Zilla' Johnson - Enlightened Artist (Character Portraits)",
"Brad Dickason - Backend Support and also the guy that tells everyone to get it together",
Expand Down
2 changes: 0 additions & 2 deletions src/containers/AttackDetails/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,6 @@ import LinearGradient from 'react-native-linear-gradient';
import Styles from './styles';
import * as Colors from '../../style/vars/colors';

import icons from '../../img/icons/';

import { showAttackDetails } from '../../redux/actions/attackDetails';

class AttackDetails extends Component {
Expand Down
5 changes: 3 additions & 2 deletions src/containers/CharacterProfile/styles.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,10 @@ export default Styles = StyleSheet.create({
textAlign: 'center',
fontFamily: 'Exo2-Light',
color: '#f0aeb1',
fontSize: 12,
fontSize: 11,
backgroundColor: Colors.redSecondary,
paddingBottom: 10
paddingBottom: 5,
paddingTop: 5
},
mainContainer: {
flex: 1
Expand Down
5 changes: 5 additions & 0 deletions src/containers/Navigator.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ const AboutNavigator = StackNavigator(Router.AboutRoute, { initialRouteName: "ab
const HelpNavigator = StackNavigator(Router.HelpRoute, { initialRouteName: 'help', headerMode: 'screen' });
const FrameDataFAQNavigator = StackNavigator(Router.FrameDataFAQRoute, { initialRouteName: 'faq', headerMode: 'screen' });
const SupportNavigator = StackNavigator(Router.SupportRoute, { initialRouteName: 'support', headerMode: 'screen'});
const SponsorsNavigator = StackNavigator(Router.SponsorsRoute, { initialRouteName: 'sponsors', headerMode: 'screen'});

const DrawerRoutes = {
Characters: {
Expand All @@ -33,6 +34,10 @@ const DrawerRoutes = {
name: 'About',
screen: AboutNavigator
},
Sponsors: {
name: 'Sponsors / Deals',
screen: SponsorsNavigator
},
Support: {
name: 'Support',
screen: SupportNavigator
Expand Down
11 changes: 8 additions & 3 deletions src/containers/Router.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import CharacterProfile from './CharacterProfile/';
import AttackDetails from './AttackDetails/';
import FrameDataFAQ from './FrameDataFAQ/';
import Support from './Support/';
import Sponsors from './Sponsors/';

const MainRoutes = {
characterSelect: { screen: CharacterSelect },
Expand All @@ -25,10 +26,14 @@ const HelpRoute = {

const FrameDataFAQRoute = {
faq: { screen: FrameDataFAQ }
}
};

const SupportRoute = {
support: { screen: Support}
}
};

const SponsorsRoute = {
sponsors: { screen: Sponsors }
};

export default { MainRoutes, AboutRoute, HelpRoute, FrameDataFAQRoute, SupportRoute };
export default { MainRoutes, AboutRoute, HelpRoute, FrameDataFAQRoute, SupportRoute, SponsorsRoute };
28 changes: 28 additions & 0 deletions src/containers/Sponsors/content.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
{
"page": {
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ante velit, semper quis ante quis, iaculis sollicitudin nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
},
"sponsors": [
{
"name": "Controller Chaos",
"description": "Get some badass skins for your gaming peripherals. Pick something from their wide selection or have something made specifically for you.",
"url": "",
"discountCode": "ABC1234",
"image_id": "controller_chaos"
},
{
"name": "Focus Attack",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ante velit, semper quis ante quis, iaculis sollicitudin nibh.",
"url": "",
"discountCode": "ABC1234",
"image_id": "focus_attack"
},
{
"name": "Qanba",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ante velit, semper quis ante quis, iaculis sollicitudin nibh.",
"url": "",
"discountCode": "ABC1234",
"image_id": "qanba"
}
]
}
57 changes: 57 additions & 0 deletions src/containers/Sponsors/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import React from 'react';
import { View, Text, ScrollView } from 'react-native';
import { Styles } from './styles';
import { SponsorsNavHeader } from '../../components/NavigationBar';
import CustomText from '../../components/CustomText/CustomText';
import LinearGradient from 'react-native-linear-gradient';
import SponsorItem from './sponsorItem';

import * as Colors from '../../style/vars/colors';

// Page and Sponsor Content
import content from './content.json';

class Sponsors extends React.Component {
static navigationOptions = ({navigation}) => {
const headerLeft = [
{
key: "MenuButton",
onPress: () => navigation.navigate('DrawerOpen')
}
];
return SponsorsNavHeader(headerLeft);
};

/**
* @method renderSponsors
* @param {array} sponsors
* @return {<SponsorItems/>}
* Takes in sponsors array and renders out sponsor-item components
*/
renderSponsors(sponsors) {
return (<View>
{
sponsors.map((sponsor, i) => <SponsorItem key={i} {...sponsor} />)
}
</View>)
}

render() {
const {page, sponsors} = content;

return (
<LinearGradient
colors={[Colors.redPrimary, Colors.redSecondary]}
start={{x: 0.5, y: 0.1}} end={{x: 1.0, y: 0.9}}
style={Styles.container}>
<ScrollView style={Styles.scrollContainer}>
<CustomText textStyle={Styles.commonText}>{page.description}</CustomText>
{this.renderSponsors(sponsors)}
<CustomText textStyle={[Styles.commonText, {textAlign: 'center'}]}>___</CustomText>
</ScrollView>
</LinearGradient>
)
}
}

export default Sponsors;
Loading