martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-14 12:39:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

adding safe area for rotated phone

Browse Source
This commit is contained in:
balzack 2023-03-04 17:04:10 -08:00
parent dcd5af197e
commit d21d7de58a
4 changed files with 53 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
app/mobile/src/session/Session.jsx
View File

@ -47,6 +47,7 @@ export function Session() {
const [cardId, setCardId] = useState(); const [cardId, setCardId] = useState();
const [channelId, setChannelId] = useState(); const [channelId, setChannelId] = useState();
console.log("REnDER CONVERSATION STACK");
const openConversation = (navigation, card, channel) => { const openConversation = (navigation, card, channel) => {
(async () => { (async () => {
conversation.actions.setConversation(card, channel); conversation.actions.setConversation(card, channel);
@ -72,33 +73,37 @@ export function Session() {
} }
return ( return (
<ConversationStack.Navigator initialRouteName="channels" screenOptions={({ route }) => (screenParams)} > <SafeAreaView edges={['left', 'right']} style={styles.body}>
<ConversationStack.Navigator initialRouteName="channels" screenOptions={({ route }) => (screenParams)} >
<ConversationStack.Screen name="channels" options={stackParams}> <ConversationStack.Screen name="channels" options={stackParams}>
{(props) => <Channels navigation={props.navigation} openConversation={(cardId, channelId) => openConversation(props.navigation, cardId, channelId)} />} {(props) => <Channels navigation={props.navigation} openConversation={(cardId, channelId) => openConversation(props.navigation, cardId, channelId)} />}
</ConversationStack.Screen> </ConversationStack.Screen>
<ConversationStack.Screen name="conversation" options={stackParams}> <ConversationStack.Screen name="conversation" options={stackParams}>
{(props) => <Conversation navigation={props.navigation} openDetails={() => openDetails(props.navigation)} closeConversation={(pop) => closeConversation(props.navigation, pop)} /> } {(props) => <Conversation navigation={props.navigation} openDetails={() => openDetails(props.navigation)} closeConversation={(pop) => closeConversation(props.navigation, pop)} /> }
</ConversationStack.Screen> </ConversationStack.Screen>
<ConversationStack.Screen name="details" options={{ ...stackParams, headerTitle: (props) => ( <ConversationStack.Screen name="details" options={{ ...stackParams, headerTitle: (props) => (
<Text style={styles.headertext}>Details</Text> <Text style={styles.headertext}>Details</Text>
)}}> )}}>
{(props) => <Details clearConversation={() => clearConversation(props.navigation)} />} {(props) => <Details clearConversation={() => clearConversation(props.navigation)} />}
</ConversationStack.Screen> </ConversationStack.Screen>
</ConversationStack.Navigator> </ConversationStack.Navigator>
</SafeAreaView>
); );
} }
const ProfileStackScreen = () => { const ProfileStackScreen = () => {
return ( return (
<ProfileStack.Navigator screenOptions={({ route }) => (screenParams)}> <SafeAreaView edges={['left', 'right']} style={styles.body}>
<ProfileStack.Screen name="profile" options={{ ...stackParams, headerTitle: () => <ProfileHeader /> }}> <ProfileStack.Navigator screenOptions={({ route }) => (screenParams)}>
{(props) => <ScrollView><ProfileBody /></ScrollView>} <ProfileStack.Screen name="profile" options={{ ...stackParams, headerTitle: () => <ProfileHeader /> }}>
</ProfileStack.Screen> {(props) => <ScrollView><ProfileBody /></ScrollView>}
</ProfileStack.Navigator> </ProfileStack.Screen>
</ProfileStack.Navigator>
</SafeAreaView>
); );
} }
@ -126,27 +131,29 @@ export function Session() {
} }
return ( return (
<ContactStack.Navigator screenOptions={({ route }) => (screenParams)} initialRouteName="cards"> <SafeAreaView edges={['left', 'right']} style={styles.body}>
<ContactStack.Navigator screenOptions={({ route }) => (screenParams)} initialRouteName="cards">
<ContactStack.Screen name="cards" options={{ ...stackParams, headerTitle: (props) => ( <ContactStack.Screen name="cards" options={{ ...stackParams, headerTitle: (props) => (
<CardsHeader filter={filter} setFilter={setFilter} sort={sort} setSort={setSort} openRegistry={openRegistry} /> <CardsHeader filter={filter} setFilter={setFilter} sort={sort} setSort={setSort} openRegistry={openRegistry} />
)}}> )}}>
{(props) => <CardsBody filter={filter} sort={sort} openContact={(contact) => openContact(props.navigation, contact)} />} {(props) => <CardsBody filter={filter} sort={sort} openContact={(contact) => openContact(props.navigation, contact)} />}
</ContactStack.Screen> </ContactStack.Screen>
<ContactStack.Screen name="contact" options={{ ...stackParams, headerTitle: (props) => ( <ContactStack.Screen name="contact" options={{ ...stackParams, headerTitle: (props) => (
<ContactHeader contact={contact} /> <ContactHeader contact={contact} />
)}}> )}}>
{(props) => <ScrollView><ContactBody contact={contact} /></ScrollView>} {(props) => <ScrollView><ContactBody contact={contact} /></ScrollView>}
</ContactStack.Screen> </ContactStack.Screen>
<ContactStack.Screen name="registry" options={{ ...stackParams, headerTitle: (props) => ( <ContactStack.Screen name="registry" options={{ ...stackParams, headerTitle: (props) => (
<RegistryHeader search={search} setSearch={setSearch} handle={handle} setHandle={setHandle} server={server} setServer={setServer} /> <RegistryHeader search={search} setSearch={setSearch} handle={handle} setHandle={setHandle} server={server} setServer={setServer} />
)}}> )}}>
{(props) => <RegistryBody search={search} handle={handle} server={server} openContact={(contact) => openContact(props.navigation, contact)} />} {(props) => <RegistryBody search={search} handle={handle} server={server} openContact={(contact) => openContact(props.navigation, contact)} />}
</ContactStack.Screen> </ContactStack.Screen>
</ContactStack.Navigator> </ContactStack.Navigator>
</SafeAreaView>
); );
} }
@ -297,6 +304,8 @@ export function Session() {
); );
} }
console.log("RENDER ROOT", state.tabbed);
return ( return (
<NavigationContainer> <NavigationContainer>
<View style={styles.body}> <View style={styles.body}>

6
app/mobile/src/session/conversation/Conversation.jsx
View File

@ -1,5 +1,5 @@
import { useRef, useEffect, useState, useContext } from 'react'; import { useRef, useEffect, useState, useContext } from 'react';
import { Alert, Modal, KeyboardAvoidingView, ActivityIndicator, FlatList, View, TextInput, Text, TouchableOpacity } from 'react-native'; import { Alert, Platform, Modal, KeyboardAvoidingView, ActivityIndicator, FlatList, View, TextInput, Text, TouchableOpacity } from 'react-native';
import { ConversationContext } from 'context/ConversationContext'; import { ConversationContext } from 'context/ConversationContext';
import { useConversation } from './useConversation.hook'; import { useConversation } from './useConversation.hook';
import { styles } from './Conversation.styled'; import { styles } from './Conversation.styled';
@ -49,10 +49,13 @@ export function Conversation({ navigation, cardId, channelId, closeConversation,
}, [navigation, state.subject, state.loaded]); }, [navigation, state.subject, state.loaded]);
useEffect(() => { useEffect(() => {
console.log("RESET CONVERSATION!");
return () => { closeConversation(); }; return () => { closeConversation(); };
}, []); }, []);
return ( return (
<KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={72}
enabled={Platform.OS === 'ios' ? state.keyboard : false}>
<View style={styles.container}> <View style={styles.container}>
{ !navigation && ( { !navigation && (
<View style={styles.header}> <View style={styles.header}>
@ -127,5 +130,6 @@ export function Conversation({ navigation, cardId, channelId, closeConversation,
</KeyboardAvoidingView> </KeyboardAvoidingView>
</Modal> </Modal>
</View> </View>
</KeyboardAvoidingView>
); );
} }

6
app/mobile/src/session/conversation/addTopic/AddTopic.jsx
View File

@ -16,7 +16,6 @@ import { ImageFile } from './imageFile/ImageFile';
export function AddTopic({ contentKey }) { export function AddTopic({ contentKey }) {
const { state, actions } = useAddTopic(contentKey); const { state, actions } = useAddTopic(contentKey);
const message = useRef();
const addImage = async () => { const addImage = async () => {
try { try {
@ -31,7 +30,6 @@ export function AddTopic({ contentKey }) {
const sendMessage = async () => { const sendMessage = async () => {
try { try {
if (state.message || state.assets.length > 0) { if (state.message || state.assets.length > 0) {
message.current.blur();
await actions.addTopic(); await actions.addTopic();
} }
} }
@ -127,9 +125,9 @@ export function AddTopic({ contentKey }) {
renderItem={renderAsset} renderItem={renderAsset}
/> />
)} )}
<TextInput style={{ ...styles.input, color: state.color, fontSize: state.textSize }} value={state.message} onChangeText={actions.setMessage} ref={message} <TextInput style={{ ...styles.input, color: state.color, fontSize: state.textSize }} value={state.message} onChangeText={actions.setMessage}
placeholderTextColor={state.color} cursorColor={state.color} placeholderTextColor={state.color} cursorColor={state.color}
onSubmitEditing={sendMessage} returnKeyType="send" blurOnSubmit={true} onSubmitEditing={sendMessage} returnKeyType="send"
autoCapitalize="sentences" placeholder="New Message" multiline={true} /> autoCapitalize="sentences" placeholder="New Message" multiline={true} />
<View style={styles.addButtons}> <View style={styles.addButtons}>
{ !state.locked && state.enableImage && ( { !state.locked && state.enableImage && (

2
app/mobile/src/session/useSession.hook.js
View File

@ -38,10 +38,12 @@ export function useSession() {
if (dimensions.width > config.tabbedWidth) { if (dimensions.width > config.tabbedWidth) {
const width = Math.floor((dimensions.width * 33) / 100); const width = Math.floor((dimensions.width * 33) / 100);
tabbed.current = false; tabbed.current = false;
console.log("SET TABBED: false");
updateState({ tabbed: false, baseWidth: width + 50, subWidth: width }); updateState({ tabbed: false, baseWidth: width + 50, subWidth: width });
} }
else { else {
tabbed.current = true; tabbed.current = true;
console.log("SET TABBED: true");
updateState({ tabbed: true }); updateState({ tabbed: true });
} }
} }