@chayns-components/core 5.5.42 → 5.5.45
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/AGENTS.md +21 -0
- package/lib/cjs/components/grid-image/GridImage.js +19 -3
- package/lib/cjs/components/grid-image/GridImage.js.map +1 -1
- package/lib/cjs/components/grid-image/GridImage.styles.js +35 -1
- package/lib/cjs/components/grid-image/GridImage.styles.js.map +1 -1
- package/lib/cjs/components/grid-image/GridImage.test.js +27 -0
- package/lib/cjs/components/grid-image/GridImage.test.js.map +1 -0
- package/lib/cjs/utils/uploadFile.js +1 -1
- package/lib/cjs/utils/uploadFile.js.map +1 -1
- package/lib/esm/components/grid-image/GridImage.js +20 -4
- package/lib/esm/components/grid-image/GridImage.js.map +1 -1
- package/lib/esm/components/grid-image/GridImage.styles.js +34 -0
- package/lib/esm/components/grid-image/GridImage.styles.js.map +1 -1
- package/lib/esm/components/grid-image/GridImage.test.js +24 -0
- package/lib/esm/components/grid-image/GridImage.test.js.map +1 -0
- package/lib/esm/utils/uploadFile.js +1 -1
- package/lib/esm/utils/uploadFile.js.map +1 -1
- package/lib/types/components/grid-image/GridImage.styles.d.ts +10 -0
- package/package.json +2 -2
package/AGENTS.md
CHANGED
|
@@ -2532,6 +2532,27 @@ import { GridImage } from '@chayns-components/core';
|
|
|
2532
2532
|
/>
|
|
2533
2533
|
```
|
|
2534
2534
|
|
|
2535
|
+
#### One Image
|
|
2536
|
+
|
|
2537
|
+
```tsx
|
|
2538
|
+
<GridImage
|
|
2539
|
+
images={['https://tsimg.cloud/77896-21884/8aee1a304297729a4542b97325940a656a3da8f2.png']}
|
|
2540
|
+
size={250}
|
|
2541
|
+
/>
|
|
2542
|
+
```
|
|
2543
|
+
|
|
2544
|
+
#### Two Images
|
|
2545
|
+
|
|
2546
|
+
```tsx
|
|
2547
|
+
<GridImage
|
|
2548
|
+
images={[
|
|
2549
|
+
'https://tsimg.cloud/77896-21884/8aee1a304297729a4542b97325940a656a3da8f2.png',
|
|
2550
|
+
'https://tsimg.cloud/77896-21884/54a117f35e5fb57520e64471461af5491c0eff06.png',
|
|
2551
|
+
]}
|
|
2552
|
+
size={250}
|
|
2553
|
+
/>
|
|
2554
|
+
```
|
|
2555
|
+
|
|
2535
2556
|
### Props
|
|
2536
2557
|
|
|
2537
2558
|
| name | type | required | description |
|
|
@@ -43,7 +43,7 @@ const GridImage = ({
|
|
|
43
43
|
const handleLeftImageLoaded = (0, _react.useCallback)(() => setHasLoadedLeftImage(true), []);
|
|
44
44
|
const handleTopRightImageLoaded = (0, _react.useCallback)(() => setHasLoadedTopRightImage(true), []);
|
|
45
45
|
const handleBottomRightImageLoaded = (0, _react.useCallback)(() => setHasLoadedBottomRightImage(true), []);
|
|
46
|
-
const isGridImageHidden = !hasLoadedLeftImage || !hasLoadedTopRightImage || !hasLoadedBottomRightImage;
|
|
46
|
+
const isGridImageHidden = !hasLoadedLeftImage || images.length > 1 && !hasLoadedTopRightImage || images.length > 2 && !hasLoadedBottomRightImage;
|
|
47
47
|
return /*#__PURE__*/_react.default.createElement(_GridImage.StyledGridImage, {
|
|
48
48
|
ref: gridImageRef,
|
|
49
49
|
$background: background,
|
|
@@ -53,7 +53,23 @@ const GridImage = ({
|
|
|
53
53
|
onKeyDown: isKeyboardFocusable ? handleKeyDown : undefined,
|
|
54
54
|
tabIndex: isKeyboardFocusable ? 0 : -1,
|
|
55
55
|
role: isClickable ? 'button' : undefined
|
|
56
|
-
}, /*#__PURE__*/_react.default.createElement(_GridImage.
|
|
56
|
+
}, images.length === 1 && /*#__PURE__*/_react.default.createElement(_GridImage.StyledGridSingleImage, {
|
|
57
|
+
$isHidden: isGridImageHidden,
|
|
58
|
+
onLoad: handleLeftImageLoaded,
|
|
59
|
+
src: images[0]
|
|
60
|
+
}), images.length === 2 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_GridImage.StyledGridTwoImage, {
|
|
61
|
+
$isHidden: isGridImageHidden,
|
|
62
|
+
$isLeft: true,
|
|
63
|
+
$size: size,
|
|
64
|
+
onLoad: handleLeftImageLoaded,
|
|
65
|
+
src: images[0]
|
|
66
|
+
}), /*#__PURE__*/_react.default.createElement(_GridImage.StyledGridTwoImage, {
|
|
67
|
+
$isHidden: isGridImageHidden,
|
|
68
|
+
$isLeft: false,
|
|
69
|
+
$size: size,
|
|
70
|
+
onLoad: handleTopRightImageLoaded,
|
|
71
|
+
src: images[1]
|
|
72
|
+
})), images.length > 2 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_GridImage.StyledGridLeftImage, {
|
|
57
73
|
$isHidden: isGridImageHidden,
|
|
58
74
|
onLoad: handleLeftImageLoaded,
|
|
59
75
|
$size: size,
|
|
@@ -67,7 +83,7 @@ const GridImage = ({
|
|
|
67
83
|
$isHidden: isGridImageHidden,
|
|
68
84
|
onLoad: handleBottomRightImageLoaded,
|
|
69
85
|
src: images[2]
|
|
70
|
-
}));
|
|
86
|
+
})));
|
|
71
87
|
};
|
|
72
88
|
GridImage.displayName = 'GridImage';
|
|
73
89
|
var _default = exports.default = GridImage;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GridImage.js","names":["_react","_interopRequireWildcard","require","_useFocusRingPortal","_useKeyboardFocusHighlighting","_ColorSchemeProvider","_GridImage","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GridImage","background","images","shouldShowRoundImage","size","onClick","shouldEnableKeyboardHighlighting","gridImageRef","useRef","colorScheme","useColorScheme","shouldEnableKeyboardHighlightingEffective","hasLoadedLeftImage","setHasLoadedLeftImage","useState","hasLoadedTopRightImage","setHasLoadedTopRightImage","hasLoadedBottomRightImage","setHasLoadedBottomRightImage","isClickable","isKeyboardFocusable","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","useFocusRingPortal","isEnabled","shape","handleKeyDown","useCallback","event","key","preventDefault","handleLeftImageLoaded","handleTopRightImageLoaded","handleBottomRightImageLoaded","isGridImageHidden","createElement","StyledGridImage","ref","$background","$shouldShowRoundImage","$size","undefined","onKeyDown","tabIndex","role","StyledGridLeftImage","$isHidden","onLoad","src","StyledGridTopRightImage","StyledGridBottomRightImage","displayName","_default","exports"],"sources":["../../../../src/components/grid-image/GridImage.tsx"],"sourcesContent":["import React, {\n CSSProperties,\n FC,\n KeyboardEventHandler,\n MouseEventHandler,\n MouseEvent,\n useCallback,\n useRef,\n useState,\n} from 'react';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport {\n StyledGridBottomRightImage,\n StyledGridImage,\n StyledGridLeftImage,\n StyledGridTopRightImage,\n} from './GridImage.styles';\n\ntype GridImageProps = {\n /**\n * The background color of the image.\n */\n background?: CSSProperties['background'];\n /**\n * The images to be displayed in the `GridImage`. Only the first three images are displayed.\n */\n images: string[];\n /**\n * Function to be executed when the images are clicked.\n */\n onClick?: MouseEventHandler<HTMLDivElement>;\n /**\n * Images of users should always be displayed in a round shape. Therefore, this property can be set to true.\n */\n shouldShowRoundImage?: boolean;\n /**\n * The size of the `GridImage` in pixels, which is set as both width and height.\n */\n size: number;\n /**\n * Enables keyboard-only focus highlighting for clickable GridImage instances.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst GridImage: FC<GridImageProps> = ({\n background,\n images,\n shouldShowRoundImage,\n size,\n onClick,\n shouldEnableKeyboardHighlighting,\n}) => {\n const gridImageRef = useRef<HTMLDivElement>(null);\n const colorScheme = useColorScheme();\n const shouldEnableKeyboardHighlightingEffective =\n shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;\n\n const [hasLoadedLeftImage, setHasLoadedLeftImage] = useState(false);\n const [hasLoadedTopRightImage, setHasLoadedTopRightImage] = useState(false);\n const [hasLoadedBottomRightImage, setHasLoadedBottomRightImage] = useState(false);\n\n const isClickable = typeof onClick === 'function';\n const isKeyboardFocusable = isClickable && shouldEnableKeyboardHighlightingEffective;\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(isKeyboardFocusable);\n useFocusRingPortal(gridImageRef, {\n isEnabled: shouldShowKeyboardHighlighting,\n shape: shouldShowRoundImage ? 'circle' : 'rectangle',\n });\n\n const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n (event) => {\n if (!isClickable) {\n return;\n }\n\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n onClick?.(event as unknown as MouseEvent<HTMLDivElement>);\n }\n },\n [isClickable, onClick],\n );\n\n const handleLeftImageLoaded = useCallback(() => setHasLoadedLeftImage(true), []);\n\n const handleTopRightImageLoaded = useCallback(() => setHasLoadedTopRightImage(true), []);\n\n const handleBottomRightImageLoaded = useCallback(() => setHasLoadedBottomRightImage(true), []);\n\n const isGridImageHidden =\n !hasLoadedLeftImage || !hasLoadedTopRightImage || !hasLoadedBottomRightImage;\n\n return (\n <StyledGridImage\n ref={gridImageRef}\n $background={background}\n $shouldShowRoundImage={shouldShowRoundImage}\n $size={size}\n onClick={isClickable ? onClick : undefined}\n onKeyDown={isKeyboardFocusable ? handleKeyDown : undefined}\n tabIndex={isKeyboardFocusable ? 0 : -1}\n role={isClickable ? 'button' : undefined}\n >\n <StyledGridLeftImage\n $isHidden={isGridImageHidden}\n onLoad={handleLeftImageLoaded}\n $size={size}\n src={images[0]}\n />\n <StyledGridTopRightImage\n $isHidden={isGridImageHidden}\n onLoad={handleTopRightImageLoaded}\n $size={size}\n src={images[1]}\n />\n <StyledGridBottomRightImage\n $isHidden={isGridImageHidden}\n onLoad={handleBottomRightImageLoaded}\n src={images[2]}\n />\n </StyledGridImage>\n );\n};\n\nGridImage.displayName = 'GridImage';\n\nexport default GridImage;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"GridImage.js","names":["_react","_interopRequireWildcard","require","_useFocusRingPortal","_useKeyboardFocusHighlighting","_ColorSchemeProvider","_GridImage","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GridImage","background","images","shouldShowRoundImage","size","onClick","shouldEnableKeyboardHighlighting","gridImageRef","useRef","colorScheme","useColorScheme","shouldEnableKeyboardHighlightingEffective","hasLoadedLeftImage","setHasLoadedLeftImage","useState","hasLoadedTopRightImage","setHasLoadedTopRightImage","hasLoadedBottomRightImage","setHasLoadedBottomRightImage","isClickable","isKeyboardFocusable","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","useFocusRingPortal","isEnabled","shape","handleKeyDown","useCallback","event","key","preventDefault","handleLeftImageLoaded","handleTopRightImageLoaded","handleBottomRightImageLoaded","isGridImageHidden","length","createElement","StyledGridImage","ref","$background","$shouldShowRoundImage","$size","undefined","onKeyDown","tabIndex","role","StyledGridSingleImage","$isHidden","onLoad","src","Fragment","StyledGridTwoImage","$isLeft","StyledGridLeftImage","StyledGridTopRightImage","StyledGridBottomRightImage","displayName","_default","exports"],"sources":["../../../../src/components/grid-image/GridImage.tsx"],"sourcesContent":["import React, {\n CSSProperties,\n FC,\n KeyboardEventHandler,\n MouseEventHandler,\n MouseEvent,\n useCallback,\n useRef,\n useState,\n} from 'react';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport {\n StyledGridBottomRightImage,\n StyledGridImage,\n StyledGridLeftImage,\n StyledGridSingleImage,\n StyledGridTopRightImage,\n StyledGridTwoImage,\n} from './GridImage.styles';\n\ntype GridImageProps = {\n /**\n * The background color of the image.\n */\n background?: CSSProperties['background'];\n /**\n * The images to be displayed in the `GridImage`. Only the first three images are displayed.\n */\n images: string[];\n /**\n * Function to be executed when the images are clicked.\n */\n onClick?: MouseEventHandler<HTMLDivElement>;\n /**\n * Images of users should always be displayed in a round shape. Therefore, this property can be set to true.\n */\n shouldShowRoundImage?: boolean;\n /**\n * The size of the `GridImage` in pixels, which is set as both width and height.\n */\n size: number;\n /**\n * Enables keyboard-only focus highlighting for clickable GridImage instances.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst GridImage: FC<GridImageProps> = ({\n background,\n images,\n shouldShowRoundImage,\n size,\n onClick,\n shouldEnableKeyboardHighlighting,\n}) => {\n const gridImageRef = useRef<HTMLDivElement>(null);\n const colorScheme = useColorScheme();\n const shouldEnableKeyboardHighlightingEffective =\n shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;\n\n const [hasLoadedLeftImage, setHasLoadedLeftImage] = useState(false);\n const [hasLoadedTopRightImage, setHasLoadedTopRightImage] = useState(false);\n const [hasLoadedBottomRightImage, setHasLoadedBottomRightImage] = useState(false);\n\n const isClickable = typeof onClick === 'function';\n const isKeyboardFocusable = isClickable && shouldEnableKeyboardHighlightingEffective;\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(isKeyboardFocusable);\n useFocusRingPortal(gridImageRef, {\n isEnabled: shouldShowKeyboardHighlighting,\n shape: shouldShowRoundImage ? 'circle' : 'rectangle',\n });\n\n const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n (event) => {\n if (!isClickable) {\n return;\n }\n\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n onClick?.(event as unknown as MouseEvent<HTMLDivElement>);\n }\n },\n [isClickable, onClick],\n );\n\n const handleLeftImageLoaded = useCallback(() => setHasLoadedLeftImage(true), []);\n\n const handleTopRightImageLoaded = useCallback(() => setHasLoadedTopRightImage(true), []);\n\n const handleBottomRightImageLoaded = useCallback(() => setHasLoadedBottomRightImage(true), []);\n\n const isGridImageHidden =\n !hasLoadedLeftImage ||\n (images.length > 1 && !hasLoadedTopRightImage) ||\n (images.length > 2 && !hasLoadedBottomRightImage);\n\n return (\n <StyledGridImage\n ref={gridImageRef}\n $background={background}\n $shouldShowRoundImage={shouldShowRoundImage}\n $size={size}\n onClick={isClickable ? onClick : undefined}\n onKeyDown={isKeyboardFocusable ? handleKeyDown : undefined}\n tabIndex={isKeyboardFocusable ? 0 : -1}\n role={isClickable ? 'button' : undefined}\n >\n {images.length === 1 && (\n <StyledGridSingleImage\n $isHidden={isGridImageHidden}\n onLoad={handleLeftImageLoaded}\n src={images[0]}\n />\n )}\n {images.length === 2 && (\n <>\n <StyledGridTwoImage\n $isHidden={isGridImageHidden}\n $isLeft\n $size={size}\n onLoad={handleLeftImageLoaded}\n src={images[0]}\n />\n <StyledGridTwoImage\n $isHidden={isGridImageHidden}\n $isLeft={false}\n $size={size}\n onLoad={handleTopRightImageLoaded}\n src={images[1]}\n />\n </>\n )}\n {images.length > 2 && (\n <>\n <StyledGridLeftImage\n $isHidden={isGridImageHidden}\n onLoad={handleLeftImageLoaded}\n $size={size}\n src={images[0]}\n />\n <StyledGridTopRightImage\n $isHidden={isGridImageHidden}\n onLoad={handleTopRightImageLoaded}\n $size={size}\n src={images[1]}\n />\n <StyledGridBottomRightImage\n $isHidden={isGridImageHidden}\n onLoad={handleBottomRightImageLoaded}\n src={images[2]}\n />\n </>\n )}\n </StyledGridImage>\n );\n};\n\nGridImage.displayName = 'GridImage';\n\nexport default GridImage;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAUA,IAAAC,mBAAA,GAAAD,OAAA;AACA,IAAAE,6BAAA,GAAAF,OAAA;AACA,IAAAG,oBAAA,GAAAH,OAAA;AACA,IAAAI,UAAA,GAAAJ,OAAA;AAO4B,SAAAD,wBAAAM,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAR,uBAAA,YAAAA,CAAAM,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AA6B5B,MAAMkB,SAA6B,GAAGA,CAAC;EACnCC,UAAU;EACVC,MAAM;EACNC,oBAAoB;EACpBC,IAAI;EACJC,OAAO;EACPC;AACJ,CAAC,KAAK;EACF,MAAMC,YAAY,GAAG,IAAAC,aAAM,EAAiB,IAAI,CAAC;EACjD,MAAMC,WAAW,GAAG,IAAAC,mCAAc,EAAC,CAAC;EACpC,MAAMC,yCAAyC,GAC3CL,gCAAgC,KAAIG,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEH,gCAAgC,KAAI,KAAK;EAE9F,MAAM,CAACM,kBAAkB,EAAEC,qBAAqB,CAAC,GAAG,IAAAC,eAAQ,EAAC,KAAK,CAAC;EACnE,MAAM,CAACC,sBAAsB,EAAEC,yBAAyB,CAAC,GAAG,IAAAF,eAAQ,EAAC,KAAK,CAAC;EAC3E,MAAM,CAACG,yBAAyB,EAAEC,4BAA4B,CAAC,GAAG,IAAAJ,eAAQ,EAAC,KAAK,CAAC;EAEjF,MAAMK,WAAW,GAAG,OAAOd,OAAO,KAAK,UAAU;EACjD,MAAMe,mBAAmB,GAAGD,WAAW,IAAIR,yCAAyC;EACpF,MAAMU,8BAA8B,GAAG,IAAAC,0DAA4B,EAACF,mBAAmB,CAAC;EACxF,IAAAG,sCAAkB,EAAChB,YAAY,EAAE;IAC7BiB,SAAS,EAAEH,8BAA8B;IACzCI,KAAK,EAAEtB,oBAAoB,GAAG,QAAQ,GAAG;EAC7C,CAAC,CAAC;EAEF,MAAMuB,aAAa,GAAG,IAAAC,kBAAW,EAC5BC,KAAK,IAAK;IACP,IAAI,CAACT,WAAW,EAAE;MACd;IACJ;IAEA,IAAIS,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MAC5CD,KAAK,CAACE,cAAc,CAAC,CAAC;MACtBzB,OAAO,aAAPA,OAAO,eAAPA,OAAO,CAAGuB,KAA8C,CAAC;IAC7D;EACJ,CAAC,EACD,CAACT,WAAW,EAAEd,OAAO,CACzB,CAAC;EAED,MAAM0B,qBAAqB,GAAG,IAAAJ,kBAAW,EAAC,MAAMd,qBAAqB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAEhF,MAAMmB,yBAAyB,GAAG,IAAAL,kBAAW,EAAC,MAAMX,yBAAyB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAExF,MAAMiB,4BAA4B,GAAG,IAAAN,kBAAW,EAAC,MAAMT,4BAA4B,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAE9F,MAAMgB,iBAAiB,GACnB,CAACtB,kBAAkB,IAClBV,MAAM,CAACiC,MAAM,GAAG,CAAC,IAAI,CAACpB,sBAAuB,IAC7Cb,MAAM,CAACiC,MAAM,GAAG,CAAC,IAAI,CAAClB,yBAA0B;EAErD,oBACI3C,MAAA,CAAAiB,OAAA,CAAA6C,aAAA,CAACxD,UAAA,CAAAyD,eAAe;IACZC,GAAG,EAAE/B,YAAa;IAClBgC,WAAW,EAAEtC,UAAW;IACxBuC,qBAAqB,EAAErC,oBAAqB;IAC5CsC,KAAK,EAAErC,IAAK;IACZC,OAAO,EAAEc,WAAW,GAAGd,OAAO,GAAGqC,SAAU;IAC3CC,SAAS,EAAEvB,mBAAmB,GAAGM,aAAa,GAAGgB,SAAU;IAC3DE,QAAQ,EAAExB,mBAAmB,GAAG,CAAC,GAAG,CAAC,CAAE;IACvCyB,IAAI,EAAE1B,WAAW,GAAG,QAAQ,GAAGuB;EAAU,GAExCxC,MAAM,CAACiC,MAAM,KAAK,CAAC,iBAChB7D,MAAA,CAAAiB,OAAA,CAAA6C,aAAA,CAACxD,UAAA,CAAAkE,qBAAqB;IAClBC,SAAS,EAAEb,iBAAkB;IAC7Bc,MAAM,EAAEjB,qBAAsB;IAC9BkB,GAAG,EAAE/C,MAAM,CAAC,CAAC;EAAE,CAClB,CACJ,EACAA,MAAM,CAACiC,MAAM,KAAK,CAAC,iBAChB7D,MAAA,CAAAiB,OAAA,CAAA6C,aAAA,CAAA9D,MAAA,CAAAiB,OAAA,CAAA2D,QAAA,qBACI5E,MAAA,CAAAiB,OAAA,CAAA6C,aAAA,CAACxD,UAAA,CAAAuE,kBAAkB;IACfJ,SAAS,EAAEb,iBAAkB;IAC7BkB,OAAO;IACPX,KAAK,EAAErC,IAAK;IACZ4C,MAAM,EAAEjB,qBAAsB;IAC9BkB,GAAG,EAAE/C,MAAM,CAAC,CAAC;EAAE,CAClB,CAAC,eACF5B,MAAA,CAAAiB,OAAA,CAAA6C,aAAA,CAACxD,UAAA,CAAAuE,kBAAkB;IACfJ,SAAS,EAAEb,iBAAkB;IAC7BkB,OAAO,EAAE,KAAM;IACfX,KAAK,EAAErC,IAAK;IACZ4C,MAAM,EAAEhB,yBAA0B;IAClCiB,GAAG,EAAE/C,MAAM,CAAC,CAAC;EAAE,CAClB,CACH,CACL,EACAA,MAAM,CAACiC,MAAM,GAAG,CAAC,iBACd7D,MAAA,CAAAiB,OAAA,CAAA6C,aAAA,CAAA9D,MAAA,CAAAiB,OAAA,CAAA2D,QAAA,qBACI5E,MAAA,CAAAiB,OAAA,CAAA6C,aAAA,CAACxD,UAAA,CAAAyE,mBAAmB;IAChBN,SAAS,EAAEb,iBAAkB;IAC7Bc,MAAM,EAAEjB,qBAAsB;IAC9BU,KAAK,EAAErC,IAAK;IACZ6C,GAAG,EAAE/C,MAAM,CAAC,CAAC;EAAE,CAClB,CAAC,eACF5B,MAAA,CAAAiB,OAAA,CAAA6C,aAAA,CAACxD,UAAA,CAAA0E,uBAAuB;IACpBP,SAAS,EAAEb,iBAAkB;IAC7Bc,MAAM,EAAEhB,yBAA0B;IAClCS,KAAK,EAAErC,IAAK;IACZ6C,GAAG,EAAE/C,MAAM,CAAC,CAAC;EAAE,CAClB,CAAC,eACF5B,MAAA,CAAAiB,OAAA,CAAA6C,aAAA,CAACxD,UAAA,CAAA2E,0BAA0B;IACvBR,SAAS,EAAEb,iBAAkB;IAC7Bc,MAAM,EAAEf,4BAA6B;IACrCgB,GAAG,EAAE/C,MAAM,CAAC,CAAC;EAAE,CAClB,CACH,CAEO,CAAC;AAE1B,CAAC;AAEDF,SAAS,CAACwD,WAAW,GAAG,WAAW;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAnE,OAAA,GAErBS,SAAS","ignoreList":[]}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.StyledGridTopRightImage = exports.StyledGridLeftImage = exports.StyledGridImage = exports.StyledGridBottomRightImage = void 0;
|
|
6
|
+
exports.StyledGridTwoImage = exports.StyledGridTopRightImage = exports.StyledGridSingleImage = exports.StyledGridLeftImage = exports.StyledGridImage = exports.StyledGridBottomRightImage = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
8
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
9
9
|
const StyledGridImage = exports.StyledGridImage = _styledComponents.default.div`
|
|
@@ -32,6 +32,40 @@ const StyledGridImage = exports.StyledGridImage = _styledComponents.default.div`
|
|
|
32
32
|
outline: none;
|
|
33
33
|
}
|
|
34
34
|
`;
|
|
35
|
+
const StyledGridSingleImage = exports.StyledGridSingleImage = _styledComponents.default.img`
|
|
36
|
+
height: 100%;
|
|
37
|
+
left: 0;
|
|
38
|
+
object-fit: cover;
|
|
39
|
+
opacity: ${({
|
|
40
|
+
$isHidden
|
|
41
|
+
}) => $isHidden ? 0 : 1};
|
|
42
|
+
position: absolute;
|
|
43
|
+
top: 0;
|
|
44
|
+
transition: opacity 0.4s ease;
|
|
45
|
+
width: 100%;
|
|
46
|
+
`;
|
|
47
|
+
const StyledGridTwoImage = exports.StyledGridTwoImage = _styledComponents.default.img`
|
|
48
|
+
border-right: ${({
|
|
49
|
+
$isLeft,
|
|
50
|
+
$size
|
|
51
|
+
}) => $isLeft ? `${$size / 40}px solid white` : undefined};
|
|
52
|
+
box-sizing: border-box;
|
|
53
|
+
height: 100%;
|
|
54
|
+
left: ${({
|
|
55
|
+
$isLeft
|
|
56
|
+
}) => $isLeft ? 0 : undefined};
|
|
57
|
+
object-fit: cover;
|
|
58
|
+
opacity: ${({
|
|
59
|
+
$isHidden
|
|
60
|
+
}) => $isHidden ? 0 : 1};
|
|
61
|
+
position: absolute;
|
|
62
|
+
right: ${({
|
|
63
|
+
$isLeft
|
|
64
|
+
}) => $isLeft ? undefined : 0};
|
|
65
|
+
top: 0;
|
|
66
|
+
transition: opacity 0.4s ease;
|
|
67
|
+
width: 50%;
|
|
68
|
+
`;
|
|
35
69
|
const StyledGridLeftImage = exports.StyledGridLeftImage = _styledComponents.default.img`
|
|
36
70
|
border-right: ${({
|
|
37
71
|
$size
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GridImage.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledGridImage","exports","styled","div","$background","theme","$shouldShowRoundImage","undefined","$size","
|
|
1
|
+
{"version":3,"file":"GridImage.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledGridImage","exports","styled","div","$background","theme","$shouldShowRoundImage","undefined","$size","StyledGridSingleImage","img","$isHidden","StyledGridTwoImage","$isLeft","StyledGridLeftImage","StyledGridTopRightImage","StyledGridBottomRightImage"],"sources":["../../../../src/components/grid-image/GridImage.styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledGridImageProps = WithTheme<{\n $background?: CSSProperties['background'];\n $shouldShowRoundImage?: boolean;\n $size: number;\n}>;\n\nexport const StyledGridImage = styled.div<StyledGridImageProps>`\n background: ${({ $background, theme }: StyledGridImageProps) =>\n $background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : undefined)};\n box-shadow: 0 0 0 1px rgba(${({ theme }: StyledGridImageProps) => theme['009-rgb']}, 0.08) inset;\n height: ${({ $size }) => $size}px;\n overflow: hidden;\n position: relative;\n transition: border-radius 0.3s ease;\n width: ${({ $size }) => $size}px;\n flex: 0 0 auto;\n\n &:focus-visible {\n outline: none;\n }\n`;\n\ntype StyledGridSingleImageProps = {\n $isHidden: boolean;\n};\n\nexport const StyledGridSingleImage = styled.img<StyledGridSingleImageProps>`\n height: 100%;\n left: 0;\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n position: absolute;\n top: 0;\n transition: opacity 0.4s ease;\n width: 100%;\n`;\n\ntype StyledGridTwoImageProps = {\n $isHidden: boolean;\n $isLeft: boolean;\n $size: number;\n};\n\nexport const StyledGridTwoImage = styled.img<StyledGridTwoImageProps>`\n border-right: ${({ $isLeft, $size }) => ($isLeft ? `${$size / 40}px solid white` : undefined)};\n box-sizing: border-box;\n height: 100%;\n left: ${({ $isLeft }) => ($isLeft ? 0 : undefined)};\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n position: absolute;\n right: ${({ $isLeft }) => ($isLeft ? undefined : 0)};\n top: 0;\n transition: opacity 0.4s ease;\n width: 50%;\n`;\n\ntype StyledGridLeftImageProps = {\n $isHidden: boolean;\n $size: number;\n};\n\nexport const StyledGridLeftImage = styled.img<StyledGridLeftImageProps>`\n border-right: ${({ $size }) => $size / 40}px solid white;\n height: 100%;\n left: 0;\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n position: absolute;\n top: 0;\n transition: opacity 0.4s ease;\n width: 60%;\n`;\n\ntype StyledGridTopRightImageProps = {\n $isHidden: boolean;\n $size: number;\n};\n\nexport const StyledGridTopRightImage = styled.img<StyledGridTopRightImageProps>`\n border-bottom: ${({ $size }) => $size / 40}px solid white;\n height: 50%;\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n position: absolute;\n right: 0;\n top: 0;\n transition: opacity 0.3s ease;\n width: 40%;\n`;\n\ntype StyledGridBottomRightImageProps = {\n $isHidden: boolean;\n};\n\nexport const StyledGridBottomRightImage = styled.img<StyledGridBottomRightImageProps>`\n bottom: 0;\n height: 50%;\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n position: absolute;\n right: 0;\n transition: opacity 0.3s ease;\n width: 40%;\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAgD,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AASzC,MAAMG,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAGE,yBAAM,CAACC,GAAyB;AAC/D,kBAAkB,CAAC;EAAEC,WAAW;EAAEC;AAA4B,CAAC,KACvDD,WAAW,IAAI,QAAQC,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACnE,qBAAqB,CAAC;EAAEC;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,KAAK,GAAGC,SAAU;AAC/F,iCAAiC,CAAC;EAAEF;AAA4B,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACtF,cAAc,CAAC;EAAEG;AAAM,CAAC,KAAKA,KAAK;AAClC;AACA;AACA;AACA,aAAa,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK;AACjC;AACA;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAMC,qBAAqB,GAAAR,OAAA,CAAAQ,qBAAA,GAAGP,yBAAM,CAACQ,GAA+B;AAC3E;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA,CAAC;AAQM,MAAMC,kBAAkB,GAAAX,OAAA,CAAAW,kBAAA,GAAGV,yBAAM,CAACQ,GAA4B;AACrE,oBAAoB,CAAC;EAAEG,OAAO;EAAEL;AAAM,CAAC,KAAMK,OAAO,GAAG,GAAGL,KAAK,GAAG,EAAE,gBAAgB,GAAGD,SAAU;AACjG;AACA;AACA,YAAY,CAAC;EAAEM;AAAQ,CAAC,KAAMA,OAAO,GAAG,CAAC,GAAGN,SAAU;AACtD;AACA,eAAe,CAAC;EAAEI;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA,aAAa,CAAC;EAAEE;AAAQ,CAAC,KAAMA,OAAO,GAAGN,SAAS,GAAG,CAAE;AACvD;AACA;AACA;AACA,CAAC;AAOM,MAAMO,mBAAmB,GAAAb,OAAA,CAAAa,mBAAA,GAAGZ,yBAAM,CAACQ,GAA6B;AACvE,oBAAoB,CAAC;EAAEF;AAAM,CAAC,KAAKA,KAAK,GAAG,EAAE;AAC7C;AACA;AACA;AACA,eAAe,CAAC;EAAEG;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA,CAAC;AAOM,MAAMI,uBAAuB,GAAAd,OAAA,CAAAc,uBAAA,GAAGb,yBAAM,CAACQ,GAAiC;AAC/E,qBAAqB,CAAC;EAAEF;AAAM,CAAC,KAAKA,KAAK,GAAG,EAAE;AAC9C;AACA;AACA,eAAe,CAAC;EAAEG;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAMK,0BAA0B,GAAAf,OAAA,CAAAe,0BAAA,GAAGd,yBAAM,CAACQ,GAAoC;AACrF;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _react = require("@testing-library/react");
|
|
4
|
+
var _react2 = _interopRequireDefault(require("react"));
|
|
5
|
+
var _vitest = require("vitest");
|
|
6
|
+
var _GridImage = _interopRequireDefault(require("./GridImage"));
|
|
7
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
8
|
+
(0, _vitest.describe)('GridImage', () => {
|
|
9
|
+
(0, _vitest.it)('renders one image without additional grid images', () => {
|
|
10
|
+
(0, _react.render)(/*#__PURE__*/_react2.default.createElement(_GridImage.default, {
|
|
11
|
+
images: ['one.jpg'],
|
|
12
|
+
size: 100
|
|
13
|
+
}));
|
|
14
|
+
(0, _vitest.expect)(_react.screen.getAllByRole('img')).toHaveLength(1);
|
|
15
|
+
(0, _vitest.expect)(_react.screen.getByRole('img')).toHaveAttribute('src', 'one.jpg');
|
|
16
|
+
});
|
|
17
|
+
(0, _vitest.it)('renders two images side by side without a third grid image', () => {
|
|
18
|
+
(0, _react.render)(/*#__PURE__*/_react2.default.createElement(_GridImage.default, {
|
|
19
|
+
images: ['one.jpg', 'two.jpg'],
|
|
20
|
+
size: 100
|
|
21
|
+
}));
|
|
22
|
+
(0, _vitest.expect)(_react.screen.getAllByRole('img')).toHaveLength(2);
|
|
23
|
+
(0, _vitest.expect)(_react.screen.getAllByRole('img')[0]).toHaveAttribute('src', 'one.jpg');
|
|
24
|
+
(0, _vitest.expect)(_react.screen.getAllByRole('img')[1]).toHaveAttribute('src', 'two.jpg');
|
|
25
|
+
});
|
|
26
|
+
});
|
|
27
|
+
//# sourceMappingURL=GridImage.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GridImage.test.js","names":["_react","require","_react2","_interopRequireDefault","_vitest","_GridImage","e","__esModule","default","describe","it","render","createElement","images","size","expect","screen","getAllByRole","toHaveLength","getByRole","toHaveAttribute"],"sources":["../../../../src/components/grid-image/GridImage.test.tsx"],"sourcesContent":["import { render, screen } from '@testing-library/react';\nimport React from 'react';\nimport { describe, expect, it } from 'vitest';\nimport GridImage from './GridImage';\n\ndescribe('GridImage', () => {\n it('renders one image without additional grid images', () => {\n render(<GridImage images={['one.jpg']} size={100} />);\n\n expect(screen.getAllByRole('img')).toHaveLength(1);\n expect(screen.getByRole('img')).toHaveAttribute('src', 'one.jpg');\n });\n\n it('renders two images side by side without a third grid image', () => {\n render(<GridImage images={['one.jpg', 'two.jpg']} size={100} />);\n\n expect(screen.getAllByRole('img')).toHaveLength(2);\n expect(screen.getAllByRole('img')[0]).toHaveAttribute('src', 'one.jpg');\n expect(screen.getAllByRole('img')[1]).toHaveAttribute('src', 'two.jpg');\n });\n});\n"],"mappings":";;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,UAAA,GAAAF,sBAAA,CAAAF,OAAA;AAAoC,SAAAE,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEpC,IAAAG,gBAAQ,EAAC,WAAW,EAAE,MAAM;EACxB,IAAAC,UAAE,EAAC,kDAAkD,EAAE,MAAM;IACzD,IAAAC,aAAM,eAACT,OAAA,CAAAM,OAAA,CAAAI,aAAA,CAACP,UAAA,CAAAG,OAAS;MAACK,MAAM,EAAE,CAAC,SAAS,CAAE;MAACC,IAAI,EAAE;IAAI,CAAE,CAAC,CAAC;IAErD,IAAAC,cAAM,EAACC,aAAM,CAACC,YAAY,CAAC,KAAK,CAAC,CAAC,CAACC,YAAY,CAAC,CAAC,CAAC;IAClD,IAAAH,cAAM,EAACC,aAAM,CAACG,SAAS,CAAC,KAAK,CAAC,CAAC,CAACC,eAAe,CAAC,KAAK,EAAE,SAAS,CAAC;EACrE,CAAC,CAAC;EAEF,IAAAV,UAAE,EAAC,4DAA4D,EAAE,MAAM;IACnE,IAAAC,aAAM,eAACT,OAAA,CAAAM,OAAA,CAAAI,aAAA,CAACP,UAAA,CAAAG,OAAS;MAACK,MAAM,EAAE,CAAC,SAAS,EAAE,SAAS,CAAE;MAACC,IAAI,EAAE;IAAI,CAAE,CAAC,CAAC;IAEhE,IAAAC,cAAM,EAACC,aAAM,CAACC,YAAY,CAAC,KAAK,CAAC,CAAC,CAACC,YAAY,CAAC,CAAC,CAAC;IAClD,IAAAH,cAAM,EAACC,aAAM,CAACC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAACG,eAAe,CAAC,KAAK,EAAE,SAAS,CAAC;IACvE,IAAAL,cAAM,EAACC,aAAM,CAACC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAACG,eAAe,CAAC,KAAK,EAAE,SAAS,CAAC;EAC3E,CAAC,CAAC;AACN,CAAC,CAAC","ignoreList":[]}
|
|
@@ -12,7 +12,7 @@ const uploadFile = async ({
|
|
|
12
12
|
shouldUploadImageToSite
|
|
13
13
|
}) => {
|
|
14
14
|
var _fileToUpload$file, _fileToUpload$file2;
|
|
15
|
-
if (!fileToUpload || fileToUpload.state !== 'none') {
|
|
15
|
+
if (!fileToUpload || fileToUpload.state !== undefined && fileToUpload.state !== 'none') {
|
|
16
16
|
return;
|
|
17
17
|
}
|
|
18
18
|
if ((_fileToUpload$file = fileToUpload.file) !== null && _fileToUpload$file !== void 0 && _fileToUpload$file.type.includes('video/')) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"uploadFile.js","names":["_post","require","_post2","uploadFile","fileToUpload","callback","shouldUploadImageToSite","_fileToUpload$file","_fileToUpload$file2","state","file","type","includes","uploadedVideo","postVideo","id","toString","uploadedImage","postImage","_uploadedImage$meta","_uploadedImage$meta2","_uploadedImage$meta3","_uploadedImage$meta4","url","base","key","meta","ratio","width","height","Number","
|
|
1
|
+
{"version":3,"file":"uploadFile.js","names":["_post","require","_post2","uploadFile","fileToUpload","callback","shouldUploadImageToSite","_fileToUpload$file","_fileToUpload$file2","state","undefined","file","type","includes","uploadedVideo","postVideo","id","toString","uploadedImage","postImage","_uploadedImage$meta","_uploadedImage$meta2","_uploadedImage$meta3","_uploadedImage$meta4","url","base","key","meta","ratio","width","height","Number","exports"],"sources":["../../../src/utils/uploadFile.ts"],"sourcesContent":["import { postImage } from '../api/image/post';\nimport { postVideo } from '../api/video/post';\nimport type { Image, InternalFileItem, Video } from '../types/file';\n\ninterface UploadFilesOptions {\n fileToUpload: InternalFileItem;\n callback: (UploadedFile: Video | Image) => void;\n shouldUploadImageToSite?: boolean;\n}\n\nexport const uploadFile = async ({\n fileToUpload,\n callback,\n shouldUploadImageToSite,\n}: UploadFilesOptions): Promise<void> => {\n if (!fileToUpload || (fileToUpload.state !== undefined && fileToUpload.state !== 'none')) {\n return;\n }\n\n if (fileToUpload.file?.type.includes('video/')) {\n const uploadedVideo = await postVideo({ file: fileToUpload.file });\n\n if (uploadedVideo) {\n callback({\n ...uploadedVideo,\n id: uploadedVideo.id.toString(),\n });\n }\n }\n\n if (fileToUpload.file?.type.includes('image/')) {\n const uploadedImage = await postImage({ file: fileToUpload.file, shouldUploadImageToSite });\n\n if (uploadedImage) {\n callback({\n url: `${uploadedImage.base}/${uploadedImage.key}`,\n id: uploadedImage.key,\n meta: uploadedImage.meta,\n ratio:\n uploadedImage.meta?.width && uploadedImage.meta?.height\n ? Number(uploadedImage.meta?.width) / Number(uploadedImage.meta?.height)\n : undefined,\n });\n }\n }\n};\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AASO,MAAME,UAAU,GAAG,MAAAA,CAAO;EAC7BC,YAAY;EACZC,QAAQ;EACRC;AACgB,CAAC,KAAoB;EAAA,IAAAC,kBAAA,EAAAC,mBAAA;EACrC,IAAI,CAACJ,YAAY,IAAKA,YAAY,CAACK,KAAK,KAAKC,SAAS,IAAIN,YAAY,CAACK,KAAK,KAAK,MAAO,EAAE;IACtF;EACJ;EAEA,KAAAF,kBAAA,GAAIH,YAAY,CAACO,IAAI,cAAAJ,kBAAA,eAAjBA,kBAAA,CAAmBK,IAAI,CAACC,QAAQ,CAAC,QAAQ,CAAC,EAAE;IAC5C,MAAMC,aAAa,GAAG,MAAM,IAAAC,gBAAS,EAAC;MAAEJ,IAAI,EAAEP,YAAY,CAACO;IAAK,CAAC,CAAC;IAElE,IAAIG,aAAa,EAAE;MACfT,QAAQ,CAAC;QACL,GAAGS,aAAa;QAChBE,EAAE,EAAEF,aAAa,CAACE,EAAE,CAACC,QAAQ,CAAC;MAClC,CAAC,CAAC;IACN;EACJ;EAEA,KAAAT,mBAAA,GAAIJ,YAAY,CAACO,IAAI,cAAAH,mBAAA,eAAjBA,mBAAA,CAAmBI,IAAI,CAACC,QAAQ,CAAC,QAAQ,CAAC,EAAE;IAC5C,MAAMK,aAAa,GAAG,MAAM,IAAAC,eAAS,EAAC;MAAER,IAAI,EAAEP,YAAY,CAACO,IAAI;MAAEL;IAAwB,CAAC,CAAC;IAE3F,IAAIY,aAAa,EAAE;MAAA,IAAAE,mBAAA,EAAAC,oBAAA,EAAAC,oBAAA,EAAAC,oBAAA;MACflB,QAAQ,CAAC;QACLmB,GAAG,EAAE,GAAGN,aAAa,CAACO,IAAI,IAAIP,aAAa,CAACQ,GAAG,EAAE;QACjDV,EAAE,EAAEE,aAAa,CAACQ,GAAG;QACrBC,IAAI,EAAET,aAAa,CAACS,IAAI;QACxBC,KAAK,EACD,CAAAR,mBAAA,GAAAF,aAAa,CAACS,IAAI,cAAAP,mBAAA,eAAlBA,mBAAA,CAAoBS,KAAK,KAAAR,oBAAA,GAAIH,aAAa,CAACS,IAAI,cAAAN,oBAAA,eAAlBA,oBAAA,CAAoBS,MAAM,GACjDC,MAAM,EAAAT,oBAAA,GAACJ,aAAa,CAACS,IAAI,cAAAL,oBAAA,uBAAlBA,oBAAA,CAAoBO,KAAK,CAAC,GAAGE,MAAM,EAAAR,oBAAA,GAACL,aAAa,CAACS,IAAI,cAAAJ,oBAAA,uBAAlBA,oBAAA,CAAoBO,MAAM,CAAC,GACtEpB;MACd,CAAC,CAAC;IACN;EACJ;AACJ,CAAC;AAACsB,OAAA,CAAA7B,UAAA,GAAAA,UAAA","ignoreList":[]}
|
|
@@ -2,7 +2,7 @@ import React, { useCallback, useRef, useState } from 'react';
|
|
|
2
2
|
import { useFocusRingPortal } from '../../hooks/useFocusRingPortal';
|
|
3
3
|
import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
|
|
4
4
|
import { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';
|
|
5
|
-
import { StyledGridBottomRightImage, StyledGridImage, StyledGridLeftImage, StyledGridTopRightImage } from './GridImage.styles';
|
|
5
|
+
import { StyledGridBottomRightImage, StyledGridImage, StyledGridLeftImage, StyledGridSingleImage, StyledGridTopRightImage, StyledGridTwoImage } from './GridImage.styles';
|
|
6
6
|
const GridImage = ({
|
|
7
7
|
background,
|
|
8
8
|
images,
|
|
@@ -36,7 +36,7 @@ const GridImage = ({
|
|
|
36
36
|
const handleLeftImageLoaded = useCallback(() => setHasLoadedLeftImage(true), []);
|
|
37
37
|
const handleTopRightImageLoaded = useCallback(() => setHasLoadedTopRightImage(true), []);
|
|
38
38
|
const handleBottomRightImageLoaded = useCallback(() => setHasLoadedBottomRightImage(true), []);
|
|
39
|
-
const isGridImageHidden = !hasLoadedLeftImage || !hasLoadedTopRightImage || !hasLoadedBottomRightImage;
|
|
39
|
+
const isGridImageHidden = !hasLoadedLeftImage || images.length > 1 && !hasLoadedTopRightImage || images.length > 2 && !hasLoadedBottomRightImage;
|
|
40
40
|
return /*#__PURE__*/React.createElement(StyledGridImage, {
|
|
41
41
|
ref: gridImageRef,
|
|
42
42
|
$background: background,
|
|
@@ -46,7 +46,23 @@ const GridImage = ({
|
|
|
46
46
|
onKeyDown: isKeyboardFocusable ? handleKeyDown : undefined,
|
|
47
47
|
tabIndex: isKeyboardFocusable ? 0 : -1,
|
|
48
48
|
role: isClickable ? 'button' : undefined
|
|
49
|
-
}, /*#__PURE__*/React.createElement(
|
|
49
|
+
}, images.length === 1 && /*#__PURE__*/React.createElement(StyledGridSingleImage, {
|
|
50
|
+
$isHidden: isGridImageHidden,
|
|
51
|
+
onLoad: handleLeftImageLoaded,
|
|
52
|
+
src: images[0]
|
|
53
|
+
}), images.length === 2 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledGridTwoImage, {
|
|
54
|
+
$isHidden: isGridImageHidden,
|
|
55
|
+
$isLeft: true,
|
|
56
|
+
$size: size,
|
|
57
|
+
onLoad: handleLeftImageLoaded,
|
|
58
|
+
src: images[0]
|
|
59
|
+
}), /*#__PURE__*/React.createElement(StyledGridTwoImage, {
|
|
60
|
+
$isHidden: isGridImageHidden,
|
|
61
|
+
$isLeft: false,
|
|
62
|
+
$size: size,
|
|
63
|
+
onLoad: handleTopRightImageLoaded,
|
|
64
|
+
src: images[1]
|
|
65
|
+
})), images.length > 2 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledGridLeftImage, {
|
|
50
66
|
$isHidden: isGridImageHidden,
|
|
51
67
|
onLoad: handleLeftImageLoaded,
|
|
52
68
|
$size: size,
|
|
@@ -60,7 +76,7 @@ const GridImage = ({
|
|
|
60
76
|
$isHidden: isGridImageHidden,
|
|
61
77
|
onLoad: handleBottomRightImageLoaded,
|
|
62
78
|
src: images[2]
|
|
63
|
-
}));
|
|
79
|
+
})));
|
|
64
80
|
};
|
|
65
81
|
GridImage.displayName = 'GridImage';
|
|
66
82
|
export default GridImage;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GridImage.js","names":["React","useCallback","useRef","useState","useFocusRingPortal","useKeyboardFocusHighlighting","useColorScheme","StyledGridBottomRightImage","StyledGridImage","StyledGridLeftImage","StyledGridTopRightImage","GridImage","background","images","shouldShowRoundImage","size","onClick","shouldEnableKeyboardHighlighting","gridImageRef","colorScheme","shouldEnableKeyboardHighlightingEffective","hasLoadedLeftImage","setHasLoadedLeftImage","hasLoadedTopRightImage","setHasLoadedTopRightImage","hasLoadedBottomRightImage","setHasLoadedBottomRightImage","isClickable","isKeyboardFocusable","shouldShowKeyboardHighlighting","isEnabled","shape","handleKeyDown","event","key","preventDefault","handleLeftImageLoaded","handleTopRightImageLoaded","handleBottomRightImageLoaded","isGridImageHidden","createElement","ref","$background","$shouldShowRoundImage","$size","undefined","onKeyDown","tabIndex","role","$isHidden","onLoad","src","displayName"],"sources":["../../../../src/components/grid-image/GridImage.tsx"],"sourcesContent":["import React, {\n CSSProperties,\n FC,\n KeyboardEventHandler,\n MouseEventHandler,\n MouseEvent,\n useCallback,\n useRef,\n useState,\n} from 'react';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport {\n StyledGridBottomRightImage,\n StyledGridImage,\n StyledGridLeftImage,\n StyledGridTopRightImage,\n} from './GridImage.styles';\n\ntype GridImageProps = {\n /**\n * The background color of the image.\n */\n background?: CSSProperties['background'];\n /**\n * The images to be displayed in the `GridImage`. Only the first three images are displayed.\n */\n images: string[];\n /**\n * Function to be executed when the images are clicked.\n */\n onClick?: MouseEventHandler<HTMLDivElement>;\n /**\n * Images of users should always be displayed in a round shape. Therefore, this property can be set to true.\n */\n shouldShowRoundImage?: boolean;\n /**\n * The size of the `GridImage` in pixels, which is set as both width and height.\n */\n size: number;\n /**\n * Enables keyboard-only focus highlighting for clickable GridImage instances.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst GridImage: FC<GridImageProps> = ({\n background,\n images,\n shouldShowRoundImage,\n size,\n onClick,\n shouldEnableKeyboardHighlighting,\n}) => {\n const gridImageRef = useRef<HTMLDivElement>(null);\n const colorScheme = useColorScheme();\n const shouldEnableKeyboardHighlightingEffective =\n shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;\n\n const [hasLoadedLeftImage, setHasLoadedLeftImage] = useState(false);\n const [hasLoadedTopRightImage, setHasLoadedTopRightImage] = useState(false);\n const [hasLoadedBottomRightImage, setHasLoadedBottomRightImage] = useState(false);\n\n const isClickable = typeof onClick === 'function';\n const isKeyboardFocusable = isClickable && shouldEnableKeyboardHighlightingEffective;\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(isKeyboardFocusable);\n useFocusRingPortal(gridImageRef, {\n isEnabled: shouldShowKeyboardHighlighting,\n shape: shouldShowRoundImage ? 'circle' : 'rectangle',\n });\n\n const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n (event) => {\n if (!isClickable) {\n return;\n }\n\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n onClick?.(event as unknown as MouseEvent<HTMLDivElement>);\n }\n },\n [isClickable, onClick],\n );\n\n const handleLeftImageLoaded = useCallback(() => setHasLoadedLeftImage(true), []);\n\n const handleTopRightImageLoaded = useCallback(() => setHasLoadedTopRightImage(true), []);\n\n const handleBottomRightImageLoaded = useCallback(() => setHasLoadedBottomRightImage(true), []);\n\n const isGridImageHidden =\n !hasLoadedLeftImage || !hasLoadedTopRightImage || !hasLoadedBottomRightImage;\n\n return (\n <StyledGridImage\n ref={gridImageRef}\n $background={background}\n $shouldShowRoundImage={shouldShowRoundImage}\n $size={size}\n onClick={isClickable ? onClick : undefined}\n onKeyDown={isKeyboardFocusable ? handleKeyDown : undefined}\n tabIndex={isKeyboardFocusable ? 0 : -1}\n role={isClickable ? 'button' : undefined}\n >\n <StyledGridLeftImage\n $isHidden={isGridImageHidden}\n onLoad={handleLeftImageLoaded}\n $size={size}\n src={images[0]}\n />\n <StyledGridTopRightImage\n $isHidden={isGridImageHidden}\n onLoad={handleTopRightImageLoaded}\n $size={size}\n src={images[1]}\n />\n <StyledGridBottomRightImage\n $isHidden={isGridImageHidden}\n onLoad={handleBottomRightImageLoaded}\n src={images[2]}\n />\n </StyledGridImage>\n );\n};\n\nGridImage.displayName = 'GridImage';\n\nexport default GridImage;\n"],"mappings":"AAAA,OAAOA,KAAK,IAMRC,WAAW,EACXC,MAAM,EACNC,QAAQ,QACL,OAAO;AACd,SAASC,kBAAkB,QAAQ,gCAAgC;AACnE,SAASC,4BAA4B,QAAQ,0CAA0C;AACvF,SAASC,cAAc,QAAQ,8CAA8C;AAC7E,SACIC,0BAA0B,EAC1BC,eAAe,EACfC,mBAAmB,EACnBC,uBAAuB,QACpB,oBAAoB;AA6B3B,MAAMC,SAA6B,GAAGA,CAAC;EACnCC,UAAU;EACVC,MAAM;EACNC,oBAAoB;EACpBC,IAAI;EACJC,OAAO;EACPC;AACJ,CAAC,KAAK;EACF,MAAMC,YAAY,GAAGhB,MAAM,CAAiB,IAAI,CAAC;EACjD,MAAMiB,WAAW,GAAGb,cAAc,CAAC,CAAC;EACpC,MAAMc,yCAAyC,GAC3CH,gCAAgC,IAAIE,WAAW,EAAEF,gCAAgC,IAAI,KAAK;EAE9F,MAAM,CAACI,kBAAkB,EAAEC,qBAAqB,CAAC,GAAGnB,QAAQ,CAAC,KAAK,CAAC;EACnE,MAAM,CAACoB,sBAAsB,EAAEC,yBAAyB,CAAC,GAAGrB,QAAQ,CAAC,KAAK,CAAC;EAC3E,MAAM,CAACsB,yBAAyB,EAAEC,4BAA4B,CAAC,GAAGvB,QAAQ,CAAC,KAAK,CAAC;EAEjF,MAAMwB,WAAW,GAAG,OAAOX,OAAO,KAAK,UAAU;EACjD,MAAMY,mBAAmB,GAAGD,WAAW,IAAIP,yCAAyC;EACpF,MAAMS,8BAA8B,GAAGxB,4BAA4B,CAACuB,mBAAmB,CAAC;EACxFxB,kBAAkB,CAACc,YAAY,EAAE;IAC7BY,SAAS,EAAED,8BAA8B;IACzCE,KAAK,EAAEjB,oBAAoB,GAAG,QAAQ,GAAG;EAC7C,CAAC,CAAC;EAEF,MAAMkB,aAAa,GAAG/B,WAAW,CAC5BgC,KAAK,IAAK;IACP,IAAI,CAACN,WAAW,EAAE;MACd;IACJ;IAEA,IAAIM,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MAC5CD,KAAK,CAACE,cAAc,CAAC,CAAC;MACtBnB,OAAO,GAAGiB,KAA8C,CAAC;IAC7D;EACJ,CAAC,EACD,CAACN,WAAW,EAAEX,OAAO,CACzB,CAAC;EAED,MAAMoB,qBAAqB,GAAGnC,WAAW,CAAC,MAAMqB,qBAAqB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAEhF,MAAMe,yBAAyB,GAAGpC,WAAW,CAAC,MAAMuB,yBAAyB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAExF,MAAMc,4BAA4B,GAAGrC,WAAW,CAAC,MAAMyB,4BAA4B,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAE9F,MAAMa,iBAAiB,GACnB,CAAClB,kBAAkB,IAAI,CAACE,sBAAsB,IAAI,CAACE,yBAAyB;EAEhF,oBACIzB,KAAA,CAAAwC,aAAA,CAAChC,eAAe;IACZiC,GAAG,EAAEvB,YAAa;IAClBwB,WAAW,EAAE9B,UAAW;IACxB+B,qBAAqB,EAAE7B,oBAAqB;IAC5C8B,KAAK,EAAE7B,IAAK;IACZC,OAAO,EAAEW,WAAW,GAAGX,OAAO,GAAG6B,SAAU;IAC3CC,SAAS,EAAElB,mBAAmB,GAAGI,aAAa,GAAGa,SAAU;IAC3DE,QAAQ,EAAEnB,mBAAmB,GAAG,CAAC,GAAG,CAAC,CAAE;IACvCoB,IAAI,EAAErB,WAAW,GAAG,QAAQ,GAAGkB;EAAU,gBAEzC7C,KAAA,CAAAwC,aAAA,CAAC/B,mBAAmB;IAChBwC,SAAS,EAAEV,iBAAkB;IAC7BW,MAAM,EAAEd,qBAAsB;IAC9BQ,KAAK,EAAE7B,IAAK;IACZoC,GAAG,EAAEtC,MAAM,CAAC,CAAC;EAAE,CAClB,CAAC,eACFb,KAAA,CAAAwC,aAAA,CAAC9B,uBAAuB;IACpBuC,SAAS,EAAEV,iBAAkB;IAC7BW,MAAM,EAAEb,yBAA0B;IAClCO,KAAK,EAAE7B,IAAK;IACZoC,GAAG,EAAEtC,MAAM,CAAC,CAAC;EAAE,CAClB,CAAC,eACFb,KAAA,CAAAwC,aAAA,CAACjC,0BAA0B;IACvB0C,SAAS,EAAEV,iBAAkB;IAC7BW,MAAM,EAAEZ,4BAA6B;IACrCa,GAAG,EAAEtC,MAAM,CAAC,CAAC;EAAE,CAClB,CACY,CAAC;AAE1B,CAAC;AAEDF,SAAS,CAACyC,WAAW,GAAG,WAAW;AAEnC,eAAezC,SAAS","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"GridImage.js","names":["React","useCallback","useRef","useState","useFocusRingPortal","useKeyboardFocusHighlighting","useColorScheme","StyledGridBottomRightImage","StyledGridImage","StyledGridLeftImage","StyledGridSingleImage","StyledGridTopRightImage","StyledGridTwoImage","GridImage","background","images","shouldShowRoundImage","size","onClick","shouldEnableKeyboardHighlighting","gridImageRef","colorScheme","shouldEnableKeyboardHighlightingEffective","hasLoadedLeftImage","setHasLoadedLeftImage","hasLoadedTopRightImage","setHasLoadedTopRightImage","hasLoadedBottomRightImage","setHasLoadedBottomRightImage","isClickable","isKeyboardFocusable","shouldShowKeyboardHighlighting","isEnabled","shape","handleKeyDown","event","key","preventDefault","handleLeftImageLoaded","handleTopRightImageLoaded","handleBottomRightImageLoaded","isGridImageHidden","length","createElement","ref","$background","$shouldShowRoundImage","$size","undefined","onKeyDown","tabIndex","role","$isHidden","onLoad","src","Fragment","$isLeft","displayName"],"sources":["../../../../src/components/grid-image/GridImage.tsx"],"sourcesContent":["import React, {\n CSSProperties,\n FC,\n KeyboardEventHandler,\n MouseEventHandler,\n MouseEvent,\n useCallback,\n useRef,\n useState,\n} from 'react';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport {\n StyledGridBottomRightImage,\n StyledGridImage,\n StyledGridLeftImage,\n StyledGridSingleImage,\n StyledGridTopRightImage,\n StyledGridTwoImage,\n} from './GridImage.styles';\n\ntype GridImageProps = {\n /**\n * The background color of the image.\n */\n background?: CSSProperties['background'];\n /**\n * The images to be displayed in the `GridImage`. Only the first three images are displayed.\n */\n images: string[];\n /**\n * Function to be executed when the images are clicked.\n */\n onClick?: MouseEventHandler<HTMLDivElement>;\n /**\n * Images of users should always be displayed in a round shape. Therefore, this property can be set to true.\n */\n shouldShowRoundImage?: boolean;\n /**\n * The size of the `GridImage` in pixels, which is set as both width and height.\n */\n size: number;\n /**\n * Enables keyboard-only focus highlighting for clickable GridImage instances.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst GridImage: FC<GridImageProps> = ({\n background,\n images,\n shouldShowRoundImage,\n size,\n onClick,\n shouldEnableKeyboardHighlighting,\n}) => {\n const gridImageRef = useRef<HTMLDivElement>(null);\n const colorScheme = useColorScheme();\n const shouldEnableKeyboardHighlightingEffective =\n shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;\n\n const [hasLoadedLeftImage, setHasLoadedLeftImage] = useState(false);\n const [hasLoadedTopRightImage, setHasLoadedTopRightImage] = useState(false);\n const [hasLoadedBottomRightImage, setHasLoadedBottomRightImage] = useState(false);\n\n const isClickable = typeof onClick === 'function';\n const isKeyboardFocusable = isClickable && shouldEnableKeyboardHighlightingEffective;\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(isKeyboardFocusable);\n useFocusRingPortal(gridImageRef, {\n isEnabled: shouldShowKeyboardHighlighting,\n shape: shouldShowRoundImage ? 'circle' : 'rectangle',\n });\n\n const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n (event) => {\n if (!isClickable) {\n return;\n }\n\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n onClick?.(event as unknown as MouseEvent<HTMLDivElement>);\n }\n },\n [isClickable, onClick],\n );\n\n const handleLeftImageLoaded = useCallback(() => setHasLoadedLeftImage(true), []);\n\n const handleTopRightImageLoaded = useCallback(() => setHasLoadedTopRightImage(true), []);\n\n const handleBottomRightImageLoaded = useCallback(() => setHasLoadedBottomRightImage(true), []);\n\n const isGridImageHidden =\n !hasLoadedLeftImage ||\n (images.length > 1 && !hasLoadedTopRightImage) ||\n (images.length > 2 && !hasLoadedBottomRightImage);\n\n return (\n <StyledGridImage\n ref={gridImageRef}\n $background={background}\n $shouldShowRoundImage={shouldShowRoundImage}\n $size={size}\n onClick={isClickable ? onClick : undefined}\n onKeyDown={isKeyboardFocusable ? handleKeyDown : undefined}\n tabIndex={isKeyboardFocusable ? 0 : -1}\n role={isClickable ? 'button' : undefined}\n >\n {images.length === 1 && (\n <StyledGridSingleImage\n $isHidden={isGridImageHidden}\n onLoad={handleLeftImageLoaded}\n src={images[0]}\n />\n )}\n {images.length === 2 && (\n <>\n <StyledGridTwoImage\n $isHidden={isGridImageHidden}\n $isLeft\n $size={size}\n onLoad={handleLeftImageLoaded}\n src={images[0]}\n />\n <StyledGridTwoImage\n $isHidden={isGridImageHidden}\n $isLeft={false}\n $size={size}\n onLoad={handleTopRightImageLoaded}\n src={images[1]}\n />\n </>\n )}\n {images.length > 2 && (\n <>\n <StyledGridLeftImage\n $isHidden={isGridImageHidden}\n onLoad={handleLeftImageLoaded}\n $size={size}\n src={images[0]}\n />\n <StyledGridTopRightImage\n $isHidden={isGridImageHidden}\n onLoad={handleTopRightImageLoaded}\n $size={size}\n src={images[1]}\n />\n <StyledGridBottomRightImage\n $isHidden={isGridImageHidden}\n onLoad={handleBottomRightImageLoaded}\n src={images[2]}\n />\n </>\n )}\n </StyledGridImage>\n );\n};\n\nGridImage.displayName = 'GridImage';\n\nexport default GridImage;\n"],"mappings":"AAAA,OAAOA,KAAK,IAMRC,WAAW,EACXC,MAAM,EACNC,QAAQ,QACL,OAAO;AACd,SAASC,kBAAkB,QAAQ,gCAAgC;AACnE,SAASC,4BAA4B,QAAQ,0CAA0C;AACvF,SAASC,cAAc,QAAQ,8CAA8C;AAC7E,SACIC,0BAA0B,EAC1BC,eAAe,EACfC,mBAAmB,EACnBC,qBAAqB,EACrBC,uBAAuB,EACvBC,kBAAkB,QACf,oBAAoB;AA6B3B,MAAMC,SAA6B,GAAGA,CAAC;EACnCC,UAAU;EACVC,MAAM;EACNC,oBAAoB;EACpBC,IAAI;EACJC,OAAO;EACPC;AACJ,CAAC,KAAK;EACF,MAAMC,YAAY,GAAGlB,MAAM,CAAiB,IAAI,CAAC;EACjD,MAAMmB,WAAW,GAAGf,cAAc,CAAC,CAAC;EACpC,MAAMgB,yCAAyC,GAC3CH,gCAAgC,IAAIE,WAAW,EAAEF,gCAAgC,IAAI,KAAK;EAE9F,MAAM,CAACI,kBAAkB,EAAEC,qBAAqB,CAAC,GAAGrB,QAAQ,CAAC,KAAK,CAAC;EACnE,MAAM,CAACsB,sBAAsB,EAAEC,yBAAyB,CAAC,GAAGvB,QAAQ,CAAC,KAAK,CAAC;EAC3E,MAAM,CAACwB,yBAAyB,EAAEC,4BAA4B,CAAC,GAAGzB,QAAQ,CAAC,KAAK,CAAC;EAEjF,MAAM0B,WAAW,GAAG,OAAOX,OAAO,KAAK,UAAU;EACjD,MAAMY,mBAAmB,GAAGD,WAAW,IAAIP,yCAAyC;EACpF,MAAMS,8BAA8B,GAAG1B,4BAA4B,CAACyB,mBAAmB,CAAC;EACxF1B,kBAAkB,CAACgB,YAAY,EAAE;IAC7BY,SAAS,EAAED,8BAA8B;IACzCE,KAAK,EAAEjB,oBAAoB,GAAG,QAAQ,GAAG;EAC7C,CAAC,CAAC;EAEF,MAAMkB,aAAa,GAAGjC,WAAW,CAC5BkC,KAAK,IAAK;IACP,IAAI,CAACN,WAAW,EAAE;MACd;IACJ;IAEA,IAAIM,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MAC5CD,KAAK,CAACE,cAAc,CAAC,CAAC;MACtBnB,OAAO,GAAGiB,KAA8C,CAAC;IAC7D;EACJ,CAAC,EACD,CAACN,WAAW,EAAEX,OAAO,CACzB,CAAC;EAED,MAAMoB,qBAAqB,GAAGrC,WAAW,CAAC,MAAMuB,qBAAqB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAEhF,MAAMe,yBAAyB,GAAGtC,WAAW,CAAC,MAAMyB,yBAAyB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAExF,MAAMc,4BAA4B,GAAGvC,WAAW,CAAC,MAAM2B,4BAA4B,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAE9F,MAAMa,iBAAiB,GACnB,CAAClB,kBAAkB,IAClBR,MAAM,CAAC2B,MAAM,GAAG,CAAC,IAAI,CAACjB,sBAAuB,IAC7CV,MAAM,CAAC2B,MAAM,GAAG,CAAC,IAAI,CAACf,yBAA0B;EAErD,oBACI3B,KAAA,CAAA2C,aAAA,CAACnC,eAAe;IACZoC,GAAG,EAAExB,YAAa;IAClByB,WAAW,EAAE/B,UAAW;IACxBgC,qBAAqB,EAAE9B,oBAAqB;IAC5C+B,KAAK,EAAE9B,IAAK;IACZC,OAAO,EAAEW,WAAW,GAAGX,OAAO,GAAG8B,SAAU;IAC3CC,SAAS,EAAEnB,mBAAmB,GAAGI,aAAa,GAAGc,SAAU;IAC3DE,QAAQ,EAAEpB,mBAAmB,GAAG,CAAC,GAAG,CAAC,CAAE;IACvCqB,IAAI,EAAEtB,WAAW,GAAG,QAAQ,GAAGmB;EAAU,GAExCjC,MAAM,CAAC2B,MAAM,KAAK,CAAC,iBAChB1C,KAAA,CAAA2C,aAAA,CAACjC,qBAAqB;IAClB0C,SAAS,EAAEX,iBAAkB;IAC7BY,MAAM,EAAEf,qBAAsB;IAC9BgB,GAAG,EAAEvC,MAAM,CAAC,CAAC;EAAE,CAClB,CACJ,EACAA,MAAM,CAAC2B,MAAM,KAAK,CAAC,iBAChB1C,KAAA,CAAA2C,aAAA,CAAA3C,KAAA,CAAAuD,QAAA,qBACIvD,KAAA,CAAA2C,aAAA,CAAC/B,kBAAkB;IACfwC,SAAS,EAAEX,iBAAkB;IAC7Be,OAAO;IACPT,KAAK,EAAE9B,IAAK;IACZoC,MAAM,EAAEf,qBAAsB;IAC9BgB,GAAG,EAAEvC,MAAM,CAAC,CAAC;EAAE,CAClB,CAAC,eACFf,KAAA,CAAA2C,aAAA,CAAC/B,kBAAkB;IACfwC,SAAS,EAAEX,iBAAkB;IAC7Be,OAAO,EAAE,KAAM;IACfT,KAAK,EAAE9B,IAAK;IACZoC,MAAM,EAAEd,yBAA0B;IAClCe,GAAG,EAAEvC,MAAM,CAAC,CAAC;EAAE,CAClB,CACH,CACL,EACAA,MAAM,CAAC2B,MAAM,GAAG,CAAC,iBACd1C,KAAA,CAAA2C,aAAA,CAAA3C,KAAA,CAAAuD,QAAA,qBACIvD,KAAA,CAAA2C,aAAA,CAAClC,mBAAmB;IAChB2C,SAAS,EAAEX,iBAAkB;IAC7BY,MAAM,EAAEf,qBAAsB;IAC9BS,KAAK,EAAE9B,IAAK;IACZqC,GAAG,EAAEvC,MAAM,CAAC,CAAC;EAAE,CAClB,CAAC,eACFf,KAAA,CAAA2C,aAAA,CAAChC,uBAAuB;IACpByC,SAAS,EAAEX,iBAAkB;IAC7BY,MAAM,EAAEd,yBAA0B;IAClCQ,KAAK,EAAE9B,IAAK;IACZqC,GAAG,EAAEvC,MAAM,CAAC,CAAC;EAAE,CAClB,CAAC,eACFf,KAAA,CAAA2C,aAAA,CAACpC,0BAA0B;IACvB6C,SAAS,EAAEX,iBAAkB;IAC7BY,MAAM,EAAEb,4BAA6B;IACrCc,GAAG,EAAEvC,MAAM,CAAC,CAAC;EAAE,CAClB,CACH,CAEO,CAAC;AAE1B,CAAC;AAEDF,SAAS,CAAC4C,WAAW,GAAG,WAAW;AAEnC,eAAe5C,SAAS","ignoreList":[]}
|
|
@@ -25,6 +25,40 @@ export const StyledGridImage = styled.div`
|
|
|
25
25
|
outline: none;
|
|
26
26
|
}
|
|
27
27
|
`;
|
|
28
|
+
export const StyledGridSingleImage = styled.img`
|
|
29
|
+
height: 100%;
|
|
30
|
+
left: 0;
|
|
31
|
+
object-fit: cover;
|
|
32
|
+
opacity: ${({
|
|
33
|
+
$isHidden
|
|
34
|
+
}) => $isHidden ? 0 : 1};
|
|
35
|
+
position: absolute;
|
|
36
|
+
top: 0;
|
|
37
|
+
transition: opacity 0.4s ease;
|
|
38
|
+
width: 100%;
|
|
39
|
+
`;
|
|
40
|
+
export const StyledGridTwoImage = styled.img`
|
|
41
|
+
border-right: ${({
|
|
42
|
+
$isLeft,
|
|
43
|
+
$size
|
|
44
|
+
}) => $isLeft ? `${$size / 40}px solid white` : undefined};
|
|
45
|
+
box-sizing: border-box;
|
|
46
|
+
height: 100%;
|
|
47
|
+
left: ${({
|
|
48
|
+
$isLeft
|
|
49
|
+
}) => $isLeft ? 0 : undefined};
|
|
50
|
+
object-fit: cover;
|
|
51
|
+
opacity: ${({
|
|
52
|
+
$isHidden
|
|
53
|
+
}) => $isHidden ? 0 : 1};
|
|
54
|
+
position: absolute;
|
|
55
|
+
right: ${({
|
|
56
|
+
$isLeft
|
|
57
|
+
}) => $isLeft ? undefined : 0};
|
|
58
|
+
top: 0;
|
|
59
|
+
transition: opacity 0.4s ease;
|
|
60
|
+
width: 50%;
|
|
61
|
+
`;
|
|
28
62
|
export const StyledGridLeftImage = styled.img`
|
|
29
63
|
border-right: ${({
|
|
30
64
|
$size
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GridImage.styles.js","names":["styled","StyledGridImage","div","$background","theme","$shouldShowRoundImage","undefined","$size","
|
|
1
|
+
{"version":3,"file":"GridImage.styles.js","names":["styled","StyledGridImage","div","$background","theme","$shouldShowRoundImage","undefined","$size","StyledGridSingleImage","img","$isHidden","StyledGridTwoImage","$isLeft","StyledGridLeftImage","StyledGridTopRightImage","StyledGridBottomRightImage"],"sources":["../../../../src/components/grid-image/GridImage.styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledGridImageProps = WithTheme<{\n $background?: CSSProperties['background'];\n $shouldShowRoundImage?: boolean;\n $size: number;\n}>;\n\nexport const StyledGridImage = styled.div<StyledGridImageProps>`\n background: ${({ $background, theme }: StyledGridImageProps) =>\n $background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : undefined)};\n box-shadow: 0 0 0 1px rgba(${({ theme }: StyledGridImageProps) => theme['009-rgb']}, 0.08) inset;\n height: ${({ $size }) => $size}px;\n overflow: hidden;\n position: relative;\n transition: border-radius 0.3s ease;\n width: ${({ $size }) => $size}px;\n flex: 0 0 auto;\n\n &:focus-visible {\n outline: none;\n }\n`;\n\ntype StyledGridSingleImageProps = {\n $isHidden: boolean;\n};\n\nexport const StyledGridSingleImage = styled.img<StyledGridSingleImageProps>`\n height: 100%;\n left: 0;\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n position: absolute;\n top: 0;\n transition: opacity 0.4s ease;\n width: 100%;\n`;\n\ntype StyledGridTwoImageProps = {\n $isHidden: boolean;\n $isLeft: boolean;\n $size: number;\n};\n\nexport const StyledGridTwoImage = styled.img<StyledGridTwoImageProps>`\n border-right: ${({ $isLeft, $size }) => ($isLeft ? `${$size / 40}px solid white` : undefined)};\n box-sizing: border-box;\n height: 100%;\n left: ${({ $isLeft }) => ($isLeft ? 0 : undefined)};\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n position: absolute;\n right: ${({ $isLeft }) => ($isLeft ? undefined : 0)};\n top: 0;\n transition: opacity 0.4s ease;\n width: 50%;\n`;\n\ntype StyledGridLeftImageProps = {\n $isHidden: boolean;\n $size: number;\n};\n\nexport const StyledGridLeftImage = styled.img<StyledGridLeftImageProps>`\n border-right: ${({ $size }) => $size / 40}px solid white;\n height: 100%;\n left: 0;\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n position: absolute;\n top: 0;\n transition: opacity 0.4s ease;\n width: 60%;\n`;\n\ntype StyledGridTopRightImageProps = {\n $isHidden: boolean;\n $size: number;\n};\n\nexport const StyledGridTopRightImage = styled.img<StyledGridTopRightImageProps>`\n border-bottom: ${({ $size }) => $size / 40}px solid white;\n height: 50%;\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n position: absolute;\n right: 0;\n top: 0;\n transition: opacity 0.3s ease;\n width: 40%;\n`;\n\ntype StyledGridBottomRightImageProps = {\n $isHidden: boolean;\n};\n\nexport const StyledGridBottomRightImage = styled.img<StyledGridBottomRightImageProps>`\n bottom: 0;\n height: 50%;\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n position: absolute;\n right: 0;\n transition: opacity 0.3s ease;\n width: 40%;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAe,mBAAmB;AAS/C,OAAO,MAAMC,eAAe,GAAGD,MAAM,CAACE,GAAyB;AAC/D,kBAAkB,CAAC;EAAEC,WAAW;EAAEC;AAA4B,CAAC,KACvDD,WAAW,IAAI,QAAQC,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACnE,qBAAqB,CAAC;EAAEC;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,KAAK,GAAGC,SAAU;AAC/F,iCAAiC,CAAC;EAAEF;AAA4B,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACtF,cAAc,CAAC;EAAEG;AAAM,CAAC,KAAKA,KAAK;AAClC;AACA;AACA;AACA,aAAa,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK;AACjC;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMC,qBAAqB,GAAGR,MAAM,CAACS,GAA+B;AAC3E;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMC,kBAAkB,GAAGX,MAAM,CAACS,GAA4B;AACrE,oBAAoB,CAAC;EAAEG,OAAO;EAAEL;AAAM,CAAC,KAAMK,OAAO,GAAG,GAAGL,KAAK,GAAG,EAAE,gBAAgB,GAAGD,SAAU;AACjG;AACA;AACA,YAAY,CAAC;EAAEM;AAAQ,CAAC,KAAMA,OAAO,GAAG,CAAC,GAAGN,SAAU;AACtD;AACA,eAAe,CAAC;EAAEI;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA,aAAa,CAAC;EAAEE;AAAQ,CAAC,KAAMA,OAAO,GAAGN,SAAS,GAAG,CAAE;AACvD;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMO,mBAAmB,GAAGb,MAAM,CAACS,GAA6B;AACvE,oBAAoB,CAAC;EAAEF;AAAM,CAAC,KAAKA,KAAK,GAAG,EAAE;AAC7C;AACA;AACA;AACA,eAAe,CAAC;EAAEG;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMI,uBAAuB,GAAGd,MAAM,CAACS,GAAiC;AAC/E,qBAAqB,CAAC;EAAEF;AAAM,CAAC,KAAKA,KAAK,GAAG,EAAE;AAC9C;AACA;AACA,eAAe,CAAC;EAAEG;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMK,0BAA0B,GAAGf,MAAM,CAACS,GAAoC;AACrF;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { render, screen } from '@testing-library/react';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { describe, expect, it } from 'vitest';
|
|
4
|
+
import GridImage from './GridImage';
|
|
5
|
+
describe('GridImage', () => {
|
|
6
|
+
it('renders one image without additional grid images', () => {
|
|
7
|
+
render(/*#__PURE__*/React.createElement(GridImage, {
|
|
8
|
+
images: ['one.jpg'],
|
|
9
|
+
size: 100
|
|
10
|
+
}));
|
|
11
|
+
expect(screen.getAllByRole('img')).toHaveLength(1);
|
|
12
|
+
expect(screen.getByRole('img')).toHaveAttribute('src', 'one.jpg');
|
|
13
|
+
});
|
|
14
|
+
it('renders two images side by side without a third grid image', () => {
|
|
15
|
+
render(/*#__PURE__*/React.createElement(GridImage, {
|
|
16
|
+
images: ['one.jpg', 'two.jpg'],
|
|
17
|
+
size: 100
|
|
18
|
+
}));
|
|
19
|
+
expect(screen.getAllByRole('img')).toHaveLength(2);
|
|
20
|
+
expect(screen.getAllByRole('img')[0]).toHaveAttribute('src', 'one.jpg');
|
|
21
|
+
expect(screen.getAllByRole('img')[1]).toHaveAttribute('src', 'two.jpg');
|
|
22
|
+
});
|
|
23
|
+
});
|
|
24
|
+
//# sourceMappingURL=GridImage.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GridImage.test.js","names":["render","screen","React","describe","expect","it","GridImage","createElement","images","size","getAllByRole","toHaveLength","getByRole","toHaveAttribute"],"sources":["../../../../src/components/grid-image/GridImage.test.tsx"],"sourcesContent":["import { render, screen } from '@testing-library/react';\nimport React from 'react';\nimport { describe, expect, it } from 'vitest';\nimport GridImage from './GridImage';\n\ndescribe('GridImage', () => {\n it('renders one image without additional grid images', () => {\n render(<GridImage images={['one.jpg']} size={100} />);\n\n expect(screen.getAllByRole('img')).toHaveLength(1);\n expect(screen.getByRole('img')).toHaveAttribute('src', 'one.jpg');\n });\n\n it('renders two images side by side without a third grid image', () => {\n render(<GridImage images={['one.jpg', 'two.jpg']} size={100} />);\n\n expect(screen.getAllByRole('img')).toHaveLength(2);\n expect(screen.getAllByRole('img')[0]).toHaveAttribute('src', 'one.jpg');\n expect(screen.getAllByRole('img')[1]).toHaveAttribute('src', 'two.jpg');\n });\n});\n"],"mappings":"AAAA,SAASA,MAAM,EAAEC,MAAM,QAAQ,wBAAwB;AACvD,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,EAAEC,MAAM,EAAEC,EAAE,QAAQ,QAAQ;AAC7C,OAAOC,SAAS,MAAM,aAAa;AAEnCH,QAAQ,CAAC,WAAW,EAAE,MAAM;EACxBE,EAAE,CAAC,kDAAkD,EAAE,MAAM;IACzDL,MAAM,cAACE,KAAA,CAAAK,aAAA,CAACD,SAAS;MAACE,MAAM,EAAE,CAAC,SAAS,CAAE;MAACC,IAAI,EAAE;IAAI,CAAE,CAAC,CAAC;IAErDL,MAAM,CAACH,MAAM,CAACS,YAAY,CAAC,KAAK,CAAC,CAAC,CAACC,YAAY,CAAC,CAAC,CAAC;IAClDP,MAAM,CAACH,MAAM,CAACW,SAAS,CAAC,KAAK,CAAC,CAAC,CAACC,eAAe,CAAC,KAAK,EAAE,SAAS,CAAC;EACrE,CAAC,CAAC;EAEFR,EAAE,CAAC,4DAA4D,EAAE,MAAM;IACnEL,MAAM,cAACE,KAAA,CAAAK,aAAA,CAACD,SAAS;MAACE,MAAM,EAAE,CAAC,SAAS,EAAE,SAAS,CAAE;MAACC,IAAI,EAAE;IAAI,CAAE,CAAC,CAAC;IAEhEL,MAAM,CAACH,MAAM,CAACS,YAAY,CAAC,KAAK,CAAC,CAAC,CAACC,YAAY,CAAC,CAAC,CAAC;IAClDP,MAAM,CAACH,MAAM,CAACS,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAACG,eAAe,CAAC,KAAK,EAAE,SAAS,CAAC;IACvET,MAAM,CAACH,MAAM,CAACS,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAACG,eAAe,CAAC,KAAK,EAAE,SAAS,CAAC;EAC3E,CAAC,CAAC;AACN,CAAC,CAAC","ignoreList":[]}
|
|
@@ -5,7 +5,7 @@ export const uploadFile = async ({
|
|
|
5
5
|
callback,
|
|
6
6
|
shouldUploadImageToSite
|
|
7
7
|
}) => {
|
|
8
|
-
if (!fileToUpload || fileToUpload.state !== 'none') {
|
|
8
|
+
if (!fileToUpload || fileToUpload.state !== undefined && fileToUpload.state !== 'none') {
|
|
9
9
|
return;
|
|
10
10
|
}
|
|
11
11
|
if (fileToUpload.file?.type.includes('video/')) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"uploadFile.js","names":["postImage","postVideo","uploadFile","fileToUpload","callback","shouldUploadImageToSite","state","file","type","includes","uploadedVideo","id","toString","uploadedImage","url","base","key","meta","ratio","width","height","Number"
|
|
1
|
+
{"version":3,"file":"uploadFile.js","names":["postImage","postVideo","uploadFile","fileToUpload","callback","shouldUploadImageToSite","state","undefined","file","type","includes","uploadedVideo","id","toString","uploadedImage","url","base","key","meta","ratio","width","height","Number"],"sources":["../../../src/utils/uploadFile.ts"],"sourcesContent":["import { postImage } from '../api/image/post';\nimport { postVideo } from '../api/video/post';\nimport type { Image, InternalFileItem, Video } from '../types/file';\n\ninterface UploadFilesOptions {\n fileToUpload: InternalFileItem;\n callback: (UploadedFile: Video | Image) => void;\n shouldUploadImageToSite?: boolean;\n}\n\nexport const uploadFile = async ({\n fileToUpload,\n callback,\n shouldUploadImageToSite,\n}: UploadFilesOptions): Promise<void> => {\n if (!fileToUpload || (fileToUpload.state !== undefined && fileToUpload.state !== 'none')) {\n return;\n }\n\n if (fileToUpload.file?.type.includes('video/')) {\n const uploadedVideo = await postVideo({ file: fileToUpload.file });\n\n if (uploadedVideo) {\n callback({\n ...uploadedVideo,\n id: uploadedVideo.id.toString(),\n });\n }\n }\n\n if (fileToUpload.file?.type.includes('image/')) {\n const uploadedImage = await postImage({ file: fileToUpload.file, shouldUploadImageToSite });\n\n if (uploadedImage) {\n callback({\n url: `${uploadedImage.base}/${uploadedImage.key}`,\n id: uploadedImage.key,\n meta: uploadedImage.meta,\n ratio:\n uploadedImage.meta?.width && uploadedImage.meta?.height\n ? Number(uploadedImage.meta?.width) / Number(uploadedImage.meta?.height)\n : undefined,\n });\n }\n }\n};\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,mBAAmB;AAC7C,SAASC,SAAS,QAAQ,mBAAmB;AAS7C,OAAO,MAAMC,UAAU,GAAG,MAAAA,CAAO;EAC7BC,YAAY;EACZC,QAAQ;EACRC;AACgB,CAAC,KAAoB;EACrC,IAAI,CAACF,YAAY,IAAKA,YAAY,CAACG,KAAK,KAAKC,SAAS,IAAIJ,YAAY,CAACG,KAAK,KAAK,MAAO,EAAE;IACtF;EACJ;EAEA,IAAIH,YAAY,CAACK,IAAI,EAAEC,IAAI,CAACC,QAAQ,CAAC,QAAQ,CAAC,EAAE;IAC5C,MAAMC,aAAa,GAAG,MAAMV,SAAS,CAAC;MAAEO,IAAI,EAAEL,YAAY,CAACK;IAAK,CAAC,CAAC;IAElE,IAAIG,aAAa,EAAE;MACfP,QAAQ,CAAC;QACL,GAAGO,aAAa;QAChBC,EAAE,EAAED,aAAa,CAACC,EAAE,CAACC,QAAQ,CAAC;MAClC,CAAC,CAAC;IACN;EACJ;EAEA,IAAIV,YAAY,CAACK,IAAI,EAAEC,IAAI,CAACC,QAAQ,CAAC,QAAQ,CAAC,EAAE;IAC5C,MAAMI,aAAa,GAAG,MAAMd,SAAS,CAAC;MAAEQ,IAAI,EAAEL,YAAY,CAACK,IAAI;MAAEH;IAAwB,CAAC,CAAC;IAE3F,IAAIS,aAAa,EAAE;MACfV,QAAQ,CAAC;QACLW,GAAG,EAAE,GAAGD,aAAa,CAACE,IAAI,IAAIF,aAAa,CAACG,GAAG,EAAE;QACjDL,EAAE,EAAEE,aAAa,CAACG,GAAG;QACrBC,IAAI,EAAEJ,aAAa,CAACI,IAAI;QACxBC,KAAK,EACDL,aAAa,CAACI,IAAI,EAAEE,KAAK,IAAIN,aAAa,CAACI,IAAI,EAAEG,MAAM,GACjDC,MAAM,CAACR,aAAa,CAACI,IAAI,EAAEE,KAAK,CAAC,GAAGE,MAAM,CAACR,aAAa,CAACI,IAAI,EAAEG,MAAM,CAAC,GACtEd;MACd,CAAC,CAAC;IACN;EACJ;AACJ,CAAC","ignoreList":[]}
|
|
@@ -12,6 +12,16 @@ export declare const StyledGridImage: import("styled-components/dist/types").ISt
|
|
|
12
12
|
} & {
|
|
13
13
|
theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
|
|
14
14
|
}, never>>> & string;
|
|
15
|
+
type StyledGridSingleImageProps = {
|
|
16
|
+
$isHidden: boolean;
|
|
17
|
+
};
|
|
18
|
+
export declare const StyledGridSingleImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "$isHidden"> & StyledGridSingleImageProps, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "$isHidden"> & StyledGridSingleImageProps, never>>> & string;
|
|
19
|
+
type StyledGridTwoImageProps = {
|
|
20
|
+
$isHidden: boolean;
|
|
21
|
+
$isLeft: boolean;
|
|
22
|
+
$size: number;
|
|
23
|
+
};
|
|
24
|
+
export declare const StyledGridTwoImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, keyof StyledGridTwoImageProps> & StyledGridTwoImageProps, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, keyof StyledGridTwoImageProps> & StyledGridTwoImageProps, never>>> & string;
|
|
15
25
|
type StyledGridLeftImageProps = {
|
|
16
26
|
$isHidden: boolean;
|
|
17
27
|
$size: number;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.5.
|
|
3
|
+
"version": "5.5.45",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -93,5 +93,5 @@
|
|
|
93
93
|
"publishConfig": {
|
|
94
94
|
"access": "public"
|
|
95
95
|
},
|
|
96
|
-
"gitHead": "
|
|
96
|
+
"gitHead": "2fdb77365e5c584e61610bf190ab9c36a5e588ad"
|
|
97
97
|
}
|