@starlightcms/react-sdk 2.0.0 → 2.2.0
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/dist/cjs/VisualContent/blocks/Image/index.d.ts.map +1 -1
- package/dist/cjs/VisualContent/blocks/Image/index.js +11 -8
- package/dist/cjs/VisualContent/blocks/Image/index.js.map +1 -1
- package/dist/cjs/VisualContent/blocks/Image/styles.d.ts +1 -0
- package/dist/cjs/VisualContent/blocks/Image/styles.d.ts.map +1 -1
- package/dist/cjs/VisualContent/blocks/Image/styles.js +11 -1
- package/dist/cjs/VisualContent/blocks/Image/styles.js.map +1 -1
- package/dist/esm/VisualContent/blocks/Image/index.d.ts.map +1 -1
- package/dist/esm/VisualContent/blocks/Image/index.js +12 -9
- package/dist/esm/VisualContent/blocks/Image/index.js.map +1 -1
- package/dist/esm/VisualContent/blocks/Image/styles.d.ts +1 -0
- package/dist/esm/VisualContent/blocks/Image/styles.d.ts.map +1 -1
- package/dist/esm/VisualContent/blocks/Image/styles.js +11 -1
- package/dist/esm/VisualContent/blocks/Image/styles.js.map +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Image/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAClE,OAAc,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Image/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAClE,OAAc,EAAE,EAAE,EAAgC,MAAM,OAAO,CAAA;AAI/D;;GAEG;AACH,oBAAY,YAAY,GAAG;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC,GAAG,YAAY,CA8DzD,CAAA;AAED,eAAe,KAAK,CAAA"}
|
|
@@ -44,23 +44,26 @@ const styles_2 = require("../../styles");
|
|
|
44
44
|
* @group VisualContent Renderers
|
|
45
45
|
*/
|
|
46
46
|
const Image = ({ data, sizes = '(max-width: 480px) 90vw, 70vw', }) => {
|
|
47
|
-
const { url,
|
|
48
|
-
const [target, setTarget] = (0, react_1.useState)('_self');
|
|
49
|
-
const [srcSet, setSrcSet] = (0, react_1.useState)('');
|
|
47
|
+
const { url, alt = '', files, caption, width, href, responsive } = data;
|
|
50
48
|
const widthType = ['auto', 'justify', 'max'].includes(width) ? width : 'fixed';
|
|
49
|
+
const [target, setTarget] = (0, react_1.useState)('_self');
|
|
50
|
+
const [originalWidth, setOriginalWidth] = (0, react_1.useState)(undefined);
|
|
51
|
+
const srcSet = (0, react_1.useMemo)(() => {
|
|
52
|
+
return data.files.map((file) => `${file.url} ${file.width}w`).join(', ');
|
|
53
|
+
}, [data]);
|
|
51
54
|
(0, react_1.useEffect)(() => {
|
|
52
55
|
if (!href)
|
|
53
56
|
return;
|
|
54
57
|
setTarget(new URL(href).origin === window.location.origin ? '_self' : '_blank');
|
|
55
58
|
}, [href]);
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
59
|
+
(0, react_1.useEffect)(() => {
|
|
60
|
+
const optimizedFile = files.find((f) => f.variation === 'optimized');
|
|
61
|
+
setOriginalWidth(optimizedFile ? optimizedFile.width.toString() + 'px' : undefined);
|
|
62
|
+
}, []);
|
|
60
63
|
return (react_1.default.createElement(styles_2.BlockWrapper, { className: `sl-content-block sl-image sl-width-${widthType}` },
|
|
61
64
|
react_1.default.createElement(styles_1.ImageWrapper, null,
|
|
62
65
|
href ? (react_1.default.createElement("a", { href: href, target: target },
|
|
63
|
-
react_1.default.createElement(styles_1.SelectedImage, { width: width, src: url, alt: alt, srcSet: srcSet, sizes:
|
|
66
|
+
react_1.default.createElement(styles_1.SelectedImage, { width: width, src: url, alt: alt, srcSet: srcSet, sizes: responsive ? sizes : undefined, originalWidth: data.responsive ? originalWidth : undefined }))) : (react_1.default.createElement(styles_1.SelectedImage, { width: width, src: url, alt: alt, srcSet: srcSet, sizes: responsive ? sizes : undefined, originalWidth: data.responsive ? originalWidth : undefined })),
|
|
64
67
|
caption && (react_1.default.createElement("figcaption", { dangerouslySetInnerHTML: { __html: caption } })))));
|
|
65
68
|
};
|
|
66
69
|
exports.default = Image;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Image/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AACA,+
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Image/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ImageBlock, VisualDataBlock } from '@starlightcms/js-sdk'\nimport React, { FC, useEffect, useMemo, useState } from 'react'\nimport { ImageWrapper, SelectedImage } from './styles'\nimport { BlockWrapper } from '../../styles'\n\n/**\n * Type used by {@link ImageComponent} to accept a `sizes` prop.\n */\nexport type ImageOptions = {\n sizes?: string\n}\n\n/**\n * VisualContent renderer component that renders `image` type blocks\n * as a responsive image along with its caption (if defined). Optionally\n * wraps the image in an anchor if a link is defined in the content.\n *\n * See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}\n * to learn how to customize block renderer components like this one.\n *\n * This component also supports an optional `sizes` prop to provide better image\n * responsiveness, see {@doclink components/VisualContent/#responsive-images | the guide page on responsive images}\n * to learn more.\n *\n * @param props VisualDataBlock object. See {@link ImageBlock} to learn the\n * type of data this component receives. Also accepts\n * an optional `sizes` string prop.\n * @group VisualContent Renderers\n */\nconst Image: FC<VisualDataBlock<ImageBlock> & ImageOptions> = ({\n data,\n sizes = '(max-width: 480px) 90vw, 70vw',\n}) => {\n const { url, alt = '', files, caption, width, href, responsive } = data\n\n const widthType = ['auto', 'justify', 'max'].includes(width) ? width : 'fixed'\n\n const [target, setTarget] = useState('_self')\n const [originalWidth, setOriginalWidth] = useState<string | undefined>(\n undefined\n )\n\n const srcSet = useMemo(() => {\n return data.files.map((file) => `${file.url} ${file.width}w`).join(', ')\n }, [data])\n\n useEffect(() => {\n if (!href) return\n\n setTarget(\n new URL(href).origin === window.location.origin ? '_self' : '_blank'\n )\n }, [href])\n\n useEffect(() => {\n const optimizedFile = files.find((f) => f.variation === 'optimized')\n setOriginalWidth(\n optimizedFile ? optimizedFile.width.toString() + 'px' : undefined\n )\n }, [])\n\n return (\n <BlockWrapper className={`sl-content-block sl-image sl-width-${widthType}`}>\n <ImageWrapper>\n {href ? (\n <a href={href} target={target}>\n <SelectedImage\n width={width}\n src={url}\n alt={alt}\n srcSet={srcSet}\n sizes={responsive ? sizes : undefined}\n originalWidth={data.responsive ? originalWidth : undefined}\n />\n </a>\n ) : (\n <SelectedImage\n width={width}\n src={url}\n alt={alt}\n srcSet={srcSet}\n sizes={responsive ? sizes : undefined}\n originalWidth={data.responsive ? originalWidth : undefined}\n />\n )}\n {caption && (\n <figcaption dangerouslySetInnerHTML={{ __html: caption }} />\n )}\n </ImageWrapper>\n </BlockWrapper>\n )\n}\n\nexport default Image\n"]}
|
|
@@ -9,6 +9,7 @@ export declare const ImageWrapper: import("@emotion/styled").StyledComponent<{
|
|
|
9
9
|
}, {}, {}>;
|
|
10
10
|
declare type ImageProps = {
|
|
11
11
|
width: string;
|
|
12
|
+
originalWidth?: string | undefined;
|
|
12
13
|
};
|
|
13
14
|
export declare const SelectedImage: import("@emotion/styled").StyledComponent<{
|
|
14
15
|
theme?: import("@emotion/react").Theme | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Image/styles.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,YAAY;;;;;;;UAExB,CAAA;AAED,aAAK,UAAU,GAAG;IAChB,KAAK,EAAE,MAAM,CAAA;
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Image/styles.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,YAAY;;;;;;;UAExB,CAAA;AAED,aAAK,UAAU,GAAG;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CACnC,CAAA;AAED,eAAO,MAAM,aAAa;;;6HA4BzB,CAAA"}
|
|
@@ -14,7 +14,17 @@ exports.SelectedImage = styled_1.default.img `
|
|
|
14
14
|
margin: auto;
|
|
15
15
|
object-fit: cover;
|
|
16
16
|
|
|
17
|
-
max-width:
|
|
17
|
+
max-width: ${({ width, originalWidth }) => {
|
|
18
|
+
if (originalWidth && width === 'auto')
|
|
19
|
+
return originalWidth;
|
|
20
|
+
switch (width) {
|
|
21
|
+
case 'auto':
|
|
22
|
+
return '100%';
|
|
23
|
+
case 'justify':
|
|
24
|
+
case 'max':
|
|
25
|
+
return 'initial';
|
|
26
|
+
}
|
|
27
|
+
}};
|
|
18
28
|
|
|
19
29
|
width: ${({ width }) => {
|
|
20
30
|
switch (width) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Image/styles.ts"],"names":[],"mappings":";;;;;;AAAA,yCAA4C;AAC5C,6DAAoC;AAEvB,QAAA,YAAY,GAAG,IAAA,gBAAM,EAAC,sBAAa,CAAC,CAAA;;CAEhD,CAAA;
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Image/styles.ts"],"names":[],"mappings":";;;;;;AAAA,yCAA4C;AAC5C,6DAAoC;AAEvB,QAAA,YAAY,GAAG,IAAA,gBAAM,EAAC,sBAAa,CAAC,CAAA;;CAEhD,CAAA;AAOY,QAAA,aAAa,GAAG,gBAAM,CAAC,GAAG,CAAY;;;;;eAKpC,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE;IACxC,IAAI,aAAa,IAAI,KAAK,KAAK,MAAM;QAAE,OAAO,aAAa,CAAA;IAE3D,QAAQ,KAAK,EAAE;QACb,KAAK,MAAM;YACT,OAAO,MAAM,CAAA;QACf,KAAK,SAAS,CAAC;QACf,KAAK,KAAK;YACR,OAAO,SAAS,CAAA;KACnB;AACH,CAAC;;WAEQ,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACrB,QAAQ,KAAK,EAAE;QACb,KAAK,MAAM;YACT,OAAO,SAAS,CAAA;QAClB,KAAK,SAAS,CAAC;QACf,KAAK,KAAK;YACR,OAAO,MAAM,CAAA;QACf;YACE,OAAO,KAAK,CAAA;KACf;AACH,CAAC;CACF,CAAA","sourcesContent":["import { FigureWrapper } from '../../styles'\nimport styled from '@emotion/styled'\n\nexport const ImageWrapper = styled(FigureWrapper)`\n margin: 1em auto;\n`\n\ntype ImageProps = {\n width: string\n originalWidth?: string | undefined\n}\n\nexport const SelectedImage = styled.img<ImageProps>`\n display: block;\n margin: auto;\n object-fit: cover;\n\n max-width: ${({ width, originalWidth }) => {\n if (originalWidth && width === 'auto') return originalWidth\n\n switch (width) {\n case 'auto':\n return '100%'\n case 'justify':\n case 'max':\n return 'initial'\n }\n }};\n\n width: ${({ width }) => {\n switch (width) {\n case 'auto':\n return 'initial'\n case 'justify':\n case 'max':\n return '100%'\n default:\n return width\n }\n }};\n`\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Image/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAClE,OAAc,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Image/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAClE,OAAc,EAAE,EAAE,EAAgC,MAAM,OAAO,CAAA;AAI/D;;GAEG;AACH,oBAAY,YAAY,GAAG;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC,GAAG,YAAY,CA8DzD,CAAA;AAED,eAAe,KAAK,CAAA"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useEffect, useState } from 'react';
|
|
1
|
+
import React, { useEffect, useMemo, useState } from 'react';
|
|
2
2
|
import { ImageWrapper, SelectedImage } from './styles';
|
|
3
3
|
import { BlockWrapper } from '../../styles';
|
|
4
4
|
/**
|
|
@@ -19,23 +19,26 @@ import { BlockWrapper } from '../../styles';
|
|
|
19
19
|
* @group VisualContent Renderers
|
|
20
20
|
*/
|
|
21
21
|
const Image = ({ data, sizes = '(max-width: 480px) 90vw, 70vw', }) => {
|
|
22
|
-
const { url,
|
|
23
|
-
const [target, setTarget] = useState('_self');
|
|
24
|
-
const [srcSet, setSrcSet] = useState('');
|
|
22
|
+
const { url, alt = '', files, caption, width, href, responsive } = data;
|
|
25
23
|
const widthType = ['auto', 'justify', 'max'].includes(width) ? width : 'fixed';
|
|
24
|
+
const [target, setTarget] = useState('_self');
|
|
25
|
+
const [originalWidth, setOriginalWidth] = useState(undefined);
|
|
26
|
+
const srcSet = useMemo(() => {
|
|
27
|
+
return data.files.map((file) => `${file.url} ${file.width}w`).join(', ');
|
|
28
|
+
}, [data]);
|
|
26
29
|
useEffect(() => {
|
|
27
30
|
if (!href)
|
|
28
31
|
return;
|
|
29
32
|
setTarget(new URL(href).origin === window.location.origin ? '_self' : '_blank');
|
|
30
33
|
}, [href]);
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
34
|
+
useEffect(() => {
|
|
35
|
+
const optimizedFile = files.find((f) => f.variation === 'optimized');
|
|
36
|
+
setOriginalWidth(optimizedFile ? optimizedFile.width.toString() + 'px' : undefined);
|
|
37
|
+
}, []);
|
|
35
38
|
return (React.createElement(BlockWrapper, { className: `sl-content-block sl-image sl-width-${widthType}` },
|
|
36
39
|
React.createElement(ImageWrapper, null,
|
|
37
40
|
href ? (React.createElement("a", { href: href, target: target },
|
|
38
|
-
React.createElement(SelectedImage, { width: width, src: url, alt: alt, srcSet: srcSet, sizes:
|
|
41
|
+
React.createElement(SelectedImage, { width: width, src: url, alt: alt, srcSet: srcSet, sizes: responsive ? sizes : undefined, originalWidth: data.responsive ? originalWidth : undefined }))) : (React.createElement(SelectedImage, { width: width, src: url, alt: alt, srcSet: srcSet, sizes: responsive ? sizes : undefined, originalWidth: data.responsive ? originalWidth : undefined })),
|
|
39
42
|
caption && (React.createElement("figcaption", { dangerouslySetInnerHTML: { __html: caption } })))));
|
|
40
43
|
};
|
|
41
44
|
export default Image;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Image/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAM,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Image/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ImageBlock, VisualDataBlock } from '@starlightcms/js-sdk'\nimport React, { FC, useEffect, useMemo, useState } from 'react'\nimport { ImageWrapper, SelectedImage } from './styles'\nimport { BlockWrapper } from '../../styles'\n\n/**\n * Type used by {@link ImageComponent} to accept a `sizes` prop.\n */\nexport type ImageOptions = {\n sizes?: string\n}\n\n/**\n * VisualContent renderer component that renders `image` type blocks\n * as a responsive image along with its caption (if defined). Optionally\n * wraps the image in an anchor if a link is defined in the content.\n *\n * See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}\n * to learn how to customize block renderer components like this one.\n *\n * This component also supports an optional `sizes` prop to provide better image\n * responsiveness, see {@doclink components/VisualContent/#responsive-images | the guide page on responsive images}\n * to learn more.\n *\n * @param props VisualDataBlock object. See {@link ImageBlock} to learn the\n * type of data this component receives. Also accepts\n * an optional `sizes` string prop.\n * @group VisualContent Renderers\n */\nconst Image: FC<VisualDataBlock<ImageBlock> & ImageOptions> = ({\n data,\n sizes = '(max-width: 480px) 90vw, 70vw',\n}) => {\n const { url, alt = '', files, caption, width, href, responsive } = data\n\n const widthType = ['auto', 'justify', 'max'].includes(width) ? width : 'fixed'\n\n const [target, setTarget] = useState('_self')\n const [originalWidth, setOriginalWidth] = useState<string | undefined>(\n undefined\n )\n\n const srcSet = useMemo(() => {\n return data.files.map((file) => `${file.url} ${file.width}w`).join(', ')\n }, [data])\n\n useEffect(() => {\n if (!href) return\n\n setTarget(\n new URL(href).origin === window.location.origin ? '_self' : '_blank'\n )\n }, [href])\n\n useEffect(() => {\n const optimizedFile = files.find((f) => f.variation === 'optimized')\n setOriginalWidth(\n optimizedFile ? optimizedFile.width.toString() + 'px' : undefined\n )\n }, [])\n\n return (\n <BlockWrapper className={`sl-content-block sl-image sl-width-${widthType}`}>\n <ImageWrapper>\n {href ? (\n <a href={href} target={target}>\n <SelectedImage\n width={width}\n src={url}\n alt={alt}\n srcSet={srcSet}\n sizes={responsive ? sizes : undefined}\n originalWidth={data.responsive ? originalWidth : undefined}\n />\n </a>\n ) : (\n <SelectedImage\n width={width}\n src={url}\n alt={alt}\n srcSet={srcSet}\n sizes={responsive ? sizes : undefined}\n originalWidth={data.responsive ? originalWidth : undefined}\n />\n )}\n {caption && (\n <figcaption dangerouslySetInnerHTML={{ __html: caption }} />\n )}\n </ImageWrapper>\n </BlockWrapper>\n )\n}\n\nexport default Image\n"]}
|
|
@@ -9,6 +9,7 @@ export declare const ImageWrapper: import("@emotion/styled").StyledComponent<{
|
|
|
9
9
|
}, {}, {}>;
|
|
10
10
|
declare type ImageProps = {
|
|
11
11
|
width: string;
|
|
12
|
+
originalWidth?: string | undefined;
|
|
12
13
|
};
|
|
13
14
|
export declare const SelectedImage: import("@emotion/styled").StyledComponent<{
|
|
14
15
|
theme?: import("@emotion/react").Theme | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Image/styles.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,YAAY;;;;;;;UAExB,CAAA;AAED,aAAK,UAAU,GAAG;IAChB,KAAK,EAAE,MAAM,CAAA;
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Image/styles.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,YAAY;;;;;;;UAExB,CAAA;AAED,aAAK,UAAU,GAAG;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CACnC,CAAA;AAED,eAAO,MAAM,aAAa;;;6HA4BzB,CAAA"}
|
|
@@ -8,7 +8,17 @@ export const SelectedImage = styled.img `
|
|
|
8
8
|
margin: auto;
|
|
9
9
|
object-fit: cover;
|
|
10
10
|
|
|
11
|
-
max-width:
|
|
11
|
+
max-width: ${({ width, originalWidth }) => {
|
|
12
|
+
if (originalWidth && width === 'auto')
|
|
13
|
+
return originalWidth;
|
|
14
|
+
switch (width) {
|
|
15
|
+
case 'auto':
|
|
16
|
+
return '100%';
|
|
17
|
+
case 'justify':
|
|
18
|
+
case 'max':
|
|
19
|
+
return 'initial';
|
|
20
|
+
}
|
|
21
|
+
}};
|
|
12
22
|
|
|
13
23
|
width: ${({ width }) => {
|
|
14
24
|
switch (width) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Image/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,MAAM,MAAM,iBAAiB,CAAA;AAEpC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA;;CAEhD,CAAA;
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Image/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,MAAM,MAAM,iBAAiB,CAAA;AAEpC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA;;CAEhD,CAAA;AAOD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAY;;;;;eAKpC,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE;IACxC,IAAI,aAAa,IAAI,KAAK,KAAK,MAAM;QAAE,OAAO,aAAa,CAAA;IAE3D,QAAQ,KAAK,EAAE;QACb,KAAK,MAAM;YACT,OAAO,MAAM,CAAA;QACf,KAAK,SAAS,CAAC;QACf,KAAK,KAAK;YACR,OAAO,SAAS,CAAA;KACnB;AACH,CAAC;;WAEQ,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACrB,QAAQ,KAAK,EAAE;QACb,KAAK,MAAM;YACT,OAAO,SAAS,CAAA;QAClB,KAAK,SAAS,CAAC;QACf,KAAK,KAAK;YACR,OAAO,MAAM,CAAA;QACf;YACE,OAAO,KAAK,CAAA;KACf;AACH,CAAC;CACF,CAAA","sourcesContent":["import { FigureWrapper } from '../../styles'\nimport styled from '@emotion/styled'\n\nexport const ImageWrapper = styled(FigureWrapper)`\n margin: 1em auto;\n`\n\ntype ImageProps = {\n width: string\n originalWidth?: string | undefined\n}\n\nexport const SelectedImage = styled.img<ImageProps>`\n display: block;\n margin: auto;\n object-fit: cover;\n\n max-width: ${({ width, originalWidth }) => {\n if (originalWidth && width === 'auto') return originalWidth\n\n switch (width) {\n case 'auto':\n return '100%'\n case 'justify':\n case 'max':\n return 'initial'\n }\n }};\n\n width: ${({ width }) => {\n switch (width) {\n case 'auto':\n return 'initial'\n case 'justify':\n case 'max':\n return '100%'\n default:\n return width\n }\n }};\n`\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@starlightcms/react-sdk",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.2.0",
|
|
4
4
|
"description": "The Starlight SDK for React",
|
|
5
5
|
"workspaces": [
|
|
6
6
|
"website"
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
"dependencies": {
|
|
63
63
|
"@emotion/react": "^11.10.6",
|
|
64
64
|
"@emotion/styled": "^11.10.6",
|
|
65
|
-
"@starlightcms/js-sdk": "^2.0
|
|
65
|
+
"@starlightcms/js-sdk": "^2.1.0"
|
|
66
66
|
},
|
|
67
67
|
"peerDependencies": {
|
|
68
68
|
"react": ">=16.0.0"
|