Skip to content

Commit 326e1db

Browse files
tripolskypetrtripolskypetr
committed
mantine-modal
1 parent 3a2f358 commit 326e1db

File tree

7 files changed

+157
-5
lines changed

7 files changed

+157
-5
lines changed

‎.env.example

+1-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1 @@
1-
2-
CC_SENTRY_DNS=
3-
CC_FORCE_MEMORY_HISTORY=
4-
CC_APP_NAME=react-declarative
5-
CC_POCKETBASE_URL=http://127.0.0.1:8090
1+
CC_ENABLE_MANTINE_PROMOTE=1

‎mantine.svg

+1
Loading

‎src/components/App.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import "./common/Currency";
3030
import "./common/StockChart";
3131
import useStateContext from "../context/useStateContext";
3232
import SubscribeModal from "./SubscribeModal";
33+
import MantineModal from "./MantineModal";
3334

3435
const isDevelopment = () => {
3536
return process.env.CC_NODE_ENV === "development";
@@ -122,6 +123,14 @@ export const App = () => {
122123
"*",
123124
);
124125
}}
126+
onClick={() => {
127+
window.top?.postMessage(
128+
{
129+
type: "click-action",
130+
},
131+
"*",
132+
);
133+
}}
125134
/>
126135
</>
127136
)
@@ -223,6 +232,7 @@ export const App = () => {
223232
<Split direction={isMobile ? "vertical" : "horizontal"}>
224233
{renderInner()}
225234
</Split>
235+
<MantineModal />
226236
<SubscribeModal />
227237
</Box>
228238
);

‎src/components/MantineModal.tsx

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import { ActionBounce, ActionState, createLsManager, openBlank, useChangeSubject, useOnce, useSubject } from "react-declarative";
2+
import { CC_ENABLE_MANTINE_PROMOTE } from "../config/params";
3+
import { useEffect, useState } from "react";
4+
import Popover from "@mui/material/Popover";
5+
import { ThemeProvider, createTheme } from "@mui/material/styles";
6+
import { Avatar, Box, Button, Card, CardActions, CardContent, CardHeader, CardMedia, ClickAwayListener, IconButton, Paper, Typography } from "@mui/material";
7+
import Mantine from "../icons/Mantine";
8+
import { Close } from "@mui/icons-material";
9+
10+
const STORAGE = createLsManager<boolean>("REACT_DECLARATIVE_PLAYGROUND_FIRST_MANTINE");
11+
12+
const THEME = createTheme();
13+
const EMIT_CLICK_COUNT = 3;
14+
const ANIMATION_DELAY = 100;
15+
16+
export const MantineModal = () => {
17+
18+
const [open, setOpen] = useState(false);
19+
20+
const stateSubject = useSubject<ActionState>();
21+
22+
const openSubject = useChangeSubject(open);
23+
24+
useOnce(() => {
25+
let counter = 0;
26+
const commitClick = () => {
27+
if (STORAGE.getValue()) {
28+
return;
29+
}
30+
if (++counter === EMIT_CLICK_COUNT) {
31+
setOpen(true);
32+
STORAGE.setValue(true);
33+
}
34+
};
35+
window.addEventListener("message", ({ data }) => {
36+
if (data.type === "click-action") {
37+
commitClick();
38+
}
39+
});
40+
openSubject.debounce(ANIMATION_DELAY).connect(() => {
41+
stateSubject.next(ActionState.Abort);
42+
});
43+
});
44+
45+
if (!CC_ENABLE_MANTINE_PROMOTE) {
46+
return;
47+
}
48+
49+
const renderInner = () => {
50+
if (!open) {
51+
return null;
52+
}
53+
return (
54+
<ActionBounce
55+
transparentPaper
56+
stateSubject={stateSubject}
57+
sx={{
58+
position: 'fixed',
59+
top: '8px',
60+
right: '8px',
61+
pl: 1,
62+
zIndex: 999,
63+
}}
64+
onAnimationEnd={(state) => {
65+
if (state === ActionState.Abort) {
66+
stateSubject.next(ActionState.Initial);
67+
}
68+
}}
69+
>
70+
<Card sx={{ position: 'relative' }}>
71+
<IconButton size="large" sx={{ position: 'absolute', top: '2px', right: '2px' }} onClick={() => setOpen(false)}>
72+
<Close />
73+
</IconButton>
74+
<CardHeader
75+
avatar={
76+
<Mantine />
77+
}
78+
title={(
79+
<Typography variant="h5" component="div">
80+
The Mantine Design
81+
</Typography>
82+
)}
83+
subheader={(
84+
<Typography sx={{ color: 'text.secondary', mb: 1.5 }}>
85+
Single-line design upgrade
86+
</Typography>
87+
)}
88+
/>
89+
<CardContent>
90+
<Typography variant="body2">
91+
Take a look how your app will look after installing the new theme
92+
</Typography>
93+
</CardContent>
94+
<CardActions>
95+
<Button size="small" onClick={() => openBlank("https://react-declarative-mantine.github.io")}>Continue</Button>
96+
</CardActions>
97+
</Card>
98+
</ActionBounce>
99+
);
100+
}
101+
102+
return (
103+
<ThemeProvider theme={THEME}>
104+
{renderInner()}
105+
</ThemeProvider>
106+
);
107+
};
108+
109+
export default MantineModal;
110+

‎src/components/Preview.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ declare global {
2020

2121
interface IPreviewProps {
2222
onNotify: (notify: string) => void;
23+
onClick: () => void;
2324
}
2425

2526
const loadScripts = singleshot(async () => {
@@ -29,6 +30,7 @@ const loadScripts = singleshot(async () => {
2930

3031
export const Preview = ({
3132
onNotify,
33+
onClick,
3234
}: IPreviewProps) => {
3335
const transpileSubject = useSubject<void>();
3436

@@ -112,6 +114,7 @@ export const Preview = ({
112114
fields={window.Executor.fields}
113115
data={window.Executor.data}
114116
onChange={(data, initial) => !initial && onNotify(JSON.stringify(data, null, 2))}
117+
onClick={onClick}
115118
sx={{ p: 1 }}
116119
payload={window.Executor.payload}
117120
/>

‎src/config/params.ts

+2
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
11
export const CC_HEADER_HEIGHT = 50;
2+
3+
export const CC_ENABLE_MANTINE_PROMOTE = !!process.env.CC_ENABLE_MANTINE_PROMOTE || false;

‎src/icons/Mantine.tsx

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import * as React from "react"
2+
3+
function Mantine(props: React.HTMLAttributes<HTMLOrSVGElement>) {
4+
return (
5+
<svg
6+
xmlns="http://www.w3.org/2000/svg"
7+
viewBox="0 0 169.151 170.298"
8+
height={64}
9+
width={64}
10+
{...props}
11+
>
12+
<g fill="none" fillRule="evenodd">
13+
<path
14+
fill="#339af0"
15+
fillRule="nonzero"
16+
d="M166.042 86.582c0-45.01-36.301-81.5-81.08-81.5-44.781 0-81.082 36.49-81.082 81.5s36.3 81.5 81.08 81.5 81.082-36.49 81.082-81.5Z"
17+
/>
18+
<g fill="#fff">
19+
<path
20+
fillRule="nonzero"
21+
d="M69.862 48.132a6.234 6.234 0 0 0-.336 6.884 6.14 6.14 0 0 0 1.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 0 0-1.616 1.786 6.211 6.211 0 0 0-.694 4.693 6.21 6.21 0 0 0 1.028 2.186 6.154 6.154 0 0 0 8.634 1.284 50.112 50.112 0 0 0 7.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 0 0 4.071-19.69 49.166 49.166 0 0 0-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H86.453a50.11 50.11 0 0 0-7.952-7.397 6.149 6.149 0 0 0-4.578-1.153 6.189 6.189 0 0 0-4.055 2.438h-.006z"
22+
/>
23+
<path d="M60.115 84.474a9.342 9.342 0 0 1 .632-3.608 9.261 9.261 0 0 1 1.967-3.077 9.143 9.143 0 0 1 2.994-2.063 9.06 9.06 0 0 1 7.103 0 9.144 9.144 0 0 1 2.995 2.063 9.261 9.261 0 0 1 1.967 3.077 9.34 9.34 0 0 1 .63 3.608 9.299 9.299 0 0 1-2.755 6.395 9.094 9.094 0 0 1-6.388 2.63 9.094 9.094 0 0 1-6.39-2.63 9.299 9.299 0 0 1-2.755-6.395z" />
24+
</g>
25+
</g>
26+
</svg>
27+
);
28+
}
29+
30+
export default Mantine;

0 commit comments

Comments
 (0)