commit changes new imagePicker

Author: joaojmendes

.hintrc

@@ -0,0 +1,15 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "axe/aria": "off",
+    "no-inline-styles": "off",
+    "axe/text-alternatives": [
+      "default",
+      {
+        "frame-title": "off"
+      }
+    ]
+  }
+}

package-lock.json

@@ -79,6 +79,7 @@
     "react": "17.0.1",
     "react-accessible-accordion": "^5.0.0",
     "react-dom": "17.0.1",
+    "react-dropzone": "^14.2.3",
     "react-mentions": "^4.3.0",
     "react-quill": "2.0.0",
     "regexify-string": "^1.0.16",

package.json

@@ -1 +1,2 @@
-export * from './controls/dynamicForm/index';
+export * from './controls/dynamicForm/index';
+export * from './controls/dynamicForm/index';

src/DynamicForm.ts

@@ -0,0 +1 @@
+export * from './controls/imagePicker/index';

src/ImagePicker.ts

@@ -0,0 +1,35 @@
+export interface IFilePickerResult {
+    /**
+     * Selected file name with extension.
+     */
+    fileName: string;
+    /**
+     * Selected file name without extension.
+     */
+    fileNameWithoutExtension: string;
+    /**
+     * Absolute file URL. Undefined in case of file upload.
+     */
+    fileAbsoluteUrl: string;
+  
+    /**
+     * Size of a selected file (in bytes). Undefined in all cases but file upload
+     */
+    fileSize?: number;
+  
+    /**
+     * Absolute not modified file SharePoint URL.
+     */
+    spItemUrl?: string;
+  
+    /**
+     * Downloads file picker result content.
+     */
+    downloadFileContent: () => Promise<File>;
+  
+    /**
+     * Preview
+     */
+    previewDataUrl?: string;
+  }
+  

src/controls/imagePicker/IFilePickerResult.ts

@@ -0,0 +1,8 @@
+import { IImageFile } from './models/IImageFile';
+
+export interface IImagePickerProps {
+onImageSelected: (image: IImageFile) => void;
+isOpen: boolean;
+onDismiss: () => void;
+
+}

src/controls/imagePicker/IImagePickerProps.ts

@@ -0,0 +1,141 @@
+import * as React from "react";
+
+import strings from "ControlStrings";
+import { useAtom } from "jotai";
+
+import {
+  Button,
+  Image,
+} from "@fluentui/react-components";
+import {
+  Delete16Regular,
+  Image20Regular,
+} from "@fluentui/react-icons";
+import { BaseComponentContext } from "@microsoft/sp-component-base";
+
+import { contextState } from "./atoms/contextState";
+import { IFilePickerResult } from "./IFilePickerResult";
+/* import { RenderSpinner } from "./RenderSpninner/RenderSpinner"; */
+import { SelectFromSharePoint } from "./selectFromSharePoint";
+import { useImagePickerStyles } from "./useImagePickerStyles";
+
+export interface IImagePickerProps {
+  onFileSelected: (file: IFilePickerResult) => void;
+  onDeleteFile: () => void;
+  selectedFileUrl: string;
+  context: BaseComponentContext;
+}
+
+/**
+ * Renders the preview image component.
+ *
+ * @param props - The component props.
+ * @param props.selectedImageFileUrl - The URL of the selected image file.
+ * @returns The JSX element representing the preview image component.
+ */
+const RenderPreviewImage = (props: { selectedImageFileUrl: string }): JSX.Element => {
+  const { selectedImageFileUrl } = props;
+
+  const maxWidth = 200;
+  const maxHeight = 200;
+  const styles = useImagePickerStyles();
+
+  if (!selectedImageFileUrl) {
+    return null;
+  }
+
+  return (
+    <>
+      <div className={styles.renderImageContainer}>
+        <Image
+          src={selectedImageFileUrl}
+          fit="cover"
+          style={{ minWidth: maxWidth, maxWidth: maxWidth, height: maxHeight }}
+          alt="Selected Image"
+        />
+      </div>
+    </>
+  );
+};
+
+/**
+ * Renders an image picker component.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ImagePicker
+ *   onFileSelected={handleFileSelected}
+ *   onDeleteFile={handleDeleteFile}
+ *   selectedFileUrl={selectedImageUrl}
+ *   context={appContext}
+ * />
+ * ```
+ */
+
+export const ImagePicker: React.FunctionComponent<IImagePickerProps> = (
+  props: React.PropsWithChildren<IImagePickerProps>
+) => {
+  const { onFileSelected, onDeleteFile, selectedFileUrl, context } = props;
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const styles = useImagePickerStyles();
+  const ref = React.useRef<HTMLDivElement>(null);
+  const [appContext, setAppContext] = useAtom(contextState);
+
+  React.useEffect(() => {
+    setAppContext({
+      ...appContext,
+      context: context,
+    });
+  }, []);
+
+  const [selectedImageFileUrl, setSelectedImageFileUrl] = React.useState<string>(selectedFileUrl);
+
+  const onDismiss = (): void => {
+    setIsOpen(false);
+  };
+
+  const isFileSelected = React.useMemo(() => {
+    return !!selectedImageFileUrl;
+  }, [selectedImageFileUrl]);
+
+  const onDeleteFileCLick = React.useCallback(() => {
+    setSelectedImageFileUrl(undefined);
+    onDeleteFile();
+  }, []);
+
+  const styleButtonDelete: React.CSSProperties = { display: !isFileSelected ? "none" : "inline-flex" };
+
+  if (!context) return null;
+
+  return (
+    <>
+      <div className={styles.root} ref={ref}>
+        <div className={styles.buttonContainer}>
+          <Button icon={<Image20Regular />} shape="circular" onClick={() => setIsOpen(true)}>
+            {strings.ImagePickderSelectLabel}
+          </Button>
+          <Button
+            icon={<Delete16Regular />}
+            shape="circular"
+            style={styleButtonDelete}
+            onClick={() => onDeleteFileCLick()}
+          >
+            {strings.ImagePickerDeleteImageLabel}
+          </Button>
+        </div>
+        <SelectFromSharePoint
+          isOpen={isOpen}
+          onDismiss={onDismiss}
+          onFileSelected={async (file: IFilePickerResult) => {
+            onFileSelected(file);
+            setSelectedImageFileUrl(file.previewDataUrl);
+
+            onDismiss();
+          }}
+        />
+        {<RenderPreviewImage selectedImageFileUrl={selectedImageFileUrl} />}
+      </div>
+    </>
+  );
+};

src/controls/imagePicker/ImagePicker.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+
+import {
+  makeStyles,
+  mergeClasses,
+  Spinner,
+} from '@fluentui/react-components';
+
+const useStyles = makeStyles({
+    root: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+
+      height: "100%",
+      width: "100%",
+    },
+    spinner: {
+      width: "100px",
+      height: "100px",
+    },
+  });
+
+export interface IRenderSpinnerProps {
+  size: "medium" | "small" | "extra-tiny" | "tiny" | "extra-small" | "large" | "extra-large" | "huge";
+  label?: string;
+  labelPosition?: "above" | "below" | "before" | "after";
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+export const RenderSpinner: React.FunctionComponent<IRenderSpinnerProps> = (
+  props: React.PropsWithChildren<IRenderSpinnerProps>
+) => {
+  const { size, label, labelPosition, style, className } = props;
+
+  const styles = useStyles();
+  return (
+    <div className={styles.root}>
+      <Spinner
+        style={style}
+        className={mergeClasses(styles.spinner, className)}
+        size={size}
+        label={label}
+        labelPosition={labelPosition}
+      />
+    </div>
+  );
+};