unused variables removed

This commit is contained in:
palingheorghe
2019-06-05 14:28:42 +03:00
parent 3b3160d546
commit 0d212f4eac
9 changed files with 409 additions and 1096 deletions

2
App.js
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { Platform, StatusBar, Image } from 'react-native';
import { Image } from 'react-native';
import { AppLoading, Asset } from 'expo';
import { Block, GalioProvider } from 'galio-framework';

View File

@@ -1,7 +1,7 @@
import React from "react";
import { StyleSheet } from "react-native";
import PropTypes from 'prop-types';
import { Button, Text, theme } from "galio-framework";
import { Button } from "galio-framework";
import argonTheme from "../constants/Theme";

View File

@@ -6,8 +6,6 @@ import { Block, Text, theme } from 'galio-framework';
import { argonTheme } from '../constants';
const { width } = Dimensions.get('screen');
class Card extends React.Component {
render() {

View File

@@ -10,8 +10,8 @@ const iOSLogo = require("../assets/imgs/ios.png");
const androidLogo = require("../assets/imgs/android.png");
// internet imgs
const ProfilePicture = "https://images.unsplash.com/photo-1519837958954-18e957143de9?fit=crop&w=3034&q=80"
//const ProfilePicture = 'https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?fit=crop&w=1650&q=80';
const ProfilePicture = 'https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?fit=crop&w=1650&q=80';
const Viewed = [
'https://images.unsplash.com/photo-1501601983405-7c7cabaa1581?fit=crop&w=240&q=80',
'https://images.unsplash.com/photo-1543747579-795b9c2c3ada?fit=crop&w=240&q=80',

View File

@@ -1,16 +1,14 @@
import React from "react";
import { Easing, Animated } from "react-native";
import {
createSwitchNavigator,
createStackNavigator,
createDrawerNavigator,
createAppContainer
} from "react-navigation";
import { Block, Text } from "galio-framework";
import { Block } from "galio-framework";
// screens
import Components from "../screens/Components";
import Home from "../screens/Home";
import Onboarding from "../screens/Onboarding";
import Pro from "../screens/Pro";

801
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -1,676 +0,0 @@
import React from "react";
import {
ScrollView,
StyleSheet,
TouchableOpacity,
TouchableWithoutFeedback,
Image,
ImageBackground,
Dimensions
} from "react-native";
//galio
import { Block, Text, Button as GaButton, theme } from "galio-framework";
//argon
import { argonTheme, articles, Images, tabs } from "../constants/";
import { Button, Select, Icon, Input, Header, Card, Switch } from "../components/";
const { width } = Dimensions.get("screen");
const thumbMeasure = (width - 48 - 32) / 3;
const cardWidth = width - theme.SIZES.BASE * 2;
const categories = [
{
title: "Music Album",
description:
"Rock music is a genre of popular music. It developed during and after the 1960s in the United Kingdom.",
image:
"https://images.unsplash.com/photo-1470225620780-dba8ba36b745?fit=crop&w=840&q=80",
price: "$125"
},
{
title: "Events",
description:
"Rock music is a genre of popular music. It developed during and after the 1960s in the United Kingdom.",
image:
"https://images.unsplash.com/photo-1543747579-795b9c2c3ada?fit=crop&w=840&q=80",
price: "$35"
}
];
class Components extends React.Component {
state = {
"switch-1": true,
"switch-2": false
};
toggleSwitch = switchId =>
this.setState({ [switchId]: !this.state[switchId] });
renderProduct = (item, index) => {
const { navigation } = this.props;
return (
<TouchableWithoutFeedback
style={{ zIndex: 3 }}
key={`product-${item.title}`}
onPress={() => navigation.navigate("Pro", { product: item })}
>
<Block center style={styles.productItem}>
<Image
resizeMode="cover"
style={styles.productImage}
source={{ uri: item.image }}
/>
<Block center style={{ paddingHorizontal: theme.SIZES.BASE }}>
<Text
center
size={16}
color={theme.COLORS.MUTED}
style={styles.productPrice}
>
{item.price}
</Text>
<Text center size={34}>
{item.title}
</Text>
<Text
center
size={16}
color={theme.COLORS.MUTED}
style={styles.productDescription}
>
{item.description}
</Text>
</Block>
</Block>
</TouchableWithoutFeedback>
);
};
renderButtons = () => {
return (
<Block flex>
<Text bold size={16} style={styles.title}>
Buttons
</Text>
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
<Block center>
<Button color="default" style={styles.button}>
DEFAULT
</Button>
</Block>
<Block center>
<Button
color="secondary"
textStyle={{ color: "black", fontSize: 12, fontWeight: "700" }}
style={styles.button}
>
SECONDARY
</Button>
</Block>
<Block center>
<Button style={styles.button}>PRIMARY</Button>
</Block>
<Block center>
<Button color="info" style={styles.button}>
INFO
</Button>
</Block>
<Block center>
<Button color="success" style={styles.button}>
SUCCESS
</Button>
</Block>
<Block center>
<Button color="warning" style={styles.button}>
WARNING
</Button>
</Block>
<Block center>
<Button color="error" style={styles.button}>
ERROR
</Button>
</Block>
<Block row space="evenly">
<Block flex left>
<Select
defaultIndex={1}
options={["01", "02", "03", "04", "05"]}
/>
</Block>
<Block flex center>
<Button small center color="default" style={styles.optionsButton}>
DELETE
</Button>
</Block>
<Block flex={1.25} right>
<Button center color="default" style={styles.optionsButton}>
SAVE FOR LATER
</Button>
</Block>
</Block>
</Block>
</Block>
);
};
renderText = () => {
return (
<Block flex style={styles.group}>
<Text bold size={16} style={styles.title}>
Typography
</Text>
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
<Text
h1
style={{ marginBottom: theme.SIZES.BASE / 2 }}
color={argonTheme.COLORS.DEFAULT}
>
Heading 1
</Text>
<Text
h2
style={{ marginBottom: theme.SIZES.BASE / 2 }}
color={argonTheme.COLORS.DEFAULT}
>
Heading 2
</Text>
<Text
h3
style={{ marginBottom: theme.SIZES.BASE / 2 }}
color={argonTheme.COLORS.DEFAULT}
>
Heading 3
</Text>
<Text
h4
style={{ marginBottom: theme.SIZES.BASE / 2 }}
color={argonTheme.COLORS.DEFAULT}
>
Heading 4
</Text>
<Text
h5
style={{ marginBottom: theme.SIZES.BASE / 2 }}
color={argonTheme.COLORS.DEFAULT}
>
Heading 5
</Text>
<Text
p
style={{ marginBottom: theme.SIZES.BASE / 2 }}
color={argonTheme.COLORS.DEFAULT}
>
Paragraph
</Text>
<Text muted>This is a muted paragraph.</Text>
</Block>
</Block>
);
};
renderInputs = () => {
return (
<Block flex style={styles.group}>
<Text bold size={16} style={styles.title}>
Inputs
</Text>
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
<Input
right
placeholder="Regular"
iconContent={<Block />}
/>
</Block>
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
<Input
right
placeholder="Regular Custom"
style={{ borderColor: argonTheme.COLORS.INFO, borderRadius: 4, backgroundColor: '#fff' }}
iconContent={<Block />}
/>
</Block>
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
<Input
placeholder="Icon left"
iconContent={
<Icon
size={11}
style={{ marginRight: 10 }}
color={argonTheme.COLORS.ICON}
name="search-zoom-in"
family="ArgonExtra"
/>
}
/>
</Block>
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
<Input
right
placeholder="Icon Right"
iconContent={
<Icon
size={11}
color={argonTheme.COLORS.ICON}
name="search-zoom-in"
family="ArgonExtra"
/>
}
/>
</Block>
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
<Input
success
right
placeholder="Success"
iconContent={
<Block middle style={{ width: 20, height: 20, borderRadius: 10, backgroundColor: argonTheme.COLORS.INPUT_SUCCESS }}>
<Icon
size={11}
color={argonTheme.COLORS.ICON}
name="g-check"
family="ArgonExtra"
/>
</Block>
}
/>
</Block>
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
<Input
error
right
placeholder="Error Input"
iconContent={
<Block middle style={{ width: 20, height: 20, borderRadius: 10, backgroundColor: argonTheme.COLORS.INPUT_ERROR }}>
<Icon
size={11}
color={argonTheme.COLORS.ICON}
name="support"
family="ArgonExtra"
/>
</Block>
}
/>
</Block>
</Block>
);
};
renderSwitches = () => {
return (
<Block flex style={styles.group}>
<Text bold size={16} style={styles.title}>
Switches
</Text>
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
<Block
row
middle
space="between"
style={{ marginBottom: theme.SIZES.BASE }}
>
<Text size={14}>Switch is ON</Text>
<Switch
value={this.state["switch-1"]}
onValueChange={() => this.toggleSwitch("switch-1")}
/>
</Block>
<Block row middle space="between">
<Text size={14}>Switch is OFF</Text>
<Switch
value={this.state["switch-2"]}
onValueChange={() => this.toggleSwitch("switch-2")}
/>
</Block>
</Block>
</Block>
);
};
renderTableCell = () => {
const { navigation } = this.props;
return (
<Block flex style={styles.group}>
<Text bold size={16} style={styles.title}>
Table Cell
</Text>
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
<Block style={styles.rows}>
<TouchableOpacity onPress={() => navigation.navigate("Pro")}>
<Block row middle space="between" style={{ paddingTop: 7 }}>
<Text size={14}>Manage Options</Text>
<Icon
name="stre-right"
family="Galio"
style={{ paddingRight: 5 }}
/>
</Block>
</TouchableOpacity>
</Block>
</Block>
</Block>
);
};
renderNavigation = () => {
return (
<Block flex style={styles.group}>
<Text bold size={16} style={styles.title}>
Navigation
</Text>
<Block>
<Block style={{ marginBottom: theme.SIZES.BASE }}>
<Header back title="Title" navigation={this.props.navigation} />
</Block>
<Block style={{ marginBottom: theme.SIZES.BASE }}>
<Header back title="Title" navigation={this.props.navigation} bgColor={argonTheme.COLORS.ACTIVE} titleColor="white" iconColor="white" />
</Block>
<Block style={{ marginBottom: theme.SIZES.BASE }}>
<Header search title="Title" navigation={this.props.navigation} />
</Block>
<Block style={{ marginBottom: theme.SIZES.BASE }}>
<Header tabs={tabs.categories} search title="Title" navigation={this.props.navigation} />
</Block>
<Block style={{ marginBottom: theme.SIZES.BASE }}>
<Header
options
search
title="Title"
optionLeft="Option 1"
optionRight="Option 2"
navigation={this.props.navigation}
/>
</Block>
</Block>
</Block>
);
};
renderSocial = () => {
return (
<Block flex style={styles.group}>
<Text bold size={16} style={styles.title}>
Social
</Text>
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
<Block row center space="between">
<Block flex middle right>
<GaButton
round
onlyIcon
shadowless
icon="facebook"
iconFamily="FontAwesome"
iconColor={theme.COLORS.WHITE}
iconSize={theme.SIZES.BASE * 1.625}
color={theme.COLORS.FACEBOOK}
style={styles.social}
/>
</Block>
<Block flex middle center>
<GaButton
round
onlyIcon
shadowless
icon="twitter"
iconFamily="FontAwesome"
iconColor={theme.COLORS.WHITE}
iconSize={theme.SIZES.BASE * 1.625}
color={theme.COLORS.TWITTER}
style={[styles.social, styles.shadow]}
/>
</Block>
<Block flex middle left>
<GaButton
round
onlyIcon
shadowless
icon="dribbble"
iconFamily="FontAwesome"
iconColor={theme.COLORS.WHITE}
iconSize={theme.SIZES.BASE * 1.625}
color={theme.COLORS.DRIBBBLE}
style={[styles.social, styles.shadow]}
/>
</Block>
</Block>
</Block>
</Block>
);
};
renderCards = () => {
return (
<Block flex style={styles.group}>
<Text bold size={16} style={styles.title}>
Cards
</Text>
<Block flex>
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
<Card item={articles[0]} horizontal />
<Block flex row>
<Card
item={articles[1]}
style={{ marginRight: theme.SIZES.BASE }}
/>
<Card item={articles[2]} />
</Block>
<Card item={articles[4]} full />
<Block flex card shadow style={styles.category}>
<ImageBackground
source={{ uri: Images.Products["View article"] }}
style={[
styles.imageBlock,
{ width: width - theme.SIZES.BASE * 2, height: 252 }
]}
imageStyle={{
width: width - theme.SIZES.BASE * 2,
height: 252
}}
>
<Block style={styles.categoryTitle}>
<Text size={18} bold color={theme.COLORS.WHITE}>
View article
</Text>
</Block>
</ImageBackground>
</Block>
</Block>
<Block flex style={{ marginTop: theme.SIZES.BASE / 2 }}>
<ScrollView
horizontal={true}
pagingEnabled={true}
decelerationRate={0}
scrollEventThrottle={16}
snapToAlignment="center"
showsHorizontalScrollIndicator={false}
snapToInterval={cardWidth + theme.SIZES.BASE * 0.375}
contentContainerStyle={{
paddingHorizontal: theme.SIZES.BASE / 2
}}
>
{categories &&
categories.map((item, index) =>
this.renderProduct(item, index)
)}
</ScrollView>
</Block>
</Block>
</Block>
);
};
renderAlbum = () => {
const { navigation } = this.props;
return (
<Block
flex
style={[styles.group, { paddingBottom: theme.SIZES.BASE * 5 }]}
>
<Text bold size={16} style={styles.title}>
Album
</Text>
<Block style={{ marginHorizontal: theme.SIZES.BASE * 2 }}>
<Block flex right>
<Text
size={12}
color={theme.COLORS.PRIMARY}
onPress={() => navigation.navigate("Home")}
>
View All
</Text>
</Block>
<Block
row
space="between"
style={{ marginTop: theme.SIZES.BASE, flexWrap: "wrap" }}
>
{Images.Viewed.map((img, index) => (
<Block key={`viewed-${img}`} style={styles.shadow}>
<Image
resizeMode="cover"
source={{ uri: img }}
style={styles.albumThumb}
/>
</Block>
))}
</Block>
</Block>
</Block>
);
};
render() {
return (
<Block flex center>
<ScrollView
style={styles.components}
showsVerticalScrollIndicator={false}
>
{this.renderButtons()}
{this.renderText()}
{this.renderInputs()}
{this.renderSwitches()}
{this.renderTableCell()}
{this.renderNavigation()}
{this.renderSocial()}
{this.renderCards()}
{this.renderAlbum()}
</ScrollView>
</Block>
);
}
}
const styles = StyleSheet.create({
title: {
paddingBottom: theme.SIZES.BASE,
paddingHorizontal: theme.SIZES.BASE * 2,
marginTop: 44,
color: argonTheme.COLORS.HEADER
},
group: {
paddingTop: theme.SIZES.BASE * 2
},
shadow: {
shadowColor: "black",
shadowOffset: { width: 0, height: 2 },
shadowRadius: 4,
shadowOpacity: 0.2,
elevation: 2
},
button: {
marginBottom: theme.SIZES.BASE,
width: width - theme.SIZES.BASE * 2
},
optionsButton: {
width: "auto",
height: 34,
paddingHorizontal: theme.SIZES.BASE,
paddingVertical: 10
},
input: {
borderBottomWidth: 1
},
inputDefault: {
borderBottomColor: argonTheme.COLORS.PLACEHOLDER
},
inputTheme: {
borderBottomColor: argonTheme.COLORS.PRIMARY
},
inputTheme: {
borderBottomColor: argonTheme.COLORS.PRIMARY
},
inputInfo: {
borderBottomColor: argonTheme.COLORS.INFO
},
inputSuccess: {
borderBottomColor: argonTheme.COLORS.SUCCESS
},
inputWarning: {
borderBottomColor: argonTheme.COLORS.WARNING
},
inputDanger: {
borderBottomColor: argonTheme.COLORS.ERROR
},
imageBlock: {
overflow: "hidden",
borderRadius: 4
},
rows: {
height: theme.SIZES.BASE * 2
},
social: {
width: theme.SIZES.BASE * 3.5,
height: theme.SIZES.BASE * 3.5,
borderRadius: theme.SIZES.BASE * 1.75,
justifyContent: "center"
},
category: {
backgroundColor: theme.COLORS.WHITE,
marginVertical: theme.SIZES.BASE / 2,
borderWidth: 0
},
categoryTitle: {
height: "100%",
paddingHorizontal: theme.SIZES.BASE,
backgroundColor: "rgba(0, 0, 0, 0.5)",
justifyContent: "center",
alignItems: "center"
},
albumThumb: {
borderRadius: 4,
marginVertical: 4,
alignSelf: "center",
width: thumbMeasure,
height: thumbMeasure
},
productItem: {
width: cardWidth - theme.SIZES.BASE * 2,
marginHorizontal: theme.SIZES.BASE,
shadowColor: "black",
shadowOffset: { width: 0, height: 7 },
shadowRadius: 10,
shadowOpacity: 0.2
},
productImage: {
width: cardWidth - theme.SIZES.BASE,
height: cardWidth - theme.SIZES.BASE,
borderRadius: 3
},
productPrice: {
paddingTop: theme.SIZES.BASE,
paddingBottom: theme.SIZES.BASE / 2
},
productDescription: {
paddingTop: theme.SIZES.BASE
// paddingBottom: theme.SIZES.BASE * 2,
}
});
export default Components;

View File

@@ -1,10 +1,9 @@
import React from 'react';
import { StyleSheet, Dimensions, ScrollView } from 'react-native';
import { Button, Block, Text, Input, theme } from 'galio-framework';
import { Block, theme } from 'galio-framework';
import { Icon, Card } from '../components';
import { Card } from '../components';
import articles from '../constants/articles';
import argonTheme from "../constants/Theme";
const { width } = Dimensions.get('screen');
class Home extends React.Component {

View File

@@ -13,15 +13,6 @@ const { height, width } = Dimensions.get("screen");
import argonTheme from "../constants/Theme";
import Images from "../constants/Images";
/*
<Block flex center>
<ImageBackground
source={Images.Onboarding}
style={{ height, width, zIndex: 1 }}
/>
</Block>
*/
class Onboarding extends React.Component {
render() {
const { navigation } = this.props;