muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-28 14:16:41 +07:00
Code Packages Activity Actions

working comment menu

Browse source
This commit is contained in:
Fedor Katurov 2019-12-03 15:08:20 +07:00
parent 1bf9fe6b83
commit 11ec71766f
3 changed files with 37 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/components/node/CommentMenu/index.tsx
View file

@ -1,4 +1,4 @@
import React, { FC } from 'react';
import React, { FC, useState, useCallback } from 'react';
import styles from './styles.scss';
interface IProps {
@ -7,12 +7,25 @@ interface IProps {
}
const CommentMenu: FC<IProps> = ({ onEdit, onDelete }) => {
const [is_menu_opened, setIsMenuOpened] = useState(false);
const onFocus = useCallback(() => setIsMenuOpened(true), [setIsMenuOpened]);
const onBlur = useCallback(() => setIsMenuOpened(false), [setIsMenuOpened]);
return (
<div className={styles.wrap}>
<div className={styles.menu}>
<div className={styles.item}>Редактировать</div>
<div className={styles.item}>Удалить</div>
</div>
<div className={styles.wrap} onFocus={onFocus} onBlur={onBlur} tabIndex={-1}>
<div className={styles.dot} />
{is_menu_opened && (
<div className={styles.menu}>
<div className={styles.item} onMouseDown={onEdit}>
Редактировать
</div>
<div className={styles.item} onMouseDown={onDelete}>
Удалить
</div>
</div>
)}
</div>
);
};