From 6713dc02ec4b0d63c73aa36423fd18be69ea5b8c Mon Sep 17 00:00:00 2001
From: kdxcxs <cx@kdxcxs.com>
Date: Mon, 30 Nov 2020 19:16:52 +0800
Subject: [PATCH] feat: show ActivityIndicator when pending login request

---
 src/ui/YooLoginUI.js | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/ui/YooLoginUI.js b/src/ui/YooLoginUI.js
index 29eb9c9..08d3651 100644
--- a/src/ui/YooLoginUI.js
+++ b/src/ui/YooLoginUI.js
@@ -6,6 +6,7 @@ import {
   TextInput,
   TouchableOpacity,
   Text,
+  ActivityIndicator,
 } from 'react-native';
 
 const styles = StyleSheet.create({
@@ -57,14 +58,33 @@ function LoginInput(props) {
 }
 
 export default class YooLoginUI extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: false,
+    };
+    this.onButtonPress = this.onButtonPress.bind(this);
+  }
+
+  onButtonPress() {
+    if (!this.state.loading) {
+      this.setState({loading: true});
+      this.props.loginCallback();
+    }
+  }
+
   render() {
     return (
       <View style={styles.container}>
         <Image source={require('../../assets/icon.png')} style={styles.logo} />
         <LoginInput type={'username'} />
         <LoginInput type={'password'} />
-        <TouchableOpacity style={styles.button}>
-          <Text style={styles.buttonText}>登录</Text>
+        <TouchableOpacity style={styles.button} onPress={this.onButtonPress}>
+          {this.state.loading ? (
+            <ActivityIndicator size="large" color="#00ff00" />
+          ) : (
+            <Text style={styles.buttonText}>登录</Text>
+          )}
         </TouchableOpacity>
       </View>
     );