@wandelbots/wandelbots-js-react-components 2.48.0 → 2.49.0-pr.feature-adapt-app-header-styling.392.a161fd7
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.
- package/dist/components/AppHeader.d.ts +2 -0
- package/dist/components/AppHeader.d.ts.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +47 -54
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/AppHeader.tsx +30 -32
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wandelbots/wandelbots-js-react-components",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.49.0-pr.feature-adapt-app-header-styling.392.a161fd7",
|
|
4
4
|
"description": "React UI toolkit for building applications on top of the Wandelbots platform",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -37,6 +37,8 @@ export type AppHeaderProps = {
|
|
|
37
37
|
apps?: AppItem[]
|
|
38
38
|
/** Callback when an app is selected */
|
|
39
39
|
onAppSelect?: (app: AppItem) => void
|
|
40
|
+
/** Disable the menu button */
|
|
41
|
+
disabled?: boolean
|
|
40
42
|
/** Additional styling */
|
|
41
43
|
sx?: SxProps
|
|
42
44
|
}
|
|
@@ -47,7 +49,14 @@ export type AppHeaderProps = {
|
|
|
47
49
|
*/
|
|
48
50
|
export const AppHeader = externalizeComponent(
|
|
49
51
|
observer((props: AppHeaderProps) => {
|
|
50
|
-
const {
|
|
52
|
+
const {
|
|
53
|
+
appIcon,
|
|
54
|
+
appName,
|
|
55
|
+
apps = [],
|
|
56
|
+
onAppSelect,
|
|
57
|
+
disabled = false,
|
|
58
|
+
sx,
|
|
59
|
+
} = props
|
|
51
60
|
const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
|
|
52
61
|
const isMenuOpen = Boolean(anchorEl)
|
|
53
62
|
|
|
@@ -77,30 +86,26 @@ export const AppHeader = externalizeComponent(
|
|
|
77
86
|
position="static"
|
|
78
87
|
sx={{
|
|
79
88
|
boxShadow: "none",
|
|
80
|
-
|
|
81
|
-
"&
|
|
82
|
-
|
|
83
|
-
backgroundColor: "transparent",
|
|
89
|
+
background: (theme) => theme.palette.backgroundPaperElevation?.[1],
|
|
90
|
+
"& label, a, span": {
|
|
91
|
+
textWrap: "nowrap",
|
|
84
92
|
},
|
|
85
93
|
...sx,
|
|
86
94
|
}}
|
|
87
95
|
>
|
|
88
96
|
<Toolbar sx={{ minHeight: "62px !important" }}>
|
|
89
97
|
{/* App Icon */}
|
|
90
|
-
<Box sx={{ mr:
|
|
98
|
+
<Box sx={{ mr: 1, display: "flex", alignItems: "center" }}>
|
|
91
99
|
{appIcon}
|
|
92
100
|
</Box>
|
|
93
101
|
|
|
94
102
|
{/* App Name and Dropdown */}
|
|
95
103
|
<Box sx={{ display: "flex", alignItems: "center", flexGrow: 1 }}>
|
|
96
104
|
<Typography
|
|
97
|
-
|
|
98
|
-
component="div"
|
|
105
|
+
component="h1"
|
|
99
106
|
sx={{
|
|
100
|
-
fontWeight:
|
|
101
|
-
fontSize: "
|
|
102
|
-
lineHeight: "24px",
|
|
103
|
-
letterSpacing: 0,
|
|
107
|
+
fontWeight: "bold",
|
|
108
|
+
fontSize: "1rem",
|
|
104
109
|
}}
|
|
105
110
|
>
|
|
106
111
|
{appName}
|
|
@@ -114,12 +119,13 @@ export const AppHeader = externalizeComponent(
|
|
|
114
119
|
aria-controls="app-menu"
|
|
115
120
|
aria-haspopup="true"
|
|
116
121
|
onClick={handleMenuOpen}
|
|
122
|
+
disabled={disabled}
|
|
117
123
|
sx={{
|
|
118
|
-
ml:
|
|
119
|
-
width:
|
|
120
|
-
height:
|
|
121
|
-
borderRadius: "
|
|
122
|
-
padding:
|
|
124
|
+
ml: 1,
|
|
125
|
+
width: 28,
|
|
126
|
+
height: 28,
|
|
127
|
+
borderRadius: "6px",
|
|
128
|
+
padding: 0,
|
|
123
129
|
backgroundColor: (theme) =>
|
|
124
130
|
alpha(theme.palette.common.white, 0.1),
|
|
125
131
|
opacity: 1,
|
|
@@ -128,9 +134,9 @@ export const AppHeader = externalizeComponent(
|
|
|
128
134
|
alpha(theme.palette.common.white, 0.16),
|
|
129
135
|
},
|
|
130
136
|
"& .MuiSvgIcon-root": {
|
|
131
|
-
fontSize: "
|
|
132
|
-
width: "
|
|
133
|
-
height: "
|
|
137
|
+
fontSize: "8px",
|
|
138
|
+
width: "8px",
|
|
139
|
+
height: "6px",
|
|
134
140
|
},
|
|
135
141
|
}}
|
|
136
142
|
>
|
|
@@ -175,21 +181,13 @@ export const AppHeader = externalizeComponent(
|
|
|
175
181
|
}}
|
|
176
182
|
>
|
|
177
183
|
{apps.map((app) => (
|
|
178
|
-
<MenuItem
|
|
179
|
-
key={app.id}
|
|
180
|
-
onClick={() => handleAppSelect(app)}
|
|
181
|
-
sx={{
|
|
182
|
-
display: "flex",
|
|
183
|
-
alignItems: "center",
|
|
184
|
-
gap: 2,
|
|
185
|
-
py: 1.5,
|
|
186
|
-
px: 2,
|
|
187
|
-
}}
|
|
188
|
-
>
|
|
184
|
+
<MenuItem key={app.id} onClick={() => handleAppSelect(app)}>
|
|
189
185
|
<Box sx={{ display: "flex", alignItems: "center" }}>
|
|
190
186
|
{app.icon}
|
|
191
187
|
</Box>
|
|
192
|
-
<Typography variant="body1"
|
|
188
|
+
<Typography variant="body1" sx={{ ml: 2 }}>
|
|
189
|
+
{app.name}
|
|
190
|
+
</Typography>
|
|
193
191
|
</MenuItem>
|
|
194
192
|
))}
|
|
195
193
|
</Menu>
|