@factorearth/component-library 3.6.7-alpha.0 → 3.6.9-alpha.0
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.
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import styled from "@emotion/styled";
|
|
2
|
-
import React, { useState, useMemo } from "react";
|
|
2
|
+
import React, { useState, useMemo, useRef } from "react";
|
|
3
3
|
import { FiMenu, FiCloud, FiCloudOff, FiSun, FiMoon, FiChevronRight, FiX, } from "react-icons/fi";
|
|
4
4
|
import Toggle from "../../Atoms/Toggle/Toggle";
|
|
5
5
|
const NavMenu = styled.div `
|
|
6
6
|
display: flex;
|
|
7
|
-
width: 320px;
|
|
8
7
|
flex-direction: column;
|
|
9
8
|
background: ${({ colorPalette }) => colorPalette.background.primary};
|
|
10
9
|
`;
|
|
@@ -16,7 +15,7 @@ const NavBarHeader = styled.div `
|
|
|
16
15
|
border-width: 0 0 1px 0;
|
|
17
16
|
border-style: solid;
|
|
18
17
|
border-color: ${({ colorPalette }) => colorPalette.background.secondary};
|
|
19
|
-
width:
|
|
18
|
+
width: 100vw;
|
|
20
19
|
`;
|
|
21
20
|
const OnlineStatus = styled.div `
|
|
22
21
|
display: flex;
|
|
@@ -45,20 +44,20 @@ const OfflineStatus = styled.div `
|
|
|
45
44
|
border-color: ${({ colorPalette }) => colorPalette.text.secondary};
|
|
46
45
|
color: ${({ colorPalette }) => colorPalette.text.secondary};
|
|
47
46
|
`;
|
|
48
|
-
const DropdownContainer = styled.div
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
`;
|
|
47
|
+
// const DropdownContainer = styled.div<{ colorPalette: Colors }>`
|
|
48
|
+
// display: flex;
|
|
49
|
+
// flex-direction: column;
|
|
50
|
+
// align-items: flex-start;
|
|
51
|
+
// align-self: stretch;
|
|
52
|
+
// font-size: 14px;
|
|
53
|
+
// font-weight: 700;
|
|
54
|
+
// line-height: 21px;
|
|
55
|
+
// padding: 0 16px 24px;
|
|
56
|
+
// border-width: 0 0 1px 0;
|
|
57
|
+
// border-style: solid;
|
|
58
|
+
// border-color: ${({ colorPalette }) => colorPalette.background.secondary};
|
|
59
|
+
// color: ${({ colorPalette }) => colorPalette.text.primary};
|
|
60
|
+
// `;
|
|
62
61
|
const MenuItems = styled.div `
|
|
63
62
|
align-items: flex-start;
|
|
64
63
|
align-self: stretch;
|
|
@@ -111,11 +110,15 @@ const Version = styled.div `
|
|
|
111
110
|
`;
|
|
112
111
|
const NavBar = (props) => {
|
|
113
112
|
const { colorPalette, locations, appInfo } = props;
|
|
113
|
+
const navMenuRef = useRef(null);
|
|
114
114
|
const [navOpen, setNavOpen] = useState(false);
|
|
115
115
|
const locationsList = useMemo(() => {
|
|
116
116
|
const buildNavElements = (locations) => {
|
|
117
117
|
const locationsJsx = locations.map((location) => {
|
|
118
|
-
return (React.createElement(MenuItem, { colorPalette: colorPalette, onClick:
|
|
118
|
+
return (React.createElement(MenuItem, { colorPalette: colorPalette, onClick: () => {
|
|
119
|
+
location.onClick();
|
|
120
|
+
setNavOpen(false);
|
|
121
|
+
}, key: location.name },
|
|
119
122
|
React.createElement(Location, null,
|
|
120
123
|
location?.icon,
|
|
121
124
|
location.name),
|
|
@@ -125,11 +128,14 @@ const NavBar = (props) => {
|
|
|
125
128
|
};
|
|
126
129
|
return buildNavElements(locations);
|
|
127
130
|
}, [locations, colorPalette]);
|
|
131
|
+
const handleNavClick = (e) => {
|
|
132
|
+
if (!navOpen)
|
|
133
|
+
navMenuRef.current?.focus();
|
|
134
|
+
setNavOpen(!navOpen);
|
|
135
|
+
};
|
|
128
136
|
return (React.createElement(NavMenu, { colorPalette: colorPalette },
|
|
129
137
|
React.createElement(NavBarHeader, { colorPalette: colorPalette },
|
|
130
|
-
React.createElement("div", { style: { cursor: "pointer" }, id: "Navigation", onClick: ()
|
|
131
|
-
setNavOpen(!navOpen);
|
|
132
|
-
} }, navOpen ? (React.createElement(FiX, { size: 24, color: colorPalette.text.primary })) : (React.createElement(FiMenu, { size: 24, color: colorPalette.text.primary }))),
|
|
138
|
+
React.createElement("div", { style: { cursor: "pointer" }, id: "Navigation", onClick: handleNavClick }, navOpen ? (React.createElement(FiX, { size: 24, color: colorPalette.text.primary })) : (React.createElement(FiMenu, { size: 24, color: colorPalette.text.primary }))),
|
|
133
139
|
appInfo.headerLogo && (React.createElement("img", { src: appInfo.headerLogo, alt: "FactoEarth Logo", style: { width: "40px", cursor: "pointer" }, onClick: appInfo.logoOnClick })),
|
|
134
140
|
appInfo.offlineCapable &&
|
|
135
141
|
(appInfo.online ? (React.createElement(OnlineStatus, { colorPalette: colorPalette },
|
|
@@ -137,14 +143,14 @@ const NavBar = (props) => {
|
|
|
137
143
|
"Online")) : (React.createElement(OfflineStatus, { colorPalette: colorPalette },
|
|
138
144
|
React.createElement(FiCloudOff, null),
|
|
139
145
|
"Offline")))),
|
|
140
|
-
navOpen && (React.createElement("div", { style: {
|
|
146
|
+
navOpen && (React.createElement("div", { tabIndex: -1, style: {
|
|
141
147
|
width: "320px",
|
|
142
148
|
position: "fixed",
|
|
143
149
|
top: "90px",
|
|
144
150
|
zIndex: "1000",
|
|
145
151
|
boxShadow: "5px 5px 5px rgba(64, 64, 64, 0.2)",
|
|
146
152
|
backgroundColor: colorPalette.background.primary,
|
|
147
|
-
} },
|
|
153
|
+
}, onBlur: () => setNavOpen(false), ref: navMenuRef },
|
|
148
154
|
appInfo.dropdown && appInfo.dropdown.dropdownComponent,
|
|
149
155
|
React.createElement(MenuItems, null, locationsList),
|
|
150
156
|
React.createElement(Toggles, { className: "toggles" },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavMenu.js","sourceRoot":"","sources":["../../../lib/Molecules/NavMenu/NavMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"NavMenu.js","sourceRoot":"","sources":["../../../lib/Molecules/NavMenu/NavMenu.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@factorearth/component-library",
|
|
3
|
-
"version": "3.6.
|
|
3
|
+
"version": "3.6.9-alpha.0",
|
|
4
4
|
"description": " A storybook component library for FactorEarth",
|
|
5
5
|
"author": "madtrx <marlin.makori@gmail.com>",
|
|
6
6
|
"homepage": "https://github.com/FactorEarth/RecordMiddleware#readme",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"access": "public",
|
|
47
47
|
"registry": "https://registry.npmjs.org/"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "070639f54865569ec8ca16836fcb51bf11e78332",
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"@emotion/react": "^11.13.0",
|
|
52
52
|
"@emotion/styled": "^11.13.0",
|