@repzo/widget-react-native 1.0.0 → 1.0.4

package/lib/commonjs/ui/components/AttachmentChips.js

@@ -0,0 +1,135 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AttachmentChips = AttachmentChips;
+var _reactNative = require("react-native");
+var _pickers = require("../../attachments/pickers.js");
+var _i18n = require("../../i18n.js");
+var _theme = require("../styles/theme.js");
+var _rtl = require("../utils/rtl.js");
+var _icons = require("./icons.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Picked-but-unsent attachments above the composer: a thumbnail for images, a
+ * name + size card for everything else, each with its own remove button.
+ */
+
+function AttachmentChips({
+  attachments,
+  disabled,
+  removeLabel,
+  onRemove
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+    horizontal: true,
+    showsHorizontalScrollIndicator: false,
+    keyboardShouldPersistTaps: "handled",
+    style: styles.scroller,
+    contentContainerStyle: styles.row,
+    children: attachments.map(attachment => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [styles.chip, disabled && styles.chipDisabled],
+      children: [(0, _pickers.isImageAttachment)(attachment.contentType) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+        source: {
+          uri: attachment.previewUri
+        },
+        style: styles.thumbnail,
+        resizeMode: "cover",
+        accessible: true,
+        accessibilityLabel: attachment.name,
+        accessibilityIgnoresInvertColors: true
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.file,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.fileName,
+          numberOfLines: 1,
+          children: attachment.name
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.fileSize,
+          children: (0, _pickers.formatBytes)(attachment.size)
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        onPress: () => onRemove(attachment.id),
+        disabled: disabled,
+        accessibilityRole: "button",
+        accessibilityLabel: (0, _i18n.formatLabel)(removeLabel, {
+          name: attachment.name
+        }),
+        accessibilityState: {
+          disabled: !!disabled
+        }
+        // 22pt badge + 11pt on every side = a 44pt target.
+        ,
+        hitSlop: 11,
+        style: ({
+          pressed
+        }) => [styles.remove, pressed && styles.removePressed],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CloseIcon, {
+          size: 10,
+          color: _theme.palette.white
+        })
+      })]
+    }, attachment.id))
+  });
+}
+const CHIP_HEIGHT = 64;
+const styles = _reactNative.StyleSheet.create({
+  scroller: {
+    flexGrow: 0,
+    marginBottom: _theme.spacing.sm
+  },
+  row: {
+    gap: _theme.spacing.sm
+  },
+  chip: {
+    height: CHIP_HEIGHT,
+    borderRadius: _theme.radius.md,
+    overflow: 'hidden',
+    backgroundColor: _theme.palette.surfaceAlt,
+    borderWidth: _reactNative.StyleSheet.hairlineWidth,
+    borderColor: _theme.palette.border
+  },
+  chipDisabled: {
+    opacity: 0.5
+  },
+  thumbnail: {
+    width: CHIP_HEIGHT,
+    height: CHIP_HEIGHT
+  },
+  file: {
+    width: 156,
+    height: CHIP_HEIGHT,
+    justifyContent: 'center',
+    paddingStart: _theme.spacing.md,
+    // Clear of the remove badge in the top corner.
+    paddingEnd: _theme.spacing.xl + _theme.spacing.sm
+  },
+  fileName: {
+    textAlign: _rtl.START_ALIGN,
+    fontSize: _theme.fontSize.meta,
+    fontWeight: '600',
+    color: _theme.palette.ink
+  },
+  fileSize: {
+    textAlign: _rtl.START_ALIGN,
+    fontSize: _theme.fontSize.caption,
+    color: _theme.palette.textMuted,
+    marginTop: 2
+  },
+  remove: {
+    position: 'absolute',
+    top: _theme.spacing.xs,
+    end: _theme.spacing.xs,
+    width: 22,
+    height: 22,
+    borderRadius: 11,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: (0, _theme.withAlpha)(_theme.palette.ink, 0.72)
+  },
+  removePressed: {
+    opacity: 0.7
+  }
+});
+//# sourceMappingURL=AttachmentChips.js.map

package/lib/commonjs/ui/components/AttachmentChips.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_pickers","_i18n","_theme","_rtl","_icons","_jsxRuntime","AttachmentChips","attachments","disabled","removeLabel","onRemove","jsx","ScrollView","horizontal","showsHorizontalScrollIndicator","keyboardShouldPersistTaps","style","styles","scroller","contentContainerStyle","row","children","map","attachment","jsxs","View","chip","chipDisabled","isImageAttachment","contentType","Image","source","uri","previewUri","thumbnail","resizeMode","accessible","accessibilityLabel","name","accessibilityIgnoresInvertColors","file","Text","fileName","numberOfLines","fileSize","formatBytes","size","Pressable","onPress","id","accessibilityRole","formatLabel","accessibilityState","hitSlop","pressed","remove","removePressed","CloseIcon","color","palette","white","CHIP_HEIGHT","StyleSheet","create","flexGrow","marginBottom","spacing","sm","gap","height","borderRadius","radius","md","overflow","backgroundColor","surfaceAlt","borderWidth","hairlineWidth","borderColor","border","opacity","width","justifyContent","paddingStart","paddingEnd","xl","textAlign","START_ALIGN","fontSize","meta","fontWeight","ink","caption","textMuted","marginTop","position","top","xs","end","alignItems","withAlpha"],"sourceRoot":"../../../../src","sources":["ui/components/AttachmentChips.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/ui/components/AttachmentMenu.js

@@ -0,0 +1,125 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AttachmentMenu = AttachmentMenu;
+exports.showNativeAttachmentMenu = showNativeAttachmentMenu;
+var _reactNative = require("react-native");
+var _useWidgetInsets = require("../hooks/use-widget-insets.js");
+var _theme = require("../styles/theme.js");
+var _rtl = require("../utils/rtl.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * The attach button's choice of source.
+ *
+ * iOS gets the native action sheet. Android has no equivalent (`Alert` caps at
+ * three buttons, and three sources plus Cancel is four), so it gets a small
+ * bottom sheet in its own transparent modal — which also lets the hardware
+ * back button close the sheet rather than the whole widget.
+ */
+
+/**
+ * iOS only: shows the native sheet and calls `onSelect` with the chosen key
+ * (nothing on cancel). Returns false elsewhere, so the caller shows
+ * `AttachmentMenu` instead.
+ */
+function showNativeAttachmentMenu(options, cancelLabel, onSelect) {
+  if (_reactNative.Platform.OS !== 'ios') return false;
+  _reactNative.ActionSheetIOS.showActionSheetWithOptions({
+    options: [...options.map(option => option.label), cancelLabel],
+    cancelButtonIndex: options.length
+  }, index => {
+    const chosen = options[index];
+    if (chosen) onSelect(chosen.key);
+  });
+  return true;
+}
+function AttachmentMenu({
+  visible,
+  options,
+  cancelLabel,
+  onSelect,
+  onClose
+}) {
+  const insets = (0, _useWidgetInsets.useWidgetInsets)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Modal, {
+    visible: visible,
+    transparent: true,
+    animationType: "fade",
+    statusBarTranslucent: true,
+    onRequestClose: onClose,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      style: styles.backdrop,
+      onPress: onClose,
+      accessibilityRole: "button",
+      accessibilityLabel: cancelLabel
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [styles.sheet, {
+        paddingBottom: insets.bottom + _theme.spacing.sm
+      }],
+      accessibilityViewIsModal: true,
+      children: [options.map(option => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        onPress: () => onSelect(option.key),
+        accessibilityRole: "button",
+        style: ({
+          pressed
+        }) => [styles.row, pressed && styles.rowPressed],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.rowLabel,
+          children: option.label
+        })
+      }, option.key)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.divider
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        onPress: onClose,
+        accessibilityRole: "button",
+        style: ({
+          pressed
+        }) => [styles.row, pressed && styles.rowPressed],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.rowLabel, styles.cancelLabel],
+          children: cancelLabel
+        })
+      })]
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  backdrop: {
+    ..._reactNative.StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0, 0, 0, 0.32)'
+  },
+  sheet: {
+    position: 'absolute',
+    start: 0,
+    end: 0,
+    bottom: 0,
+    backgroundColor: _theme.palette.white,
+    borderTopLeftRadius: _theme.radius.xl + 4,
+    borderTopRightRadius: _theme.radius.xl + 4,
+    paddingTop: _theme.spacing.sm
+  },
+  row: {
+    minHeight: 52,
+    justifyContent: 'center',
+    paddingHorizontal: _theme.spacing.xl
+  },
+  rowPressed: {
+    backgroundColor: _theme.palette.surfaceAlt
+  },
+  rowLabel: {
+    textAlign: _rtl.START_ALIGN,
+    fontSize: _theme.fontSize.body,
+    color: _theme.palette.ink
+  },
+  cancelLabel: {
+    color: _theme.palette.textMuted
+  },
+  divider: {
+    height: _reactNative.StyleSheet.hairlineWidth,
+    backgroundColor: _theme.palette.border,
+    marginVertical: _theme.spacing.xs
+  }
+});
+//# sourceMappingURL=AttachmentMenu.js.map

package/lib/commonjs/ui/components/AttachmentMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_useWidgetInsets","_theme","_rtl","_jsxRuntime","showNativeAttachmentMenu","options","cancelLabel","onSelect","Platform","OS","ActionSheetIOS","showActionSheetWithOptions","map","option","label","cancelButtonIndex","length","index","chosen","key","AttachmentMenu","visible","onClose","insets","useWidgetInsets","jsxs","Modal","transparent","animationType","statusBarTranslucent","onRequestClose","children","jsx","Pressable","style","styles","backdrop","onPress","accessibilityRole","accessibilityLabel","View","sheet","paddingBottom","bottom","spacing","sm","accessibilityViewIsModal","pressed","row","rowPressed","Text","rowLabel","divider","StyleSheet","create","absoluteFillObject","backgroundColor","position","start","end","palette","white","borderTopLeftRadius","radius","xl","borderTopRightRadius","paddingTop","minHeight","justifyContent","paddingHorizontal","surfaceAlt","textAlign","START_ALIGN","fontSize","body","color","ink","textMuted","height","hairlineWidth","border","marginVertical","xs"],"sourceRoot":"../../../../src","sources":["ui/components/AttachmentMenu.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/ui/components/ImageViewer.js

@@ -0,0 +1,181 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageViewer = ImageViewer;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _useWidgetInsets = require("../hooks/use-widget-insets.js");
+var _theme = require("../styles/theme.js");
+var _icons = require("./icons.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Full-screen viewer for image attachments, so a tap on a photo the agent sent
+ * stays inside the messenger instead of bouncing to the browser. Pinch-to-zoom
+ * uses the native ScrollView zoom (iOS); Android shows the image fitted.
+ */
+
+function ImageViewer({
+  image,
+  labels,
+  onClose,
+  onOpenExternally
+}) {
+  const insets = (0, _useWidgetInsets.useWidgetInsets)();
+  // Keyed by URL so opening another image starts from a clean loading state.
+  const [status, setStatus] = (0, _react.useState)({
+    url: null,
+    state: 'loading'
+  });
+  const state = status.url === image?.url ? status.state : 'loading';
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
+    visible: !!image,
+    transparent: true,
+    animationType: "fade",
+    statusBarTranslucent: true,
+    onRequestClose: onClose,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.backdrop,
+      accessibilityViewIsModal: true,
+      children: [image ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+        style: styles.fill,
+        contentContainerStyle: styles.center,
+        maximumZoomScale: 4,
+        minimumZoomScale: 1,
+        centerContent: true,
+        showsHorizontalScrollIndicator: false,
+        showsVerticalScrollIndicator: false,
+        bouncesZoom: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+          source: {
+            uri: image.url
+          },
+          style: styles.image,
+          resizeMode: "contain",
+          accessibilityLabel: image.name,
+          accessibilityIgnoresInvertColors: true,
+          onLoad: () => setStatus({
+            url: image.url,
+            state: 'ready'
+          }),
+          onError: () => setStatus({
+            url: image.url,
+            state: 'failed'
+          })
+        })
+      }) : null, image && state === 'loading' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+        style: _reactNative.StyleSheet.absoluteFill,
+        color: _theme.palette.white
+      }) : null, image && state === 'failed' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: [_reactNative.StyleSheet.absoluteFill, styles.center, styles.failed],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.failedText,
+          children: labels.loadFailed
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+          onPress: () => onOpenExternally(image.url),
+          accessibilityRole: "button",
+          style: ({
+            pressed
+          }) => [styles.externalButton, pressed && styles.pressed],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.externalLabel,
+            children: labels.openExternally
+          })
+        })]
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: [styles.header, {
+          paddingTop: insets.top + _theme.spacing.sm
+        }],
+        pointerEvents: "box-none",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.title,
+          numberOfLines: 1,
+          children: image?.name ?? ''
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+          onPress: onClose,
+          accessibilityRole: "button",
+          accessibilityLabel: labels.close,
+          hitSlop: 12,
+          style: ({
+            pressed
+          }) => [styles.closeButton, pressed && styles.pressed],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CloseIcon, {
+            size: 20,
+            color: _theme.palette.white
+          })
+        })]
+      })]
+    })
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    backgroundColor: '#000000'
+  },
+  fill: {
+    flex: 1
+  },
+  center: {
+    flexGrow: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  image: {
+    width: '100%',
+    height: '100%'
+  },
+  header: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: _theme.spacing.md,
+    paddingHorizontal: _theme.spacing.lg,
+    paddingBottom: _theme.spacing.sm,
+    backgroundColor: 'rgba(0,0,0,0.45)'
+  },
+  title: {
+    flex: 1,
+    minWidth: 0,
+    color: _theme.palette.white,
+    fontSize: _theme.fontSize.body,
+    fontWeight: '600'
+  },
+  closeButton: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(255,255,255,0.14)'
+  },
+  pressed: {
+    opacity: 0.7
+  },
+  failed: {
+    gap: _theme.spacing.md,
+    paddingHorizontal: _theme.spacing.xxl
+  },
+  failedText: {
+    color: _theme.palette.white,
+    fontSize: _theme.fontSize.body,
+    textAlign: 'center'
+  },
+  externalButton: {
+    paddingHorizontal: _theme.spacing.lg,
+    paddingVertical: _theme.spacing.sm,
+    borderRadius: 999,
+    borderWidth: _reactNative.StyleSheet.hairlineWidth,
+    borderColor: 'rgba(255,255,255,0.5)'
+  },
+  externalLabel: {
+    color: _theme.palette.white,
+    fontSize: _theme.fontSize.meta,
+    fontWeight: _reactNative.Platform.OS === 'ios' ? '600' : 'bold'
+  }
+});
+//# sourceMappingURL=ImageViewer.js.map

package/lib/commonjs/ui/components/ImageViewer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_useWidgetInsets","_theme","_icons","_jsxRuntime","ImageViewer","image","labels","onClose","onOpenExternally","insets","useWidgetInsets","status","setStatus","useState","url","state","jsx","Modal","visible","transparent","animationType","statusBarTranslucent","onRequestClose","children","jsxs","View","style","styles","backdrop","accessibilityViewIsModal","ScrollView","fill","contentContainerStyle","center","maximumZoomScale","minimumZoomScale","centerContent","showsHorizontalScrollIndicator","showsVerticalScrollIndicator","bouncesZoom","Image","source","uri","resizeMode","accessibilityLabel","name","accessibilityIgnoresInvertColors","onLoad","onError","ActivityIndicator","StyleSheet","absoluteFill","color","palette","white","failed","Text","failedText","loadFailed","Pressable","onPress","accessibilityRole","pressed","externalButton","externalLabel","openExternally","header","paddingTop","top","spacing","sm","pointerEvents","title","numberOfLines","close","hitSlop","closeButton","CloseIcon","size","create","flex","backgroundColor","flexGrow","alignItems","justifyContent","width","height","position","left","right","flexDirection","gap","md","paddingHorizontal","lg","paddingBottom","minWidth","fontSize","body","fontWeight","borderRadius","opacity","xxl","textAlign","paddingVertical","borderWidth","hairlineWidth","borderColor","meta","Platform","OS"],"sourceRoot":"../../../../src","sources":["ui/components/ImageViewer.tsx"],"mappings":"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","ignoreList":[]}