@chayns-components/core 5.0.0-beta.1019 → 5.0.0-beta.1021
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/lib/cjs/components/list/list-item/list-item-head/list-item-image/ListItemImage.js +8 -0
- package/lib/cjs/components/list/list-item/list-item-head/list-item-image/ListItemImage.js.map +1 -1
- package/lib/cjs/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.js +30 -0
- package/lib/cjs/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.js.map +1 -1
- package/lib/esm/components/list/list-item/list-item-head/list-item-image/ListItemImage.js +8 -0
- package/lib/esm/components/list/list-item/list-item-head/list-item-image/ListItemImage.js.map +1 -1
- package/lib/esm/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.js +36 -0
- package/lib/esm/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.js.map +1 -1
- package/lib/types/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.d.ts +9 -3
- package/package.json +2 -2
|
@@ -44,12 +44,18 @@ const ListItemImage = ({
|
|
|
44
44
|
onClick: handleImageClick
|
|
45
45
|
}, /*#__PURE__*/_react.default.createElement(_ListItemImage.StyledListImageWrapperImage, {
|
|
46
46
|
src: images[0],
|
|
47
|
+
$shouldHideBackground: shouldHideBackground,
|
|
48
|
+
$background: imageBackground,
|
|
47
49
|
$isSmall: !!careOfLocationId
|
|
48
50
|
}), /*#__PURE__*/_react.default.createElement(_ListItemImage.StyledListImageWrapperImage, {
|
|
49
51
|
src: images[1],
|
|
50
52
|
$isSecondImage: true,
|
|
53
|
+
$shouldHideBackground: shouldHideBackground,
|
|
54
|
+
$background: imageBackground,
|
|
51
55
|
$isSmall: !!careOfLocationId
|
|
52
56
|
}), careOfLocationId && /*#__PURE__*/_react.default.createElement(_ListItemImage.StyledCareOfImage, {
|
|
57
|
+
$shouldHideBackground: shouldHideBackground,
|
|
58
|
+
$background: imageBackground,
|
|
53
59
|
src: `https://sub60.tobit.com/l/${careOfLocationId}?size=128`,
|
|
54
60
|
alt: "care-of"
|
|
55
61
|
}));
|
|
@@ -66,6 +72,8 @@ const ListItemImage = ({
|
|
|
66
72
|
$isSmall: !!careOfLocationId,
|
|
67
73
|
src: images[0]
|
|
68
74
|
}), careOfLocationId && /*#__PURE__*/_react.default.createElement(_ListItemImage.StyledCareOfImage, {
|
|
75
|
+
$shouldHideBackground: shouldHideBackground,
|
|
76
|
+
$background: imageBackground,
|
|
69
77
|
src: `https://sub60.tobit.com/l/${careOfLocationId}?size=128`,
|
|
70
78
|
alt: "care-of"
|
|
71
79
|
}));
|
package/lib/cjs/components/list/list-item/list-item-head/list-item-image/ListItemImage.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemImage.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_ListItemImage","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ListItemImage","careOfLocationId","imageBackground","images","shouldHideBackground","shouldShowRoundImage","shouldOpenImageOnClick","hasLoadedImage","setHasLoadedImage","useState","handleImageLoaded","useCallback","handleImageClick","event","preventDefault","stopPropagation","items","map","image","url","mediaType","MediaType","IMAGE","openMedia","startIndex","createElement","StyledListImageWrapper","onClick","StyledListImageWrapperImage","src","$isSmall","$isSecondImage","StyledCareOfImage","alt","StyledListItemHeadImageWrapper","StyledListItemHeadImage","$isHidden","onLoad","$shouldShowRoundImage","
|
|
1
|
+
{"version":3,"file":"ListItemImage.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_ListItemImage","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ListItemImage","careOfLocationId","imageBackground","images","shouldHideBackground","shouldShowRoundImage","shouldOpenImageOnClick","hasLoadedImage","setHasLoadedImage","useState","handleImageLoaded","useCallback","handleImageClick","event","preventDefault","stopPropagation","items","map","image","url","mediaType","MediaType","IMAGE","openMedia","startIndex","createElement","StyledListImageWrapper","onClick","StyledListImageWrapperImage","src","$shouldHideBackground","$background","$isSmall","$isSecondImage","StyledCareOfImage","alt","StyledListItemHeadImageWrapper","StyledListItemHeadImage","$isHidden","onLoad","$shouldShowRoundImage","displayName","_default","exports"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-image/ListItemImage.tsx"],"sourcesContent":["import { MediaType, openMedia, OpenMediaItem } from 'chayns-api';\nimport React, { CSSProperties, MouseEventHandler, useCallback, useState } from 'react';\nimport {\n StyledCareOfImage,\n StyledListImageWrapper,\n StyledListImageWrapperImage,\n StyledListItemHeadImage,\n StyledListItemHeadImageWrapper,\n} from './ListItemImage.styles';\n\ntype ListItemImageProps = {\n careOfLocationId?: number;\n imageBackground?: CSSProperties['background'];\n images: string[];\n shouldHideBackground: boolean;\n shouldShowRoundImage: boolean;\n shouldOpenImageOnClick: boolean;\n};\n\nconst ListItemImage: React.FC<ListItemImageProps> = ({\n careOfLocationId,\n imageBackground,\n images,\n shouldHideBackground,\n shouldShowRoundImage,\n shouldOpenImageOnClick,\n}) => {\n const [hasLoadedImage, setHasLoadedImage] = useState(false);\n const handleImageLoaded = useCallback(() => {\n setHasLoadedImage(true);\n }, []);\n\n const handleImageClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n (event) => {\n if (!shouldOpenImageOnClick) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n\n const items: OpenMediaItem[] = images.map((image) => ({\n url: image,\n mediaType: MediaType.IMAGE,\n }));\n\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n void openMedia({ items, startIndex: 0 });\n },\n [images, shouldOpenImageOnClick],\n );\n\n if (images && images[0] && images[1]) {\n return (\n <StyledListImageWrapper onClick={handleImageClick}>\n <StyledListImageWrapperImage\n src={images[0]}\n $shouldHideBackground={shouldHideBackground}\n $background={imageBackground}\n $isSmall={!!careOfLocationId}\n />\n <StyledListImageWrapperImage\n src={images[1]}\n $isSecondImage\n $shouldHideBackground={shouldHideBackground}\n $background={imageBackground}\n $isSmall={!!careOfLocationId}\n />\n {careOfLocationId && (\n <StyledCareOfImage\n $shouldHideBackground={shouldHideBackground}\n $background={imageBackground}\n src={`https://sub60.tobit.com/l/${careOfLocationId}?size=128`}\n alt=\"care-of\"\n />\n )}\n </StyledListImageWrapper>\n );\n }\n\n if (images && images[0]) {\n return (\n <StyledListItemHeadImageWrapper onClick={handleImageClick}>\n <StyledListItemHeadImage\n $isHidden={!hasLoadedImage}\n onLoad={handleImageLoaded}\n $shouldShowRoundImage={shouldShowRoundImage}\n $background={imageBackground}\n $shouldHideBackground={shouldHideBackground}\n $isSmall={!!careOfLocationId}\n src={images[0]}\n />\n {careOfLocationId && (\n <StyledCareOfImage\n $shouldHideBackground={shouldHideBackground}\n $background={imageBackground}\n src={`https://sub60.tobit.com/l/${careOfLocationId}?size=128`}\n alt=\"care-of\"\n />\n )}\n </StyledListItemHeadImageWrapper>\n );\n }\n\n return null;\n};\n\nListItemImage.displayName = 'ListItemImage';\n\nexport default ListItemImage;\n"],"mappings":"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","ignoreList":[]}
|
package/lib/cjs/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.js
CHANGED
|
@@ -68,6 +68,21 @@ const StyledListImageWrapperImage = exports.StyledListImageWrapperImage = _style
|
|
|
68
68
|
top: 0;
|
|
69
69
|
left: 0;
|
|
70
70
|
`}
|
|
71
|
+
|
|
72
|
+
transition:
|
|
73
|
+
opacity 0.4s ease,
|
|
74
|
+
background-color 0.3s ease,
|
|
75
|
+
border-radius 0.3s ease,
|
|
76
|
+
box-shadow 0.3s ease;
|
|
77
|
+
|
|
78
|
+
${({
|
|
79
|
+
$shouldHideBackground,
|
|
80
|
+
$background,
|
|
81
|
+
theme
|
|
82
|
+
}) => !$shouldHideBackground && (0, _styledComponents.css)`
|
|
83
|
+
background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};
|
|
84
|
+
box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;
|
|
85
|
+
`}
|
|
71
86
|
`;
|
|
72
87
|
const StyledCareOfImage = exports.StyledCareOfImage = _styledComponents.default.img`
|
|
73
88
|
position: absolute;
|
|
@@ -75,5 +90,20 @@ const StyledCareOfImage = exports.StyledCareOfImage = _styledComponents.default.
|
|
|
75
90
|
right: 0;
|
|
76
91
|
aspect-ratio: 1;
|
|
77
92
|
height: 20px;
|
|
93
|
+
|
|
94
|
+
transition:
|
|
95
|
+
opacity 0.4s ease,
|
|
96
|
+
background-color 0.3s ease,
|
|
97
|
+
border-radius 0.3s ease,
|
|
98
|
+
box-shadow 0.3s ease;
|
|
99
|
+
|
|
100
|
+
${({
|
|
101
|
+
$shouldHideBackground,
|
|
102
|
+
$background,
|
|
103
|
+
theme
|
|
104
|
+
}) => !$shouldHideBackground && (0, _styledComponents.css)`
|
|
105
|
+
background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};
|
|
106
|
+
box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;
|
|
107
|
+
`}
|
|
78
108
|
`;
|
|
79
109
|
//# sourceMappingURL=ListItemImage.styles.js.map
|
package/lib/cjs/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemImage.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledListItemHeadImageWrapper","exports","styled","div","StyledListItemHeadImage","img","$isSmall","$isHidden","$shouldShowRoundImage","undefined","$shouldHideBackground","$background","theme","css","StyledListImageWrapper","StyledListImageWrapperImage","$isSecondImage","StyledCareOfImage"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../../../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledListItemHeadImageWrapper = styled.div`\n flex: 0 0 auto;\n height: 40px;\n overflow: hidden;\n position: relative;\n width: 40px;\n`;\n\ntype StyledListItemHeadImageProps = WithTheme<{\n $isHidden: boolean;\n $shouldShowRoundImage?: boolean;\n $background?: CSSProperties['background'];\n $shouldHideBackground?: boolean;\n $isSmall: boolean;\n}>;\n\nexport const StyledListItemHeadImage = styled.img<StyledListItemHeadImageProps>`\n height: ${({ $isSmall }) => ($isSmall ? '34px' : '40px')};\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n aspect-ratio: 1;\n\n border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : undefined)};\n\n transition:\n opacity 0.4s ease,\n background-color 0.3s ease,\n border-radius 0.3s ease,\n box-shadow 0.3s ease;\n\n ${({ $shouldHideBackground, $background, theme }: StyledListItemHeadImageProps) =>\n !$shouldHideBackground &&\n css`\n background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n `}\n`;\n\nexport const StyledListImageWrapper = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n width: 40px;\n height: 40px;\n`;\n\nexport type StyledListImageWrapperImageProps = {\n $isSecondImage?: boolean;\n $isSmall: boolean;\n
|
|
1
|
+
{"version":3,"file":"ListItemImage.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledListItemHeadImageWrapper","exports","styled","div","StyledListItemHeadImage","img","$isSmall","$isHidden","$shouldShowRoundImage","undefined","$shouldHideBackground","$background","theme","css","StyledListImageWrapper","StyledListImageWrapperImage","$isSecondImage","StyledCareOfImage"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../../../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledListItemHeadImageWrapper = styled.div`\n flex: 0 0 auto;\n height: 40px;\n overflow: hidden;\n position: relative;\n width: 40px;\n`;\n\ntype StyledListItemHeadImageProps = WithTheme<{\n $isHidden: boolean;\n $shouldShowRoundImage?: boolean;\n $background?: CSSProperties['background'];\n $shouldHideBackground?: boolean;\n $isSmall: boolean;\n}>;\n\nexport const StyledListItemHeadImage = styled.img<StyledListItemHeadImageProps>`\n height: ${({ $isSmall }) => ($isSmall ? '34px' : '40px')};\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n aspect-ratio: 1;\n\n border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : undefined)};\n\n transition:\n opacity 0.4s ease,\n background-color 0.3s ease,\n border-radius 0.3s ease,\n box-shadow 0.3s ease;\n\n ${({ $shouldHideBackground, $background, theme }: StyledListItemHeadImageProps) =>\n !$shouldHideBackground &&\n css`\n background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n `}\n`;\n\nexport const StyledListImageWrapper = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n width: 40px;\n height: 40px;\n`;\n\nexport type StyledListImageWrapperImageProps = WithTheme<{\n $isSecondImage?: boolean;\n $isSmall: boolean;\n $shouldHideBackground?: boolean;\n $background?: CSSProperties['background'];\n}>;\n\nexport const StyledListImageWrapperImage = styled.img<StyledListImageWrapperImageProps>`\n border-radius: 100px;\n height: ${({ $isSmall }) => ($isSmall ? '65%' : '80%')};\n aspect-ratio: 1;\n position: absolute;\n\n ${({ $isSecondImage, $isSmall }) =>\n $isSecondImage\n ? css`\n bottom: ${$isSmall ? '6px' : 0};\n right: ${$isSmall ? '6px' : 0};\n `\n : css`\n top: 0;\n left: 0;\n `}\n\n transition:\n opacity 0.4s ease,\n background-color 0.3s ease,\n border-radius 0.3s ease,\n box-shadow 0.3s ease;\n\n ${({ $shouldHideBackground, $background, theme }: StyledListImageWrapperImageProps) =>\n !$shouldHideBackground &&\n css`\n background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n `}\n`;\n\ntype StyledCareOfImageProps = WithTheme<{\n $shouldHideBackground?: boolean;\n $background?: CSSProperties['background'];\n}>;\n\nexport const StyledCareOfImage = styled.img<StyledCareOfImageProps>`\n position: absolute;\n bottom: 0;\n right: 0;\n aspect-ratio: 1;\n height: 20px;\n\n transition:\n opacity 0.4s ease,\n background-color 0.3s ease,\n border-radius 0.3s ease,\n box-shadow 0.3s ease;\n\n ${({ $shouldHideBackground, $background, theme }: StyledCareOfImageProps) =>\n !$shouldHideBackground &&\n css`\n background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n `}\n`;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -37,12 +37,18 @@ const ListItemImage = _ref => {
|
|
|
37
37
|
onClick: handleImageClick
|
|
38
38
|
}, /*#__PURE__*/React.createElement(StyledListImageWrapperImage, {
|
|
39
39
|
src: images[0],
|
|
40
|
+
$shouldHideBackground: shouldHideBackground,
|
|
41
|
+
$background: imageBackground,
|
|
40
42
|
$isSmall: !!careOfLocationId
|
|
41
43
|
}), /*#__PURE__*/React.createElement(StyledListImageWrapperImage, {
|
|
42
44
|
src: images[1],
|
|
43
45
|
$isSecondImage: true,
|
|
46
|
+
$shouldHideBackground: shouldHideBackground,
|
|
47
|
+
$background: imageBackground,
|
|
44
48
|
$isSmall: !!careOfLocationId
|
|
45
49
|
}), careOfLocationId && /*#__PURE__*/React.createElement(StyledCareOfImage, {
|
|
50
|
+
$shouldHideBackground: shouldHideBackground,
|
|
51
|
+
$background: imageBackground,
|
|
46
52
|
src: `https://sub60.tobit.com/l/${careOfLocationId}?size=128`,
|
|
47
53
|
alt: "care-of"
|
|
48
54
|
}));
|
|
@@ -59,6 +65,8 @@ const ListItemImage = _ref => {
|
|
|
59
65
|
$isSmall: !!careOfLocationId,
|
|
60
66
|
src: images[0]
|
|
61
67
|
}), careOfLocationId && /*#__PURE__*/React.createElement(StyledCareOfImage, {
|
|
68
|
+
$shouldHideBackground: shouldHideBackground,
|
|
69
|
+
$background: imageBackground,
|
|
62
70
|
src: `https://sub60.tobit.com/l/${careOfLocationId}?size=128`,
|
|
63
71
|
alt: "care-of"
|
|
64
72
|
}));
|
package/lib/esm/components/list/list-item/list-item-head/list-item-image/ListItemImage.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemImage.js","names":["MediaType","openMedia","React","useCallback","useState","StyledCareOfImage","StyledListImageWrapper","StyledListImageWrapperImage","StyledListItemHeadImage","StyledListItemHeadImageWrapper","ListItemImage","_ref","careOfLocationId","imageBackground","images","shouldHideBackground","shouldShowRoundImage","shouldOpenImageOnClick","hasLoadedImage","setHasLoadedImage","handleImageLoaded","handleImageClick","event","preventDefault","stopPropagation","items","map","image","url","mediaType","IMAGE","startIndex","createElement","onClick","src","$
|
|
1
|
+
{"version":3,"file":"ListItemImage.js","names":["MediaType","openMedia","React","useCallback","useState","StyledCareOfImage","StyledListImageWrapper","StyledListImageWrapperImage","StyledListItemHeadImage","StyledListItemHeadImageWrapper","ListItemImage","_ref","careOfLocationId","imageBackground","images","shouldHideBackground","shouldShowRoundImage","shouldOpenImageOnClick","hasLoadedImage","setHasLoadedImage","handleImageLoaded","handleImageClick","event","preventDefault","stopPropagation","items","map","image","url","mediaType","IMAGE","startIndex","createElement","onClick","src","$shouldHideBackground","$background","$isSmall","$isSecondImage","alt","$isHidden","onLoad","$shouldShowRoundImage","displayName"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-image/ListItemImage.tsx"],"sourcesContent":["import { MediaType, openMedia, OpenMediaItem } from 'chayns-api';\nimport React, { CSSProperties, MouseEventHandler, useCallback, useState } from 'react';\nimport {\n StyledCareOfImage,\n StyledListImageWrapper,\n StyledListImageWrapperImage,\n StyledListItemHeadImage,\n StyledListItemHeadImageWrapper,\n} from './ListItemImage.styles';\n\ntype ListItemImageProps = {\n careOfLocationId?: number;\n imageBackground?: CSSProperties['background'];\n images: string[];\n shouldHideBackground: boolean;\n shouldShowRoundImage: boolean;\n shouldOpenImageOnClick: boolean;\n};\n\nconst ListItemImage: React.FC<ListItemImageProps> = ({\n careOfLocationId,\n imageBackground,\n images,\n shouldHideBackground,\n shouldShowRoundImage,\n shouldOpenImageOnClick,\n}) => {\n const [hasLoadedImage, setHasLoadedImage] = useState(false);\n const handleImageLoaded = useCallback(() => {\n setHasLoadedImage(true);\n }, []);\n\n const handleImageClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n (event) => {\n if (!shouldOpenImageOnClick) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n\n const items: OpenMediaItem[] = images.map((image) => ({\n url: image,\n mediaType: MediaType.IMAGE,\n }));\n\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n void openMedia({ items, startIndex: 0 });\n },\n [images, shouldOpenImageOnClick],\n );\n\n if (images && images[0] && images[1]) {\n return (\n <StyledListImageWrapper onClick={handleImageClick}>\n <StyledListImageWrapperImage\n src={images[0]}\n $shouldHideBackground={shouldHideBackground}\n $background={imageBackground}\n $isSmall={!!careOfLocationId}\n />\n <StyledListImageWrapperImage\n src={images[1]}\n $isSecondImage\n $shouldHideBackground={shouldHideBackground}\n $background={imageBackground}\n $isSmall={!!careOfLocationId}\n />\n {careOfLocationId && (\n <StyledCareOfImage\n $shouldHideBackground={shouldHideBackground}\n $background={imageBackground}\n src={`https://sub60.tobit.com/l/${careOfLocationId}?size=128`}\n alt=\"care-of\"\n />\n )}\n </StyledListImageWrapper>\n );\n }\n\n if (images && images[0]) {\n return (\n <StyledListItemHeadImageWrapper onClick={handleImageClick}>\n <StyledListItemHeadImage\n $isHidden={!hasLoadedImage}\n onLoad={handleImageLoaded}\n $shouldShowRoundImage={shouldShowRoundImage}\n $background={imageBackground}\n $shouldHideBackground={shouldHideBackground}\n $isSmall={!!careOfLocationId}\n src={images[0]}\n />\n {careOfLocationId && (\n <StyledCareOfImage\n $shouldHideBackground={shouldHideBackground}\n $background={imageBackground}\n src={`https://sub60.tobit.com/l/${careOfLocationId}?size=128`}\n alt=\"care-of\"\n />\n )}\n </StyledListItemHeadImageWrapper>\n );\n }\n\n return null;\n};\n\nListItemImage.displayName = 'ListItemImage';\n\nexport default ListItemImage;\n"],"mappings":"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","ignoreList":[]}
|
package/lib/esm/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.js
CHANGED
|
@@ -78,6 +78,24 @@ export const StyledListImageWrapperImage = styled.img`
|
|
|
78
78
|
left: 0;
|
|
79
79
|
`;
|
|
80
80
|
}}
|
|
81
|
+
|
|
82
|
+
transition:
|
|
83
|
+
opacity 0.4s ease,
|
|
84
|
+
background-color 0.3s ease,
|
|
85
|
+
border-radius 0.3s ease,
|
|
86
|
+
box-shadow 0.3s ease;
|
|
87
|
+
|
|
88
|
+
${_ref7 => {
|
|
89
|
+
let {
|
|
90
|
+
$shouldHideBackground,
|
|
91
|
+
$background,
|
|
92
|
+
theme
|
|
93
|
+
} = _ref7;
|
|
94
|
+
return !$shouldHideBackground && css`
|
|
95
|
+
background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};
|
|
96
|
+
box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;
|
|
97
|
+
`;
|
|
98
|
+
}}
|
|
81
99
|
`;
|
|
82
100
|
export const StyledCareOfImage = styled.img`
|
|
83
101
|
position: absolute;
|
|
@@ -85,5 +103,23 @@ export const StyledCareOfImage = styled.img`
|
|
|
85
103
|
right: 0;
|
|
86
104
|
aspect-ratio: 1;
|
|
87
105
|
height: 20px;
|
|
106
|
+
|
|
107
|
+
transition:
|
|
108
|
+
opacity 0.4s ease,
|
|
109
|
+
background-color 0.3s ease,
|
|
110
|
+
border-radius 0.3s ease,
|
|
111
|
+
box-shadow 0.3s ease;
|
|
112
|
+
|
|
113
|
+
${_ref8 => {
|
|
114
|
+
let {
|
|
115
|
+
$shouldHideBackground,
|
|
116
|
+
$background,
|
|
117
|
+
theme
|
|
118
|
+
} = _ref8;
|
|
119
|
+
return !$shouldHideBackground && css`
|
|
120
|
+
background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};
|
|
121
|
+
box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;
|
|
122
|
+
`;
|
|
123
|
+
}}
|
|
88
124
|
`;
|
|
89
125
|
//# sourceMappingURL=ListItemImage.styles.js.map
|
package/lib/esm/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemImage.styles.js","names":["styled","css","StyledListItemHeadImageWrapper","div","StyledListItemHeadImage","img","_ref","$isSmall","_ref2","$isHidden","_ref3","$shouldShowRoundImage","undefined","_ref4","$shouldHideBackground","$background","theme","StyledListImageWrapper","StyledListImageWrapperImage","_ref5","_ref6","$isSecondImage","StyledCareOfImage"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../../../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledListItemHeadImageWrapper = styled.div`\n flex: 0 0 auto;\n height: 40px;\n overflow: hidden;\n position: relative;\n width: 40px;\n`;\n\ntype StyledListItemHeadImageProps = WithTheme<{\n $isHidden: boolean;\n $shouldShowRoundImage?: boolean;\n $background?: CSSProperties['background'];\n $shouldHideBackground?: boolean;\n $isSmall: boolean;\n}>;\n\nexport const StyledListItemHeadImage = styled.img<StyledListItemHeadImageProps>`\n height: ${({ $isSmall }) => ($isSmall ? '34px' : '40px')};\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n aspect-ratio: 1;\n\n border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : undefined)};\n\n transition:\n opacity 0.4s ease,\n background-color 0.3s ease,\n border-radius 0.3s ease,\n box-shadow 0.3s ease;\n\n ${({ $shouldHideBackground, $background, theme }: StyledListItemHeadImageProps) =>\n !$shouldHideBackground &&\n css`\n background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n `}\n`;\n\nexport const StyledListImageWrapper = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n width: 40px;\n height: 40px;\n`;\n\nexport type StyledListImageWrapperImageProps = {\n $isSecondImage?: boolean;\n $isSmall: boolean;\n
|
|
1
|
+
{"version":3,"file":"ListItemImage.styles.js","names":["styled","css","StyledListItemHeadImageWrapper","div","StyledListItemHeadImage","img","_ref","$isSmall","_ref2","$isHidden","_ref3","$shouldShowRoundImage","undefined","_ref4","$shouldHideBackground","$background","theme","StyledListImageWrapper","StyledListImageWrapperImage","_ref5","_ref6","$isSecondImage","_ref7","StyledCareOfImage","_ref8"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../../../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledListItemHeadImageWrapper = styled.div`\n flex: 0 0 auto;\n height: 40px;\n overflow: hidden;\n position: relative;\n width: 40px;\n`;\n\ntype StyledListItemHeadImageProps = WithTheme<{\n $isHidden: boolean;\n $shouldShowRoundImage?: boolean;\n $background?: CSSProperties['background'];\n $shouldHideBackground?: boolean;\n $isSmall: boolean;\n}>;\n\nexport const StyledListItemHeadImage = styled.img<StyledListItemHeadImageProps>`\n height: ${({ $isSmall }) => ($isSmall ? '34px' : '40px')};\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n aspect-ratio: 1;\n\n border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : undefined)};\n\n transition:\n opacity 0.4s ease,\n background-color 0.3s ease,\n border-radius 0.3s ease,\n box-shadow 0.3s ease;\n\n ${({ $shouldHideBackground, $background, theme }: StyledListItemHeadImageProps) =>\n !$shouldHideBackground &&\n css`\n background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n `}\n`;\n\nexport const StyledListImageWrapper = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n width: 40px;\n height: 40px;\n`;\n\nexport type StyledListImageWrapperImageProps = WithTheme<{\n $isSecondImage?: boolean;\n $isSmall: boolean;\n $shouldHideBackground?: boolean;\n $background?: CSSProperties['background'];\n}>;\n\nexport const StyledListImageWrapperImage = styled.img<StyledListImageWrapperImageProps>`\n border-radius: 100px;\n height: ${({ $isSmall }) => ($isSmall ? '65%' : '80%')};\n aspect-ratio: 1;\n position: absolute;\n\n ${({ $isSecondImage, $isSmall }) =>\n $isSecondImage\n ? css`\n bottom: ${$isSmall ? '6px' : 0};\n right: ${$isSmall ? '6px' : 0};\n `\n : css`\n top: 0;\n left: 0;\n `}\n\n transition:\n opacity 0.4s ease,\n background-color 0.3s ease,\n border-radius 0.3s ease,\n box-shadow 0.3s ease;\n\n ${({ $shouldHideBackground, $background, theme }: StyledListImageWrapperImageProps) =>\n !$shouldHideBackground &&\n css`\n background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n `}\n`;\n\ntype StyledCareOfImageProps = WithTheme<{\n $shouldHideBackground?: boolean;\n $background?: CSSProperties['background'];\n}>;\n\nexport const StyledCareOfImage = styled.img<StyledCareOfImageProps>`\n position: absolute;\n bottom: 0;\n right: 0;\n aspect-ratio: 1;\n height: 20px;\n\n transition:\n opacity 0.4s ease,\n background-color 0.3s ease,\n border-radius 0.3s ease,\n box-shadow 0.3s ease;\n\n ${({ $shouldHideBackground, $background, theme }: StyledCareOfImageProps) =>\n !$shouldHideBackground &&\n css`\n background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n `}\n`;\n"],"mappings":"AACA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,OAAO,MAAMC,8BAA8B,GAAGF,MAAM,CAACG,GAAG;AACxD;AACA;AACA;AACA;AACA;AACA,CAAC;AAUD,OAAO,MAAMC,uBAAuB,GAAGJ,MAAM,CAACK,GAAiC;AAC/E,cAAcC,IAAA;EAAA,IAAC;IAAEC;EAAS,CAAC,GAAAD,IAAA;EAAA,OAAMC,QAAQ,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC;AAC5D;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OAAMC,SAAS,GAAG,CAAC,GAAG,CAAC;AAAA,CAAC;AACrD;AACA;AACA,qBAAqBC,KAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,KAAA;EAAA,OAAMC,qBAAqB,GAAG,KAAK,GAAGC,SAAS;AAAA,CAAC;AAC/F;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,qBAAqB;IAAEC,WAAW;IAAEC;EAAoC,CAAC,GAAAH,KAAA;EAAA,OAC1E,CAACC,qBAAqB,IACtBb,GAAG;AACX,0BAA0Bc,WAAW,IAAI,QAAQC,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACrF,yCAAyCA,KAAK,CAAC,SAAS,CAAC;AACzD,SAAS;AAAA;AACT,CAAC;AAED,OAAO,MAAMC,sBAAsB,GAAGjB,MAAM,CAACG,GAAG;AAChD;AACA;AACA;AACA;AACA;AACA,CAAC;AASD,OAAO,MAAMe,2BAA2B,GAAGlB,MAAM,CAACK,GAAqC;AACvF;AACA,cAAcc,KAAA;EAAA,IAAC;IAAEZ;EAAS,CAAC,GAAAY,KAAA;EAAA,OAAMZ,QAAQ,GAAG,KAAK,GAAG,KAAK;AAAA,CAAC;AAC1D;AACA;AACA;AACA,MAAMa,KAAA;EAAA,IAAC;IAAEC,cAAc;IAAEd;EAAS,CAAC,GAAAa,KAAA;EAAA,OAC3BC,cAAc,GACRpB,GAAG;AACjB,4BAA4BM,QAAQ,GAAG,KAAK,GAAG,CAAC;AAChD,2BAA2BA,QAAQ,GAAG,KAAK,GAAG,CAAC;AAC/C,eAAe,GACDN,GAAG;AACjB;AACA;AACA,eAAe;AAAA;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMqB,KAAA;EAAA,IAAC;IAAER,qBAAqB;IAAEC,WAAW;IAAEC;EAAwC,CAAC,GAAAM,KAAA;EAAA,OAC9E,CAACR,qBAAqB,IACtBb,GAAG;AACX,0BAA0Bc,WAAW,IAAI,QAAQC,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACrF,yCAAyCA,KAAK,CAAC,SAAS,CAAC;AACzD,SAAS;AAAA;AACT,CAAC;AAOD,OAAO,MAAMO,iBAAiB,GAAGvB,MAAM,CAACK,GAA2B;AACnE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMmB,KAAA;EAAA,IAAC;IAAEV,qBAAqB;IAAEC,WAAW;IAAEC;EAA8B,CAAC,GAAAQ,KAAA;EAAA,OACpE,CAACV,qBAAqB,IACtBb,GAAG;AACX,0BAA0Bc,WAAW,IAAI,QAAQC,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACrF,yCAAyCA,KAAK,CAAC,SAAS,CAAC;AACzD,SAAS;AAAA;AACT,CAAC","ignoreList":[]}
|
package/lib/types/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.d.ts
CHANGED
|
@@ -10,10 +10,16 @@ type StyledListItemHeadImageProps = WithTheme<{
|
|
|
10
10
|
}>;
|
|
11
11
|
export declare const StyledListItemHeadImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, StyledListItemHeadImageProps>> & string;
|
|
12
12
|
export declare const StyledListImageWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
13
|
-
export type StyledListImageWrapperImageProps = {
|
|
13
|
+
export type StyledListImageWrapperImageProps = WithTheme<{
|
|
14
14
|
$isSecondImage?: boolean;
|
|
15
15
|
$isSmall: boolean;
|
|
16
|
-
|
|
16
|
+
$shouldHideBackground?: boolean;
|
|
17
|
+
$background?: CSSProperties['background'];
|
|
18
|
+
}>;
|
|
17
19
|
export declare const StyledListImageWrapperImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, StyledListImageWrapperImageProps>> & string;
|
|
18
|
-
|
|
20
|
+
type StyledCareOfImageProps = WithTheme<{
|
|
21
|
+
$shouldHideBackground?: boolean;
|
|
22
|
+
$background?: CSSProperties['background'];
|
|
23
|
+
}>;
|
|
24
|
+
export declare const StyledCareOfImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, StyledCareOfImageProps>> & string;
|
|
19
25
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.1021",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -88,5 +88,5 @@
|
|
|
88
88
|
"publishConfig": {
|
|
89
89
|
"access": "public"
|
|
90
90
|
},
|
|
91
|
-
"gitHead": "
|
|
91
|
+
"gitHead": "fa5aa6a6238fe240d2650e48ffce208c50863f53"
|
|
92
92
|
}
|