ecency/ecency-mobile
1
1
Fork 0
mirror of https://github.com/ecency/ecency-mobile.git synced 2024-12-23 05:13:04 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

created generic mainButton components for login page

Browse Source
This commit is contained in:
ue 2018-09-27 20:30:45 +03:00
parent 0983149796
commit d89c79c781
5 changed files with 141 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/mainButton/index.js Normal file
View File

@ -0,0 +1,3 @@
import MainButton from "./view/mainButtonView";
export { MainButton };

36
src/components/mainButton/view/mainButtonStyles.js Normal file
View File

@ -0,0 +1,36 @@
import EStyleSheet from "react-native-extended-stylesheet";
export default EStyleSheet.create({
wrapper: {},
touchable: {
width: 163,
height: 56,
borderRadius: 30,
backgroundColor: "#357ce6",
flexDirection: "row",
margin: 5,
shadowOffset: {
height: 5,
},
shadowColor: "#5f5f5fbf",
shadowOpacity: 0.3,
},
icon: {
alignSelf: "center",
fontSize: 25,
marginLeft: 20,
},
text: {
color: "white",
fontWeight: "400",
alignSelf: "center",
fontSize: 14,
paddingLeft: 10,
paddingRight: 20,
},
secondText: {
fontWeight: "bold",
},
activityIndicator: { alignSelf: "center", flex: 1 },
body: { flex: 1, flexDirection: "row" },
});

76
src/components/mainButton/view/mainButtonView.js Normal file
View File

@ -0,0 +1,76 @@
import React, { Component, Fragment } from "react";
import { View, Text, TouchableOpacity, ActivityIndicator } from "react-native";
import Ionicons from "react-native-vector-icons/Ionicons";
// Constants
// Components
// Styles
import styles from "./mainButtonStyles";
class MainButton extends Component {
/* Props
* ------------------------------------------------
* @prop { string } isLoading - TODO:
* @prop { string } text - TODO:
* @prop { boolean } secondText - TODO:
* @prop { boolean } iconColor - TODO:
* @prop { boolean } iconName - TODO:
* @prop { boolean } isDisable - TODO:
*
*
*/
constructor(props) {
super(props);
this.state = {};
}
// Component Life Cycles
// Component Functions
_handleOnPress = () => {
const { onPress, isDisable } = this.props;
onPress && !isDisable && onPress();
};
_getBody = () => {
const { isLoading, text, secondText, iconColor, iconName } = this.props;
if (isLoading) {
return (
<ActivityIndicator color="white" style={styles.activityIndicator} />
);
} else if (text) {
return (
<Fragment>
<Ionicons color={iconColor} name={iconName} style={styles.icon} />
<Text style={styles.text}>
{text}
{secondText && <Text style={styles.secondText}>{secondText}</Text>}
</Text>
</Fragment>
);
}
return <Ionicons color={iconColor} name={iconName} style={styles.icon} />;
};
render() {
const { wrapperStyle, isDisable } = this.props;
return (
<View style={wrapperStyle}>
<TouchableOpacity
onPress={() => this._handleOnPress()}
style={styles.touchable}
>
<View style={styles.body}>{this._getBody()}</View>
</TouchableOpacity>
</View>
);
}
}
export default MainButton;

107
src/screens/login/screen/loginScreen.js
View File

@ -19,6 +19,7 @@ import { TabBar } from "../../../components/tabBar";
import { LoginHeader } from "../../../components/loginHeader";
import { FormInput } from "../../../components/formInput";
import { InformationArea } from "../../../components/informationArea";
import { MainButton } from "../../../components/mainButton";
import ScrollableTabView from "@esteemapp/react-native-scrollable-tab-view";
import { Login } from "../../../providers/steem/auth";
@ -199,7 +200,7 @@ class LoginScreen extends Component {
removed upon logout!"
iconName="ios-information-circle-outline"
/>
<View style={{ flexDirection: "row", margin: 30 }}>
<View style={{ flexDirection: "row" }}>
<View style={{ flex: 0.6 }}>
<TouchableOpacity
onPress={goToAuthScreens}
@ -219,101 +220,29 @@ class LoginScreen extends Component {
</Text>
</TouchableOpacity>
</View>
<TouchableOpacity
onPress={this._handleOnPressLogin}
style={{
flex: 0.4,
width: 100,
height: 50,
borderRadius: 30,
backgroundColor: "#357ce6",
flexDirection: "row",
}}
>
{!this.state.isLoading ? (
<View
style={{
flex: 1,
flexDirection: "row",
}}
>
<Ionicons
color="white"
name="md-person"
style={{
alignSelf: "center",
fontSize: 25,
flex: 0.4,
left: 15,
}}
/>
<Text
style={{
color: "white",
fontWeight: "600",
alignSelf: "center",
fontSize: 16,
flex: 0.6,
}}
>
LOGIN
</Text>
</View>
) : (
<ActivityIndicator
color="white"
style={{ alignSelf: "center", flex: 1 }}
/>
)}
</TouchableOpacity>
</View>
<MainButton
wrapperStyle={styles.mainButtonWrapper}
onPress={this._handleOnPressLogin}
iconName="md-person"
iconColor="white"
text="LOGIN"
isLoading={this.state.isLoading}
/>
</View>
<View tabLabel="SteemConnect" style={styles.steemConnectTab}>
<InformationArea
description="If you don't want to keep your password encrypted and saved on your device, you can use Steemconnect."
iconName="ios-information-circle-outline"
/>
<View
style={{
alignItems: "flex-end",
backgroundColor: "#ffffff",
}}
>
<TouchableOpacity
onPress={this.loginwithSc2}
style={{
width: 200,
height: 50,
borderRadius: 30,
backgroundColor: "#357ce6",
flexDirection: "row",
margin: 20,
}}
>
<View style={{ flex: 1, flexDirection: "row" }}>
<Ionicons
color="white"
name="md-person"
style={{
alignSelf: "center",
fontSize: 25,
marginHorizontal: 20,
}}
/>
<Text
style={{
color: "white",
fontWeight: "400",
alignSelf: "center",
fontSize: 16,
}}
>
steem
<Text style={{ fontWeight: "800" }}>connect</Text>
</Text>
</View>
</TouchableOpacity>
</View>
<MainButton
wrapperStyle={styles.mainButtonWrapper}
onPress={this.loginwithSc2}
iconName="md-person"
iconColor="white"
text="steem"
secondText="connect"
/>
</View>
</ScrollableTabView>
</View>

8
src/screens/login/screen/loginStyles.js
View File

@ -40,5 +40,13 @@ export default EStyleSheet.create({
steemConnectTab: {
backgroundColor: "#fff",
minWidth: "$deviceWidth",
flex: 1,
},
mainButtonWrapper: {
position: "absolute",
flex: 0.1,
right: 24,
bottom: 24,
flexDirection: "row",
},
});