ferns-ui 1.2.2 → 1.2.4

package/src/InfoModalIcon.tsx

@@ -0,0 +1,41 @@
+import React, {FC, useState} from "react";
+import {Pressable} from "react-native";
+
+import {InfoModalIconProps} from "./Common";
+import {Heading} from "./Heading";
+import {Modal} from "./Modal";
+
+export const InfoModalIcon: FC<InfoModalIconProps> = ({
+  infoModalChildren,
+  infoModalSubtitle,
+  infoModalText,
+  infoModalTitle,
+}) => {
+  const [infoModalVisibleState, setInfoModalVisibleState] = useState(false);
+  return (
+    <>
+      <Modal
+        primaryButtonOnClick={() => setInfoModalVisibleState(false)}
+        primaryButtonText="Close"
+        size="md"
+        subtitle={infoModalSubtitle}
+        text={infoModalText}
+        title={infoModalTitle}
+        visible={infoModalVisibleState}
+        onDismiss={() => setInfoModalVisibleState(false)}
+      >
+        {infoModalChildren}
+      </Modal>
+      <Pressable
+        aria-role="button"
+        hitSlop={{top: 10, bottom: 10, left: 10, right: 10}}
+        style={{marginLeft: 8}}
+        onPress={() => setInfoModalVisibleState(true)}
+      >
+        <Heading color="secondaryLight" size="sm">
+          ⓘ
+        </Heading>
+      </Pressable>
+    </>
+  );
+};

package/src/Modal.tsx

@@ -128,7 +128,7 @@ const ModalContent: FC<{
         </View>
       )}
       {children && (
-        <View aria-role="text" style={{marginTop: text ? 0 : 12}}>
+        <View aria-role="text" style={{marginTop: text ? 0 : 12, width: "100%"}}>
           {children}
         </View>
       )}

package/src/index.tsx

@@ -13,6 +13,7 @@ export * from "./CheckBox";
 export * from "./Common";
 export * from "./Constants";
 export * from "./CustomSelectField";
+export * from "./DataTable";
 export * from "./DateTimeActionSheet";
 export * from "./DateTimeField";
 export * from "./DateUtilities";
@@ -30,6 +31,7 @@ export * from "./Icon";
 export * from "./IconButton";
 export * from "./Image";
 export * from "./ImageBackground";
+export * from "./InfoModalIcon";
 export * from "./InfoTooltipButton";
 export * from "./Link";
 export * from "./MediaQuery";