Browse Source

Fixed planning modal impossible to close/scroll

keplyx 2 years ago
parent
commit
15fe4c4147
1 changed files with 21 additions and 5 deletions
  1. 21
    5
      screens/PlanningScreen.js

+ 21
- 5
screens/PlanningScreen.js View File

@@ -1,7 +1,7 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Content, H1, H2, H3, Text} from 'native-base';
4
+import {Content, H1, H2, H3, Text, Button} from 'native-base';
5 5
 import i18n from "i18n-js";
6 6
 import {View, Image} from "react-native";
7 7
 import ThemeManager from "../utils/ThemeManager";
@@ -12,6 +12,7 @@ import HTML from 'react-native-render-html';
12 12
 import Touchable from 'react-native-platform-touchable';
13 13
 import Modalize from 'react-native-modalize';
14 14
 import WebDataManager from "../utils/WebDataManager";
15
+import CustomMaterialIcon from "../components/CustomMaterialIcon";
15 16
 
16 17
 
17 18
 type Props = {
@@ -84,15 +85,29 @@ export default class PlanningScreen extends React.Component<Props, State> {
84 85
         return daysOfYear;
85 86
     }
86 87
 
88
+    getModalHeader() {
89
+        return (
90
+            <View style={{marginBottom: 0}}>
91
+                <Button
92
+                    onPress={() => this.modalRef.current.close()}
93
+                    style={{
94
+                        marginTop: 50,
95
+                        marginLeft: 'auto',
96
+                    }}
97
+                    transparent>
98
+                    <CustomMaterialIcon icon={'close'}/>
99
+                </Button>
100
+            </View>
101
+        );
102
+    }
103
+
87 104
     getModalContent() {
88 105
         return (
89 106
             <View style={{
90 107
                 flex: 1,
91 108
                 padding: 20
92 109
             }}>
93
-                <H1 style={{
94
-                    marginTop: 20,
95
-                }}>
110
+                <H1>
96 111
                     {this.state.modalCurrentDisplayItem.title}
97 112
                 </H1>
98 113
                 <H3 style={{
@@ -306,7 +321,8 @@ export default class PlanningScreen extends React.Component<Props, State> {
306 321
                           modalStyle={{
307 322
                               backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor,
308 323
                           }}
309
-                          adjustToContentHeight
324
+                    // adjustToContentHeight // Breaks when displaying full screen, half, then full again
325
+                          HeaderComponent={() => this.getModalHeader()}
310 326
                           onClosed={() => this.onModalClosed()}>
311 327
                     {this.getModalContent()}
312 328
                 </Modalize>

Loading…
Cancel
Save