@amityco/react-native-social-uikit 4.1.0 → 4.1.1-d7da0c5c.0

package/lib/module/social/features/chat/features/shared/components/ImageViewer/styles.js

@@ -0,0 +1,66 @@
+// Styles for ImageViewer — the header/footer chrome layered over
+// react-native-image-viewing. Mirrors MediaViewer's bars (padding 1rem→16, buttons
+// 32/40, radius 9999). SafeArea top/bottom padding keeps the bars clear of the notch
+// and home indicator since the viewer renders edge-to-edge.
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../../../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../../../../../core/design/tokens/amity-color-tokens';
+export const useStyles = () => {
+  const token = useToken();
+  const styles = StyleSheet.create({
+    topBar: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      paddingHorizontal: 16,
+      paddingTop: 44,
+      paddingBottom: 16,
+      // Web MediaViewer bars: rgb(0 0 0 / 50%) (.mediaViewer__topBar/__bottomBar).
+      backgroundColor: 'rgba(0, 0, 0, 0.5)'
+    },
+    bottomBar: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingHorizontal: 16,
+      paddingTop: 16,
+      paddingBottom: 32,
+      // Web MediaViewer bars: rgb(0 0 0 / 50%) (.mediaViewer__topBar/__bottomBar).
+      backgroundColor: 'rgba(0, 0, 0, 0.5)'
+    },
+    // Host for the chat toast mounted inside react-native-image-viewing's Modal
+    // (the global <Toast /> is outside it and renders beneath the native Modal
+    // layer). Anchored above the bottom bar (40 icon + 16 top + 32 bottom = 88).
+    toastLayer: {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      bottom: 88,
+      zIndex: 4
+    },
+    closeButton: {
+      width: 32,
+      height: 32,
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 4,
+      borderRadius: 9999,
+      backgroundColor: token(AmityColorToken.SurfaceIconButtonTransparentPrimaryEnabled)
+    },
+    bottomIconButton: {
+      width: 40,
+      height: 40,
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 8,
+      borderRadius: 9999,
+      backgroundColor: token(AmityColorToken.SurfaceIconButtonTransparentPrimaryEnabled)
+    }
+  });
+  return {
+    styles,
+    token
+  };
+};
+//# sourceMappingURL=styles.js.map

package/lib/module/social/features/chat/features/shared/components/ImageViewer/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","useToken","AmityColorToken","useStyles","token","styles","create","topBar","flexDirection","alignItems","justifyContent","paddingHorizontal","paddingTop","paddingBottom","backgroundColor","bottomBar","toastLayer","position","left","right","bottom","zIndex","closeButton","width","height","padding","borderRadius","SurfaceIconButtonTransparentPrimaryEnabled","bottomIconButton"],"sourceRoot":"../../../../../../../../../src","sources":["social/features/chat/features/shared/components/ImageViewer/styles.ts"],"mappings":"AAAA;AACA;AACA;AACA;;AAEA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,QAAQ,QAAQ,iDAAiD;AAC1E,SAASC,eAAe,QAAQ,4DAA4D;AAE5F,OAAO,MAAMC,SAAS,GAAGA,CAAA,KAAM;EAC7B,MAAMC,KAAK,GAAGH,QAAQ,CAAC,CAAC;EAExB,MAAMI,MAAM,GAAGL,UAAU,CAACM,MAAM,CAAC;IAC/BC,MAAM,EAAE;MACNC,aAAa,EAAE,KAAK;MACpBC,UAAU,EAAE,QAAQ;MACpBC,cAAc,EAAE,YAAY;MAC5BC,iBAAiB,EAAE,EAAE;MACrBC,UAAU,EAAE,EAAE;MACdC,aAAa,EAAE,EAAE;MACjB;MACAC,eAAe,EAAE;IACnB,CAAC;IACDC,SAAS,EAAE;MACTP,aAAa,EAAE,KAAK;MACpBC,UAAU,EAAE,QAAQ;MACpBC,cAAc,EAAE,eAAe;MAC/BC,iBAAiB,EAAE,EAAE;MACrBC,UAAU,EAAE,EAAE;MACdC,aAAa,EAAE,EAAE;MACjB;MACAC,eAAe,EAAE;IACnB,CAAC;IACD;IACA;IACA;IACAE,UAAU,EAAE;MACVC,QAAQ,EAAE,UAAU;MACpBC,IAAI,EAAE,CAAC;MACPC,KAAK,EAAE,CAAC;MACRC,MAAM,EAAE,EAAE;MACVC,MAAM,EAAE;IACV,CAAC;IACDC,WAAW,EAAE;MACXC,KAAK,EAAE,EAAE;MACTC,MAAM,EAAE,EAAE;MACVf,UAAU,EAAE,QAAQ;MACpBC,cAAc,EAAE,QAAQ;MACxBe,OAAO,EAAE,CAAC;MACVC,YAAY,EAAE,IAAI;MAClBZ,eAAe,EAAEV,KAAK,CACpBF,eAAe,CAACyB,0CAClB;IACF,CAAC;IACDC,gBAAgB,EAAE;MAChBL,KAAK,EAAE,EAAE;MACTC,MAAM,EAAE,EAAE;MACVf,UAAU,EAAE,QAAQ;MACpBC,cAAc,EAAE,QAAQ;MACxBe,OAAO,EAAE,CAAC;MACVC,YAAY,EAAE,IAAI;MAClBZ,eAAe,EAAEV,KAAK,CACpBF,eAAe,CAACyB,0CAClB;IACF;EACF,CAAC,CAAC;EAEF,OAAO;IAAEtB,MAAM;IAAED;EAAM,CAAC;AAC1B,CAAC","ignoreList":[]}

package/lib/module/social/features/chat/features/shared/components/MediaViewer/MediaViewer.js

@@ -0,0 +1,86 @@
+// MediaViewer — ported from AmityUiKitWeb chat/features/shared/components/MediaViewer.
+// Full-screen media shell: a dark backdrop, a top bar with a close button, a centered
+// stage for arbitrary media (children), and a bottom bar with optional delete (own
+// message only) + save actions. Web used react-aria ModalOverlay/Modal/Dialog; RN uses
+// the native Modal. Used by VideoPlayer; images use react-native-image-viewing instead.
+
+// 1. React / RN imports
+
+import { Modal, Pressable, View } from 'react-native';
+
+// 2. Internal imports
+import { AmityIcon } from '../../../../../../../core/design/icons';
+import { AmityColorToken } from '../../../../../../../core/design/tokens/amity-color-tokens';
+import { useString } from '../../../../../../../core/localization';
+import Toast from '../../../../../../components/Toast';
+import { useStyles } from './styles';
+
+// 3. Types
+
+// 4. Named function component
+export function MediaViewer({
+  accessibilityLabel,
+  onClose,
+  children,
+  isOwn = false,
+  onDelete,
+  deleteAccessibilityLabel,
+  onSave,
+  saveAccessibilityLabel
+}) {
+  const {
+    styles
+  } = useStyles();
+  const deleteLabel = useString('amity_chat_option_delete');
+  const saveLabel = useString('amity_chat_action_save');
+  const canDelete = isOwn && !!onDelete;
+  const canSave = !!onSave;
+  return /*#__PURE__*/React.createElement(Modal, {
+    visible: true,
+    transparent: false,
+    animationType: "fade",
+    onRequestClose: onClose,
+    statusBarTranslucent: true
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.overlay,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityViewIsModal: true
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.stage
+  }, children), /*#__PURE__*/React.createElement(View, {
+    style: styles.topBar
+  }, /*#__PURE__*/React.createElement(Pressable, {
+    style: styles.closeButton,
+    onPress: onClose,
+    accessibilityRole: "button",
+    accessibilityLabel: "Close"
+  }, /*#__PURE__*/React.createElement(AmityIcon, {
+    name: "cross-r",
+    size: 24,
+    tokenColor: AmityColorToken.IconIconButtonTransparentPrimaryDefault
+  }))), /*#__PURE__*/React.createElement(View, {
+    style: styles.bottomBar
+  }, canDelete ? /*#__PURE__*/React.createElement(Pressable, {
+    style: styles.bottomIconButton,
+    onPress: onDelete,
+    accessibilityRole: "button",
+    accessibilityLabel: deleteAccessibilityLabel ?? deleteLabel
+  }, /*#__PURE__*/React.createElement(AmityIcon, {
+    name: "trash-r",
+    size: 24,
+    tokenColor: AmityColorToken.IconIconButtonTransparentPrimaryDefault
+  })) : /*#__PURE__*/React.createElement(View, null), canSave ? /*#__PURE__*/React.createElement(Pressable, {
+    style: styles.bottomIconButton,
+    onPress: onSave,
+    accessibilityRole: "button",
+    accessibilityLabel: saveAccessibilityLabel ?? saveLabel
+  }, /*#__PURE__*/React.createElement(AmityIcon, {
+    name: "arrow-down-to-bracket-r",
+    size: 24,
+    tokenColor: AmityColorToken.IconIconButtonTransparentPrimaryDefault
+  })) : /*#__PURE__*/React.createElement(View, null)), /*#__PURE__*/React.createElement(View, {
+    pointerEvents: "box-none",
+    style: styles.toastLayer
+  }, /*#__PURE__*/React.createElement(Toast, null))));
+}
+//# sourceMappingURL=MediaViewer.js.map

package/lib/module/social/features/chat/features/shared/components/MediaViewer/MediaViewer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Modal","Pressable","View","AmityIcon","AmityColorToken","useString","Toast","useStyles","MediaViewer","accessibilityLabel","onClose","children","isOwn","onDelete","deleteAccessibilityLabel","onSave","saveAccessibilityLabel","styles","deleteLabel","saveLabel","canDelete","canSave","React","createElement","visible","transparent","animationType","onRequestClose","statusBarTranslucent","style","overlay","accessibilityViewIsModal","stage","topBar","closeButton","onPress","accessibilityRole","name","size","tokenColor","IconIconButtonTransparentPrimaryDefault","bottomBar","bottomIconButton","pointerEvents","toastLayer"],"sourceRoot":"../../../../../../../../../src","sources":["social/features/chat/features/shared/components/MediaViewer/MediaViewer.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/social/features/chat/features/shared/components/MediaViewer/index.js

@@ -0,0 +1,2 @@
+export { MediaViewer } from './MediaViewer';
+//# sourceMappingURL=index.js.map

package/lib/module/social/features/chat/features/shared/components/MediaViewer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["MediaViewer"],"sourceRoot":"../../../../../../../../../src","sources":["social/features/chat/features/shared/components/MediaViewer/index.ts"],"mappings":"AAAA,SAASA,WAAW,QAAQ,eAAe","ignoreList":[]}

package/lib/module/social/features/chat/features/shared/components/MediaViewer/styles.js

@@ -0,0 +1,90 @@
+// Styles for MediaViewer — ported from AmityUiKitWeb MediaViewer.module.css.
+// Geometry: bars padding 1rem→16; close button 2rem→32; bottom icon button 2.5rem→40;
+// icons 1.5rem→24; radius 9999→9999. Backdrop and bars follow web's literals rather
+// than tokens (web hardcodes them too, and the token set ships no opaque black):
+// overlay rgb(0,0,0), bars rgba(0,0,0,0.5). rgb()/rgba() not hex, per the no-hex gate.
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../../../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../../../../../core/design/tokens/amity-color-tokens';
+export const useStyles = () => {
+  const token = useToken();
+  const styles = StyleSheet.create({
+    overlay: {
+      flex: 1,
+      // Web .mediaViewer__overlay is solid black, so no chat content shows
+      // through. This used to be SurfaceBadgeSemanticBadgeGeneralDuration, an
+      // unrelated badge token at 60% black that left the backdrop translucent.
+      backgroundColor: 'rgb(0, 0, 0)'
+    },
+    stage: {
+      ...StyleSheet.absoluteFillObject,
+      alignItems: 'center',
+      justifyContent: 'center',
+      overflow: 'hidden'
+    },
+    topBar: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      padding: 16,
+      // Web .mediaViewer__topBar/__bottomBar: rgb(0 0 0 / 50%). The previous
+      // badge token resolved to the same 50%, but expressing it as a literal
+      // matches ImageViewer (3b2e546c) and drops the unrelated token.
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      zIndex: 3
+    },
+    bottomBar: {
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      right: 0,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      padding: 16,
+      // Web .mediaViewer__topBar/__bottomBar: rgb(0 0 0 / 50%). The previous
+      // badge token resolved to the same 50%, but expressing it as a literal
+      // matches ImageViewer (3b2e546c) and drops the unrelated token.
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      zIndex: 3
+    },
+    // Host for the chat toast mounted inside this Modal (the global <Toast /> is
+    // outside it and would render beneath the native Modal layer). Sits above the
+    // bottom bar (40 icon + 16*2 padding = 72) so save success/failure stays readable.
+    toastLayer: {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      bottom: 72,
+      zIndex: 4
+    },
+    closeButton: {
+      width: 32,
+      height: 32,
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 4,
+      borderRadius: 9999,
+      backgroundColor: token(AmityColorToken.SurfaceIconButtonTransparentPrimaryEnabled)
+    },
+    bottomIconButton: {
+      width: 40,
+      height: 40,
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 8,
+      borderRadius: 9999,
+      backgroundColor: token(AmityColorToken.SurfaceIconButtonTransparentPrimaryEnabled)
+    }
+  });
+  return {
+    styles,
+    token
+  };
+};
+//# sourceMappingURL=styles.js.map

package/lib/module/social/features/chat/features/shared/components/MediaViewer/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","useToken","AmityColorToken","useStyles","token","styles","create","overlay","flex","backgroundColor","stage","absoluteFillObject","alignItems","justifyContent","overflow","topBar","position","top","left","right","flexDirection","padding","zIndex","bottomBar","bottom","toastLayer","closeButton","width","height","borderRadius","SurfaceIconButtonTransparentPrimaryEnabled","bottomIconButton"],"sourceRoot":"../../../../../../../../../src","sources":["social/features/chat/features/shared/components/MediaViewer/styles.ts"],"mappings":"AAAA;AACA;AACA;AACA;AACA;;AAEA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,QAAQ,QAAQ,iDAAiD;AAC1E,SAASC,eAAe,QAAQ,4DAA4D;AAE5F,OAAO,MAAMC,SAAS,GAAGA,CAAA,KAAM;EAC7B,MAAMC,KAAK,GAAGH,QAAQ,CAAC,CAAC;EAExB,MAAMI,MAAM,GAAGL,UAAU,CAACM,MAAM,CAAC;IAC/BC,OAAO,EAAE;MACPC,IAAI,EAAE,CAAC;MACP;MACA;MACA;MACAC,eAAe,EAAE;IACnB,CAAC;IACDC,KAAK,EAAE;MACL,GAAGV,UAAU,CAACW,kBAAkB;MAChCC,UAAU,EAAE,QAAQ;MACpBC,cAAc,EAAE,QAAQ;MACxBC,QAAQ,EAAE;IACZ,CAAC;IACDC,MAAM,EAAE;MACNC,QAAQ,EAAE,UAAU;MACpBC,GAAG,EAAE,CAAC;MACNC,IAAI,EAAE,CAAC;MACPC,KAAK,EAAE,CAAC;MACRC,aAAa,EAAE,KAAK;MACpBR,UAAU,EAAE,QAAQ;MACpBC,cAAc,EAAE,YAAY;MAC5BQ,OAAO,EAAE,EAAE;MACX;MACA;MACA;MACAZ,eAAe,EAAE,oBAAoB;MACrCa,MAAM,EAAE;IACV,CAAC;IACDC,SAAS,EAAE;MACTP,QAAQ,EAAE,UAAU;MACpBQ,MAAM,EAAE,CAAC;MACTN,IAAI,EAAE,CAAC;MACPC,KAAK,EAAE,CAAC;MACRC,aAAa,EAAE,KAAK;MACpBR,UAAU,EAAE,QAAQ;MACpBC,cAAc,EAAE,eAAe;MAC/BQ,OAAO,EAAE,EAAE;MACX;MACA;MACA;MACAZ,eAAe,EAAE,oBAAoB;MACrCa,MAAM,EAAE;IACV,CAAC;IACD;IACA;IACA;IACAG,UAAU,EAAE;MACVT,QAAQ,EAAE,UAAU;MACpBE,IAAI,EAAE,CAAC;MACPC,KAAK,EAAE,CAAC;MACRK,MAAM,EAAE,EAAE;MACVF,MAAM,EAAE;IACV,CAAC;IACDI,WAAW,EAAE;MACXC,KAAK,EAAE,EAAE;MACTC,MAAM,EAAE,EAAE;MACVhB,UAAU,EAAE,QAAQ;MACpBC,cAAc,EAAE,QAAQ;MACxBQ,OAAO,EAAE,CAAC;MACVQ,YAAY,EAAE,IAAI;MAClBpB,eAAe,EAAEL,KAAK,CACpBF,eAAe,CAAC4B,0CAClB;IACF,CAAC;IACDC,gBAAgB,EAAE;MAChBJ,KAAK,EAAE,EAAE;MACTC,MAAM,EAAE,EAAE;MACVhB,UAAU,EAAE,QAAQ;MACpBC,cAAc,EAAE,QAAQ;MACxBQ,OAAO,EAAE,CAAC;MACVQ,YAAY,EAAE,IAAI;MAClBpB,eAAe,EAAEL,KAAK,CACpBF,eAAe,CAAC4B,0CAClB;IACF;EACF,CAAC,CAAC;EAEF,OAAO;IAAEzB,MAAM;IAAED;EAAM,CAAC;AAC1B,CAAC","ignoreList":[]}

package/lib/module/social/features/chat/features/shared/components/MessageFullTextScreen/MessageFullTextScreen.js

@@ -0,0 +1,81 @@
+// MessageFullTextScreen — ported from AmityUiKitWeb features/shared/components/
+// MessageFullTextScreen. The full-screen "see more" long-text view. Web renders a
+// fixed overlay dialog + `linkify-react`; RN uses a full-screen Modal (Android
+// back button === web Escape via onRequestClose) and a small local linkifier that
+// renders URL runs as tappable Text opening the system browser. Header carries a
+// ghost back button, a centered title, and a balancing spacer.
+
+// 1. React / RN imports
+import { Fragment } from 'react';
+import { Linking, Modal, Pressable, ScrollView, View } from 'react-native';
+
+// 2. Internal imports
+import { Typography } from '../../../../../../../core/design/components/Typography';
+import { AmityIcon } from '../../../../../../../core/design/icons';
+import { AmityColorToken } from '../../../../../../../core/design/tokens/amity-color-tokens';
+import { useStyles } from './styles';
+
+// 3. Types
+
+// Matches http(s) URLs and bare www.* runs; kept local so the component is
+// self-contained (no dependency on the legacy PreviewLink util module). The split
+// regex is global (capturing) so URL runs survive `String.split`; a separate
+// non-global regex is used for per-part testing to avoid stateful `lastIndex`.
+const URL_SPLIT_REGEX = /((?:https?:\/\/|www\.)[^\s]+)/gi;
+const URL_TEST_REGEX = /^(?:https?:\/\/|www\.)[^\s]+$/i;
+function openLink(raw) {
+  const href = raw.startsWith('http') ? raw : `https://${raw}`;
+  Linking.openURL(href).catch(() => undefined);
+}
+
+// 4. Named function component
+export function MessageFullTextScreen({
+  visible,
+  text,
+  title,
+  onClose
+}) {
+  const {
+    styles
+  } = useStyles();
+  const parts = text.split(URL_SPLIT_REGEX);
+  return /*#__PURE__*/React.createElement(Modal, {
+    visible: visible,
+    animationType: "slide",
+    onRequestClose: onClose,
+    transparent: false
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.screen
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.header
+  }, /*#__PURE__*/React.createElement(Pressable, {
+    style: styles.backButton,
+    onPress: onClose,
+    accessibilityRole: "button",
+    accessibilityLabel: "Back"
+  }, /*#__PURE__*/React.createElement(AmityIcon, {
+    name: "chevron-left",
+    size: 24,
+    tokenColor: AmityColorToken.IconIconButtonGhostSecondaryDefault
+  })), /*#__PURE__*/React.createElement(Typography, {
+    variant: "titleBold",
+    style: styles.title,
+    numberOfLines: 1
+  }, title), /*#__PURE__*/React.createElement(View, {
+    style: styles.headerSpacer
+  })), /*#__PURE__*/React.createElement(ScrollView, {
+    style: styles.body
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "body",
+    style: styles.text,
+    selectable: true
+  }, parts.map((part, index) => URL_TEST_REGEX.test(part) ? /*#__PURE__*/React.createElement(Typography, {
+    key: `${part}-${index}`,
+    variant: "body",
+    style: [styles.text, styles.link],
+    onPress: () => openLink(part)
+  }, part) : /*#__PURE__*/React.createElement(Fragment, {
+    key: `t-${index}`
+  }, part))))));
+}
+//# sourceMappingURL=MessageFullTextScreen.js.map

package/lib/module/social/features/chat/features/shared/components/MessageFullTextScreen/MessageFullTextScreen.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Fragment","Linking","Modal","Pressable","ScrollView","View","Typography","AmityIcon","AmityColorToken","useStyles","URL_SPLIT_REGEX","URL_TEST_REGEX","openLink","raw","href","startsWith","openURL","catch","undefined","MessageFullTextScreen","visible","text","title","onClose","styles","parts","split","React","createElement","animationType","onRequestClose","transparent","style","screen","header","backButton","onPress","accessibilityRole","accessibilityLabel","name","size","tokenColor","IconIconButtonGhostSecondaryDefault","variant","numberOfLines","headerSpacer","body","selectable","map","part","index","test","key","link"],"sourceRoot":"../../../../../../../../../src","sources":["social/features/chat/features/shared/components/MessageFullTextScreen/MessageFullTextScreen.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/social/features/chat/features/shared/components/MessageFullTextScreen/index.js

@@ -0,0 +1,2 @@
+export { MessageFullTextScreen } from './MessageFullTextScreen';
+//# sourceMappingURL=index.js.map

package/lib/module/social/features/chat/features/shared/components/MessageFullTextScreen/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["MessageFullTextScreen"],"sourceRoot":"../../../../../../../../../src","sources":["social/features/chat/features/shared/components/MessageFullTextScreen/index.ts"],"mappings":"AAAA,SAASA,qBAAqB,QAAQ,yBAAyB","ignoreList":[]}

package/lib/module/social/features/chat/features/shared/components/MessageFullTextScreen/styles.js

@@ -0,0 +1,60 @@
+// Styles for MessageFullTextScreen — ported from MessageFullTextScreen.module.css.
+// Web is a fixed full-viewport overlay; RN uses a full-screen Modal. Geometry:
+// header padding 1rem→16, gap 0.5rem→8; back button / spacer 2rem→32; body
+// padding 1rem→16. Body text is raw CSS in web (17px/24px) — replicated via the
+// Typography `style` override. Web `Surface/Sheets/Background/Default` maps to the
+// RN token `Surface/Sheets/Background/General`.
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../../../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../../../../../core/design/tokens/amity-color-tokens';
+export const useStyles = () => {
+  const token = useToken();
+  const styles = StyleSheet.create({
+    screen: {
+      flex: 1,
+      backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault)
+    },
+    header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+      padding: 16,
+      backgroundColor: token(AmityColorToken.SurfaceSheetsBackgroundGeneral)
+    },
+    backButton: {
+      width: 32,
+      height: 32,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    title: {
+      flex: 1,
+      textAlign: 'center',
+      color: token(AmityColorToken.TextSheetsHeaderTitleDefault)
+    },
+    headerSpacer: {
+      width: 32,
+      height: 32
+    },
+    body: {
+      flex: 1,
+      padding: 16,
+      backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault)
+    },
+    text: {
+      fontSize: 17,
+      lineHeight: 24,
+      color: token(AmityColorToken.TextChatBubbleInboundMessagesDefault)
+    },
+    link: {
+      color: token(AmityColorToken.TextChatBubbleInboundLinkDefault),
+      textDecorationLine: 'underline'
+    }
+  });
+  return {
+    styles,
+    token
+  };
+};
+//# sourceMappingURL=styles.js.map

package/lib/module/social/features/chat/features/shared/components/MessageFullTextScreen/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","useToken","AmityColorToken","useStyles","token","styles","create","screen","flex","backgroundColor","SurfacePageBackgroundDefault","header","flexDirection","alignItems","gap","padding","SurfaceSheetsBackgroundGeneral","backButton","width","height","justifyContent","title","textAlign","color","TextSheetsHeaderTitleDefault","headerSpacer","body","text","fontSize","lineHeight","TextChatBubbleInboundMessagesDefault","link","TextChatBubbleInboundLinkDefault","textDecorationLine"],"sourceRoot":"../../../../../../../../../src","sources":["social/features/chat/features/shared/components/MessageFullTextScreen/styles.ts"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,QAAQ,QAAQ,iDAAiD;AAC1E,SAASC,eAAe,QAAQ,4DAA4D;AAE5F,OAAO,MAAMC,SAAS,GAAGA,CAAA,KAAM;EAC7B,MAAMC,KAAK,GAAGH,QAAQ,CAAC,CAAC;EAExB,MAAMI,MAAM,GAAGL,UAAU,CAACM,MAAM,CAAC;IAC/BC,MAAM,EAAE;MACNC,IAAI,EAAE,CAAC;MACPC,eAAe,EAAEL,KAAK,CAACF,eAAe,CAACQ,4BAA4B;IACrE,CAAC;IACDC,MAAM,EAAE;MACNC,aAAa,EAAE,KAAK;MACpBC,UAAU,EAAE,QAAQ;MACpBC,GAAG,EAAE,CAAC;MACNC,OAAO,EAAE,EAAE;MACXN,eAAe,EAAEL,KAAK,CAACF,eAAe,CAACc,8BAA8B;IACvE,CAAC;IACDC,UAAU,EAAE;MACVC,KAAK,EAAE,EAAE;MACTC,MAAM,EAAE,EAAE;MACVN,UAAU,EAAE,QAAQ;MACpBO,cAAc,EAAE;IAClB,CAAC;IACDC,KAAK,EAAE;MACLb,IAAI,EAAE,CAAC;MACPc,SAAS,EAAE,QAAQ;MACnBC,KAAK,EAAEnB,KAAK,CAACF,eAAe,CAACsB,4BAA4B;IAC3D,CAAC;IACDC,YAAY,EAAE;MACZP,KAAK,EAAE,EAAE;MACTC,MAAM,EAAE;IACV,CAAC;IACDO,IAAI,EAAE;MACJlB,IAAI,EAAE,CAAC;MACPO,OAAO,EAAE,EAAE;MACXN,eAAe,EAAEL,KAAK,CAACF,eAAe,CAACQ,4BAA4B;IACrE,CAAC;IACDiB,IAAI,EAAE;MACJC,QAAQ,EAAE,EAAE;MACZC,UAAU,EAAE,EAAE;MACdN,KAAK,EAAEnB,KAAK,CAACF,eAAe,CAAC4B,oCAAoC;IACnE,CAAC;IACDC,IAAI,EAAE;MACJR,KAAK,EAAEnB,KAAK,CAACF,eAAe,CAAC8B,gCAAgC,CAAC;MAC9DC,kBAAkB,EAAE;IACtB;EACF,CAAC,CAAC;EAEF,OAAO;IAAE5B,MAAM;IAAED;EAAM,CAAC;AAC1B,CAAC","ignoreList":[]}

package/lib/module/social/features/chat/features/shared/components/MessageLinkPreview/MessageLinkPreview.js

@@ -0,0 +1,97 @@
+// MessageLinkPreview — ported from AmityUiKitWeb features/shared/components/
+// MessageLinkPreview. A horizontal URL-preview card: a 96px thumbnail beside a
+// title/domain block. Web resolves metadata via a react-query hook; RN uses the
+// SDK `getLinkPreviewMetadata` through the local useLinkPreview hook. Three
+// states: loading (spinner + skeleton lines), failure (broken glyph + "not
+// available"), ready (image or broken glyph + title/domain). Tapping opens the
+// URL in the system browser.
+
+// 1. React / RN imports
+import { useState } from 'react';
+import { Image, Linking, Pressable, View } from 'react-native';
+
+// 2. Internal imports
+import { Typography } from '../../../../../../../core/design/components/Typography';
+import { Loader } from '../../../../../../../core/design/atoms/Loader';
+import { Skeleton } from '../../../../../../../core/design/components/Skeleton';
+import { AmityIcon } from '../../../../../../../core/design/icons';
+import { AmityColorToken } from '../../../../../../../core/design/tokens/amity-color-tokens';
+import { useString } from '../../../../../../../core/localization';
+import { getHostName, useLinkPreview } from './useLinkPreview';
+import { useStyles } from './styles';
+
+// 3. Types
+
+// 4. Named function component
+export function MessageLinkPreview({
+  url,
+  style
+}) {
+  const {
+    styles
+  } = useStyles();
+  const {
+    data,
+    isLoading,
+    isError
+  } = useLinkPreview(url);
+  const [imageBroken, setImageBroken] = useState(false);
+  const previewUnavailableTitle = useString('amity_chat_preview_not_available');
+  const previewUnavailableSubtitle = useString('amity_chat_bubble_link_preview_no_data');
+  const isPending = isLoading;
+  const isAllNull = data != null && !data.title && !data.domain && !data.imageUrl;
+  const isFailure = !isPending && (isError || isAllNull);
+  const imageUrl = (data === null || data === void 0 ? void 0 : data.imageUrl) ?? '';
+  const title = (data === null || data === void 0 ? void 0 : data.title) ?? '';
+  const domain = (data === null || data === void 0 ? void 0 : data.domain) ?? '';
+  const hasUsableImage = !!imageUrl && !imageBroken;
+  const thumbnailStyle = [styles.thumbnail, isPending ? styles.thumbnailLoading : hasUsableImage ? null : styles.thumbnailBroken];
+  return /*#__PURE__*/React.createElement(Pressable, {
+    style: [styles.root, style],
+    disabled: isPending,
+    accessibilityRole: "button",
+    onPress: () => Linking.openURL(url).catch(() => undefined)
+  }, /*#__PURE__*/React.createElement(View, {
+    style: thumbnailStyle
+  }, isPending ? /*#__PURE__*/React.createElement(Loader.Upload, {
+    size: "medium"
+  }) : hasUsableImage ? /*#__PURE__*/React.createElement(Image, {
+    source: {
+      uri: imageUrl
+    },
+    style: styles.thumbnailImg,
+    resizeMode: "cover",
+    onError: () => setImageBroken(true)
+  }) : /*#__PURE__*/React.createElement(AmityIcon, {
+    name: "image-slash-r",
+    size: 18,
+    tokenColor: AmityColorToken.IconMediaImageBroken
+  })), /*#__PURE__*/React.createElement(View, {
+    style: [styles.info, isPending && styles.infoLoading]
+  }, isPending ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Skeleton, {
+    width: 80,
+    height: 8,
+    borderRadius: 12
+  }), /*#__PURE__*/React.createElement(Skeleton, {
+    width: 54,
+    height: 8,
+    borderRadius: 12
+  })) : isFailure ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
+    variant: "captionBold",
+    style: styles.title,
+    numberOfLines: 3
+  }, previewUnavailableTitle), /*#__PURE__*/React.createElement(Typography, {
+    variant: "captionSmall",
+    style: styles.domain,
+    numberOfLines: 1
+  }, previewUnavailableSubtitle)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
+    variant: "captionBold",
+    style: styles.title,
+    numberOfLines: 3
+  }, title || domain || url), /*#__PURE__*/React.createElement(Typography, {
+    variant: "captionSmall",
+    style: styles.domain,
+    numberOfLines: 1
+  }, domain || getHostName(url)))));
+}
+//# sourceMappingURL=MessageLinkPreview.js.map

package/lib/module/social/features/chat/features/shared/components/MessageLinkPreview/MessageLinkPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useState","Image","Linking","Pressable","View","Typography","Loader","Skeleton","AmityIcon","AmityColorToken","useString","getHostName","useLinkPreview","useStyles","MessageLinkPreview","url","style","styles","data","isLoading","isError","imageBroken","setImageBroken","previewUnavailableTitle","previewUnavailableSubtitle","isPending","isAllNull","title","domain","imageUrl","isFailure","hasUsableImage","thumbnailStyle","thumbnail","thumbnailLoading","thumbnailBroken","React","createElement","root","disabled","accessibilityRole","onPress","openURL","catch","undefined","Upload","size","source","uri","thumbnailImg","resizeMode","onError","name","tokenColor","IconMediaImageBroken","info","infoLoading","Fragment","width","height","borderRadius","variant","numberOfLines"],"sourceRoot":"../../../../../../../../../src","sources":["social/features/chat/features/shared/components/MessageLinkPreview/MessageLinkPreview.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/social/features/chat/features/shared/components/MessageLinkPreview/index.js

@@ -0,0 +1,2 @@
+export { MessageLinkPreview } from './MessageLinkPreview';
+//# sourceMappingURL=index.js.map

package/lib/module/social/features/chat/features/shared/components/MessageLinkPreview/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["MessageLinkPreview"],"sourceRoot":"../../../../../../../../../src","sources":["social/features/chat/features/shared/components/MessageLinkPreview/index.ts"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,sBAAsB","ignoreList":[]}

package/lib/module/social/features/chat/features/shared/components/MessageLinkPreview/styles.js

@@ -0,0 +1,73 @@
+// Styles for MessageLinkPreview — ported from MessageLinkPreview.module.css.
+// Geometry: root radius 0.625rem→10; thumbnail 6rem→96 square; info padding
+// 0.5rem/0.625rem→8/10, gap 0.125rem→2 (loading 0.5rem→8); broken icon 1.125rem→18.
+// Title raw CSS 13/18, domain raw CSS 10/13 — replicated via Typography `style`.
+// The web `data-side` selectors resolve to identical colours, so side has no
+// visual effect in RN.
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../../../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../../../../../core/design/tokens/amity-color-tokens';
+export const useStyles = () => {
+  const token = useToken();
+  const styles = StyleSheet.create({
+    root: {
+      flexDirection: 'row',
+      alignItems: 'stretch',
+      width: '100%',
+      // Web's card is width:100% and gets its width from the bubble expanding to
+      // fit content (CSS block flow). RN flex does NOT expand the bubble that way,
+      // so without a floor the card collapses to the (short) text width. Pin the
+      // floor to the SoT card width (previewLink.geometry.size = 208x104) so the
+      // card renders at its designed width, matching web's rendered result.
+      minWidth: 208,
+      borderRadius: 10,
+      overflow: 'hidden'
+    },
+    thumbnail: {
+      width: 96,
+      height: 96,
+      alignItems: 'center',
+      justifyContent: 'center',
+      overflow: 'hidden'
+    },
+    thumbnailLoading: {
+      backgroundColor: token(AmityColorToken.SurfaceMediaImageLoading)
+    },
+    thumbnailBroken: {
+      backgroundColor: token(AmityColorToken.SurfaceMediaImageBroken)
+    },
+    thumbnailImg: {
+      width: 96,
+      height: 96
+    },
+    info: {
+      flex: 1,
+      minWidth: 0,
+      paddingVertical: 8,
+      paddingHorizontal: 10,
+      justifyContent: 'center',
+      gap: 2,
+      backgroundColor: token(AmityColorToken.SurfaceCardPreviewLinkDefault)
+    },
+    infoLoading: {
+      gap: 8,
+      backgroundColor: token(AmityColorToken.SurfaceCardPreviewLinkSkeleton)
+    },
+    title: {
+      fontSize: 13,
+      lineHeight: 18,
+      color: token(AmityColorToken.TextCardPreviewLinkTitleDefault)
+    },
+    domain: {
+      fontSize: 10,
+      lineHeight: 13,
+      color: token(AmityColorToken.TextCardPreviewLinkDomainDefault)
+    }
+  });
+  return {
+    styles,
+    token
+  };
+};
+//# sourceMappingURL=styles.js.map

package/lib/module/social/features/chat/features/shared/components/MessageLinkPreview/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","useToken","AmityColorToken","useStyles","token","styles","create","root","flexDirection","alignItems","width","minWidth","borderRadius","overflow","thumbnail","height","justifyContent","thumbnailLoading","backgroundColor","SurfaceMediaImageLoading","thumbnailBroken","SurfaceMediaImageBroken","thumbnailImg","info","flex","paddingVertical","paddingHorizontal","gap","SurfaceCardPreviewLinkDefault","infoLoading","SurfaceCardPreviewLinkSkeleton","title","fontSize","lineHeight","color","TextCardPreviewLinkTitleDefault","domain","TextCardPreviewLinkDomainDefault"],"sourceRoot":"../../../../../../../../../src","sources":["social/features/chat/features/shared/components/MessageLinkPreview/styles.ts"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,QAAQ,QAAQ,iDAAiD;AAC1E,SAASC,eAAe,QAAQ,4DAA4D;AAE5F,OAAO,MAAMC,SAAS,GAAGA,CAAA,KAAM;EAC7B,MAAMC,KAAK,GAAGH,QAAQ,CAAC,CAAC;EAExB,MAAMI,MAAM,GAAGL,UAAU,CAACM,MAAM,CAAC;IAC/BC,IAAI,EAAE;MACJC,aAAa,EAAE,KAAK;MACpBC,UAAU,EAAE,SAAS;MACrBC,KAAK,EAAE,MAAM;MACb;MACA;MACA;MACA;MACA;MACAC,QAAQ,EAAE,GAAG;MACbC,YAAY,EAAE,EAAE;MAChBC,QAAQ,EAAE;IACZ,CAAC;IACDC,SAAS,EAAE;MACTJ,KAAK,EAAE,EAAE;MACTK,MAAM,EAAE,EAAE;MACVN,UAAU,EAAE,QAAQ;MACpBO,cAAc,EAAE,QAAQ;MACxBH,QAAQ,EAAE;IACZ,CAAC;IACDI,gBAAgB,EAAE;MAChBC,eAAe,EAAEd,KAAK,CAACF,eAAe,CAACiB,wBAAwB;IACjE,CAAC;IACDC,eAAe,EAAE;MACfF,eAAe,EAAEd,KAAK,CAACF,eAAe,CAACmB,uBAAuB;IAChE,CAAC;IACDC,YAAY,EAAE;MACZZ,KAAK,EAAE,EAAE;MACTK,MAAM,EAAE;IACV,CAAC;IACDQ,IAAI,EAAE;MACJC,IAAI,EAAE,CAAC;MACPb,QAAQ,EAAE,CAAC;MACXc,eAAe,EAAE,CAAC;MAClBC,iBAAiB,EAAE,EAAE;MACrBV,cAAc,EAAE,QAAQ;MACxBW,GAAG,EAAE,CAAC;MACNT,eAAe,EAAEd,KAAK,CAACF,eAAe,CAAC0B,6BAA6B;IACtE,CAAC;IACDC,WAAW,EAAE;MACXF,GAAG,EAAE,CAAC;MACNT,eAAe,EAAEd,KAAK,CAACF,eAAe,CAAC4B,8BAA8B;IACvE,CAAC;IACDC,KAAK,EAAE;MACLC,QAAQ,EAAE,EAAE;MACZC,UAAU,EAAE,EAAE;MACdC,KAAK,EAAE9B,KAAK,CAACF,eAAe,CAACiC,+BAA+B;IAC9D,CAAC;IACDC,MAAM,EAAE;MACNJ,QAAQ,EAAE,EAAE;MACZC,UAAU,EAAE,EAAE;MACdC,KAAK,EAAE9B,KAAK,CAACF,eAAe,CAACmC,gCAAgC;IAC/D;EACF,CAAC,CAAC;EAEF,OAAO;IAAEhC,MAAM;IAAED;EAAM,CAAC;AAC1B,CAAC","ignoreList":[]}