Skip to content

Commit 5b6795a

Browse files
JinSSJ3JinSSJ3
authored
Merge pull request #9 from files-ui/20-feat-add-smart-img-fit-prop-in-file-card-mosaic-avatar-img-preview
20 feat add smart img fit prop in file card mosaic avatar img preview
2 parents cff6693 + e3915ab commit 5b6795a

File tree

14 files changed

+304
-58
lines changed

14 files changed

+304
-58
lines changed

‎src/components/MainPage/SecondaryRight/ExtraComponentsMainPageAvatar.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,10 +63,18 @@ const ExtraComponentsMainPageAvatar: React.FC<ExtraComponentsMainPageProps> = (
6363
src={avatarSrc}
6464
onChange={handleChange}
6565
isUloading={isUloading}
66-
smart={false}
66+
smartImgFit={"center"}
67+
style={{ width: "170px", height: "170px" }}
68+
//variant={"circle"}
69+
/>
70+
<Avatar
71+
src={avatarSrc}
72+
onChange={handleChange}
73+
isUloading={isUloading}
74+
smartImgFit={"center"}
6775
variant={"circle"}
76+
style={{ width: "170px", height: "170px" }}
6877
/>
69-
7078
<MaterialButton
7179
onClick={() => setAvatarSrc(undefined)}
7280
disabled={avatarSrc === undefined}

‎src/components/demo-components/filemosaic-demo/CodeJSFileMosaicSmartImgFit.jsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import * as React from "react";
2+
import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
3+
4+
const CodeJSFileMosaicSmartImgFit = (card) => {
5+
return (
6+
<ShowDemoCode
7+
codeCompleteJS={completeCodeJS(card)}
8+
codeCompleteTS={completeCodeTS(card)}
9+
codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
10+
codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
11+
codeSplittedJS={splittedCodeJS(card)}
12+
codeSplittedTS={splittedCodeTS(card)}
13+
/>
14+
);
15+
};
16+
export default CodeJSFileMosaicSmartImgFit;
17+
18+
const splittedCodeJS = (card)=>``;
19+
const splittedCodeTS = (card)=>``;
20+
21+
const completeCodeTS = (card)=>`import * as React from "react";
22+
import { ${card?"FileCard":"FileMosaic"}, ExtFile } from "@files-ui/react";
23+
24+
export default function App() {
25+
return (
26+
<>
27+
<${card?"FileCard":"FileMosaic"} {...sampleFileProp} info smartImgFit={false}/>
28+
<${card?"FileCard":"FileMosaic"} {...sampleFileProp} info smartImgFit={"orientation"}/>
29+
<${card?"FileCard":"FileMosaic"} {...sampleFileProp} info smartImgFit={"center"}/>
30+
</>
31+
);
32+
};
33+
const sampleFileProp: ExtFile = {
34+
id: "fileId-1",
35+
size: 28 * 1024 * 1024,
36+
type: "image/gif",
37+
name: "Thor arrives wakanda.png",
38+
imageUrl: "https://64.media.tumblr.com/078a5af7a51d438b1c1ee5bd77f1b1e5/tumblr_p81qv7KIPa1rvufhzo3_r1_400.gif",
39+
};`;
40+
41+
const completeCodeJS = (card)=>`import * as React from "react";
42+
import { ${card?"FileCard":"FileMosaic"} } from "@files-ui/react";
43+
44+
export default function App() {
45+
return (
46+
<>
47+
<${card?"FileCard":"FileMosaic"} {...sampleFileProp} info smartImgFit={false}/>
48+
<${card?"FileCard":"FileMosaic"} {...sampleFileProp} info smartImgFit={"orientation"}/>
49+
<${card?"FileCard":"FileMosaic"} {...sampleFileProp} info smartImgFit={"center"}/>
50+
</>
51+
);
52+
};
53+
const sampleFileProp = {
54+
id: "fileId-1",
55+
size: 28 * 1024 * 1024,
56+
type: "image/gif",
57+
name: "Thor arrives wakanda.png",
58+
imageUrl: "https://64.media.tumblr.com/078a5af7a51d438b1c1ee5bd77f1b1e5/tumblr_p81qv7KIPa1rvufhzo3_r1_400.gif",
59+
};`;

‎src/components/demo-components/filemosaic-demo/DemoFileMosaicSmartImgFit.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import * as React from "react";
2+
import { ExtFile, FileCard, FileMosaic } from "../../../files-ui";
3+
4+
const DemoFileMosaicSmartImgFit = (props: { card: boolean }) => {
5+
if (props.card)
6+
return (
7+
<>
8+
<FileCard {...sampleFileProp} info smartImgFit={false} />
9+
<FileCard {...sampleFileProp} info smartImgFit={"orientation"} />
10+
<FileCard {...sampleFileProp} info smartImgFit={"center"} />
11+
</>
12+
);
13+
return (
14+
<>
15+
<FileMosaic {...sampleFileProp} info smartImgFit={false} />
16+
<FileMosaic {...sampleFileProp} info smartImgFit={"orientation"} />
17+
<FileMosaic {...sampleFileProp} info smartImgFit={"center"} />
18+
</>
19+
);
20+
};
21+
export default DemoFileMosaicSmartImgFit;
22+
23+
const sampleFileProp: ExtFile = {
24+
id: "fileId-1",
25+
size: 28 * 1024 * 1024,
26+
type: "image/gif",
27+
name: "Thor arrives wakanda.png",
28+
imageUrl: "https://64.media.tumblr.com/078a5af7a51d438b1c1ee5bd77f1b1e5/tumblr_p81qv7KIPa1rvufhzo3_r1_400.gif",
29+
};

‎src/components/demo-components/filemosaic-demo/DemoFileMosaicValidation.jsx‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,26 @@
11
import * as React from "react";
22
import { FileCard, FileMosaic } from "../../../files-ui";
33

4+
const DemoFileMosaicValidation = ({ card }) => {
5+
if (card)
6+
return (
7+
<>
8+
{sampleFilesProps.map((extFile) => (
9+
<FileCard key={extFile.id} {...extFile} info />
10+
))}
11+
</>
12+
);
13+
14+
return (
15+
<>
16+
{sampleFilesProps.map((extFile) => (
17+
<FileMosaic key={extFile.id} {...extFile} info />
18+
))}
19+
</>
20+
);
21+
};
22+
export default DemoFileMosaicValidation;
23+
424
const sampleFilesProps = [
525
{
626
id: "fileId-1",
@@ -23,24 +43,4 @@ const sampleFilesProps = [
2343
name: "non valid file created from props.jpg",
2444
valid: true,
2545
},
26-
];
27-
28-
const DemoFileMosaicValidation = ({ card }) => {
29-
if (card)
30-
return (
31-
<>
32-
{sampleFilesProps.map((extFile) => (
33-
<FileCard key={extFile.id} {...extFile} info />
34-
))}
35-
</>
36-
);
37-
38-
return (
39-
<>
40-
{sampleFilesProps.map((extFile) => (
41-
<FileMosaic key={extFile.id} {...extFile} info />
42-
))}
43-
</>
44-
);
45-
};
46-
export default DemoFileMosaicValidation;
46+
];

‎src/files-ui/components/avatar/Avatar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const Avatar: React.FC<AvatarProps> = (props: AvatarProps) => {
2121
uploadingLabel,
2222
isUloading,
2323
onError,
24-
smart,
24+
smartImgFit,
2525
} = mergeProps(props, defaultAvatarProps);
2626

2727
const inputRef: React.RefObject<HTMLInputElement> =
@@ -80,7 +80,7 @@ const Avatar: React.FC<AvatarProps> = (props: AvatarProps) => {
8080
src={src}
8181
alt={alt}
8282
onError={handleError}
83-
smart={smart}
83+
smartImgFit={smartImgFit}
8484
/>
8585
) : (
8686
<div className={"fui-avatar-label"}>{emptyLabel}</div>

‎src/files-ui/components/avatar/AvatarProps.ts‎

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,16 +29,32 @@ export interface AvatarFullProps extends OverridableComponentProps {
2929
* In that case height will be set to 100%. Otherwise width will be set to 100%
3030
*/
3131
smart?: boolean;
32+
/**
33+
* If not present, image width will be set to 100%.
34+
*
35+
* If present, image will be analized and displayed according to its heigh and width.
36+
* Image width height greater than its width has a "portrait" orientation.
37+
* Otherwise it has a "landscape" orientation.
38+
* - If value is "orientation", image will be displayed complete by giving 100%
39+
* to width prop if the orientation is "landscape".
40+
* When orientation is "portrait", height prop will be set to 100%. Some images
41+
* will show an empty space.
42+
* - If value is "center", image will be centered and will not be displayed complete.
43+
* This the empty space is avoided. This is achived by giving 100% to width prop if
44+
* the orientation is "portrait". When orientation is "landscape", height prop will be set to 100%.
45+
* @default orientation
46+
*/
47+
smartImgFit?: false | "orientation" | "center";
3248
}
3349

3450
export declare type AvatarProps =
35-
/* {
36-
[D in keyof React.HTMLProps<HTMLDivElement>]: React.HTMLProps<HTMLDivElement>[D]
37-
} & */
38-
{
39-
[P in keyof AvatarFullProps]: AvatarFullProps[P];
51+
/* {
52+
[D in keyof React.HTMLProps<HTMLDivElement>]: React.HTMLProps<HTMLDivElement>[D]
53+
} & */
54+
{
55+
[P in keyof AvatarFullProps]: AvatarFullProps[P];
4056

41-
}
57+
}
4258
//React.HTMLProps<HTMLDivElement>
4359
export const defaultAvatarProps: AvatarProps =
4460
{
@@ -49,4 +65,5 @@ export const defaultAvatarProps: AvatarProps =
4965
uploadingLabel: "Uploading...",
5066
readOnly: false,
5167
smart: false,
68+
smartImgFit: "orientation",
5269
}

‎src/files-ui/components/file-card/FileCard.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
104104
onRightClick,
105105

106106
elevation = 4,
107-
107+
smartImgFit = "orientation",
108108
//} = mergeProps(props, FileCardPropsDefault);
109109
} = props;
110110

@@ -268,6 +268,7 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
268268
fileName={localName}
269269
url={url}
270270
isBlur={true}
271+
smartImgFit={false}
271272
/>
272273
</Layer>
273274
{/** IMAGE LAYER NO BLUR */}
@@ -277,6 +278,7 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
277278
url={url}
278279
fileName={localName}
279280
isBlur={false}
281+
smartImgFit={smartImgFit}
280282
/>
281283
</Layer>
282284
<Layer className="file-card-status-layer" visible={true}>
@@ -300,7 +302,7 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
300302
</div>
301303
</div>
302304
</Layer>
303-
305+
304306
{/** INFO LAYER */}
305307
<Layer
306308
className="file-card-info-layer-container"
@@ -333,7 +335,6 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
333335
/>
334336
</div>
335337
</Layer>
336-
337338
</LayerContainer>
338339
<FileCardRightActions
339340
deleteIcon={onDelete !== undefined}

‎src/files-ui/components/file-mosaic/components/FIleMosaicImageLayer/FileMosaicImageLayer.tsx‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,28 @@ interface FileMosaicImageLayerProps {
2222
*
2323
*/
2424
isBlur?: boolean;
25+
/**
26+
* If not present, image width will be set to 100%.
27+
*
28+
* If present, image will be analized and displayed according to its heigh and width.
29+
* Image width height greater than its width has a "portrait" orientation.
30+
* Otherwise it has a "landscape" orientation.
31+
* - If value is "orientation", image will be displayed complete by giving 100%
32+
* to width prop if the orientation is "landscape".
33+
* When orientation is "portrait", height prop will be set to 100%. Some images
34+
* will show an empty space.
35+
* - If value is "center", image will be centered and will not be displayed complete.
36+
* This the empty space is avoided. This is achived by giving 100% to width prop if
37+
* the orientation is "portrait". When orientation is "landscape", height prop will be set to 100%.
38+
* @default orientation
39+
*/
40+
smartImgFit?: false | "orientation" | "center";
2541
}
2642
const FileMosaicImageLayer: React.FC<FileMosaicImageLayerProps> = (
2743
props: FileMosaicImageLayerProps
2844
) => {
2945
//console.log("FileMosaicImageLayer", props);
30-
const { imageSource, url, fileName, card, isBlur } = props;
46+
const { imageSource, url, fileName, card, isBlur,smartImgFit } = props;
3147

3248
const [localSource, setLocalSource] = React.useState<string | undefined>(
3349
undefined
@@ -58,7 +74,7 @@ const FileMosaicImageLayer: React.FC<FileMosaicImageLayerProps> = (
5874
<ImagePreview
5975
src={localSource}
6076
alt={`blur ${fileName}`}
61-
smart={false}
77+
smartImgFit={false}
6278
/>
6379
)}
6480
</React.Fragment>
@@ -71,6 +87,7 @@ const FileMosaicImageLayer: React.FC<FileMosaicImageLayerProps> = (
7187
src={localSource}
7288
style={{ borderRadius: "0px" }}
7389
alt={`preview ${fileName}`}
90+
smartImgFit={smartImgFit}
7491
/>
7592
</React.Fragment>
7693
);

‎src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
6565
onDoubleClick,
6666
onClick,
6767
onRightClick,
68+
smartImgFit,
6869
} = props;
6970

7071
//ref for anchor download element
@@ -232,6 +233,7 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
232233
url={url}
233234
fileName={localName}
234235
isBlur={true}
236+
smartImgFit={false}
235237
/>
236238
</Layer>
237239

@@ -242,6 +244,7 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
242244
url={url}
243245
fileName={localName}
244246
isBlur={false}
247+
smartImgFit={smartImgFit}
245248
/>
246249
</Layer>
247250

‎src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaicProps.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,22 @@ export interface FileMosaicPropsMap extends OverridableComponentProps {
145145
* In case onDownload prop is given
146146
*/
147147
downloadUrl?: string;
148+
/**
149+
* If not present, image width will be set to 100%.
150+
*
151+
* If present, image will be analized and displayed according to its heigh and width.
152+
* Image width height greater than its width has a "portrait" orientation.
153+
* Otherwise it has a "landscape" orientation.
154+
* - If value is "orientation", image will be displayed complete by giving 100%
155+
* to width prop if the orientation is "landscape".
156+
* When orientation is "portrait", height prop will be set to 100%. Some images
157+
* will show an empty space.
158+
* - If value is "center", image will be centered and will not be displayed complete.
159+
* This the empty space is avoided. This is achived by giving 100% to width prop if
160+
* the orientation is "portrait". When orientation is "landscape", height prop will be set to 100%.
161+
* @default orientation
162+
*/
163+
smartImgFit?: false | "orientation" | "center";
148164
}
149165
//React.HTMLProps<HTMLDivElement>
150166
export type FileMosaicProps =

0 commit comments

Comments
 (0)