From 700e6bee985177e2e511dbb8f7433f8f379719de Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Sun, 19 Mar 2023 15:47:37 -0500
Subject: [PATCH] [REF]: R for adecuating to API pages
---
src/files-ui/components/avatar/Avatar.tsx | 13 ++++---
src/files-ui/components/avatar/AvatarProps.ts | 34 ++++++++++++++----
.../components/dropzone/DropzoneProps.ts | 2 +-
.../file-input-button/FileInputButton.tsx | 2 +-
.../file-input-button/InputButtonProps.ts | 35 +++++++++----------
.../material-button/MaterialButtonProps.ts | 2 +-
.../overridable/OverridableComponentsProps.ts | 2 +-
.../previews/FullScreen/FullScreen.tsx | 4 +--
.../previews/FullScreen/FullScreenProps.ts | 7 +++-
.../previews/ImagePreview/ImagePreview.tsx | 4 +--
.../previews/VideoPreview/VideoPreview.tsx | 3 +-
.../VideoPreview/VideoPreviewProps.ts | 3 +-
src/files-ui/core/types/ExtFile.ts | 22 ++++++------
13 files changed, 76 insertions(+), 57 deletions(-)
diff --git a/src/files-ui/components/avatar/Avatar.tsx b/src/files-ui/components/avatar/Avatar.tsx
index 1bd4de4..3367810 100644
--- a/src/files-ui/components/avatar/Avatar.tsx
+++ b/src/files-ui/components/avatar/Avatar.tsx
@@ -15,6 +15,7 @@ const Avatar: React.FC<AvatarProps> = (props: AvatarProps) => {
accept,
onChange,
+
emptyLabel,
changeLabel,
@@ -36,11 +37,11 @@ const Avatar: React.FC<AvatarProps> = (props: AvatarProps) => {
const avatarId = React.useId();
const finalClassNameBorder: string | undefined = useAvatarStyle(
- avatarId.replaceAll(":",""),
+ avatarId.replaceAll(":", ""),
borderRadius
);
- console.log("finalClassNameBorder",finalClassNameBorder);
+ console.log("finalClassNameBorder", finalClassNameBorder);
const handleClick = () => {
// alert("Agregar fotooooooo");
@@ -71,11 +72,9 @@ const Avatar: React.FC<AvatarProps> = (props: AvatarProps) => {
return (
<React.Fragment>
<div
- className={
- `fui-avatar-main-container${
- variant === "circle" ? " circle" : ""
- }` + " "+finalClassNameBorder
- }
+ className={`fui-avatar-main-container${
+ variant === "circle" ? " circle" : ""
+ } ${finalClassNameBorder}`}
style={style}
{...rest}
>
diff --git a/src/files-ui/components/avatar/AvatarProps.ts b/src/files-ui/components/avatar/AvatarProps.ts
index 0569506..2736887 100644
--- a/src/files-ui/components/avatar/AvatarProps.ts
+++ b/src/files-ui/components/avatar/AvatarProps.ts
@@ -3,27 +3,47 @@ export interface AvatarFullProps extends OverridableComponentProps {
accept?: string;
variant?: "square" | "circle";
borderRadius?: string;
+ /**
+ * Just like any other input component. The value of the input element,
+ required for a controlled component.
+ */
src?: string | File;
+ /**
+ * Callback fired when an image file is selected.
+ * @param selectedFile The new file selected
+ */
onChange?: (selectedFile: File) => void,
/**
* Alternative label when an error occurs
* on loading the image
*/
alt?: string,
-
+ /**
+ * Label to be displayed when image source is not set.
+ */
emptyLabel?: React.ReactNode;
+ /**
+ * Label to be displayed when "isLoading" prop is set set. This will cover
+ the current image.
+ */
loadingLabel?: React.ReactNode;
+ /**
+ * Label to be displayed when there is a valid source set.
+ */
changeLabel?: React.ReactNode;
/**
- * if a src is given, then avatar will show the image
- * or a file error message and will not allow
+ * If true and if a src is given, then avatar will show the image and will not allow
* the user to change the picture. Also, layer on hover will not be shown
*/
readOnly?: boolean;
-
+ /**
+ * If true, loadingLabel will be shown.
+ */
isLoading?: boolean;
-
- onError?: React.ReactEventHandler<HTMLImageElement>;
+ /**
+ * Callback fired when an error occured on loading the image.
+ */
+ onError?: Function;
/**
* If not present, image width will be set to 100%.
@@ -38,7 +58,7 @@ export interface AvatarFullProps extends OverridableComponentProps {
* - If value is "center", image will be centered and will not be displayed complete.
* This the empty space is avoided. This is achived by giving 100% to width prop if
* the orientation is "portrait". When orientation is "landscape", height prop will be set to 100%.
- * @default orientation
+ * @default center
*/
smartImgFit?: false | "orientation" | "center";
}
diff --git a/src/files-ui/components/dropzone/components/dropzone/DropzoneProps.ts b/src/files-ui/components/dropzone/components/dropzone/DropzoneProps.ts
index c5ee403..93491c2 100644
--- a/src/files-ui/components/dropzone/components/dropzone/DropzoneProps.ts
+++ b/src/files-ui/components/dropzone/components/dropzone/DropzoneProps.ts
@@ -160,7 +160,7 @@ export interface DropzoneFullProps extends OverridableComponentProps {
onDragLeave?: (evt: React.DragEvent<HTMLDivElement>) => void;
//ACTION BUTTONS
- /** If set, buttons will be added on the before or after of the component.
+ /** If set, buttons will be added before or after of the component.
This buttons triggresthe common opertions of the component such as
clean, upload, abort and delete all.
*/
diff --git a/src/files-ui/components/file-input-button/FileInputButton.tsx b/src/files-ui/components/file-input-button/FileInputButton.tsx
index cfcd697..b9dd2ea 100644
--- a/src/files-ui/components/file-input-button/FileInputButton.tsx
+++ b/src/files-ui/components/file-input-button/FileInputButton.tsx
@@ -41,8 +41,8 @@ const FileInputButton: React.FC<FileInputButtonProps> = (
) => {
const {
//basic
- onChange,
value = [],
+ onChange,
//validation
accept,
maxFileSize,
diff --git a/src/files-ui/components/file-input-button/InputButtonProps.ts b/src/files-ui/components/file-input-button/InputButtonProps.ts
index 4e05985..af6ab31 100644
--- a/src/files-ui/components/file-input-button/InputButtonProps.ts
+++ b/src/files-ui/components/file-input-button/InputButtonProps.ts
@@ -1,7 +1,6 @@
-import { CustomValidateFileResponse, ExtFile, Localization, UploadConfig, UploadResponse } from "../../core";
+import { CustomValidateFileResponse, ExtFile, Localization, UploadConfig } from "../../core";
import { DropzoneActions } from "../dropzone/components/dropzone/DropzoneProps";
import { MaterialButtonProps } from "../material-button/MaterialButtonProps";
-//import { OverridableComponentProps } from "../overridable";
interface InputButtonFullProps {
/**
@@ -37,9 +36,9 @@ interface InputButtonFullProps {
*/
localization?: Localization;
/**
- * If true, will show a ripple everytime
- * the user drops files or selects files
- */
+ * If true, will not show a ripple effect everytime the user
+ * clicks the components for selecting files.
+ */
disableRipple?: boolean;
/////////////// VALIDATION STAGE ///////////////
@@ -112,20 +111,18 @@ interface InputButtonFullProps {
*/
onUploadFinish?: (extFiles: ExtFile[]) => void;
- //ACTION BUTTONS
- /**
- * The configuration needed for uploading the files.
- * When "uploadConfig" is not given or uploadConfig.url is undefined
- * the upload button will not be visible
- * and uploadOnDrop flag will not work
- */
- actionButtons?: DropzoneActions;
- // ADD OR REPLACE
- /**
- * The behaviour when new files are selected or dropped
- * @default 'add'
- */
- behaviour?: 'add' | 'replace';
+ //ACTION BUTTONS
+ /** If set, buttons will be added before or after of the component.
+ This buttons triggresthe common opertions of the component such as
+ clean, upload, abort and delete all.
+ */
+ actionButtons?: DropzoneActions;
+ // ADD OR REPLACE
+ /**
+ * The behaviour when new files are selected or dropped
+ * @default 'add'
+ */
+ behaviour?: 'add' | 'replace';
}
type MaterialButtonPropsOmitInputButtonFullProps = Omit<MaterialButtonProps, keyof InputButtonFullProps>;
diff --git a/src/files-ui/components/material-button/MaterialButtonProps.ts b/src/files-ui/components/material-button/MaterialButtonProps.ts
index 7ca40ed..4f6dce3 100644
--- a/src/files-ui/components/material-button/MaterialButtonProps.ts
+++ b/src/files-ui/components/material-button/MaterialButtonProps.ts
@@ -25,7 +25,7 @@ export interface MaterialButtonPropsInterface extends OverridableComponentProps
*/
variant?: "text" | "outlined" | "contained";
/**
- * The label to place when no files are selected
+ * The text label for the button
*/
label?: string;
/**
diff --git a/src/files-ui/components/overridable/OverridableComponentsProps.ts b/src/files-ui/components/overridable/OverridableComponentsProps.ts
index 78149fe..b43c39e 100644
--- a/src/files-ui/components/overridable/OverridableComponentsProps.ts
+++ b/src/files-ui/components/overridable/OverridableComponentsProps.ts
@@ -5,7 +5,7 @@
*/
export declare type OverridableComponentProps = {
/**
- * The react node children
+ * The content of the component.
*/
children?: React.ReactNode | string;
/**
diff --git a/src/files-ui/components/previews/FullScreen/FullScreen.tsx b/src/files-ui/components/previews/FullScreen/FullScreen.tsx
index f30d5ff..64882e7 100644
--- a/src/files-ui/components/previews/FullScreen/FullScreen.tsx
+++ b/src/files-ui/components/previews/FullScreen/FullScreen.tsx
@@ -16,10 +16,10 @@ const FullScreen: React.FC<FullScreenProps> = (props: FullScreenProps) => {
const handleCloseEsc = (evt: KeyboardEvent) => {
if (evt.key === "Escape") onClose?.();
};
- console.log("adding listener");
+ //console.log("adding listener");
document.addEventListener("keydown", handleCloseEsc);
return () => {
- console.log("removing listener");
+ //console.log("removing listener");
document.removeEventListener("keydown", handleCloseEsc);
};
// eslint-disable-next-line
diff --git a/src/files-ui/components/previews/FullScreen/FullScreenProps.ts b/src/files-ui/components/previews/FullScreen/FullScreenProps.ts
index 7671224..502fb8f 100644
--- a/src/files-ui/components/previews/FullScreen/FullScreenProps.ts
+++ b/src/files-ui/components/previews/FullScreen/FullScreenProps.ts
@@ -7,12 +7,17 @@ export interface FullScreenPropsMap extends OverridableComponentProps {
*/
open?: boolean;
/**
- * handler for on Close operation
+ * Callback fired when the component requests to be closed.
*/
onClose?: Function;
}
+type DefDivProps = React.HTMLProps<HTMLDivElement>;
+type DivPropsOmitFullScreenPropsMap = Omit<DefDivProps, keyof FullScreenPropsMap>;
+
+
export type FullScreenProps =
+ DivPropsOmitFullScreenPropsMap &
{
[F in keyof FullScreenPropsMap]: FullScreenPropsMap[F]
}
\ No newline at end of file
diff --git a/src/files-ui/components/previews/ImagePreview/ImagePreview.tsx b/src/files-ui/components/previews/ImagePreview/ImagePreview.tsx
index b5d1b16..55b83f1 100644
--- a/src/files-ui/components/previews/ImagePreview/ImagePreview.tsx
+++ b/src/files-ui/components/previews/ImagePreview/ImagePreview.tsx
@@ -14,13 +14,13 @@ const ImagePreview: React.FC<ImagePreviewProps> = (
const {
src,
alt,
- className,
- style,
width,
height,
onError,
//smart,
smartImgFit,
+ style,
+ className,
} = mergeProps(props, ImagePreviewDefaultProps);
console.log("ImagePreview smartImgFit",smartImgFit);
const [[finalHeight, finalWidth], setfinalDimensions] = React.useState<
diff --git a/src/files-ui/components/previews/VideoPreview/VideoPreview.tsx b/src/files-ui/components/previews/VideoPreview/VideoPreview.tsx
index 3cfe978..aa82a06 100644
--- a/src/files-ui/components/previews/VideoPreview/VideoPreview.tsx
+++ b/src/files-ui/components/previews/VideoPreview/VideoPreview.tsx
@@ -6,7 +6,8 @@ const VideoPreview: React.FC<VideoPreviewProps> = (
) => {
const {
src: videoSrc,
- /* autoPlay, controls, */ style,
+ /* autoPlay, controls, */
+ style,
className,
...others
} = props;
diff --git a/src/files-ui/components/previews/VideoPreview/VideoPreviewProps.ts b/src/files-ui/components/previews/VideoPreview/VideoPreviewProps.ts
index 95d7159..810fec3 100644
--- a/src/files-ui/components/previews/VideoPreview/VideoPreviewProps.ts
+++ b/src/files-ui/components/previews/VideoPreview/VideoPreviewProps.ts
@@ -3,8 +3,7 @@ import { OverridableComponentProps } from "../../overridable";
export interface VideoPreviewPropsMap extends OverridableComponentProps {
/**
- * video source in string format or File object
- * FileItemComponent returns this value in onWatch handler
+ * The video source in string format or File object.
*/
src?: File | string;
diff --git a/src/files-ui/core/types/ExtFile.ts b/src/files-ui/core/types/ExtFile.ts
index 73a4cf4..5d54eb3 100644
--- a/src/files-ui/core/types/ExtFile.ts
+++ b/src/files-ui/core/types/ExtFile.ts
@@ -29,10 +29,6 @@ export declare type ExtFile = {
* The size of the file. Used mostly for displaying file data from server.
*/
size?: number;
- /**
- * Link, URI or string representation of an image
- */
- imageUrl?: string;
/**
* a flag that determines whether the file is valid, not valid or it is not validated.
*/
@@ -41,14 +37,18 @@ export declare type ExtFile = {
* The list of errors when the file was validated
*/
errors?: string[];
+ /**
+ * The current upload status. (e.g. "uploading")
+ */
+ uploadStatus?: UPLOADSTATUS | undefined;
/**
* A message that shows the result of the upload process
*/
uploadMessage?: string;
/**
- * The current upload status. (e.g. "uploading")
+ * Link, URI or string representation of an image
*/
- uploadStatus?: UPLOADSTATUS | undefined;
+ imageUrl?: string;
/**
* The XMLHttpRequest object for performing uploads to a server
*/
@@ -61,12 +61,11 @@ export declare type ExtFile = {
progress?: number;
/**
* The additional data that will be sent to the server
- * when filesare uploaded individually
+ * when files are uploaded individually
*/
extraUploadData?: Record<string, any>;
/**
- * Any kind of extra data that could be needed
- *
+ * Any kind of extra data that could be needed.
*/
extraData?: Object;
/**
@@ -74,9 +73,8 @@ export declare type ExtFile = {
*/
serverResponse?: ServerResponse;
/**
- * Url to perform a GET request in order to download the file.
- * This action is triggered when download button is clicked or pressed.
- * In case onDownload prop is given
+ * The url to be used to perform a GET request in order to download the
+ file. If defined, the download icon will be shown.
*/
downloadUrl?: string;
}
--
GitLab