fix: Typescript updates (#121)

BREAKING CHANGE: Updated TypeScript type definitions. Types _should_ just be more relaxed now — but since we updated the entire codebase we'll release this a major bump to be safe.
mmazzarolo · Sep 8, 2021 · 1ba6f16 · 1ba6f16
1 parent 4d36698
commit 1ba6f16
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 92 deletions.
diff --git a/src/Button.tsx b/src/Button.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import { ReactNode } from "react";
 import {
   Platform,
   StyleSheet,
@@ -7,15 +8,16 @@ import {
   PlatformColor,
   TextProps,
   TextPropTypes,
+  ColorValue,
 } from "react-native";
 import useTheme, { StyleBuilder } from "./useTheme";
 import PropTypes from "prop-types";
 
 const COLOR = Platform.OS === "ios" ? "#007ff9" : "#169689";
 
 export interface DialogButtonProps extends TextProps {
-  label: string;
-  color?: string;
+  label?: ReactNode;
+  color?: ColorValue;
   bold?: boolean;
   disabled?: boolean;
   onPress: () => void;
@@ -44,7 +46,7 @@ const DialogButton: React.FC<DialogButtonProps> = (props) => {
         style={[styles.text, { color: color, fontWeight: fontWeight }, style]}
         {...nodeProps}
       >
-        {Platform.OS === "ios" ? label : label.toUpperCase()}
+        {label}
       </Text>
     </TouchableOpacity>
   );
@@ -96,12 +98,14 @@ const buildStyles: StyleBuilder = (isDark) =>
         backgroundColor: "transparent",
         padding: 8,
         fontSize: 14,
+        textTransform: "uppercase",
       },
       web: {
         textAlign: "center",
         backgroundColor: "transparent",
         padding: 8,
         fontSize: 14,
+        textTransform: "uppercase",
       },
       default: {},
     }),

diff --git a/src/Container.tsx b/src/Container.tsx
@@ -1,87 +1,91 @@
 import * as React from "react";
-import { NamedExoticComponent, ReactElement, ReactNode } from "react";
+import { PropsWithChildren, ReactElement, ReactNode } from "react";
 import {
   KeyboardAvoidingView,
   Platform,
   StyleSheet,
   View,
   PlatformColor,
   ViewStyle,
+  StyleProp,
+  ViewPropTypes,
 } from "react-native";
 import Modal from "./Modal";
 import useTheme, { StyleBuilder } from "./useTheme";
 import PropTypes from "prop-types";
+import DialogTitle, { DialogTitleProps } from "./Title";
+import DialogDescription, { DialogDescriptionProps } from "./Description";
+import DialogButton, { DialogButtonProps } from "./Button";
+
+type TitleElement = ReactElement<DialogTitleProps, typeof DialogTitle>;
+type DescriptionElement = ReactElement<
+  DialogDescriptionProps,
+  typeof DialogDescription
+>;
+type ButtonElement = ReactElement<DialogButtonProps, typeof DialogButton>;
 
 const iOS = Platform.OS === "ios";
 
-export interface DialogContainerProps {
+export type DialogContainerProps = PropsWithChildren<{
   blurComponentIOS?: ReactNode;
-  buttonSeparatorStyle?: ViewStyle;
-  contentStyle?: ViewStyle;
-  footerStyle?: ViewStyle;
-  headerStyle?: ViewStyle;
-  blurStyle?: ViewStyle;
+  buttonSeparatorStyle?: StyleProp<ViewStyle>;
+  contentStyle?: StyleProp<ViewStyle>;
+  footerStyle?: StyleProp<ViewStyle>;
+  headerStyle?: StyleProp<ViewStyle>;
+  blurStyle?: StyleProp<ViewStyle>;
   visible?: boolean;
   verticalButtons?: boolean;
   onBackdropPress?: () => void;
   onRequestClose?: () => void;
   keyboardVerticalOffset?: number;
-  children: ReactElement<any, NamedExoticComponent>[];
-}
+}>;
 
 const DialogContainer: React.FC<DialogContainerProps> = (props) => {
   const {
     blurComponentIOS,
-    buttonSeparatorStyle = {},
+    buttonSeparatorStyle,
     children,
-    contentStyle = {},
-    footerStyle = {},
-    headerStyle = {},
-    blurStyle = {},
+    contentStyle,
+    footerStyle,
+    headerStyle,
+    blurStyle,
     visible = false,
     verticalButtons = false,
     keyboardVerticalOffset = 40,
     ...nodeProps
   } = props;
-  const titleChildrens: ReactElement<any, NamedExoticComponent>[] = [];
-  const descriptionChildrens: ReactElement<any, NamedExoticComponent>[] = [];
-  const buttonChildrens: ReactElement<any, NamedExoticComponent>[] = [];
-  const otherChildrens: ReactElement<any, NamedExoticComponent>[] = [];
+  const titleChildrens: TitleElement[] = [];
+  const descriptionChildrens: DescriptionElement[] = [];
+  const buttonChildrens: (ButtonElement | JSX.Element)[] = [];
+  const otherChildrens: ReactNode[] = [];
   const { styles } = useTheme(buildStyles);
   React.Children.forEach(children, (child) => {
-    if (!child) {
-      return;
-    }
-    if (
-      child.type.name === "DialogTitle" ||
-      child.type.displayName === "DialogTitle"
-    ) {
-      titleChildrens.push(child);
-    } else if (
-      child.type.name === "DialogDescription" ||
-      child.type.displayName === "DialogDescription"
-    ) {
-      descriptionChildrens.push(child);
-    } else if (
-      child.type.name === "DialogButton" ||
-      child.type.displayName === "DialogButton"
-    ) {
-      if (Platform.OS === "ios" && buttonChildrens.length > 0) {
-        buttonChildrens.push(
-          <View
-            style={[
-              verticalButtons
-                ? styles.buttonSeparatorVertical
-                : styles.buttonSeparatorHorizontal,
-              buttonSeparatorStyle,
-            ]}
-          />
-        );
+    if (typeof child === "object" && child !== null && "type" in child) {
+      switch (child.type) {
+        case DialogTitle:
+          titleChildrens.push(child as TitleElement);
+          return;
+        case DialogDescription:
+          descriptionChildrens.push(child as DescriptionElement);
+          return;
+        case DialogButton:
+          if (Platform.OS === "ios" && buttonChildrens.length > 0) {
+            buttonChildrens.push(
+              <View
+                style={[
+                  verticalButtons
+                    ? styles.buttonSeparatorVertical
+                    : styles.buttonSeparatorHorizontal,
+                  buttonSeparatorStyle,
+                ]}
+              />
+            );
+          }
+          buttonChildrens.push(child as ButtonElement);
+          return;
       }
-      buttonChildrens.push(child);
-    } else {
-      otherChildrens.push(child);
     }
+    otherChildrens.push(child);
   });
   return (
     <Modal
@@ -133,16 +137,15 @@ const DialogContainer: React.FC<DialogContainerProps> = (props) => {
 
 DialogContainer.propTypes = {
   blurComponentIOS: PropTypes.node,
-  buttonSeparatorStyle: PropTypes.object,
-  contentStyle: PropTypes.object,
-  footerStyle: PropTypes.object,
-  headerStyle: PropTypes.object,
-  blurStyle: PropTypes.object,
+  buttonSeparatorStyle: ViewPropTypes.style,
+  contentStyle: ViewPropTypes.style,
+  footerStyle: ViewPropTypes.style,
+  headerStyle: ViewPropTypes.style,
+  blurStyle: ViewPropTypes.style,
   visible: PropTypes.bool,
   verticalButtons: PropTypes.bool,
   onBackdropPress: PropTypes.func,
   keyboardVerticalOffset: PropTypes.number,
-  // @ts-expect-error: PropType allows strings and the Typescript interface does not
   children: PropTypes.node.isRequired,
 };
 

diff --git a/src/Description.tsx b/src/Description.tsx
@@ -1,20 +1,15 @@
 import * as React from "react";
-import PropTypes from "prop-types";
-import { ReactNode } from "react";
 import {
   Platform,
   StyleSheet,
   Text,
   PlatformColor,
-  ViewStyle,
   TextPropTypes,
+  TextProps,
 } from "react-native";
 import useTheme, { StyleBuilder } from "./useTheme";
 
-export interface DialogDescriptionProps {
-  style?: ViewStyle;
-  children: ReactNode;
-}
+export type DialogDescriptionProps = TextProps;
 
 const DialogDescription: React.FC<DialogDescriptionProps> = (props) => {
   const { style, children, ...nodeProps } = props;
@@ -27,10 +22,7 @@ const DialogDescription: React.FC<DialogDescriptionProps> = (props) => {
   );
 };
 
-DialogDescription.propTypes = {
-  ...TextPropTypes,
-  style: PropTypes.any,
-};
+DialogDescription.propTypes = TextPropTypes;
 
 DialogDescription.displayName = "DialogDescription";
 

diff --git a/src/Input.tsx b/src/Input.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { LegacyRef } from "react";
+import { LegacyRef, ReactNode } from "react";
 import {
   Platform,
   StyleSheet,
@@ -10,13 +10,14 @@ import {
   TextInputProps,
   ViewStyle,
   ViewPropTypes,
+  StyleProp,
 } from "react-native";
 import useTheme, { StyleBuilder } from "./useTheme";
 import PropTypes from "prop-types";
 
 export interface DialogInputProps extends TextInputProps {
-  label?: string;
-  wrapperStyle?: ViewStyle;
+  label?: ReactNode;
+  wrapperStyle?: StyleProp<ViewStyle>;
   textInputRef?: LegacyRef<TextInput>;
 }
 
@@ -65,9 +66,8 @@ const DialogInput: React.FC<DialogInputProps> = (props) => {
 DialogInput.propTypes = {
   ...ViewPropTypes,
   label: PropTypes.string,
-  style: PropTypes.any,
   textInputRef: PropTypes.any,
-  wrapperStyle: PropTypes.any,
+  wrapperStyle: ViewPropTypes.style,
   numberOfLines: PropTypes.number,
   multiline: PropTypes.bool,
 };

diff --git a/src/Modal.tsx b/src/Modal.tsx
@@ -7,8 +7,10 @@ import {
   Modal as ReactNativeModal,
   ModalProps as ReactNativeModalProps,
   Platform,
+  StyleProp,
   StyleSheet,
   TouchableWithoutFeedback,
+  ViewPropTypes,
   ViewStyle,
 } from "react-native";
 
@@ -61,7 +63,7 @@ export interface ModalProps extends ReactNativeModalProps {
   onBackdropPress?: () => void;
   onHide?: () => void;
   visible?: boolean;
-  contentStyle: ViewStyle;
+  contentStyle?: StyleProp<ViewStyle>;
 }
 
 interface ModalState {
@@ -74,7 +76,7 @@ export class Modal extends Component<ModalProps, ModalState> {
     onBackdropPress: PropTypes.func,
     onHide: PropTypes.func,
     visible: PropTypes.bool,
-    contentStyle: PropTypes.any,
+    contentStyle: ViewPropTypes.style,
   };
 
   static defaultProps: Partial<ModalProps> = {
@@ -142,8 +144,12 @@ export class Modal extends Component<ModalProps, ModalState> {
   };
 
   render() {
-    const { children, onBackdropPress, contentStyle, ...otherProps } =
-      this.props;
+    const {
+      children,
+      onBackdropPress,
+      contentStyle,
+      ...otherProps
+    } = this.props;
     const { currentAnimation, visible } = this.state;
 
     const backdropAnimatedStyle = {

diff --git a/src/Switch.tsx b/src/Switch.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import { ReactNode } from "react";
 import {
   Platform,
   StyleSheet,
@@ -13,7 +14,7 @@ import useTheme, { StyleBuilder } from "./useTheme";
 import PropTypes from "prop-types";
 
 export interface DialogSwitchProps extends SwitchProps {
-  label?: string;
+  label?: ReactNode;
 }
 
 const DialogSwitch: React.FC<DialogSwitchProps> = (props) => {
@@ -29,7 +30,7 @@ const DialogSwitch: React.FC<DialogSwitchProps> = (props) => {
 
 DialogSwitch.propTypes = {
   ...ViewPropTypes,
-  label: PropTypes.string,
+  label: PropTypes.node,
 };
 
 DialogSwitch.displayName = "DialogSwitch";

diff --git a/src/Title.tsx b/src/Title.tsx
@@ -1,20 +1,15 @@
-import PropTypes from "prop-types";
 import * as React from "react";
-import { ReactNode } from "react";
 import {
   Platform,
   StyleSheet,
   Text,
   PlatformColor,
-  ViewStyle,
   TextPropTypes,
+  TextProps,
 } from "react-native";
 import useTheme, { StyleBuilder } from "./useTheme";
 
-export interface DialogTitleProps {
-  style?: ViewStyle;
-  children: ReactNode;
-}
+export type DialogTitleProps = TextProps;
 
 const DialogTitle: React.FC<DialogTitleProps> = (props) => {
   const { style, children, ...nodeProps } = props;
@@ -27,11 +22,7 @@ const DialogTitle: React.FC<DialogTitleProps> = (props) => {
   );
 };
 
-DialogTitle.propTypes = {
-  ...TextPropTypes,
-  style: PropTypes.any,
-  children: PropTypes.node.isRequired,
-};
+DialogTitle.propTypes = TextPropTypes;
 
 DialogTitle.displayName = "DialogTitle";