Feat(crm): Add ImageEditorField for company logo

marmelab · Jul 29, 2024 · bf0dc47 · bf0dc47
1 parent d2a2d0a
commit bf0dc47
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/examples/crm/src/companies/CompanyInputs.tsx b/examples/crm/src/companies/CompanyInputs.tsx
@@ -16,8 +16,8 @@ import {
 import { isLinkedinUrl } from '../misc/isLinkedInUrl';
 import { useConfigurationContext } from '../root/ConfigurationContext';
 import { Sale } from '../types';
-import { CompanyAvatar } from './CompanyAvatar';
 import { sizes } from './sizes';
+import ImageEditorField from '../misc/ImageEditorField';
 
 const isUrl = (url: string) => {
     if (!url) return;
@@ -64,7 +64,12 @@ export const CompanyInputs = () => {
 const CompanyDisplayInputs = () => {
     return (
         <Stack gap={2} flex={1} direction="row">
-            <CompanyAvatar width={60} height={60} />
+            <ImageEditorField
+                source="logo.src"
+                type="avatar"
+                width={60}
+                height={60}
+            />
             <TextInput source="name" validate={required()} helperText={false} />
         </Stack>
     );

diff --git a/examples/crm/src/misc/ImageEditorField.tsx b/examples/crm/src/misc/ImageEditorField.tsx
@@ -21,7 +21,7 @@ import { DialogCloseButton } from './DialogCloseButton';
 
 const ImageEditorField = (props: ImageEditorFieldProps) => {
     const { getValues } = useFormContext();
-    const imageUrl = getValues()[props.source];
+    const imageUrl = getValues(props.source);
     const [isDialogOpen, setIsDialogOpen] = useState(false);
 
     if (!imageUrl) {
@@ -72,7 +72,7 @@ const ImageEditorDialog = (props: ImageEditorDialogProps) => {
         const croppedImage = cropper?.getCroppedCanvas().toDataURL();
         if (croppedImage) {
             setImageSrc(croppedImage);
-            setValue(props.source, croppedImage);
+            setValue(props.source, croppedImage, { shouldDirty: true });
             props.onClose();
 
             if (props.onSave) {