fix(FileService): adjust ui (#8249)

DimensionDev · Dec 13, 2022 · 1e43e40 · 1e43e40
1 parent d1bc3af
commit 1e43e40
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 17 deletions.
diff --git a/packages/plugins/FileService/src/SNSAdaptor/MainDialog.tsx b/packages/plugins/FileService/src/SNSAdaptor/MainDialog.tsx
@@ -32,6 +32,7 @@ const useStyles = makeStyles()((theme) => ({
     },
     content: {
         padding: 0,
+        paddingBottom: theme.spacing(2),
         overflow: 'auto',
         boxSizing: 'border-box',
         '&::-webkit-scrollbar': {

diff --git a/packages/plugins/FileService/src/SNSAdaptor/components/FileBrowser.tsx b/packages/plugins/FileService/src/SNSAdaptor/components/FileBrowser.tsx
@@ -104,7 +104,7 @@ const useStyles = makeStyles()((theme) => ({
         },
     },
     actions: {
-        padding: theme.spacing(2),
+        padding: theme.spacing(2, 2, 0),
         flexShrink: 0,
         boxSizing: 'border-box',
         boxShadow:

diff --git a/packages/plugins/FileService/src/SNSAdaptor/components/FileList.tsx b/packages/plugins/FileService/src/SNSAdaptor/components/FileList.tsx
@@ -37,6 +37,9 @@ const useStyles = makeStyles()((theme) => ({
         padding: 0,
         margin: theme.spacing(0, 2, 1.5),
     },
+    disabled: {
+        opacity: 0.5,
+    },
     file: {
         width: '100%',
     },
@@ -144,7 +147,7 @@ interface SelectableFileListProps extends Omit<FileListBaseProps, 'onChange' | '
     onChange?(selectedIds: string[]): void
 }
 
-const FILE_LIMIT = 3
+const FILE_LIMIT = 2
 export const SelectableFileList: FC<SelectableFileListProps> = ({
     files,
     className,
@@ -174,21 +177,24 @@ export const SelectableFileList: FC<SelectableFileListProps> = ({
         <section className={cx(classes.container, className)} {...rest}>
             <Boundary boundaryRef={boundaryRef}>
                 <List className={classes.list} classes={{ root: classes.listRoot }} ref={boundaryRef}>
-                    {files.map((file) => (
-                        <ListItem
-                            key={file.id}
-                            className={classes.listItem}
-                            classes={{ root: classes.itemRoot }}
-                            data-id={file.id}>
-                            <SelectableFile
-                                disabled={selectedIds.length >= FILE_LIMIT && !selectedIds.includes(file.id)}
-                                className={classes.file}
-                                file={file}
-                                selected={selectedIds.includes(file.id)}
-                                onChange={handleChange}
-                            />
-                        </ListItem>
-                    ))}
+                    {files.map((file) => {
+                        const disabled = selectedIds.length >= FILE_LIMIT && !selectedIds.includes(file.id)
+                        return (
+                            <ListItem
+                                key={file.id}
+                                className={cx(classes.listItem, disabled ? classes.disabled : null)}
+                                classes={{ root: classes.itemRoot }}
+                                data-id={file.id}>
+                                <SelectableFile
+                                    disabled={disabled}
+                                    className={classes.file}
+                                    file={file}
+                                    selected={selectedIds.includes(file.id)}
+                                    onChange={handleChange}
+                                />
+                            </ListItem>
+                        )
+                    })}
                 </List>
             </Boundary>
         </section>