488 lines
13 KiB
JavaScript
488 lines
13 KiB
JavaScript
// Galio components
|
|
import { Block, Button as GaButton, Text, theme } from "galio-framework";
|
|
import { Button, Header, Icon, Input, Select, Switch } from "../components/";
|
|
import {
|
|
Dimensions,
|
|
ScrollView,
|
|
StyleSheet,
|
|
TouchableOpacity,
|
|
} from "react-native";
|
|
// Argon themed components
|
|
import { argonTheme, tabs } from "../constants/";
|
|
|
|
import React from "react";
|
|
|
|
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 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 style={{ marginTop: 8 }}>
|
|
<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="chevron-right"
|
|
family="entypo"
|
|
style={{ paddingRight: 5 }}
|
|
/>
|
|
</Block>
|
|
</TouchableOpacity>
|
|
</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="Font-Awesome"
|
|
iconColor={theme.COLORS.WHITE}
|
|
iconSize={theme.SIZES.BASE * 1.625}
|
|
color={theme.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={theme.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={theme.COLORS.DRIBBBLE}
|
|
style={[styles.social, styles.shadow]}
|
|
/>
|
|
</Block>
|
|
</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
|
|
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: {
|
|
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,
|
|
},
|
|
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;
|