Skip to content

Commit fea68d3

Browse files
joelfmrodriguesjoelfmrodrigues
committed
Merge branch 'UploadFiles' of https://github.com/joaojmendes/sp-dev-fx-controls-react into joaojmendes-UploadFiles
2 parents fb6a353 + 9851cb9 commit fea68d3

37 files changed

+123
-35
lines changed

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

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable no-undef */
12
/* eslint-disable @typescript-eslint/explicit-function-return-type */
23
/* eslint-disable @typescript-eslint/no-explicit-any */
34
import * as React from 'react';
@@ -17,7 +18,7 @@ import {
1718
ScrollbarVisibility,
1819
} from 'office-ui-fabric-react/lib/ScrollablePane';
1920

20-
import { DragDropFiles } from '../../../dragDropFiles/DragDropFiles';
21+
import { DragDropFiles } from '../../../dragDropFiles';
2122
import { globalState } from '../../jotai/atoms';
2223
import { FileInfo } from '../File/FileInfo';
2324
import { FileCommandBar } from '../FileCommandBar/FileCommandBar';
@@ -31,7 +32,7 @@ export const DocumentList: React.FunctionComponent<IDocumentListProps> = (
3132
const { documentListStyles, scollableContainerStyles, bootomContainerStyles } = useDocumentListStyles();
3233
const [appGlobalState, setGlobalState] = useAtom(globalState);
3334
const [renderFiles, setRenderFiles] = React.useState<React.ReactNode[]>([]);
34-
const { selectedFiles, files, containerWidth, themeVariant } = appGlobalState;
35+
const { selectedFiles, files, containerWidth } = appGlobalState;
3536
const currentPage = React.useRef<number>(0);
3637
const currentFiles = React.useRef<File[]>([]);
3738
const { onUploadFiles } = props;
@@ -88,7 +89,7 @@ export const DocumentList: React.FunctionComponent<IDocumentListProps> = (
8889
return { ...prevState, files: newsFiles };
8990
});
9091
},
91-
[files, themeVariant]
92+
[files, setGlobalState]
9293
);
9394

9495
const onDelete = React.useCallback(() => {
@@ -97,7 +98,7 @@ export const DocumentList: React.FunctionComponent<IDocumentListProps> = (
9798
setGlobalState((prevState) => {
9899
return { ...prevState, files: newFiles, selectedFiles: [] };
99100
});
100-
}, [selectedFiles, files]);
101+
}, [files, selectedFiles, setGlobalState]);
101102

102103
const onUpload = React.useCallback(
103104
(file: File) => {
@@ -106,7 +107,7 @@ export const DocumentList: React.FunctionComponent<IDocumentListProps> = (
106107
return { ...prevState, files: newFiles };
107108
});
108109
},
109-
[files]
110+
[setGlobalState]
110111
);
111112

112113
const onSelectAll = React.useCallback(
@@ -127,7 +128,7 @@ export const DocumentList: React.FunctionComponent<IDocumentListProps> = (
127128
});
128129
}
129130
},
130-
[files]
131+
[files, setGlobalState]
131132
);
132133

133134
const getContainerWidth = React.useCallback(() => {
@@ -140,7 +141,7 @@ export const DocumentList: React.FunctionComponent<IDocumentListProps> = (
140141
};
141142
});
142143
}
143-
}, []);
144+
}, [setGlobalState]);
144145

145146
React.useEffect(() => {
146147
renderFilesPerPage();
@@ -150,7 +151,7 @@ export const DocumentList: React.FunctionComponent<IDocumentListProps> = (
150151
window.addEventListener("resize", () => {
151152
getContainerWidth();
152153
});
153-
}, [files, selectedFiles, containerWidth]);
154+
}, [files, selectedFiles, containerWidth, renderFilesPerPage, getContainerWidth]);
154155

155156
getContainerWidth();
156157

@@ -160,7 +161,7 @@ export const DocumentList: React.FunctionComponent<IDocumentListProps> = (
160161
<FileCommandBar onDelete={onDelete} onSelectedAll={onSelectAll} onUpload={onUpload} />
161162
<ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto} styles={scollableContainerStyles}>
162163
<div className={documentListStyles.documentList}>
163-
<DragDropFiles dropEffect="upload" enable={true} onDrop={onDrop}>
164+
<DragDropFiles enable={true} onDrop={onDrop}>
164165
<Stack tokens={{ padding: 20 }}>
165166
{renderFiles.length ? (
166167
<div className={documentListStyles.filesContainerGrid}>{renderFiles}</div>
@@ -171,17 +172,18 @@ export const DocumentList: React.FunctionComponent<IDocumentListProps> = (
171172
</DragDropFiles>
172173
</div>
173174
</ScrollablePane>
174-
<Stack styles={bootomContainerStyles} horizontalAlign="end" tokens={{ childrenGap: 20, }}>
175-
<div className={documentListStyles.separator} />
176-
{selectedFiles.length > 0 && (
175+
<Stack styles={bootomContainerStyles} horizontalAlign="end" tokens={{ childrenGap: 20 }}>
176+
<div className={documentListStyles.separator} />
177+
177178
<>
178179
<PrimaryButton
180+
disabled={!selectedFiles.length }
179181
iconProps={{ iconName: "upload" }}
180182
text={strings.UploadFilesUploadButtonLabel}
181183
onClick={() => onUploadFiles(selectedFiles)}
182184
/>
183185
</>
184-
)}
186+
185187
</Stack>
186188
</div>
187189
</>

‎src/controls/uploadFiles/components/DocumentList/useDocumentListStyles.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import * as React from 'react';
44

5-
import { useAtomValue } from 'jotai/utils';
5+
import { useAtom } from 'jotai';
66

77
import {
88
IScrollablePaneStyles,
@@ -16,7 +16,7 @@ import { globalState } from '../../jotai/atoms';
1616

1717
/* eslint-disable @typescript-eslint/no-empty-function */
1818
export const useDocumentListStyles = () => {
19-
const appGlobalState = useAtomValue(globalState);
19+
const [appGlobalState,] = useAtom(globalState);
2020
const { themeVariant, containerWidth, pageSize, files } = appGlobalState;
2121

2222
const containerHeight = React.useMemo(() => {
@@ -31,9 +31,10 @@ export const useDocumentListStyles = () => {
3131
root: {
3232
paddingLeft: 20,
3333
paddingRight: 20,
34+
paddingBottom: 20,
3435
}
3536
}
36-
}, [themeVariant]);
37+
}, []);
3738

3839
const scollableContainerStyles: Partial<IScrollablePaneStyles> = React.useMemo(() => {
3940
return {

‎src/controls/uploadFiles/components/File/FileInfo.tsx

Lines changed: 30 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import * as React from 'react';
22

33
import { format } from 'date-fns';
4-
import { useAtomValue } from 'jotai';
54
import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
65
import {
76
DocumentCard,
@@ -19,7 +18,6 @@ import {
1918
} from '@fluentui/react-file-type-icons';
2019

2120
import { useUtils } from '../../hooks/useUtils';
22-
import { globalState } from '../../jotai/atoms';
2321
import { useFileStyles } from './useFileStyles';
2422

2523
initializeFileTypeIcons();
@@ -33,17 +31,22 @@ export const FileInfo: React.FunctionComponent<IFileInfoProps> = (props: React.P
3331
const { fileInfo, onSelected, isSelected } = props;
3432
const { name, size, lastModified } = fileInfo;
3533

36-
const { checkBoxStyles, documentCardStyles, stackCheckboxStyles, fileNameStyles,documentImageStyles } = useFileStyles();
34+
const {
35+
checkBoxStyles,
36+
documentCardStyles,
37+
stackCheckboxStyles,
38+
fileNameStyles,
39+
documentImageStyles,
40+
} = useFileStyles();
3741
const { getShortText, getFileExtension, getFileSize } = useUtils();
3842
const fileSize = getFileSize(size);
3943
const fileExtension = getFileExtension(name);
4044
const fileModified = format(new Date(lastModified), "dd, MMM yyyy");
4145
const [isChecked, setIsChecked] = React.useState<boolean>(false);
42-
const appGlobalState = useAtomValue(globalState);
43-
const { themeVariant, } = appGlobalState;
4446
const fileIcon: IIconProps = React.useMemo(() => {
4547
return {
4648
...getFileTypeIconProps({ extension: fileExtension, size: 48, imageFileType: "svg" }),
49+
styles: { root: { fontSize: 0 } }
4750
};
4851
}, [fileExtension]);
4952

@@ -54,7 +57,7 @@ export const FileInfo: React.FunctionComponent<IFileInfoProps> = (props: React.P
5457
onSelected(checked, fileInfo);
5558
}
5659
},
57-
[onSelected]
60+
[fileInfo, onSelected]
5861
);
5962

6063
React.useEffect(() => {
@@ -64,17 +67,21 @@ export const FileInfo: React.FunctionComponent<IFileInfoProps> = (props: React.P
6467
const renderNormalCard = React.useCallback(() => {
6568
return (
6669
<>
67-
6870
<Stack>
6971
<DocumentCard styles={documentCardStyles} title={name}>
70-
<DocumentCardImage height={100} imageFit={ImageFit.cover} iconProps={fileIcon} styles={documentImageStyles} />
72+
<DocumentCardImage
73+
height={100}
74+
imageFit={ImageFit.cover}
75+
iconProps={fileIcon}
76+
styles={documentImageStyles}
77+
/>
7178
<Stack
7279
horizontal
7380
horizontalAlign="end"
7481
tokens={{ childrenGap: 5, padding: 7 }}
7582
styles={stackCheckboxStyles}
7683
>
77-
<Checkbox styles={checkBoxStyles} checked={isChecked} onChange={onCheckboxChange} />
84+
<Checkbox styles={checkBoxStyles} checked={isChecked} onChange={onCheckboxChange} />
7885
</Stack>
7986

8087
<DocumentCardDetails>
@@ -90,10 +97,22 @@ export const FileInfo: React.FunctionComponent<IFileInfoProps> = (props: React.P
9097
</DocumentCardDetails>
9198
</DocumentCard>
9299
</Stack>
93-
94100
</>
95101
);
96-
}, [isChecked, fileIcon, fileSize, fileModified, getShortText, name, onCheckboxChange, themeVariant]);
102+
}, [
103+
documentCardStyles,
104+
name,
105+
fileIcon,
106+
documentImageStyles,
107+
stackCheckboxStyles,
108+
checkBoxStyles,
109+
isChecked,
110+
onCheckboxChange,
111+
fileNameStyles,
112+
getShortText,
113+
fileSize,
114+
fileModified,
115+
]);
97116

98117
return <>{renderNormalCard()}</>;
99118
};

‎src/controls/uploadFiles/components/File/useFileStyles.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export const useFileStyles = () => {
3232

3333
},
3434
}
35-
}, [themeVariant]);
35+
}, []);
3636

3737
const checkBoxStyles: IStyleFunctionOrObject<ICheckboxProps, ICheckboxStyles> = React.useCallback(
3838
(props: ICheckboxProps) => {
@@ -95,7 +95,7 @@ export const useFileStyles = () => {
9595

9696
const stackCheckboxStyles: IStackStyles = React.useMemo(() => {
9797
return { root: { position: "absolute", top: 0, right: 0, zIndex: 1, padding: 5 } };
98-
}, [themeVariant]);
98+
}, []);
9999

100100
const fileNameStyles: ITextStyles = React.useMemo(() => {
101101
return { root: { fontWeight: FontWeights.semibold,

‎src/controls/uploadFiles/components/FileCommandBar/FileCommandBar.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export const FileCommandBar: React.FunctionComponent<IFileCommandBarProps> = (
4848
setIsAllSelected(false);
4949
onDelete();
5050
}}
51-
text="Delete"
51+
text={strings.UpLoadFilesDeleteButtonLabel}
5252
/>
5353
);
5454
},
@@ -75,9 +75,10 @@ export const FileCommandBar: React.FunctionComponent<IFileCommandBarProps> = (
7575

7676
const commanbarSelectAllButton: IComponentAs<ICommandBarItemProps> = React.useCallback(
7777
(props) => {
78+
const selectedAll = files.length > 0 && files.length === selectedFiles.length;
7879
return (
7980
<Stack horizontal verticalAlign="center" horizontalAlign="start" tokens={{ childrenGap: 15 }}>
80-
{files.length > 0 ? ( <Checkbox styles={checkBoxStyles} label="Select all" checked={isAllSelected} onChange={
81+
{files.length > 0 ? ( <Checkbox styles={checkBoxStyles} label={strings.UpLoadFilesSelectAllLabel} checked={selectedAll} onChange={
8182
(ev?: React.FormEvent<HTMLElement | HTMLInputElement>, checked?: boolean)=>{
8283
setIsAllSelected(checked);
8384
onSelectedAll(checked);
@@ -87,7 +88,7 @@ export const FileCommandBar: React.FunctionComponent<IFileCommandBarProps> = (
8788
</Stack>
8889
);
8990
},
90-
[checkBoxStyles, selectedFiles]
91+
[files.length, selectedFiles.length, checkBoxStyles, controlStyles.separatorVertrical, onSelectedAll]
9192
);
9293

9394
React.useEffect(() => {

‎src/controls/uploadFiles/components/UploadFiles/useUploadFilesStyles.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import React from 'react';
22

33
/* eslint-disable @typescript-eslint/explicit-function-return-type */
44
import { useAtomValue } from 'jotai/utils';
5-
import { FontWeights } from 'office-ui-fabric-react';
65
import { IStackStyles } from 'office-ui-fabric-react/lib/Stack';
6+
import { FontWeights } from 'office-ui-fabric-react/lib/Styling';
77
import { ITextStyles } from 'office-ui-fabric-react/lib/Text';
88

99
import { globalState } from '../../jotai/atoms/globalState';

‎src/loc/bg-bg.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@ declare var define: any;
33
define([], () => {
44
return {
55
UploadFilesButtonLabel: "Add",
6+
UpLoadFilesDeleteButtonLabel: "Delete",
67
UpLoadFilesDragDropLabel: "Drag and Drop files or select Add File button",
8+
UpLoadFilesSelectAllLabel: "Select all",
79
"Save": "Спасявам",
810
"Cancel": "Задрасквам",
911
"SiteBreadcrumbLabel": "Сайт за хляб",

‎src/loc/ca-es.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@ declare var define: any;
33
define([], () => {
44
return {
55
UploadFilesButtonLabel: "Add",
6+
UpLoadFilesDeleteButtonLabel: "Delete",
67
UpLoadFilesDragDropLabel: "Drag and Drop files or select Add File button",
8+
UpLoadFilesSelectAllLabel: "Select all",
79
"Save": "Salvar",
810
"Cancel": "Cancel·lar",
911
"SiteBreadcrumbLabel": "Lloc web d'engruna",

‎src/loc/da-dk.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@ declare var define: any;
33
define([], () => {
44
return {
55
UploadFilesButtonLabel: "Add",
6+
UpLoadFilesDeleteButtonLabel: "Delete",
67
UpLoadFilesDragDropLabel: "Drag and Drop files or select Add File button",
8+
UpLoadFilesSelectAllLabel: "Select all",
79
"Save": "Spare",
810
"Cancel": "Aflyse",
911
"SiteBreadcrumbLabel": "Hjemmeside breadcrumb",

‎src/loc/de-de.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@ declare var define: any;
33
define([], () => {
44
return {
55
UploadFilesButtonLabel: "Add",
6+
UpLoadFilesDeleteButtonLabel: "Delete",
67
UpLoadFilesDragDropLabel: "Drag and Drop files or select Add File button",
8+
UpLoadFilesSelectAllLabel: "Select all",
79
"Save": "Speichern",
810
"Cancel": "Abbrechen",
911
"SiteBreadcrumbLabel": "Website Brotkrume",

0 commit comments

Comments
 (0)