Skip to content

Commit cfcc69b

Browse files
JinSSJ3JinSSJ3
committed
[REF]: Improve useClassname with dynamic style for Avatar and drop layer
1 parent b219530 commit cfcc69b

File tree

4 files changed

+68
-55
lines changed

4 files changed

+68
-55
lines changed

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

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -20,21 +20,27 @@ const Avatar: React.FC<AvatarProps> = (props: AvatarProps) => {
2020

2121
variant,
2222
borderRadius,
23-
uploadingLabel,
24-
isUloading,
23+
loadingLabel: uploadingLabel,
24+
isLoading: isUloading,
2525
onError,
2626

2727
smartImgFit,
2828

2929
style,
3030
...rest
3131
} = mergeProps(props, defaultAvatarProps);
32-
console.log("Avatar smartImgFit",smartImgFit);
32+
console.log("Avatar smartImgFit", smartImgFit);
3333

3434
const inputRef: React.RefObject<HTMLInputElement> =
3535
React.useRef<HTMLInputElement>(null);
3636

37-
const isStyleInjected: boolean = useAvatarStyle(borderRadius);
37+
const avatarId = React.useId();
38+
const finalClassNameBorder: string | undefined = useAvatarStyle(
39+
avatarId.replaceAll(":",""),
40+
borderRadius
41+
);
42+
43+
console.log("finalClassNameBorder",finalClassNameBorder);
3844

3945
const handleClick = () => {
4046
// alert("Agregar fotooooooo");
@@ -60,21 +66,24 @@ const Avatar: React.FC<AvatarProps> = (props: AvatarProps) => {
6066
onError?.(evt);
6167
};
6268

63-
if (isStyleInjected) {
69+
if (!finalClassNameBorder) return <></>;
70+
else {
6471
return (
6572
<React.Fragment>
6673
<div
67-
className={`fui-avatar-main-container${
68-
variant === "circle" ? " circle" : ""
69-
}`}
74+
className={
75+
`fui-avatar-main-container${
76+
variant === "circle" ? " circle" : ""
77+
}` + " "+finalClassNameBorder
78+
}
7079
style={style}
7180
{...rest}
7281
>
7382
{/**Layer 1 */}
7483
{isUloading ? (
7584
<Layer visible={true}>
7685
<div className={"fui-avatar-label"}>
77-
<InfiniteLoader />
86+
<InfiniteLoader size={50} />
7887
{uploadingLabel}
7988
</div>
8089
</Layer>
@@ -92,9 +101,11 @@ const Avatar: React.FC<AvatarProps> = (props: AvatarProps) => {
92101
{/**Layer 2 */}
93102
{!readOnly && (
94103
<>
95-
<p className={"fui-avatar-label hide"} onClick={handleClick}>
96-
{src ? changeLabel : emptyLabel}
97-
</p>
104+
{!isUloading && (
105+
<div className={"fui-avatar-label hide"} onClick={handleClick}>
106+
{src ? changeLabel : emptyLabel}
107+
</div>
108+
)}
98109
<InputHidden
99110
multiple={false}
100111
accept={accept || "image/*"}
@@ -107,7 +118,6 @@ const Avatar: React.FC<AvatarProps> = (props: AvatarProps) => {
107118
</React.Fragment>
108119
);
109120
}
110-
return <React.Fragment></React.Fragment>;
111121
};
112122
export default Avatar;
113123

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,17 @@ export interface AvatarFullProps extends OverridableComponentProps {
1111
*/
1212
alt?: string,
1313

14-
emptyLabel?: string;
15-
uploadingLabel?: string;
16-
changeLabel?: string;
14+
emptyLabel?: React.ReactNode;
15+
loadingLabel?: React.ReactNode;
16+
changeLabel?: React.ReactNode;
1717
/**
1818
* if a src is given, then avatar will show the image
1919
* or a file error message and will not allow
2020
* the user to change the picture. Also, layer on hover will not be shown
2121
*/
2222
readOnly?: boolean;
2323

24-
isUloading?: boolean;
24+
isLoading?: boolean;
2525

2626
onError?: React.ReactEventHandler<HTMLImageElement>;
2727

@@ -63,7 +63,7 @@ export const defaultAvatarProps: AvatarProps =
6363
alt: `avatar`,
6464
emptyLabel: "Agregar foto",
6565
changeLabel: "Cambiar foto",
66-
uploadingLabel: "Uploading...",
66+
loadingLabel: "Loading...",
6767
readOnly: false,
6868
//smart: false,
6969
smartImgFit: "center",

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

Lines changed: 38 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
11
import { DynamicSheet, DynamiCSS } from "@dynamicss/dynamicss";
22
import * as React from "react";
33

4-
export const useAvatarStyle = (borderRadius: string | undefined): boolean => {
4+
export const useAvatarStyle = (avatarId: string, borderRadius: string | undefined): string | undefined => {
55
const [idAvatarStyles, setIdAvatarStyles] = React.useState<string>("");
66
const [styleInjected, setStyleInjected] = React.useState<boolean>(false);
7-
7+
const [classNameBorder, setClassNameBorder] = React.useState<string | undefined>(undefined);
8+
console.log("borderRadius",borderRadius);
89
/**
910
* creates a dynamic css sheet for avatar
1011
* @param borderRadius the border radius
1112
* @returns a dynamic css sheet
1213
*/
13-
const makeDynamicAvatarCSSRules = (borderRadius: string | undefined): DynamicSheet => {
14+
const makeDynamicAvatarCSSRules = (avatarId: string, borderRadius: string | undefined): DynamicSheet => {
15+
const finalIdStyle: string = !borderRadius ? "-default" : `-${avatarId}`;
1416
const styleSheet: DynamicSheet = DynamiCSS.makeStyleSheet({
15-
id: "avatar-styles",
17+
id: "fui-avatar-styles" + finalIdStyle,
1618
sheetRules: [
1719
{
18-
className: "fui-avatar-border",
20+
className: "fui-avatar-border" + finalIdStyle,
1921
rules: {
2022
borderRadius: `${borderRadius || "6px"} !important`,
2123
}
@@ -44,44 +46,45 @@ export const useAvatarStyle = (borderRadius: string | undefined): boolean => {
4446
DynamiCSS.removeStyleSheet(idAvatarStyles);
4547
return;
4648
} */
47-
let idStyle: string = "avatar-styles";
48-
const styleSheet: DynamicSheet = makeDynamicAvatarCSSRules(borderRadius);
49-
// check if classname was added
50-
// if yes, edit css
51-
// if not insert css
52-
if (!styleInjected) {
53-
console.log("avatar, no css, inserting");
54-
idStyle = DynamiCSS.insertStyleSheet(styleSheet);
55-
console.log("avatar, no css, inserted OK", idStyle);
49+
let idStyle: string = "";
50+
const styleSheet: DynamicSheet = makeDynamicAvatarCSSRules(avatarId, borderRadius);
51+
//check if default is in DOM
52+
if (!borderRadius && !styleInjected) {
53+
if (DynamiCSS.existStyleSheet("fui-avatar-styles-default")) {
54+
setStyleInjected(true);
55+
setIdAvatarStyles("fui-avatar-styles-default");
56+
} else {
57+
idStyle = DynamiCSS.insertStyleSheet(styleSheet);
58+
setIdAvatarStyles(idStyle);
59+
if (idStyle !== "") {
60+
setStyleInjected(true);
61+
}
62+
}
63+
} else if (!styleInjected) {
64+
// check if classname was added
65+
// if yes, edit css
66+
// if not insert css
67+
console.log("avatar, no css, inserting");
68+
idStyle = DynamiCSS.insertStyleSheet(styleSheet);
69+
console.log("avatar, no css, inserted OK", idStyle);
5670

57-
setIdAvatarStyles(idStyle);
71+
setIdAvatarStyles(idStyle);
5872

59-
if (idStyle !== "") {
60-
setStyleInjected(true);
73+
if (idStyle !== "") {
74+
setStyleInjected(true);
75+
}
76+
} else {
77+
console.log("avatar, catch css, modifiying", idAvatarStyles);
78+
DynamiCSS.editStyleSheet(idAvatarStyles, styleSheet.sheetRules || []);
6179
}
62-
} else {
63-
console.log("avatar, catch css, modifiying", idAvatarStyles);
64-
DynamiCSS.editStyleSheet(idAvatarStyles, styleSheet.sheetRules || []);
65-
}
80+
setClassNameBorder("fui-avatar-border-"+avatarId);
6681
// eslint-disable-next-line
6782
}, [borderRadius]);
6883

6984

70-
/* React.useEffect(() => {
71-
72-
return () => {
73-
console.log("avatar, deleting init", styleInjected, idAvatarStyles);
74-
if (styleInjected) {
75-
console.log("avatar, catch css delete");
76-
77-
DynamiCSS.removeStyleSheet(idAvatarStyles);
78-
}
79-
setIdAvatarStyles("");
80-
setStyleInjected(false);
81-
}
82-
}, [idAvatarStyles, styleInjected]); */
8385

84-
return styleInjected;
86+
87+
return classNameBorder;
8588
}
8689

8790

‎src/files-ui/components/drop-layer/hooks/useDropLayerClassName.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,9 @@ const useDropLayerClassName = (
4343

4444
if (finalDropzoneId === "default" && !styleInjected) {
4545
//check if already inserted
46-
if (DynamiCSS.existStyleSheet(finalDropzoneId)) {
46+
if (DynamiCSS.existStyleSheet("files-ui-drop-layer-style-id-"+finalDropzoneId)) {
4747
setStyleInjected(true);
48-
setIdStyles(idStyle);
48+
setIdStyles("files-ui-drop-layer-style-id-"+finalDropzoneId);
4949

5050
} else {
5151
idStyle = DynamiCSS.insertStyleSheet(styleSheet);

0 commit comments

Comments
 (0)