umwd-components 0.1.120 → 0.1.121

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.
@@ -0,0 +1,293 @@
1
+ /*
2
+ * UMWD-Components
3
+ * @copyright Jelle Paulus
4
+ * @license MIT
5
+ */
6
+
7
+ 'use strict';
8
+
9
+ Object.defineProperty(exports, '__esModule', { value: true });
10
+
11
+ var React = require('react');
12
+ var Link = require('next/link');
13
+ var Image = require('next/image');
14
+ var material = require('@mui/material');
15
+ var CloseIcon = require('@mui/icons-material/Close');
16
+ var MoreVertIcon = require('@mui/icons-material/MoreVert');
17
+ var ScrollLink = require('./ScrollLink.js');
18
+
19
+ /* TODO: combine these, and use conf/setting to manipulate how to display */
20
+
21
+ function ScrollNavbar(_ref) {
22
+ var _tabs$;
23
+ let {
24
+ data
25
+ } = _ref;
26
+ const {
27
+ site_title,
28
+ logo,
29
+ pages,
30
+ tabs,
31
+ maxWidth,
32
+ minHeight
33
+ } = data;
34
+ const [mobileNavOpen, setMobileNavOpen] = React.useState(false);
35
+ const [currentTab, setCurrentTab] = React.useState(((_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.name) || "");
36
+ const handleOpenMobileMenu = () => {
37
+ setMobileNavOpen(true);
38
+ };
39
+ const handleCloseMobileMenu = () => {
40
+ setMobileNavOpen(false);
41
+ };
42
+
43
+ /* const router = useRouter(); */
44
+
45
+ const handleChange = (event, newValue) => {
46
+ setCurrentTab(newValue);
47
+ };
48
+ const theme = material.useTheme();
49
+ return /*#__PURE__*/React.createElement(material.AppBar, {
50
+ position: "sticky",
51
+ sx: {
52
+ backgroundColor: theme.palette.primary.main
53
+ }
54
+ }, /*#__PURE__*/React.createElement(material.Container, {
55
+ maxWidth: maxWidth
56
+ }, /*#__PURE__*/React.createElement(material.Toolbar, {
57
+ disableGutters: true,
58
+ sx: {
59
+ py: 1,
60
+ "@media all": {
61
+ minHeight: minHeight
62
+ }
63
+ }
64
+ }, /*#__PURE__*/React.createElement(ScrollLink.default, {
65
+ href: "home"
66
+ }, /*#__PURE__*/React.createElement(material.Box, {
67
+ sx: {
68
+ display: {
69
+ xs: "none",
70
+ md: "flex"
71
+ },
72
+ cursor: "pointer",
73
+ alignItems: "center"
74
+ }
75
+ }, /*#__PURE__*/React.createElement(Image, {
76
+ src: logo.url,
77
+ width: logo.width,
78
+ height: logo.height,
79
+ alt: logo.alternativeText || "site logo",
80
+ style: {
81
+ maxHeight: "50px"
82
+ }
83
+ }), site_title !== undefined && /*#__PURE__*/React.createElement(material.Typography, {
84
+ variant: "h6",
85
+ noWrap: true,
86
+ component: "h1",
87
+ sx: {
88
+ display: "flex",
89
+ textDecoration: "none"
90
+ }
91
+ }, site_title))), /*#__PURE__*/React.createElement(material.Box, {
92
+ sx: {
93
+ display: "block",
94
+ width: "30px"
95
+ }
96
+ }), pages && pages.length > 0 && /*#__PURE__*/React.createElement(material.Box, {
97
+ sx: {
98
+ flexGrow: 1,
99
+ display: {
100
+ xs: "none",
101
+ md: "flex"
102
+ },
103
+ alignItems: "center"
104
+ }
105
+ }, pages.map(page => {
106
+ return /*#__PURE__*/React.createElement(ScrollLink.default, {
107
+ key: page.name,
108
+ href: page.slug
109
+ }, /*#__PURE__*/React.createElement(material.Button
110
+ /* onClick={() => {
111
+ router.push(page.url);
112
+ }} */, {
113
+ sx: {
114
+ my: 2,
115
+ color: "primary.contrastText",
116
+ display: "block"
117
+ }
118
+ }, page.name));
119
+ })), tabs && tabs.length > 0 && /*#__PURE__*/React.createElement(material.Box, {
120
+ sx: {
121
+ flexGrow: 1,
122
+ display: {
123
+ xs: "none",
124
+ md: "flex"
125
+ }
126
+ }
127
+ }, /*#__PURE__*/React.createElement(material.Tabs, {
128
+ value: currentTab,
129
+ onChange: (event, newValue) => handleChange(event, newValue),
130
+ "aria-label": "wrapped label tabs example",
131
+ textColor: "secondary",
132
+ indicatorColor: "secondary",
133
+ variant: "fullWidth"
134
+ }, tabs.length > 0 && tabs.map(tab => {
135
+ return /*#__PURE__*/React.createElement(ScrollLink.default, {
136
+ key: tab.name,
137
+ href: tab.slug
138
+ }, /*#__PURE__*/React.createElement(material.Tab, {
139
+ value: tab.name,
140
+ label: tab.name
141
+ /* onClick={() => {
142
+ router.push(tab.url);
143
+ }} */,
144
+ sx: {
145
+ p: 1
146
+ }
147
+ }));
148
+ }))), /*#__PURE__*/React.createElement(Link, {
149
+ href: "/",
150
+ style: {
151
+ textDecoration: "none",
152
+ color: "unset"
153
+ }
154
+ }, /*#__PURE__*/React.createElement(material.Box, {
155
+ sx: {
156
+ display: {
157
+ xs: "flex",
158
+ md: "none"
159
+ },
160
+ alignItems: "center"
161
+ }
162
+ }, logo.url !== undefined && /*#__PURE__*/React.createElement(material.Box, {
163
+ sx: {
164
+ display: "flex",
165
+ mr: 1
166
+ }
167
+ }, /*#__PURE__*/React.createElement("img", {
168
+ src: logo.url,
169
+ width: logo.width || "32px",
170
+ height: logo.height || "32px",
171
+ alt: logo.alternativeText || "site logo",
172
+ style: {
173
+ maxWidth: "60px",
174
+ maxHeight: "60px"
175
+ }
176
+ })), site_title !== undefined && /*#__PURE__*/React.createElement(material.Typography, {
177
+ variant: "h5",
178
+ noWrap: true,
179
+ component: "h1",
180
+ sx: {
181
+ display: "flex",
182
+ flexGrow: 1
183
+ }
184
+ }, site_title))), /*#__PURE__*/React.createElement(material.Box, {
185
+ sx: {
186
+ display: {
187
+ xs: "flex",
188
+ md: "none"
189
+ },
190
+ flexGrow: 1
191
+ }
192
+ }), /*#__PURE__*/React.createElement(material.Box, {
193
+ sx: {
194
+ flexGrow: 0,
195
+ display: {
196
+ xs: "flex",
197
+ md: "none"
198
+ }
199
+ }
200
+ }, /*#__PURE__*/React.createElement(material.Button, {
201
+ onClick: handleOpenMobileMenu,
202
+ sx: {
203
+ width: "40px",
204
+ height: "40px",
205
+ borderRadius: "50%",
206
+ p: 0,
207
+ minWidth: "unset",
208
+ color: "primary.contrastText",
209
+ boxShadow: "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)"
210
+ }
211
+ }, /*#__PURE__*/React.createElement(MoreVertIcon, {
212
+ sx: {
213
+ color: "primary.contrastText"
214
+ }
215
+ })), /*#__PURE__*/React.createElement(material.Dialog, {
216
+ fullScreen: true,
217
+ open: mobileNavOpen,
218
+ onClose: handleCloseMobileMenu
219
+ }, /*#__PURE__*/React.createElement(material.AppBar, {
220
+ position: "sticky"
221
+ }, /*#__PURE__*/React.createElement(material.Container, {
222
+ maxWidth: "xl"
223
+ }, /*#__PURE__*/React.createElement(material.Toolbar, {
224
+ disableGutters: true,
225
+ sx: {
226
+ py: 1,
227
+ justifyContent: "space-between"
228
+ }
229
+ }, /*#__PURE__*/React.createElement(Link, {
230
+ href: "/",
231
+ style: {
232
+ textDecoration: "none",
233
+ color: "unset"
234
+ }
235
+ }, /*#__PURE__*/React.createElement(material.Box, {
236
+ sx: {
237
+ display: "flex",
238
+ flexDirection: "row",
239
+ alignItems: "center"
240
+ }
241
+ }, /*#__PURE__*/React.createElement(material.Box, {
242
+ sx: {
243
+ display: "flex",
244
+ mr: 1
245
+ }
246
+ }, /*#__PURE__*/React.createElement("img", {
247
+ src: logo.url,
248
+ alt: logo.alternativeText || "logo",
249
+ width: logo.width || "32px",
250
+ height: logo.height || "32px",
251
+ style: {
252
+ maxWidth: "60px",
253
+ maxHeight: "60px"
254
+ }
255
+ })), /*#__PURE__*/React.createElement(material.Typography, {
256
+ variant: "h5",
257
+ noWrap: true,
258
+ component: "h1",
259
+ sx: {
260
+ display: "flex",
261
+ flexGrow: 1
262
+ }
263
+ }, site_title !== undefined && site_title))), /*#__PURE__*/React.createElement(material.Button, {
264
+ onClick: handleCloseMobileMenu,
265
+ sx: {
266
+ width: "40px",
267
+ height: "40px",
268
+ borderRadius: "50%",
269
+ p: 0,
270
+ minWidth: "unset",
271
+ color: "primary.contrastText",
272
+ boxShadow: "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)"
273
+ },
274
+ "aria-label": "close"
275
+ }, /*#__PURE__*/React.createElement(CloseIcon, {
276
+ sx: {
277
+ color: "primary.contrastText"
278
+ }
279
+ }))))), pages && pages.length > 0 && /*#__PURE__*/React.createElement(material.List, null, pages.map(page => {
280
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ScrollLink.default, {
281
+ key: page.name,
282
+ href: page.slug
283
+ }, /*#__PURE__*/React.createElement(material.ListItem
284
+ /* onClick={() => {
285
+ router.push(page.url);
286
+ handleCloseMobileMenu();
287
+ }} */, null, /*#__PURE__*/React.createElement(material.ListItemText, {
288
+ primary: page.name
289
+ }))), /*#__PURE__*/React.createElement(material.Divider, null));
290
+ })))))));
291
+ }
292
+
293
+ exports.default = ScrollNavbar;
package/dist/cjs/index.js CHANGED
@@ -17,6 +17,7 @@ var WebsitePlaceholder = require('./components/WebsitePlaceholder.js');
17
17
  var BulletList = require('./components/BulletList.js');
18
18
  var WhatsAppClickToChatButton = require('./components/WhatsAppClickToChatButton.js');
19
19
  var ScrollLink = require('./components/ScrollLink.js');
20
+ var ScrollNavbar = require('./components/ScrollNavbar.js');
20
21
 
21
22
 
22
23
 
@@ -31,3 +32,4 @@ exports.WebsitePlaceholder = WebsitePlaceholder.default;
31
32
  exports.BulletList = BulletList.default;
32
33
  exports.WhatsAppClickToChatButton = WhatsAppClickToChatButton.default;
33
34
  exports.ScrollLink = ScrollLink.default;
35
+ exports.ScrollNavbar = ScrollNavbar.default;
@@ -0,0 +1,289 @@
1
+ /*
2
+ * UMWD-Components
3
+ * @copyright Jelle Paulus
4
+ * @license MIT
5
+ */
6
+
7
+ import React__default, { useState } from 'react';
8
+ import Link from 'next/link';
9
+ import Image from 'next/image';
10
+ import { useTheme, AppBar, Container, Toolbar, Box, Typography, Button, Tabs, Tab, Dialog, List, ListItem, ListItemText, Divider } from '@mui/material';
11
+ import CloseIcon from '@mui/icons-material/Close';
12
+ import MoreVertIcon from '@mui/icons-material/MoreVert';
13
+ import ScrollLink from './ScrollLink.js';
14
+
15
+ /* TODO: combine these, and use conf/setting to manipulate how to display */
16
+
17
+ function ScrollNavbar(_ref) {
18
+ var _tabs$;
19
+ let {
20
+ data
21
+ } = _ref;
22
+ const {
23
+ site_title,
24
+ logo,
25
+ pages,
26
+ tabs,
27
+ maxWidth,
28
+ minHeight
29
+ } = data;
30
+ const [mobileNavOpen, setMobileNavOpen] = useState(false);
31
+ const [currentTab, setCurrentTab] = useState(((_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.name) || "");
32
+ const handleOpenMobileMenu = () => {
33
+ setMobileNavOpen(true);
34
+ };
35
+ const handleCloseMobileMenu = () => {
36
+ setMobileNavOpen(false);
37
+ };
38
+
39
+ /* const router = useRouter(); */
40
+
41
+ const handleChange = (event, newValue) => {
42
+ setCurrentTab(newValue);
43
+ };
44
+ const theme = useTheme();
45
+ return /*#__PURE__*/React__default.createElement(AppBar, {
46
+ position: "sticky",
47
+ sx: {
48
+ backgroundColor: theme.palette.primary.main
49
+ }
50
+ }, /*#__PURE__*/React__default.createElement(Container, {
51
+ maxWidth: maxWidth
52
+ }, /*#__PURE__*/React__default.createElement(Toolbar, {
53
+ disableGutters: true,
54
+ sx: {
55
+ py: 1,
56
+ "@media all": {
57
+ minHeight: minHeight
58
+ }
59
+ }
60
+ }, /*#__PURE__*/React__default.createElement(ScrollLink, {
61
+ href: "home"
62
+ }, /*#__PURE__*/React__default.createElement(Box, {
63
+ sx: {
64
+ display: {
65
+ xs: "none",
66
+ md: "flex"
67
+ },
68
+ cursor: "pointer",
69
+ alignItems: "center"
70
+ }
71
+ }, /*#__PURE__*/React__default.createElement(Image, {
72
+ src: logo.url,
73
+ width: logo.width,
74
+ height: logo.height,
75
+ alt: logo.alternativeText || "site logo",
76
+ style: {
77
+ maxHeight: "50px"
78
+ }
79
+ }), site_title !== undefined && /*#__PURE__*/React__default.createElement(Typography, {
80
+ variant: "h6",
81
+ noWrap: true,
82
+ component: "h1",
83
+ sx: {
84
+ display: "flex",
85
+ textDecoration: "none"
86
+ }
87
+ }, site_title))), /*#__PURE__*/React__default.createElement(Box, {
88
+ sx: {
89
+ display: "block",
90
+ width: "30px"
91
+ }
92
+ }), pages && pages.length > 0 && /*#__PURE__*/React__default.createElement(Box, {
93
+ sx: {
94
+ flexGrow: 1,
95
+ display: {
96
+ xs: "none",
97
+ md: "flex"
98
+ },
99
+ alignItems: "center"
100
+ }
101
+ }, pages.map(page => {
102
+ return /*#__PURE__*/React__default.createElement(ScrollLink, {
103
+ key: page.name,
104
+ href: page.slug
105
+ }, /*#__PURE__*/React__default.createElement(Button
106
+ /* onClick={() => {
107
+ router.push(page.url);
108
+ }} */, {
109
+ sx: {
110
+ my: 2,
111
+ color: "primary.contrastText",
112
+ display: "block"
113
+ }
114
+ }, page.name));
115
+ })), tabs && tabs.length > 0 && /*#__PURE__*/React__default.createElement(Box, {
116
+ sx: {
117
+ flexGrow: 1,
118
+ display: {
119
+ xs: "none",
120
+ md: "flex"
121
+ }
122
+ }
123
+ }, /*#__PURE__*/React__default.createElement(Tabs, {
124
+ value: currentTab,
125
+ onChange: (event, newValue) => handleChange(event, newValue),
126
+ "aria-label": "wrapped label tabs example",
127
+ textColor: "secondary",
128
+ indicatorColor: "secondary",
129
+ variant: "fullWidth"
130
+ }, tabs.length > 0 && tabs.map(tab => {
131
+ return /*#__PURE__*/React__default.createElement(ScrollLink, {
132
+ key: tab.name,
133
+ href: tab.slug
134
+ }, /*#__PURE__*/React__default.createElement(Tab, {
135
+ value: tab.name,
136
+ label: tab.name
137
+ /* onClick={() => {
138
+ router.push(tab.url);
139
+ }} */,
140
+ sx: {
141
+ p: 1
142
+ }
143
+ }));
144
+ }))), /*#__PURE__*/React__default.createElement(Link, {
145
+ href: "/",
146
+ style: {
147
+ textDecoration: "none",
148
+ color: "unset"
149
+ }
150
+ }, /*#__PURE__*/React__default.createElement(Box, {
151
+ sx: {
152
+ display: {
153
+ xs: "flex",
154
+ md: "none"
155
+ },
156
+ alignItems: "center"
157
+ }
158
+ }, logo.url !== undefined && /*#__PURE__*/React__default.createElement(Box, {
159
+ sx: {
160
+ display: "flex",
161
+ mr: 1
162
+ }
163
+ }, /*#__PURE__*/React__default.createElement("img", {
164
+ src: logo.url,
165
+ width: logo.width || "32px",
166
+ height: logo.height || "32px",
167
+ alt: logo.alternativeText || "site logo",
168
+ style: {
169
+ maxWidth: "60px",
170
+ maxHeight: "60px"
171
+ }
172
+ })), site_title !== undefined && /*#__PURE__*/React__default.createElement(Typography, {
173
+ variant: "h5",
174
+ noWrap: true,
175
+ component: "h1",
176
+ sx: {
177
+ display: "flex",
178
+ flexGrow: 1
179
+ }
180
+ }, site_title))), /*#__PURE__*/React__default.createElement(Box, {
181
+ sx: {
182
+ display: {
183
+ xs: "flex",
184
+ md: "none"
185
+ },
186
+ flexGrow: 1
187
+ }
188
+ }), /*#__PURE__*/React__default.createElement(Box, {
189
+ sx: {
190
+ flexGrow: 0,
191
+ display: {
192
+ xs: "flex",
193
+ md: "none"
194
+ }
195
+ }
196
+ }, /*#__PURE__*/React__default.createElement(Button, {
197
+ onClick: handleOpenMobileMenu,
198
+ sx: {
199
+ width: "40px",
200
+ height: "40px",
201
+ borderRadius: "50%",
202
+ p: 0,
203
+ minWidth: "unset",
204
+ color: "primary.contrastText",
205
+ boxShadow: "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)"
206
+ }
207
+ }, /*#__PURE__*/React__default.createElement(MoreVertIcon, {
208
+ sx: {
209
+ color: "primary.contrastText"
210
+ }
211
+ })), /*#__PURE__*/React__default.createElement(Dialog, {
212
+ fullScreen: true,
213
+ open: mobileNavOpen,
214
+ onClose: handleCloseMobileMenu
215
+ }, /*#__PURE__*/React__default.createElement(AppBar, {
216
+ position: "sticky"
217
+ }, /*#__PURE__*/React__default.createElement(Container, {
218
+ maxWidth: "xl"
219
+ }, /*#__PURE__*/React__default.createElement(Toolbar, {
220
+ disableGutters: true,
221
+ sx: {
222
+ py: 1,
223
+ justifyContent: "space-between"
224
+ }
225
+ }, /*#__PURE__*/React__default.createElement(Link, {
226
+ href: "/",
227
+ style: {
228
+ textDecoration: "none",
229
+ color: "unset"
230
+ }
231
+ }, /*#__PURE__*/React__default.createElement(Box, {
232
+ sx: {
233
+ display: "flex",
234
+ flexDirection: "row",
235
+ alignItems: "center"
236
+ }
237
+ }, /*#__PURE__*/React__default.createElement(Box, {
238
+ sx: {
239
+ display: "flex",
240
+ mr: 1
241
+ }
242
+ }, /*#__PURE__*/React__default.createElement("img", {
243
+ src: logo.url,
244
+ alt: logo.alternativeText || "logo",
245
+ width: logo.width || "32px",
246
+ height: logo.height || "32px",
247
+ style: {
248
+ maxWidth: "60px",
249
+ maxHeight: "60px"
250
+ }
251
+ })), /*#__PURE__*/React__default.createElement(Typography, {
252
+ variant: "h5",
253
+ noWrap: true,
254
+ component: "h1",
255
+ sx: {
256
+ display: "flex",
257
+ flexGrow: 1
258
+ }
259
+ }, site_title !== undefined && site_title))), /*#__PURE__*/React__default.createElement(Button, {
260
+ onClick: handleCloseMobileMenu,
261
+ sx: {
262
+ width: "40px",
263
+ height: "40px",
264
+ borderRadius: "50%",
265
+ p: 0,
266
+ minWidth: "unset",
267
+ color: "primary.contrastText",
268
+ boxShadow: "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)"
269
+ },
270
+ "aria-label": "close"
271
+ }, /*#__PURE__*/React__default.createElement(CloseIcon, {
272
+ sx: {
273
+ color: "primary.contrastText"
274
+ }
275
+ }))))), pages && pages.length > 0 && /*#__PURE__*/React__default.createElement(List, null, pages.map(page => {
276
+ return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ScrollLink, {
277
+ key: page.name,
278
+ href: page.slug
279
+ }, /*#__PURE__*/React__default.createElement(ListItem
280
+ /* onClick={() => {
281
+ router.push(page.url);
282
+ handleCloseMobileMenu();
283
+ }} */, null, /*#__PURE__*/React__default.createElement(ListItemText, {
284
+ primary: page.name
285
+ }))), /*#__PURE__*/React__default.createElement(Divider, null));
286
+ })))))));
287
+ }
288
+
289
+ export { ScrollNavbar as default };
package/dist/esm/index.js CHANGED
@@ -15,3 +15,4 @@ export { default as WebsitePlaceholder } from './components/WebsitePlaceholder.j
15
15
  export { default as BulletList } from './components/BulletList.js';
16
16
  export { default as WhatsAppClickToChatButton } from './components/WhatsAppClickToChatButton.js';
17
17
  export { default as ScrollLink } from './components/ScrollLink.js';
18
+ export { default as ScrollNavbar } from './components/ScrollNavbar.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "umwd-components",
3
- "version": "0.1.120",
3
+ "version": "0.1.121",
4
4
  "description": "UMWD Component library",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -20,7 +20,7 @@ import {
20
20
  import CloseIcon from "@mui/icons-material/Close";
21
21
  import MoreVertIcon from "@mui/icons-material/MoreVert";
22
22
  /* import { useRouter } from "next/router"; */
23
- import ScrollLink from "./ScrollLink";
23
+ import ScrollLink from "./ScrollLink.tsx";
24
24
 
25
25
  interface ImageProps {
26
26
  id: number;
package/src/index.js CHANGED
@@ -9,3 +9,4 @@ export { default as WebsitePlaceholder } from "./components/WebsitePlaceholder";
9
9
  export { default as BulletList } from "./components/BulletList";
10
10
  export { default as WhatsAppClickToChatButton } from "./components/WhatsAppClickToChatButton.tsx";
11
11
  export { default as ScrollLink } from "./components/ScrollLink.tsx";
12
+ export { default as ScrollNavbar } from "./components/ScrollNavbar.tsx";