From d13d9ef2623d2d617b6c4fdc8f548e018c4f7ad9 Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Thu, 7 Mar 2024 22:20:13 -0800 Subject: [PATCH] added date picker button, no styling yet --- package-lock.json | 138 +++++++++++++++++++++++ package.json | 1 + src/app/settings/index.tsx | 87 +++++++++----- src/app/settings/styles.tsx | 21 ++++ src/components/DatePicker/DatePicker.tsx | 48 -------- src/components/DatePicker/styles.tsx | 31 ----- 6 files changed, 220 insertions(+), 106 deletions(-) delete mode 100644 src/components/DatePicker/DatePicker.tsx delete mode 100644 src/components/DatePicker/styles.tsx diff --git a/package-lock.json b/package-lock.json index 32a32ae2..63004990 100644 --- a/package-lock.json +++ b/package-lock.json @@ -44,6 +44,7 @@ "react-native-gesture-handler": "~2.12.0", "react-native-htmlview": "^0.16.0", "react-native-ionicons": "^4.6.5", + "react-native-neat-date-picker": "^1.4.12", "react-native-otp-textinput": "^1.1.3", "react-native-paper": "^5.10.6", "react-native-render-html": "^6.3.4", @@ -13822,22 +13823,64 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, + "node_modules/lodash._reinterpolate": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz", + "integrity": "sha512-xYHt68QRoYGjeeM/XOE1uJtvXQAgvszfBhjV4yvsQH0u2i9I6cI6c6/eG4Hh3UAOVn0y/xAXwmTzEay49Q//HA==" + }, "node_modules/lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==" }, + "node_modules/lodash.frompairs": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/lodash.frompairs/-/lodash.frompairs-4.0.1.tgz", + "integrity": "sha512-dvqe2I+cO5MzXCMhUnfYFa9MD+/760yx2aTAN1lqEcEkf896TxgrX373igVdqSJj6tQd0jnSLE1UMuKufqqxFw==" + }, "node_modules/lodash.isequal": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==" }, + "node_modules/lodash.isstring": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz", + "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==" + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", "dev": true }, + "node_modules/lodash.omit": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.omit/-/lodash.omit-4.5.0.tgz", + "integrity": "sha512-XeqSp49hNGmlkj2EJlfrQFIzQ6lXdNro9sddtQzcJY8QaoC2GO0DT7xaIokHeyM+mIT0mPMlPvkYzg2xCuHdZg==" + }, + "node_modules/lodash.pick": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/lodash.pick/-/lodash.pick-4.4.0.tgz", + "integrity": "sha512-hXt6Ul/5yWjfklSGvLQl8vM//l3FtyHZeuelpzK6mm99pNvN9yTDruNZPEJZD1oWrqo+izBmB7oUfWgcCX7s4Q==" + }, + "node_modules/lodash.template": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz", + "integrity": "sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==", + "dependencies": { + "lodash._reinterpolate": "^3.0.0", + "lodash.templatesettings": "^4.0.0" + } + }, + "node_modules/lodash.templatesettings": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz", + "integrity": "sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==", + "dependencies": { + "lodash._reinterpolate": "^3.0.0" + } + }, "node_modules/lodash.throttle": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz", @@ -16372,6 +16415,14 @@ "react": "18.2.0" } }, + "node_modules/react-native-animatable": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/react-native-animatable/-/react-native-animatable-1.3.3.tgz", + "integrity": "sha512-2ckIxZQAsvWn25Ho+DK3d1mXIgj7tITkrS4pYDvx96WyOttSvzzFeQnM2od0+FUMzILbdHDsDEqZvnz1DYNQ1w==", + "dependencies": { + "prop-types": "^15.7.2" + } + }, "node_modules/react-native-dom-parser": { "version": "1.5.3", "resolved": "https://registry.npmjs.org/react-native-dom-parser/-/react-native-dom-parser-1.5.3.tgz", @@ -16446,6 +16497,93 @@ "react-native": "*" } }, + "node_modules/react-native-modal": { + "version": "13.0.1", + "resolved": "https://registry.npmjs.org/react-native-modal/-/react-native-modal-13.0.1.tgz", + "integrity": "sha512-UB+mjmUtf+miaG/sDhOikRfBOv0gJdBU2ZE1HtFWp6UixW9jCk/bhGdHUgmZljbPpp0RaO/6YiMmQSSK3kkMaw==", + "dependencies": { + "prop-types": "^15.6.2", + "react-native-animatable": "1.3.3" + }, + "peerDependencies": { + "react": "*", + "react-native": ">=0.65.0" + } + }, + "node_modules/react-native-neat-date-picker": { + "version": "1.4.12", + "resolved": "https://registry.npmjs.org/react-native-neat-date-picker/-/react-native-neat-date-picker-1.4.12.tgz", + "integrity": "sha512-gnVmLrpnlNqO6F0wMdJOfFFSLdi5Dq62ugnxLAqWu43PGShlpOCW6CNpjJa84QB/Cd0xmRPlHh7+fEOuMtzjYA==", + "dependencies": { + "react-native-modal": "13.0.1", + "react-native-vector-icons": "^8.1.0" + } + }, + "node_modules/react-native-neat-date-picker/node_modules/cliui": { + "version": "7.0.4", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz", + "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==", + "dependencies": { + "string-width": "^4.2.0", + "strip-ansi": "^6.0.0", + "wrap-ansi": "^7.0.0" + } + }, + "node_modules/react-native-neat-date-picker/node_modules/react-native-vector-icons": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-8.1.0.tgz", + "integrity": "sha512-sHIdBB6Y0dHaot2fMXgy5J/hhCn5YuyN7SKDNFgPzL8KA1oF2/v7mgYMavnK7LIIs2dJoGnDANKf61dsU+TZlg==", + "dependencies": { + "lodash.frompairs": "^4.0.1", + "lodash.isequal": "^4.5.0", + "lodash.isstring": "^4.0.1", + "lodash.omit": "^4.5.0", + "lodash.pick": "^4.4.0", + "lodash.template": "^4.5.0", + "prop-types": "^15.7.2", + "yargs": "^16.1.1" + }, + "bin": { + "fa5-upgrade": "bin/fa5-upgrade.sh", + "generate-icon": "bin/generate-icon.js" + } + }, + "node_modules/react-native-neat-date-picker/node_modules/strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/react-native-neat-date-picker/node_modules/yargs": { + "version": "16.2.0", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz", + "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==", + "dependencies": { + "cliui": "^7.0.2", + "escalade": "^3.1.1", + "get-caller-file": "^2.0.5", + "require-directory": "^2.1.1", + "string-width": "^4.2.0", + "y18n": "^5.0.5", + "yargs-parser": "^20.2.2" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/react-native-neat-date-picker/node_modules/yargs-parser": { + "version": "20.2.9", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz", + "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==", + "engines": { + "node": ">=10" + } + }, "node_modules/react-native-otp-textinput": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/react-native-otp-textinput/-/react-native-otp-textinput-1.1.3.tgz", diff --git a/package.json b/package.json index 3e8c0f7b..a4de4464 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "react-native-gesture-handler": "~2.12.0", "react-native-htmlview": "^0.16.0", "react-native-ionicons": "^4.6.5", + "react-native-neat-date-picker": "^1.4.12", "react-native-otp-textinput": "^1.1.3", "react-native-paper": "^5.10.6", "react-native-render-html": "^6.3.4", diff --git a/src/app/settings/index.tsx b/src/app/settings/index.tsx index 599c0f3e..940cc85e 100644 --- a/src/app/settings/index.tsx +++ b/src/app/settings/index.tsx @@ -1,12 +1,14 @@ -import DateTimePicker from '@react-native-community/datetimepicker'; import { Redirect, router, Link } from 'expo-router'; import { useEffect, useState } from 'react'; -import { Text, View, Alert, Platform } from 'react-native'; +import { Text, View, Alert, Platform, Pressable } from 'react-native'; import { Button } from 'react-native-elements'; import { ScrollView } from 'react-native-gesture-handler'; import { SafeAreaView } from 'react-native-safe-area-context'; +import DatePicker from 'react-native-neat-date-picker'; +import { Icon } from 'react-native-elements'; import styles from './styles'; +import colors from '../../styles/colors'; import AccountDataDisplay from '../../components/AccountDataDisplay/AccountDataDisplay'; import StyledButton from '../../components/StyledButton/StyledButton'; import UserSelectorInput from '../../components/UserSelectorInput/UserSelectorInput'; @@ -21,12 +23,14 @@ function SettingsScreen() { const [username, setUsername] = useState(''); const [lastName, setLastName] = useState(''); const [pronouns, setPronouns] = useState(''); - const [birthday, setBirthday] = useState(new Date()); + const [birthday, setBirthday] = useState(''); + const [birthdayExists, setBirthdayExists] = useState(false); + const [birthdayChanged, setBirthdayChanged] = useState(false); const [gender, setGender] = useState(''); const [raceEthnicity, setRaceEthnicity] = useState(''); const [showSaveEdits, setShowSaveEdits] = useState(false); - const [showDatePicker, setShowDatePicker] = useState(Platform.OS === 'ios'); + const [showDatePicker, setShowDatePicker] = useState(false); const wrapInDetectChange = (onChange: (_: any) => any) => { return (value: any) => { @@ -58,10 +62,8 @@ function SettingsScreen() { setUsername(data.username || username); if (data.birthday) { - setBirthday(new Date(data.birthday)); - setShowDatePicker(false); - } else { - setShowDatePicker(true); + setBirthday(data.birthday); + setBirthdayExists(true); } setGender(data.gender || gender); @@ -138,6 +140,14 @@ function SettingsScreen() { } }; + const onConfirmDate = (output: any) => { + console.log(output.dateString); + setBirthday(new Date(output.dateString).toLocaleDateString('en-US')); + setShowDatePicker(false); + setShowSaveEdits(true); + setBirthdayChanged(true); + }; + if (!session) { return ; } @@ -153,6 +163,15 @@ function SettingsScreen() { Settings Account + { + setShowDatePicker(false); + }} + onConfirm={onConfirmDate} + > + @@ -160,28 +179,30 @@ function SettingsScreen() { - { - setShowDatePicker(Platform.OS === 'ios'); - if (date.nativeEvent.timestamp) { - setBirthday(new Date(date.nativeEvent.timestamp)); - } + !birthdayExists ? ( + + { + setShowDatePicker(true); }} - /> - {Platform.OS !== 'ios' && ( - - )} - {showDatePicker && ( - { - setShowDatePicker(Platform.OS === 'ios'); - if (date.nativeEvent.timestamp) { - setDate(new Date(date.nativeEvent.timestamp)); - } - }} - /> - )} - - ); -} - -export default DatePicker; diff --git a/src/components/DatePicker/styles.tsx b/src/components/DatePicker/styles.tsx deleted file mode 100644 index a11509d5..00000000 --- a/src/components/DatePicker/styles.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { StyleSheet } from 'react-native'; - -export default StyleSheet.create({ - mt16: { - marginTop: 16, - width: '100%', - }, - container: { - paddingRight: 10, - marginTop: 8, - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'center', - borderWidth: 1, - borderRadius: 5, - borderColor: 'black', - fontFamily: 'Manrope-Regular', - }, - inputField: { - flex: 1, - fontSize: 14, - padding: 10, - color: '#000000', - }, - button: { - backgroundColor: 'gray', - }, - verticallySpaced: { - alignSelf: 'stretch', - }, -});