@chayns-components/core 5.0.0-beta.977 → 5.0.0-beta.979
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 +1 -1
- 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 +3 -9
- 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 +1 -1
- 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 +6 -15
- 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 +1 -1
- package/package.json +2 -2
|
@@ -53,10 +53,10 @@ const ListItemImage = ({
|
|
|
53
53
|
if (images && images[0]) {
|
|
54
54
|
return /*#__PURE__*/_react.default.createElement(_ListItemImage.StyledListItemHeadImageWrapper, {
|
|
55
55
|
onClick: handleImageClick,
|
|
56
|
+
$background: imageBackground,
|
|
56
57
|
$shouldHideBackground: shouldHideBackground,
|
|
57
58
|
$shouldShowRoundImage: shouldShowRoundImage
|
|
58
59
|
}, /*#__PURE__*/_react.default.createElement(_ListItemImage.StyledListItemHeadImage, {
|
|
59
|
-
$background: imageBackground,
|
|
60
60
|
$isHidden: !hasLoadedImage,
|
|
61
61
|
onLoad: handleImageLoaded,
|
|
62
62
|
src: images[0]
|
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","_GridImage","_interopRequireDefault","_ListItemImage","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ListItemImage","imageBackground","images","shouldHideBackground","shouldShowRoundImage","shouldOpenImageOnClick","hasLoadedImage","setHasLoadedImage","useState","handleImageLoaded","useCallback","handleImageClick","event","preventDefault","stopPropagation","items","map","image","url","mediaType","MediaType","IMAGE","openMedia","startIndex","gridImages","createElement","background","size","onClick","StyledListItemHeadImageWrapper","$shouldHideBackground","$shouldShowRoundImage","StyledListItemHeadImage","$
|
|
1
|
+
{"version":3,"file":"ListItemImage.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_GridImage","_interopRequireDefault","_ListItemImage","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ListItemImage","imageBackground","images","shouldHideBackground","shouldShowRoundImage","shouldOpenImageOnClick","hasLoadedImage","setHasLoadedImage","useState","handleImageLoaded","useCallback","handleImageClick","event","preventDefault","stopPropagation","items","map","image","url","mediaType","MediaType","IMAGE","openMedia","startIndex","gridImages","createElement","background","size","onClick","StyledListItemHeadImageWrapper","$background","$shouldHideBackground","$shouldShowRoundImage","StyledListItemHeadImage","$isHidden","onLoad","src","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 GridImage from '../../../../grid-image/GridImage';\nimport { StyledListItemHeadImage, StyledListItemHeadImageWrapper } from './ListItemImage.styles';\n\ntype ListItemImageProps = {\n imageBackground?: CSSProperties['background'];\n images: string[];\n shouldHideBackground: boolean;\n shouldShowRoundImage: boolean;\n shouldOpenImageOnClick: boolean;\n};\n\nconst ListItemImage: React.FC<ListItemImageProps> = ({\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] && images[2]) {\n const gridImages = [images[0], images[1], images[2]];\n\n return (\n <GridImage\n background={imageBackground}\n images={gridImages}\n shouldShowRoundImage={shouldShowRoundImage}\n size={40}\n onClick={handleImageClick}\n />\n );\n }\n\n if (images && images[0]) {\n return (\n <StyledListItemHeadImageWrapper\n onClick={handleImageClick}\n $background={imageBackground}\n $shouldHideBackground={shouldHideBackground}\n $shouldShowRoundImage={shouldShowRoundImage}\n >\n <StyledListItemHeadImage\n $isHidden={!hasLoadedImage}\n onLoad={handleImageLoaded}\n src={images[0]}\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
|
@@ -24,12 +24,10 @@ const StyledListItemHeadImageWrapper = exports.StyledListItemHeadImageWrapper =
|
|
|
24
24
|
${({
|
|
25
25
|
$shouldHideBackground
|
|
26
26
|
}) => !$shouldHideBackground && (0, _styledComponents.css)`
|
|
27
|
-
background
|
|
28
|
-
|
|
27
|
+
background: ${({
|
|
28
|
+
$background,
|
|
29
29
|
theme
|
|
30
|
-
}) => theme['text-rgb']},
|
|
31
|
-
0.1
|
|
32
|
-
);
|
|
30
|
+
}) => $background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};
|
|
33
31
|
box-shadow: 0 0 0 1px
|
|
34
32
|
rgba(${({
|
|
35
33
|
theme
|
|
@@ -38,10 +36,6 @@ const StyledListItemHeadImageWrapper = exports.StyledListItemHeadImageWrapper =
|
|
|
38
36
|
`}
|
|
39
37
|
`;
|
|
40
38
|
const StyledListItemHeadImage = exports.StyledListItemHeadImage = _styledComponents.default.img`
|
|
41
|
-
background: ${({
|
|
42
|
-
$background,
|
|
43
|
-
theme
|
|
44
|
-
}) => $background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};
|
|
45
39
|
height: 100%;
|
|
46
40
|
object-fit: cover;
|
|
47
41
|
opacity: ${({
|
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","$shouldShowRoundImage","undefined","$shouldHideBackground","css","theme","StyledListItemHeadImage","img","$
|
|
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","$shouldShowRoundImage","undefined","$shouldHideBackground","css","$background","theme","StyledListItemHeadImage","img","$isHidden"],"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\ntype StyledListItemHeadImageWrapperProps = WithTheme<{\n $background?: CSSProperties['background'];\n $shouldHideBackground?: boolean;\n $shouldShowRoundImage?: boolean;\n}>;\n\nexport const StyledListItemHeadImageWrapper = styled.div<StyledListItemHeadImageWrapperProps>`\n flex: 0 0 auto;\n height: 40px;\n overflow: hidden;\n transition:\n background-color 0.3s ease,\n border-radius 0.3s ease,\n box-shadow 0.3s ease;\n width: 40px;\n\n border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : undefined)};\n\n ${({ $shouldHideBackground }) =>\n !$shouldHideBackground &&\n css`\n background: ${({ $background, theme }: StyledListItemHeadImageWrapperProps) =>\n $background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledListItemHeadImageWrapperProps) => theme['009-rgb']}, 0.08)\n inset;\n `}\n`;\n\ntype StyledListItemHeadImageProps = WithTheme<{\n $isHidden: boolean;\n}>;\n\nexport const StyledListItemHeadImage = styled.img<StyledListItemHeadImageProps>`\n height: 100%;\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n transition: opacity 0.4s ease;\n width: 100%;\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AASzC,MAAMW,8BAA8B,GAAAC,OAAA,CAAAD,8BAAA,GAAGE,yBAAM,CAACC,GAAwC;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB,CAAC;EAAEC;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,KAAK,GAAGC,SAAU;AAC/F;AACA,MAAM,CAAC;EAAEC;AAAsB,CAAC,KACxB,CAACA,qBAAqB,IACtB,IAAAC,qBAAG;AACX,0BAA0B,CAAC;EAAEC,WAAW;EAAEC;AAA2C,CAAC,KACtED,WAAW,IAAI,QAAQC,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AAC3E;AACA,uBAAuB,CAAC;EAAEA;AAA2C,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC3F;AACA,SAAS;AACT,CAAC;AAMM,MAAMC,uBAAuB,GAAAT,OAAA,CAAAS,uBAAA,GAAGR,yBAAM,CAACS,GAAiC;AAC/E;AACA;AACA,eAAe,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -45,10 +45,10 @@ const ListItemImage = _ref => {
|
|
|
45
45
|
if (images && images[0]) {
|
|
46
46
|
return /*#__PURE__*/React.createElement(StyledListItemHeadImageWrapper, {
|
|
47
47
|
onClick: handleImageClick,
|
|
48
|
+
$background: imageBackground,
|
|
48
49
|
$shouldHideBackground: shouldHideBackground,
|
|
49
50
|
$shouldShowRoundImage: shouldShowRoundImage
|
|
50
51
|
}, /*#__PURE__*/React.createElement(StyledListItemHeadImage, {
|
|
51
|
-
$background: imageBackground,
|
|
52
52
|
$isHidden: !hasLoadedImage,
|
|
53
53
|
onLoad: handleImageLoaded,
|
|
54
54
|
src: images[0]
|
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","GridImage","StyledListItemHeadImage","StyledListItemHeadImageWrapper","ListItemImage","_ref","imageBackground","images","shouldHideBackground","shouldShowRoundImage","shouldOpenImageOnClick","hasLoadedImage","setHasLoadedImage","handleImageLoaded","handleImageClick","event","preventDefault","stopPropagation","items","map","image","url","mediaType","IMAGE","startIndex","gridImages","createElement","background","size","onClick","$
|
|
1
|
+
{"version":3,"file":"ListItemImage.js","names":["MediaType","openMedia","React","useCallback","useState","GridImage","StyledListItemHeadImage","StyledListItemHeadImageWrapper","ListItemImage","_ref","imageBackground","images","shouldHideBackground","shouldShowRoundImage","shouldOpenImageOnClick","hasLoadedImage","setHasLoadedImage","handleImageLoaded","handleImageClick","event","preventDefault","stopPropagation","items","map","image","url","mediaType","IMAGE","startIndex","gridImages","createElement","background","size","onClick","$background","$shouldHideBackground","$shouldShowRoundImage","$isHidden","onLoad","src","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 GridImage from '../../../../grid-image/GridImage';\nimport { StyledListItemHeadImage, StyledListItemHeadImageWrapper } from './ListItemImage.styles';\n\ntype ListItemImageProps = {\n imageBackground?: CSSProperties['background'];\n images: string[];\n shouldHideBackground: boolean;\n shouldShowRoundImage: boolean;\n shouldOpenImageOnClick: boolean;\n};\n\nconst ListItemImage: React.FC<ListItemImageProps> = ({\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] && images[2]) {\n const gridImages = [images[0], images[1], images[2]];\n\n return (\n <GridImage\n background={imageBackground}\n images={gridImages}\n shouldShowRoundImage={shouldShowRoundImage}\n size={40}\n onClick={handleImageClick}\n />\n );\n }\n\n if (images && images[0]) {\n return (\n <StyledListItemHeadImageWrapper\n onClick={handleImageClick}\n $background={imageBackground}\n $shouldHideBackground={shouldHideBackground}\n $shouldShowRoundImage={shouldShowRoundImage}\n >\n <StyledListItemHeadImage\n $isHidden={!hasLoadedImage}\n onLoad={handleImageLoaded}\n src={images[0]}\n />\n </StyledListItemHeadImageWrapper>\n );\n }\n\n return null;\n};\n\nListItemImage.displayName = 'ListItemImage';\n\nexport default ListItemImage;\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,SAAS,QAAuB,YAAY;AAChE,OAAOC,KAAK,IAAsCC,WAAW,EAAEC,QAAQ,QAAQ,OAAO;AACtF,OAAOC,SAAS,MAAM,kCAAkC;AACxD,SAASC,uBAAuB,EAAEC,8BAA8B,QAAQ,wBAAwB;AAUhG,MAAMC,aAA2C,GAAGC,IAAA,IAM9C;EAAA,IAN+C;IACjDC,eAAe;IACfC,MAAM;IACNC,oBAAoB;IACpBC,oBAAoB;IACpBC;EACJ,CAAC,GAAAL,IAAA;EACG,MAAM,CAACM,cAAc,EAAEC,iBAAiB,CAAC,GAAGZ,QAAQ,CAAC,KAAK,CAAC;EAC3D,MAAMa,iBAAiB,GAAGd,WAAW,CAAC,MAAM;IACxCa,iBAAiB,CAAC,IAAI,CAAC;EAC3B,CAAC,EAAE,EAAE,CAAC;EAEN,MAAME,gBAAgB,GAAGf,WAAW,CAC/BgB,KAAK,IAAK;IACP,IAAI,CAACL,sBAAsB,EAAE;MACzB;IACJ;IAEAK,KAAK,CAACC,cAAc,CAAC,CAAC;IACtBD,KAAK,CAACE,eAAe,CAAC,CAAC;IAEvB,MAAMC,KAAsB,GAAGX,MAAM,CAACY,GAAG,CAAEC,KAAK,KAAM;MAClDC,GAAG,EAAED,KAAK;MACVE,SAAS,EAAE1B,SAAS,CAAC2B;IACzB,CAAC,CAAC,CAAC;;IAEH;IACA;IACA,KAAK1B,SAAS,CAAC;MAAEqB,KAAK;MAAEM,UAAU,EAAE;IAAE,CAAC,CAAC;EAC5C,CAAC,EACD,CAACjB,MAAM,EAAEG,sBAAsB,CACnC,CAAC;EAED,IAAIH,MAAM,IAAIA,MAAM,CAAC,CAAC,CAAC,IAAIA,MAAM,CAAC,CAAC,CAAC,IAAIA,MAAM,CAAC,CAAC,CAAC,EAAE;IAC/C,MAAMkB,UAAU,GAAG,CAAClB,MAAM,CAAC,CAAC,CAAC,EAAEA,MAAM,CAAC,CAAC,CAAC,EAAEA,MAAM,CAAC,CAAC,CAAC,CAAC;IAEpD,oBACIT,KAAA,CAAA4B,aAAA,CAACzB,SAAS;MACN0B,UAAU,EAAErB,eAAgB;MAC5BC,MAAM,EAAEkB,UAAW;MACnBhB,oBAAoB,EAAEA,oBAAqB;MAC3CmB,IAAI,EAAE,EAAG;MACTC,OAAO,EAAEf;IAAiB,CAC7B,CAAC;EAEV;EAEA,IAAIP,MAAM,IAAIA,MAAM,CAAC,CAAC,CAAC,EAAE;IACrB,oBACIT,KAAA,CAAA4B,aAAA,CAACvB,8BAA8B;MAC3B0B,OAAO,EAAEf,gBAAiB;MAC1BgB,WAAW,EAAExB,eAAgB;MAC7ByB,qBAAqB,EAAEvB,oBAAqB;MAC5CwB,qBAAqB,EAAEvB;IAAqB,gBAE5CX,KAAA,CAAA4B,aAAA,CAACxB,uBAAuB;MACpB+B,SAAS,EAAE,CAACtB,cAAe;MAC3BuB,MAAM,EAAErB,iBAAkB;MAC1BsB,GAAG,EAAE5B,MAAM,CAAC,CAAC;IAAE,CAClB,CAC2B,CAAC;EAEzC;EAEA,OAAO,IAAI;AACf,CAAC;AAEDH,aAAa,CAACgC,WAAW,GAAG,eAAe;AAE3C,eAAehC,aAAa","ignoreList":[]}
|
package/lib/esm/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.js
CHANGED
|
@@ -21,15 +21,13 @@ export const StyledListItemHeadImageWrapper = styled.div`
|
|
|
21
21
|
$shouldHideBackground
|
|
22
22
|
} = _ref2;
|
|
23
23
|
return !$shouldHideBackground && css`
|
|
24
|
-
background
|
|
25
|
-
${_ref3 => {
|
|
24
|
+
background: ${_ref3 => {
|
|
26
25
|
let {
|
|
26
|
+
$background,
|
|
27
27
|
theme
|
|
28
28
|
} = _ref3;
|
|
29
|
-
return theme['text-rgb']
|
|
30
|
-
}}
|
|
31
|
-
0.1
|
|
32
|
-
);
|
|
29
|
+
return $background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`;
|
|
30
|
+
}};
|
|
33
31
|
box-shadow: 0 0 0 1px
|
|
34
32
|
rgba(${_ref4 => {
|
|
35
33
|
let {
|
|
@@ -42,19 +40,12 @@ export const StyledListItemHeadImageWrapper = styled.div`
|
|
|
42
40
|
}}
|
|
43
41
|
`;
|
|
44
42
|
export const StyledListItemHeadImage = styled.img`
|
|
45
|
-
background: ${_ref5 => {
|
|
46
|
-
let {
|
|
47
|
-
$background,
|
|
48
|
-
theme
|
|
49
|
-
} = _ref5;
|
|
50
|
-
return $background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`;
|
|
51
|
-
}};
|
|
52
43
|
height: 100%;
|
|
53
44
|
object-fit: cover;
|
|
54
|
-
opacity: ${
|
|
45
|
+
opacity: ${_ref5 => {
|
|
55
46
|
let {
|
|
56
47
|
$isHidden
|
|
57
|
-
} =
|
|
48
|
+
} = _ref5;
|
|
58
49
|
return $isHidden ? 0 : 1;
|
|
59
50
|
}};
|
|
60
51
|
transition: opacity 0.4s ease;
|
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","_ref","$shouldShowRoundImage","undefined","_ref2","$shouldHideBackground","_ref3","theme","_ref4","StyledListItemHeadImage","img","_ref5","$
|
|
1
|
+
{"version":3,"file":"ListItemImage.styles.js","names":["styled","css","StyledListItemHeadImageWrapper","div","_ref","$shouldShowRoundImage","undefined","_ref2","$shouldHideBackground","_ref3","$background","theme","_ref4","StyledListItemHeadImage","img","_ref5","$isHidden"],"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\ntype StyledListItemHeadImageWrapperProps = WithTheme<{\n $background?: CSSProperties['background'];\n $shouldHideBackground?: boolean;\n $shouldShowRoundImage?: boolean;\n}>;\n\nexport const StyledListItemHeadImageWrapper = styled.div<StyledListItemHeadImageWrapperProps>`\n flex: 0 0 auto;\n height: 40px;\n overflow: hidden;\n transition:\n background-color 0.3s ease,\n border-radius 0.3s ease,\n box-shadow 0.3s ease;\n width: 40px;\n\n border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : undefined)};\n\n ${({ $shouldHideBackground }) =>\n !$shouldHideBackground &&\n css`\n background: ${({ $background, theme }: StyledListItemHeadImageWrapperProps) =>\n $background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledListItemHeadImageWrapperProps) => theme['009-rgb']}, 0.08)\n inset;\n `}\n`;\n\ntype StyledListItemHeadImageProps = WithTheme<{\n $isHidden: boolean;\n}>;\n\nexport const StyledListItemHeadImage = styled.img<StyledListItemHeadImageProps>`\n height: 100%;\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n transition: opacity 0.4s ease;\n width: 100%;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAS/C,OAAO,MAAMC,8BAA8B,GAAGF,MAAM,CAACG,GAAwC;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqBC,IAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,IAAA;EAAA,OAAMC,qBAAqB,GAAG,KAAK,GAAGC,SAAS;AAAA,CAAC;AAC/F;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,KAAA;EAAA,OACxB,CAACC,qBAAqB,IACtBP,GAAG;AACX,0BAA0BQ,KAAA;IAAA,IAAC;MAAEC,WAAW;MAAEC;IAA2C,CAAC,GAAAF,KAAA;IAAA,OACtEC,WAAW,IAAI,QAAQC,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;EAAA;AAC3E;AACA,uBAAuBC,KAAA;IAAA,IAAC;MAAED;IAA2C,CAAC,GAAAC,KAAA;IAAA,OAAKD,KAAK,CAAC,SAAS,CAAC;EAAA;AAC3F;AACA,SAAS;AAAA;AACT,CAAC;AAMD,OAAO,MAAME,uBAAuB,GAAGb,MAAM,CAACc,GAAiC;AAC/E;AACA;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OAAMC,SAAS,GAAG,CAAC,GAAG,CAAC;AAAA,CAAC;AACrD;AACA;AACA,CAAC","ignoreList":[]}
|
package/lib/types/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.d.ts
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { CSSProperties } from 'react';
|
|
2
2
|
import type { WithTheme } from '../../../../color-scheme-provider/ColorSchemeProvider';
|
|
3
3
|
type StyledListItemHeadImageWrapperProps = WithTheme<{
|
|
4
|
+
$background?: CSSProperties['background'];
|
|
4
5
|
$shouldHideBackground?: boolean;
|
|
5
6
|
$shouldShowRoundImage?: boolean;
|
|
6
7
|
}>;
|
|
7
8
|
export declare const StyledListItemHeadImageWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledListItemHeadImageWrapperProps>> & string;
|
|
8
9
|
type StyledListItemHeadImageProps = WithTheme<{
|
|
9
|
-
$background?: CSSProperties['background'];
|
|
10
10
|
$isHidden: boolean;
|
|
11
11
|
}>;
|
|
12
12
|
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;
|
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.979",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -87,5 +87,5 @@
|
|
|
87
87
|
"publishConfig": {
|
|
88
88
|
"access": "public"
|
|
89
89
|
},
|
|
90
|
-
"gitHead": "
|
|
90
|
+
"gitHead": "cb4126cb04fab626658885fd00806e74cfda2416"
|
|
91
91
|
}
|