@terraware/web-components 5.0.27 → 5.1.0

package/components/VirtualWalkthrough/AnnotationEditPane.js

@@ -1,189 +1,203 @@
-import { useMemo, useCallback } from 'react';
-import { useTheme, Box, Fade, Typography, Tooltip, ThemeProvider } from '@mui/material';
-import { useStrings } from '../../strings/index.js';
-import PhotoChooser from '../PhotoChooser/index.js';
-import TextField from '../Textfield/Textfield.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-const AnnotationEditPane = ({
-  visible,
-  annotation,
-  onUpdate,
-  onTextFieldFocus,
-  maxImages,
-  onImagesChange
-}) => {
-  const theme = useTheme();
-  const strings = useStrings();
-  const showImageUpload = !!onImagesChange && !!maxImages && maxImages > 0;
-  const remainingImageSlots = Math.max(0, (maxImages ?? 0) - (annotation?.imageUrls?.length ?? 0));
-
-  // Recolor PhotoChooser's Terraware tokens to match the dark edit pane instead of its default light card.
-  const photoChooserTheme = useMemo(() => ({
-    ...theme,
-    palette: {
-      ...theme.palette,
-      TwClrBg: 'transparent',
-      TwClrBrdrTertiary: theme.palette.grey[700],
-      TwClrTxt: theme.palette.grey[300]
-    }
-  }), [theme]);
-  const textFieldSx = useMemo(() => ({
-    '& .textfield-label': {
-      color: `${theme.palette.grey[400]} !important`
-    },
-    '& .textfield-value': {
-      backgroundColor: `${theme.palette.grey[800]} !important`,
-      borderColor: `${theme.palette.grey[700]} !important`
-    },
-    '& input': {
-      color: `${theme.palette.common.white} !important`
-    }
-  }), [theme]);
-  const handleTitleChange = useCallback(value => {
-    onUpdate({
-      title: value
-    });
-  }, [onUpdate]);
-  const handleBodyTextChange = useCallback(value => {
-    onUpdate({
-      bodyText: value
-    });
-  }, [onUpdate]);
-  const handleLabelChange = useCallback(value => {
-    onUpdate({
-      label: value
-    });
-  }, [onUpdate]);
-  const handleRemoveExistingImage = useCallback(index => {
-    const remaining = (annotation?.imageUrls ?? []).filter((_, i) => i !== index);
-    onUpdate({
-      imageUrls: remaining
-    });
-  }, [annotation, onUpdate]);
-  const handleFocus = useCallback(() => {
-    onTextFieldFocus?.(true);
-  }, [onTextFieldFocus]);
-  const handleBlur = useCallback(() => {
-    onTextFieldFocus?.(false);
-  }, [onTextFieldFocus]);
-  if (!annotation) {
-    return null;
-  }
-  return /*#__PURE__*/jsx(Box, {
-    sx: {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      pointerEvents: 'none',
-      display: 'flex',
-      justifyContent: 'flex-start',
-      alignItems: 'flex-start',
-      padding: 2,
-      zIndex: 1001
-    },
-    children: /*#__PURE__*/jsx(Fade, {
-      in: visible,
-      timeout: 500,
-      children: /*#__PURE__*/jsx(Box, {
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { Box, Fade, ThemeProvider, Tooltip, Typography, useTheme } from "@mui/material";
+import { useStrings } from "../../strings/index.js";
+import PhotoChooser from "../PhotoChooser/index.js";
+import Textfield from "../Textfield/Textfield.js";
+const AnnotationEditPane = ({ visible, annotation, onUpdate, onTextFieldFocus, maxImages, onImagesChange })=>{
+    const theme = useTheme();
+    const strings = useStrings();
+    const showImageUpload = !!onImagesChange && !!maxImages && maxImages > 0;
+    const remainingImageSlots = Math.max(0, (maxImages ?? 0) - (annotation?.imageUrls?.length ?? 0));
+    const photoChooserTheme = useMemo(()=>({
+            ...theme,
+            palette: {
+                ...theme.palette,
+                TwClrBg: 'transparent',
+                TwClrBrdrTertiary: theme.palette.grey[700],
+                TwClrTxt: theme.palette.grey[300]
+            }
+        }), [
+        theme
+    ]);
+    const textFieldSx = useMemo(()=>({
+            '& .textfield-label': {
+                color: `${theme.palette.grey[400]} !important`
+            },
+            '& .textfield-value': {
+                backgroundColor: `${theme.palette.grey[800]} !important`,
+                borderColor: `${theme.palette.grey[700]} !important`
+            },
+            '& input': {
+                color: `${theme.palette.common.white} !important`
+            }
+        }), [
+        theme
+    ]);
+    const handleTitleChange = useCallback((value)=>{
+        onUpdate({
+            title: value
+        });
+    }, [
+        onUpdate
+    ]);
+    const handleBodyTextChange = useCallback((value)=>{
+        onUpdate({
+            bodyText: value
+        });
+    }, [
+        onUpdate
+    ]);
+    const handleLabelChange = useCallback((value)=>{
+        onUpdate({
+            label: value
+        });
+    }, [
+        onUpdate
+    ]);
+    const handleRemoveExistingImage = useCallback((index)=>{
+        const remaining = (annotation?.imageUrls ?? []).filter((_, i)=>i !== index);
+        onUpdate({
+            imageUrls: remaining
+        });
+    }, [
+        annotation,
+        onUpdate
+    ]);
+    const handleFocus = useCallback(()=>{
+        onTextFieldFocus?.(true);
+    }, [
+        onTextFieldFocus
+    ]);
+    const handleBlur = useCallback(()=>{
+        onTextFieldFocus?.(false);
+    }, [
+        onTextFieldFocus
+    ]);
+    if (!annotation) return null;
+    return /*#__PURE__*/ jsx(Box, {
         sx: {
-          backgroundColor: theme.palette.grey[900],
-          color: theme.palette.common.white,
-          borderRadius: 2,
-          padding: 3,
-          minWidth: 320,
-          maxWidth: 400,
-          pointerEvents: 'auto'
-        },
-        children: /*#__PURE__*/jsxs(Box, {
-          sx: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            pointerEvents: 'none',
             display: 'flex',
-            flexDirection: 'column',
-            gap: 2
-          },
-          children: [/*#__PURE__*/jsx(Typography, {
-            sx: {
-              fontWeight: 600
-            },
-            children: strings.EDIT_ANNOTATION
-          }), /*#__PURE__*/jsx(Tooltip, {
-            title: strings.ANNOTATION_TITLE_TOOLTIP,
-            placement: "top",
-            disableFocusListener: true,
-            children: /*#__PURE__*/jsx(TextField, {
-              id: "annotation-title",
-              label: strings.TITLE,
-              type: "text",
-              value: annotation.title,
-              onChange: handleTitleChange,
-              onFocus: handleFocus,
-              onBlur: handleBlur,
-              sx: textFieldSx,
-              required: true
-            })
-          }), /*#__PURE__*/jsx(Tooltip, {
-            title: strings.ANNOTATION_DESCRIPTION_TOOLTIP,
-            placement: "top",
-            disableFocusListener: true,
-            children: /*#__PURE__*/jsx(TextField, {
-              id: "annotation-body",
-              label: strings.DESCRIPTION,
-              type: "text",
-              value: annotation.bodyText ?? '',
-              onChange: handleBodyTextChange,
-              onFocus: handleFocus,
-              onBlur: handleBlur,
-              sx: textFieldSx
-            })
-          }), /*#__PURE__*/jsx(Tooltip, {
-            title: strings.ANNOTATION_LABEL_TOOLTIP,
-            placement: "top",
-            disableFocusListener: true,
-            children: /*#__PURE__*/jsx(TextField, {
-              id: "annotation-label",
-              label: strings.LABEL,
-              type: "text",
-              value: annotation.label ?? '',
-              onChange: handleLabelChange,
-              onFocus: handleFocus,
-              onBlur: handleBlur,
-              sx: textFieldSx
+            justifyContent: 'flex-start',
+            alignItems: 'flex-start',
+            padding: 2,
+            zIndex: 1001
+        },
+        children: /*#__PURE__*/ jsx(Fade, {
+            in: visible,
+            timeout: 500,
+            children: /*#__PURE__*/ jsx(Box, {
+                sx: {
+                    backgroundColor: theme.palette.grey[900],
+                    color: theme.palette.common.white,
+                    borderRadius: 2,
+                    padding: 3,
+                    minWidth: 320,
+                    maxWidth: 400,
+                    pointerEvents: 'auto'
+                },
+                children: /*#__PURE__*/ jsxs(Box, {
+                    sx: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: 2
+                    },
+                    children: [
+                        /*#__PURE__*/ jsx(Typography, {
+                            sx: {
+                                fontWeight: 600
+                            },
+                            children: strings.EDIT_ANNOTATION
+                        }),
+                        /*#__PURE__*/ jsx(Tooltip, {
+                            title: strings.ANNOTATION_TITLE_TOOLTIP,
+                            placement: "top",
+                            disableFocusListener: true,
+                            children: /*#__PURE__*/ jsx(Textfield, {
+                                id: "annotation-title",
+                                label: strings.TITLE,
+                                type: "text",
+                                value: annotation.title,
+                                onChange: handleTitleChange,
+                                onFocus: handleFocus,
+                                onBlur: handleBlur,
+                                sx: textFieldSx,
+                                required: true
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Tooltip, {
+                            title: strings.ANNOTATION_DESCRIPTION_TOOLTIP,
+                            placement: "top",
+                            disableFocusListener: true,
+                            children: /*#__PURE__*/ jsx(Textfield, {
+                                id: "annotation-body",
+                                label: strings.DESCRIPTION,
+                                type: "text",
+                                value: annotation.bodyText ?? '',
+                                onChange: handleBodyTextChange,
+                                onFocus: handleFocus,
+                                onBlur: handleBlur,
+                                sx: textFieldSx
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Tooltip, {
+                            title: strings.ANNOTATION_LABEL_TOOLTIP,
+                            placement: "top",
+                            disableFocusListener: true,
+                            children: /*#__PURE__*/ jsx(Textfield, {
+                                id: "annotation-label",
+                                label: strings.LABEL,
+                                type: "text",
+                                value: annotation.label ?? '',
+                                onChange: handleLabelChange,
+                                onFocus: handleFocus,
+                                onBlur: handleBlur,
+                                sx: textFieldSx
+                            })
+                        }),
+                        showImageUpload && /*#__PURE__*/ jsxs(Box, {
+                            children: [
+                                /*#__PURE__*/ jsx(Typography, {
+                                    sx: {
+                                        fontFamily: 'Inter',
+                                        fontSize: '14px',
+                                        fontWeight: 400,
+                                        lineHeight: '20px',
+                                        color: theme.palette.grey[400],
+                                        marginBottom: 0.5
+                                    },
+                                    children: strings.IMAGES
+                                }),
+                                /*#__PURE__*/ jsx(ThemeProvider, {
+                                    theme: photoChooserTheme,
+                                    children: /*#__PURE__*/ jsx(PhotoChooser, {
+                                        uploadText: strings.UPLOAD_FILES,
+                                        uploadDescription: strings.UPLOAD_FILES_DESCRIPTION,
+                                        chooseFileText: strings.CHOOSE_FILE,
+                                        replaceFileText: strings.REPLACE_FILE,
+                                        photoSelectedText: strings.FILE_SELECTED,
+                                        multipleSelection: (maxImages ?? 0) > 1,
+                                        maxPhotos: remainingImageSlots,
+                                        onPhotosChanged: (files)=>onImagesChange?.(files),
+                                        existingPhotos: annotation.imageUrls,
+                                        onExistingPhotoRemoved: handleRemoveExistingImage,
+                                        existingImagesLabel: strings.EXISTING,
+                                        newImagesLabel: strings.NEW
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                })
             })
-          }), showImageUpload && /*#__PURE__*/jsxs(Box, {
-            children: [/*#__PURE__*/jsx(Typography, {
-              sx: {
-                fontFamily: 'Inter',
-                fontSize: '14px',
-                fontWeight: 400,
-                lineHeight: '20px',
-                color: theme.palette.grey[400],
-                marginBottom: 0.5
-              },
-              children: strings.IMAGES
-            }), /*#__PURE__*/jsx(ThemeProvider, {
-              theme: photoChooserTheme,
-              children: /*#__PURE__*/jsx(PhotoChooser, {
-                uploadText: strings.UPLOAD_FILES,
-                uploadDescription: strings.UPLOAD_FILES_DESCRIPTION,
-                chooseFileText: strings.CHOOSE_FILE,
-                replaceFileText: strings.REPLACE_FILE,
-                photoSelectedText: strings.FILE_SELECTED,
-                multipleSelection: (maxImages ?? 0) > 1,
-                maxPhotos: remainingImageSlots,
-                onPhotosChanged: files => onImagesChange?.(files),
-                existingPhotos: annotation.imageUrls,
-                onExistingPhotoRemoved: handleRemoveExistingImage,
-                existingImagesLabel: strings.EXISTING,
-                newImagesLabel: strings.NEW
-              })
-            })]
-          })]
         })
-      })
-    })
-  });
+    });
 };
-
-export { AnnotationEditPane as default };
+const VirtualWalkthrough_AnnotationEditPane = AnnotationEditPane;
+export default VirtualWalkthrough_AnnotationEditPane;