Skip to content

Commit 0d489df

Browse files
virtualvivekvirtualvivek
committed
updated UI
1 parent 369e7cd commit 0d489df

File tree

11 files changed

+113
-57
lines changed

11 files changed

+113
-57
lines changed

‎babel.config.json

+9-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
11
{
22
"presets": [
33
[
4-
"@babel/env",
4+
"@babel/env",
55
{
6-
"useBuiltIns": "usage",
7-
"corejs": "3.6.5"
6+
"targets": {
7+
"edge": "17",
8+
"firefox": "60",
9+
"chrome": "67",
10+
"safari": "11.1"
11+
},
12+
"useBuiltIns": "usage",
13+
"corejs": "3.6.5"
814
}
915
],
1016
["@babel/preset-react"],

‎public/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="utf-8" />
55
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"" />
77
<meta name="theme-color" content="#EEE" />
88
<meta name="mobile-web-app-capable" content="yes">
99
<meta

‎src/css-source/stylesheet/components/Alerts.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@
9191
@mixin alert-mobile() {
9292
.app-alert {
9393
.app-alert-modal {
94-
width: 100% !important;
94+
width: 100vw !important;
9595
left: 0 !important;
9696
top: 0;
9797
margin: 0;

‎src/demo/v4.2.1/components/CommandBar_docs/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ render() {
100100
</CommandBar.MenuTrigger>
101101
<CommandBar.MenuItem label="Whatsapp">
102102
<CommandBar.MenuSubItem label="HyperLink"/>
103-
<CommandBar.MenuSubItem label="QR Code"/>
103+
{/* <CommandBar.MenuSubItem label="QR Code"/> */}
104104
</CommandBar.MenuItem>
105105
<CommandBar.MenuItem label="Facebook" />
106106
</CommandBar.Menu>

‎src/lib/dist/react-windows-ui-11.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/lib/src/components/Alert/index.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useMemo, Children, useEffect, useState } from "react";
1+
import React, { useMemo, Children, useLayoutEffect, useState } from "react";
22
import { ScrollView } from "../../api";
33

44
const Alert = (props) => {
@@ -17,7 +17,7 @@ const Alert = (props) => {
1717
else {ScrollView.enableScroll(); }
1818
}, [props.isVisible]);
1919

20-
useEffect(() => {
20+
useLayoutEffect(() => {
2121
Children.forEach(props.children, child => {
2222
if (child.type.name === "AlertFooter") {
2323
setFooter(child);

‎src/lib/src/components/CommandBar/CommandBarMenu/CmdBarSubMenu.js renamed to ‎src/lib/src/components/CommandBar/CommandBarMenu/SubMenuItem.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
22
import { Link } from "react-router-dom";
33

4-
const CmdBarSubMenu = (props) => {
4+
const SubMenuItem = (props) => {
55
return (
66
<li
77
key={props.label}
@@ -15,9 +15,9 @@ const CmdBarSubMenu = (props) => {
1515
)
1616
}
1717

18-
CmdBarSubMenu.defaultProps = {
18+
SubMenuItem.defaultProps = {
1919
value: "Submit",
2020
disabled: false
2121
}
2222

23-
export default CmdBarSubMenu;
23+
export default SubMenuItem;

‎src/lib/src/components/CommandBar/CommandBarMenu/SubMenuList.js

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React, { forwardRef, useImperativeHandle, useRef } from "react";
2+
import SubMenuListItem from "./SubMenuListItem";
3+
4+
function SubMenuList(props, myRef) {
5+
const inputRef = useRef(null);
6+
7+
useImperativeHandle(myRef, () => ({
8+
toggleShow: () => {
9+
inputRef.current.classList.toggle("show");
10+
}
11+
}));
12+
13+
return (
14+
<ul
15+
ref={inputRef}
16+
onClick={props.onItemClick}
17+
className="app-cmdbar-menu-list cmdbar-submenu">
18+
{/* If there are multiple sub child if li */}
19+
{Array.isArray(props.listData.children)
20+
? <>
21+
{ props.listData.children.map((child_, index) => {
22+
return [
23+
child_.type === SubMenuListItem && (
24+
<SubMenuListItem
25+
key={index}
26+
icon={child_.props.icon}
27+
label={child_.props.label}
28+
/>
29+
)
30+
]
31+
})
32+
}
33+
</>
34+
// If there is only single child of sub child li
35+
: props.listData.children
36+
? <SubMenuListItem
37+
label={props.listData.children.props.label}
38+
icon={props.listData.children.props.icon}
39+
/>
40+
: <></>
41+
}
42+
</ul>
43+
)
44+
}
45+
46+
export default forwardRef(SubMenuList);

‎src/lib/src/components/CommandBar/CommandBarMenu/SubMenuListItem.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from "react";
2+
import { Link } from "react-router-dom";
3+
4+
const SubMenuListItem = (props) => {
5+
return (
6+
<li
7+
key={props.label}
8+
className="cmdbar-menu-list-item">
9+
<Link
10+
onClick={props.onClick}
11+
to={props.link ? props.link : "#"}>
12+
{props.icon}{props.label}
13+
</Link>
14+
</li>
15+
)
16+
}
17+
18+
SubMenuListItem.defaultProps = {
19+
value: "Submit",
20+
disabled: false
21+
}
22+
23+
export default SubMenuListItem;

‎src/lib/src/components/CommandBar/CommandBarMenu/index.js

+16-38
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@ import React, { useState, useRef, Children, useMemo } from "react";
22
import { useOutSideClick } from "../../../hooks";
33
import { getScreenOffset } from "../../../api";
44
import { Link } from "react-router-dom";
5-
import CmdBarSubMenu from "./CmdBarSubMenu";
5+
import SubMenuItem from "./SubMenuItem";
6+
import SubMenuList from "./SubMenuList";
67

78
const CommandBarMenu = (props) => {
89

9-
let _menu_trigger;
10+
let _menu_trigger= <button className="app-cmdbar-button"><i className="icons10-angle-down"></i></button>;
1011

1112
const subMenusRef = useRef([]);
1213
const wrapperRef = useRef(null);
@@ -18,7 +19,7 @@ const CommandBarMenu = (props) => {
1819

1920
const hideCurrentSubmenu = () => {
2021
if(currentSubMenu) {
21-
subMenusRef.current[currentSubMenu].classList.toggle("show");
22+
subMenusRef.current[currentSubMenu].toggleShow();
2223
setCurrentSubMenu(null);
2324
}
2425
}
@@ -39,10 +40,10 @@ const CommandBarMenu = (props) => {
3940

4041
const openSubMenu = (indx) => {
4142
if(currentSubMenu) {
42-
subMenusRef.current[currentSubMenu].classList.toggle("show");
43+
subMenusRef.current[currentSubMenu].toggleShow();
4344
}
4445
setCurrentSubMenu(indx);
45-
subMenusRef.current[indx].classList.toggle("show");
46+
subMenusRef.current[indx].toggleShow();
4647
}
4748

4849
const _onItemClick = (child_props) => {
@@ -64,39 +65,19 @@ const CommandBarMenu = (props) => {
6465
key={child.props.label}
6566
className="cmdbar-menu-list-item">
6667
<Link
67-
onClick={child.props.children ? () => openSubMenu(index) : () => _onItemClick(child.props)}
68+
onClick={child.props.children
69+
? () => openSubMenu(index)
70+
: () => _onItemClick(child.props)}
6871
to={child.props.link ? child.props.link : "#"}>
6972
{child.props.icon}{child.props.label}
7073
{child.props.children ? <i className="icons10-angle-right"></i>:<></>}
7174
</Link>
72-
{Array.isArray(child.props.children)
73-
? <ul
74-
onClick={() => hideAllMenu()}
75-
ref={(el) => (subMenusRef.current[index] = el)}
76-
className="app-cmdbar-menu-list cmdbar-submenu">
77-
{ child.props.children.map((child_, index) => {
78-
return [
79-
child_.type === CmdBarSubMenu && (
80-
<CmdBarSubMenu
81-
key={index}
82-
icon={child_.props.icon}
83-
label={child_.props.label}
84-
/>
85-
)
86-
]
87-
})
88-
}
89-
</ul>
90-
: child.props.children
91-
? <ul ref={(el) => (subMenusRef.current[index] = el)}
92-
className="app-cmdbar-menu-list cmdbar-submenu">
93-
<CmdBarSubMenu
94-
label={child.props.children.props.label}
95-
icon={child.props.children.props.icon}
96-
/>
97-
</ul>
98-
: <></>
99-
}
75+
<SubMenuList
76+
ref={(el) => (subMenusRef.current[index] = el)}
77+
listData={child.props}
78+
listIndex={index-1}
79+
onItemClick={() => hideAllMenu()}
80+
/>
10081
</li>
10182
),
10283
child.type === CommandBarMenuItemDivider && (
@@ -110,9 +91,6 @@ const CommandBarMenu = (props) => {
11091
return _menu_trigger = child;
11192
}
11293
});
113-
if (!_menu_trigger) _menu_trigger = <button className="app-cmdbar-button">
114-
<i className="icons10-angle-down"></i>
115-
</button>
11694

11795

11896
return (
@@ -137,7 +115,7 @@ CommandBarMenuItem.defaultProps = {
137115
onClick: () => {}
138116
}
139117

140-
CommandBarMenu.MenuSubItem = CmdBarSubMenu;
118+
CommandBarMenu.MenuSubItem = SubMenuItem;
141119
CommandBarMenu.MenuItem = CommandBarMenuItem;
142120
CommandBarMenu.MenuTrigger = CommandBarMenuTrigger;
143121
CommandBarMenu.MenuItemDivider = CommandBarMenuItemDivider;

‎src/lib/src/components/NavBar/NavBarSubMenu/index.js

+10-7
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,16 @@ const NavBarSubMenu = (props) => {
66
const [contentHeight, setContentHeight] = useState(100);
77

88
useLayoutEffect(() => {
9-
let height_ = 0;
10-
panelRef.current?.childNodes.forEach((node) => {
11-
let _platform = window.getComputedStyle(document.documentElement).getPropertyValue("--platform");
12-
let _margin = _platform.includes("windows11") ? 5 : 0;
13-
height_ += node?.clientHeight+_margin;
14-
});
15-
setContentHeight(height_);
9+
setTimeout(() => {
10+
let height_ = 0;
11+
panelRef.current?.childNodes.forEach((node) => {
12+
let _platform = window.getComputedStyle(document.documentElement).getPropertyValue("--platform");
13+
let _margin = _platform.includes("windows11") ? 5 : 0;
14+
height_ += node?.clientHeight+_margin;
15+
});
16+
setContentHeight(height_);
17+
console.log("MenuBar");
18+
}, 150);
1619
}, []);
1720

1821

0 commit comments

Comments
 (0)