IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2025-02-25 18:55:31 -06:00
Code Issues Packages Projects Releases Wiki Activity

Fix few more issues related to Menu rewrite. #5615

Browse Source
This commit is contained in:
Aditya Toshniwal 2023-01-13 12:28:23 +05:30 committed by GitHub
parent fbd2f969a2
commit 83b207e7da
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 21 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/pgadmin/static/js/AppMenuBar.jsx
View File

@ -85,6 +85,7 @@ export default function AppMenuBar() {
}}
hasCheck={hasCheck}
checked={menuItem.checked}
closeOnCheck={true}
>{menuItem.label}</PgMenuItem>;
};

9
web/pgadmin/static/js/components/Menu.jsx
View File

@ -64,6 +64,8 @@ export function PgMenu({open, className='', label, menuButton=null, ...props}) {
menuButton={menuButton}
className={clsx(classes.menu, className)}
aria-label={label || 'Menu'}
onContextMenu={(e)=>e.preventDefault()}
viewScroll='close'
/>;
}
return (
@ -74,6 +76,8 @@ export function PgMenu({open, className='', label, menuButton=null, ...props}) {
className={clsx(classes.menu, className)}
aria-label={label || 'Menu'}
data-state={state}
onContextMenu={(e)=>e.preventDefault()}
viewScroll='close'
/>
);
}
@ -92,12 +96,12 @@ export const PgSubMenu = applyStatics(SubMenu)(({label, ...props})=>{
);
});
export const PgMenuItem = applyStatics(MenuItem)(({hasCheck=false, checked=false, accesskey, shortcut, children, ...props})=>{
export const PgMenuItem = applyStatics(MenuItem)(({hasCheck=false, checked=false, accesskey, shortcut, children, closeOnCheck=false, ...props})=>{
const classes = useStyles();
let onClick = props.onClick;
if(hasCheck) {
onClick = (e)=>{
e.keepOpen = true;
e.keepOpen = !closeOnCheck;
props.onClick(e);
};
}
@ -115,6 +119,7 @@ PgMenuItem.propTypes = {
accesskey: PropTypes.string,
shortcut: CustomPropTypes.shortcut,
children: CustomPropTypes.children,
closeOnCheck: PropTypes.bool,
onClick: PropTypes.func,
};

5
web/pgadmin/static/js/components/PgTree/FileTreeX/index.tsx
View File

@ -46,6 +46,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
className='file-tree'
onBlur={this.handleBlur}
onClick={this.handleClick}
onScroll={this.props.onScroll}
ref={this.wrapperRef}
style={{
height: height ? height : "calc(100vh - 60px)",
@ -99,6 +100,10 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
private handleTreeReady = (handle: IFileTreeHandle) => {
const { onReady, model } = this.props
const scrollDiv = this.wrapperRef.current?.querySelector('div')?.querySelector('div')
if(this.props.onScroll) {
scrollDiv?.addEventListener('scroll', (ev: any)=>this.props.onScroll?.(ev));
}
this.fileTreeHandle = {
...handle,

1
web/pgadmin/static/js/components/PgTree/types.ts
View File

@ -85,6 +85,7 @@ export interface IFileTreeXProps {
onReady?: (handle: IFileTreeXHandle) => void
onEvent?: (event: IFileTreeXTriggerEvents) => void
onContextMenu?: (ev: React.MouseEvent, item?: FileOrDir) => void
onScroll?: (ev: React.UIEvent<HTMLDivElement>) => void
}
export enum FileTreeXEvent {

10
web/pgadmin/static/js/tree/tree_init.tsx
View File

@ -108,7 +108,7 @@ function BrowserTree(props) {
return <PgMenuDivider key={i}/>;
}
if(menuItem.isDisabled) {
return <></>;
return <React.Fragment key={i}></React.Fragment>;
}
const hasCheck = typeof menuItem.checked == 'boolean';
@ -134,7 +134,11 @@ function BrowserTree(props) {
return (
<Theme>
<FileTreeX
{...props} height={'100%'} disableCache={true} onContextMenu={onContextMenu} />
{...props} height={'100%'} disableCache={true} onContextMenu={onContextMenu}
onScroll={()=>{
contextPos && setContextPos(null);
}}
/>
<PgMenu
anchorPoint={{
x: contextPos?.x,
@ -149,7 +153,7 @@ function BrowserTree(props) {
if(submenus) {
return <PgSubMenu key={i} label={menuItem.label}>
{submenus.map((submenuItem, si)=>{
return getPgMenuItem(submenuItem, si);
return getPgMenuItem(submenuItem, i+'-'+si);
})}
</PgSubMenu>;
}