@xyo-network/react-card 2.64.0-rc.7 → 2.64.1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/browser/components/CardContentEx.cjs +56 -0
- package/dist/{node/components/CardContentEx.mjs.map → browser/components/CardContentEx.cjs.map} +1 -1
- package/dist/browser/components/CardContentEx.d.cts +11 -0
- package/dist/browser/components/CardContentEx.d.cts.map +1 -0
- package/dist/browser/components/CardContentEx.js +5 -4
- package/dist/browser/components/CardContentEx.js.map +1 -1
- package/dist/browser/components/CardEx.cjs +48 -0
- package/dist/{node/components/CardEx.mjs.map → browser/components/CardEx.cjs.map} +1 -1
- package/dist/browser/components/CardEx.d.cts +8 -0
- package/dist/browser/components/CardEx.d.cts.map +1 -0
- package/dist/browser/components/CardEx.js +4 -3
- package/dist/browser/components/CardEx.js.map +1 -1
- package/dist/browser/components/FullWidthCard/FullWidthCard.cjs +93 -0
- package/dist/{node/components/FullWidthCard/FullWidthCard.mjs.map → browser/components/FullWidthCard/FullWidthCard.cjs.map} +1 -1
- package/dist/browser/components/FullWidthCard/FullWidthCard.d.cts +15 -0
- package/dist/browser/components/FullWidthCard/FullWidthCard.d.cts.map +1 -0
- package/dist/browser/components/FullWidthCard/FullWidthCard.js +3 -2
- package/dist/browser/components/FullWidthCard/FullWidthCard.js.map +1 -1
- package/dist/browser/components/FullWidthCard/index.cjs +95 -0
- package/dist/browser/components/FullWidthCard/index.cjs.map +1 -0
- package/dist/browser/components/FullWidthCard/index.d.cts +2 -0
- package/dist/browser/components/FullWidthCard/index.d.cts.map +1 -0
- package/dist/browser/components/FullWidthCard/index.js +71 -1
- package/dist/browser/components/FullWidthCard/index.js.map +1 -1
- package/dist/browser/components/PageCard.cjs +71 -0
- package/dist/browser/components/PageCard.cjs.map +1 -0
- package/dist/browser/components/PageCard.d.cts +10 -0
- package/dist/browser/components/PageCard.d.cts.map +1 -0
- package/dist/browser/components/PageCard.js +33 -8
- package/dist/browser/components/PageCard.js.map +1 -1
- package/dist/browser/components/SimpleCard/SimpleCard.cjs +120 -0
- package/dist/browser/components/SimpleCard/SimpleCard.cjs.map +1 -0
- package/dist/browser/components/SimpleCard/SimpleCard.d.cts +16 -0
- package/dist/browser/components/SimpleCard/SimpleCard.d.cts.map +1 -0
- package/dist/browser/components/SimpleCard/SimpleCard.js +36 -11
- package/dist/browser/components/SimpleCard/SimpleCard.js.map +1 -1
- package/dist/browser/components/SimpleCard/index.cjs +122 -0
- package/dist/browser/components/SimpleCard/index.cjs.map +1 -0
- package/dist/browser/components/SimpleCard/index.d.cts +2 -0
- package/dist/browser/components/SimpleCard/index.d.cts.map +1 -0
- package/dist/browser/components/SimpleCard/index.js +98 -1
- package/dist/browser/components/SimpleCard/index.js.map +1 -1
- package/dist/browser/components/SimpleCardGrid/SimpleCardGrid.cjs +129 -0
- package/dist/browser/components/SimpleCardGrid/SimpleCardGrid.cjs.map +1 -0
- package/dist/browser/components/SimpleCardGrid/SimpleCardGrid.d.cts +8 -0
- package/dist/browser/components/SimpleCardGrid/SimpleCardGrid.d.cts.map +1 -0
- package/dist/browser/components/SimpleCardGrid/SimpleCardGrid.js +102 -4
- package/dist/browser/components/SimpleCardGrid/SimpleCardGrid.js.map +1 -1
- package/dist/browser/components/SimpleCardGrid/index.cjs +131 -0
- package/dist/browser/components/SimpleCardGrid/index.cjs.map +1 -0
- package/dist/browser/components/SimpleCardGrid/index.d.cts +2 -0
- package/dist/browser/components/SimpleCardGrid/index.d.cts.map +1 -0
- package/dist/browser/components/SimpleCardGrid/index.js +107 -1
- package/dist/browser/components/SimpleCardGrid/index.js.map +1 -1
- package/dist/browser/components/index.cjs +248 -0
- package/dist/browser/components/index.cjs.map +1 -0
- package/dist/browser/components/index.d.cts +6 -0
- package/dist/browser/components/index.d.cts.map +1 -0
- package/dist/browser/components/index.js +224 -5
- package/dist/browser/components/index.js.map +1 -1
- package/dist/browser/index.cjs +248 -0
- package/dist/browser/index.cjs.map +1 -0
- package/dist/browser/index.d.cts +2 -0
- package/dist/browser/index.d.cts.map +1 -0
- package/dist/browser/index.js +224 -1
- package/dist/browser/index.js.map +1 -1
- package/dist/browser/types/images.d.cjs +2 -0
- package/dist/docs.json +1998 -0
- package/dist/node/components/CardContentEx.cjs +62 -0
- package/dist/node/components/CardContentEx.cjs.map +1 -0
- package/dist/node/components/CardContentEx.d.cts +11 -0
- package/dist/node/components/CardContentEx.d.cts.map +1 -0
- package/dist/node/components/CardContentEx.js +15 -38
- package/dist/node/components/CardContentEx.js.map +1 -1
- package/dist/node/components/CardEx.cjs +53 -0
- package/dist/node/components/CardEx.cjs.map +1 -0
- package/dist/node/components/CardEx.d.cts +8 -0
- package/dist/node/components/CardEx.d.cts.map +1 -0
- package/dist/node/components/CardEx.js +12 -36
- package/dist/node/components/CardEx.js.map +1 -1
- package/dist/node/components/FullWidthCard/FullWidthCard.cjs +97 -0
- package/dist/node/components/FullWidthCard/FullWidthCard.cjs.map +1 -0
- package/dist/node/components/FullWidthCard/FullWidthCard.d.cts +15 -0
- package/dist/node/components/FullWidthCard/FullWidthCard.d.cts.map +1 -0
- package/dist/node/components/FullWidthCard/FullWidthCard.js +28 -51
- package/dist/node/components/FullWidthCard/FullWidthCard.js.map +1 -1
- package/dist/node/components/FullWidthCard/index.cjs +99 -0
- package/dist/node/components/FullWidthCard/index.cjs.map +1 -0
- package/dist/node/components/FullWidthCard/index.d.cts +2 -0
- package/dist/node/components/FullWidthCard/index.d.cts.map +1 -0
- package/dist/node/components/FullWidthCard/index.js +70 -21
- package/dist/node/components/FullWidthCard/index.js.map +1 -1
- package/dist/node/components/PageCard.cjs +75 -0
- package/dist/node/components/PageCard.cjs.map +1 -0
- package/dist/node/components/PageCard.d.cts +10 -0
- package/dist/node/components/PageCard.d.cts.map +1 -0
- package/dist/node/components/PageCard.js +40 -39
- package/dist/node/components/PageCard.js.map +1 -1
- package/dist/node/components/SimpleCard/SimpleCard.cjs +124 -0
- package/dist/node/components/SimpleCard/SimpleCard.cjs.map +1 -0
- package/dist/node/components/SimpleCard/SimpleCard.d.cts +16 -0
- package/dist/node/components/SimpleCard/SimpleCard.d.cts.map +1 -0
- package/dist/node/components/SimpleCard/SimpleCard.js +51 -50
- package/dist/node/components/SimpleCard/SimpleCard.js.map +1 -1
- package/dist/node/components/SimpleCard/index.cjs +126 -0
- package/dist/node/components/SimpleCard/index.cjs.map +1 -0
- package/dist/node/components/SimpleCard/index.d.cts +2 -0
- package/dist/node/components/SimpleCard/index.d.cts.map +1 -0
- package/dist/node/components/SimpleCard/index.js +97 -21
- package/dist/node/components/SimpleCard/index.js.map +1 -1
- package/dist/node/components/SimpleCardGrid/SimpleCardGrid.cjs +133 -0
- package/dist/node/components/SimpleCardGrid/SimpleCardGrid.cjs.map +1 -0
- package/dist/node/components/SimpleCardGrid/SimpleCardGrid.d.cts +8 -0
- package/dist/node/components/SimpleCardGrid/SimpleCardGrid.d.cts.map +1 -0
- package/dist/node/components/SimpleCardGrid/SimpleCardGrid.js +104 -30
- package/dist/node/components/SimpleCardGrid/SimpleCardGrid.js.map +1 -1
- package/dist/node/components/SimpleCardGrid/index.cjs +135 -0
- package/dist/node/components/SimpleCardGrid/index.cjs.map +1 -0
- package/dist/node/components/SimpleCardGrid/index.d.cts +2 -0
- package/dist/node/components/SimpleCardGrid/index.d.cts.map +1 -0
- package/dist/node/components/SimpleCardGrid/index.js +106 -21
- package/dist/node/components/SimpleCardGrid/index.js.map +1 -1
- package/dist/node/components/index.cjs +259 -0
- package/dist/node/components/index.cjs.map +1 -0
- package/dist/node/components/index.d.cts +6 -0
- package/dist/node/components/index.d.cts.map +1 -0
- package/dist/node/components/index.js +222 -27
- package/dist/node/components/index.js.map +1 -1
- package/dist/node/index.cjs +259 -0
- package/dist/node/index.cjs.map +1 -0
- package/dist/node/index.d.cts +2 -0
- package/dist/node/index.d.cts.map +1 -0
- package/dist/node/index.js +222 -19
- package/dist/node/index.js.map +1 -1
- package/dist/node/types/images.d.cjs +2 -0
- package/dist/node/types/images.d.cjs.map +1 -0
- package/dist/node/types/images.d.js +0 -1
- package/package.json +16 -16
- package/dist/browser/components/CardContentEx.stories.js +0 -51
- package/dist/browser/components/CardContentEx.stories.js.map +0 -1
- package/dist/browser/components/FullWidthCard/FullWidthCard.stories.js +0 -27
- package/dist/browser/components/FullWidthCard/FullWidthCard.stories.js.map +0 -1
- package/dist/browser/components/PageCard.stories.js +0 -54
- package/dist/browser/components/PageCard.stories.js.map +0 -1
- package/dist/browser/components/SimpleCard/SimpleCard.stories.js +0 -76
- package/dist/browser/components/SimpleCard/SimpleCard.stories.js.map +0 -1
- package/dist/browser/components/SimpleCardGrid/SimpleCardGrid.stories.js +0 -68
- package/dist/browser/components/SimpleCardGrid/SimpleCardGrid.stories.js.map +0 -1
- package/dist/node/components/CardContentEx.mjs +0 -34
- package/dist/node/components/CardContentEx.stories.js +0 -77
- package/dist/node/components/CardContentEx.stories.js.map +0 -1
- package/dist/node/components/CardContentEx.stories.mjs +0 -51
- package/dist/node/components/CardContentEx.stories.mjs.map +0 -1
- package/dist/node/components/CardEx.mjs +0 -26
- package/dist/node/components/FullWidthCard/FullWidthCard.mjs +0 -71
- package/dist/node/components/FullWidthCard/FullWidthCard.stories.js +0 -51
- package/dist/node/components/FullWidthCard/FullWidthCard.stories.js.map +0 -1
- package/dist/node/components/FullWidthCard/FullWidthCard.stories.mjs +0 -27
- package/dist/node/components/FullWidthCard/FullWidthCard.stories.mjs.map +0 -1
- package/dist/node/components/FullWidthCard/index.mjs +0 -2
- package/dist/node/components/FullWidthCard/index.mjs.map +0 -1
- package/dist/node/components/PageCard.mjs +0 -25
- package/dist/node/components/PageCard.mjs.map +0 -1
- package/dist/node/components/PageCard.stories.js +0 -80
- package/dist/node/components/PageCard.stories.js.map +0 -1
- package/dist/node/components/PageCard.stories.mjs +0 -54
- package/dist/node/components/PageCard.stories.mjs.map +0 -1
- package/dist/node/components/SimpleCard/SimpleCard.mjs +0 -74
- package/dist/node/components/SimpleCard/SimpleCard.mjs.map +0 -1
- package/dist/node/components/SimpleCard/SimpleCard.stories.js +0 -115
- package/dist/node/components/SimpleCard/SimpleCard.stories.js.map +0 -1
- package/dist/node/components/SimpleCard/SimpleCard.stories.mjs +0 -76
- package/dist/node/components/SimpleCard/SimpleCard.stories.mjs.map +0 -1
- package/dist/node/components/SimpleCard/index.mjs +0 -2
- package/dist/node/components/SimpleCard/index.mjs.map +0 -1
- package/dist/node/components/SimpleCardGrid/SimpleCardGrid.mjs +0 -10
- package/dist/node/components/SimpleCardGrid/SimpleCardGrid.mjs.map +0 -1
- package/dist/node/components/SimpleCardGrid/SimpleCardGrid.stories.js +0 -102
- package/dist/node/components/SimpleCardGrid/SimpleCardGrid.stories.js.map +0 -1
- package/dist/node/components/SimpleCardGrid/SimpleCardGrid.stories.mjs +0 -68
- package/dist/node/components/SimpleCardGrid/SimpleCardGrid.stories.mjs.map +0 -1
- package/dist/node/components/SimpleCardGrid/index.mjs +0 -2
- package/dist/node/components/SimpleCardGrid/index.mjs.map +0 -1
- package/dist/node/components/index.mjs +0 -6
- package/dist/node/components/index.mjs.map +0 -1
- package/dist/node/index.mjs +0 -2
- package/dist/node/index.mjs.map +0 -1
- package/dist/node/types/images.d.mjs +0 -1
- /package/dist/{node/types/images.d.mjs.map → browser/types/images.d.cjs.map} +0 -0
@@ -1,35 +1,37 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
}
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
1
|
+
// src/components/SimpleCard/SimpleCard.tsx
|
2
|
+
import { ArrowForwardRounded as ArrowForwardRoundedIcon } from "@mui/icons-material";
|
3
|
+
import { alpha, CardActions, CardContent, CardMedia, IconButton, Typography, useTheme } from "@mui/material";
|
4
|
+
import { FlexCol, FlexGrowCol } from "@xylabs/react-flexbox";
|
5
|
+
import { useIsMobile } from "@xyo-network/react-shared";
|
6
|
+
import { useState } from "react";
|
7
|
+
import { useNavigate } from "react-router-dom";
|
8
|
+
|
9
|
+
// src/components/CardEx.tsx
|
10
|
+
import { Card } from "@mui/material";
|
11
|
+
import { useGradientStyles } from "@xyo-network/react-shared";
|
12
|
+
import { forwardRef } from "react";
|
13
|
+
import { jsx } from "react/jsx-runtime";
|
14
|
+
var CardExWithRef = forwardRef(({ style, gradient, ...props }, ref) => {
|
15
|
+
const { styles } = useGradientStyles();
|
16
|
+
const gradientStyle = gradient === "border" ? styles.border : gradient === "background" ? styles.background : {};
|
17
|
+
return /* @__PURE__ */ jsx(
|
18
|
+
Card,
|
19
|
+
{
|
20
|
+
style: {
|
21
|
+
...gradientStyle,
|
22
|
+
...style
|
23
|
+
},
|
24
|
+
ref,
|
25
|
+
...props
|
26
|
+
}
|
27
|
+
);
|
22
28
|
});
|
23
|
-
|
24
|
-
var
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
var
|
29
|
-
var import_react = require("react");
|
30
|
-
var import_react_router_dom = require("react-router-dom");
|
31
|
-
var import_CardEx = require("../CardEx");
|
32
|
-
const SimpleCard = ({
|
29
|
+
CardExWithRef.displayName = "CardEx";
|
30
|
+
var CardEx = CardExWithRef;
|
31
|
+
|
32
|
+
// src/components/SimpleCard/SimpleCard.tsx
|
33
|
+
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
34
|
+
var SimpleCard = ({
|
33
35
|
desc,
|
34
36
|
iconImage,
|
35
37
|
interactionVariant = "card",
|
@@ -42,25 +44,25 @@ const SimpleCard = ({
|
|
42
44
|
to,
|
43
45
|
...props
|
44
46
|
}) => {
|
45
|
-
const theme =
|
46
|
-
const [raised, setRaised] =
|
47
|
-
const navigate =
|
48
|
-
const isMobile =
|
47
|
+
const theme = useTheme();
|
48
|
+
const [raised, setRaised] = useState(false);
|
49
|
+
const navigate = useNavigate();
|
50
|
+
const isMobile = useIsMobile();
|
49
51
|
const localRouteChange = (to2) => {
|
50
52
|
to2 ? navigate(to2) : navigate("/404");
|
51
53
|
};
|
52
54
|
const externalRouteChange = (href2) => {
|
53
55
|
href2 ? window.open(href2) : navigate("/404");
|
54
56
|
};
|
55
|
-
return /* @__PURE__ */
|
56
|
-
|
57
|
+
return /* @__PURE__ */ jsxs(
|
58
|
+
CardEx,
|
57
59
|
{
|
58
60
|
elevation: raised ? 3 : 0,
|
59
61
|
sx: {
|
60
62
|
"&:hover": {
|
61
63
|
cursor: interactionVariant == "button" ? "pointer" : null
|
62
64
|
},
|
63
|
-
backgroundColor:
|
65
|
+
backgroundColor: alpha(theme.palette.primary.light, 0.05),
|
64
66
|
...sx
|
65
67
|
},
|
66
68
|
onMouseEnter: () => isMobile ? null : interactionVariant == "button" ? setRaised(true) : null,
|
@@ -68,15 +70,15 @@ const SimpleCard = ({
|
|
68
70
|
onClick: () => interactionVariant == "button" ? href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate("/404") : null,
|
69
71
|
...props,
|
70
72
|
children: [
|
71
|
-
media ? /* @__PURE__ */ (
|
72
|
-
/* @__PURE__ */ (
|
73
|
-
iconImage ? /* @__PURE__ */ (
|
74
|
-
typeof headline === "string" ? /* @__PURE__ */ (
|
75
|
-
subtitle ? /* @__PURE__ */ (
|
76
|
-
/* @__PURE__ */ (
|
73
|
+
media ? /* @__PURE__ */ jsx2(CardMedia, { component: "img", height: "100", image: media, alt: "" }) : null,
|
74
|
+
/* @__PURE__ */ jsx2(CardContent, { sx: { height: "100%" }, children: /* @__PURE__ */ jsxs(FlexCol, { width: "100%", alignItems: "flex-start", children: [
|
75
|
+
iconImage ? /* @__PURE__ */ jsx2("img", { src: iconImage, height: "40px", style: { paddingBottom: "8px" } }) : null,
|
76
|
+
typeof headline === "string" ? /* @__PURE__ */ jsx2(Typography, { variant: small ? "body1" : "h6", textAlign: "left", gutterBottom: true, children: headline }) : headline,
|
77
|
+
subtitle ? /* @__PURE__ */ jsx2(Typography, { variant: "subtitle2", textAlign: "left", gutterBottom: true, children: subtitle }) : null,
|
78
|
+
/* @__PURE__ */ jsx2(Typography, { variant: small ? "caption" : "body1", textAlign: "left", gutterBottom: true, children: desc })
|
77
79
|
] }) }),
|
78
|
-
interactionVariant == "button" ? /* @__PURE__ */ (
|
79
|
-
|
80
|
+
interactionVariant == "button" ? /* @__PURE__ */ jsx2(CardActions, { children: /* @__PURE__ */ jsx2(FlexGrowCol, { alignItems: "flex-end", children: /* @__PURE__ */ jsx2(
|
81
|
+
IconButton,
|
80
82
|
{
|
81
83
|
color: raised ? "secondary" : "primary",
|
82
84
|
size: small ? "small" : "medium",
|
@@ -84,15 +86,14 @@ const SimpleCard = ({
|
|
84
86
|
disableFocusRipple: true,
|
85
87
|
disableRipple: true,
|
86
88
|
disableTouchRipple: true,
|
87
|
-
children: /* @__PURE__ */ (
|
89
|
+
children: /* @__PURE__ */ jsx2(ArrowForwardRoundedIcon, { fontSize: small ? "small" : "medium" })
|
88
90
|
}
|
89
91
|
) }) }) : null
|
90
92
|
]
|
91
93
|
}
|
92
94
|
);
|
93
95
|
};
|
94
|
-
|
95
|
-
0 && (module.exports = {
|
96
|
+
export {
|
96
97
|
SimpleCard
|
97
|
-
}
|
98
|
+
};
|
98
99
|
//# sourceMappingURL=SimpleCard.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/SimpleCard/SimpleCard.tsx"],"sourcesContent":["import { ArrowForwardRounded as ArrowForwardRoundedIcon } from '@mui/icons-material'\nimport { alpha, CardActions, CardContent, CardMedia, IconButton, Typography, useTheme } from '@mui/material'\nimport { FlexCol, FlexGrowCol } from '@xylabs/react-flexbox'\nimport { useIsMobile } from '@xyo-network/react-shared'\nimport { ReactNode, useState } from 'react'\nimport { To, useNavigate } from 'react-router-dom'\n\nimport { CardEx, CardExProps } from '../CardEx'\n\nexport interface SimpleCardProps extends CardExProps {\n desc?: ReactNode\n headline?: ReactNode\n href?: string\n iconImage?: string\n interactionVariant?: 'button' | 'card'\n media?: string\n small?: boolean\n subtitle?: string\n to?: To\n}\n\nexport const SimpleCard: React.FC<SimpleCardProps> = ({\n desc,\n iconImage,\n interactionVariant = 'card',\n headline,\n href,\n media,\n small,\n subtitle,\n sx,\n to,\n ...props\n}) => {\n const theme = useTheme()\n const [raised, setRaised] = useState(false)\n const navigate = useNavigate()\n const isMobile = useIsMobile()\n const localRouteChange = (to: To | undefined) => {\n to ? navigate(to) : navigate('/404')\n }\n const externalRouteChange = (href: string | undefined) => {\n href ? window.open(href) : navigate('/404')\n }\n return (\n <CardEx\n elevation={raised ? 3 : 0}\n sx={{\n '&:hover': {\n cursor: interactionVariant == 'button' ? 'pointer' : null,\n },\n backgroundColor: alpha(theme.palette.primary.light, 0.05),\n ...sx,\n }}\n onMouseEnter={() => (isMobile ? null : interactionVariant == 'button' ? setRaised(true) : null)}\n onMouseLeave={() => (isMobile ? null : interactionVariant == 'button' ? setRaised(false) : null)}\n onClick={() => (interactionVariant == 'button' ? (href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate('/404')) : null)}\n {...props}\n >\n {media ? <CardMedia component=\"img\" height=\"100\" image={media} alt=\"\" /> : null}\n\n <CardContent sx={{ height: '100%' }}>\n <FlexCol width=\"100%\" alignItems=\"flex-start\">\n {iconImage ? <img src={iconImage} height=\"40px\" style={{ paddingBottom: '8px' }} /> : null}\n {typeof headline === 'string' ? (\n <Typography variant={small ? 'body1' : 'h6'} textAlign=\"left\" gutterBottom>\n {headline}\n </Typography>\n ) : (\n headline\n )}\n {subtitle ? (\n <Typography variant=\"subtitle2\" textAlign=\"left\" gutterBottom>\n {subtitle}\n </Typography>\n ) : null}\n <Typography variant={small ? 'caption' : 'body1'} textAlign=\"left\" gutterBottom>\n {desc}\n </Typography>\n </FlexCol>\n </CardContent>\n {interactionVariant == 'button' ? (\n <CardActions>\n <FlexGrowCol alignItems=\"flex-end\">\n <IconButton\n color={raised ? 'secondary' : 'primary'}\n size={small ? 'small' : 'medium'}\n onClick={() => (href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate('/404'))}\n disableFocusRipple\n disableRipple\n disableTouchRipple\n >\n <ArrowForwardRoundedIcon fontSize={small ? 'small' : 'medium'} />\n </IconButton>\n </FlexGrowCol>\n </CardActions>\n ) : null}\n </CardEx>\n )\n}\n"],"mappings":"
|
1
|
+
{"version":3,"sources":["../../../../src/components/SimpleCard/SimpleCard.tsx","../../../../src/components/CardEx.tsx"],"sourcesContent":["import { ArrowForwardRounded as ArrowForwardRoundedIcon } from '@mui/icons-material'\nimport { alpha, CardActions, CardContent, CardMedia, IconButton, Typography, useTheme } from '@mui/material'\nimport { FlexCol, FlexGrowCol } from '@xylabs/react-flexbox'\nimport { useIsMobile } from '@xyo-network/react-shared'\nimport { ReactNode, useState } from 'react'\nimport { To, useNavigate } from 'react-router-dom'\n\nimport { CardEx, CardExProps } from '../CardEx'\n\nexport interface SimpleCardProps extends CardExProps {\n desc?: ReactNode\n headline?: ReactNode\n href?: string\n iconImage?: string\n interactionVariant?: 'button' | 'card'\n media?: string\n small?: boolean\n subtitle?: string\n to?: To\n}\n\nexport const SimpleCard: React.FC<SimpleCardProps> = ({\n desc,\n iconImage,\n interactionVariant = 'card',\n headline,\n href,\n media,\n small,\n subtitle,\n sx,\n to,\n ...props\n}) => {\n const theme = useTheme()\n const [raised, setRaised] = useState(false)\n const navigate = useNavigate()\n const isMobile = useIsMobile()\n const localRouteChange = (to: To | undefined) => {\n to ? navigate(to) : navigate('/404')\n }\n const externalRouteChange = (href: string | undefined) => {\n href ? window.open(href) : navigate('/404')\n }\n return (\n <CardEx\n elevation={raised ? 3 : 0}\n sx={{\n '&:hover': {\n cursor: interactionVariant == 'button' ? 'pointer' : null,\n },\n backgroundColor: alpha(theme.palette.primary.light, 0.05),\n ...sx,\n }}\n onMouseEnter={() => (isMobile ? null : interactionVariant == 'button' ? setRaised(true) : null)}\n onMouseLeave={() => (isMobile ? null : interactionVariant == 'button' ? setRaised(false) : null)}\n onClick={() => (interactionVariant == 'button' ? (href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate('/404')) : null)}\n {...props}\n >\n {media ? <CardMedia component=\"img\" height=\"100\" image={media} alt=\"\" /> : null}\n\n <CardContent sx={{ height: '100%' }}>\n <FlexCol width=\"100%\" alignItems=\"flex-start\">\n {iconImage ? <img src={iconImage} height=\"40px\" style={{ paddingBottom: '8px' }} /> : null}\n {typeof headline === 'string' ? (\n <Typography variant={small ? 'body1' : 'h6'} textAlign=\"left\" gutterBottom>\n {headline}\n </Typography>\n ) : (\n headline\n )}\n {subtitle ? (\n <Typography variant=\"subtitle2\" textAlign=\"left\" gutterBottom>\n {subtitle}\n </Typography>\n ) : null}\n <Typography variant={small ? 'caption' : 'body1'} textAlign=\"left\" gutterBottom>\n {desc}\n </Typography>\n </FlexCol>\n </CardContent>\n {interactionVariant == 'button' ? (\n <CardActions>\n <FlexGrowCol alignItems=\"flex-end\">\n <IconButton\n color={raised ? 'secondary' : 'primary'}\n size={small ? 'small' : 'medium'}\n onClick={() => (href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate('/404'))}\n disableFocusRipple\n disableRipple\n disableTouchRipple\n >\n <ArrowForwardRoundedIcon fontSize={small ? 'small' : 'medium'} />\n </IconButton>\n </FlexGrowCol>\n </CardActions>\n ) : null}\n </CardEx>\n )\n}\n","import { Card, CardProps } from '@mui/material'\nimport { useGradientStyles } from '@xyo-network/react-shared'\nimport { forwardRef } from 'react'\n\nexport type CardExProps = CardProps & {\n gradient?: 'border' | 'background'\n}\n\nexport const CardExWithRef: React.FC<CardExProps> = forwardRef(({ style, gradient, ...props }, ref) => {\n const { styles } = useGradientStyles()\n const gradientStyle = gradient === 'border' ? styles.border : gradient === 'background' ? styles.background : {}\n return (\n <Card\n style={{\n ...gradientStyle,\n ...style,\n }}\n ref={ref}\n {...props}\n />\n )\n})\n\nCardExWithRef.displayName = 'CardEx'\n\nexport const CardEx = CardExWithRef\n"],"mappings":"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","names":["jsx","to","href"]}
|
@@ -0,0 +1,126 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __defProp = Object.defineProperty;
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
6
|
+
var __export = (target, all) => {
|
7
|
+
for (var name in all)
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
9
|
+
};
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
12
|
+
for (let key of __getOwnPropNames(from))
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
15
|
+
}
|
16
|
+
return to;
|
17
|
+
};
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
19
|
+
|
20
|
+
// src/components/SimpleCard/index.ts
|
21
|
+
var SimpleCard_exports = {};
|
22
|
+
__export(SimpleCard_exports, {
|
23
|
+
SimpleCard: () => SimpleCard
|
24
|
+
});
|
25
|
+
module.exports = __toCommonJS(SimpleCard_exports);
|
26
|
+
|
27
|
+
// src/components/SimpleCard/SimpleCard.tsx
|
28
|
+
var import_icons_material = require("@mui/icons-material");
|
29
|
+
var import_material2 = require("@mui/material");
|
30
|
+
var import_react_flexbox = require("@xylabs/react-flexbox");
|
31
|
+
var import_react_shared2 = require("@xyo-network/react-shared");
|
32
|
+
var import_react2 = require("react");
|
33
|
+
var import_react_router_dom = require("react-router-dom");
|
34
|
+
|
35
|
+
// src/components/CardEx.tsx
|
36
|
+
var import_material = require("@mui/material");
|
37
|
+
var import_react_shared = require("@xyo-network/react-shared");
|
38
|
+
var import_react = require("react");
|
39
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
40
|
+
var CardExWithRef = (0, import_react.forwardRef)(({ style, gradient, ...props }, ref) => {
|
41
|
+
const { styles } = (0, import_react_shared.useGradientStyles)();
|
42
|
+
const gradientStyle = gradient === "border" ? styles.border : gradient === "background" ? styles.background : {};
|
43
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
44
|
+
import_material.Card,
|
45
|
+
{
|
46
|
+
style: {
|
47
|
+
...gradientStyle,
|
48
|
+
...style
|
49
|
+
},
|
50
|
+
ref,
|
51
|
+
...props
|
52
|
+
}
|
53
|
+
);
|
54
|
+
});
|
55
|
+
CardExWithRef.displayName = "CardEx";
|
56
|
+
var CardEx = CardExWithRef;
|
57
|
+
|
58
|
+
// src/components/SimpleCard/SimpleCard.tsx
|
59
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
60
|
+
var SimpleCard = ({
|
61
|
+
desc,
|
62
|
+
iconImage,
|
63
|
+
interactionVariant = "card",
|
64
|
+
headline,
|
65
|
+
href,
|
66
|
+
media,
|
67
|
+
small,
|
68
|
+
subtitle,
|
69
|
+
sx,
|
70
|
+
to,
|
71
|
+
...props
|
72
|
+
}) => {
|
73
|
+
const theme = (0, import_material2.useTheme)();
|
74
|
+
const [raised, setRaised] = (0, import_react2.useState)(false);
|
75
|
+
const navigate = (0, import_react_router_dom.useNavigate)();
|
76
|
+
const isMobile = (0, import_react_shared2.useIsMobile)();
|
77
|
+
const localRouteChange = (to2) => {
|
78
|
+
to2 ? navigate(to2) : navigate("/404");
|
79
|
+
};
|
80
|
+
const externalRouteChange = (href2) => {
|
81
|
+
href2 ? window.open(href2) : navigate("/404");
|
82
|
+
};
|
83
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
84
|
+
CardEx,
|
85
|
+
{
|
86
|
+
elevation: raised ? 3 : 0,
|
87
|
+
sx: {
|
88
|
+
"&:hover": {
|
89
|
+
cursor: interactionVariant == "button" ? "pointer" : null
|
90
|
+
},
|
91
|
+
backgroundColor: (0, import_material2.alpha)(theme.palette.primary.light, 0.05),
|
92
|
+
...sx
|
93
|
+
},
|
94
|
+
onMouseEnter: () => isMobile ? null : interactionVariant == "button" ? setRaised(true) : null,
|
95
|
+
onMouseLeave: () => isMobile ? null : interactionVariant == "button" ? setRaised(false) : null,
|
96
|
+
onClick: () => interactionVariant == "button" ? href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate("/404") : null,
|
97
|
+
...props,
|
98
|
+
children: [
|
99
|
+
media ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.CardMedia, { component: "img", height: "100", image: media, alt: "" }) : null,
|
100
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.CardContent, { sx: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_flexbox.FlexCol, { width: "100%", alignItems: "flex-start", children: [
|
101
|
+
iconImage ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { src: iconImage, height: "40px", style: { paddingBottom: "8px" } }) : null,
|
102
|
+
typeof headline === "string" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Typography, { variant: small ? "body1" : "h6", textAlign: "left", gutterBottom: true, children: headline }) : headline,
|
103
|
+
subtitle ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Typography, { variant: "subtitle2", textAlign: "left", gutterBottom: true, children: subtitle }) : null,
|
104
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Typography, { variant: small ? "caption" : "body1", textAlign: "left", gutterBottom: true, children: desc })
|
105
|
+
] }) }),
|
106
|
+
interactionVariant == "button" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.CardActions, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_flexbox.FlexGrowCol, { alignItems: "flex-end", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
107
|
+
import_material2.IconButton,
|
108
|
+
{
|
109
|
+
color: raised ? "secondary" : "primary",
|
110
|
+
size: small ? "small" : "medium",
|
111
|
+
onClick: () => href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate("/404"),
|
112
|
+
disableFocusRipple: true,
|
113
|
+
disableRipple: true,
|
114
|
+
disableTouchRipple: true,
|
115
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.ArrowForwardRounded, { fontSize: small ? "small" : "medium" })
|
116
|
+
}
|
117
|
+
) }) }) : null
|
118
|
+
]
|
119
|
+
}
|
120
|
+
);
|
121
|
+
};
|
122
|
+
// Annotate the CommonJS export names for ESM import in node:
|
123
|
+
0 && (module.exports = {
|
124
|
+
SimpleCard
|
125
|
+
});
|
126
|
+
//# sourceMappingURL=index.cjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/SimpleCard/index.ts","../../../../src/components/SimpleCard/SimpleCard.tsx","../../../../src/components/CardEx.tsx"],"sourcesContent":["export * from './SimpleCard'\n","import { ArrowForwardRounded as ArrowForwardRoundedIcon } from '@mui/icons-material'\nimport { alpha, CardActions, CardContent, CardMedia, IconButton, Typography, useTheme } from '@mui/material'\nimport { FlexCol, FlexGrowCol } from '@xylabs/react-flexbox'\nimport { useIsMobile } from '@xyo-network/react-shared'\nimport { ReactNode, useState } from 'react'\nimport { To, useNavigate } from 'react-router-dom'\n\nimport { CardEx, CardExProps } from '../CardEx'\n\nexport interface SimpleCardProps extends CardExProps {\n desc?: ReactNode\n headline?: ReactNode\n href?: string\n iconImage?: string\n interactionVariant?: 'button' | 'card'\n media?: string\n small?: boolean\n subtitle?: string\n to?: To\n}\n\nexport const SimpleCard: React.FC<SimpleCardProps> = ({\n desc,\n iconImage,\n interactionVariant = 'card',\n headline,\n href,\n media,\n small,\n subtitle,\n sx,\n to,\n ...props\n}) => {\n const theme = useTheme()\n const [raised, setRaised] = useState(false)\n const navigate = useNavigate()\n const isMobile = useIsMobile()\n const localRouteChange = (to: To | undefined) => {\n to ? navigate(to) : navigate('/404')\n }\n const externalRouteChange = (href: string | undefined) => {\n href ? window.open(href) : navigate('/404')\n }\n return (\n <CardEx\n elevation={raised ? 3 : 0}\n sx={{\n '&:hover': {\n cursor: interactionVariant == 'button' ? 'pointer' : null,\n },\n backgroundColor: alpha(theme.palette.primary.light, 0.05),\n ...sx,\n }}\n onMouseEnter={() => (isMobile ? null : interactionVariant == 'button' ? setRaised(true) : null)}\n onMouseLeave={() => (isMobile ? null : interactionVariant == 'button' ? setRaised(false) : null)}\n onClick={() => (interactionVariant == 'button' ? (href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate('/404')) : null)}\n {...props}\n >\n {media ? <CardMedia component=\"img\" height=\"100\" image={media} alt=\"\" /> : null}\n\n <CardContent sx={{ height: '100%' }}>\n <FlexCol width=\"100%\" alignItems=\"flex-start\">\n {iconImage ? <img src={iconImage} height=\"40px\" style={{ paddingBottom: '8px' }} /> : null}\n {typeof headline === 'string' ? (\n <Typography variant={small ? 'body1' : 'h6'} textAlign=\"left\" gutterBottom>\n {headline}\n </Typography>\n ) : (\n headline\n )}\n {subtitle ? (\n <Typography variant=\"subtitle2\" textAlign=\"left\" gutterBottom>\n {subtitle}\n </Typography>\n ) : null}\n <Typography variant={small ? 'caption' : 'body1'} textAlign=\"left\" gutterBottom>\n {desc}\n </Typography>\n </FlexCol>\n </CardContent>\n {interactionVariant == 'button' ? (\n <CardActions>\n <FlexGrowCol alignItems=\"flex-end\">\n <IconButton\n color={raised ? 'secondary' : 'primary'}\n size={small ? 'small' : 'medium'}\n onClick={() => (href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate('/404'))}\n disableFocusRipple\n disableRipple\n disableTouchRipple\n >\n <ArrowForwardRoundedIcon fontSize={small ? 'small' : 'medium'} />\n </IconButton>\n </FlexGrowCol>\n </CardActions>\n ) : null}\n </CardEx>\n )\n}\n","import { Card, CardProps } from '@mui/material'\nimport { useGradientStyles } from '@xyo-network/react-shared'\nimport { forwardRef } from 'react'\n\nexport type CardExProps = CardProps & {\n gradient?: 'border' | 'background'\n}\n\nexport const CardExWithRef: React.FC<CardExProps> = forwardRef(({ style, gradient, ...props }, ref) => {\n const { styles } = useGradientStyles()\n const gradientStyle = gradient === 'border' ? styles.border : gradient === 'background' ? styles.background : {}\n return (\n <Card\n style={{\n ...gradientStyle,\n ...style,\n }}\n ref={ref}\n {...props}\n />\n )\n})\n\nCardExWithRef.displayName = 'CardEx'\n\nexport const CardEx = CardExWithRef\n"],"mappings":"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","names":["import_material","import_react_shared","import_react","import_jsx_runtime","to","href","ArrowForwardRoundedIcon"]}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/SimpleCard/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}
|
@@ -1,23 +1,99 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
};
|
14
|
-
var
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
1
|
+
// src/components/SimpleCard/SimpleCard.tsx
|
2
|
+
import { ArrowForwardRounded as ArrowForwardRoundedIcon } from "@mui/icons-material";
|
3
|
+
import { alpha, CardActions, CardContent, CardMedia, IconButton, Typography, useTheme } from "@mui/material";
|
4
|
+
import { FlexCol, FlexGrowCol } from "@xylabs/react-flexbox";
|
5
|
+
import { useIsMobile } from "@xyo-network/react-shared";
|
6
|
+
import { useState } from "react";
|
7
|
+
import { useNavigate } from "react-router-dom";
|
8
|
+
|
9
|
+
// src/components/CardEx.tsx
|
10
|
+
import { Card } from "@mui/material";
|
11
|
+
import { useGradientStyles } from "@xyo-network/react-shared";
|
12
|
+
import { forwardRef } from "react";
|
13
|
+
import { jsx } from "react/jsx-runtime";
|
14
|
+
var CardExWithRef = forwardRef(({ style, gradient, ...props }, ref) => {
|
15
|
+
const { styles } = useGradientStyles();
|
16
|
+
const gradientStyle = gradient === "border" ? styles.border : gradient === "background" ? styles.background : {};
|
17
|
+
return /* @__PURE__ */ jsx(
|
18
|
+
Card,
|
19
|
+
{
|
20
|
+
style: {
|
21
|
+
...gradientStyle,
|
22
|
+
...style
|
23
|
+
},
|
24
|
+
ref,
|
25
|
+
...props
|
26
|
+
}
|
27
|
+
);
|
22
28
|
});
|
29
|
+
CardExWithRef.displayName = "CardEx";
|
30
|
+
var CardEx = CardExWithRef;
|
31
|
+
|
32
|
+
// src/components/SimpleCard/SimpleCard.tsx
|
33
|
+
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
34
|
+
var SimpleCard = ({
|
35
|
+
desc,
|
36
|
+
iconImage,
|
37
|
+
interactionVariant = "card",
|
38
|
+
headline,
|
39
|
+
href,
|
40
|
+
media,
|
41
|
+
small,
|
42
|
+
subtitle,
|
43
|
+
sx,
|
44
|
+
to,
|
45
|
+
...props
|
46
|
+
}) => {
|
47
|
+
const theme = useTheme();
|
48
|
+
const [raised, setRaised] = useState(false);
|
49
|
+
const navigate = useNavigate();
|
50
|
+
const isMobile = useIsMobile();
|
51
|
+
const localRouteChange = (to2) => {
|
52
|
+
to2 ? navigate(to2) : navigate("/404");
|
53
|
+
};
|
54
|
+
const externalRouteChange = (href2) => {
|
55
|
+
href2 ? window.open(href2) : navigate("/404");
|
56
|
+
};
|
57
|
+
return /* @__PURE__ */ jsxs(
|
58
|
+
CardEx,
|
59
|
+
{
|
60
|
+
elevation: raised ? 3 : 0,
|
61
|
+
sx: {
|
62
|
+
"&:hover": {
|
63
|
+
cursor: interactionVariant == "button" ? "pointer" : null
|
64
|
+
},
|
65
|
+
backgroundColor: alpha(theme.palette.primary.light, 0.05),
|
66
|
+
...sx
|
67
|
+
},
|
68
|
+
onMouseEnter: () => isMobile ? null : interactionVariant == "button" ? setRaised(true) : null,
|
69
|
+
onMouseLeave: () => isMobile ? null : interactionVariant == "button" ? setRaised(false) : null,
|
70
|
+
onClick: () => interactionVariant == "button" ? href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate("/404") : null,
|
71
|
+
...props,
|
72
|
+
children: [
|
73
|
+
media ? /* @__PURE__ */ jsx2(CardMedia, { component: "img", height: "100", image: media, alt: "" }) : null,
|
74
|
+
/* @__PURE__ */ jsx2(CardContent, { sx: { height: "100%" }, children: /* @__PURE__ */ jsxs(FlexCol, { width: "100%", alignItems: "flex-start", children: [
|
75
|
+
iconImage ? /* @__PURE__ */ jsx2("img", { src: iconImage, height: "40px", style: { paddingBottom: "8px" } }) : null,
|
76
|
+
typeof headline === "string" ? /* @__PURE__ */ jsx2(Typography, { variant: small ? "body1" : "h6", textAlign: "left", gutterBottom: true, children: headline }) : headline,
|
77
|
+
subtitle ? /* @__PURE__ */ jsx2(Typography, { variant: "subtitle2", textAlign: "left", gutterBottom: true, children: subtitle }) : null,
|
78
|
+
/* @__PURE__ */ jsx2(Typography, { variant: small ? "caption" : "body1", textAlign: "left", gutterBottom: true, children: desc })
|
79
|
+
] }) }),
|
80
|
+
interactionVariant == "button" ? /* @__PURE__ */ jsx2(CardActions, { children: /* @__PURE__ */ jsx2(FlexGrowCol, { alignItems: "flex-end", children: /* @__PURE__ */ jsx2(
|
81
|
+
IconButton,
|
82
|
+
{
|
83
|
+
color: raised ? "secondary" : "primary",
|
84
|
+
size: small ? "small" : "medium",
|
85
|
+
onClick: () => href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate("/404"),
|
86
|
+
disableFocusRipple: true,
|
87
|
+
disableRipple: true,
|
88
|
+
disableTouchRipple: true,
|
89
|
+
children: /* @__PURE__ */ jsx2(ArrowForwardRoundedIcon, { fontSize: small ? "small" : "medium" })
|
90
|
+
}
|
91
|
+
) }) }) : null
|
92
|
+
]
|
93
|
+
}
|
94
|
+
);
|
95
|
+
};
|
96
|
+
export {
|
97
|
+
SimpleCard
|
98
|
+
};
|
23
99
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/SimpleCard/
|
1
|
+
{"version":3,"sources":["../../../../src/components/SimpleCard/SimpleCard.tsx","../../../../src/components/CardEx.tsx"],"sourcesContent":["import { ArrowForwardRounded as ArrowForwardRoundedIcon } from '@mui/icons-material'\nimport { alpha, CardActions, CardContent, CardMedia, IconButton, Typography, useTheme } from '@mui/material'\nimport { FlexCol, FlexGrowCol } from '@xylabs/react-flexbox'\nimport { useIsMobile } from '@xyo-network/react-shared'\nimport { ReactNode, useState } from 'react'\nimport { To, useNavigate } from 'react-router-dom'\n\nimport { CardEx, CardExProps } from '../CardEx'\n\nexport interface SimpleCardProps extends CardExProps {\n desc?: ReactNode\n headline?: ReactNode\n href?: string\n iconImage?: string\n interactionVariant?: 'button' | 'card'\n media?: string\n small?: boolean\n subtitle?: string\n to?: To\n}\n\nexport const SimpleCard: React.FC<SimpleCardProps> = ({\n desc,\n iconImage,\n interactionVariant = 'card',\n headline,\n href,\n media,\n small,\n subtitle,\n sx,\n to,\n ...props\n}) => {\n const theme = useTheme()\n const [raised, setRaised] = useState(false)\n const navigate = useNavigate()\n const isMobile = useIsMobile()\n const localRouteChange = (to: To | undefined) => {\n to ? navigate(to) : navigate('/404')\n }\n const externalRouteChange = (href: string | undefined) => {\n href ? window.open(href) : navigate('/404')\n }\n return (\n <CardEx\n elevation={raised ? 3 : 0}\n sx={{\n '&:hover': {\n cursor: interactionVariant == 'button' ? 'pointer' : null,\n },\n backgroundColor: alpha(theme.palette.primary.light, 0.05),\n ...sx,\n }}\n onMouseEnter={() => (isMobile ? null : interactionVariant == 'button' ? setRaised(true) : null)}\n onMouseLeave={() => (isMobile ? null : interactionVariant == 'button' ? setRaised(false) : null)}\n onClick={() => (interactionVariant == 'button' ? (href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate('/404')) : null)}\n {...props}\n >\n {media ? <CardMedia component=\"img\" height=\"100\" image={media} alt=\"\" /> : null}\n\n <CardContent sx={{ height: '100%' }}>\n <FlexCol width=\"100%\" alignItems=\"flex-start\">\n {iconImage ? <img src={iconImage} height=\"40px\" style={{ paddingBottom: '8px' }} /> : null}\n {typeof headline === 'string' ? (\n <Typography variant={small ? 'body1' : 'h6'} textAlign=\"left\" gutterBottom>\n {headline}\n </Typography>\n ) : (\n headline\n )}\n {subtitle ? (\n <Typography variant=\"subtitle2\" textAlign=\"left\" gutterBottom>\n {subtitle}\n </Typography>\n ) : null}\n <Typography variant={small ? 'caption' : 'body1'} textAlign=\"left\" gutterBottom>\n {desc}\n </Typography>\n </FlexCol>\n </CardContent>\n {interactionVariant == 'button' ? (\n <CardActions>\n <FlexGrowCol alignItems=\"flex-end\">\n <IconButton\n color={raised ? 'secondary' : 'primary'}\n size={small ? 'small' : 'medium'}\n onClick={() => (href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate('/404'))}\n disableFocusRipple\n disableRipple\n disableTouchRipple\n >\n <ArrowForwardRoundedIcon fontSize={small ? 'small' : 'medium'} />\n </IconButton>\n </FlexGrowCol>\n </CardActions>\n ) : null}\n </CardEx>\n )\n}\n","import { Card, CardProps } from '@mui/material'\nimport { useGradientStyles } from '@xyo-network/react-shared'\nimport { forwardRef } from 'react'\n\nexport type CardExProps = CardProps & {\n gradient?: 'border' | 'background'\n}\n\nexport const CardExWithRef: React.FC<CardExProps> = forwardRef(({ style, gradient, ...props }, ref) => {\n const { styles } = useGradientStyles()\n const gradientStyle = gradient === 'border' ? styles.border : gradient === 'background' ? styles.background : {}\n return (\n <Card\n style={{\n ...gradientStyle,\n ...style,\n }}\n ref={ref}\n {...props}\n />\n )\n})\n\nCardExWithRef.displayName = 'CardEx'\n\nexport const CardEx = CardExWithRef\n"],"mappings":"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","names":["jsx","to","href"]}
|
@@ -0,0 +1,133 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __defProp = Object.defineProperty;
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
6
|
+
var __export = (target, all) => {
|
7
|
+
for (var name in all)
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
9
|
+
};
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
12
|
+
for (let key of __getOwnPropNames(from))
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
15
|
+
}
|
16
|
+
return to;
|
17
|
+
};
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
19
|
+
|
20
|
+
// src/components/SimpleCardGrid/SimpleCardGrid.tsx
|
21
|
+
var SimpleCardGrid_exports = {};
|
22
|
+
__export(SimpleCardGrid_exports, {
|
23
|
+
SimpleCardGrid: () => SimpleCardGrid
|
24
|
+
});
|
25
|
+
module.exports = __toCommonJS(SimpleCardGrid_exports);
|
26
|
+
var import_material3 = require("@mui/material");
|
27
|
+
|
28
|
+
// src/components/SimpleCard/SimpleCard.tsx
|
29
|
+
var import_icons_material = require("@mui/icons-material");
|
30
|
+
var import_material2 = require("@mui/material");
|
31
|
+
var import_react_flexbox = require("@xylabs/react-flexbox");
|
32
|
+
var import_react_shared2 = require("@xyo-network/react-shared");
|
33
|
+
var import_react2 = require("react");
|
34
|
+
var import_react_router_dom = require("react-router-dom");
|
35
|
+
|
36
|
+
// src/components/CardEx.tsx
|
37
|
+
var import_material = require("@mui/material");
|
38
|
+
var import_react_shared = require("@xyo-network/react-shared");
|
39
|
+
var import_react = require("react");
|
40
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
41
|
+
var CardExWithRef = (0, import_react.forwardRef)(({ style, gradient, ...props }, ref) => {
|
42
|
+
const { styles } = (0, import_react_shared.useGradientStyles)();
|
43
|
+
const gradientStyle = gradient === "border" ? styles.border : gradient === "background" ? styles.background : {};
|
44
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
45
|
+
import_material.Card,
|
46
|
+
{
|
47
|
+
style: {
|
48
|
+
...gradientStyle,
|
49
|
+
...style
|
50
|
+
},
|
51
|
+
ref,
|
52
|
+
...props
|
53
|
+
}
|
54
|
+
);
|
55
|
+
});
|
56
|
+
CardExWithRef.displayName = "CardEx";
|
57
|
+
var CardEx = CardExWithRef;
|
58
|
+
|
59
|
+
// src/components/SimpleCard/SimpleCard.tsx
|
60
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
61
|
+
var SimpleCard = ({
|
62
|
+
desc,
|
63
|
+
iconImage,
|
64
|
+
interactionVariant = "card",
|
65
|
+
headline,
|
66
|
+
href,
|
67
|
+
media,
|
68
|
+
small,
|
69
|
+
subtitle,
|
70
|
+
sx,
|
71
|
+
to,
|
72
|
+
...props
|
73
|
+
}) => {
|
74
|
+
const theme = (0, import_material2.useTheme)();
|
75
|
+
const [raised, setRaised] = (0, import_react2.useState)(false);
|
76
|
+
const navigate = (0, import_react_router_dom.useNavigate)();
|
77
|
+
const isMobile = (0, import_react_shared2.useIsMobile)();
|
78
|
+
const localRouteChange = (to2) => {
|
79
|
+
to2 ? navigate(to2) : navigate("/404");
|
80
|
+
};
|
81
|
+
const externalRouteChange = (href2) => {
|
82
|
+
href2 ? window.open(href2) : navigate("/404");
|
83
|
+
};
|
84
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
85
|
+
CardEx,
|
86
|
+
{
|
87
|
+
elevation: raised ? 3 : 0,
|
88
|
+
sx: {
|
89
|
+
"&:hover": {
|
90
|
+
cursor: interactionVariant == "button" ? "pointer" : null
|
91
|
+
},
|
92
|
+
backgroundColor: (0, import_material2.alpha)(theme.palette.primary.light, 0.05),
|
93
|
+
...sx
|
94
|
+
},
|
95
|
+
onMouseEnter: () => isMobile ? null : interactionVariant == "button" ? setRaised(true) : null,
|
96
|
+
onMouseLeave: () => isMobile ? null : interactionVariant == "button" ? setRaised(false) : null,
|
97
|
+
onClick: () => interactionVariant == "button" ? href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate("/404") : null,
|
98
|
+
...props,
|
99
|
+
children: [
|
100
|
+
media ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.CardMedia, { component: "img", height: "100", image: media, alt: "" }) : null,
|
101
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.CardContent, { sx: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_flexbox.FlexCol, { width: "100%", alignItems: "flex-start", children: [
|
102
|
+
iconImage ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { src: iconImage, height: "40px", style: { paddingBottom: "8px" } }) : null,
|
103
|
+
typeof headline === "string" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Typography, { variant: small ? "body1" : "h6", textAlign: "left", gutterBottom: true, children: headline }) : headline,
|
104
|
+
subtitle ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Typography, { variant: "subtitle2", textAlign: "left", gutterBottom: true, children: subtitle }) : null,
|
105
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Typography, { variant: small ? "caption" : "body1", textAlign: "left", gutterBottom: true, children: desc })
|
106
|
+
] }) }),
|
107
|
+
interactionVariant == "button" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.CardActions, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_flexbox.FlexGrowCol, { alignItems: "flex-end", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
108
|
+
import_material2.IconButton,
|
109
|
+
{
|
110
|
+
color: raised ? "secondary" : "primary",
|
111
|
+
size: small ? "small" : "medium",
|
112
|
+
onClick: () => href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate("/404"),
|
113
|
+
disableFocusRipple: true,
|
114
|
+
disableRipple: true,
|
115
|
+
disableTouchRipple: true,
|
116
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.ArrowForwardRounded, { fontSize: small ? "small" : "medium" })
|
117
|
+
}
|
118
|
+
) }) }) : null
|
119
|
+
]
|
120
|
+
}
|
121
|
+
);
|
122
|
+
};
|
123
|
+
|
124
|
+
// src/components/SimpleCardGrid/SimpleCardGrid.tsx
|
125
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
126
|
+
var SimpleCardGrid = ({ cards, ...props }) => {
|
127
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Grid, { container: true, ...props, children: cards == null ? void 0 : cards.map((card, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Grid, { item: true, xs: 12, sm: 6, md: 4, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SimpleCard, { ...card, sx: { flexDirection: "column", height: "100%" } }) }, index)) });
|
128
|
+
};
|
129
|
+
// Annotate the CommonJS export names for ESM import in node:
|
130
|
+
0 && (module.exports = {
|
131
|
+
SimpleCardGrid
|
132
|
+
});
|
133
|
+
//# sourceMappingURL=SimpleCardGrid.cjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/SimpleCardGrid/SimpleCardGrid.tsx","../../../../src/components/SimpleCard/SimpleCard.tsx","../../../../src/components/CardEx.tsx"],"sourcesContent":["import { Grid, GridProps } from '@mui/material'\n\nimport { SimpleCard, SimpleCardProps } from '../SimpleCard'\n\nexport interface SimpleCardGridProps extends GridProps {\n cards?: SimpleCardProps[]\n}\n\nexport const SimpleCardGrid: React.FC<SimpleCardGridProps> = ({ cards, ...props }) => {\n return (\n <Grid container {...props}>\n {cards?.map((card, index) => (\n <Grid item key={index} xs={12} sm={6} md={4}>\n <SimpleCard {...card} sx={{ flexDirection: 'column', height: '100%' }} />\n </Grid>\n ))}\n </Grid>\n )\n}\n","import { ArrowForwardRounded as ArrowForwardRoundedIcon } from '@mui/icons-material'\nimport { alpha, CardActions, CardContent, CardMedia, IconButton, Typography, useTheme } from '@mui/material'\nimport { FlexCol, FlexGrowCol } from '@xylabs/react-flexbox'\nimport { useIsMobile } from '@xyo-network/react-shared'\nimport { ReactNode, useState } from 'react'\nimport { To, useNavigate } from 'react-router-dom'\n\nimport { CardEx, CardExProps } from '../CardEx'\n\nexport interface SimpleCardProps extends CardExProps {\n desc?: ReactNode\n headline?: ReactNode\n href?: string\n iconImage?: string\n interactionVariant?: 'button' | 'card'\n media?: string\n small?: boolean\n subtitle?: string\n to?: To\n}\n\nexport const SimpleCard: React.FC<SimpleCardProps> = ({\n desc,\n iconImage,\n interactionVariant = 'card',\n headline,\n href,\n media,\n small,\n subtitle,\n sx,\n to,\n ...props\n}) => {\n const theme = useTheme()\n const [raised, setRaised] = useState(false)\n const navigate = useNavigate()\n const isMobile = useIsMobile()\n const localRouteChange = (to: To | undefined) => {\n to ? navigate(to) : navigate('/404')\n }\n const externalRouteChange = (href: string | undefined) => {\n href ? window.open(href) : navigate('/404')\n }\n return (\n <CardEx\n elevation={raised ? 3 : 0}\n sx={{\n '&:hover': {\n cursor: interactionVariant == 'button' ? 'pointer' : null,\n },\n backgroundColor: alpha(theme.palette.primary.light, 0.05),\n ...sx,\n }}\n onMouseEnter={() => (isMobile ? null : interactionVariant == 'button' ? setRaised(true) : null)}\n onMouseLeave={() => (isMobile ? null : interactionVariant == 'button' ? setRaised(false) : null)}\n onClick={() => (interactionVariant == 'button' ? (href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate('/404')) : null)}\n {...props}\n >\n {media ? <CardMedia component=\"img\" height=\"100\" image={media} alt=\"\" /> : null}\n\n <CardContent sx={{ height: '100%' }}>\n <FlexCol width=\"100%\" alignItems=\"flex-start\">\n {iconImage ? <img src={iconImage} height=\"40px\" style={{ paddingBottom: '8px' }} /> : null}\n {typeof headline === 'string' ? (\n <Typography variant={small ? 'body1' : 'h6'} textAlign=\"left\" gutterBottom>\n {headline}\n </Typography>\n ) : (\n headline\n )}\n {subtitle ? (\n <Typography variant=\"subtitle2\" textAlign=\"left\" gutterBottom>\n {subtitle}\n </Typography>\n ) : null}\n <Typography variant={small ? 'caption' : 'body1'} textAlign=\"left\" gutterBottom>\n {desc}\n </Typography>\n </FlexCol>\n </CardContent>\n {interactionVariant == 'button' ? (\n <CardActions>\n <FlexGrowCol alignItems=\"flex-end\">\n <IconButton\n color={raised ? 'secondary' : 'primary'}\n size={small ? 'small' : 'medium'}\n onClick={() => (href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate('/404'))}\n disableFocusRipple\n disableRipple\n disableTouchRipple\n >\n <ArrowForwardRoundedIcon fontSize={small ? 'small' : 'medium'} />\n </IconButton>\n </FlexGrowCol>\n </CardActions>\n ) : null}\n </CardEx>\n )\n}\n","import { Card, CardProps } from '@mui/material'\nimport { useGradientStyles } from '@xyo-network/react-shared'\nimport { forwardRef } from 'react'\n\nexport type CardExProps = CardProps & {\n gradient?: 'border' | 'background'\n}\n\nexport const CardExWithRef: React.FC<CardExProps> = forwardRef(({ style, gradient, ...props }, ref) => {\n const { styles } = useGradientStyles()\n const gradientStyle = gradient === 'border' ? styles.border : gradient === 'background' ? styles.background : {}\n return (\n <Card\n style={{\n ...gradientStyle,\n ...style,\n }}\n ref={ref}\n {...props}\n />\n )\n})\n\nCardExWithRef.displayName = 'CardEx'\n\nexport const CardEx = CardExWithRef\n"],"mappings":"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","names":["import_material","import_material","import_react_shared","import_react","import_jsx_runtime","to","href","ArrowForwardRoundedIcon","import_jsx_runtime"]}
|