@factorearth/component-library 3.6.8-alpha.0 → 3.6.10-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.
|
@@ -10,6 +10,7 @@ interface Location {
|
|
|
10
10
|
onClick: () => void;
|
|
11
11
|
reqPerm?: string;
|
|
12
12
|
icon?: JSX.Element;
|
|
13
|
+
description?: "string";
|
|
13
14
|
}
|
|
14
15
|
interface Dropdown {
|
|
15
16
|
dropdownComponent: JSX.Element | React.ReactNode;
|
|
@@ -23,13 +24,12 @@ interface appInfo {
|
|
|
23
24
|
menuLogoDark?: string;
|
|
24
25
|
copyRight?: string;
|
|
25
26
|
dropdown?: Dropdown;
|
|
27
|
+
headerRightContent?: JSX.Element;
|
|
26
28
|
offlineCapable?: boolean;
|
|
27
29
|
theme: boolean;
|
|
28
30
|
setTheme: React.Dispatch<React.SetStateAction<boolean>>;
|
|
29
31
|
online: boolean;
|
|
30
32
|
setOnline: React.Dispatch<React.SetStateAction<boolean>>;
|
|
31
|
-
selectedProject: boolean;
|
|
32
|
-
setSelectedProject: React.Dispatch<React.SetStateAction<string>>;
|
|
33
33
|
}
|
|
34
34
|
declare const Location: import("@emotion/styled").StyledComponent<{
|
|
35
35
|
theme?: import("@emotion/react").Theme;
|
|
@@ -1,5 +1,5 @@
|
|
|
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 `
|
|
@@ -9,9 +9,8 @@ const NavMenu = styled.div `
|
|
|
9
9
|
`;
|
|
10
10
|
const NavBarHeader = styled.div `
|
|
11
11
|
display: flex;
|
|
12
|
-
|
|
12
|
+
justify-content: space-between;
|
|
13
13
|
align-items: center;
|
|
14
|
-
gap: 16px;
|
|
15
14
|
border-width: 0 0 1px 0;
|
|
16
15
|
border-style: solid;
|
|
17
16
|
border-color: ${({ colorPalette }) => colorPalette.background.secondary};
|
|
@@ -44,20 +43,6 @@ const OfflineStatus = styled.div `
|
|
|
44
43
|
border-color: ${({ colorPalette }) => colorPalette.text.secondary};
|
|
45
44
|
color: ${({ colorPalette }) => colorPalette.text.secondary};
|
|
46
45
|
`;
|
|
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
|
-
// `;
|
|
61
46
|
const MenuItems = styled.div `
|
|
62
47
|
align-items: flex-start;
|
|
63
48
|
align-self: stretch;
|
|
@@ -110,11 +95,16 @@ const Version = styled.div `
|
|
|
110
95
|
`;
|
|
111
96
|
const NavBar = (props) => {
|
|
112
97
|
const { colorPalette, locations, appInfo } = props;
|
|
98
|
+
const navMenuRef = useRef(null);
|
|
113
99
|
const [navOpen, setNavOpen] = useState(false);
|
|
100
|
+
// const [currentLocation, setCurrentLocation] = useState<string>("Home")
|
|
114
101
|
const locationsList = useMemo(() => {
|
|
115
102
|
const buildNavElements = (locations) => {
|
|
116
103
|
const locationsJsx = locations.map((location) => {
|
|
117
|
-
return (React.createElement(MenuItem, { colorPalette: colorPalette, onClick:
|
|
104
|
+
return (React.createElement(MenuItem, { colorPalette: colorPalette, onClick: () => {
|
|
105
|
+
location.onClick();
|
|
106
|
+
setNavOpen(false);
|
|
107
|
+
}, key: location.name },
|
|
118
108
|
React.createElement(Location, null,
|
|
119
109
|
location?.icon,
|
|
120
110
|
location.name),
|
|
@@ -124,26 +114,40 @@ const NavBar = (props) => {
|
|
|
124
114
|
};
|
|
125
115
|
return buildNavElements(locations);
|
|
126
116
|
}, [locations, colorPalette]);
|
|
117
|
+
const handleNavClick = (e) => {
|
|
118
|
+
if (!navOpen)
|
|
119
|
+
navMenuRef.current?.focus();
|
|
120
|
+
setNavOpen(!navOpen);
|
|
121
|
+
};
|
|
127
122
|
return (React.createElement(NavMenu, { colorPalette: colorPalette },
|
|
128
123
|
React.createElement(NavBarHeader, { colorPalette: colorPalette },
|
|
129
|
-
React.createElement("div", { style: {
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
124
|
+
React.createElement("div", { style: {
|
|
125
|
+
display: "flex",
|
|
126
|
+
padding: '24px 0px 24px 24px',
|
|
127
|
+
alignItems: 'center',
|
|
128
|
+
gap: '16px'
|
|
129
|
+
} },
|
|
130
|
+
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 }))),
|
|
131
|
+
appInfo.headerLogo && (React.createElement("img", { src: appInfo.headerLogo, alt: "FactoEarth Logo", style: { width: "40px", cursor: "pointer" }, onClick: appInfo.logoOnClick })),
|
|
132
|
+
appInfo.offlineCapable &&
|
|
133
|
+
(appInfo.online ? (React.createElement(OnlineStatus, { colorPalette: colorPalette },
|
|
134
|
+
React.createElement(FiCloud, null),
|
|
135
|
+
"Online")) : (React.createElement(OfflineStatus, { colorPalette: colorPalette },
|
|
136
|
+
React.createElement(FiCloudOff, null),
|
|
137
|
+
"Offline")))),
|
|
138
|
+
React.createElement("div", { style: {
|
|
139
|
+
alignItems: "center",
|
|
140
|
+
gap: '16px',
|
|
141
|
+
margin: "16px",
|
|
142
|
+
} }, appInfo.headerRightContent)),
|
|
143
|
+
navOpen && (React.createElement("div", { tabIndex: -1, style: {
|
|
140
144
|
width: "320px",
|
|
141
145
|
position: "fixed",
|
|
142
146
|
top: "90px",
|
|
143
147
|
zIndex: "1000",
|
|
144
148
|
boxShadow: "5px 5px 5px rgba(64, 64, 64, 0.2)",
|
|
145
149
|
backgroundColor: colorPalette.background.primary,
|
|
146
|
-
} },
|
|
150
|
+
}, onBlur: () => setNavOpen(false), ref: navMenuRef },
|
|
147
151
|
appInfo.dropdown && appInfo.dropdown.dropdownComponent,
|
|
148
152
|
React.createElement(MenuItems, null, locationsList),
|
|
149
153
|
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":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,EACN,MAAM,EACN,OAAO,EACP,UAAU,EACV,KAAK,EACL,MAAM,EACN,cAAc,EACd,GAAG,GACH,MAAM,gBAAgB,CAAC;AACxB,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAqC/C,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAA0B;;;eAGrC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,OAAO;CACnE,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAA0B;;;;;;iBAMxC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,SAAS;;CAEvE,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAA0B;;;;;;;;;;iBAUxC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,gBAAgB,CAAC,OAAO;UAClE,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,gBAAgB,CAAC,OAAO;;CAEpE,CAAC;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAA0B;;;;;;;;;;iBAUzC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS;UACxD,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS;CAC1D,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAI;;;CAG/B,CAAC;AAEF,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAA0B;;;;UAI3C,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ;;;;iBAIzC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,SAAS;;;CAGvE,CAAC;AAEF,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAI;;;;;;;CAO9B,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAI;;CAE7B,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAA0B;;;eAGrC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,QAAQ;CACpE,CAAC;AAEF,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAA0B;;;;UAIpD,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO;CACxD,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAI;;;;;CAKhC,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAA0B;;;;UAI1C,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO;CACxD,CAAC;AAEF,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE;IACrC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAClD,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACjD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IACtD,yEAAyE;IAE1E,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,MAAM,gBAAgB,GAAG,CAAC,SAAqB,EAAE,EAAE;YAClD,MAAM,YAAY,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE;gBAC/C,OAAO,CACN,oBAAC,QAAQ,IACR,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,GAAG,EAAE;wBACN,QAAQ,CAAC,OAAO,EAAE,CAAA;wBAClB,UAAU,CAAC,KAAK,CAAC,CAAC;oBACpB,CAAC,EACP,GAAG,EAAE,QAAQ,CAAC,IAAI;oBAElB,oBAAC,QAAQ;wBACP,QAAQ,EAAE,IAAI;wBACd,QAAQ,CAAC,IAAI,CACJ;oBACX,oBAAC,cAAc,OAAG,CACR,CACX,CAAC;YACH,CAAC,CAAC,CAAC;YAEH,OAAO,YAAY,CAAC;QACrB,CAAC,CAAC;QAEF,OAAO,gBAAgB,CAAC,SAAS,CAAC,CAAC;IACpC,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC;IAE7B,MAAM,cAAc,GAAG,CAAC,CAAmB,EAAE,EAAE;QAC7C,IAAI,CAAC,OAAO;YAAE,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QAC1C,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC;IAEtB,CAAC,CAAA;IAEH,OAAO,CACN,oBAAC,OAAO,IAAC,YAAY,EAAE,YAAY;QAClC,oBAAC,YAAY,IAAC,YAAY,EAAE,YAAY;YACjC,6BAAK,KAAK,EAAE;oBACV,OAAO,EAAE,MAAM;oBACf,OAAO,EAAE,oBAAoB;oBAC7B,UAAU,EAAE,QAAQ;oBACpB,GAAG,EAAE,MAAM;iBACZ;gBACC,6BACA,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAC5B,EAAE,EAAC,YAAY,EACf,OAAO,EAAE,cAAc,IAEtB,OAAO,CAAC,CAAC,CAAC,CACT,oBAAC,GAAG,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,OAAO,GAAI,CACpD,CAAC,CAAC,CAAC,CACF,oBAAC,MAAM,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,OAAO,GAAI,CACvD,CACG;gBACL,OAAO,CAAC,UAAU,IAAI,CACrB,6BACE,GAAG,EAAE,OAAO,CAAC,UAAU,EACvB,GAAG,EAAC,iBAAiB,EACrB,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,EAC3C,OAAO,EAAE,OAAO,CAAC,WAAW,GAC5B,CACH;gBACA,OAAO,CAAC,cAAc;oBACrB,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAChB,oBAAC,YAAY,IAAC,YAAY,EAAE,YAAY;wBACtC,oBAAC,OAAO,OAAG;iCAEE,CAChB,CAAC,CAAC,CAAC,CACF,oBAAC,aAAa,IAAC,YAAY,EAAE,YAAY;wBACvC,oBAAC,UAAU,OAAG;kCAEA,CACjB,CAAC,CACE;YACX,6BAAK,KAAK,EAAE;oBACV,UAAU,EAAE,QAAQ;oBACb,GAAG,EAAE,MAAM;oBAClB,MAAM,EAAE,MAAM;iBACd,IACA,OAAO,CAAC,kBAAkB,CACtB,CACO;QACd,OAAO,IAAI,CACX,6BACM,QAAQ,EAAE,CAAC,CAAC,EACjB,KAAK,EAAE;gBACN,KAAK,EAAE,OAAO;gBACd,QAAQ,EAAE,OAAO;gBACjB,GAAG,EAAE,MAAM;gBACX,MAAM,EAAE,MAAM;gBACd,SAAS,EAAE,mCAAmC;gBACxC,eAAe,EAAE,YAAY,CAAC,UAAU,CAAC,OAAO;aACtD,EACI,MAAM,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,EAC/B,GAAG,EAAE,UAAU;YAEnB,OAAO,CAAC,QAAQ,IAAI,OAAO,CAAC,QAAQ,CAAC,iBAAiB;YACvD,oBAAC,SAAS,QAAE,aAAa,CAAa;YACtC,oBAAC,OAAO,IAAC,SAAS,EAAC,SAAS;gBAC1B,OAAO,CAAC,cAAc,IAAI,CAC1B,oBAAC,MAAM,IACN,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE;wBACN;4BACC,IAAI,EAAE,SAAS;4BACf,IAAI,EAAE,oBAAC,UAAU,OAAG;yBACpB;wBACD;4BACC,IAAI,EAAE,QAAQ;4BACd,IAAI,EAAE,oBAAC,OAAO,OAAG;yBACjB;qBACD,EACD,QAAQ,EAAE,OAAO,CAAC,SAAS,EAC3B,KAAK,EAAE,OAAO,CAAC,MAAM,GACpB,CACF;gBACD,oBAAC,MAAM,IACN,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE;wBACN;4BACC,IAAI,EAAE,MAAM;4BACZ,IAAI,EAAE,oBAAC,MAAM,OAAG;yBAChB;wBACD;4BACC,IAAI,EAAE,OAAO;4BACb,IAAI,EAAE,oBAAC,KAAK,OAAG;yBACf;qBACD,EACD,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,KAAK,EAAE,OAAO,CAAC,KAAK,GACnB,CACO;YACV;gBACC,oBAAC,OAAO,IAAC,YAAY,EAAE,YAAY;oBAClC,oBAAC,iBAAiB,IAAC,YAAY,EAAE,YAAY;wBAC3C,OAAO,CAAC,QAAQ,IAAI,CACpB,6BACC,GAAG,EACF,YAAY,CAAC,KAAK,KAAK,OAAO;gCAC7B,CAAC,CAAC,OAAO,CAAC,QAAQ;gCAClB,CAAC,CAAC,OAAO,CAAC,YAAY,EAExB,GAAG,EAAC,iBAAiB,EACrB,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,GAC5C,CACF;wBACA,OAAO,CAAC,SAAS,IAAI,CACrB,oBAAC,UAAU;4BACV,+BAAI,OAAO,CAAC,SAAS,CAAK;4BAC1B,sDAA2B,CACf,CACb,CACkB;oBACpB,oBAAC,OAAO,IAAC,YAAY,EAAE,YAAY;wBACjC,OAAO,CAAC,IAAI;;wBAAG,OAAO,CAAC,UAAU,CACzB,CACD,CACL,CACD,CACN,CACQ,CACV,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@factorearth/component-library",
|
|
3
|
-
"version": "3.6.
|
|
3
|
+
"version": "3.6.10-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": "56e6eaa947cca0082d7c09208462bd120ebd49d8",
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"@emotion/react": "^11.13.0",
|
|
52
52
|
"@emotion/styled": "^11.13.0",
|