IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Grafana DS: Fix dropzone showing upload file even if there is a file (#62200)

Browse Source 
* Grafana DS: Fix dropzone showing upload file even if there is a file
This commit is contained in:
Oscar Kilhed
2023-01-27 12:51:10 +01:00
committed by GitHub
parent 960307e938
commit dab3fac01b
3 changed files with 24 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/grafana-ui/src/components/FileDropzone/FileDropzone.test.tsx
View File

@@ -104,6 +104,12 @@ describe('The FileDropzone component', () => {
expect(onDrop).toBeCalledWith([fileToUpload], [], expect.anything());
});
it('should display the text generated by a custom primaryTextSupplier', async () => {
const customText = 'custom text from primaryTextSuplier';
render(<FileDropzone primaryTextSupplier={() => customText} />);
expect(await screen.findByText(customText)).toBeInTheDocument();
});
it('should show children inside the dropzone', () => {
const component = (
<FileDropzone>

17
packages/grafana-ui/src/components/FileDropzone/FileDropzone.tsx
View File

@@ -46,6 +46,7 @@ export interface FileDropzoneProps {
*/
fileListRenderer?: (file: DropzoneFile, removeFile: (file: DropzoneFile) => void) => ReactNode;
onFileRemove?: (file: DropzoneFile) => void;
primaryTextSupplier?: (files: DropzoneFile[], options?: BackwardsCompatibleDropzoneOptions) => string;
}
export interface DropzoneFile {
@@ -57,7 +58,15 @@ export interface DropzoneFile {
retryUpload?: () => void;
}
export function FileDropzone({ options, children, readAs, onLoad, fileListRenderer, onFileRemove }: FileDropzoneProps) {
export function FileDropzone({
options,
primaryTextSupplier = getPrimaryText,
children,
readAs,
onLoad,
fileListRenderer,
onFileRemove,
}: FileDropzoneProps) {
const [files, setFiles] = useState<DropzoneFile[]>([]);
const [errorMessages, setErrorMessages] = useState<string[]>([]);
@@ -198,7 +207,7 @@ export function FileDropzone({ options, children, readAs, onLoad, fileListRender
<div className={styles.container}>
<div data-testid="dropzone" {...getRootProps({ className: styles.dropzone })}>
<input {...getInputProps()} />
{children ?? <FileDropzoneDefaultChildren primaryText={getPrimaryText(files, options)} />}
{children ?? <FileDropzoneDefaultChildren primaryText={primaryTextSupplier(files, options)} />}
</div>
{errorMessages.length > 0 && getErrorMessages()}
{options?.accept && (
@@ -252,11 +261,11 @@ export function FileDropzoneDefaultChildren({
</div>
);
}
function getPrimaryText(files: DropzoneFile[], options?: BackwardsCompatibleDropzoneOptions) {
function getPrimaryText(files?: DropzoneFile[], options?: BackwardsCompatibleDropzoneOptions) {
if (options?.multiple === undefined || options?.multiple) {
return 'Upload file';
}
return files.length ? 'Replace file' : 'Upload file';
return files && files.length ? 'Replace file' : 'Upload file';
}
function getAcceptedFileTypeText(accept: string | string[] | Accept) {