Redesign settings

2023-09-19 03:54:12 +02:00
parent bc13c10f1a
commit 1e504c8982
28 changed files with 1917 additions and 693 deletions
@@ -0,0 +1,135 @@
+import React, { useState } from 'react';
+import { StyleSheet, ActivityIndicator, View, Image, StyleProp, ViewStyle } from 'react-native';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import InteractiveBase from './InteractiveBase';
+import { Text, useTheme } from 'native-base';
+// import { BlurView } from 'expo-blur';
+
+interface ButtonProps {
+  title?: string;
+  style?: StyleProp<ViewStyle>,
+  onPress?: () => Promise<any>;
+  isDisabled?: boolean;
+  icon?: (size: string, color: string) => React.ReactNode;
+  iconImage?: string;
+  isCollapsed?: boolean;
+  type: 'filled' | 'outlined' | 'menu';
+}
+
+const ButtonBase: React.FC<ButtonProps> = ({ title, style, onPress, isDisabled, icon, iconImage, isCollapsed, type = 'filled'}) => {
+  const { colors } = useTheme();
+  const [loading, setLoading] = useState(false);
+
+  const styleButton = StyleSheet.create({
+    Default: {
+        scale: 1,
+        shadowOpacity: 0.30,
+        shadowRadius: 4.65,
+        elevation: 8,
+        backgroundColor: colors.primary[400],
+    },
+    onHover: {
+        scale: 1.02,
+        shadowOpacity: 0.37,
+        shadowRadius: 7.49,
+        elevation: 12,
+        backgroundColor: colors.primary[500],
+    },
+    onPressed: {
+        scale: 0.98,
+        shadowOpacity: 0.23,
+        shadowRadius: 2.62,
+        elevation: 4,
+        backgroundColor: colors.primary[600],
+    },
+    Disabled: {
+        scale: 1,
+        shadowOpacity: 0.30,
+        shadowRadius: 4.65,
+        elevation: 8,
+        backgroundColor: colors.primary[400],
+    }
+  });
+
+  const styleMenu = StyleSheet.create({
+    Default: {
+        scale: 1,
+        shadowOpacity: 0.30,
+        shadowRadius: 4.65,
+        elevation: 8,
+        backgroundColor: 'rgba(16,16,20,0.5)',
+    },
+    onHover: {
+        scale: 1.01,
+        shadowOpacity: 0.37,
+        shadowRadius: 7.49,
+        elevation: 12,
+        backgroundColor: 'rgba(16,16,20,0.4)',
+    },
+    onPressed: {
+        scale: 0.99,
+        shadowOpacity: 0.23,
+        shadowRadius: 2.62,
+        elevation: 4,
+        backgroundColor: 'rgba(16,16,20,0.6)',
+    },
+    Disabled: {
+        scale: 1,
+        shadowOpacity: 0.30,
+        shadowRadius: 4.65,
+        elevation: 8,
+        backgroundColor: 'rgba(16,16,20,0.5)',
+    }
+  });
+
+  const typeToStyleAnimator = {'filled': styleButton,'outlined': styleButton,'menu': styleMenu};
+
+  return (
+    <InteractiveBase
+      style={[styles.container, style]}
+      styleAnimate={typeToStyleAnimator[type]}
+      onPress={async () => {
+        if (onPress && !isDisabled) {
+          setLoading(true); 
+          await onPress();
+          setLoading(false);
+        }
+      }}
+      isDisabled={isDisabled}
+      isOutlined={type === 'outlined'}
+    >
+        {loading ? (
+          <ActivityIndicator size="small" color={type === 'outlined' ? '#6075F9' : '#FFFFFF'} />
+        ) : (
+          <View style={styles.content}>
+            {icon && icon("18", type === 'outlined' ? '#6075F9' : '#FFFFFF')}
+            {iconImage && <Image source={{uri: iconImage}} style={styles.icon} />}
+            {title && <Text style={styles.text}>{title}</Text>}
+          </View>
+        )}
+    </InteractiveBase>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 8,
+  },
+  content: {
+    padding: 10,
+    justifyContent: 'center',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  icon: {
+    width: 18,
+    height: 18,
+    // marginRight: 8,
+  },
+  text: {
+    color: '#fff',
+    marginHorizontal: 8
+  },
+});
+
+export default ButtonBase;