diff --git a/src/components/MainPage/SecondaryRight/ExtraComponentsMainPageAvatar.tsx b/src/components/MainPage/SecondaryRight/ExtraComponentsMainPageAvatar.tsx
index d1537b80dfc260b0bf42a24c0e1836ac63c2ed52..2bd6bff2c1e914c939cb1a20b6070553685a373c 100644
--- a/src/components/MainPage/SecondaryRight/ExtraComponentsMainPageAvatar.tsx
+++ b/src/components/MainPage/SecondaryRight/ExtraComponentsMainPageAvatar.tsx
@@ -63,10 +63,18 @@ const ExtraComponentsMainPageAvatar: React.FC<ExtraComponentsMainPageProps> = (
src={avatarSrc}
onChange={handleChange}
isUloading={isUloading}
- smart={false}
+ smartImgFit={"center"}
+ style={{ width: "170px", height: "170px" }}
+ //variant={"circle"}
+ />
+ <Avatar
+ src={avatarSrc}
+ onChange={handleChange}
+ isUloading={isUloading}
+ smartImgFit={"center"}
variant={"circle"}
+ style={{ width: "170px", height: "170px" }}
/>
-
<MaterialButton
onClick={() => setAvatarSrc(undefined)}
disabled={avatarSrc === undefined}
diff --git a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicSmartImgFit.jsx b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicSmartImgFit.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..56b7b87d61b168597870411685720c2a7d042f78
--- /dev/null
+++ b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicSmartImgFit.jsx
@@ -0,0 +1,59 @@
+import * as React from "react";
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+
+const CodeJSFileMosaicSmartImgFit = (card) => {
+ return (
+ <ShowDemoCode
+ codeCompleteJS={completeCodeJS(card)}
+ codeCompleteTS={completeCodeTS(card)}
+ codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+ codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+ codeSplittedJS={splittedCodeJS(card)}
+ codeSplittedTS={splittedCodeTS(card)}
+ />
+ );
+};
+export default CodeJSFileMosaicSmartImgFit;
+
+const splittedCodeJS = (card)=>``;
+const splittedCodeTS = (card)=>``;
+
+const completeCodeTS = (card)=>`import * as React from "react";
+import { ${card?"FileCard":"FileMosaic"}, ExtFile } from "@files-ui/react";
+
+export default function App() {
+ return (
+ <>
+ <${card?"FileCard":"FileMosaic"} {...sampleFileProp} info smartImgFit={false}/>
+ <${card?"FileCard":"FileMosaic"} {...sampleFileProp} info smartImgFit={"orientation"}/>
+ <${card?"FileCard":"FileMosaic"} {...sampleFileProp} info smartImgFit={"center"}/>
+ </>
+ );
+};
+const sampleFileProp: ExtFile = {
+ id: "fileId-1",
+ size: 28 * 1024 * 1024,
+ type: "image/gif",
+ name: "Thor arrives wakanda.png",
+ imageUrl: "https://64.media.tumblr.com/078a5af7a51d438b1c1ee5bd77f1b1e5/tumblr_p81qv7KIPa1rvufhzo3_r1_400.gif",
+};`;
+
+const completeCodeJS = (card)=>`import * as React from "react";
+import { ${card?"FileCard":"FileMosaic"} } from "@files-ui/react";
+
+export default function App() {
+ return (
+ <>
+ <${card?"FileCard":"FileMosaic"} {...sampleFileProp} info smartImgFit={false}/>
+ <${card?"FileCard":"FileMosaic"} {...sampleFileProp} info smartImgFit={"orientation"}/>
+ <${card?"FileCard":"FileMosaic"} {...sampleFileProp} info smartImgFit={"center"}/>
+ </>
+ );
+};
+const sampleFileProp = {
+ id: "fileId-1",
+ size: 28 * 1024 * 1024,
+ type: "image/gif",
+ name: "Thor arrives wakanda.png",
+ imageUrl: "https://64.media.tumblr.com/078a5af7a51d438b1c1ee5bd77f1b1e5/tumblr_p81qv7KIPa1rvufhzo3_r1_400.gif",
+};`;
diff --git a/src/components/demo-components/filemosaic-demo/DemoFileMosaicSmartImgFit.tsx b/src/components/demo-components/filemosaic-demo/DemoFileMosaicSmartImgFit.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..778c2fb2e5a0725fc01e687a8742ec8e7466d9ca
--- /dev/null
+++ b/src/components/demo-components/filemosaic-demo/DemoFileMosaicSmartImgFit.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+import { ExtFile, FileCard, FileMosaic } from "../../../files-ui";
+
+const DemoFileMosaicSmartImgFit = (props: { card: boolean }) => {
+ if (props.card)
+ return (
+ <>
+ <FileCard {...sampleFileProp} info smartImgFit={false} />
+ <FileCard {...sampleFileProp} info smartImgFit={"orientation"} />
+ <FileCard {...sampleFileProp} info smartImgFit={"center"} />
+ </>
+ );
+ return (
+ <>
+ <FileMosaic {...sampleFileProp} info smartImgFit={false} />
+ <FileMosaic {...sampleFileProp} info smartImgFit={"orientation"} />
+ <FileMosaic {...sampleFileProp} info smartImgFit={"center"} />
+ </>
+ );
+};
+export default DemoFileMosaicSmartImgFit;
+
+const sampleFileProp: ExtFile = {
+ id: "fileId-1",
+ size: 28 * 1024 * 1024,
+ type: "image/gif",
+ name: "Thor arrives wakanda.png",
+ imageUrl: "https://64.media.tumblr.com/078a5af7a51d438b1c1ee5bd77f1b1e5/tumblr_p81qv7KIPa1rvufhzo3_r1_400.gif",
+};
diff --git a/src/components/demo-components/filemosaic-demo/DemoFileMosaicValidation.jsx b/src/components/demo-components/filemosaic-demo/DemoFileMosaicValidation.jsx
index f02c9956d3ec6f0adf7b9d271f039aa20413fe1d..5d0f5aa78b01359204b717a01d6bd23cce319dc4 100644
--- a/src/components/demo-components/filemosaic-demo/DemoFileMosaicValidation.jsx
+++ b/src/components/demo-components/filemosaic-demo/DemoFileMosaicValidation.jsx
@@ -1,6 +1,26 @@
import * as React from "react";
import { FileCard, FileMosaic } from "../../../files-ui";
+const DemoFileMosaicValidation = ({ card }) => {
+ if (card)
+ return (
+ <>
+ {sampleFilesProps.map((extFile) => (
+ <FileCard key={extFile.id} {...extFile} info />
+ ))}
+ </>
+ );
+
+ return (
+ <>
+ {sampleFilesProps.map((extFile) => (
+ <FileMosaic key={extFile.id} {...extFile} info />
+ ))}
+ </>
+ );
+};
+export default DemoFileMosaicValidation;
+
const sampleFilesProps = [
{
id: "fileId-1",
@@ -23,24 +43,4 @@ const sampleFilesProps = [
name: "non valid file created from props.jpg",
valid: true,
},
-];
-
-const DemoFileMosaicValidation = ({ card }) => {
- if (card)
- return (
- <>
- {sampleFilesProps.map((extFile) => (
- <FileCard key={extFile.id} {...extFile} info />
- ))}
- </>
- );
-
- return (
- <>
- {sampleFilesProps.map((extFile) => (
- <FileMosaic key={extFile.id} {...extFile} info />
- ))}
- </>
- );
-};
-export default DemoFileMosaicValidation;
+];
\ No newline at end of file
diff --git a/src/files-ui/components/avatar/Avatar.tsx b/src/files-ui/components/avatar/Avatar.tsx
index ec1a995608dd3535a07de2027725c4eb881759ae..796af6a98de2956c67d4678e2616d5926df83d7f 100644
--- a/src/files-ui/components/avatar/Avatar.tsx
+++ b/src/files-ui/components/avatar/Avatar.tsx
@@ -21,7 +21,7 @@ const Avatar: React.FC<AvatarProps> = (props: AvatarProps) => {
uploadingLabel,
isUloading,
onError,
- smart,
+ smartImgFit,
} = mergeProps(props, defaultAvatarProps);
const inputRef: React.RefObject<HTMLInputElement> =
@@ -80,7 +80,7 @@ const Avatar: React.FC<AvatarProps> = (props: AvatarProps) => {
src={src}
alt={alt}
onError={handleError}
- smart={smart}
+ smartImgFit={smartImgFit}
/>
) : (
<div className={"fui-avatar-label"}>{emptyLabel}</div>
diff --git a/src/files-ui/components/avatar/AvatarProps.ts b/src/files-ui/components/avatar/AvatarProps.ts
index 53384ba479c47a22b69a4122848f4592d1aff5e4..513826b0327a255b6a53492cec29cf39b29338c1 100644
--- a/src/files-ui/components/avatar/AvatarProps.ts
+++ b/src/files-ui/components/avatar/AvatarProps.ts
@@ -29,16 +29,32 @@ export interface AvatarFullProps extends OverridableComponentProps {
* In that case height will be set to 100%. Otherwise width will be set to 100%
*/
smart?: boolean;
+ /**
+ * If not present, image width will be set to 100%.
+ *
+ * If present, image will be analized and displayed according to its heigh and width.
+ * Image width height greater than its width has a "portrait" orientation.
+ * Otherwise it has a "landscape" orientation.
+ * - If value is "orientation", image will be displayed complete by giving 100%
+ * to width prop if the orientation is "landscape".
+ * When orientation is "portrait", height prop will be set to 100%. Some images
+ * will show an empty space.
+ * - 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
+ */
+ smartImgFit?: false | "orientation" | "center";
}
export declare type AvatarProps =
- /* {
- [D in keyof React.HTMLProps<HTMLDivElement>]: React.HTMLProps<HTMLDivElement>[D]
- } & */
-{
- [P in keyof AvatarFullProps]: AvatarFullProps[P];
+ /* {
+ [D in keyof React.HTMLProps<HTMLDivElement>]: React.HTMLProps<HTMLDivElement>[D]
+ } & */
+ {
+ [P in keyof AvatarFullProps]: AvatarFullProps[P];
-}
+ }
//React.HTMLProps<HTMLDivElement>
export const defaultAvatarProps: AvatarProps =
{
@@ -49,4 +65,5 @@ export const defaultAvatarProps: AvatarProps =
uploadingLabel: "Uploading...",
readOnly: false,
smart: false,
+ smartImgFit: "orientation",
}
\ No newline at end of file
diff --git a/src/files-ui/components/file-card/FileCard.tsx b/src/files-ui/components/file-card/FileCard.tsx
index 10f8b974a13d0949e2890557279144f14ba9bf37..1af0ffb051556463ffd36c194c469a30a6426604 100644
--- a/src/files-ui/components/file-card/FileCard.tsx
+++ b/src/files-ui/components/file-card/FileCard.tsx
@@ -104,7 +104,7 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
onRightClick,
elevation = 4,
-
+ smartImgFit = "orientation",
//} = mergeProps(props, FileCardPropsDefault);
} = props;
@@ -268,6 +268,7 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
fileName={localName}
url={url}
isBlur={true}
+ smartImgFit={false}
/>
</Layer>
{/** IMAGE LAYER NO BLUR */}
@@ -277,6 +278,7 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
url={url}
fileName={localName}
isBlur={false}
+ smartImgFit={smartImgFit}
/>
</Layer>
<Layer className="file-card-status-layer" visible={true}>
@@ -300,7 +302,7 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
</div>
</div>
</Layer>
-
+
{/** INFO LAYER */}
<Layer
className="file-card-info-layer-container"
@@ -333,7 +335,6 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
/>
</div>
</Layer>
-
</LayerContainer>
<FileCardRightActions
deleteIcon={onDelete !== undefined}
diff --git a/src/files-ui/components/file-mosaic/components/FIleMosaicImageLayer/FileMosaicImageLayer.tsx b/src/files-ui/components/file-mosaic/components/FIleMosaicImageLayer/FileMosaicImageLayer.tsx
index 1f0f59b0239c6fd469508d34a2206c8d70874763..4ce3ba991a8bc3232312dc6f34e5ce52086050be 100644
--- a/src/files-ui/components/file-mosaic/components/FIleMosaicImageLayer/FileMosaicImageLayer.tsx
+++ b/src/files-ui/components/file-mosaic/components/FIleMosaicImageLayer/FileMosaicImageLayer.tsx
@@ -22,12 +22,28 @@ interface FileMosaicImageLayerProps {
*
*/
isBlur?: boolean;
+ /**
+ * If not present, image width will be set to 100%.
+ *
+ * If present, image will be analized and displayed according to its heigh and width.
+ * Image width height greater than its width has a "portrait" orientation.
+ * Otherwise it has a "landscape" orientation.
+ * - If value is "orientation", image will be displayed complete by giving 100%
+ * to width prop if the orientation is "landscape".
+ * When orientation is "portrait", height prop will be set to 100%. Some images
+ * will show an empty space.
+ * - 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
+ */
+ smartImgFit?: false | "orientation" | "center";
}
const FileMosaicImageLayer: React.FC<FileMosaicImageLayerProps> = (
props: FileMosaicImageLayerProps
) => {
//console.log("FileMosaicImageLayer", props);
- const { imageSource, url, fileName, card, isBlur } = props;
+ const { imageSource, url, fileName, card, isBlur,smartImgFit } = props;
const [localSource, setLocalSource] = React.useState<string | undefined>(
undefined
@@ -58,7 +74,7 @@ const FileMosaicImageLayer: React.FC<FileMosaicImageLayerProps> = (
<ImagePreview
src={localSource}
alt={`blur ${fileName}`}
- smart={false}
+ smartImgFit={false}
/>
)}
</React.Fragment>
@@ -71,6 +87,7 @@ const FileMosaicImageLayer: React.FC<FileMosaicImageLayerProps> = (
src={localSource}
style={{ borderRadius: "0px" }}
alt={`preview ${fileName}`}
+ smartImgFit={smartImgFit}
/>
</React.Fragment>
);
diff --git a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx
index a1b9c4d9a81fd952e30a7db83351bdeda5e7e366..c6b9d6332635ef655a5b6a435a42b41cd3aab31b 100644
--- a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx
+++ b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx
@@ -65,6 +65,7 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
onDoubleClick,
onClick,
onRightClick,
+ smartImgFit,
} = props;
//ref for anchor download element
@@ -232,6 +233,7 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
url={url}
fileName={localName}
isBlur={true}
+ smartImgFit={false}
/>
</Layer>
@@ -242,6 +244,7 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
url={url}
fileName={localName}
isBlur={false}
+ smartImgFit={smartImgFit}
/>
</Layer>
diff --git a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaicProps.ts b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaicProps.ts
index 29d1948f4d7a34dce3179bde51dae77d916b6786..b4e29328dc1f735c285c9de853b3eda4baee9f03 100644
--- a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaicProps.ts
+++ b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaicProps.ts
@@ -145,6 +145,22 @@ export interface FileMosaicPropsMap extends OverridableComponentProps {
* In case onDownload prop is given
*/
downloadUrl?: string;
+ /**
+ * If not present, image width will be set to 100%.
+ *
+ * If present, image will be analized and displayed according to its heigh and width.
+ * Image width height greater than its width has a "portrait" orientation.
+ * Otherwise it has a "landscape" orientation.
+ * - If value is "orientation", image will be displayed complete by giving 100%
+ * to width prop if the orientation is "landscape".
+ * When orientation is "portrait", height prop will be set to 100%. Some images
+ * will show an empty space.
+ * - 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
+ */
+ smartImgFit?: false | "orientation" | "center";
}
//React.HTMLProps<HTMLDivElement>
export type FileMosaicProps =
diff --git a/src/files-ui/components/previews/ImagePreview/ImagePreview.tsx b/src/files-ui/components/previews/ImagePreview/ImagePreview.tsx
index 3f0c0e489a05c429d701ba71972db939eca72a03..d692c658b7ae4b1a739e27f5b7ea2c8877a191f0 100644
--- a/src/files-ui/components/previews/ImagePreview/ImagePreview.tsx
+++ b/src/files-ui/components/previews/ImagePreview/ImagePreview.tsx
@@ -11,8 +11,21 @@ import "./ImagePreview.scss";
const ImagePreview: React.FC<ImagePreviewProps> = (
props: ImagePreviewProps
) => {
- const { src, alt, className, style, width, height, onError, smart } =
- mergeProps(props, ImagePreviewDefaultProps);
+ const {
+ src,
+ alt,
+ className,
+ style,
+ width,
+ height,
+ onError,
+ smart,
+ smartImgFit,
+ } = mergeProps(props, ImagePreviewDefaultProps);
+
+ const [[finalHeight, finalWidth], setfinalDimensions] = React.useState<
+ [number | undefined, number | undefined]
+ >([undefined, undefined]);
//console.table({ src, alt, className, style, width, height });
const [source, setSource] = React.useState<string | undefined>(undefined);
@@ -30,21 +43,42 @@ const ImagePreview: React.FC<ImagePreviewProps> = (
setSource(imageSource);
- if (!smart) return;
+ let finalHeight = undefined;
+ let finalWidth = undefined;
- const orientation: "landscape" | "portrait" = await getImageOrientation(
- imageSource
- );
- setOrientation(orientation);
+ if (!smartImgFit) {
+ //if not given
+ finalWidth = 100;
+ } else {
+ const orientation: "landscape" | "portrait" = await getImageOrientation(
+ imageSource
+ );
+ if (orientation === "landscape") {
+ if (smartImgFit === "orientation") {
+ finalHeight = undefined;
+ finalWidth = 100;
+ } else {
+ finalHeight = 100;
+ finalWidth = undefined;
+ }
+ } else {
+ if (smartImgFit === "center") {
+ finalHeight = undefined;
+ finalWidth = 100;
+ } else {
+ finalHeight = 100;
+ finalWidth = undefined;
+ }
+ }
+ }
+ setfinalDimensions([finalHeight, finalWidth]);
setSource(imageSource);
};
React.useEffect(() => {
//if not undefined
- if (!src) {
- return;
- }
+ if (!src) return;
//console.log("ImagePreview There is source :D");
if (typeof src === "string") {
@@ -53,20 +87,18 @@ const ImagePreview: React.FC<ImagePreviewProps> = (
} else {
//if a File object is given, check if is a supported format and read it
const headerMime = src.type ? src.type.split("/")[0] : "octet";
-
- if (headerMime === "image") {
- //set the video source and create the uri string if is a supported video format
+ if (headerMime === "image")
+ //set the image source and create the uri string if it's a supported image format
getSource(src);
- }
}
// eslint-disable-next-line
}, [src]);
//console.log("ImagePreview", src, source);
- const finalWidth: string | number | undefined =
+ /* const finalWidth: string | number | undefined =
width || (orientation === "landscape" && smart ? "100%" : undefined);
const finalHeight: string | number | undefined =
- height || (orientation === "portrait" && smart ? "100%" : undefined);
+ height || (orientation === "portrait" && smart ? "100%" : undefined); */
console.log("Image result", finalHeight, finalWidth, orientation, smart);
const handleError = (evt: React.SyntheticEvent<HTMLImageElement, Event>) => {
@@ -76,14 +108,14 @@ const ImagePreview: React.FC<ImagePreviewProps> = (
return (
<React.Fragment>
- {src && source && (
+ {src && source && (finalHeight || finalWidth) && (
<img
style={style || {}}
onClick={(evt) => {
evt.preventDefault();
}}
- width={!smart && !finalWidth?"100%":finalWidth}
- height={finalHeight}
+ width={finalWidth?`${finalWidth}%`:finalWidth}
+ height={finalHeight?`${finalHeight}%`:finalHeight}
src={source}
alt={alt}
className={className}
diff --git a/src/files-ui/components/previews/ImagePreview/ImagePreviewProps.ts b/src/files-ui/components/previews/ImagePreview/ImagePreviewProps.ts
index f008f694a6faf3234511059de8874238f0cc59ee..a6b6b860b5d9b7f8323d1c724d41fd7135686d7a 100644
--- a/src/files-ui/components/previews/ImagePreview/ImagePreviewProps.ts
+++ b/src/files-ui/components/previews/ImagePreview/ImagePreviewProps.ts
@@ -2,7 +2,7 @@ import { OverridableComponentProps } from "../../overridable";
-export interface ImagePreviewProps extends OverridableComponentProps {
+export interface ImagePreviewFullProps extends OverridableComponentProps {
/**
* Image source in string format (URL) or File Object (Will be read as URL)
*/
@@ -31,12 +31,39 @@ export interface ImagePreviewProps extends OverridableComponentProps {
* In that case height will be set to 100%. Otherwise width will be set to 100%
*/
smart?: boolean;
+ /**
+ * If not present, image width will be set to 100%.
+ *
+ * If present, image will be analized and displayed according to its heigh and width.
+ * Image width height greater than its width has a "portrait" orientation.
+ * Otherwise it has a "landscape" orientation.
+ * - If value is "orientation", image will be displayed complete by giving 100%
+ * to width prop if the orientation is "landscape".
+ * When orientation is "portrait", height prop will be set to 100%. Some images
+ * will show an empty space.
+ * - 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
+ */
+ smartImgFit?: false | "orientation" | "center";
}
+/*
+type DefImageProps = React.HTMLProps<HTMLImageElement>;
+type ImgPropsOmitImagePreviewFullProps = Omit<DefImageProps, keyof ImagePreviewFullProps>;
+ */
+
+export declare type ImagePreviewProps =
+ //ImgPropsOmitImagePreviewFullProps &
+ {
+ [I in keyof ImagePreviewFullProps]: ImagePreviewFullProps[I]
+ }
+
export const ImagePreviewDefaultProps: ImagePreviewProps = {
//width: "100%",
//height: "100%",
alt: "image-preview",
//className: "fui-image-preview"
- smart:true
+ smartImgFit: "orientation"
}
\ No newline at end of file
diff --git a/src/pages/demo/FileCardDemoPage.jsx b/src/pages/demo/FileCardDemoPage.jsx
index 6dcd66dfc78fc245cd93b6b5e239e916526210a3..23bce695875fa9a995327495dd36131f66c08c82 100644
--- a/src/pages/demo/FileCardDemoPage.jsx
+++ b/src/pages/demo/FileCardDemoPage.jsx
@@ -23,6 +23,8 @@ import DemoFileMosaicUploadStatus from "../../components/demo-components/filemos
import CodeJSFileMosaicUploadStatus from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicUploadStatus";
import DemoFileCardActions from "../../components/demo-components/filemosaic-demo/DemoFileCradActions";
import CodeJSFileCardActions from "../../components/demo-components/filemosaic-demo/CodeJSFileCardActions";
+import DemoFileMosaicSmartImgFit from "../../components/demo-components/filemosaic-demo/DemoFileMosaicSmartImgFit";
+import CodeJSFileMosaicSmartImgFit from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicSmartImgFit";
const FileCardDemoPage = (props) => {
return (
@@ -321,7 +323,22 @@ const FileCardDemoPage = (props) => {
<CodeJSFileMosaicDarkMode card />
</section>
+ <section id="smart-image-fit">
+ <SubTitle content="Smart image fit" />
+ <DescParagraph>
+ <CodeHighlight>FileCard</CodeHighlight> with
+ <TypeHighlight>smartImgFit</TypeHighlight> prop will display image
+ according to its heigh and width. Image width height greater than
+ its width has a "portrait" orientation. Otherwise it has a
+ "landscape" orientation.
+ </DescParagraph>
+ <DemoContainerFileMosaic>
+ <DemoFileMosaicSmartImgFit card />
+ </DemoContainerFileMosaic>
+
+ <CodeJSFileMosaicSmartImgFit card />
+ </section>
<section id="api">
<SubTitle content="API" />
<DescParagraph>
@@ -332,7 +349,8 @@ const FileCardDemoPage = (props) => {
<li>
<AnchorToTab href="/api/filecard">{"<FileCard/>"}</AnchorToTab>
</li>
- <li>|
+ <li>
+ |
<AnchorToTab href="/api/fileinputbuttom">
{"<FileInputButton/>"}
</AnchorToTab>
diff --git a/src/pages/demo/FileMosaicDemoPage.jsx b/src/pages/demo/FileMosaicDemoPage.jsx
index af381aaa5403ea9c6abfa032ad8c8543e4d7b264..d7f159e8ccb7020b706d6cb66b2b31e02beae258 100644
--- a/src/pages/demo/FileMosaicDemoPage.jsx
+++ b/src/pages/demo/FileMosaicDemoPage.jsx
@@ -27,6 +27,8 @@ import CodeJSFileMosaicDarkMode from "../../components/demo-components/filemosai
import DemoFileMosaicFileIcons from "../../components/demo-components/filemosaic-demo/DemoFileMosaicFileIcons";
import DemoFileCardActions from "../../components/demo-components/filemosaic-demo/DemoFileCradActions";
import CodeJSFileCardActions from "../../components/demo-components/filemosaic-demo/CodeJSFileCardActions";
+import DemoFileMosaicSmartImgFit from "../../components/demo-components/filemosaic-demo/DemoFileMosaicSmartImgFit";
+import CodeJSFileMosaicSmartImgFit from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicSmartImgFit";
const FileMosaicDemoPage = (props) => {
return (
@@ -336,6 +338,23 @@ const FileMosaicDemoPage = (props) => {
<CodeJSFileMosaicDarkMode />
</section>
+ <section id="smart-image-fit">
+ <SubTitle content="Smart image fit" />
+ <DescParagraph>
+ <CodeHighlight>FileMosaic</CodeHighlight> with
+ <TypeHighlight>smartImgFit</TypeHighlight> prop will display image
+ according to its heigh and width. Image width height greater than
+ its width has a "portrait" orientation. Otherwise it has a
+ "landscape" orientation.
+ </DescParagraph>
+
+ <DemoContainerFileMosaic>
+ <DemoFileMosaicSmartImgFit />
+ </DemoContainerFileMosaic>
+
+ <CodeJSFileMosaicSmartImgFit />
+ </section>
+
{/* <section id="localization">
<SubTitle content="Localization" />
<DescParagraph>