fix: pg db timezone, dialog mount child when visible, show non expired link and more

packages/react-native-opentui/index.tsx

@@ -5,13 +5,54 @@ import type {
   PressableProps,
   ScrollViewProps,
   ModalProps,
+
+  StyleProp,
+  ViewStyle,
+
+  LinkingImpl,
 } from "react-native";
 import { useTerminalDimensions } from "@opentui/react";
 import { RGBA } from "@opentui/core";
+import { platform } from "node:os";
+import { exec } from "node:child_process";
 
 const RATIO_WIDTH = 8.433;
 const RATIO_HEIGHT = 17;
 
+function attr<K extends keyof ViewStyle>(
+  style: StyleProp<ViewStyle>,
+  name: K,
+  type: "string"
+): Extract<ViewStyle[K], string> | undefined;
+
+function attr<K extends keyof ViewStyle>(
+  style: StyleProp<ViewStyle>,
+  name: K,
+  type: "number"
+): Extract<ViewStyle[K], number> | undefined;
+
+function attr<K extends keyof ViewStyle>(
+  style: StyleProp<ViewStyle>,
+  name: K,
+  type: "boolean"
+): Extract<ViewStyle[K], boolean> | undefined;
+
+function attr<K extends keyof ViewStyle>(
+  style: StyleProp<ViewStyle>,
+  name: K,
+  type: "string" | "number" | "boolean"
+) {
+  if (!style) return undefined;
+
+  const obj: ViewStyle =
+    Array.isArray(style)
+      ? Object.assign({}, ...style.filter(Boolean))
+      : (style as ViewStyle);
+
+  const v = obj[name];
+  return typeof v === type ? v : undefined;
+}
+
 export function View({ children, style }: ViewProps) {
   const bg = style &&
     'backgroundColor' in style
@@ -25,69 +66,27 @@ export function View({ children, style }: ViewProps) {
     : style.backgroundColor
     : undefined
     : undefined;
-  const flexDirection = style &&
-    'flexDirection' in style
-    ? typeof style.flexDirection == 'string'
-    ? style.flexDirection
-    : undefined
-    : undefined;
-  const flex = style &&
-    'flex' in style
-    ? typeof style.flex == 'number'
-    ? style.flex
-    : undefined
-    : undefined;
-  const flexShrink = style &&
-    'flexShrink' in style
-    ? typeof style.flexShrink == 'number'
-    ? style.flexShrink
-    : undefined
-    : undefined;
-  const overflow = style &&
-    'overflow' in style
-    ? typeof style.overflow == 'string'
-    ? style.overflow
-    : undefined
-    : undefined;
-  const position = style &&
-    'position' in style
-    ? typeof style.position == 'string'
-    ? style.position
-    : undefined
-    : undefined;
-  const justifyContent = style &&
-    'justifyContent' in style
-    ? typeof style.justifyContent == 'string'
-    ? style.justifyContent
-    : undefined
-    : undefined;
-  const alignItems = style &&
-    'alignItems' in style
-    ? typeof style.alignItems == 'string'
-    ? style.alignItems
-    : undefined
-    : undefined;
 
-  const padding = style &&
-    'padding' in style
-    ? typeof style.padding == 'number'
-    ? style.padding
-    : undefined
-    : undefined;
+  const padding = attr(style, 'padding', 'number');
+
+  const props = {
+    overflow: attr(style, 'overflow', 'string'),
+    position: attr(style, 'position', 'string'),
+    alignSelf: attr(style, 'alignSelf', 'string'),
+    alignItems: attr(style, 'alignItems', 'string'),
+    justifyContent: attr(style, 'justifyContent', 'string'),
+    flexShrink: attr(style, 'flexShrink', 'number'),
+    flexDirection: attr(style, 'flexDirection', 'string'),
+    flexGrow: attr(style, 'flex', 'number') || attr(style, 'flexGrow', 'number'),
+  };
 
   return <box
     backgroundColor={bg}
-    flexDirection={flexDirection}
-    flexGrow={flex}
-    overflow={overflow}
-    flexShrink={flexShrink}
-    position={position}
-    justifyContent={justifyContent}
-    alignItems={alignItems}
     paddingTop={padding && Math.round(padding / RATIO_HEIGHT)}
     paddingBottom={padding && Math.round(padding / RATIO_HEIGHT)}
     paddingLeft={padding && Math.round(padding / RATIO_WIDTH)}
     paddingRight={padding && Math.round(padding / RATIO_WIDTH)}
+    {...props}
   >{children}</box>
 }
 
@@ -210,6 +209,18 @@ export const Platform = {
   OS: "tui",
 };
 
+export const Linking = {
+  openURL: async (url: string) => {
+    const cmd =
+      platform() == "darwin"
+        ? `open ${url}`
+        : platform() == "win32"
+        ? `start "" "${url}"`
+        : `xdg-open "${url}"`;
+    exec(cmd);
+  }
+} satisfies Partial<LinkingImpl>;
+
 export default {
   View,
   Text,