umwd-components 0.1.200 → 0.1.202
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.
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
11
11
|
|
|
12
12
|
var React = require('react');
|
|
13
|
+
var material = require('@mui/material');
|
|
13
14
|
|
|
14
15
|
function FluidBackground() {
|
|
15
16
|
const [objectX, setObjectX] = React.useState(0);
|
|
@@ -20,30 +21,8 @@ function FluidBackground() {
|
|
|
20
21
|
const [ObjectSize, setObjectSize] = React.useState(300);
|
|
21
22
|
const [minSize, setMinSize] = React.useState(0);
|
|
22
23
|
const [maxSize, setMaxSize] = React.useState(0);
|
|
24
|
+
const theme = material.useTheme();
|
|
23
25
|
let transitionInterval = null;
|
|
24
|
-
|
|
25
|
-
// useEffect(() => {
|
|
26
|
-
// setObjectX(window.innerWidth / 2);
|
|
27
|
-
// setObjectY(window.innerHeight / 2);
|
|
28
|
-
// setObjectSize(
|
|
29
|
-
// Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2
|
|
30
|
-
// );
|
|
31
|
-
// setMinSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6);
|
|
32
|
-
// setMaxSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2);
|
|
33
|
-
// }, []);
|
|
34
|
-
|
|
35
|
-
// const [objectX, setObjectX] = useState(window.innerWidth / 2); // Initial position
|
|
36
|
-
// const [objectY, setObjectY] = useState(window.innerHeight / 2);
|
|
37
|
-
// const [brightness, setBrightness] = useState(1);
|
|
38
|
-
// const maxBrightness = 1.5;
|
|
39
|
-
// const minBrightness = 0.5;
|
|
40
|
-
// const minSize =
|
|
41
|
-
// Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6;
|
|
42
|
-
// const maxSize =
|
|
43
|
-
// Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2;
|
|
44
|
-
// const [ObjectSize, setObjectSize] = useState(maxSize); // Initial size
|
|
45
|
-
// let transitionInterval: NodeJS.Timeout | null = null; // Declare transitionInterval variable
|
|
46
|
-
|
|
47
26
|
const handleMove = (x, y) => {
|
|
48
27
|
setObjectX(x);
|
|
49
28
|
setObjectY(y);
|
|
@@ -104,54 +83,6 @@ function FluidBackground() {
|
|
|
104
83
|
}
|
|
105
84
|
}, stepDuration);
|
|
106
85
|
};
|
|
107
|
-
|
|
108
|
-
// // Add event listeners to trigger handleEnd on touch end or mouse up
|
|
109
|
-
// useEffect(() => {
|
|
110
|
-
// const handleEndEvent = () => {
|
|
111
|
-
// handleEnd();
|
|
112
|
-
// };
|
|
113
|
-
//
|
|
114
|
-
// window.addEventListener("touchend", handleEndEvent);
|
|
115
|
-
// window.addEventListener("mouseup", handleEndEvent);
|
|
116
|
-
//
|
|
117
|
-
// return () => {
|
|
118
|
-
// window.removeEventListener("touchend", handleEndEvent);
|
|
119
|
-
// window.removeEventListener("mouseup", handleEndEvent);
|
|
120
|
-
// };
|
|
121
|
-
// }, []);
|
|
122
|
-
//
|
|
123
|
-
// // Add event listeners to trigger handleStart on touch start or mouse down
|
|
124
|
-
// useEffect(() => {
|
|
125
|
-
// const handleStartEvent = () => {
|
|
126
|
-
// handleStart();
|
|
127
|
-
// };
|
|
128
|
-
//
|
|
129
|
-
// window.addEventListener("touchstart", handleStartEvent);
|
|
130
|
-
// window.addEventListener("mousedown", handleStartEvent);
|
|
131
|
-
//
|
|
132
|
-
// return () => {
|
|
133
|
-
// window.removeEventListener("touchstart", handleStartEvent);
|
|
134
|
-
// window.removeEventListener("mousedown", handleStartEvent);
|
|
135
|
-
// };
|
|
136
|
-
// }, []);
|
|
137
|
-
//
|
|
138
|
-
// // Add event listeners to trigger handleMove on touch move or mouse move
|
|
139
|
-
// useEffect(() => {
|
|
140
|
-
// const handleMoveEvent = (e: TouchEvent | MouseEvent) => {
|
|
141
|
-
// const x = e instanceof TouchEvent ? e.touches[0].clientX : e.clientX;
|
|
142
|
-
// const y = e instanceof TouchEvent ? e.touches[0].clientY : e.clientY;
|
|
143
|
-
// handleMove(x, y);
|
|
144
|
-
// };
|
|
145
|
-
//
|
|
146
|
-
// window.addEventListener("touchmove", handleMoveEvent);
|
|
147
|
-
// window.addEventListener("mousemove", handleMoveEvent);
|
|
148
|
-
//
|
|
149
|
-
// return () => {
|
|
150
|
-
// window.removeEventListener("touchmove", handleMoveEvent);
|
|
151
|
-
// window.removeEventListener("mousemove", handleMoveEvent);
|
|
152
|
-
// };
|
|
153
|
-
// }, []);
|
|
154
|
-
//
|
|
155
86
|
React.useEffect(() => {
|
|
156
87
|
setObjectX(window.innerWidth / 2);
|
|
157
88
|
setObjectY(window.innerHeight / 2);
|
|
@@ -206,7 +137,7 @@ function FluidBackground() {
|
|
|
206
137
|
display: "Block",
|
|
207
138
|
width: "100%",
|
|
208
139
|
height: "100%",
|
|
209
|
-
background: "#2d2d2d",
|
|
140
|
+
background: theme.palette.mode === "dark" ? "#2d2d2d" : "#fafafa",
|
|
210
141
|
zIndex: -1
|
|
211
142
|
}
|
|
212
143
|
}), /*#__PURE__*/React.createElement("svg", {
|
|
@@ -241,7 +172,7 @@ function FluidBackground() {
|
|
|
241
172
|
}))), /*#__PURE__*/React.createElement("rect", {
|
|
242
173
|
width: "100%",
|
|
243
174
|
height: "100%",
|
|
244
|
-
fill:
|
|
175
|
+
fill: theme.palette.primary.main,
|
|
245
176
|
mask: "url(#radial-gradient-mask)",
|
|
246
177
|
style: {
|
|
247
178
|
filter: "brightness(".concat(brightness, ")")
|
|
@@ -318,7 +249,7 @@ function FluidBackground() {
|
|
|
318
249
|
}, "SKILLS AND EXPERTISE TO BRING YOUR VISION TO LIFE.")))), /*#__PURE__*/React.createElement("rect", {
|
|
319
250
|
width: "100%",
|
|
320
251
|
height: "100%",
|
|
321
|
-
fill: "#222",
|
|
252
|
+
fill: theme.palette.mode === "dark" ? "#222" : "#fff",
|
|
322
253
|
mask: "url(#mask)"
|
|
323
254
|
})));
|
|
324
255
|
}
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import React__default, { useState, useEffect } from 'react';
|
|
9
|
+
import { useTheme } from '@mui/material';
|
|
9
10
|
|
|
10
11
|
function FluidBackground() {
|
|
11
12
|
const [objectX, setObjectX] = useState(0);
|
|
@@ -16,30 +17,8 @@ function FluidBackground() {
|
|
|
16
17
|
const [ObjectSize, setObjectSize] = useState(300);
|
|
17
18
|
const [minSize, setMinSize] = useState(0);
|
|
18
19
|
const [maxSize, setMaxSize] = useState(0);
|
|
20
|
+
const theme = useTheme();
|
|
19
21
|
let transitionInterval = null;
|
|
20
|
-
|
|
21
|
-
// useEffect(() => {
|
|
22
|
-
// setObjectX(window.innerWidth / 2);
|
|
23
|
-
// setObjectY(window.innerHeight / 2);
|
|
24
|
-
// setObjectSize(
|
|
25
|
-
// Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2
|
|
26
|
-
// );
|
|
27
|
-
// setMinSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6);
|
|
28
|
-
// setMaxSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2);
|
|
29
|
-
// }, []);
|
|
30
|
-
|
|
31
|
-
// const [objectX, setObjectX] = useState(window.innerWidth / 2); // Initial position
|
|
32
|
-
// const [objectY, setObjectY] = useState(window.innerHeight / 2);
|
|
33
|
-
// const [brightness, setBrightness] = useState(1);
|
|
34
|
-
// const maxBrightness = 1.5;
|
|
35
|
-
// const minBrightness = 0.5;
|
|
36
|
-
// const minSize =
|
|
37
|
-
// Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6;
|
|
38
|
-
// const maxSize =
|
|
39
|
-
// Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2;
|
|
40
|
-
// const [ObjectSize, setObjectSize] = useState(maxSize); // Initial size
|
|
41
|
-
// let transitionInterval: NodeJS.Timeout | null = null; // Declare transitionInterval variable
|
|
42
|
-
|
|
43
22
|
const handleMove = (x, y) => {
|
|
44
23
|
setObjectX(x);
|
|
45
24
|
setObjectY(y);
|
|
@@ -100,54 +79,6 @@ function FluidBackground() {
|
|
|
100
79
|
}
|
|
101
80
|
}, stepDuration);
|
|
102
81
|
};
|
|
103
|
-
|
|
104
|
-
// // Add event listeners to trigger handleEnd on touch end or mouse up
|
|
105
|
-
// useEffect(() => {
|
|
106
|
-
// const handleEndEvent = () => {
|
|
107
|
-
// handleEnd();
|
|
108
|
-
// };
|
|
109
|
-
//
|
|
110
|
-
// window.addEventListener("touchend", handleEndEvent);
|
|
111
|
-
// window.addEventListener("mouseup", handleEndEvent);
|
|
112
|
-
//
|
|
113
|
-
// return () => {
|
|
114
|
-
// window.removeEventListener("touchend", handleEndEvent);
|
|
115
|
-
// window.removeEventListener("mouseup", handleEndEvent);
|
|
116
|
-
// };
|
|
117
|
-
// }, []);
|
|
118
|
-
//
|
|
119
|
-
// // Add event listeners to trigger handleStart on touch start or mouse down
|
|
120
|
-
// useEffect(() => {
|
|
121
|
-
// const handleStartEvent = () => {
|
|
122
|
-
// handleStart();
|
|
123
|
-
// };
|
|
124
|
-
//
|
|
125
|
-
// window.addEventListener("touchstart", handleStartEvent);
|
|
126
|
-
// window.addEventListener("mousedown", handleStartEvent);
|
|
127
|
-
//
|
|
128
|
-
// return () => {
|
|
129
|
-
// window.removeEventListener("touchstart", handleStartEvent);
|
|
130
|
-
// window.removeEventListener("mousedown", handleStartEvent);
|
|
131
|
-
// };
|
|
132
|
-
// }, []);
|
|
133
|
-
//
|
|
134
|
-
// // Add event listeners to trigger handleMove on touch move or mouse move
|
|
135
|
-
// useEffect(() => {
|
|
136
|
-
// const handleMoveEvent = (e: TouchEvent | MouseEvent) => {
|
|
137
|
-
// const x = e instanceof TouchEvent ? e.touches[0].clientX : e.clientX;
|
|
138
|
-
// const y = e instanceof TouchEvent ? e.touches[0].clientY : e.clientY;
|
|
139
|
-
// handleMove(x, y);
|
|
140
|
-
// };
|
|
141
|
-
//
|
|
142
|
-
// window.addEventListener("touchmove", handleMoveEvent);
|
|
143
|
-
// window.addEventListener("mousemove", handleMoveEvent);
|
|
144
|
-
//
|
|
145
|
-
// return () => {
|
|
146
|
-
// window.removeEventListener("touchmove", handleMoveEvent);
|
|
147
|
-
// window.removeEventListener("mousemove", handleMoveEvent);
|
|
148
|
-
// };
|
|
149
|
-
// }, []);
|
|
150
|
-
//
|
|
151
82
|
useEffect(() => {
|
|
152
83
|
setObjectX(window.innerWidth / 2);
|
|
153
84
|
setObjectY(window.innerHeight / 2);
|
|
@@ -202,7 +133,7 @@ function FluidBackground() {
|
|
|
202
133
|
display: "Block",
|
|
203
134
|
width: "100%",
|
|
204
135
|
height: "100%",
|
|
205
|
-
background: "#2d2d2d",
|
|
136
|
+
background: theme.palette.mode === "dark" ? "#2d2d2d" : "#fafafa",
|
|
206
137
|
zIndex: -1
|
|
207
138
|
}
|
|
208
139
|
}), /*#__PURE__*/React__default.createElement("svg", {
|
|
@@ -237,7 +168,7 @@ function FluidBackground() {
|
|
|
237
168
|
}))), /*#__PURE__*/React__default.createElement("rect", {
|
|
238
169
|
width: "100%",
|
|
239
170
|
height: "100%",
|
|
240
|
-
fill:
|
|
171
|
+
fill: theme.palette.primary.main,
|
|
241
172
|
mask: "url(#radial-gradient-mask)",
|
|
242
173
|
style: {
|
|
243
174
|
filter: "brightness(".concat(brightness, ")")
|
|
@@ -314,7 +245,7 @@ function FluidBackground() {
|
|
|
314
245
|
}, "SKILLS AND EXPERTISE TO BRING YOUR VISION TO LIFE.")))), /*#__PURE__*/React__default.createElement("rect", {
|
|
315
246
|
width: "100%",
|
|
316
247
|
height: "100%",
|
|
317
|
-
fill: "#222",
|
|
248
|
+
fill: theme.palette.mode === "dark" ? "#222" : "#fff",
|
|
318
249
|
mask: "url(#mask)"
|
|
319
250
|
})));
|
|
320
251
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
import React, { useState, useEffect } from "react";
|
|
4
|
+
import { useTheme } from "@mui/material";
|
|
4
5
|
|
|
5
6
|
function FluidBackground() {
|
|
6
7
|
const [objectX, setObjectX] = useState(0);
|
|
@@ -11,29 +12,9 @@ function FluidBackground() {
|
|
|
11
12
|
const [ObjectSize, setObjectSize] = useState(300);
|
|
12
13
|
const [minSize, setMinSize] = useState(0);
|
|
13
14
|
const [maxSize, setMaxSize] = useState(0);
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
// useEffect(() => {
|
|
17
|
-
// setObjectX(window.innerWidth / 2);
|
|
18
|
-
// setObjectY(window.innerHeight / 2);
|
|
19
|
-
// setObjectSize(
|
|
20
|
-
// Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2
|
|
21
|
-
// );
|
|
22
|
-
// setMinSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6);
|
|
23
|
-
// setMaxSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2);
|
|
24
|
-
// }, []);
|
|
15
|
+
const theme = useTheme();
|
|
25
16
|
|
|
26
|
-
|
|
27
|
-
// const [objectY, setObjectY] = useState(window.innerHeight / 2);
|
|
28
|
-
// const [brightness, setBrightness] = useState(1);
|
|
29
|
-
// const maxBrightness = 1.5;
|
|
30
|
-
// const minBrightness = 0.5;
|
|
31
|
-
// const minSize =
|
|
32
|
-
// Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6;
|
|
33
|
-
// const maxSize =
|
|
34
|
-
// Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2;
|
|
35
|
-
// const [ObjectSize, setObjectSize] = useState(maxSize); // Initial size
|
|
36
|
-
// let transitionInterval: NodeJS.Timeout | null = null; // Declare transitionInterval variable
|
|
17
|
+
let transitionInterval: NodeJS.Timeout | null = null;
|
|
37
18
|
|
|
38
19
|
const handleMove = (x: number, y: number) => {
|
|
39
20
|
setObjectX(x);
|
|
@@ -104,53 +85,6 @@ function FluidBackground() {
|
|
|
104
85
|
}, stepDuration);
|
|
105
86
|
};
|
|
106
87
|
|
|
107
|
-
// // Add event listeners to trigger handleEnd on touch end or mouse up
|
|
108
|
-
// useEffect(() => {
|
|
109
|
-
// const handleEndEvent = () => {
|
|
110
|
-
// handleEnd();
|
|
111
|
-
// };
|
|
112
|
-
//
|
|
113
|
-
// window.addEventListener("touchend", handleEndEvent);
|
|
114
|
-
// window.addEventListener("mouseup", handleEndEvent);
|
|
115
|
-
//
|
|
116
|
-
// return () => {
|
|
117
|
-
// window.removeEventListener("touchend", handleEndEvent);
|
|
118
|
-
// window.removeEventListener("mouseup", handleEndEvent);
|
|
119
|
-
// };
|
|
120
|
-
// }, []);
|
|
121
|
-
//
|
|
122
|
-
// // Add event listeners to trigger handleStart on touch start or mouse down
|
|
123
|
-
// useEffect(() => {
|
|
124
|
-
// const handleStartEvent = () => {
|
|
125
|
-
// handleStart();
|
|
126
|
-
// };
|
|
127
|
-
//
|
|
128
|
-
// window.addEventListener("touchstart", handleStartEvent);
|
|
129
|
-
// window.addEventListener("mousedown", handleStartEvent);
|
|
130
|
-
//
|
|
131
|
-
// return () => {
|
|
132
|
-
// window.removeEventListener("touchstart", handleStartEvent);
|
|
133
|
-
// window.removeEventListener("mousedown", handleStartEvent);
|
|
134
|
-
// };
|
|
135
|
-
// }, []);
|
|
136
|
-
//
|
|
137
|
-
// // Add event listeners to trigger handleMove on touch move or mouse move
|
|
138
|
-
// useEffect(() => {
|
|
139
|
-
// const handleMoveEvent = (e: TouchEvent | MouseEvent) => {
|
|
140
|
-
// const x = e instanceof TouchEvent ? e.touches[0].clientX : e.clientX;
|
|
141
|
-
// const y = e instanceof TouchEvent ? e.touches[0].clientY : e.clientY;
|
|
142
|
-
// handleMove(x, y);
|
|
143
|
-
// };
|
|
144
|
-
//
|
|
145
|
-
// window.addEventListener("touchmove", handleMoveEvent);
|
|
146
|
-
// window.addEventListener("mousemove", handleMoveEvent);
|
|
147
|
-
//
|
|
148
|
-
// return () => {
|
|
149
|
-
// window.removeEventListener("touchmove", handleMoveEvent);
|
|
150
|
-
// window.removeEventListener("mousemove", handleMoveEvent);
|
|
151
|
-
// };
|
|
152
|
-
// }, []);
|
|
153
|
-
//
|
|
154
88
|
useEffect(() => {
|
|
155
89
|
setObjectX(window.innerWidth / 2);
|
|
156
90
|
setObjectY(window.innerHeight / 2);
|
|
@@ -215,7 +149,7 @@ function FluidBackground() {
|
|
|
215
149
|
display: "Block",
|
|
216
150
|
width: "100%",
|
|
217
151
|
height: "100%",
|
|
218
|
-
background: "#2d2d2d",
|
|
152
|
+
background: theme.palette.mode === "dark" ? "#2d2d2d" : "#fafafa",
|
|
219
153
|
zIndex: -1,
|
|
220
154
|
}}
|
|
221
155
|
/>
|
|
@@ -249,7 +183,7 @@ function FluidBackground() {
|
|
|
249
183
|
<rect
|
|
250
184
|
width="100%"
|
|
251
185
|
height="100%"
|
|
252
|
-
fill=
|
|
186
|
+
fill={theme.palette.primary.main}
|
|
253
187
|
mask="url(#radial-gradient-mask)"
|
|
254
188
|
style={{ filter: `brightness(${brightness})` }}
|
|
255
189
|
/>
|
|
@@ -329,7 +263,7 @@ function FluidBackground() {
|
|
|
329
263
|
<rect
|
|
330
264
|
width={"100%"}
|
|
331
265
|
height={"100%"}
|
|
332
|
-
fill="#222"
|
|
266
|
+
fill={theme.palette.mode === "dark" ? "#222" : "#fff"}
|
|
333
267
|
mask="url(#mask)"
|
|
334
268
|
></rect>
|
|
335
269
|
</svg>
|