umwd-components 0.1.40 → 0.1.42
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -13,21 +13,47 @@ var React = require('react');
|
|
|
13
13
|
var PropTypes = require('prop-types');
|
|
14
14
|
var material = require('@mui/material');
|
|
15
15
|
var Image = require('next/image');
|
|
16
|
-
require('@mui/icons-material');
|
|
17
16
|
|
|
18
17
|
function WebsitePlaceholder({
|
|
19
18
|
title,
|
|
20
19
|
announcement,
|
|
21
|
-
logo
|
|
20
|
+
logo,
|
|
21
|
+
children
|
|
22
22
|
}) {
|
|
23
23
|
const theme = material.useTheme();
|
|
24
|
+
|
|
25
|
+
// const [keysPressed, setKeysPressed] = React.useState({});
|
|
26
|
+
// let visible = true;
|
|
27
|
+
|
|
24
28
|
const [visible, setVisible] = React.useState(true);
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
+
let keysPressed = {};
|
|
30
|
+
const keyDownHandler = event => {
|
|
31
|
+
console.log("key down", event.key, keysPressed);
|
|
32
|
+
keysPressed = {
|
|
33
|
+
...keysPressed,
|
|
34
|
+
[event.key]: true
|
|
35
|
+
};
|
|
36
|
+
if (keysPressed["w"] === true && keysPressed["a"] === true && keysPressed["s"] === true && keysPressed["d"] === true) {
|
|
37
|
+
console.log("You found the easter egg!", visible);
|
|
38
|
+
// visible = Boolean(!visible);
|
|
39
|
+
setVisible(!visible);
|
|
29
40
|
}
|
|
30
41
|
};
|
|
42
|
+
const keyUpHandler = event => {
|
|
43
|
+
console.log("key up", event.key);
|
|
44
|
+
keysPressed[event.key] = false;
|
|
45
|
+
};
|
|
46
|
+
React.useEffect(() => {
|
|
47
|
+
document.addEventListener("keydown", keyDownHandler);
|
|
48
|
+
document.addEventListener("keyup", keyUpHandler);
|
|
49
|
+
return () => {
|
|
50
|
+
document.removeEventListener("keydown", keyDownHandler);
|
|
51
|
+
document.removeEventListener("keyup", keyUpHandler);
|
|
52
|
+
};
|
|
53
|
+
}, []);
|
|
54
|
+
React.useEffect(() => {
|
|
55
|
+
console.log("visible", visible);
|
|
56
|
+
}, [visible]);
|
|
31
57
|
return /*#__PURE__*/React.createElement(material.Box, {
|
|
32
58
|
sx: [visible && {
|
|
33
59
|
display: "grid",
|
|
@@ -43,8 +69,7 @@ function WebsitePlaceholder({
|
|
|
43
69
|
left: 0,
|
|
44
70
|
zIndex: 9000,
|
|
45
71
|
isolation: "isolate"
|
|
46
|
-
}]
|
|
47
|
-
onKeyDown: e => handleKeydown()
|
|
72
|
+
}]
|
|
48
73
|
}, visible && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(material.Typography, {
|
|
49
74
|
variant: "h1",
|
|
50
75
|
align: "center"
|
|
@@ -56,7 +81,7 @@ function WebsitePlaceholder({
|
|
|
56
81
|
}), /*#__PURE__*/React.createElement(material.Typography, {
|
|
57
82
|
variant: "h3",
|
|
58
83
|
align: "center"
|
|
59
|
-
}, announcement)));
|
|
84
|
+
}, announcement)), !visible && /*#__PURE__*/React.createElement(React.Fragment, null, children));
|
|
60
85
|
}
|
|
61
86
|
WebsitePlaceholder.propTypes = {
|
|
62
87
|
title: PropTypes.string.isRequired,
|
|
@@ -9,21 +9,47 @@ import React from 'react';
|
|
|
9
9
|
import PropTypes from 'prop-types';
|
|
10
10
|
import { useTheme, Box, Typography } from '@mui/material';
|
|
11
11
|
import Image from 'next/image';
|
|
12
|
-
import '@mui/icons-material';
|
|
13
12
|
|
|
14
13
|
function WebsitePlaceholder({
|
|
15
14
|
title,
|
|
16
15
|
announcement,
|
|
17
|
-
logo
|
|
16
|
+
logo,
|
|
17
|
+
children
|
|
18
18
|
}) {
|
|
19
19
|
const theme = useTheme();
|
|
20
|
+
|
|
21
|
+
// const [keysPressed, setKeysPressed] = React.useState({});
|
|
22
|
+
// let visible = true;
|
|
23
|
+
|
|
20
24
|
const [visible, setVisible] = React.useState(true);
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
+
let keysPressed = {};
|
|
26
|
+
const keyDownHandler = event => {
|
|
27
|
+
console.log("key down", event.key, keysPressed);
|
|
28
|
+
keysPressed = {
|
|
29
|
+
...keysPressed,
|
|
30
|
+
[event.key]: true
|
|
31
|
+
};
|
|
32
|
+
if (keysPressed["w"] === true && keysPressed["a"] === true && keysPressed["s"] === true && keysPressed["d"] === true) {
|
|
33
|
+
console.log("You found the easter egg!", visible);
|
|
34
|
+
// visible = Boolean(!visible);
|
|
35
|
+
setVisible(!visible);
|
|
25
36
|
}
|
|
26
37
|
};
|
|
38
|
+
const keyUpHandler = event => {
|
|
39
|
+
console.log("key up", event.key);
|
|
40
|
+
keysPressed[event.key] = false;
|
|
41
|
+
};
|
|
42
|
+
React.useEffect(() => {
|
|
43
|
+
document.addEventListener("keydown", keyDownHandler);
|
|
44
|
+
document.addEventListener("keyup", keyUpHandler);
|
|
45
|
+
return () => {
|
|
46
|
+
document.removeEventListener("keydown", keyDownHandler);
|
|
47
|
+
document.removeEventListener("keyup", keyUpHandler);
|
|
48
|
+
};
|
|
49
|
+
}, []);
|
|
50
|
+
React.useEffect(() => {
|
|
51
|
+
console.log("visible", visible);
|
|
52
|
+
}, [visible]);
|
|
27
53
|
return /*#__PURE__*/React.createElement(Box, {
|
|
28
54
|
sx: [visible && {
|
|
29
55
|
display: "grid",
|
|
@@ -39,8 +65,7 @@ function WebsitePlaceholder({
|
|
|
39
65
|
left: 0,
|
|
40
66
|
zIndex: 9000,
|
|
41
67
|
isolation: "isolate"
|
|
42
|
-
}]
|
|
43
|
-
onKeyDown: e => handleKeydown()
|
|
68
|
+
}]
|
|
44
69
|
}, visible && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
|
|
45
70
|
variant: "h1",
|
|
46
71
|
align: "center"
|
|
@@ -52,7 +77,7 @@ function WebsitePlaceholder({
|
|
|
52
77
|
}), /*#__PURE__*/React.createElement(Typography, {
|
|
53
78
|
variant: "h3",
|
|
54
79
|
align: "center"
|
|
55
|
-
}, announcement)));
|
|
80
|
+
}, announcement)), !visible && /*#__PURE__*/React.createElement(React.Fragment, null, children));
|
|
56
81
|
}
|
|
57
82
|
WebsitePlaceholder.propTypes = {
|
|
58
83
|
title: PropTypes.string.isRequired,
|
package/package.json
CHANGED
|
@@ -4,20 +4,52 @@ import React from "react";
|
|
|
4
4
|
import PropTypes from "prop-types";
|
|
5
5
|
import { Typography, Box, useTheme } from "@mui/material";
|
|
6
6
|
import Image from "next/image";
|
|
7
|
-
import { Visibility } from "@mui/icons-material";
|
|
8
7
|
|
|
9
|
-
function WebsitePlaceholder({ title, announcement, logo }) {
|
|
8
|
+
function WebsitePlaceholder({ title, announcement, logo, children }) {
|
|
10
9
|
const theme = useTheme();
|
|
11
10
|
|
|
11
|
+
// const [keysPressed, setKeysPressed] = React.useState({});
|
|
12
|
+
// let visible = true;
|
|
13
|
+
|
|
12
14
|
const [visible, setVisible] = React.useState(true);
|
|
13
15
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
let keysPressed = {};
|
|
17
|
+
|
|
18
|
+
const keyDownHandler = (event) => {
|
|
19
|
+
console.log("key down", event.key, keysPressed);
|
|
20
|
+
keysPressed = { ...keysPressed, [event.key]: true };
|
|
21
|
+
|
|
22
|
+
if (
|
|
23
|
+
keysPressed["w"] === true &&
|
|
24
|
+
keysPressed["a"] === true &&
|
|
25
|
+
keysPressed["s"] === true &&
|
|
26
|
+
keysPressed["d"] === true
|
|
27
|
+
) {
|
|
28
|
+
console.log("You found the easter egg!", visible);
|
|
29
|
+
// visible = Boolean(!visible);
|
|
30
|
+
setVisible(!visible);
|
|
18
31
|
}
|
|
19
32
|
};
|
|
20
33
|
|
|
34
|
+
const keyUpHandler = (event) => {
|
|
35
|
+
console.log("key up", event.key);
|
|
36
|
+
keysPressed[event.key] = false;
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
React.useEffect(() => {
|
|
40
|
+
document.addEventListener("keydown", keyDownHandler);
|
|
41
|
+
document.addEventListener("keyup", keyUpHandler);
|
|
42
|
+
|
|
43
|
+
return () => {
|
|
44
|
+
document.removeEventListener("keydown", keyDownHandler);
|
|
45
|
+
document.removeEventListener("keyup", keyUpHandler);
|
|
46
|
+
};
|
|
47
|
+
}, []);
|
|
48
|
+
|
|
49
|
+
React.useEffect(() => {
|
|
50
|
+
console.log("visible", visible);
|
|
51
|
+
}, [visible]);
|
|
52
|
+
|
|
21
53
|
return (
|
|
22
54
|
<Box
|
|
23
55
|
sx={[
|
|
@@ -37,7 +69,6 @@ function WebsitePlaceholder({ title, announcement, logo }) {
|
|
|
37
69
|
isolation: "isolate",
|
|
38
70
|
},
|
|
39
71
|
]}
|
|
40
|
-
onKeyDown={(e) => handleKeydown()}
|
|
41
72
|
>
|
|
42
73
|
{visible && (
|
|
43
74
|
<>
|
|
@@ -57,6 +88,7 @@ function WebsitePlaceholder({ title, announcement, logo }) {
|
|
|
57
88
|
</Typography>
|
|
58
89
|
</>
|
|
59
90
|
)}
|
|
91
|
+
{!visible && <>{children}</>}
|
|
60
92
|
</Box>
|
|
61
93
|
);
|
|
62
94
|
}
|
|
@@ -7,18 +7,134 @@ export default {
|
|
|
7
7
|
component: WebsitePlaceholder,
|
|
8
8
|
};
|
|
9
9
|
|
|
10
|
-
const Template = ({ title, announcement, logo, ...args }) =>
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
<
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
10
|
+
const Template = ({ title, announcement, logo, ...args }) => {
|
|
11
|
+
return (
|
|
12
|
+
<>
|
|
13
|
+
<WebsitePlaceholder title={title} announcement={announcement} logo={logo}>
|
|
14
|
+
<Box sx={{ height: "300px" }}>
|
|
15
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
|
16
|
+
eiusmod tempor incididunt ut labore et dolore magna aliqua. Convallis
|
|
17
|
+
posuere morbi leo urna. Convallis aenean et tortor at risus viverra
|
|
18
|
+
adipiscing at in. Neque gravida in fermentum et sollicitudin ac orci
|
|
19
|
+
phasellus. Lobortis scelerisque fermentum dui faucibus. Ultricies
|
|
20
|
+
tristique nulla aliquet enim tortor at auctor urna nunc. Ornare massa
|
|
21
|
+
eget egestas purus viverra accumsan in nisl nisi. Sit amet commodo
|
|
22
|
+
nulla facilisi nullam vehicula ipsum. Risus viverra adipiscing at in.
|
|
23
|
+
Vulputate eu scelerisque felis imperdiet proin fermentum leo. Elit
|
|
24
|
+
eget gravida cum sociis natoque. Orci phasellus egestas tellus rutrum
|
|
25
|
+
tellus pellentesque. Pellentesque habitant morbi tristique senectus et
|
|
26
|
+
netus et malesuada. Phasellus faucibus scelerisque eleifend donec
|
|
27
|
+
pretium vulputate sapien nec. Fringilla est ullamcorper eget nulla
|
|
28
|
+
facilisi etiam dignissim diam quis. Diam quam nulla porttitor massa id
|
|
29
|
+
neque aliquam vestibulum. Varius duis at consectetur lorem donec.
|
|
30
|
+
Blandit libero volutpat sed cras ornare arcu. Lorem ipsum dolor sit
|
|
31
|
+
amet consectetur adipiscing elit. Convallis tellus id interdum velit
|
|
32
|
+
laoreet.
|
|
33
|
+
</Box>
|
|
34
|
+
<Box sx={{ height: "300px" }}>
|
|
35
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
|
36
|
+
eiusmod tempor incididunt ut labore et dolore magna aliqua. Convallis
|
|
37
|
+
posuere morbi leo urna. Convallis aenean et tortor at risus viverra
|
|
38
|
+
adipiscing at in. Neque gravida in fermentum et sollicitudin ac orci
|
|
39
|
+
phasellus. Lobortis scelerisque fermentum dui faucibus. Ultricies
|
|
40
|
+
tristique nulla aliquet enim tortor at auctor urna nunc. Ornare massa
|
|
41
|
+
eget egestas purus viverra accumsan in nisl nisi. Sit amet commodo
|
|
42
|
+
nulla facilisi nullam vehicula ipsum. Risus viverra adipiscing at in.
|
|
43
|
+
Vulputate eu scelerisque felis imperdiet proin fermentum leo. Elit
|
|
44
|
+
eget gravida cum sociis natoque. Orci phasellus egestas tellus rutrum
|
|
45
|
+
tellus pellentesque. Pellentesque habitant morbi tristique senectus et
|
|
46
|
+
netus et malesuada. Phasellus faucibus scelerisque eleifend donec
|
|
47
|
+
pretium vulputate sapien nec. Fringilla est ullamcorper eget nulla
|
|
48
|
+
facilisi etiam dignissim diam quis. Diam quam nulla porttitor massa id
|
|
49
|
+
neque aliquam vestibulum. Varius duis at consectetur lorem donec.
|
|
50
|
+
Blandit libero volutpat sed cras ornare arcu. Lorem ipsum dolor sit
|
|
51
|
+
amet consectetur adipiscing elit. Convallis tellus id interdum velit
|
|
52
|
+
laoreet.
|
|
53
|
+
</Box>
|
|
54
|
+
<Box sx={{ height: "300px" }}>
|
|
55
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
|
56
|
+
eiusmod tempor incididunt ut labore et dolore magna aliqua. Convallis
|
|
57
|
+
posuere morbi leo urna. Convallis aenean et tortor at risus viverra
|
|
58
|
+
adipiscing at in. Neque gravida in fermentum et sollicitudin ac orci
|
|
59
|
+
phasellus. Lobortis scelerisque fermentum dui faucibus. Ultricies
|
|
60
|
+
tristique nulla aliquet enim tortor at auctor urna nunc. Ornare massa
|
|
61
|
+
eget egestas purus viverra accumsan in nisl nisi. Sit amet commodo
|
|
62
|
+
nulla facilisi nullam vehicula ipsum. Risus viverra adipiscing at in.
|
|
63
|
+
Vulputate eu scelerisque felis imperdiet proin fermentum leo. Elit
|
|
64
|
+
eget gravida cum sociis natoque. Orci phasellus egestas tellus rutrum
|
|
65
|
+
tellus pellentesque. Pellentesque habitant morbi tristique senectus et
|
|
66
|
+
netus et malesuada. Phasellus faucibus scelerisque eleifend donec
|
|
67
|
+
pretium vulputate sapien nec. Fringilla est ullamcorper eget nulla
|
|
68
|
+
facilisi etiam dignissim diam quis. Diam quam nulla porttitor massa id
|
|
69
|
+
neque aliquam vestibulum. Varius duis at consectetur lorem donec.
|
|
70
|
+
Blandit libero volutpat sed cras ornare arcu. Lorem ipsum dolor sit
|
|
71
|
+
amet consectetur adipiscing elit. Convallis tellus id interdum velit
|
|
72
|
+
laoreet.
|
|
73
|
+
</Box>
|
|
74
|
+
<Box sx={{ height: "300px" }}>
|
|
75
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
|
76
|
+
eiusmod tempor incididunt ut labore et dolore magna aliqua. Convallis
|
|
77
|
+
posuere morbi leo urna. Convallis aenean et tortor at risus viverra
|
|
78
|
+
adipiscing at in. Neque gravida in fermentum et sollicitudin ac orci
|
|
79
|
+
phasellus. Lobortis scelerisque fermentum dui faucibus. Ultricies
|
|
80
|
+
tristique nulla aliquet enim tortor at auctor urna nunc. Ornare massa
|
|
81
|
+
eget egestas purus viverra accumsan in nisl nisi. Sit amet commodo
|
|
82
|
+
nulla facilisi nullam vehicula ipsum. Risus viverra adipiscing at in.
|
|
83
|
+
Vulputate eu scelerisque felis imperdiet proin fermentum leo. Elit
|
|
84
|
+
eget gravida cum sociis natoque. Orci phasellus egestas tellus rutrum
|
|
85
|
+
tellus pellentesque. Pellentesque habitant morbi tristique senectus et
|
|
86
|
+
netus et malesuada. Phasellus faucibus scelerisque eleifend donec
|
|
87
|
+
pretium vulputate sapien nec. Fringilla est ullamcorper eget nulla
|
|
88
|
+
facilisi etiam dignissim diam quis. Diam quam nulla porttitor massa id
|
|
89
|
+
neque aliquam vestibulum. Varius duis at consectetur lorem donec.
|
|
90
|
+
Blandit libero volutpat sed cras ornare arcu. Lorem ipsum dolor sit
|
|
91
|
+
amet consectetur adipiscing elit. Convallis tellus id interdum velit
|
|
92
|
+
laoreet.
|
|
93
|
+
</Box>
|
|
94
|
+
<Box sx={{ height: "300px" }}>
|
|
95
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
|
96
|
+
eiusmod tempor incididunt ut labore et dolore magna aliqua. Convallis
|
|
97
|
+
posuere morbi leo urna. Convallis aenean et tortor at risus viverra
|
|
98
|
+
adipiscing at in. Neque gravida in fermentum et sollicitudin ac orci
|
|
99
|
+
phasellus. Lobortis scelerisque fermentum dui faucibus. Ultricies
|
|
100
|
+
tristique nulla aliquet enim tortor at auctor urna nunc. Ornare massa
|
|
101
|
+
eget egestas purus viverra accumsan in nisl nisi. Sit amet commodo
|
|
102
|
+
nulla facilisi nullam vehicula ipsum. Risus viverra adipiscing at in.
|
|
103
|
+
Vulputate eu scelerisque felis imperdiet proin fermentum leo. Elit
|
|
104
|
+
eget gravida cum sociis natoque. Orci phasellus egestas tellus rutrum
|
|
105
|
+
tellus pellentesque. Pellentesque habitant morbi tristique senectus et
|
|
106
|
+
netus et malesuada. Phasellus faucibus scelerisque eleifend donec
|
|
107
|
+
pretium vulputate sapien nec. Fringilla est ullamcorper eget nulla
|
|
108
|
+
facilisi etiam dignissim diam quis. Diam quam nulla porttitor massa id
|
|
109
|
+
neque aliquam vestibulum. Varius duis at consectetur lorem donec.
|
|
110
|
+
Blandit libero volutpat sed cras ornare arcu. Lorem ipsum dolor sit
|
|
111
|
+
amet consectetur adipiscing elit. Convallis tellus id interdum velit
|
|
112
|
+
laoreet.
|
|
113
|
+
</Box>
|
|
114
|
+
<Box sx={{ height: "300px" }}>
|
|
115
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
|
116
|
+
eiusmod tempor incididunt ut labore et dolore magna aliqua. Convallis
|
|
117
|
+
posuere morbi leo urna. Convallis aenean et tortor at risus viverra
|
|
118
|
+
adipiscing at in. Neque gravida in fermentum et sollicitudin ac orci
|
|
119
|
+
phasellus. Lobortis scelerisque fermentum dui faucibus. Ultricies
|
|
120
|
+
tristique nulla aliquet enim tortor at auctor urna nunc. Ornare massa
|
|
121
|
+
eget egestas purus viverra accumsan in nisl nisi. Sit amet commodo
|
|
122
|
+
nulla facilisi nullam vehicula ipsum. Risus viverra adipiscing at in.
|
|
123
|
+
Vulputate eu scelerisque felis imperdiet proin fermentum leo. Elit
|
|
124
|
+
eget gravida cum sociis natoque. Orci phasellus egestas tellus rutrum
|
|
125
|
+
tellus pellentesque. Pellentesque habitant morbi tristique senectus et
|
|
126
|
+
netus et malesuada. Phasellus faucibus scelerisque eleifend donec
|
|
127
|
+
pretium vulputate sapien nec. Fringilla est ullamcorper eget nulla
|
|
128
|
+
facilisi etiam dignissim diam quis. Diam quam nulla porttitor massa id
|
|
129
|
+
neque aliquam vestibulum. Varius duis at consectetur lorem donec.
|
|
130
|
+
Blandit libero volutpat sed cras ornare arcu. Lorem ipsum dolor sit
|
|
131
|
+
amet consectetur adipiscing elit. Convallis tellus id interdum velit
|
|
132
|
+
laoreet.
|
|
133
|
+
</Box>
|
|
134
|
+
</WebsitePlaceholder>
|
|
135
|
+
</>
|
|
136
|
+
);
|
|
137
|
+
};
|
|
22
138
|
|
|
23
139
|
export const HelloWorld = Template.bind({});
|
|
24
140
|
|