From 06e4f61fcb291d78e04880f2d658df38670694b1 Mon Sep 17 00:00:00 2001 From: aguilhot Date: Tue, 10 Jan 2023 21:34:44 +0100 Subject: [PATCH] Adaptation datepicker pour android --- bob_party/app.json | 3 +- bob_party/package.json | 7 +++- bob_party/socketConfig.js | 2 +- bob_party/src/components/PickerGreySmall.tsx | 1 + .../src/components/style/PickerGreySmall.js | 8 ++-- bob_party/src/screens/SignUp.tsx | 40 +++++++++++++++---- bob_party/yarn.lock | 33 ++++++++++----- 7 files changed, 68 insertions(+), 26 deletions(-) diff --git a/bob_party/app.json b/bob_party/app.json index 4a59251..8dc59dc 100644 --- a/bob_party/app.json +++ b/bob_party/app.json @@ -24,7 +24,8 @@ "adaptiveIcon": { "foregroundImage": "./assets/adaptive-icon.png", "backgroundColor": "#FFFFFF" - } + }, + "softwareKeyboardLayoutMode": "pan" }, "web": { "favicon": "./assets/favicon.png" diff --git a/bob_party/package.json b/bob_party/package.json index 0b1dc8d..33d8d8a 100644 --- a/bob_party/package.json +++ b/bob_party/package.json @@ -11,8 +11,9 @@ }, "dependencies": { "@babel/runtime": "^7.20.6", - "@react-native-community/datetimepicker": "6.2.0", - "@react-native-picker/picker": "2.4.2", + "@dietime/react-native-date-picker": "^1.2.0", + "@react-native-community/datetimepicker": "^6.7.1", + "@react-native-picker/picker": "^2.4.8", "@react-navigation/bottom-tabs": "^6.4.0", "@react-navigation/native": "^6.0.13", "@react-navigation/stack": "^6.3.2", @@ -26,6 +27,7 @@ "babel-test": "^0.2.4", "cors": "^2.8.5", "expo": "^46.0.17", + "expo-linear-gradient": "^12.0.1", "expo-status-bar": "~1.4.0", "express": "^4.18.2", "jest": "^29.3.1", @@ -42,6 +44,7 @@ "react-native-picker-select": "^8.0.4", "react-native-safe-area-context": "4.3.1", "react-native-web": "~0.18.7", + "react-native-woodpicker": "^0.3.17", "react-redux": "^8.0.4", "socket.io": "^4.5.4", "socket.io-client": "^4.5.4", diff --git a/bob_party/socketConfig.js b/bob_party/socketConfig.js index 5fe5458..81b208b 100644 --- a/bob_party/socketConfig.js +++ b/bob_party/socketConfig.js @@ -1,4 +1,4 @@ const { io } = require("socket.io-client"); -export const socket = io("http://172.20.10.2:3000"); \ No newline at end of file +export const socket = io("http://codefirst.iut.uca.fr/containers/BOB_PARTEAM-server-bobParty:3000"); \ No newline at end of file diff --git a/bob_party/src/components/PickerGreySmall.tsx b/bob_party/src/components/PickerGreySmall.tsx index ba0d5b3..728a15a 100644 --- a/bob_party/src/components/PickerGreySmall.tsx +++ b/bob_party/src/components/PickerGreySmall.tsx @@ -16,6 +16,7 @@ FC<{ valueChange: any, title: string, donePress?: any, values?: any;}> onDonePress={donePress} items={values} style={styles} + /> ) } \ No newline at end of file diff --git a/bob_party/src/components/style/PickerGreySmall.js b/bob_party/src/components/style/PickerGreySmall.js index 3f12ac2..e6d2be5 100644 --- a/bob_party/src/components/style/PickerGreySmall.js +++ b/bob_party/src/components/style/PickerGreySmall.js @@ -18,8 +18,8 @@ export default StyleSheet.create( placeholder: { color: 'white', }, - }, - {inputAndroid: { + + inputAndroid: { alignItems: 'center', justifyContent: 'center', padding: 3, @@ -33,8 +33,6 @@ export default StyleSheet.create( textAlign: 'center', color: 'white', }, - placeholder: { - color: 'white', - }, + placeholderColor: 'white', } ) \ No newline at end of file diff --git a/bob_party/src/screens/SignUp.tsx b/bob_party/src/screens/SignUp.tsx index f0d5ad7..4c9143e 100644 --- a/bob_party/src/screens/SignUp.tsx +++ b/bob_party/src/screens/SignUp.tsx @@ -1,5 +1,5 @@ import { StatusBar } from 'expo-status-bar' -import { StyleSheet, View, ImageSourcePropType, Pressable, Text, Alert} from 'react-native' +import { StyleSheet, View, ImageSourcePropType, Pressable, Text, Alert, Platform, Modal} from 'react-native' import React, { useState } from 'react'; import stylesScreen from './style/screens.style' import { TextInput } from 'react-native-gesture-handler'; @@ -7,12 +7,13 @@ import { BigBlueButton } from '../components/BigBlueButton'; import styles from "./style/SignUp.style"; import { useDispatch, useSelector } from 'react-redux'; import { checkNewUserValidity } from '../core/Auth/newUser'; -import DateTimePicker, { DateTimePickerEvent } from '@react-native-community/datetimepicker'; +import { DateTimePickerEvent } from '@react-native-community/datetimepicker'; import { PickerGreySmall } from '../components/PickerGreySmall'; import { RootState } from '../redux/store'; import { updateImpossibleBirthDate, updateInvalidPassword, updateInvalidPseudo, updateTooLongPseudo, updateTooShortPassword, updateUndefinedBirthDate, updateUndefinedNationality, updateUndefinedPassword, updateUndefinedPseudo, updateUndefinedSex } from '../redux/features/credentialErrorsSlice'; import { getSystemErrorMap } from 'util'; -import RNDateTimePicker from '@react-native-community/datetimepicker'; +import DateTimePicker from '@react-native-community/datetimepicker'; +import DatePicker from '@dietime/react-native-date-picker'; import { MANAGER_USER } from '../../appManagers'; import { Dispatch, AnyAction } from '@reduxjs/toolkit'; import { User } from '../core/User/user'; @@ -24,7 +25,8 @@ function SignUp(props: { navigation: any; }) { const [pseudo, setPseudo] = useState(''); const [password, setPassword] = useState(''); - const [date, setDate] = useState(new Date()) + const [date, setDate] = useState(new Date()); + const [visible, setVisible] = useState(true); const setUser = useUserStore((state) => state.setUser); @@ -110,9 +112,31 @@ function SignUp(props: { navigation: any; }) { Date de naissance - - onDateSelected(event, value)} mode='date' value={date} themeVariant='dark'/> - + + { Platform.OS === 'ios' && ( + + onDateSelected(event, value)} + /> + + )} + { Platform.OS === 'android' && ( + setDate(value)} + format="dd-mm-yyyy" + width="100%" + height={100} + endYear={new Date().getFullYear()-13} + fadeColor="#45444E" + /> + )} + + @@ -151,4 +175,4 @@ function SignUp(props: { navigation: any; }) { } } -export default SignUp +export default SignUp \ No newline at end of file diff --git a/bob_party/yarn.lock b/bob_party/yarn.lock index f8e8532..a2383cc 100644 --- a/bob_party/yarn.lock +++ b/bob_party/yarn.lock @@ -1077,6 +1077,11 @@ dependencies: "@jridgewell/trace-mapping" "0.3.9" +"@dietime/react-native-date-picker@^1.2.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@dietime/react-native-date-picker/-/react-native-date-picker-1.2.0.tgz#a41821718b9243532d7248c0a621b37429d0939d" + integrity sha512-hFd1OUlVeJLpRZ//B99mfB4G8UYGpXOIL1KNG3SNByLS7o5gEtnlXp6Pk7B4/mz2an6t+T6UBaF4tqye0tBzdw== + "@egjs/hammerjs@^2.0.17": version "2.0.17" resolved "https://registry.yarnpkg.com/@egjs/hammerjs/-/hammerjs-2.0.17.tgz#5dc02af75a6a06e4c2db0202cae38c9263895124" @@ -1938,23 +1943,23 @@ prompts "^2.4.0" semver "^6.3.0" -"@react-native-community/datetimepicker@6.2.0": - version "6.2.0" - resolved "https://registry.npmjs.org/@react-native-community/datetimepicker/-/datetimepicker-6.2.0.tgz" - integrity sha512-w1ZS+wYO3qSASliRp+B7mPphOhtVm++rhSbj1WsgXdgLgDXSkDxpMnAXXQu9M0XdcgBwVJ6wDExeIwuzU5Jtfg== +"@react-native-community/datetimepicker@^6.7.1": + version "6.7.1" + resolved "https://registry.yarnpkg.com/@react-native-community/datetimepicker/-/datetimepicker-6.7.1.tgz#a52eed9512898adef323b2fa78c6ac4611af5502" + integrity sha512-NPW1YITG7N+3TsqXc4LZV3c5IEpTD5iX18r0bvFsHdIblo5qi0ykpeK3TffmMM5gbTjgKJ4DNVHOjLiWKxFUxw== dependencies: invariant "^2.2.4" -"@react-native-picker/picker@2.4.2": - version "2.4.2" - resolved "https://registry.npmjs.org/@react-native-picker/picker/-/picker-2.4.2.tgz" - integrity sha512-0nY8638h1J3wKz6P3IJMpOoxJDdOj7Dk/K2hP/xpqP3KnIY0lmoqYlhyNihuyVPocDGajf6SA7LFFsFepQ56ag== - "@react-native-picker/picker@^1.8.3": version "1.16.8" resolved "https://registry.yarnpkg.com/@react-native-picker/picker/-/picker-1.16.8.tgz#2126ca54d4a5a3e9ea5e3f39ad1e6643f8e4b3d4" integrity sha512-pacdQDX6V6EmjF+HoiIh6u++qx4mTK0WnhgUHRc01B+Qt5eoeUwseBqmqfTSXTx/aHDEd6PiIw7UGvKgFoqgFQ== +"@react-native-picker/picker@^2.4.8": + version "2.4.8" + resolved "https://registry.yarnpkg.com/@react-native-picker/picker/-/picker-2.4.8.tgz#a1a21f3d6ecadedbc3f0b691a444ddd7baa081f8" + integrity sha512-5NQ5XPo1B03YNqKFrV6h9L3CQaHlB80wd4ETHUEABRP2iLh7FHLVObX2GfziD+K/VJb8G4KZcZ23NFBFP1f7bg== + "@react-native/assets@1.0.0": version "1.0.0" resolved "https://registry.yarnpkg.com/@react-native/assets/-/assets-1.0.0.tgz#c6f9bf63d274bafc8e970628de24986b30a55c8e" @@ -4604,6 +4609,11 @@ expo-keep-awake@~10.2.0: resolved "https://registry.yarnpkg.com/expo-keep-awake/-/expo-keep-awake-10.2.1.tgz#af6d6f7f08cc2a01d6c728c36c5419060006d98d" integrity sha512-UBge1BwzDPhUFX0gKu9eDLwEFj4LGiqrOogNoEYxcosM1SwhkbWwPrd3zZtl53LLz02TxEi/CI/MUGJJsrVQLw== +expo-linear-gradient@^12.0.1: + version "12.0.1" + resolved "https://registry.yarnpkg.com/expo-linear-gradient/-/expo-linear-gradient-12.0.1.tgz#452f793b0463ddf313aad431552f23acc85f5d64" + integrity sha512-TMl/wBTVQOliL4S3DS5Aa3UFfVySr0mdJEHLG6kfBdMCLkr+tfLI2rGyJ+scS7xgMsvhTIaurhf1+Z0sL3aLCg== + expo-modules-autolinking@0.10.3: version "0.10.3" resolved "https://registry.yarnpkg.com/expo-modules-autolinking/-/expo-modules-autolinking-0.10.3.tgz#31bfcf3e4b613a7c3949fb1f1e9c23eea4c14caf" @@ -7808,6 +7818,11 @@ react-native-web@~0.18.7: postcss-value-parser "^4.2.0" styleq "^0.1.2" +react-native-woodpicker@^0.3.17: + version "0.3.17" + resolved "https://registry.yarnpkg.com/react-native-woodpicker/-/react-native-woodpicker-0.3.17.tgz#b05a8100285714bf4be97ed595d67bced8cf5c16" + integrity sha512-ImiFRx1aBbXlg0cRq0K22cse74632Paf+ddc3MTh+iVVkCqgCDO232otUncf/X+6g8Ht1NqjOIvmQUp8SgEnWg== + react-native@^0.69.6: version "0.69.6" resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.69.6.tgz#cdd1a5757d902b91b165c28fdda4e518ed6f683a"