jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui) - console errors with popup

Browse source
This commit is contained in:
Shekar Siri 2022-07-18 18:05:02 +02:00
parent 71b04f1708
commit 4adfd4247a
2 changed files with 116 additions and 112 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

139
frontend/app/components/ui/ItemMenu/ItemMenu.js
View file

@ -1,90 +1,81 @@
import React from 'react';
import { Icon, Popup } from 'UI';
import { Icon } from 'UI';
import styles from './itemMenu.module.css';
import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
import cn from 'classnames';
export default class ItemMenu extends React.PureComponent {
state = {
displayed: false,
};
state = {
displayed: false,
};
handleEsc = (e) => e.key === 'Escape' && this.closeMenu()
handleEsc = (e) => e.key === 'Escape' && this.closeMenu();
componentDidMount() {
document.addEventListener("keydown", this.handleEsc, false);
}
componentWillUnmount() {
document.removeEventListener("keydown", this.handleEsc, false);
}
componentDidMount() {
document.addEventListener('keydown', this.handleEsc, false);
}
componentWillUnmount() {
document.removeEventListener('keydown', this.handleEsc, false);
}
onClick = callback => (e) => {
e.stopPropagation();
callback(e);
}
onClick = (callback) => (e) => {
e.stopPropagation();
callback(e);
};
toggleMenu = (e) => {
this.setState({ displayed: !this.state.displayed });
}
toggleMenu = (e) => {
this.setState({ displayed: !this.state.displayed });
};
closeMenu = () => this.setState({ displayed: false })
closeMenu = () => this.setState({ displayed: false });
render() {
const { items, label = "", bold } = this.props;
const { displayed } = this.state;
const parentStyles = label ? 'rounded px-2 py-2 hover:bg-gray-light' : '';
render() {
const { items, label = '', bold } = this.props;
const { displayed } = this.state;
const parentStyles = label ? 'rounded px-2 py-2 hover:bg-gray-light' : '';
return (
<div className={ styles.wrapper }>
<OutsideClickDetectingDiv
onClickOutside={ this.closeMenu }
>
<div
onClick={ this.toggleMenu }
className={cn("flex items-center cursor-pointer select-none", parentStyles, { 'bg-gray-light' : displayed && label })}
>
{label && <span className={cn('mr-1', bold ? 'font-medium color-gray-darkest' : 'color-gray-medium')}>{label}</span>}
<div
ref={ (ref) => { this.menuBtnRef = ref; } }
className={cn("rounded-full flex items-center justify-center", { 'bg-gray-light' : displayed, "w-10 h-10" : !label })}
role="button"
>
<Icon name="ellipsis-v" size="16" />
</div>
</div>
</OutsideClickDetectingDiv>
<div
className={ cn(styles.menu, { [styles.menuDim]: !bold }) }
data-displayed={ displayed }
>
{ items.filter(({ hidden }) => !hidden).map(({ onClick, text, icon, disabled = false, disabledMessage = '' }) => (
<div
key={ text }
onClick={ !disabled ? this.onClick(onClick) : () => {} }
className={disabled ? 'cursor-not-allowed' : ''}
role="menuitem"
tabIndex="-1"
>
<Popup
delay={500}
arrow
title={ disabledMessage }
position="left"
disabled={ !disabled }
>
<div className={cn(styles.menuItem, 'text-neutral-700', {'disabled' : disabled })}>
{ icon && (
<div className={ styles.iconWrapper }>
<Icon name={ icon } size="13" color="gray-dark" />
return (
<div className={styles.wrapper}>
<OutsideClickDetectingDiv onClickOutside={this.closeMenu}>
<div
onClick={this.toggleMenu}
className={cn('flex items-center cursor-pointer select-none', parentStyles, { 'bg-gray-light': displayed && label })}
>
{label && <span className={cn('mr-1', bold ? 'font-medium color-gray-darkest' : 'color-gray-medium')}>{label}</span>}
<div
ref={(ref) => {
this.menuBtnRef = ref;
}}
className={cn('rounded-full flex items-center justify-center', { 'bg-gray-light': displayed, 'w-10 h-10': !label })}
role="button"
>
<Icon name="ellipsis-v" size="16" />
</div>
)}
<div>{ text }</div>
</div>
</Popup>
</div>
</OutsideClickDetectingDiv>
<div className={cn(styles.menu, { [styles.menuDim]: !bold })} data-displayed={displayed}>
{items
.filter(({ hidden }) => !hidden)
.map(({ onClick, text, icon, disabled = false, disabledMessage = '' }) => (
<div
key={text}
onClick={!disabled ? this.onClick(onClick) : () => {}}
className={disabled ? 'cursor-not-allowed' : ''}
role="menuitem"
tabIndex="-1"
>
<div className={cn(styles.menuItem, 'text-neutral-700', { disabled: disabled })}>
{icon && (
<div className={styles.iconWrapper}>
<Icon name={icon} size="13" color="gray-dark" />
</div>
)}
<div>{text}</div>
</div>
</div>
))}
</div>
</div>
))}
</div>
</div>
);
}
);
}
}

89
frontend/app/components/ui/Popup/Popup.tsx
View file

@ -1,44 +1,57 @@
import React from 'react';
import { Tooltip } from 'react-tippy';
import { Tooltip, Theme, Trigger, Position } from 'react-tippy';
interface Props {
content?: any;
title?: any;
trigger?: any
position?: any
className?: string
delay?: number
disabled?: boolean
arrow?: boolean
open?: boolean
style?: any
[x:string]: any;
content?: any;
title?: any;
trigger?: Trigger;
position?: Position;
className?: string;
delay?: number;
hideDelay?: number;
duration?: number;
disabled?: boolean;
arrow?: boolean;
open?: boolean;
style?: any;
theme?: Theme;
interactive?: boolean;
children?: any;
// [x:string]: any;
}
export default ({
position = 'top',
title='',
className='',
trigger = 'mouseenter',
delay = 1000,
disabled = false,
arrow = true,
theme = 'dark',
style = {},
...props
}: Props) => (
<Tooltip
// {...props}
className={className}
trigger={trigger}
html={props.content || props.title}
disabled={disabled}
arrow={arrow}
delay={delay}
hideOnClick={true}
hideOnScroll={true}
theme={theme}
style={style}
>
{ props.children }
</Tooltip>
position = 'top',
title = '',
className = '',
trigger = 'mouseenter',
delay = 1000,
hideDelay = 0,
content = '',
duration = 0,
disabled = false,
arrow = true,
theme = 'dark',
style = {},
interactive = false,
children,
}: // ...props
Props) => (
<Tooltip
position={position}
className={className}
trigger={trigger}
html={content || title}
disabled={disabled}
arrow={arrow}
delay={delay}
hideOnClick={true}
hideOnScroll={true}
theme={theme}
style={style}
interactive={interactive}
duration={0}
hideDelay={hideDelay}
>
{children}
</Tooltip>
);