Merge pull request #134 from chrisglein/addDialogPackage

Use `react-native-content-dialog` for dialogs

Author: chrisglein

README.md

@@ -105,4 +105,5 @@ The app's settings are handled by a `SettingsContext` object, which has dialog U
 - Syntax Highlighting via [react-native-syntax-highlighter](https://github.com/conorhastings/react-native-syntax-highlighter)
 - Dependency patching via [patch-package](https://github.com/ds300/patch-package)
 - Storage via [react-native-async-storage](https://github.com/react-native-async-storage/async-storage)
-- Markdown rendering via [react-native-markdown-display](https://github.com/iamacup/react-native-markdown-display)
+- Markdown rendering via [react-native-markdown-display-updated](https://github.com/willmac321/react-native-markdown-display)
+- Dialogs via [react-native-content-dialog](https://github.com/chrisglein/react-native-content-dialog)

package.json

@@ -13,13 +13,14 @@
   },
   "dependencies": {
     "@react-native-async-storage/async-storage": "^1.17.11",
-    "@react-native-clipboard/clipboard": "^1.11.2",
-    "@react-native-picker/picker": "^2.2.1",
+    "@react-native-clipboard/clipboard": "^1.12.1",
+    "@react-native-picker/picker": "^2.5.1",
     "patch-package": "^6.5.1",
     "postinstall-postinstall": "^2.1.0",
     "react": "18.2.0",
     "react-native": "0.71.0",
-    "react-native-markdown-display": "^7.0.0-alpha.2",
+    "react-native-content-dialog": "^0.2.0",
+    "react-native-markdown-display-updated": "^7.0.0",
     "react-native-syntax-highlighter": "^2.1.0",
     "react-native-windows": "0.71.1"
   },

patches/@react-native-clipboard+clipboard+1.11.2.patch

@@ -6,7 +6,7 @@ import {
 } from 'react-native';
 import {Hyperlink} from './Controls';
 import {
-  DialogFrame,
+  ContentDialog,
 } from './Popups';
 import {StylesContext} from './Styles';
 import VersionInfo from './NativeVersionInfo'
@@ -19,19 +19,19 @@ function AboutPopup({show, close}: AboutPopupProps): JSX.Element {
   const styles = React.useContext(StylesContext);
 
   return (
-    <DialogFrame
+    <ContentDialog
       show={show}
       close={close}
-      titleIcon="❔"
-      title="About">
+      title="About"
+      defaultButtonIndex={0}>
       <Text>Version: <Text style={{fontWeight: 'bold'}}>{VersionInfo.getConstants().appVersion}</Text></Text>
       <View style={{flexDirection: 'row', gap: 4}}>
         <Text>Source code:</Text>
         <Hyperlink
           text='GitHub'
           url='https://github.com/chrisglein/artificial-chat/'/>
       </View>
-    </DialogFrame>
+    </ContentDialog>
   );
 }
 

patches/@react-native-picker+picker+2.4.8.patch

@@ -22,7 +22,7 @@ import {
 import { StylesContext } from './Styles';
 import { FeedbackContext } from './Feedback';
 import Clipboard from '@react-native-clipboard/clipboard';
-import Markdown from 'react-native-markdown-display';
+import Markdown from 'react-native-markdown-display-updated';
 
 type AiImageResponseProps = {
   imageUrls?: string[];

src/About.tsx

@@ -7,7 +7,7 @@ import {
   TextInput,
   View,
 } from 'react-native';
-import {DialogFrame} from './Popups';
+import { ContentDialog } from './Popups';
 import { StylesContext } from './Styles';
 import VersionInfo from './NativeVersionInfo'
 
@@ -29,28 +29,31 @@ function FeedbackPopup({show, close, isPositive, response}: FeedbackPopupProps):
   const [thisIsNotHelpful, setThisIsNotHelpful] = React.useState(false);
 
   const buttons = [
-    <Button
-      accessibilityLabel="Submit feedback"
-      title="Submit feedback"
-      onPress={() => {
+    {
+      title: "Submit feedback",
+      onPress: () => {
         const version = VersionInfo?.getConstants().appVersion;
         if (isPositive) {
           Linking.openURL(`https://github.com/chrisglein/artificial-chat/issues/new?template=feedback-positive.yaml&version=${version}&expected=${feedbackText}&response=${response}`);
         } else {
           Linking.openURL(`https://github.com/chrisglein/artificial-chat/issues/new?template=feedback-negative.yaml&version=${version}&expected=${feedbackText}&response=${response}`);
         }              
-        close();
-      }}/>
-    ];
+      }
+    },
+    {
+      title: "Cancel",
+      onPress: () => { }
+    }
+  ];
 
   return (
-    <DialogFrame
+    <ContentDialog
       show={show}
       close={close}
-      titleIcon={isPositive ? "👍" : "👎"}
       titleIconStyle={{backgroundColor: isPositive ? 'green' : 'red'}}
-      title="Provide additional feedback"
-      buttons={buttons}>
+      title={(isPositive ? "👍" : "👎") + "Provide additional feedback"}
+      buttons={buttons}
+      defaultButtonIndex={1}>
       <TextInput
         multiline={true}
         placeholder="What would the ideal answer have been?"
@@ -81,7 +84,7 @@ function FeedbackPopup({show, close, isPositive, response}: FeedbackPopupProps):
             <Text>This isn't helpful</Text>
           </View>
         </View>)}
-    </DialogFrame>
+    </ContentDialog>
   );
 }
 

src/AiResponse.tsx

@@ -1,11 +1,11 @@
-import React, { PropsWithChildren } from 'react';
+import React from 'react';
+import type { PropsWithChildren } from 'react';
 import {
-  Button,
   Text,
   View,
 } from 'react-native';
-import {Popup} from 'react-native-windows';
 import {StylesContext} from './Styles';
+import {ContentDialog} from 'react-native-content-dialog';
 
 type PopupsContextType = {
     showAbout: boolean,
@@ -20,51 +20,6 @@ const PopupsContext = React.createContext<PopupsContextType>({
   setShowSettings: () => {},
 });
 
-type DialogFrameType = PropsWithChildren<{
-  show: boolean,
-  close: () => void;
-  isLightDismissEnabled?: boolean,
-  titleIcon: string,
-  titleIconStyle?: any,
-  title: string,
-  buttons?: JSX.Element[],
-}>;
-function DialogFrame({children, show, close, isLightDismissEnabled, titleIcon, titleIconStyle, title, buttons}: DialogFrameType) {
-  const styles = React.useContext(StylesContext);
-
-  const populatedButtons = buttons ?? [<Button
-    accessibilityLabel='OK'
-    title="OK"
-    onPress={() => {
-      close();
-    }}/>];
-  const buttonList = populatedButtons.map((button, index) => <View key={index}>{button}</View>);
-
-  return (
-    <Popup
-      isOpen={show}
-      isLightDismissEnabled={isLightDismissEnabled ?? true}
-      onDismiss={() => close()}>
-      <View style={[styles.dialogBackground, {gap: 12}]}>
-        <View style={{flexDirection: 'row', marginBottom: 4, gap: 4}}>
-          <View style={[styles.dialogTitleIcon, titleIconStyle]}>
-            <Text accessible={false}>{titleIcon}</Text>
-          </View>
-          <Text
-            accessibilityRole="header"
-            style={styles.dialogTitle}>
-            {title}
-          </Text>
-        </View>
-        {children}
-        <View style={styles.dialogButtons}>
-          {buttonList}
-        </View>
-      </View>
-    </Popup>
-  )
-}
-
 type DialogSectionProps = PropsWithChildren<{
   header: string,
 }>;
@@ -80,4 +35,4 @@ function DialogSection({children, header}: DialogSectionProps): JSX.Element {
   );
 }
 
-export { PopupsContext, DialogFrame, DialogSection }
+export { PopupsContext, ContentDialog, DialogSection }

src/Feedback.tsx

@@ -1,13 +1,11 @@
 import React from 'react';
 import {
-  Button,
-  Switch,
   Text,
   TextInput,
   View,
 } from 'react-native';
 import {
-  DialogFrame,
+  ContentDialog,
   DialogSection,
 } from './Popups';
 import {
@@ -161,28 +159,27 @@ function SettingsPopup({show, close}: SettingsPopupProps): JSX.Element {
   }
 
   const buttons = [
-    <Button
-      accessibilityLabel="OK"
-      title="OK"
-      onPress={() => {
+    {
+      title: "OK",
+      onPress: () => {
         save();
-      }}/>,
-    <Button
-      accessibilityLabel="Cancel"
-      title="Cancel"
-      onPress={() => {
+      }
+    },
+    {
+      title: "Cancel",
+      onPress: () => {
         cancel();
-      }}/>
-    ];
+      }
+    }
+  ];
 
   return (
-    <DialogFrame
+    <ContentDialog
       show={show}
       close={cancel}
-      isLightDismissEnabled={false}
-      titleIcon="⚙️"
       title="OpenAI Settings"
-      buttons={buttons}>
+      buttons={buttons}
+      defaultButtonIndex={0}>
       <View style={styles.dialogSectionsContainer}>
         <DialogSection header="Chat">
           <Text>AI Endpoint</Text>
@@ -250,7 +247,7 @@ function SettingsPopup({show, close}: SettingsPopupProps): JSX.Element {
             value={delayForArtificialResponse.toString()}/>
         </DialogSection>
       </View>
-    </DialogFrame>
+    </ContentDialog>
   );
 }