@applica-software-guru/react-admin 1.5.337 → 1.5.338

package/package.json

@@ -108,5 +108,5 @@
   "type": "module",
   "types": "dist/index.d.ts",
   "typings": "dist/index.d.ts",
-  "version": "1.5.337"
+  "version": "1.5.338"
 }

package/src/components/ra-fields/ImageAttachmentField.tsx

@@ -0,0 +1,58 @@
+import _ from 'lodash';
+import { useEffect, useState } from 'react';
+import { FieldProps, ImageField, useDataProvider, useRecordContext, useResourceContext } from 'react-admin';
+
+type ImageAttachmentFieldProps<RecordType extends Record<string, any> = Record<string, any>> = FieldProps<RecordType>;
+type ContextValueImage = { url: string; title?: string };
+
+function ImageAttachmentField(props: ImageAttachmentFieldProps) {
+  const { resource: propResource, source } = props;
+  const dataProvider = useDataProvider();
+  const defaultResource = useResourceContext();
+  const entity = !_.isNil(propResource) ? propResource : defaultResource?.match(/(?<=\/)[^\/]+$/)?.[0]; //eslint-disable-line
+  const recordContext = useRecordContext(props);
+  const entityId = recordContext?.id;
+  const attachment = recordContext?.[source ?? ''];
+  const [nestedContextValue, setNestedContextValue] = useState<{
+    image: ContextValueImage | Array<ContextValueImage>;
+  } | null>(null);
+
+  useEffect(() => {
+    if (_.isNil(attachment) || _.isNil(dataProvider) || _.isNil(entity) || _.isNil(entityId) || _.isNil(source)) {
+      return;
+    }
+    const basePath = `/attachments/${entity}/${entityId}/${source}/`;
+    function getAttachment(attachment: { id: string; name: string }): Promise<ContextValueImage> {
+      return dataProvider
+        .getFile(`${basePath}${attachment?.id}`)
+        .then((url: string) => ({ url, title: attachment?.name }));
+    }
+
+    if (_.isArray(attachment)) {
+      Promise.all(attachment.map(getAttachment)).then((images: Array<ContextValueImage>) => {
+        setNestedContextValue({ image: images });
+      });
+    } else {
+      getAttachment(attachment).then((image: ContextValueImage) => {
+        setNestedContextValue({ image });
+      });
+    }
+  }, [attachment, dataProvider, entity, entityId, source]);
+
+  if (_.isNil(nestedContextValue)) {
+    return null;
+  }
+
+  return (
+    <ImageField
+      {...props}
+      src="url"
+      source={_.isArray(attachment) ? 'image' : 'image.url'}
+      title="image.title"
+      record={nestedContextValue}
+    />
+  );
+}
+
+export { ImageAttachmentField };
+export type { ImageAttachmentFieldProps };

package/src/components/ra-fields/index.ts

@@ -6,6 +6,7 @@ export * from './DateField';
 export * from './EmailField';
 export * from './FileField';
 export * from './FunctionField';
+export * from './ImageAttachmentField';
 export * from './ImageField';
 export * from './LocalizedTextField';
 export * from './ReadonlyField';

package/src/components/ra-inputs/ImageAttachmentInput.tsx

@@ -0,0 +1,47 @@
+import { ImageAttachmentField, ImageAttachmentFieldProps } from '@/components/ra-fields';
+import _ from 'lodash';
+import { RecordContextProvider, useRecordContext } from 'ra-core';
+import { ImageField } from 'ra-ui-materialui';
+import { useEffect, useState } from 'react';
+import { AttachmentInput, AttachmentInputProps } from './AttachmentInput';
+
+type ImageAttachmentInputProps = Omit<AttachmentInputProps, 'children'>;
+
+function ImageAttachmentInput(props: ImageAttachmentInputProps) {
+  const { source } = props;
+  const { id: entityId } = useRecordContext(props);
+  return (
+    <AttachmentInput {...props}>
+      <Field entityId={String(entityId)} source={source} />
+    </AttachmentInput>
+  );
+}
+
+function Field(props: { entityId?: string; source?: string }) {
+  const value = useRecordContext();
+
+  return _.isNil(value?.rawFile) ? (
+    <AttachmentPreview {...props} />
+  ) : (
+    <ImageField {...props} title="title" source={'src'} />
+  );
+}
+
+function AttachmentPreview(props: ImageAttachmentFieldProps & { entityId?: string }) {
+  const { entityId, ...rest } = props;
+  const source = props.source ?? '';
+  const value = useRecordContext();
+  const [context, setContext] = useState(source ? { id: entityId, [source]: value } : { id: entityId });
+
+  useEffect(() => {
+    setContext({ id: entityId, [source]: value });
+  }, [value, entityId, source]);
+
+  return (
+    <RecordContextProvider value={context}>
+      <ImageAttachmentField {...rest} />
+    </RecordContextProvider>
+  );
+}
+
+export { ImageAttachmentInput };

package/src/components/ra-inputs/index.ts

@@ -6,6 +6,7 @@ export * from './BooleanInput';
 export * from './DateInput';
 export * from './DateTimeInput';
 export * from './FileInput';
+export * from './ImageAttachmentInput';
 export * from './ImageInput';
 export * from './LabeledArrayInput';
 export * from './LabeledInput';