feat: adjust Dialog components, introduce DialogIcon (#3079)

callstack · May 23, 2022 · e5dbcb6 · e5dbcb6
1 parent 2f7ef4b
commit e5dbcb6
Show file tree

Hide file tree

Showing 15 changed files with 418 additions and 132 deletions.
diff --git a/example/src/Examples/DialogExample.tsx b/example/src/Examples/DialogExample.tsx
@@ -1,13 +1,14 @@
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
-import { Button } from 'react-native-paper';
+import { Button, useTheme } from 'react-native-paper';
 import ScreenWrapper from '../ScreenWrapper';
 import {
   DialogWithCustomColors,
   DialogWithLoadingIndicator,
   DialogWithLongText,
   DialogWithRadioBtns,
   UndismissableDialog,
+  DialogWithIcon,
 } from './Dialogs';
 
 type ButtonVisibility = {
@@ -16,6 +17,7 @@ type ButtonVisibility = {
 
 const DialogExample = () => {
   const [visible, setVisible] = React.useState<ButtonVisibility>({});
+  const { isV3 } = useTheme();
 
   const _toggleDialog = (name: string) => () =>
     setVisible({ ...visible, [name]: !visible[name] });
@@ -59,6 +61,15 @@ const DialogExample = () => {
       >
         Custom colors
       </Button>
+      {isV3 && (
+        <Button
+          mode="outlined"
+          onPress={_toggleDialog('dialog6')}
+          style={styles.button}
+        >
+          With icon
+        </Button>
+      )}
       <DialogWithLongText
         visible={_getVisible('dialog1')}
         close={_toggleDialog('dialog1')}
@@ -79,6 +90,12 @@ const DialogExample = () => {
         visible={_getVisible('dialog5')}
         close={_toggleDialog('dialog5')}
       />
+      {isV3 && (
+        <DialogWithIcon
+          visible={_getVisible('dialog6')}
+          close={_toggleDialog('dialog6')}
+        />
+      )}
     </ScreenWrapper>
   );
 };

diff --git a/example/src/Examples/Dialogs/DialogTextComponent.tsx b/example/src/Examples/Dialogs/DialogTextComponent.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import type { StyleProp, TextStyle } from 'react-native';
+import {
+  Paragraph,
+  Text,
+  Text as NativeText,
+  useTheme,
+  Subheading,
+} from 'react-native-paper';
+import type { MD3TypescaleKey } from '../../../../src/types';
+
+type Props = React.ComponentProps<typeof NativeText> & {
+  isSubheading?: boolean;
+  children: React.ReactNode;
+  style?: StyleProp<TextStyle>;
+  variant?: keyof typeof MD3TypescaleKey;
+};
+
+export const TextComponent = ({ isSubheading = false, ...props }: Props) => {
+  const theme = useTheme();
+
+  if (theme.isV3) {
+    return (
+      <Text
+        variant={isSubheading ? 'bodyLarge' : 'bodyMedium'}
+        style={{ color: theme.colors.onSurfaceVariant }}
+        {...props}
+      />
+    );
+  } else if (isSubheading) {
+    return <Subheading {...props} />;
+  }
+  return <Paragraph {...props} />;
+};
diff --git a/example/src/Examples/Dialogs/DialogWithCustomColors.tsx b/example/src/Examples/Dialogs/DialogWithCustomColors.tsx
@@ -1,38 +1,54 @@
 import * as React from 'react';
 import {
-  Paragraph,
   Button,
   Portal,
   Dialog,
   MD2Colors,
+  useTheme,
+  MD3Colors,
 } from 'react-native-paper';
-
+import { TextComponent } from './DialogTextComponent';
 const DialogWithCustomColors = ({
   visible,
   close,
 }: {
   visible: boolean;
   close: () => void;
-}) => (
-  <Portal>
-    <Dialog
-      onDismiss={close}
-      style={{ backgroundColor: MD2Colors.purple900 }}
-      visible={visible}
-    >
-      <Dialog.Title style={{ color: MD2Colors.white }}>Alert</Dialog.Title>
-      <Dialog.Content>
-        <Paragraph style={{ color: MD2Colors.white }}>
-          This is a dialog with custom colors
-        </Paragraph>
-      </Dialog.Content>
-      <Dialog.Actions>
-        <Button color={MD2Colors.white} onPress={close}>
-          OK
-        </Button>
-      </Dialog.Actions>
-    </Dialog>
-  </Portal>
-);
+}) => {
+  const { isV3 } = useTheme();
+
+  return (
+    <Portal>
+      <Dialog
+        onDismiss={close}
+        style={{
+          backgroundColor: isV3 ? MD3Colors.primary10 : MD2Colors.purple900,
+        }}
+        visible={visible}
+      >
+        <Dialog.Title
+          style={{ color: isV3 ? MD3Colors.primary95 : MD2Colors.white }}
+        >
+          Alert
+        </Dialog.Title>
+        <Dialog.Content>
+          <TextComponent
+            style={{ color: isV3 ? MD3Colors.primary95 : MD2Colors.white }}
+          >
+            This is a dialog with custom colors
+          </TextComponent>
+        </Dialog.Content>
+        <Dialog.Actions>
+          <Button
+            color={isV3 ? MD3Colors.primary95 : MD2Colors.white}
+            onPress={close}
+          >
+            Ok
+          </Button>
+        </Dialog.Actions>
+      </Dialog>
+    </Portal>
+  );
+};
 
 export default DialogWithCustomColors;
diff --git a/example/src/Examples/Dialogs/DialogWithIcon.tsx b/example/src/Examples/Dialogs/DialogWithIcon.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import { Button, Portal, Dialog, MD3Colors } from 'react-native-paper';
+import { TextComponent } from './DialogTextComponent';
+
+const DialogWithIcon = ({
+  visible,
+  close,
+}: {
+  visible: boolean;
+  close: () => void;
+}) => {
+  return (
+    <Portal>
+      <Dialog onDismiss={close} visible={visible}>
+        <Dialog.Icon icon="alert" />
+        <Dialog.Title style={styles.title}>Dialog with Icon</Dialog.Title>
+        <Dialog.Content>
+          <TextComponent>
+            This is a dialog with new component called DialogIcon. When icon is
+            displayed you should center the header.
+          </TextComponent>
+        </Dialog.Content>
+        <Dialog.Actions>
+          <Button onPress={close} color={MD3Colors.error50}>
+            Disagree
+          </Button>
+          <Button onPress={close}>Agree</Button>
+        </Dialog.Actions>
+      </Dialog>
+    </Portal>
+  );
+};
+
+const styles = StyleSheet.create({
+  title: {
+    textAlign: 'center',
+  },
+});
+export default DialogWithIcon;
diff --git a/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx b/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx
@@ -1,6 +1,13 @@
 import * as React from 'react';
 import { ActivityIndicator, Platform, View, StyleSheet } from 'react-native';
-import { Paragraph, MD2Colors, Portal, Dialog } from 'react-native-paper';
+import {
+  MD2Colors,
+  Portal,
+  Dialog,
+  useTheme,
+  MD3Colors,
+} from 'react-native-paper';
+import { TextComponent } from './DialogTextComponent';
 
 const isIOS = Platform.OS === 'ios';
 
@@ -10,23 +17,26 @@ const DialogWithLoadingIndicator = ({
 }: {
   visible: boolean;
   close: () => void;
-}) => (
-  <Portal>
-    <Dialog onDismiss={close} visible={visible}>
-      <Dialog.Title>Progress Dialog</Dialog.Title>
-      <Dialog.Content>
-        <View style={styles.flexing}>
-          <ActivityIndicator
-            color={MD2Colors.indigo500}
-            size={isIOS ? 'large' : 48}
-            style={styles.marginRight}
-          />
-          <Paragraph>Loading.....</Paragraph>
-        </View>
-      </Dialog.Content>
-    </Dialog>
-  </Portal>
-);
+}) => {
+  const { isV3 } = useTheme();
+  return (
+    <Portal>
+      <Dialog onDismiss={close} visible={visible}>
+        <Dialog.Title>Progress Dialog</Dialog.Title>
+        <Dialog.Content>
+          <View style={styles.flexing}>
+            <ActivityIndicator
+              color={isV3 ? MD3Colors.tertiary30 : MD2Colors.indigo500}
+              size={isIOS ? 'large' : 48}
+              style={styles.marginRight}
+            />
+            <TextComponent>Loading.....</TextComponent>
+          </View>
+        </Dialog.Content>
+      </Dialog>
+    </Portal>
+  );
+};
 
 const styles = StyleSheet.create({
   flexing: {

diff --git a/example/src/Examples/Dialogs/DialogWithLongText.tsx b/example/src/Examples/Dialogs/DialogWithLongText.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Dimensions, ScrollView, StyleSheet } from 'react-native';
-import { Paragraph, Button, Portal, Dialog } from 'react-native-paper';
+import { Button, Portal, Dialog } from 'react-native-paper';
+import { TextComponent } from './DialogTextComponent';
 
 const DialogWithLongText = ({
   visible,
@@ -18,7 +19,7 @@ const DialogWithLongText = ({
       <Dialog.Title>Alert</Dialog.Title>
       <Dialog.ScrollArea style={styles.smallPadding}>
         <ScrollView contentContainerStyle={styles.biggerPadding}>
-          <Paragraph>
+          <TextComponent>
             Material is the metaphor
             {'\n'}
             {'\n'}A material metaphor is the unifying theory of a rationalized
@@ -56,11 +57,11 @@ const DialogWithLongText = ({
             conveying how objects move, interact, and exist in space and in
             relation to each other. Realistic lighting shows seams, divides
             space, and indicates moving parts.
-          </Paragraph>
+          </TextComponent>
         </ScrollView>
       </Dialog.ScrollArea>
       <Dialog.Actions>
-        <Button onPress={close}>OK</Button>
+        <Button onPress={close}>Ok</Button>
       </Dialog.Actions>
     </Dialog>
   </Portal>

diff --git a/example/src/Examples/Dialogs/DialogWithRadioBtns.tsx b/example/src/Examples/Dialogs/DialogWithRadioBtns.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { ScrollView, View, StyleSheet } from 'react-native';
 import {
-  Subheading,
   Button,
   Portal,
   Dialog,
   RadioButton,
   TouchableRipple,
 } from 'react-native-paper';
+import { TextComponent } from './DialogTextComponent';
 
 type Props = {
   visible: boolean;
@@ -34,7 +34,9 @@ const DialogWithRadioBtns = ({ visible, close }: Props) => {
                       status={checked === 'normal' ? 'checked' : 'unchecked'}
                     />
                   </View>
-                  <Subheading style={styles.text}>Option 1</Subheading>
+                  <TextComponent isSubheading style={styles.text}>
+                    Option 1
+                  </TextComponent>
                 </View>
               </TouchableRipple>
               <TouchableRipple onPress={() => setChecked('second')}>
@@ -45,7 +47,9 @@ const DialogWithRadioBtns = ({ visible, close }: Props) => {
                       status={checked === 'second' ? 'checked' : 'unchecked'}
                     />
                   </View>
-                  <Subheading style={styles.text}>Option 2</Subheading>
+                  <TextComponent isSubheading style={styles.text}>
+                    Option 2
+                  </TextComponent>
                 </View>
               </TouchableRipple>
               <TouchableRipple onPress={() => setChecked('third')}>
@@ -56,7 +60,9 @@ const DialogWithRadioBtns = ({ visible, close }: Props) => {
                       status={checked === 'third' ? 'checked' : 'unchecked'}
                     />
                   </View>
-                  <Subheading style={styles.text}>Option 3</Subheading>
+                  <TextComponent isSubheading style={styles.text}>
+                    Option 3
+                  </TextComponent>
                 </View>
               </TouchableRipple>
               <TouchableRipple onPress={() => setChecked('fourth')}>
@@ -67,7 +73,9 @@ const DialogWithRadioBtns = ({ visible, close }: Props) => {
                       status={checked === 'fourth' ? 'checked' : 'unchecked'}
                     />
                   </View>
-                  <Subheading style={styles.text}>Option 4</Subheading>
+                  <TextComponent isSubheading style={styles.text}>
+                    Option 4
+                  </TextComponent>
                 </View>
               </TouchableRipple>
             </View>

diff --git a/example/src/Examples/Dialogs/UndismissableDialog.tsx b/example/src/Examples/Dialogs/UndismissableDialog.tsx
@@ -1,13 +1,8 @@
 import * as React from 'react';
-import {
-  Paragraph,
-  Button,
-  Portal,
-  Dialog,
-  MD2Colors,
-} from 'react-native-paper';
+import { Button, Portal, Dialog, MD2Colors } from 'react-native-paper';
+import { TextComponent } from './DialogTextComponent';
 
-const DialogWithLongText = ({
+const UndismissableDialog = ({
   visible,
   close,
 }: {
@@ -18,7 +13,7 @@ const DialogWithLongText = ({
     <Dialog onDismiss={close} visible={visible} dismissable={false}>
       <Dialog.Title>Alert</Dialog.Title>
       <Dialog.Content>
-        <Paragraph>This is an undismissable dialog!!</Paragraph>
+        <TextComponent>This is an undismissable dialog!!</TextComponent>
       </Dialog.Content>
       <Dialog.Actions>
         <Button color={MD2Colors.teal500} disabled>
@@ -30,4 +25,4 @@ const DialogWithLongText = ({
   </Portal>
 );
 
-export default DialogWithLongText;
+export default UndismissableDialog;
diff --git a/example/src/Examples/Dialogs/index.tsx b/example/src/Examples/Dialogs/index.tsx
@@ -3,3 +3,4 @@ export { default as DialogWithLoadingIndicator } from './DialogWithLoadingIndica
 export { default as DialogWithLongText } from './DialogWithLongText';
 export { default as DialogWithRadioBtns } from './DialogWithRadioBtns';
 export { default as UndismissableDialog } from './UndismissableDialog';
+export { default as DialogWithIcon } from './DialogWithIcon';