reshaped 3.6.3 → 3.7.0-canary.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.
|
@@ -6,13 +6,17 @@ import s from "./Image.module.css";
|
|
|
6
6
|
import getRadiusStyles from "../../styles/radius/index.js";
|
|
7
7
|
import getWidthStyles from "../../styles/width/index.js";
|
|
8
8
|
import getHeightStyles from "../../styles/height/index.js";
|
|
9
|
+
import getAspectRatioStyles from "../../styles/aspectRatio/index.js";
|
|
10
|
+
import getMaxWidthStyles from "../../styles/maxWidth/index.js";
|
|
9
11
|
const Image = (props) => {
|
|
10
|
-
const { src, alt, width, height, onLoad, onError, fallback, displayMode = "cover", borderRadius, className, attributes, imageAttributes: passedImageAttributes, renderImage, } = props;
|
|
12
|
+
const { src, alt, width, maxWidth, height, aspectRatio, onLoad, onError, fallback, displayMode = "cover", borderRadius, className, attributes, imageAttributes: passedImageAttributes, renderImage, } = props;
|
|
11
13
|
const [status, setStatus] = React.useState("loading");
|
|
12
14
|
const radiusStyles = getRadiusStyles(borderRadius);
|
|
13
15
|
const widthStyles = getWidthStyles(width);
|
|
14
16
|
const heightStyles = getHeightStyles(height);
|
|
15
|
-
const
|
|
17
|
+
const maxWidthStyles = getMaxWidthStyles(maxWidth);
|
|
18
|
+
const aspectRatioStyles = getAspectRatioStyles(aspectRatio);
|
|
19
|
+
const baseClassNames = classNames(s.root, radiusStyles?.classNames, widthStyles?.classNames, heightStyles?.classNames, maxWidthStyles?.classNames, displayMode && s[`--display-mode-${displayMode}`], className);
|
|
16
20
|
const imgClassNames = classNames(s.image, baseClassNames);
|
|
17
21
|
const fallbackClassNames = classNames(s.fallback, baseClassNames);
|
|
18
22
|
const isFallback = (status === "error" || !src) && !!fallback;
|
|
@@ -20,6 +24,8 @@ const Image = (props) => {
|
|
|
20
24
|
...attributes?.style,
|
|
21
25
|
...widthStyles?.variables,
|
|
22
26
|
...heightStyles?.variables,
|
|
27
|
+
...maxWidthStyles?.variables,
|
|
28
|
+
...aspectRatioStyles?.variables,
|
|
23
29
|
};
|
|
24
30
|
const handleLoad = (e) => {
|
|
25
31
|
setStatus("success");
|
|
@@ -6,6 +6,8 @@ export type Props = {
|
|
|
6
6
|
alt?: string;
|
|
7
7
|
width?: G.Responsive<string | number>;
|
|
8
8
|
height?: G.Responsive<string | number>;
|
|
9
|
+
maxWidth?: G.Responsive<string | number>;
|
|
10
|
+
aspectRatio?: G.Responsive<number>;
|
|
9
11
|
borderRadius?: Extract<TStyles.Radius, "small" | "medium" | "large">;
|
|
10
12
|
displayMode?: "cover" | "contain";
|
|
11
13
|
onLoad?: (e: React.SyntheticEvent) => void;
|
|
@@ -34,7 +34,7 @@ export const src = {
|
|
|
34
34
|
},
|
|
35
35
|
};
|
|
36
36
|
export const size = {
|
|
37
|
-
name: "width, height",
|
|
37
|
+
name: "width, height, maxWidth, aspectRatio",
|
|
38
38
|
render: () => (<Example>
|
|
39
39
|
<Example.Item title="width: 200px">
|
|
40
40
|
<Image src={imgUrl} width="200px"/>
|
|
@@ -42,6 +42,12 @@ export const size = {
|
|
|
42
42
|
<Example.Item title="height: 200px">
|
|
43
43
|
<Image src={imgUrl} height="200px"/>
|
|
44
44
|
</Example.Item>
|
|
45
|
+
<Example.Item title="maxWidth: 200px">
|
|
46
|
+
<Image src={imgUrl} maxWidth="200px"/>
|
|
47
|
+
</Example.Item>
|
|
48
|
+
<Example.Item title="aspectRatio: 1/1">
|
|
49
|
+
<Image src={imgUrl} aspectRatio={1 / 1} width="300px"/>
|
|
50
|
+
</Example.Item>
|
|
45
51
|
<Example.Item title={["responsive width", "[s] 200px", "[m+] 300px"]}>
|
|
46
52
|
<Image src={imgUrl} width={{ s: "200px", m: "300px" }}/>
|
|
47
53
|
</Example.Item>
|
|
@@ -177,7 +177,6 @@ const View = (props) => {
|
|
|
177
177
|
...insetEndStyles?.variables,
|
|
178
178
|
...alignStyles?.variables,
|
|
179
179
|
...justifyStyles?.variables,
|
|
180
|
-
...aspectRatioStyles?.variables,
|
|
181
180
|
...positionStyles?.variables,
|
|
182
181
|
...textAlignStyles?.variables,
|
|
183
182
|
...(zIndex ? { "--rs-view-z": zIndex } : {}),
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "reshaped",
|
|
3
3
|
"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
|
|
4
|
-
"version": "3.
|
|
4
|
+
"version": "3.7.0-canary.0",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"email": "hello@reshaped.so",
|
|
7
7
|
"homepage": "https://reshaped.so",
|