zoriya/Chromacase
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Setting base setup

Browse Source
This commit is contained in:
mathysPaul
2023-09-18 15:27:37 +02:00
parent a927d9783e
commit 6e71aff8a9
5 changed files with 122 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
front/components/UI/InteractiveBase.tsx
View File

@@ -1,13 +1,8 @@
import React, { useRef, useState } from 'react';
import { Animated, StyleSheet, TouchableOpacity, ActivityIndicator, View, Image, StyleProp, ViewStyle } from 'react-native';
import Ionicons from '@expo/vector-icons/Ionicons';
import { Text, useTheme } from 'native-base'
import { BlurView } from 'expo-blur';
import {
Fill,
BackdropBlur,
} from "@shopify/react-native-skia";
// import Ionicons from '@expo/vector-icons/Ionicons';
// import { Text, useTheme } from 'native-base'
// import { BlurView } from '@react-native-community/blur';
interface InteractiveBaseProps {
children?: React.ReactNode;
@@ -200,7 +195,7 @@ const InteractiveBase: React.FC<InteractiveBaseProps> = ({ children, onPress, st
style={[
style,
isDisabled ? styleAnimate.Disabled : {
backgroundColor: isOutlined ? 'transparent' : backgroundColorValue,
backgroundColor: isOutlined ? 'rgba(0,0,0,0.3)' : backgroundColorValue,
borderColor: isOutlined ? backgroundColorValue : 'transparent',
borderWidth: 2,
transform: [{ scale: scaleValue }],
@@ -219,17 +214,19 @@ const InteractiveBase: React.FC<InteractiveBaseProps> = ({ children, onPress, st
onMouseLeave={handleMouseLeave}
style={styles.container}
>
{children}
{/* <BlurView
// style={[styles.container, {width: isCollapsed ? 'fit-content': '100%'}]}
tint="dark"
intensity={100}
>
{children}
</BlurView> */}
{children}
<BackdropBlur blur={4} clip={{ x: 0, y: 128, width: 256, height: 128 }}>
<Fill color="rgba(0, 0, 0, 0.2)" />
</BackdropBlur>
style={{
width: '420px',
height: '50px',
borderRadius: 20,
borderWidth: 1,
}}
blurType="light"
blurAmount={20}
blurRadius={5}
/> */}
</TouchableOpacity>
</Animated.View>
);

98
front/components/UI/SettingsBase.tsx Normal file
View File

@@ -0,0 +1,98 @@
import React, { useState } from 'react';
import { StyleSheet, ActivityIndicator, View, Image } 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 SettingProps {
icon: string;
title: string;
description?: string;
onPress?: () => Promise<any>;
children?: React.ReactNode;
}
const SettingBase: React.FC<SettingProps> = ({ title, description, onPress, icon, children}) => {
const styleSetting = StyleSheet.create({
Default: {
scale: 1,
shadowOpacity: 0.30,
shadowRadius: 4.65,
elevation: 8,
backgroundColor: 'rgba(16, 16, 20, 0.50)',
},
onHover: {
scale: 1,
shadowOpacity: 0.30,
shadowRadius: 4.65,
elevation: 8,
backgroundColor: 'rgba(32, 32, 40, 0.50)',
},
onPressed: {
scale: 1,
shadowOpacity: 0.30,
shadowRadius: 4.65,
elevation: 8,
backgroundColor: 'rgba(16, 16, 20, 0.50)',
},
Disabled: {
scale: 1,
shadowOpacity: 0.30,
shadowRadius: 4.65,
elevation: 8,
backgroundColor: 'rgba(16, 16, 20, 0.50)',
}
});
return (
<InteractiveBase
style={[styles.container, {width: '100%'}]}
styleAnimate={styleSetting}
onPress={async () => {
if (onPress) {
await onPress();
}
}}
>
<View style={styles.content}>
<Ionicons name={icon} size={24} color="#fff"/>
<View style={styles.info}>
<Text style={styles.text}>{title}</Text>
<Text style={styles.description}>{description}</Text>
</View>
{children}
</View>
</InteractiveBase>
);
};
const styles = StyleSheet.create({
container: {
borderRadius: 8,
backgroundColor: 'rgba(16, 16, 20, 0.50)',
},
content: {
paddingVertical: 10,
paddingHorizontal: 20,
justifyContent: 'space-between',
alignItems: 'center',
alignSelf: 'stretch',
flexDirection: 'row',
},
info: {
flexDirection: 'column',
marginHorizontal: 16,
flex: 1,
},
text: {
color: '#fff',
fontSize: 16,
},
description: {
color: '#fff',
fontSize: 10,
},
});
export default SettingBase;

3
front/package.json
View File

@@ -22,10 +22,10 @@
"@expo/vector-icons": "^13.0.0",
"@motiz88/react-native-midi": "^0.0.5",
"@react-native-async-storage/async-storage": "~1.17.3",
"@react-native-community/blur": "^4.3.2",
"@react-navigation/native": "^6.0.11",
"@react-navigation/native-stack": "^6.7.0",
"@reduxjs/toolkit": "^1.8.3",
"@shopify/react-native-skia": "^0.1.208",
"@tanstack/react-query": "^4.2.3",
"@types/jest": "^28.1.4",
"@types/react-dom": "~18.0.8",
@@ -34,7 +34,6 @@
"add": "^2.0.6",
"expo": "^47.0.8",
"expo-asset": "~8.7.0",
"expo-blur": "~12.0.1",
"expo-dev-client": "~2.0.1",
"expo-linear-gradient": "~12.0.1",
"expo-linking": "~3.3.1",

2
front/views/SigninView.tsx
View File

@@ -18,6 +18,7 @@ import { Image, Flex } from 'native-base';
import ImageBanner from '../assets/banner.jpg';
import TMPBase from '../components/UI/TMPBase';
import { LinearGradient } from 'expo-linear-gradient';
import SettingBase from '../components/UI/SettingsBase';
const hanldeSignin = async (
username: string,
@@ -87,6 +88,7 @@ const SigninView = () => {
icon='person'
title="Menu"
/>
<SettingBase icon='person' title='title' description='description'>coucou</SettingBase>
<SeparatorBase>or</SeparatorBase>
<TextFormField
error={formData.username.error}

38
front/yarn.lock
View File

@@ -2884,6 +2884,11 @@
dependencies:
merge-options "^3.0.4"
"@react-native-community/blur@^4.3.2":
version "4.3.2"
resolved "https://registry.yarnpkg.com/@react-native-community/blur/-/blur-4.3.2.tgz#185a2c7dd03ba168cc95069bc4742e9505fd6c6c"
integrity sha512-0ID+pyZKdC4RdgC7HePxUQ6JmsbNrgz03u+6SgqYpmBoK/rE+7JffqIw7IEsfoKitLEcRNLGekIBsfwCqiEkew==
"@react-native-community/cli-clean@^9.2.1":
version "9.2.1"
resolved "https://registry.yarnpkg.com/@react-native-community/cli-clean/-/cli-clean-9.2.1.tgz#198c5dd39c432efb5374582073065ff75d67d018"
@@ -3549,14 +3554,6 @@
component-type "^1.2.1"
join-component "^1.1.0"
"@shopify/react-native-skia@^0.1.208":
version "0.1.208"
resolved "https://registry.yarnpkg.com/@shopify/react-native-skia/-/react-native-skia-0.1.208.tgz#f3badb065dc0ed4bbf34a6036c9aa3ded2bfd068"
integrity sha512-5Zi6gYlyGo10A1hz2u8RnVP/xzOuRHRAo/HdOY0ncMyKSyvaNtINNfM7zuthRKZT4R3zFF38dYphfC7mcFELtQ==
dependencies:
canvaskit-wasm "0.38.0"
react-reconciler "^0.27.0"
"@sideway/address@^4.1.3":
version "4.1.4"
resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.4.tgz#03dccebc6ea47fdc226f7d3d1ad512955d4783f0"
@@ -6905,11 +6902,6 @@ caniuse-lite@^1.0.30001125:
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001495.tgz#64a0ccef1911a9dcff647115b4430f8eff1ef2d9"
integrity sha512-F6x5IEuigtUfU5ZMQK2jsy5JqUUlEFRVZq8bO2a+ysq5K7jD6PPc9YXZj78xDNS3uNchesp1Jw47YXEqr+Viyg==
canvaskit-wasm@0.38.0:
version "0.38.0"
resolved "https://registry.yarnpkg.com/canvaskit-wasm/-/canvaskit-wasm-0.38.0.tgz#83e6c46f3015c2ff3f6503157f47453af76a7be7"
integrity sha512-ZEG6lucpbQ4Ld+mY8C1Ng+PMLVP+/AX02jS0Sdl28NyMxuKSa9uKB8oGd1BYp1XWPyO2Jgr7U8pdyjJ/F3xR5Q==
capture-exit@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
@@ -9069,11 +9061,6 @@ expo-asset@~8.7.0:
path-browserify "^1.0.0"
url-parse "^1.5.9"
expo-blur@~12.0.1:
version "12.0.1"
resolved "https://registry.yarnpkg.com/expo-blur/-/expo-blur-12.0.1.tgz#7aa4186620359acfa976dda84360070b634ffe3d"
integrity sha512-7oF/xRIFJukM4/qL6ejZ4Z/4YcVExvBPsBrz7rGYz6PtgAkWwYFR62+ExZOzTEG4hgoPPmlnt1ncimsk/MYUgQ==
expo-constants@~14.0.0, expo-constants@~14.0.2:
version "14.0.2"
resolved "https://registry.yarnpkg.com/expo-constants/-/expo-constants-14.0.2.tgz#2cb1dec8f41a64c2fc5b4eecaf77d7661cad01cc"
@@ -15934,14 +15921,6 @@ react-query@*:
broadcast-channel "^3.4.1"
match-sorter "^6.0.2"
react-reconciler@^0.27.0:
version "0.27.0"
resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.27.0.tgz#360124fdf2d76447c7491ee5f0e04503ed9acf5b"
integrity sha512-HmMDKciQjYmBRGuuhIaKA1ba/7a+UsM5FzOZsMO2JYHt9Jh8reCb7j1eDC95NOyUlKM9KRyvdx0flBuDvYSBoA==
dependencies:
loose-envify "^1.1.0"
scheduler "^0.21.0"
react-redux@^8.0.2:
version "8.0.5"
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.0.5.tgz#e5fb8331993a019b8aaf2e167a93d10af469c7bd"
@@ -16643,13 +16622,6 @@ scheduler@^0.20.2:
loose-envify "^1.1.0"
object-assign "^4.1.1"
scheduler@^0.21.0:
version "0.21.0"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0.tgz#6fd2532ff5a6d877b6edb12f00d8ab7e8f308820"
integrity sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==
dependencies:
loose-envify "^1.1.0"
scheduler@^0.22.0:
version "0.22.0"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.22.0.tgz#83a5d63594edf074add9a7198b1bae76c3db01b8"