ios app
This commit is contained in:
490
argon-pro-react-native/screens/Elements.js
Normal file
490
argon-pro-react-native/screens/Elements.js
Normal file
@@ -0,0 +1,490 @@
|
||||
import React from "react";
|
||||
import {
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Dimensions,
|
||||
TouchableOpacity
|
||||
} from "react-native";
|
||||
// Galio components
|
||||
import { Block, Text, Button as GaButton, theme } from "galio-framework";
|
||||
// Argon themed components
|
||||
import { argonTheme, tabs } from "../constants/";
|
||||
import { Button, Select, Icon, Input, Header, Switch } from "../components/";
|
||||
|
||||
const { width } = Dimensions.get("screen");
|
||||
|
||||
class Elements extends React.Component {
|
||||
state = {
|
||||
"switch-1": true,
|
||||
"switch-2": false
|
||||
};
|
||||
|
||||
toggleSwitch = switchId =>
|
||||
this.setState({ [switchId]: !this.state[switchId] });
|
||||
|
||||
renderButtons = () => {
|
||||
return (
|
||||
<Block flex>
|
||||
<Text size={16} style={styles.title}>
|
||||
Buttons
|
||||
</Text>
|
||||
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
|
||||
<Block center>
|
||||
<Button textStyle={{ fontFamily: 'open-sans-bold' }} color="default" style={styles.button}>
|
||||
DEFAULT
|
||||
</Button>
|
||||
</Block>
|
||||
<Block center>
|
||||
<Button
|
||||
color="secondary"
|
||||
textStyle={{ fontFamily: 'open-sans-bold', color: "black" }}
|
||||
style={styles.button}
|
||||
>
|
||||
SECONDARY
|
||||
</Button>
|
||||
</Block>
|
||||
<Block center>
|
||||
<Button textStyle={{ fontFamily: 'open-sans-bold' }} style={styles.button}>PRIMARY</Button>
|
||||
</Block>
|
||||
<Block center>
|
||||
<Button textStyle={{ fontFamily: 'open-sans-bold' }} color="info" style={styles.button}>
|
||||
INFO
|
||||
</Button>
|
||||
</Block>
|
||||
<Block center>
|
||||
<Button textStyle={{ fontFamily: 'open-sans-bold' }} color="success" style={styles.button}>
|
||||
SUCCESS
|
||||
</Button>
|
||||
</Block>
|
||||
<Block center>
|
||||
<Button textStyle={{ fontFamily: 'open-sans-bold' }} color="warning" style={styles.button}>
|
||||
WARNING
|
||||
</Button>
|
||||
</Block>
|
||||
<Block center>
|
||||
<Button textStyle={{ fontFamily: 'open-sans-bold' }} color="error" style={styles.button}>
|
||||
ERROR
|
||||
</Button>
|
||||
</Block>
|
||||
<Block row space="evenly">
|
||||
<Block flex left style={{marginTop: 8}}>
|
||||
<Select
|
||||
defaultIndex={1}
|
||||
options={["01", "02", "03", "04", "05"]}
|
||||
/>
|
||||
</Block>
|
||||
<Block flex center>
|
||||
<Button textStyle={{ fontFamily: 'open-sans-bold', fontSize: 12 }} small center color="default" style={styles.optionsButton}>
|
||||
DELETE
|
||||
</Button>
|
||||
</Block>
|
||||
<Block flex={1.25} right>
|
||||
<Button textStyle={{ fontFamily: 'open-sans-bold', fontSize: 12 }} center color="default" style={styles.optionsButton}>
|
||||
SAVE FOR LATER
|
||||
</Button>
|
||||
</Block>
|
||||
</Block>
|
||||
</Block>
|
||||
</Block>
|
||||
);
|
||||
};
|
||||
|
||||
renderText = () => {
|
||||
return (
|
||||
<Block flex style={styles.group}>
|
||||
<Text size={16} style={styles.title}>
|
||||
Typography
|
||||
</Text>
|
||||
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
|
||||
<Text
|
||||
h1
|
||||
style={{ fontFamily: 'open-sans-regular', marginBottom: theme.SIZES.BASE / 2 }}
|
||||
color={argonTheme.COLORS.DEFAULT}
|
||||
>
|
||||
Heading 1
|
||||
</Text>
|
||||
<Text
|
||||
h2
|
||||
style={{ fontFamily: 'open-sans-regular', marginBottom: theme.SIZES.BASE / 2 }}
|
||||
color={argonTheme.COLORS.DEFAULT}
|
||||
>
|
||||
Heading 2
|
||||
</Text>
|
||||
<Text
|
||||
h3
|
||||
style={{ fontFamily: 'open-sans-regular', marginBottom: theme.SIZES.BASE / 2 }}
|
||||
color={argonTheme.COLORS.DEFAULT}
|
||||
>
|
||||
Heading 3
|
||||
</Text>
|
||||
<Text
|
||||
h4
|
||||
style={{ fontFamily: 'open-sans-regular', marginBottom: theme.SIZES.BASE / 2 }}
|
||||
color={argonTheme.COLORS.DEFAULT}
|
||||
>
|
||||
Heading 4
|
||||
</Text>
|
||||
<Text
|
||||
h5
|
||||
style={{ fontFamily: 'open-sans-regular', marginBottom: theme.SIZES.BASE / 2 }}
|
||||
color={argonTheme.COLORS.DEFAULT}
|
||||
>
|
||||
Heading 5
|
||||
</Text>
|
||||
<Text
|
||||
p
|
||||
style={{ fontFamily: 'open-sans-regular', marginBottom: theme.SIZES.BASE / 2 }}
|
||||
color={argonTheme.COLORS.DEFAULT}
|
||||
>
|
||||
Paragraph
|
||||
</Text>
|
||||
<Text style={{ fontFamily: 'open-sans-regular' }} muted>This is a muted paragraph.</Text>
|
||||
</Block>
|
||||
</Block>
|
||||
);
|
||||
};
|
||||
|
||||
renderInputs = () => {
|
||||
return (
|
||||
<Block flex style={styles.group}>
|
||||
<Text 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 size={16} style={styles.title}>
|
||||
Switches
|
||||
</Text>
|
||||
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
|
||||
<Block
|
||||
row
|
||||
middle
|
||||
space="between"
|
||||
style={{ marginBottom: theme.SIZES.BASE }}
|
||||
>
|
||||
<Text style={{ fontFamily: 'open-sans-regular' }} size={14} color={argonTheme.COLORS.TEXT}>Switch is ON</Text>
|
||||
<Switch
|
||||
value={this.state["switch-1"]}
|
||||
onValueChange={() => this.toggleSwitch("switch-1")}
|
||||
/>
|
||||
</Block>
|
||||
<Block row middle space="between">
|
||||
<Text style={{ fontFamily: 'open-sans-regular' }} size={14} color={argonTheme.COLORS.TEXT}>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 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 style={{ fontFamily: 'open-sans-regular' }} size={14} color={argonTheme.COLORS.TEXT}>Manage Options</Text>
|
||||
<Icon
|
||||
name="chevron-right"
|
||||
family="entypo"
|
||||
style={{ paddingRight: 5 }}
|
||||
/>
|
||||
</Block>
|
||||
</TouchableOpacity>
|
||||
</Block>
|
||||
</Block>
|
||||
</Block>
|
||||
);
|
||||
};
|
||||
|
||||
renderSocial = () => {
|
||||
return (
|
||||
<Block flex style={styles.group}>
|
||||
<Text 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="Font-Awesome"
|
||||
iconColor={theme.COLORS.WHITE}
|
||||
iconSize={theme.SIZES.BASE * 1.625}
|
||||
color={argonTheme.COLORS.FACEBOOK}
|
||||
style={[styles.social, styles.shadow]}
|
||||
/>
|
||||
</Block>
|
||||
<Block flex middle center>
|
||||
<GaButton
|
||||
round
|
||||
onlyIcon
|
||||
shadowless
|
||||
icon="twitter"
|
||||
iconFamily="Font-Awesome"
|
||||
iconColor={theme.COLORS.WHITE}
|
||||
iconSize={theme.SIZES.BASE * 1.625}
|
||||
color={argonTheme.COLORS.TWITTER}
|
||||
style={[styles.social, styles.shadow]}
|
||||
/>
|
||||
</Block>
|
||||
<Block flex middle left>
|
||||
<GaButton
|
||||
round
|
||||
onlyIcon
|
||||
shadowless
|
||||
icon="dribbble"
|
||||
iconFamily="Font-Awesome"
|
||||
iconColor={theme.COLORS.WHITE}
|
||||
iconSize={theme.SIZES.BASE * 1.625}
|
||||
color={argonTheme.COLORS.DRIBBBLE}
|
||||
style={[styles.social, styles.shadow]}
|
||||
/>
|
||||
</Block>
|
||||
</Block>
|
||||
</Block>
|
||||
</Block>
|
||||
);
|
||||
};
|
||||
|
||||
renderNavigation = () => {
|
||||
return (
|
||||
<Block flex style={styles.group}>
|
||||
<Text 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
|
||||
white
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Block flex center>
|
||||
<ScrollView
|
||||
showsVerticalScrollIndicator={false}
|
||||
contentContainerStyle={{ paddingBottom: 30, width }}
|
||||
>
|
||||
{this.renderButtons()}
|
||||
{this.renderText()}
|
||||
{this.renderInputs()}
|
||||
{this.renderSocial()}
|
||||
{this.renderSwitches()}
|
||||
{this.renderNavigation()}
|
||||
{this.renderTableCell()}
|
||||
</ScrollView>
|
||||
</Block>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
title: {
|
||||
fontFamily: 'open-sans-bold',
|
||||
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
|
||||
},
|
||||
social: {
|
||||
width: theme.SIZES.BASE * 3.5,
|
||||
height: theme.SIZES.BASE * 3.5,
|
||||
borderRadius: theme.SIZES.BASE * 1.75,
|
||||
justifyContent: "center"
|
||||
}
|
||||
});
|
||||
|
||||
export default Elements;
|
||||
Reference in New Issue
Block a user