new control UploadFiles

Author: joaojmendes

docs/documentation/docs/assets/UploadFiles01.png

@@ -1,6 +1,6 @@
 # UploadFiles
 
-This control allows to drag and drop files  and manage files before upload.
+This control allows to drag and drop files and manage files before upload.
 
 ## How to use this control in your solutions
 
@@ -17,7 +17,7 @@ import {
 
 ```jsx
  <UploadFiles
-          pageSize={30}
+          pageSize={20}
           context={context}
           title="Upload Files"
           onUploadFiles={(files) => {
@@ -28,15 +28,17 @@ import {
 ```
 
 
-![Custom html with drag and drop](../assets/UploadFiles.gif)
-
+![uploadFiles](../assets/UploadFiles.gif)
+![uploadFiles](../assets/UploadFiles02.png)
+![uploadFiles](../assets/UploadFiles01.png)
+ 
 ## Implementation
 
 The `UploadFiles` can be configured with the following properties:
 
 | Property | Type | Required | Description |
 | ---- | ---- | ---- | ---- |
-| pageSize | number  | no | number of files to show per page base on this value the height is calculate |
+| pageSize | number  | no | number of files to show per page base on this value the height of control is calculate, default 15 |
 | context | WebPartContext | yes | webPartContext |
 | title | string | yes | title |
 | onUploadFiles | (files: File[]) => void; | yes | Method that returns all Files[]     |

docs/documentation/docs/assets/UploadFiles02.png

@@ -28,10 +28,10 @@ import { useDocumentListStyles } from './useDocumentListStyles';
 export const DocumentList: React.FunctionComponent<IDocumentListProps> = (
   props: React.PropsWithChildren<IDocumentListProps>
 ) => {
-  const { documentListStyles, scollableContainerStyles } = useDocumentListStyles();
+  const { documentListStyles, scollableContainerStyles, bootomContainerStyles } = useDocumentListStyles();
   const [appGlobalState, setGlobalState] = useAtom(globalState);
   const [renderFiles, setRenderFiles] = React.useState<React.ReactNode[]>([]);
-  const { selectedFiles, files, containerWidth } = appGlobalState;
+  const { selectedFiles, files, containerWidth, themeVariant } = appGlobalState;
   const currentPage = React.useRef<number>(0);
   const currentFiles = React.useRef<File[]>([]);
   const { onUploadFiles } = props;
@@ -88,7 +88,7 @@ export const DocumentList: React.FunctionComponent<IDocumentListProps> = (
         return { ...prevState, files: newsFiles };
       });
     },
-    [files]
+    [files, themeVariant]
   );
 
   const onDelete = React.useCallback(() => {
@@ -161,23 +161,26 @@ export const DocumentList: React.FunctionComponent<IDocumentListProps> = (
         <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto} styles={scollableContainerStyles}>
           <div className={documentListStyles.documentList}>
             <DragDropFiles dropEffect="upload" enable={true} onDrop={onDrop}>
-              <div style={{ padding: 20 }}>
+              <Stack tokens={{ padding: 20 }}>
                 {renderFiles.length ? (
                   <div className={documentListStyles.filesContainerGrid}>{renderFiles}</div>
                 ) : (
                   <NoDocuments />
                 )}
-              </div>
+              </Stack>
             </DragDropFiles>
           </div>
         </ScrollablePane>
-        <Stack horizontalAlign="end" tokens={{ childrenGap: 20, padding: 20 }}>
+        <Stack styles={bootomContainerStyles} horizontalAlign="end" tokens={{ childrenGap: 20, }}>
+        <div className={documentListStyles.separator} />
           {selectedFiles.length > 0 && (
-            <PrimaryButton
-              iconProps={{ iconName: "upload" }}
-              text={strings.UploadFilesUploadButtonLabel}
-              onClick={() => onUploadFiles(selectedFiles)}
-            />
+            <>
+              <PrimaryButton
+                iconProps={{ iconName: "upload" }}
+                text={strings.UploadFilesUploadButtonLabel}
+                onClick={() => onUploadFiles(selectedFiles)}
+              />
+            </>
           )}
         </Stack>
       </div>

docs/documentation/docs/controls/UploadFiles.md

@@ -6,90 +6,114 @@ import { useAtomValue } from 'jotai/utils';
 
 import {
   IScrollablePaneStyles,
+  IStackStyles,
   mergeStyles,
   mergeStyleSets,
 } from '@fluentui/react';
 
+import { DEFAULT_PAGE_SIZE } from '../../constants/constants';
 import { globalState } from '../../jotai/atoms';
 
-const DEFAULT_PAGE_SIZE = 15;
 /* eslint-disable @typescript-eslint/no-empty-function */
 export const useDocumentListStyles = () => {
-   const appGlobalState =  useAtomValue(globalState);
-   const {themeVariant , containerWidth, pageSize, files} = appGlobalState;
+  const appGlobalState = useAtomValue(globalState);
+  const { themeVariant, containerWidth, pageSize, files } = appGlobalState;
 
-   const scollableContainerStyles: Partial<IScrollablePaneStyles> = React.useMemo(() => {
-    return {
-     /*  root: { position: "relative", height: '100%', minHeight: 500, overflowY: 'auto', overflowX: 'hidden' */
-      root: { position: "relative", height: containerWidth && files.length ? ((Math.ceil(pageSize ?? DEFAULT_PAGE_SIZE )/Math.ceil(containerWidth/180))) * 180 : 0 , minHeight: 500, overflowY: 'auto', overflowX: 'hidden'
-    },
-    contentContainer: {  "::-webkit-scrollbar-thumb": {
+  const containerHeight  =  React.useMemo(() => {
+   return  containerWidth && files.length
+    ? (Math.ceil(pageSize ?? DEFAULT_PAGE_SIZE) / Math.ceil(containerWidth / 180)) * 180
+    : 0;
 
-      backgroundColor: themeVariant?.palette.themeLight},
-    "::-webkit-scrollbar": {
-      height: 10,
-      width: 7,
+  }, [containerWidth, pageSize, files]);
 
-    },
-    "scrollbar-color": themeVariant?.semanticColors.bodyFrameBackground,
-    "scrollbar-width": "thin", },
-    };
-  }, [themeVariant ,containerWidth, pageSize, files]);
+  const bootomContainerStyles:IStackStyles = React.useMemo(() => {
+      return {
+        root: {
+          paddingLeft: 20,
+          paddingRight: 20,
+        }
+      }
+  }, [themeVariant]);
+
+  const scollableContainerStyles: Partial<IScrollablePaneStyles> = React.useMemo(() => {
+    return {
 
-  const documentListStyles = React.useMemo(  () => { return  mergeStyleSets({
-    fileIconHeaderIcon: ({
-      padding: 0,
-      fontSize: "16px",
-    }),
-    fileIconCell:  mergeStyles({
-      textAlign: "center",
-      selectors: {
-        "&:before": {
-          content: ".",
-          display: "inline-block",
-          verticalAlign: "middle",
-          height: "100%",
-          width: "0px",
-          visibility: "hidden",
+      root: {
+        position: "relative",
+        height: containerHeight,
+        minHeight: 500,
+        overflowY: "auto",
+        overflowX: "hidden",
+      },
+      contentContainer: {
+        "::-webkit-scrollbar-thumb": {
+          backgroundColor: themeVariant?.palette.themeLight,
+        },
+        "::-webkit-scrollbar": {
+          height: 10,
+          width: 7,
         },
+        "scrollbar-color": themeVariant?.semanticColors.bodyFrameBackground,
+        "scrollbar-width": "thin",
       },
-    }),
-    fileIconImg:  mergeStyles({
-      verticalAlign: "middle",
-      maxHeight: "16px",
-      maxWidth: "16px",
-    }),
-    controlWrapper:  mergeStyles({
-      display: "flex",
-      flexWrap: "wrap",
-    }),
-
-    selectionDetails:  mergeStyles({
-      marginBottom: "20px",
-    }),
-    filesContainerGrid: mergeStyles({
-
-      width: "100%",
-      display: "grid",
-      gridTemplateColumns: "repeat(auto-fill, minmax(min(100%, 160px), 1fr))",
-      columnGap: "15px",
-      rowGap: 15,
-    } ),
+    };
+  }, [themeVariant, containerHeight]);
 
-    noDataFoundStyles: {
-        width: "300px", height: "300px",
-    },
-    separator: mergeStyles({
-      height: "1px",
-      backgroundColor: themeVariant?.palette?.neutralLight,
-      opacity:  themeVariant?.isInverted ? "0.2" : "1",
-    }),
-    documentList: mergeStyles({
-      width: "100%",
+  const documentListStyles = React.useMemo(() => {
+    return mergeStyleSets({
+      fileIconHeaderIcon: {
+        padding: 0,
+        fontSize: "16px",
+      },
+      fileIconCell: mergeStyles({
+        textAlign: "center",
+        selectors: {
+          "&:before": {
+            content: ".",
+            display: "inline-block",
+            verticalAlign: "middle",
+            height: "100%",
+            width: "0px",
+            visibility: "hidden",
+          },
+        },
+      }),
+      fileIconImg: mergeStyles({
+        verticalAlign: "middle",
+        maxHeight: "16px",
+        maxWidth: "16px",
+      }),
+      controlWrapper: mergeStyles({
+        display: "flex",
+        flexWrap: "wrap",
+      }),
 
+      selectionDetails: mergeStyles({
+        marginBottom: "20px",
+      }),
+      filesContainerGrid: mergeStyles({
+        width: "100%",
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fill, minmax(min(100%, 160px), 1fr))",
+        columnGap: "15px",
+        rowGap: 15,
+      }),
 
+      noDataFoundStyles: {
+        width: "300px",
+        height: "300px",
+      },
+      separator: mergeStyles({
+        height: "1px",
+        backgroundColor: themeVariant?.palette?.neutralLight,
+        opacity: themeVariant?.isInverted ? "0.2" : "1",
+        width: "100%",
 
-    }),
-  })}, [themeVariant]);
-  return {  documentListStyles, scollableContainerStyles };
-}
+      }),
+      documentList: mergeStyles({
+        width: "100%",
+      }),
+    });
+  }, [themeVariant]);
+  return {bootomContainerStyles, documentListStyles, scollableContainerStyles };
+};

src/controls/uploadFiles/components/DocumentList/DocumentList.tsx

@@ -1,23 +1,25 @@
 import * as React from 'react';
 
 import { format } from 'date-fns';
+import { useAtomValue } from 'jotai';
+import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
 import {
-  Checkbox,
   DocumentCard,
   DocumentCardDetails,
   DocumentCardImage,
-  IIconProps,
-  ImageFit,
-  Stack,
-  Text,
-} from 'office-ui-fabric-react';
+} from 'office-ui-fabric-react/lib/DocumentCard';
+import { IIconProps } from 'office-ui-fabric-react/lib/Icon';
+import { ImageFit } from 'office-ui-fabric-react/lib/Image';
+import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { Text } from 'office-ui-fabric-react/lib/Text';
 
 import {
   getFileTypeIconProps,
   initializeFileTypeIcons,
 } from '@fluentui/react-file-type-icons';
 
 import { useUtils } from '../../hooks/useUtils';
+import { globalState } from '../../jotai/atoms';
 import { useFileStyles } from './useFileStyles';
 
 initializeFileTypeIcons();
@@ -31,13 +33,14 @@ export const FileInfo: React.FunctionComponent<IFileInfoProps> = (props: React.P
   const { fileInfo, onSelected, isSelected } = props;
   const { name, size, lastModified } = fileInfo;
 
-  const { checkBoxStyles, documentCardStyles, stackCheckboxStyles, fileNameStyles } = useFileStyles();
+  const { checkBoxStyles, documentCardStyles, stackCheckboxStyles, fileNameStyles,documentImageStyles } = useFileStyles();
   const { getShortText, getFileExtension, getFileSize } = useUtils();
   const fileSize = getFileSize(size);
   const fileExtension = getFileExtension(name);
   const fileModified = format(new Date(lastModified), "dd, MMM yyyy");
   const [isChecked, setIsChecked] = React.useState<boolean>(false);
-
+  const appGlobalState  = useAtomValue(globalState);
+  const { themeVariant,   } = appGlobalState;
   const fileIcon: IIconProps = React.useMemo(() => {
     return {
       ...getFileTypeIconProps({ extension: fileExtension, size: 48, imageFileType: "svg" }),
@@ -61,16 +64,17 @@ export const FileInfo: React.FunctionComponent<IFileInfoProps> = (props: React.P
   const renderNormalCard = React.useCallback(() => {
     return (
       <>
+
         <Stack>
           <DocumentCard styles={documentCardStyles} title={name}>
-            <DocumentCardImage height={100} imageFit={ImageFit.cover} iconProps={fileIcon} />
+            <DocumentCardImage height={100} imageFit={ImageFit.cover} iconProps={fileIcon} styles={documentImageStyles} />
             <Stack
               horizontal
               horizontalAlign="end"
               tokens={{ childrenGap: 5, padding: 7 }}
               styles={stackCheckboxStyles}
             >
-              <Checkbox styles={checkBoxStyles} checked={isChecked} onChange={onCheckboxChange} />
+              <Checkbox   styles={checkBoxStyles} checked={isChecked} onChange={onCheckboxChange} />
             </Stack>
 
             <DocumentCardDetails>
@@ -86,9 +90,10 @@ export const FileInfo: React.FunctionComponent<IFileInfoProps> = (props: React.P
             </DocumentCardDetails>
           </DocumentCard>
         </Stack>
+
       </>
     );
-  }, [isChecked, fileIcon, fileSize, fileModified, getShortText, name, onCheckboxChange]);
+  }, [isChecked, fileIcon, fileSize, fileModified, getShortText, name, onCheckboxChange, themeVariant]);
 
   return <>{renderNormalCard()}</>;
 };