@xyo-network/react-card 2.81.9 → 2.82.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/browser/components/CardContentEx.d.cts +3 -2
- package/dist/browser/components/CardContentEx.d.cts.map +1 -1
- package/dist/browser/components/CardContentEx.d.mts +3 -2
- package/dist/browser/components/CardContentEx.d.mts.map +1 -1
- package/dist/browser/components/CardContentEx.d.ts +3 -2
- package/dist/browser/components/CardContentEx.d.ts.map +1 -1
- package/dist/browser/components/CardEx.d.cts +3 -2
- package/dist/browser/components/CardEx.d.cts.map +1 -1
- package/dist/browser/components/CardEx.d.mts +3 -2
- package/dist/browser/components/CardEx.d.mts.map +1 -1
- package/dist/browser/components/CardEx.d.ts +3 -2
- package/dist/browser/components/CardEx.d.ts.map +1 -1
- package/dist/browser/components/FullWidthCard/FullWidthCard.d.cts +1 -1
- package/dist/browser/components/FullWidthCard/FullWidthCard.d.cts.map +1 -1
- package/dist/browser/components/FullWidthCard/FullWidthCard.d.mts +1 -1
- package/dist/browser/components/FullWidthCard/FullWidthCard.d.mts.map +1 -1
- package/dist/browser/components/FullWidthCard/FullWidthCard.d.ts +1 -1
- package/dist/browser/components/FullWidthCard/FullWidthCard.d.ts.map +1 -1
- package/dist/browser/components/FullWidthCard/index.d.cts +1 -1
- package/dist/browser/components/FullWidthCard/index.d.cts.map +1 -1
- package/dist/browser/components/FullWidthCard/index.d.mts +1 -1
- package/dist/browser/components/FullWidthCard/index.d.mts.map +1 -1
- package/dist/browser/components/FullWidthCard/index.d.ts +1 -1
- package/dist/browser/components/FullWidthCard/index.d.ts.map +1 -1
- package/dist/browser/components/PageCard.d.cts +3 -3
- package/dist/browser/components/PageCard.d.cts.map +1 -1
- package/dist/browser/components/PageCard.d.mts +3 -3
- package/dist/browser/components/PageCard.d.mts.map +1 -1
- package/dist/browser/components/PageCard.d.ts +3 -3
- package/dist/browser/components/PageCard.d.ts.map +1 -1
- package/dist/browser/components/SimpleCard/SimpleCard.d.cts +2 -2
- package/dist/browser/components/SimpleCard/SimpleCard.d.cts.map +1 -1
- package/dist/browser/components/SimpleCard/SimpleCard.d.mts +2 -2
- package/dist/browser/components/SimpleCard/SimpleCard.d.mts.map +1 -1
- package/dist/browser/components/SimpleCard/SimpleCard.d.ts +2 -2
- package/dist/browser/components/SimpleCard/SimpleCard.d.ts.map +1 -1
- package/dist/browser/components/SimpleCard/index.d.cts +1 -1
- package/dist/browser/components/SimpleCard/index.d.cts.map +1 -1
- package/dist/browser/components/SimpleCard/index.d.mts +1 -1
- package/dist/browser/components/SimpleCard/index.d.mts.map +1 -1
- package/dist/browser/components/SimpleCard/index.d.ts +1 -1
- package/dist/browser/components/SimpleCard/index.d.ts.map +1 -1
- package/dist/browser/components/SimpleCardGrid/SimpleCardGrid.d.cts +2 -1
- package/dist/browser/components/SimpleCardGrid/SimpleCardGrid.d.cts.map +1 -1
- package/dist/browser/components/SimpleCardGrid/SimpleCardGrid.d.mts +2 -1
- package/dist/browser/components/SimpleCardGrid/SimpleCardGrid.d.mts.map +1 -1
- package/dist/browser/components/SimpleCardGrid/SimpleCardGrid.d.ts +2 -1
- package/dist/browser/components/SimpleCardGrid/SimpleCardGrid.d.ts.map +1 -1
- package/dist/browser/components/SimpleCardGrid/index.d.cts +1 -1
- package/dist/browser/components/SimpleCardGrid/index.d.cts.map +1 -1
- package/dist/browser/components/SimpleCardGrid/index.d.mts +1 -1
- package/dist/browser/components/SimpleCardGrid/index.d.mts.map +1 -1
- package/dist/browser/components/SimpleCardGrid/index.d.ts +1 -1
- package/dist/browser/components/SimpleCardGrid/index.d.ts.map +1 -1
- package/dist/browser/components/index.d.cts +5 -5
- package/dist/browser/components/index.d.cts.map +1 -1
- package/dist/browser/components/index.d.mts +5 -5
- package/dist/browser/components/index.d.mts.map +1 -1
- package/dist/browser/components/index.d.ts +5 -5
- package/dist/browser/components/index.d.ts.map +1 -1
- package/dist/browser/index.cjs +207 -146
- package/dist/browser/index.cjs.map +1 -1
- package/dist/browser/index.d.cts +1 -1
- package/dist/browser/index.d.mts +1 -1
- package/dist/browser/index.d.ts +1 -1
- package/dist/browser/index.mjs +278 -0
- package/dist/browser/index.mjs.map +1 -0
- package/dist/neutral/components/CardContentEx.d.cts +3 -2
- package/dist/neutral/components/CardContentEx.d.cts.map +1 -1
- package/dist/neutral/components/CardContentEx.d.mts +3 -2
- package/dist/neutral/components/CardContentEx.d.mts.map +1 -1
- package/dist/neutral/components/CardContentEx.d.ts +3 -2
- package/dist/neutral/components/CardContentEx.d.ts.map +1 -1
- package/dist/neutral/components/CardEx.d.cts +3 -2
- package/dist/neutral/components/CardEx.d.cts.map +1 -1
- package/dist/neutral/components/CardEx.d.mts +3 -2
- package/dist/neutral/components/CardEx.d.mts.map +1 -1
- package/dist/neutral/components/CardEx.d.ts +3 -2
- package/dist/neutral/components/CardEx.d.ts.map +1 -1
- package/dist/neutral/components/FullWidthCard/FullWidthCard.d.cts +1 -1
- package/dist/neutral/components/FullWidthCard/FullWidthCard.d.cts.map +1 -1
- package/dist/neutral/components/FullWidthCard/FullWidthCard.d.mts +1 -1
- package/dist/neutral/components/FullWidthCard/FullWidthCard.d.mts.map +1 -1
- package/dist/neutral/components/FullWidthCard/FullWidthCard.d.ts +1 -1
- package/dist/neutral/components/FullWidthCard/FullWidthCard.d.ts.map +1 -1
- package/dist/neutral/components/FullWidthCard/index.d.cts +1 -1
- package/dist/neutral/components/FullWidthCard/index.d.cts.map +1 -1
- package/dist/neutral/components/FullWidthCard/index.d.mts +1 -1
- package/dist/neutral/components/FullWidthCard/index.d.mts.map +1 -1
- package/dist/neutral/components/FullWidthCard/index.d.ts +1 -1
- package/dist/neutral/components/FullWidthCard/index.d.ts.map +1 -1
- package/dist/neutral/components/PageCard.d.cts +3 -3
- package/dist/neutral/components/PageCard.d.cts.map +1 -1
- package/dist/neutral/components/PageCard.d.mts +3 -3
- package/dist/neutral/components/PageCard.d.mts.map +1 -1
- package/dist/neutral/components/PageCard.d.ts +3 -3
- package/dist/neutral/components/PageCard.d.ts.map +1 -1
- package/dist/neutral/components/SimpleCard/SimpleCard.d.cts +2 -2
- package/dist/neutral/components/SimpleCard/SimpleCard.d.cts.map +1 -1
- package/dist/neutral/components/SimpleCard/SimpleCard.d.mts +2 -2
- package/dist/neutral/components/SimpleCard/SimpleCard.d.mts.map +1 -1
- package/dist/neutral/components/SimpleCard/SimpleCard.d.ts +2 -2
- package/dist/neutral/components/SimpleCard/SimpleCard.d.ts.map +1 -1
- package/dist/neutral/components/SimpleCard/index.d.cts +1 -1
- package/dist/neutral/components/SimpleCard/index.d.cts.map +1 -1
- package/dist/neutral/components/SimpleCard/index.d.mts +1 -1
- package/dist/neutral/components/SimpleCard/index.d.mts.map +1 -1
- package/dist/neutral/components/SimpleCard/index.d.ts +1 -1
- package/dist/neutral/components/SimpleCard/index.d.ts.map +1 -1
- package/dist/neutral/components/SimpleCardGrid/SimpleCardGrid.d.cts +2 -1
- package/dist/neutral/components/SimpleCardGrid/SimpleCardGrid.d.cts.map +1 -1
- package/dist/neutral/components/SimpleCardGrid/SimpleCardGrid.d.mts +2 -1
- package/dist/neutral/components/SimpleCardGrid/SimpleCardGrid.d.mts.map +1 -1
- package/dist/neutral/components/SimpleCardGrid/SimpleCardGrid.d.ts +2 -1
- package/dist/neutral/components/SimpleCardGrid/SimpleCardGrid.d.ts.map +1 -1
- package/dist/neutral/components/SimpleCardGrid/index.d.cts +1 -1
- package/dist/neutral/components/SimpleCardGrid/index.d.cts.map +1 -1
- package/dist/neutral/components/SimpleCardGrid/index.d.mts +1 -1
- package/dist/neutral/components/SimpleCardGrid/index.d.mts.map +1 -1
- package/dist/neutral/components/SimpleCardGrid/index.d.ts +1 -1
- package/dist/neutral/components/SimpleCardGrid/index.d.ts.map +1 -1
- package/dist/neutral/components/index.d.cts +5 -5
- package/dist/neutral/components/index.d.cts.map +1 -1
- package/dist/neutral/components/index.d.mts +5 -5
- package/dist/neutral/components/index.d.mts.map +1 -1
- package/dist/neutral/components/index.d.ts +5 -5
- package/dist/neutral/components/index.d.ts.map +1 -1
- package/dist/neutral/index.cjs +207 -146
- package/dist/neutral/index.cjs.map +1 -1
- package/dist/neutral/index.d.cts +1 -1
- package/dist/neutral/index.d.mts +1 -1
- package/dist/neutral/index.d.ts +1 -1
- package/dist/neutral/index.mjs +278 -0
- package/dist/neutral/index.mjs.map +1 -0
- package/dist/node/components/CardContentEx.d.cts +3 -2
- package/dist/node/components/CardContentEx.d.cts.map +1 -1
- package/dist/node/components/CardContentEx.d.mts +3 -2
- package/dist/node/components/CardContentEx.d.mts.map +1 -1
- package/dist/node/components/CardContentEx.d.ts +3 -2
- package/dist/node/components/CardContentEx.d.ts.map +1 -1
- package/dist/node/components/CardEx.d.cts +3 -2
- package/dist/node/components/CardEx.d.cts.map +1 -1
- package/dist/node/components/CardEx.d.mts +3 -2
- package/dist/node/components/CardEx.d.mts.map +1 -1
- package/dist/node/components/CardEx.d.ts +3 -2
- package/dist/node/components/CardEx.d.ts.map +1 -1
- package/dist/node/components/FullWidthCard/FullWidthCard.d.cts +1 -1
- package/dist/node/components/FullWidthCard/FullWidthCard.d.cts.map +1 -1
- package/dist/node/components/FullWidthCard/FullWidthCard.d.mts +1 -1
- package/dist/node/components/FullWidthCard/FullWidthCard.d.mts.map +1 -1
- package/dist/node/components/FullWidthCard/FullWidthCard.d.ts +1 -1
- package/dist/node/components/FullWidthCard/FullWidthCard.d.ts.map +1 -1
- package/dist/node/components/FullWidthCard/index.d.cts +1 -1
- package/dist/node/components/FullWidthCard/index.d.cts.map +1 -1
- package/dist/node/components/FullWidthCard/index.d.mts +1 -1
- package/dist/node/components/FullWidthCard/index.d.mts.map +1 -1
- package/dist/node/components/FullWidthCard/index.d.ts +1 -1
- package/dist/node/components/FullWidthCard/index.d.ts.map +1 -1
- package/dist/node/components/PageCard.d.cts +3 -3
- package/dist/node/components/PageCard.d.cts.map +1 -1
- package/dist/node/components/PageCard.d.mts +3 -3
- package/dist/node/components/PageCard.d.mts.map +1 -1
- package/dist/node/components/PageCard.d.ts +3 -3
- package/dist/node/components/PageCard.d.ts.map +1 -1
- package/dist/node/components/SimpleCard/SimpleCard.d.cts +2 -2
- package/dist/node/components/SimpleCard/SimpleCard.d.cts.map +1 -1
- package/dist/node/components/SimpleCard/SimpleCard.d.mts +2 -2
- package/dist/node/components/SimpleCard/SimpleCard.d.mts.map +1 -1
- package/dist/node/components/SimpleCard/SimpleCard.d.ts +2 -2
- package/dist/node/components/SimpleCard/SimpleCard.d.ts.map +1 -1
- package/dist/node/components/SimpleCard/index.d.cts +1 -1
- package/dist/node/components/SimpleCard/index.d.cts.map +1 -1
- package/dist/node/components/SimpleCard/index.d.mts +1 -1
- package/dist/node/components/SimpleCard/index.d.mts.map +1 -1
- package/dist/node/components/SimpleCard/index.d.ts +1 -1
- package/dist/node/components/SimpleCard/index.d.ts.map +1 -1
- package/dist/node/components/SimpleCardGrid/SimpleCardGrid.d.cts +2 -1
- package/dist/node/components/SimpleCardGrid/SimpleCardGrid.d.cts.map +1 -1
- package/dist/node/components/SimpleCardGrid/SimpleCardGrid.d.mts +2 -1
- package/dist/node/components/SimpleCardGrid/SimpleCardGrid.d.mts.map +1 -1
- package/dist/node/components/SimpleCardGrid/SimpleCardGrid.d.ts +2 -1
- package/dist/node/components/SimpleCardGrid/SimpleCardGrid.d.ts.map +1 -1
- package/dist/node/components/SimpleCardGrid/index.d.cts +1 -1
- package/dist/node/components/SimpleCardGrid/index.d.cts.map +1 -1
- package/dist/node/components/SimpleCardGrid/index.d.mts +1 -1
- package/dist/node/components/SimpleCardGrid/index.d.mts.map +1 -1
- package/dist/node/components/SimpleCardGrid/index.d.ts +1 -1
- package/dist/node/components/SimpleCardGrid/index.d.ts.map +1 -1
- package/dist/node/components/index.d.cts +5 -5
- package/dist/node/components/index.d.cts.map +1 -1
- package/dist/node/components/index.d.mts +5 -5
- package/dist/node/components/index.d.mts.map +1 -1
- package/dist/node/components/index.d.ts +5 -5
- package/dist/node/components/index.d.ts.map +1 -1
- package/dist/node/index.cjs +207 -146
- package/dist/node/index.cjs.map +1 -1
- package/dist/node/index.d.cts +1 -1
- package/dist/node/index.d.mts +1 -1
- package/dist/node/index.d.ts +1 -1
- package/dist/node/index.mjs +279 -0
- package/dist/node/index.mjs.map +1 -0
- package/package.json +12 -12
- package/src/components/CardContentEx.stories.tsx +8 -7
- package/src/components/CardContentEx.tsx +1 -1
- package/src/components/CardEx.tsx +7 -5
- package/src/components/FullWidthCard/FullWidthCard.stories.tsx +3 -3
- package/src/components/FullWidthCard/FullWidthCard.tsx +41 -32
- package/src/components/FullWidthCard/index.ts +1 -1
- package/src/components/PageCard.stories.tsx +6 -5
- package/src/components/PageCard.tsx +11 -9
- package/src/components/SimpleCard/SimpleCard.stories.tsx +4 -4
- package/src/components/SimpleCard/SimpleCard.tsx +65 -53
- package/src/components/SimpleCard/index.ts +1 -1
- package/src/components/SimpleCardGrid/SimpleCardGrid.stories.tsx +4 -4
- package/src/components/SimpleCardGrid/SimpleCardGrid.tsx +2 -1
- package/src/components/SimpleCardGrid/index.ts +1 -1
- package/src/components/index.ts +5 -5
- package/src/index.ts +1 -1
- package/dist/browser/index.js +0 -225
- package/dist/browser/index.js.map +0 -1
- package/dist/neutral/index.js +0 -225
- package/dist/neutral/index.js.map +0 -1
- package/dist/node/index.js +0 -226
- package/dist/node/index.js.map +0 -1
@@ -1,9 +1,9 @@
|
|
1
1
|
import { Refresh as RefreshIcon } from '@mui/icons-material'
|
2
2
|
import { CardHeader, CardHeaderProps, IconButton } from '@mui/material'
|
3
3
|
import { TypographyEx } from '@xyo-network/react-shared'
|
4
|
-
import { forwardRef, ReactNode } from 'react'
|
4
|
+
import React, { forwardRef, ReactNode } from 'react'
|
5
5
|
|
6
|
-
import { CardEx, CardExProps } from './CardEx.
|
6
|
+
import { CardEx, CardExProps } from './CardEx.tsx'
|
7
7
|
|
8
8
|
export interface PageCardProps extends CardExProps {
|
9
9
|
action?: ReactNode
|
@@ -15,20 +15,22 @@ const PageCardWithRef = forwardRef<HTMLDivElement, PageCardProps>(({ subheader,
|
|
15
15
|
return (
|
16
16
|
<CardEx style={{ backgroundColor: 'transparent', position: 'relative', ...style }} elevation={0} ref={ref} {...props}>
|
17
17
|
<CardHeader
|
18
|
-
title={
|
18
|
+
title={(
|
19
19
|
<TypographyEx variant="h5" gutterBottom>
|
20
20
|
{title}
|
21
21
|
</TypographyEx>
|
22
|
-
}
|
22
|
+
)}
|
23
23
|
subheader={<TypographyEx variant="subtitle1">{subheader}</TypographyEx>}
|
24
24
|
action={
|
25
25
|
action ?? (
|
26
26
|
<>
|
27
|
-
{onRefresh
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
27
|
+
{onRefresh
|
28
|
+
? (
|
29
|
+
<IconButton onClick={() => onRefresh?.()}>
|
30
|
+
<RefreshIcon />
|
31
|
+
</IconButton>
|
32
|
+
)
|
33
|
+
: null}
|
32
34
|
</>
|
33
35
|
)
|
34
36
|
}
|
@@ -1,10 +1,11 @@
|
|
1
1
|
import { Grid } from '@mui/material'
|
2
2
|
import { Meta, StoryFn } from '@storybook/react'
|
3
|
+
import React from 'react'
|
3
4
|
import { BrowserRouter } from 'react-router-dom'
|
4
5
|
|
5
6
|
import CoinbaseWalletIcon from './coinbase-wallet.svg'
|
6
7
|
import MoneyMedia from './money.jpg'
|
7
|
-
import { SimpleCard } from './SimpleCard.
|
8
|
+
import { SimpleCard } from './SimpleCard.tsx'
|
8
9
|
const StorybookEntry = {
|
9
10
|
argTypes: {},
|
10
11
|
component: SimpleCard,
|
@@ -16,7 +17,7 @@ const StorybookEntry = {
|
|
16
17
|
title: 'shared/SimpleCard',
|
17
18
|
} as Meta<typeof SimpleCard>
|
18
19
|
|
19
|
-
const Template: StoryFn<typeof SimpleCard> =
|
20
|
+
const Template: StoryFn<typeof SimpleCard> = args => (
|
20
21
|
<BrowserRouter>
|
21
22
|
<Grid container spacing={2}>
|
22
23
|
<Grid item xs={12} sm={6} md={3}>
|
@@ -80,9 +81,8 @@ CardWithAllParameters.args = {
|
|
80
81
|
}
|
81
82
|
|
82
83
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
83
|
-
|
84
|
+
// @ts-ignore
|
84
85
|
|
85
86
|
export { CardWithAllParameters, Default, DefaultMediaCard, DefaultSmallCard, DefaultWithImage, VariantButton }
|
86
87
|
|
87
|
-
// eslint-disable-next-line import/no-default-export
|
88
88
|
export default StorybookEntry
|
@@ -2,10 +2,10 @@ import { ArrowForwardRounded as ArrowForwardRoundedIcon } from '@mui/icons-mater
|
|
2
2
|
import { alpha, CardActions, CardContent, CardMedia, IconButton, Typography, useTheme } from '@mui/material'
|
3
3
|
import { FlexCol, FlexGrowCol } from '@xylabs/react-flexbox'
|
4
4
|
import { useIsMobile } from '@xyo-network/react-shared'
|
5
|
-
import { ReactNode, useState } from 'react'
|
5
|
+
import React, { ReactNode, useState } from 'react'
|
6
6
|
import { To, useNavigate } from 'react-router-dom'
|
7
7
|
|
8
|
-
import { CardEx, CardExProps } from '../CardEx.
|
8
|
+
import { CardEx, CardExProps } from '../CardEx.tsx'
|
9
9
|
|
10
10
|
export interface SimpleCardProps extends CardExProps {
|
11
11
|
desc?: ReactNode
|
@@ -37,9 +37,11 @@ export const SimpleCard: React.FC<SimpleCardProps> = ({
|
|
37
37
|
const navigate = useNavigate()
|
38
38
|
const isMobile = useIsMobile()
|
39
39
|
const localRouteChange = (to: To | undefined) => {
|
40
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
|
40
41
|
to ? navigate(to) : navigate('/404')
|
41
42
|
}
|
42
43
|
const externalRouteChange = (href: string | undefined) => {
|
44
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
|
43
45
|
href ? window.open(href) : navigate('/404')
|
44
46
|
}
|
45
47
|
return (
|
@@ -49,72 +51,82 @@ export const SimpleCard: React.FC<SimpleCardProps> = ({
|
|
49
51
|
'&:hover': {
|
50
52
|
cursor: interactionVariant == 'button' ? 'pointer' : null,
|
51
53
|
},
|
52
|
-
backgroundColor: alpha(theme.palette.primary.light, 0.05),
|
54
|
+
'backgroundColor': alpha(theme.palette.primary.light, 0.05),
|
53
55
|
...sx,
|
54
56
|
}}
|
55
57
|
onMouseEnter={() =>
|
56
|
-
isMobile
|
57
|
-
|
58
|
-
|
59
|
-
|
58
|
+
isMobile
|
59
|
+
? null
|
60
|
+
: interactionVariant == 'button'
|
61
|
+
? setRaised(true)
|
62
|
+
: null}
|
60
63
|
onMouseLeave={() =>
|
61
|
-
isMobile
|
62
|
-
|
63
|
-
|
64
|
-
|
64
|
+
isMobile
|
65
|
+
? null
|
66
|
+
: interactionVariant == 'button'
|
67
|
+
? setRaised(false)
|
68
|
+
: null}
|
65
69
|
onClick={() =>
|
66
|
-
interactionVariant == 'button'
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
70
|
+
interactionVariant == 'button'
|
71
|
+
? href
|
72
|
+
? externalRouteChange(href)
|
73
|
+
: to
|
74
|
+
? localRouteChange(to)
|
75
|
+
: navigate('/404')
|
76
|
+
: null}
|
72
77
|
{...props}
|
73
78
|
>
|
74
|
-
{media
|
75
|
-
<CardMedia component="img" height="100" image={media} alt="" />
|
76
|
-
|
79
|
+
{media
|
80
|
+
? <CardMedia component="img" height="100" image={media} alt="" />
|
81
|
+
: null}
|
77
82
|
|
78
83
|
<CardContent sx={{ height: '100%' }}>
|
79
84
|
<FlexCol width="100%" alignItems="flex-start">
|
80
|
-
{iconImage
|
81
|
-
<img src={iconImage} height="40px" style={{ paddingBottom: '8px' }} />
|
82
|
-
|
83
|
-
{typeof headline === 'string'
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
85
|
+
{iconImage
|
86
|
+
? <img src={iconImage} height="40px" style={{ paddingBottom: '8px' }} />
|
87
|
+
: null}
|
88
|
+
{typeof headline === 'string'
|
89
|
+
? (
|
90
|
+
<Typography variant={small ? 'body1' : 'h6'} textAlign="left" gutterBottom>
|
91
|
+
{headline}
|
92
|
+
</Typography>
|
93
|
+
)
|
94
|
+
: headline}
|
95
|
+
{subtitle
|
96
|
+
? (
|
97
|
+
<Typography variant="subtitle2" textAlign="left" gutterBottom>
|
98
|
+
{subtitle}
|
99
|
+
</Typography>
|
100
|
+
)
|
101
|
+
: null}
|
93
102
|
<Typography variant={small ? 'caption' : 'body1'} textAlign="left" gutterBottom>
|
94
103
|
{desc}
|
95
104
|
</Typography>
|
96
105
|
</FlexCol>
|
97
106
|
</CardContent>
|
98
|
-
{interactionVariant == 'button'
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
107
|
+
{interactionVariant == 'button'
|
108
|
+
? (
|
109
|
+
<CardActions>
|
110
|
+
<FlexGrowCol alignItems="flex-end">
|
111
|
+
<IconButton
|
112
|
+
color={raised ? 'secondary' : 'primary'}
|
113
|
+
size={small ? 'small' : 'medium'}
|
114
|
+
onClick={() =>
|
115
|
+
href
|
116
|
+
? externalRouteChange(href)
|
117
|
+
: to
|
118
|
+
? localRouteChange(to)
|
119
|
+
: navigate('/404')}
|
120
|
+
disableFocusRipple
|
121
|
+
disableRipple
|
122
|
+
disableTouchRipple
|
123
|
+
>
|
124
|
+
<ArrowForwardRoundedIcon fontSize={small ? 'small' : 'medium'} />
|
125
|
+
</IconButton>
|
126
|
+
</FlexGrowCol>
|
127
|
+
</CardActions>
|
128
|
+
)
|
129
|
+
: null}
|
118
130
|
</CardEx>
|
119
131
|
)
|
120
132
|
}
|
@@ -1 +1 @@
|
|
1
|
-
export * from './SimpleCard.
|
1
|
+
export * from './SimpleCard.tsx'
|
@@ -1,9 +1,10 @@
|
|
1
1
|
import { Meta, StoryFn } from '@storybook/react'
|
2
|
+
import React from 'react'
|
2
3
|
import { BrowserRouter } from 'react-router-dom'
|
3
4
|
|
4
5
|
import CoinbaseWalletIcon from './coinbase-wallet.svg'
|
5
6
|
import MoneyMedia from './money.jpg'
|
6
|
-
import { SimpleCardGrid } from './SimpleCardGrid.
|
7
|
+
import { SimpleCardGrid } from './SimpleCardGrid.tsx'
|
7
8
|
const StorybookEntry = {
|
8
9
|
argTypes: {},
|
9
10
|
component: SimpleCardGrid,
|
@@ -15,7 +16,7 @@ const StorybookEntry = {
|
|
15
16
|
title: 'shared/SimpleCardGrid',
|
16
17
|
} as Meta<typeof SimpleCardGrid>
|
17
18
|
|
18
|
-
const Template: StoryFn<typeof SimpleCardGrid> =
|
19
|
+
const Template: StoryFn<typeof SimpleCardGrid> = args => (
|
19
20
|
<BrowserRouter>
|
20
21
|
<SimpleCardGrid {...args}></SimpleCardGrid>
|
21
22
|
</BrowserRouter>
|
@@ -69,9 +70,8 @@ Default.args = {
|
|
69
70
|
}
|
70
71
|
|
71
72
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
72
|
-
|
73
|
+
// @ts-ignore
|
73
74
|
|
74
75
|
export { Default }
|
75
76
|
|
76
|
-
// eslint-disable-next-line import/no-default-export
|
77
77
|
export default StorybookEntry
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import { Grid, GridProps } from '@mui/material'
|
2
|
+
import React from 'react'
|
2
3
|
|
3
|
-
import { SimpleCard, SimpleCardProps } from '../SimpleCard/index.
|
4
|
+
import { SimpleCard, SimpleCardProps } from '../SimpleCard/index.ts'
|
4
5
|
|
5
6
|
export interface SimpleCardGridProps extends GridProps {
|
6
7
|
cards?: SimpleCardProps[]
|
@@ -1 +1 @@
|
|
1
|
-
export * from './SimpleCardGrid.
|
1
|
+
export * from './SimpleCardGrid.tsx'
|
package/src/components/index.ts
CHANGED
@@ -1,5 +1,5 @@
|
|
1
|
-
export * from './CardContentEx.
|
2
|
-
export * from './CardEx.
|
3
|
-
export * from './FullWidthCard/index.
|
4
|
-
export * from './PageCard.
|
5
|
-
export * from './SimpleCard/index.
|
1
|
+
export * from './CardContentEx.tsx'
|
2
|
+
export * from './CardEx.tsx'
|
3
|
+
export * from './FullWidthCard/index.ts'
|
4
|
+
export * from './PageCard.tsx'
|
5
|
+
export * from './SimpleCard/index.ts'
|
package/src/index.ts
CHANGED
@@ -1 +1 @@
|
|
1
|
-
export * from './components/index.
|
1
|
+
export * from './components/index.ts'
|
package/dist/browser/index.js
DELETED
@@ -1,225 +0,0 @@
|
|
1
|
-
// src/components/CardContentEx.tsx
|
2
|
-
import { CardContent, styled } from "@mui/material";
|
3
|
-
import { useShareForwardedRef } from "@xyo-network/react-shared";
|
4
|
-
import { forwardRef, useEffect } from "react";
|
5
|
-
import { jsx } from "react/jsx-runtime";
|
6
|
-
var CardContentExRoot = styled(CardContent, {
|
7
|
-
name: "CardContentEx",
|
8
|
-
shouldForwardProp: (prop) => !["variant", "removePadding"].includes(prop),
|
9
|
-
slot: "Root"
|
10
|
-
})(({ variant, removePadding }) => ({
|
11
|
-
...(variant === "scrollable" || removePadding) && {
|
12
|
-
[":last-child"]: {
|
13
|
-
paddingBottom: 0
|
14
|
-
},
|
15
|
-
overflow: "auto",
|
16
|
-
paddingTop: 0,
|
17
|
-
...removePadding && { padding: 0 }
|
18
|
-
}
|
19
|
-
}));
|
20
|
-
var CardContentExWithRef = forwardRef(({ scrollToTop = 0, refreshRef = 0, ...props }, ref) => {
|
21
|
-
const sharedRef = useShareForwardedRef(ref, refreshRef);
|
22
|
-
useEffect(() => {
|
23
|
-
if (sharedRef && scrollToTop) {
|
24
|
-
sharedRef.current?.scroll({ behavior: "smooth", top: 0 });
|
25
|
-
}
|
26
|
-
}, [sharedRef, scrollToTop]);
|
27
|
-
return /* @__PURE__ */ jsx(CardContentExRoot, { ref: sharedRef, ...props });
|
28
|
-
});
|
29
|
-
CardContentExWithRef.displayName = "CardContentEx";
|
30
|
-
var CardContentEx = CardContentExWithRef;
|
31
|
-
|
32
|
-
// src/components/CardEx.tsx
|
33
|
-
import { Card } from "@mui/material";
|
34
|
-
import { useGradientStyles } from "@xyo-network/react-shared";
|
35
|
-
import { forwardRef as forwardRef2 } from "react";
|
36
|
-
import { jsx as jsx2 } from "react/jsx-runtime";
|
37
|
-
var CardExWithRef = forwardRef2(({ style, gradient, ...props }, ref) => {
|
38
|
-
const { styles } = useGradientStyles();
|
39
|
-
const gradientStyle = gradient === "border" ? styles.border : gradient === "background" ? styles.background : {};
|
40
|
-
return /* @__PURE__ */ jsx2(
|
41
|
-
Card,
|
42
|
-
{
|
43
|
-
style: {
|
44
|
-
...gradientStyle,
|
45
|
-
...style
|
46
|
-
},
|
47
|
-
ref,
|
48
|
-
...props
|
49
|
-
}
|
50
|
-
);
|
51
|
-
});
|
52
|
-
CardExWithRef.displayName = "CardEx";
|
53
|
-
var CardEx = CardExWithRef;
|
54
|
-
|
55
|
-
// src/components/FullWidthCard/FullWidthCard.tsx
|
56
|
-
import { ArrowForwardRounded as ArrowForwardRoundedIcon } from "@mui/icons-material";
|
57
|
-
import { alpha, Card as Card2, CardActions, CardContent as CardContent2, CardMedia, Grid, IconButton, Typography, useTheme, Zoom } from "@mui/material";
|
58
|
-
import { FlexGrowCol } from "@xylabs/react-flexbox";
|
59
|
-
import { useIsMobile } from "@xyo-network/react-shared";
|
60
|
-
import { useState } from "react";
|
61
|
-
import { useNavigate } from "react-router-dom";
|
62
|
-
import { jsx as jsx3, jsxs } from "react/jsx-runtime";
|
63
|
-
var FullWidthCard = ({ cardIsButton, desc, href, media, name, small, to, ...props }) => {
|
64
|
-
const theme = useTheme();
|
65
|
-
const [raised, setRaised] = useState(false);
|
66
|
-
const navigate = useNavigate();
|
67
|
-
const isMobile = useIsMobile();
|
68
|
-
const localRouteChange = (to2) => {
|
69
|
-
to2 ? navigate(to2) : navigate("/404");
|
70
|
-
};
|
71
|
-
const externalRouteChange = (href2) => {
|
72
|
-
href2 ? window.open(href2) : navigate("/404");
|
73
|
-
};
|
74
|
-
return /* @__PURE__ */ jsxs(
|
75
|
-
Card2,
|
76
|
-
{
|
77
|
-
elevation: raised ? 3 : 0,
|
78
|
-
style: { height: "100%", width: "100%" },
|
79
|
-
...props,
|
80
|
-
sx: {
|
81
|
-
"&:hover": {
|
82
|
-
cursor: "pointer"
|
83
|
-
},
|
84
|
-
backgroundColor: alpha(theme.palette.primary.light, 0.05)
|
85
|
-
},
|
86
|
-
onMouseEnter: () => isMobile ? null : cardIsButton ? setRaised(true) : null,
|
87
|
-
onMouseLeave: () => isMobile ? null : cardIsButton ? setRaised(false) : null,
|
88
|
-
onClick: () => cardIsButton ? href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate("/404") : null,
|
89
|
-
children: [
|
90
|
-
media ? /* @__PURE__ */ jsx3(CardMedia, { component: "img", height: "100", image: media, alt: "" }) : null,
|
91
|
-
/* @__PURE__ */ jsx3(CardContent2, { children: /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", paddingY: 2, paddingX: 2, children: [
|
92
|
-
/* @__PURE__ */ jsx3(Grid, { item: true, xs: 12, md: 6, children: typeof name === "string" ? /* @__PURE__ */ jsx3(Typography, { fontWeight: 700, variant: "h2", textAlign: "left", paddingBottom: 1, children: name }) : name }),
|
93
|
-
/* @__PURE__ */ jsx3(Grid, { item: true, xs: 12, md: 5, children: /* @__PURE__ */ jsx3(Typography, { variant: "body1", fontWeight: 400, textAlign: "left", children: desc }) }),
|
94
|
-
/* @__PURE__ */ jsx3(Grid, { item: true, xs: 1, display: isMobile ? "none" : "flex", justifyContent: "center", children: /* @__PURE__ */ jsx3(Zoom, { in: raised, children: /* @__PURE__ */ jsx3(
|
95
|
-
IconButton,
|
96
|
-
{
|
97
|
-
color: "primary",
|
98
|
-
size: small ? "small" : "medium",
|
99
|
-
onClick: () => href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate("/404"),
|
100
|
-
disableFocusRipple: true,
|
101
|
-
disableRipple: true,
|
102
|
-
disableTouchRipple: true,
|
103
|
-
children: /* @__PURE__ */ jsx3(ArrowForwardRoundedIcon, { fontSize: small ? "small" : "medium" })
|
104
|
-
}
|
105
|
-
) }) })
|
106
|
-
] }) }),
|
107
|
-
/* @__PURE__ */ jsx3(CardActions, { sx: { display: { md: isMobile ? "flex" : "none" } }, children: /* @__PURE__ */ jsx3(FlexGrowCol, { alignItems: "flex-end", children: /* @__PURE__ */ jsx3(
|
108
|
-
IconButton,
|
109
|
-
{
|
110
|
-
color: "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__ */ jsx3(ArrowForwardRoundedIcon, { fontSize: small ? "small" : "medium" })
|
117
|
-
}
|
118
|
-
) }) })
|
119
|
-
]
|
120
|
-
}
|
121
|
-
);
|
122
|
-
};
|
123
|
-
|
124
|
-
// src/components/PageCard.tsx
|
125
|
-
import { Refresh as RefreshIcon } from "@mui/icons-material";
|
126
|
-
import { CardHeader, IconButton as IconButton2 } from "@mui/material";
|
127
|
-
import { TypographyEx } from "@xyo-network/react-shared";
|
128
|
-
import { forwardRef as forwardRef3 } from "react";
|
129
|
-
import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
|
130
|
-
var PageCardWithRef = forwardRef3(({ subheader, title, onRefresh, children, action, style, ...props }, ref) => {
|
131
|
-
return /* @__PURE__ */ jsxs2(CardEx, { style: { backgroundColor: "transparent", position: "relative", ...style }, elevation: 0, ref, ...props, children: [
|
132
|
-
/* @__PURE__ */ jsx4(
|
133
|
-
CardHeader,
|
134
|
-
{
|
135
|
-
title: /* @__PURE__ */ jsx4(TypographyEx, { variant: "h5", gutterBottom: true, children: title }),
|
136
|
-
subheader: /* @__PURE__ */ jsx4(TypographyEx, { variant: "subtitle1", children: subheader }),
|
137
|
-
action: action ?? /* @__PURE__ */ jsx4(Fragment, { children: onRefresh ? /* @__PURE__ */ jsx4(IconButton2, { onClick: () => onRefresh?.(), children: /* @__PURE__ */ jsx4(RefreshIcon, {}) }) : null })
|
138
|
-
}
|
139
|
-
),
|
140
|
-
children
|
141
|
-
] });
|
142
|
-
});
|
143
|
-
PageCardWithRef.displayName = "PageCard";
|
144
|
-
var PageCard = PageCardWithRef;
|
145
|
-
|
146
|
-
// src/components/SimpleCard/SimpleCard.tsx
|
147
|
-
import { ArrowForwardRounded as ArrowForwardRoundedIcon2 } from "@mui/icons-material";
|
148
|
-
import { alpha as alpha2, CardActions as CardActions2, CardContent as CardContent3, CardMedia as CardMedia2, IconButton as IconButton3, Typography as Typography2, useTheme as useTheme2 } from "@mui/material";
|
149
|
-
import { FlexCol, FlexGrowCol as FlexGrowCol2 } from "@xylabs/react-flexbox";
|
150
|
-
import { useIsMobile as useIsMobile2 } from "@xyo-network/react-shared";
|
151
|
-
import { useState as useState2 } from "react";
|
152
|
-
import { useNavigate as useNavigate2 } from "react-router-dom";
|
153
|
-
import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
|
154
|
-
var SimpleCard = ({
|
155
|
-
desc,
|
156
|
-
iconImage,
|
157
|
-
interactionVariant = "card",
|
158
|
-
headline,
|
159
|
-
href,
|
160
|
-
media,
|
161
|
-
small,
|
162
|
-
subtitle,
|
163
|
-
sx,
|
164
|
-
to,
|
165
|
-
...props
|
166
|
-
}) => {
|
167
|
-
const theme = useTheme2();
|
168
|
-
const [raised, setRaised] = useState2(false);
|
169
|
-
const navigate = useNavigate2();
|
170
|
-
const isMobile = useIsMobile2();
|
171
|
-
const localRouteChange = (to2) => {
|
172
|
-
to2 ? navigate(to2) : navigate("/404");
|
173
|
-
};
|
174
|
-
const externalRouteChange = (href2) => {
|
175
|
-
href2 ? window.open(href2) : navigate("/404");
|
176
|
-
};
|
177
|
-
return /* @__PURE__ */ jsxs3(
|
178
|
-
CardEx,
|
179
|
-
{
|
180
|
-
elevation: raised ? 3 : 0,
|
181
|
-
sx: {
|
182
|
-
"&:hover": {
|
183
|
-
cursor: interactionVariant == "button" ? "pointer" : null
|
184
|
-
},
|
185
|
-
backgroundColor: alpha2(theme.palette.primary.light, 0.05),
|
186
|
-
...sx
|
187
|
-
},
|
188
|
-
onMouseEnter: () => isMobile ? null : interactionVariant == "button" ? setRaised(true) : null,
|
189
|
-
onMouseLeave: () => isMobile ? null : interactionVariant == "button" ? setRaised(false) : null,
|
190
|
-
onClick: () => interactionVariant == "button" ? href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate("/404") : null,
|
191
|
-
...props,
|
192
|
-
children: [
|
193
|
-
media ? /* @__PURE__ */ jsx5(CardMedia2, { component: "img", height: "100", image: media, alt: "" }) : null,
|
194
|
-
/* @__PURE__ */ jsx5(CardContent3, { sx: { height: "100%" }, children: /* @__PURE__ */ jsxs3(FlexCol, { width: "100%", alignItems: "flex-start", children: [
|
195
|
-
iconImage ? /* @__PURE__ */ jsx5("img", { src: iconImage, height: "40px", style: { paddingBottom: "8px" } }) : null,
|
196
|
-
typeof headline === "string" ? /* @__PURE__ */ jsx5(Typography2, { variant: small ? "body1" : "h6", textAlign: "left", gutterBottom: true, children: headline }) : headline,
|
197
|
-
subtitle ? /* @__PURE__ */ jsx5(Typography2, { variant: "subtitle2", textAlign: "left", gutterBottom: true, children: subtitle }) : null,
|
198
|
-
/* @__PURE__ */ jsx5(Typography2, { variant: small ? "caption" : "body1", textAlign: "left", gutterBottom: true, children: desc })
|
199
|
-
] }) }),
|
200
|
-
interactionVariant == "button" ? /* @__PURE__ */ jsx5(CardActions2, { children: /* @__PURE__ */ jsx5(FlexGrowCol2, { alignItems: "flex-end", children: /* @__PURE__ */ jsx5(
|
201
|
-
IconButton3,
|
202
|
-
{
|
203
|
-
color: raised ? "secondary" : "primary",
|
204
|
-
size: small ? "small" : "medium",
|
205
|
-
onClick: () => href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate("/404"),
|
206
|
-
disableFocusRipple: true,
|
207
|
-
disableRipple: true,
|
208
|
-
disableTouchRipple: true,
|
209
|
-
children: /* @__PURE__ */ jsx5(ArrowForwardRoundedIcon2, { fontSize: small ? "small" : "medium" })
|
210
|
-
}
|
211
|
-
) }) }) : null
|
212
|
-
]
|
213
|
-
}
|
214
|
-
);
|
215
|
-
};
|
216
|
-
export {
|
217
|
-
CardContentEx,
|
218
|
-
CardContentExWithRef,
|
219
|
-
CardEx,
|
220
|
-
CardExWithRef,
|
221
|
-
FullWidthCard,
|
222
|
-
PageCard,
|
223
|
-
SimpleCard
|
224
|
-
};
|
225
|
-
//# sourceMappingURL=index.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../../src/components/CardContentEx.tsx","../../src/components/CardEx.tsx","../../src/components/FullWidthCard/FullWidthCard.tsx","../../src/components/PageCard.tsx","../../src/components/SimpleCard/SimpleCard.tsx"],"sourcesContent":["import { CardContent, CardContentProps, styled } from '@mui/material'\nimport { useShareForwardedRef } from '@xyo-network/react-shared'\nimport { forwardRef, useEffect } from 'react'\n\nconst CardContentExRoot = styled(CardContent, {\n name: 'CardContentEx',\n shouldForwardProp: (prop: string) => !['variant', 'removePadding'].includes(prop),\n slot: 'Root',\n})<CardContentExProps>(({ variant, removePadding }) => ({\n ...((variant === 'scrollable' || removePadding) && {\n [':last-child']: {\n paddingBottom: 0,\n },\n overflow: 'auto',\n paddingTop: 0,\n ...(removePadding && { padding: 0 }),\n }),\n}))\n\nexport type CardContentExProps = CardContentProps & {\n refreshRef?: number\n removePadding?: boolean\n scrollToTop?: number\n variant?: 'scrollable' | 'normal'\n}\n\nexport const CardContentExWithRef = forwardRef<HTMLDivElement | null, CardContentExProps>(({ scrollToTop = 0, refreshRef = 0, ...props }, ref) => {\n const sharedRef = useShareForwardedRef<HTMLDivElement>(ref, refreshRef)\n\n useEffect(() => {\n if (sharedRef && scrollToTop) {\n sharedRef.current?.scroll({ behavior: 'smooth', top: 0 })\n }\n }, [sharedRef, scrollToTop])\n\n return <CardContentExRoot ref={sharedRef} {...props} />\n})\n\nCardContentExWithRef.displayName = 'CardContentEx'\n\nexport const CardContentEx = CardContentExWithRef\n","import { Card, CardProps } from '@mui/material'\nimport { useGradientStyles } from '@xyo-network/react-shared'\nimport { forwardRef } from 'react'\n\nexport interface CardExProps extends CardProps {\n gradient?: 'border' | 'background'\n}\n\nexport const CardExWithRef = forwardRef<HTMLDivElement, CardExProps>(({ style, gradient, ...props }, ref) => {\n const { styles } = useGradientStyles()\n const gradientStyle =\n gradient === 'border' ? styles.border\n : gradient === 'background' ? styles.background\n : {}\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","import { ArrowForwardRounded as ArrowForwardRoundedIcon } from '@mui/icons-material'\nimport { alpha, Card, CardActions, CardContent, CardMedia, CardProps, Grid, IconButton, Typography, useTheme, Zoom } from '@mui/material'\nimport { 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\nexport interface FullWidthCardProps extends CardProps {\n cardIsButton?: boolean\n desc?: ReactNode\n href?: string\n linkText?: string\n media?: string\n name: ReactNode\n small?: boolean\n to?: To\n}\n\nexport const FullWidthCard: React.FC<FullWidthCardProps> = ({ cardIsButton, desc, href, media, name, small, to, ...props }) => {\n const theme = useTheme()\n const [raised, setRaised] = useState(false)\n const navigate = useNavigate()\n const isMobile = useIsMobile()\n\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\n return (\n <Card\n elevation={raised ? 3 : 0}\n style={{ height: '100%', width: '100%' }}\n {...props}\n sx={{\n '&:hover': {\n cursor: 'pointer',\n },\n backgroundColor: alpha(theme.palette.primary.light, 0.05),\n }}\n onMouseEnter={() =>\n isMobile ? null\n : cardIsButton ? setRaised(true)\n : null\n }\n onMouseLeave={() =>\n isMobile ? null\n : cardIsButton ? setRaised(false)\n : null\n }\n onClick={() =>\n cardIsButton ?\n href ? externalRouteChange(href)\n : to ? localRouteChange(to)\n : navigate('/404')\n : null\n }\n >\n {media ?\n <CardMedia component=\"img\" height=\"100\" image={media} alt=\"\" />\n : null}\n\n <CardContent>\n <Grid container alignItems=\"center\" paddingY={2} paddingX={2}>\n <Grid item xs={12} md={6}>\n {typeof name === 'string' ?\n <Typography fontWeight={700} variant=\"h2\" textAlign=\"left\" paddingBottom={1}>\n {name}\n </Typography>\n : name}\n </Grid>\n <Grid item xs={12} md={5}>\n <Typography variant=\"body1\" fontWeight={400} textAlign=\"left\">\n {desc}\n </Typography>\n </Grid>\n <Grid item xs={1} display={isMobile ? 'none' : 'flex'} justifyContent=\"center\">\n <Zoom in={raised}>\n <IconButton\n color=\"primary\"\n size={small ? 'small' : 'medium'}\n onClick={() =>\n href ? externalRouteChange(href)\n : to ? localRouteChange(to)\n : navigate('/404')\n }\n disableFocusRipple\n disableRipple\n disableTouchRipple\n >\n <ArrowForwardRoundedIcon fontSize={small ? 'small' : 'medium'} />\n </IconButton>\n </Zoom>\n </Grid>\n </Grid>\n </CardContent>\n <CardActions sx={{ display: { md: isMobile ? 'flex' : 'none' } }}>\n <FlexGrowCol alignItems=\"flex-end\">\n <IconButton\n color=\"primary\"\n size={small ? 'small' : 'medium'}\n onClick={() =>\n href ? externalRouteChange(href)\n : to ? localRouteChange(to)\n : navigate('/404')\n }\n disableFocusRipple\n disableRipple\n disableTouchRipple\n >\n <ArrowForwardRoundedIcon fontSize={small ? 'small' : 'medium'} />\n </IconButton>\n </FlexGrowCol>\n </CardActions>\n </Card>\n )\n}\n","import { Refresh as RefreshIcon } from '@mui/icons-material'\nimport { CardHeader, CardHeaderProps, IconButton } from '@mui/material'\nimport { TypographyEx } from '@xyo-network/react-shared'\nimport { forwardRef, ReactNode } from 'react'\n\nimport { CardEx, CardExProps } from './CardEx.js'\n\nexport interface PageCardProps extends CardExProps {\n action?: ReactNode\n onRefresh?: () => void\n subheader?: CardHeaderProps['subheader']\n}\n\nconst PageCardWithRef = forwardRef<HTMLDivElement, PageCardProps>(({ subheader, title, onRefresh, children, action, style, ...props }, ref) => {\n return (\n <CardEx style={{ backgroundColor: 'transparent', position: 'relative', ...style }} elevation={0} ref={ref} {...props}>\n <CardHeader\n title={\n <TypographyEx variant=\"h5\" gutterBottom>\n {title}\n </TypographyEx>\n }\n subheader={<TypographyEx variant=\"subtitle1\">{subheader}</TypographyEx>}\n action={\n action ?? (\n <>\n {onRefresh ?\n <IconButton onClick={() => onRefresh?.()}>\n <RefreshIcon />\n </IconButton>\n : null}\n </>\n )\n }\n />\n {children}\n </CardEx>\n )\n})\n\nPageCardWithRef.displayName = 'PageCard'\n\nexport const PageCard = PageCardWithRef\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.js'\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={() =>\n isMobile ? null\n : interactionVariant == 'button' ? setRaised(true)\n : null\n }\n onMouseLeave={() =>\n isMobile ? null\n : interactionVariant == 'button' ? setRaised(false)\n : null\n }\n onClick={() =>\n interactionVariant == 'button' ?\n href ? externalRouteChange(href)\n : to ? localRouteChange(to)\n : navigate('/404')\n : null\n }\n {...props}\n >\n {media ?\n <CardMedia component=\"img\" height=\"100\" image={media} alt=\"\" />\n : null}\n\n <CardContent sx={{ height: '100%' }}>\n <FlexCol width=\"100%\" alignItems=\"flex-start\">\n {iconImage ?\n <img src={iconImage} height=\"40px\" style={{ paddingBottom: '8px' }} />\n : null}\n {typeof headline === 'string' ?\n <Typography variant={small ? 'body1' : 'h6'} textAlign=\"left\" gutterBottom>\n {headline}\n </Typography>\n : headline}\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={() =>\n href ? externalRouteChange(href)\n : to ? localRouteChange(to)\n : navigate('/404')\n }\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":"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","names":["forwardRef","jsx","Card","CardContent","jsx","to","href","IconButton","forwardRef","jsx","jsxs","forwardRef","IconButton","ArrowForwardRoundedIcon","alpha","CardActions","CardContent","CardMedia","IconButton","Typography","useTheme","FlexGrowCol","useIsMobile","useState","useNavigate","jsx","jsxs","useTheme","useState","useNavigate","useIsMobile","to","href","alpha","CardMedia","CardContent","Typography","CardActions","FlexGrowCol","IconButton","ArrowForwardRoundedIcon"]}
|