@codezee/sixtify-brahma 0.2.180 → 0.2.182
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/packages/shared-components/dist/FormFields/ImageUpload/ImageUploadView.d.ts +9 -1
- package/packages/shared-components/dist/FormFields/ImageUpload/ImageUploadView.d.ts.map +1 -1
- package/packages/shared-components/dist/FormFields/ImageUpload/ImageUploadView.js +21 -26
package/package.json
CHANGED
|
@@ -5,6 +5,14 @@ export type ImageUploadViewProps = Readonly<{
|
|
|
5
5
|
sx?: SxProps;
|
|
6
6
|
borderProgress?: number;
|
|
7
7
|
borderSide?: "left" | "right";
|
|
8
|
+
width?: string | number | {
|
|
9
|
+
xs?: string | number;
|
|
10
|
+
md?: string | number;
|
|
11
|
+
};
|
|
12
|
+
height?: string | number | {
|
|
13
|
+
xs?: string | number;
|
|
14
|
+
md?: string | number;
|
|
15
|
+
};
|
|
8
16
|
}>;
|
|
9
|
-
export declare function ImageUploadView({ defaultValue, variant, sx, borderProgress, borderSide, }: ImageUploadViewProps): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export declare function ImageUploadView({ defaultValue, variant, sx, borderProgress, borderSide, width, height, }: ImageUploadViewProps): import("react/jsx-runtime").JSX.Element;
|
|
10
18
|
//# sourceMappingURL=ImageUploadView.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageUploadView.d.ts","sourceRoot":"","sources":["../../../src/FormFields/ImageUpload/ImageUploadView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,OAAO,EAAY,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"ImageUploadView.d.ts","sourceRoot":"","sources":["../../../src/FormFields/ImageUpload/ImageUploadView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,OAAO,EAAY,MAAM,eAAe,CAAC;AAG3E,MAAM,MAAM,oBAAoB,GAAG,QAAQ,CAAC;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG;QAAE,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IACzE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG;QAAE,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;CAC3E,CAAC,CAAC;AACH,wBAAgB,eAAe,CAAC,EAC9B,YAAY,EACZ,OAAO,EACP,EAAE,EACF,cAAc,EACd,UAAoB,EACpB,KAAK,EACL,MAAM,GACP,EAAE,oBAAoB,2CAwGtB"}
|
|
@@ -4,12 +4,13 @@ exports.ImageUploadView = ImageUploadView;
|
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const material_1 = require("@mui/material");
|
|
6
6
|
const react_1 = require("react");
|
|
7
|
-
|
|
8
|
-
function ImageUploadView({ defaultValue, variant, sx, borderProgress, borderSide = "right", }) {
|
|
7
|
+
function ImageUploadView({ defaultValue, variant, sx, borderProgress, borderSide = "right", width, height, }) {
|
|
9
8
|
const theme = (0, material_1.useTheme)();
|
|
10
9
|
const { butterflyBlue } = theme.palette.app.color;
|
|
11
10
|
const [hasError, setHasError] = (0, react_1.useState)(false);
|
|
12
|
-
const
|
|
11
|
+
const defaultImageSize = { xs: "100px", md: "120px" };
|
|
12
|
+
const imageWidth = width ?? defaultImageSize;
|
|
13
|
+
const imageHeight = height ?? defaultImageSize;
|
|
13
14
|
const isCircle = variant === "circle";
|
|
14
15
|
const borderRadius = isCircle ? "50%" : "10px";
|
|
15
16
|
const getBorderClipPath = () => {
|
|
@@ -35,36 +36,30 @@ function ImageUploadView({ defaultValue, variant, sx, borderProgress, borderSide
|
|
|
35
36
|
const borderClipPath = getBorderClipPath();
|
|
36
37
|
return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
|
|
37
38
|
width: "100%",
|
|
38
|
-
minWidth:
|
|
39
|
-
maxWidth:
|
|
40
|
-
height:
|
|
39
|
+
minWidth: imageWidth,
|
|
40
|
+
maxWidth: imageWidth,
|
|
41
|
+
height: imageHeight,
|
|
41
42
|
overflow: "hidden",
|
|
42
43
|
position: "relative",
|
|
43
44
|
borderRadius,
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
:
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
borderRadius,
|
|
56
|
-
border: `2px solid ${butterflyBlue[900]}`,
|
|
57
|
-
clipPath: borderClipPath,
|
|
58
|
-
pointerEvents: "none",
|
|
59
|
-
},
|
|
60
|
-
}),
|
|
45
|
+
border: "none",
|
|
46
|
+
"&::before": {
|
|
47
|
+
// eslint-disable-next-line quotes
|
|
48
|
+
content: '""',
|
|
49
|
+
position: "absolute",
|
|
50
|
+
inset: 0,
|
|
51
|
+
borderRadius,
|
|
52
|
+
border: `2.5px solid ${butterflyBlue[900]}`,
|
|
53
|
+
clipPath: borderClipPath,
|
|
54
|
+
pointerEvents: "none",
|
|
55
|
+
},
|
|
61
56
|
"& img": {
|
|
62
57
|
borderRadius,
|
|
63
58
|
},
|
|
64
59
|
...sx,
|
|
65
|
-
}, children: defaultValue && !hasError ? ((0, jsx_runtime_1.jsx)(
|
|
66
|
-
width: "
|
|
67
|
-
height: "
|
|
60
|
+
}, children: defaultValue && !hasError ? ((0, jsx_runtime_1.jsx)(material_1.Stack, { justifyContent: "center", alignItems: "center", sx: { height: "100%" }, children: (0, jsx_runtime_1.jsx)("img", { alt: "", src: defaultValue, onError: () => setHasError(true), style: {
|
|
61
|
+
width: "93%",
|
|
62
|
+
height: "93%",
|
|
68
63
|
objectFit: "cover",
|
|
69
64
|
} }) })) : ((0, jsx_runtime_1.jsx)(material_1.Stack, { justifyContent: "center", alignItems: "center", sx: { height: "100%" }, children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { sx: { width: "93%", height: "93%" } }) })) }));
|
|
70
65
|
}
|