@terraware/web-components 4.2.14 → 4.2.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -7,6 +7,14 @@ export interface AnnotationEditPaneStrings {
|
|
|
7
7
|
descriptionTooltip: string;
|
|
8
8
|
label: string;
|
|
9
9
|
labelTooltip: string;
|
|
10
|
+
images?: {
|
|
11
|
+
uploadTitle?: string;
|
|
12
|
+
uploadText?: string;
|
|
13
|
+
uploadDescription?: string;
|
|
14
|
+
chooseFileText?: string;
|
|
15
|
+
replaceFileText?: string;
|
|
16
|
+
photoSelectedText?: string;
|
|
17
|
+
};
|
|
10
18
|
}
|
|
11
19
|
interface AnnotationEditPaneProps {
|
|
12
20
|
visible: boolean;
|
|
@@ -14,7 +22,10 @@ interface AnnotationEditPaneProps {
|
|
|
14
22
|
strings: AnnotationEditPaneStrings;
|
|
15
23
|
onUpdate: (updates: Partial<AnnotationProps>) => void;
|
|
16
24
|
onTextFieldFocus?: (isFocused: boolean) => void;
|
|
25
|
+
maxImages?: number;
|
|
26
|
+
/** Fires with the current selection on every add/remove, including an initial empty emission on mount. */
|
|
27
|
+
onImagesChange?: (files: File[]) => void;
|
|
17
28
|
}
|
|
18
|
-
declare const AnnotationEditPane: ({ visible, annotation, strings, onUpdate, onTextFieldFocus }: AnnotationEditPaneProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
29
|
+
declare const AnnotationEditPane: ({ visible, annotation, strings, onUpdate, onTextFieldFocus, maxImages, onImagesChange, }: AnnotationEditPaneProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
19
30
|
export default AnnotationEditPane;
|
|
20
31
|
//# sourceMappingURL=AnnotationEditPane.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnnotationEditPane.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/AnnotationEditPane.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"AnnotationEditPane.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/AnnotationEditPane.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,MAAM,WAAW,yBAAyB;IACxC,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE;QACP,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;KAC5B,CAAC;CACH;AAED,UAAU,uBAAuB;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,eAAe,GAAG,IAAI,CAAC;IACnC,OAAO,EAAE,yBAAyB,CAAC;IACnC,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IACtD,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0GAA0G;IAC1G,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;CAC1C;AAED,QAAA,MAAM,kBAAkB,GAAI,0FAQzB,uBAAuB,mDA8KzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, { useCallback, useMemo } from 'react';
|
|
2
|
-
import { Box, Fade, Tooltip, Typography, useTheme } from '@mui/material';
|
|
2
|
+
import { Box, Fade, ThemeProvider, Tooltip, Typography, useTheme } from '@mui/material';
|
|
3
|
+
import PhotoChooser from '../PhotoChooser';
|
|
3
4
|
import Textfield from '../Textfield/Textfield';
|
|
4
5
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
5
6
|
const AnnotationEditPane = ({
|
|
@@ -7,9 +8,23 @@ const AnnotationEditPane = ({
|
|
|
7
8
|
annotation,
|
|
8
9
|
strings,
|
|
9
10
|
onUpdate,
|
|
10
|
-
onTextFieldFocus
|
|
11
|
+
onTextFieldFocus,
|
|
12
|
+
maxImages,
|
|
13
|
+
onImagesChange
|
|
11
14
|
}) => {
|
|
12
15
|
const theme = useTheme();
|
|
16
|
+
const showImageUpload = !!onImagesChange && !!maxImages && maxImages > 0;
|
|
17
|
+
|
|
18
|
+
// Recolor PhotoChooser's Terraware tokens to match the dark edit pane instead of its default light card.
|
|
19
|
+
const photoChooserTheme = useMemo(() => ({
|
|
20
|
+
...theme,
|
|
21
|
+
palette: {
|
|
22
|
+
...theme.palette,
|
|
23
|
+
TwClrBg: 'transparent',
|
|
24
|
+
TwClrBrdrTertiary: theme.palette.grey[700],
|
|
25
|
+
TwClrTxt: theme.palette.grey[300]
|
|
26
|
+
}
|
|
27
|
+
}), [theme]);
|
|
13
28
|
const textFieldSx = useMemo(() => ({
|
|
14
29
|
'& .textfield-label': {
|
|
15
30
|
color: `${theme.palette.grey[400]} !important`
|
|
@@ -127,6 +142,30 @@ const AnnotationEditPane = ({
|
|
|
127
142
|
onBlur: handleBlur,
|
|
128
143
|
sx: textFieldSx
|
|
129
144
|
})
|
|
145
|
+
}), showImageUpload && /*#__PURE__*/_jsxs(Box, {
|
|
146
|
+
children: [strings.images?.uploadTitle && /*#__PURE__*/_jsx(Typography, {
|
|
147
|
+
sx: {
|
|
148
|
+
fontFamily: 'Inter',
|
|
149
|
+
fontSize: '14px',
|
|
150
|
+
fontWeight: 400,
|
|
151
|
+
lineHeight: '20px',
|
|
152
|
+
color: theme.palette.grey[400],
|
|
153
|
+
marginBottom: 0.5
|
|
154
|
+
},
|
|
155
|
+
children: strings.images.uploadTitle
|
|
156
|
+
}), /*#__PURE__*/_jsx(ThemeProvider, {
|
|
157
|
+
theme: photoChooserTheme,
|
|
158
|
+
children: /*#__PURE__*/_jsx(PhotoChooser, {
|
|
159
|
+
uploadText: strings.images?.uploadText,
|
|
160
|
+
uploadDescription: strings.images?.uploadDescription,
|
|
161
|
+
chooseFileText: strings.images?.chooseFileText,
|
|
162
|
+
replaceFileText: strings.images?.replaceFileText,
|
|
163
|
+
photoSelectedText: strings.images?.photoSelectedText,
|
|
164
|
+
multipleSelection: (maxImages ?? 0) > 1,
|
|
165
|
+
maxPhotos: maxImages,
|
|
166
|
+
onPhotosChanged: files => onImagesChange?.(files)
|
|
167
|
+
})
|
|
168
|
+
})]
|
|
130
169
|
})]
|
|
131
170
|
})
|
|
132
171
|
})
|