@webority/mobile-support 0.0.13 → 0.2.0

package/lib/module/components/Attachments.js

@@ -1,240 +1 @@
-"use strict";
-
-import { AppIcon, IconButton, Spinner, Text, toast, useTheme, ZoomableImage } from '@webority/mobile-ui';
-import { useEffect, useMemo, useState } from 'react';
-import { Image, Modal, Pressable, StyleSheet, View } from 'react-native';
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import { formatBytes, isImage } from "../format.js";
-import { useAttachmentLoader, useAttachmentOpener } from "../SupportProvider.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const AttachmentThumb = ({
-  attachment,
-  onOpen
-}) => {
-  const theme = useTheme();
-  const styles = useMemo(() => buildStyles(theme), [theme]);
-  const load = useAttachmentLoader();
-  const [state, setState] = useState({
-    status: 'loading'
-  });
-  useEffect(() => {
-    let cancelled = false;
-    load(attachment).then(uri => !cancelled && setState({
-      status: 'ready',
-      uri
-    }), () => !cancelled && setState({
-      status: 'error'
-    }));
-    return () => {
-      cancelled = true;
-    };
-  }, [load, attachment]);
-  if (state.status === 'loading') {
-    return /*#__PURE__*/_jsx(View, {
-      style: styles.thumb,
-      testID: `support-attachment-${attachment.id}`,
-      children: /*#__PURE__*/_jsx(Spinner, {
-        size: "sm",
-        accessibilityLabel: `Loading ${attachment.fileName}`
-      })
-    });
-  }
-  if (state.status === 'error') {
-    return /*#__PURE__*/_jsx(View, {
-      style: styles.thumb,
-      accessible: true,
-      accessibilityLabel: `${attachment.fileName} could not be loaded`,
-      testID: `support-attachment-${attachment.id}`,
-      children: /*#__PURE__*/_jsx(Text, {
-        variant: "caption",
-        color: "tertiary",
-        align: "center",
-        children: "Could not load"
-      })
-    });
-  }
-  return /*#__PURE__*/_jsx(Pressable, {
-    onPress: () => onOpen(state.uri, attachment.fileName),
-    accessibilityRole: "imagebutton",
-    accessibilityLabel: `Open ${attachment.fileName}`,
-    testID: `support-attachment-${attachment.id}`,
-    children: /*#__PURE__*/_jsx(Image, {
-      source: {
-        uri: state.uri
-      },
-      style: styles.thumb,
-      resizeMode: "cover"
-    })
-  });
-};
-
-/**
- * A file that is not an image. Tappable when the app gave SupportProvider an
- * `openFile`: it is downloaded through the signed-in client, then handed to the OS.
- */
-const FileRow = ({
-  attachment
-}) => {
-  const theme = useTheme();
-  const styles = useMemo(() => buildStyles(theme), [theme]);
-  const open = useAttachmentOpener();
-  const [opening, setOpening] = useState(false);
-  const label = `${attachment.fileName}, ${formatBytes(attachment.sizeBytes)}`;
-  if (!open) {
-    return /*#__PURE__*/_jsx(Text, {
-      variant: "caption",
-      color: "secondary",
-      testID: `support-file-${attachment.id}`,
-      children: label
-    });
-  }
-  const onPress = async () => {
-    setOpening(true);
-    try {
-      await open(attachment);
-    } catch {
-      toast.error(`Could not open ${attachment.fileName}. Try again.`);
-    } finally {
-      setOpening(false);
-    }
-  };
-  return /*#__PURE__*/_jsxs(Pressable, {
-    onPress: () => void onPress(),
-    disabled: opening,
-    accessibilityRole: "button",
-    accessibilityLabel: `Open ${attachment.fileName}`,
-    accessibilityState: {
-      busy: opening,
-      disabled: opening
-    },
-    style: styles.fileRow,
-    testID: `support-file-${attachment.id}`,
-    children: [/*#__PURE__*/_jsx(AppIcon, {
-      name: "document",
-      size: 16,
-      color: theme.colors.text.link
-    }), /*#__PURE__*/_jsx(Text, {
-      variant: "caption",
-      color: "link",
-      children: label
-    }), opening && /*#__PURE__*/_jsx(Spinner, {
-      size: "sm",
-      accessibilityLabel: `Opening ${attachment.fileName}`
-    })]
-  });
-};
-
-/** A message's files: images as tappable thumbnails, anything else as a file row. */
-export const AttachmentList = ({
-  attachments,
-  onOpenImage
-}) => {
-  const theme = useTheme();
-  const styles = useMemo(() => buildStyles(theme), [theme]);
-  if (attachments.length === 0) {
-    return null;
-  }
-  const images = attachments.filter(a => isImage(a.contentType));
-  const others = attachments.filter(a => !isImage(a.contentType));
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.list,
-    children: [images.length > 0 && /*#__PURE__*/_jsx(View, {
-      style: styles.thumbRow,
-      children: images.map(a => /*#__PURE__*/_jsx(AttachmentThumb, {
-        attachment: a,
-        onOpen: onOpenImage
-      }, a.id))
-    }), others.map(a => /*#__PURE__*/_jsx(FileRow, {
-      attachment: a
-    }, a.id))]
-  });
-};
-
-/** Full-screen view of one image with pinch to zoom. */
-export const ImageViewer = ({
-  image,
-  onClose
-}) => {
-  const theme = useTheme();
-  const styles = useMemo(() => buildStyles(theme), [theme]);
-  return /*#__PURE__*/_jsx(Modal, {
-    visible: image !== null,
-    onRequestClose: onClose,
-    animationType: "fade",
-    transparent: false,
-    children: /*#__PURE__*/_jsxs(GestureHandlerRootView, {
-      style: styles.viewer,
-      testID: "support-image-viewer",
-      children: [image && /*#__PURE__*/_jsx(ZoomableImage, {
-        accessibilityLabel: image.name,
-        style: styles.viewerImageWrap,
-        children: /*#__PURE__*/_jsx(Image, {
-          source: {
-            uri: image.uri
-          },
-          style: styles.viewerImage,
-          resizeMode: "contain"
-        })
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.viewerClose,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          icon: ({
-            color,
-            size
-          }) => /*#__PURE__*/_jsx(AppIcon, {
-            name: "close-circle",
-            color: color,
-            size: size
-          }),
-          accessibilityLabel: "Close image",
-          onPress: onClose,
-          variant: "glass"
-        })
-      })]
-    })
-  });
-};
-const THUMB = 84;
-const buildStyles = theme => StyleSheet.create({
-  list: {
-    gap: theme.spacing.xs,
-    marginTop: theme.spacing.sm
-  },
-  fileRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: theme.spacing.xxs,
-    alignSelf: 'flex-start'
-  },
-  thumbRow: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    gap: theme.spacing.xs
-  },
-  thumb: {
-    width: THUMB,
-    height: THUMB,
-    borderRadius: theme.radius.sm,
-    backgroundColor: theme.colors.background.secondary,
-    alignItems: 'center',
-    justifyContent: 'center',
-    overflow: 'hidden'
-  },
-  viewer: {
-    flex: 1,
-    backgroundColor: theme.colors.background.inverse
-  },
-  viewerImageWrap: {
-    flex: 1
-  },
-  viewerImage: {
-    flex: 1,
-    width: '100%'
-  },
-  viewerClose: {
-    position: 'absolute',
-    top: theme.spacing['2xl'],
-    right: theme.spacing.md
-  }
-});
-//# sourceMappingURL=Attachments.js.map
+"use strict";import{AppIcon,IconButton,Spinner,Text,ToastHost,toast,useTheme,ZoomableImage}from"@webority/mobile-ui";import{useEffect,useMemo,useState}from"react";import{Image,Modal,Pressable,StyleSheet,View}from"react-native";import{GestureHandlerRootView}from"react-native-gesture-handler";import{formatBytes,isImage}from"../format.js";import{useAttachmentLoader,useAttachmentOpener}from"../SupportProvider.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const AttachmentThumb=({attachment:e,onOpen:t})=>{const s=useTheme(),i=useMemo(()=>buildStyles(s),[s]),a=useAttachmentLoader(),[r,o]=useState({status:"loading"});return useEffect(()=>{let t=!1;return a(e).then(e=>!t&&o({status:"ready",uri:e}),()=>!t&&o({status:"error"})),()=>{t=!0}},[a,e]),"loading"===r.status?_jsx(View,{style:i.thumb,testID:`support-attachment-${e.id}`,children:_jsx(Spinner,{size:"sm",accessibilityLabel:`Loading ${e.fileName}`})}):"error"===r.status?_jsx(View,{style:i.thumb,accessible:!0,accessibilityLabel:`${e.fileName} could not be loaded`,testID:`support-attachment-${e.id}`,children:_jsx(Text,{variant:"caption",color:"tertiary",align:"center",children:"Could not load"})}):_jsx(Pressable,{onPress:()=>t(r.uri,e.fileName),accessibilityRole:"imagebutton",accessibilityLabel:`Open ${e.fileName}`,testID:`support-attachment-${e.id}`,children:_jsx(Image,{source:{uri:r.uri},style:i.thumb,resizeMode:"cover"})})},FileRow=({attachment:e})=>{const t=useTheme(),s=useMemo(()=>buildStyles(t),[t]),i=useAttachmentOpener(),[a,r]=useState(!1),o=`${e.fileName}, ${formatBytes(e.sizeBytes)}`;if(!i)return _jsx(Text,{variant:"caption",color:"secondary",testID:`support-file-${e.id}`,children:o});return _jsxs(Pressable,{onPress:()=>{(async()=>{r(!0);try{await i(e)}catch{toast.error(`Could not open ${e.fileName}. Try again.`)}finally{r(!1)}})()},disabled:a,accessibilityRole:"button",accessibilityLabel:`Open ${e.fileName}`,accessibilityState:{busy:a,disabled:a},style:s.fileRow,testID:`support-file-${e.id}`,children:[_jsx(AppIcon,{name:"document",size:16,color:t.colors.text.link}),_jsx(Text,{variant:"caption",color:"link",children:o}),a&&_jsx(Spinner,{size:"sm",accessibilityLabel:`Opening ${e.fileName}`})]})};export const AttachmentList=({attachments:e,onOpenImage:t})=>{const s=useTheme(),i=useMemo(()=>buildStyles(s),[s]);if(0===e.length)return null;const a=e.filter(e=>isImage(e.contentType)),r=e.filter(e=>!isImage(e.contentType));return _jsxs(View,{style:i.list,children:[a.length>0&&_jsx(View,{style:i.thumbRow,children:a.map(e=>_jsx(AttachmentThumb,{attachment:e,onOpen:t},e.id))}),r.map(e=>_jsx(FileRow,{attachment:e},e.id))]})};export const ImageViewer=({image:e,onClose:t})=>{const s=useTheme(),i=useMemo(()=>buildStyles(s),[s]);return _jsx(Modal,{visible:null!==e,onRequestClose:t,animationType:"fade",transparent:!1,children:_jsxs(GestureHandlerRootView,{style:i.viewer,testID:"support-image-viewer",children:[e&&_jsx(ZoomableImage,{accessibilityLabel:e.name,style:i.viewerImageWrap,children:_jsx(Image,{source:{uri:e.uri},style:i.viewerImage,resizeMode:"contain"})}),_jsx(View,{style:i.viewerClose,children:_jsx(IconButton,{icon:({color:e,size:t})=>_jsx(AppIcon,{name:"close-circle",color:e,size:t}),accessibilityLabel:"Close image",onPress:t,variant:"glass"})}),_jsx(ToastHost,{})]})})};const THUMB=84,buildStyles=e=>StyleSheet.create({list:{gap:e.spacing.xs,marginTop:e.spacing.sm},fileRow:{flexDirection:"row",alignItems:"center",gap:e.spacing.xxs,alignSelf:"flex-start"},thumbRow:{flexDirection:"row",flexWrap:"wrap",gap:e.spacing.xs},thumb:{width:84,height:84,borderRadius:e.radius.sm,backgroundColor:e.colors.background.secondary,alignItems:"center",justifyContent:"center",overflow:"hidden"},viewer:{flex:1,backgroundColor:e.colors.background.inverse},viewerImageWrap:{flex:1},viewerImage:{flex:1,width:"100%"},viewerClose:{position:"absolute",top:e.spacing["2xl"],right:e.spacing.md}});

package/lib/module/components/NewSupportTicket.js

@@ -1,205 +1 @@
-"use strict";
-
-import { Button, Input, Select, Spinner, Text, useForm, useTheme } from '@webority/mobile-ui';
-import { useMemo, useState } from 'react';
-import { ScrollView, StyleSheet, View } from 'react-native';
-import { toSupportApiError } from "../client.js";
-import { useCreateSupportTicket, useSupportConfig } from "../SupportProvider.js";
-import { validateBody, validateCategory, validateFiles, validateSubject } from "../validation.js";
-import { PhotoTray } from "./PhotoTray.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const TicketForm = ({
-  config,
-  styles,
-  onCreated,
-  onCancel,
-  initialDraft
-}) => {
-  const createTicket = useCreateSupportTicket();
-  const [photos, setPhotos] = useState([]);
-  const [screenshots, setScreenshots] = useState(initialDraft?.screenshots ?? []);
-  const [filesError, setFilesError] = useState(null);
-  const [submitError, setSubmitError] = useState(null);
-  const form = useForm({
-    initialValues: {
-      category: initialDraft?.category ?? '',
-      subject: initialDraft?.subject ?? '',
-      body: initialDraft?.body ?? ''
-    },
-    validate: {
-      category: v => validateCategory(v, config),
-      subject: v => validateSubject(v, config),
-      body: v => validateBody(v, config)
-    },
-    onSubmit: async values => {
-      const fileProblem = validateFiles([...screenshots, ...photos], config);
-      setFilesError(fileProblem ?? null);
-      if (fileProblem) {
-        return;
-      }
-      setSubmitError(null);
-      try {
-        const created = await createTicket({
-          category: values.category,
-          subject: values.subject.trim(),
-          body: values.body.trim(),
-          pageUrl: initialDraft?.pageUrl,
-          userAgent: initialDraft?.userAgent,
-          appVersion: initialDraft?.appVersion,
-          files: photos,
-          screenshots
-        });
-        onCreated(created);
-      } catch (e) {
-        setSubmitError(toSupportApiError(e).message);
-      }
-    }
-  });
-  const category = form.getFieldProps('category');
-  const subject = form.getFieldProps('subject');
-  const body = form.getFieldProps('body');
-  const attached = screenshots.length + photos.length;
-  return /*#__PURE__*/_jsxs(ScrollView, {
-    contentContainerStyle: styles.content,
-    keyboardShouldPersistTaps: "handled",
-    children: [/*#__PURE__*/_jsx(Text, {
-      variant: "bodySmall",
-      color: "secondary",
-      children: "Tell us what you need. We reply by email and in this ticket."
-    }), /*#__PURE__*/_jsx(Select, {
-      label: "Category",
-      placeholder: "Choose a category",
-      required: true,
-      options: config.categories.map(c => ({
-        label: c,
-        value: c
-      })),
-      value: category.value || undefined,
-      onChange: v => category.setValue(String(v), true),
-      error: category.error,
-      testID: "support-new-category"
-    }), /*#__PURE__*/_jsx(Input, {
-      label: "Subject",
-      placeholder: "A short summary",
-      required: true,
-      maxLength: config.subjectMaxLength,
-      value: subject.value,
-      onChangeText: subject.onChangeText,
-      onBlur: subject.onBlur,
-      error: subject.error,
-      testID: "support-new-subject"
-    }), /*#__PURE__*/_jsx(Input, {
-      label: "Message",
-      placeholder: "What happened, and what did you expect?",
-      required: true,
-      multiline: true,
-      maxLength: config.bodyMaxLength,
-      value: body.value,
-      onChangeText: body.onChangeText,
-      onBlur: body.onBlur,
-      error: body.error,
-      testID: "support-new-body"
-    }), screenshots.length > 0 && /*#__PURE__*/_jsx(PhotoTray, {
-      label: "Screenshot",
-      photos: screenshots,
-      onChange: setScreenshots,
-      remaining: 0,
-      allowAdd: false,
-      maxBytes: config.maxAttachmentBytes,
-      disabled: form.isSubmitting
-    }), /*#__PURE__*/_jsx(PhotoTray, {
-      label: "Photos",
-      photos: photos,
-      onChange: setPhotos,
-      remaining: config.maxAttachmentsPerMessage - attached,
-      maxBytes: config.maxAttachmentBytes,
-      disabled: form.isSubmitting
-    }), /*#__PURE__*/_jsx(Text, {
-      variant: "caption",
-      color: "tertiary",
-      children: `Attach up to ${config.maxAttachmentsPerMessage} files.`
-    }), (filesError || submitError) && /*#__PURE__*/_jsx(Text, {
-      variant: "bodySmall",
-      color: "error",
-      accessibilityLiveRegion: "polite",
-      children: filesError ?? submitError
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.actions,
-      children: [onCancel && /*#__PURE__*/_jsx(Button, {
-        title: "Cancel",
-        variant: "ghost",
-        tone: "neutral",
-        onPress: onCancel,
-        disabled: form.isSubmitting
-      }), /*#__PURE__*/_jsx(Button, {
-        title: "Send ticket",
-        loading: form.isSubmitting,
-        disabled: form.isSubmitting,
-        onPress: form.submit,
-        testID: "support-new-submit"
-      })]
-    })]
-  });
-};
-export const NewSupportTicket = props => {
-  const theme = useTheme();
-  const styles = useMemo(() => buildStyles(theme), [theme]);
-  const {
-    config,
-    loading,
-    error,
-    reload
-  } = useSupportConfig();
-  const testID = props.testID ?? 'support-new-ticket';
-  if (!config) {
-    return /*#__PURE__*/_jsx(View, {
-      style: styles.center,
-      testID: testID,
-      children: loading ? /*#__PURE__*/_jsx(Spinner, {
-        accessibilityLabel: "Loading"
-      }) : /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          variant: "body",
-          color: "error",
-          align: "center",
-          children: error?.message ?? 'Support is not available right now.'
-        }), /*#__PURE__*/_jsx(Button, {
-          title: "Try again",
-          variant: "ghost",
-          onPress: () => void reload()
-        })]
-      })
-    });
-  }
-  return /*#__PURE__*/_jsx(View, {
-    style: styles.root,
-    testID: testID,
-    children: /*#__PURE__*/_jsx(TicketForm, {
-      ...props,
-      config: config,
-      styles: styles
-    })
-  });
-};
-const buildStyles = theme => StyleSheet.create({
-  root: {
-    flex: 1
-  },
-  content: {
-    padding: theme.spacing.md,
-    gap: theme.spacing.md
-  },
-  center: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: theme.spacing.xl,
-    gap: theme.spacing.sm
-  },
-  actions: {
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-    gap: theme.spacing.sm
-  }
-});
-//# sourceMappingURL=NewSupportTicket.js.map
+"use strict";import{Button,Input,Select,Spinner,Text,useForm,useTheme}from"@webority/mobile-ui";import{useMemo,useState}from"react";import{ScrollView,StyleSheet,View}from"react-native";import{toSupportApiError}from"../client.js";import{useCreateSupportTicket,useSupportConfig}from"../SupportProvider.js";import{validateBody,validateCategory,validateFiles,validateSubject}from"../validation.js";import{PhotoTray}from"./PhotoTray.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const TicketForm=({config:e,styles:t,onCreated:o,onCancel:r,initialDraft:a})=>{const s=useCreateSupportTicket(),[n,i]=useState([]),[l,c]=useState(a?.screenshots??[]),[u,d]=useState(null),[p,g]=useState(null),m=useForm({initialValues:{category:a?.category??"",subject:a?.subject??"",body:a?.body??""},validate:{category:t=>validateCategory(t,e),subject:t=>validateSubject(t,e),body:t=>validateBody(t,e)},onSubmit:async t=>{const r=validateFiles([...l,...n],e);if(d(r??null),!r){g(null);try{const e=await s({category:t.category,subject:t.subject.trim(),body:t.body.trim(),pageUrl:a?.pageUrl,userAgent:a?.userAgent,appVersion:a?.appVersion,files:n,screenshots:l});o(e)}catch(e){g(toSupportApiError(e).message)}}}}),h=m.getFieldProps("category"),y=m.getFieldProps("subject"),b=m.getFieldProps("body"),x=l.length+n.length;return _jsxs(ScrollView,{contentContainerStyle:t.content,keyboardShouldPersistTaps:"handled",children:[_jsx(Text,{variant:"bodySmall",color:"secondary",children:"Tell us what you need. We reply by email and in this ticket."}),_jsx(Select,{label:"Category",placeholder:"Choose a category",required:!0,options:e.categories.map(e=>({label:e,value:e})),value:h.value||void 0,onChange:e=>h.setValue(String(e),!0),error:h.error,testID:"support-new-category"}),_jsx(Input,{label:"Subject",placeholder:"A short summary",required:!0,maxLength:e.subjectMaxLength,value:y.value,onChangeText:y.onChangeText,onBlur:y.onBlur,error:y.error,testID:"support-new-subject"}),_jsx(Input,{label:"Message",placeholder:"What happened, and what did you expect?",required:!0,multiline:!0,maxLength:e.bodyMaxLength,value:b.value,onChangeText:b.onChangeText,onBlur:b.onBlur,error:b.error,testID:"support-new-body"}),l.length>0&&_jsx(PhotoTray,{label:"Screenshot",photos:l,onChange:c,remaining:0,allowAdd:!1,maxBytes:e.maxAttachmentBytes,disabled:m.isSubmitting}),_jsx(PhotoTray,{label:"Photos",photos:n,onChange:i,remaining:e.maxAttachmentsPerMessage-x,maxBytes:e.maxAttachmentBytes,disabled:m.isSubmitting}),_jsx(Text,{variant:"caption",color:"tertiary",children:`Attach up to ${e.maxAttachmentsPerMessage} files.`}),(u||p)&&_jsx(Text,{variant:"bodySmall",color:"error",accessibilityLiveRegion:"polite",children:u??p}),_jsxs(View,{style:t.actions,children:[r&&_jsx(Button,{title:"Cancel",variant:"ghost",tone:"neutral",onPress:r,disabled:m.isSubmitting}),_jsx(Button,{title:"Send ticket",loading:m.isSubmitting,disabled:m.isSubmitting,onPress:m.submit,testID:"support-new-submit"})]})]})};export const NewSupportTicket=e=>{const t=useTheme(),o=useMemo(()=>buildStyles(t),[t]),{config:r,loading:a,error:s,reload:n}=useSupportConfig(),i=e.testID??"support-new-ticket";return _jsx(View,r?{style:o.root,testID:i,children:_jsx(TicketForm,{...e,config:r,styles:o})}:{style:o.center,testID:i,children:a?_jsx(Spinner,{accessibilityLabel:"Loading"}):_jsxs(_Fragment,{children:[_jsx(Text,{variant:"body",color:"error",align:"center",children:s?.message??"Support is not available right now."}),_jsx(Button,{title:"Try again",variant:"ghost",onPress:()=>{n()}})]})})};const buildStyles=e=>StyleSheet.create({root:{flex:1},content:{padding:e.spacing.md,gap:e.spacing.md},center:{flex:1,alignItems:"center",justifyContent:"center",padding:e.spacing.xl,gap:e.spacing.sm},actions:{flexDirection:"row",justifyContent:"flex-end",gap:e.spacing.sm}});

package/lib/module/components/PhotoTray.js

@@ -1,136 +1 @@
-"use strict";
-
-import { AppIcon, Button, IconButton, Text, useTheme } from '@webority/mobile-ui';
-import { useMemo, useState } from 'react';
-import { Image, StyleSheet, View } from 'react-native';
-import { pickPhotos } from "../photos.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/** Photos on a message: thumbnails with remove buttons, plus library and camera buttons. */
-export const PhotoTray = ({
-  photos,
-  onChange,
-  remaining,
-  maxBytes,
-  disabled,
-  label,
-  allowAdd = true
-}) => {
-  const theme = useTheme();
-  const styles = useMemo(() => buildStyles(theme), [theme]);
-  const [picking, setPicking] = useState(null);
-  const [error, setError] = useState(null);
-  const add = async source => {
-    setError(null);
-    setPicking(source);
-    try {
-      const picked = await pickPhotos(source, {
-        maxCount: remaining,
-        maxBytes
-      });
-      if (picked.length > 0) {
-        onChange([...photos, ...picked]);
-      }
-    } catch (e) {
-      setError(e instanceof Error && e.name === 'PhotoPermissionError' ? e.message : 'That photo could not be added. Try another one.');
-    } finally {
-      setPicking(null);
-    }
-  };
-  const full = remaining <= 0;
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.root,
-    children: [label ? /*#__PURE__*/_jsx(Text, {
-      variant: "label",
-      color: "secondary",
-      children: label
-    }) : null, photos.length > 0 && /*#__PURE__*/_jsx(View, {
-      style: styles.row,
-      children: photos.map((photo, index) => /*#__PURE__*/_jsxs(View, {
-        style: styles.item,
-        children: [/*#__PURE__*/_jsx(Image, {
-          source: {
-            uri: photo.uri
-          },
-          style: styles.thumb,
-          accessibilityLabel: photo.name
-        }), /*#__PURE__*/_jsx(View, {
-          style: styles.remove,
-          children: /*#__PURE__*/_jsx(IconButton, {
-            size: "sm",
-            variant: "glass",
-            icon: ({
-              color,
-              size
-            }) => /*#__PURE__*/_jsx(AppIcon, {
-              name: "trash",
-              color: color,
-              size: size
-            }),
-            accessibilityLabel: `Remove ${photo.name}`,
-            disabled: disabled,
-            onPress: () => onChange(photos.filter((_, i) => i !== index))
-          })
-        })]
-      }, `${photo.uri}-${index}`))
-    }), allowAdd && /*#__PURE__*/_jsxs(View, {
-      style: styles.actions,
-      children: [/*#__PURE__*/_jsx(Button, {
-        size: "sm",
-        variant: "outline",
-        tone: "neutral",
-        leftIcon: "gallery",
-        title: "Add photo",
-        accessibilityLabel: "Add a photo from your library",
-        loading: picking === 'library',
-        disabled: disabled || full || picking !== null,
-        onPress: () => void add('library')
-      }), /*#__PURE__*/_jsx(Button, {
-        size: "sm",
-        variant: "outline",
-        tone: "neutral",
-        leftIcon: "camera",
-        title: "Take photo",
-        accessibilityLabel: "Take a photo with your camera",
-        loading: picking === 'camera',
-        disabled: disabled || full || picking !== null,
-        onPress: () => void add('camera')
-      })]
-    }), error ? /*#__PURE__*/_jsx(Text, {
-      variant: "caption",
-      color: "error",
-      accessibilityLiveRegion: "polite",
-      children: error
-    }) : null]
-  });
-};
-const THUMB = 72;
-const buildStyles = theme => StyleSheet.create({
-  root: {
-    gap: theme.spacing.xs
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    gap: theme.spacing.xs
-  },
-  item: {
-    width: THUMB,
-    height: THUMB
-  },
-  thumb: {
-    width: THUMB,
-    height: THUMB,
-    borderRadius: theme.radius.sm,
-    backgroundColor: theme.colors.background.secondary
-  },
-  remove: {
-    position: 'absolute',
-    top: theme.spacing.xxs,
-    right: theme.spacing.xxs
-  },
-  actions: {
-    flexDirection: 'row',
-    gap: theme.spacing.sm
-  }
-});
-//# sourceMappingURL=PhotoTray.js.map
+"use strict";import{AppIcon,Button,IconButton,Text,useTheme}from"@webority/mobile-ui";import{useMemo,useState}from"react";import{Image,StyleSheet,View}from"react-native";import{pickPhotos}from"../photos.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const PhotoTray=({photos:e,onChange:t,remaining:o,maxBytes:s,disabled:i,label:a,allowAdd:r=!0})=>{const l=useTheme(),n=useMemo(()=>buildStyles(l),[l]),[c,m]=useState(null),[u,h]=useState(null),add=async i=>{h(null),m(i);try{const a=await pickPhotos(i,{maxCount:o,maxBytes:s});a.length>0&&t([...e,...a])}catch(e){h(e instanceof Error&&"PhotoPermissionError"===e.name?e.message:"That photo could not be added. Try another one.")}finally{m(null)}},d=o<=0;return _jsxs(View,{style:n.root,children:[a?_jsx(Text,{variant:"label",color:"secondary",children:a}):null,e.length>0&&_jsx(View,{style:n.row,children:e.map((o,s)=>_jsxs(View,{style:n.item,children:[_jsx(Image,{source:{uri:o.uri},style:n.thumb,accessibilityLabel:o.name}),_jsx(View,{style:n.remove,children:_jsx(IconButton,{size:"sm",variant:"glass",icon:({color:e,size:t})=>_jsx(AppIcon,{name:"trash",color:e,size:t}),accessibilityLabel:`Remove ${o.name}`,disabled:i,onPress:()=>t(e.filter((e,t)=>t!==s))})})]},`${o.uri}-${s}`))}),r&&_jsxs(View,{style:n.actions,children:[_jsx(Button,{size:"sm",variant:"outline",tone:"neutral",leftIcon:"gallery",title:"Add photo",accessibilityLabel:"Add a photo from your library",loading:"library"===c,disabled:i||d||null!==c,onPress:()=>{add("library")}}),_jsx(Button,{size:"sm",variant:"outline",tone:"neutral",leftIcon:"camera",title:"Take photo",accessibilityLabel:"Take a photo with your camera",loading:"camera"===c,disabled:i||d||null!==c,onPress:()=>{add("camera")}})]}),u?_jsx(Text,{variant:"caption",color:"error",accessibilityLiveRegion:"polite",children:u}):null]})};const THUMB=72,buildStyles=e=>StyleSheet.create({root:{gap:e.spacing.xs},row:{flexDirection:"row",flexWrap:"wrap",gap:e.spacing.xs},item:{width:72,height:72},thumb:{width:72,height:72,borderRadius:e.radius.sm,backgroundColor:e.colors.background.secondary},remove:{position:"absolute",top:e.spacing.xxs,right:e.spacing.xxs},actions:{flexDirection:"row",gap:e.spacing.sm}});