Skip to content

Commit

Permalink
fixed closing the menu when removing the mouse from the block (#518)
Browse files Browse the repository at this point in the history
  • Loading branch information
gaev-art authored Jan 11, 2022
1 parent 575d0d0 commit d061a6f
Showing 1 changed file with 47 additions and 45 deletions.
92 changes: 47 additions & 45 deletions app/javascript/components/settings-page/settings-page.jsx
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
import { faEllipsisH, faPlus } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import React, { useRef, useState } from "react";
import style from "./style.module.css";
import {faEllipsisH, faPlus} from '@fortawesome/free-solid-svg-icons';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import React, {useRef, useState} from 'react';
import style from './style.module.css';

export const SettingsPage = () => {
const fileInput = useRef(null);
const [isOpenMenu, setIsOpenMenu] = useState(false);
const [dataForm, setDataForm] = useState({
nickName: "",
firstName: "",
lastName: "",
avatar: null,
nickName: '',
firstName: '',
lastName: '',
avatar: null
});

const onChangeHandler = (element) => {
if (element.target.files && element.target.files.length > 0) {
const reader = new FileReader();
reader.readAsDataURL(element.target.files[0]);
reader.onloadend = () => {
setDataForm({ ...dataForm, avatar: reader.result });
setDataForm({...dataForm, avatar: reader.result});
};
}
};
Expand All @@ -34,37 +34,39 @@ export const SettingsPage = () => {
{dataForm.avatar ? (
<div className={style.avatarForm}>
<img src={dataForm.avatar} className={style.avatar} />
<div
className={`${style.menuButton} menu-button`}
onClick={(event) => {
event.stopPropagation();
setIsOpenMenu(!isOpenMenu);
}}
>
<FontAwesomeIcon icon={faEllipsisH} size="lg" color="#C6C6C4" />
</div>
<div className={isOpenMenu ? `${style.opened} opened` : "closed"}>
<ul onMouseLeave={() => setIsOpenMenu(false)}>
<li
className="list-item"
onClick={() => {
setIsOpenMenu(false);
fileInput.current.click();
}}
>
Change photo
</li>
<li
className="list-item"
onClick={() => {
setIsOpenMenu(false);
fileInput.current.value = null;
setDataForm({ avatar: null });
}}
>
Delete
</li>
</ul>
<div onMouseLeave={() => setIsOpenMenu(false)}>
<div
className={`${style.menuButton} menu-button`}
onClick={(event) => {
event.stopPropagation();
setIsOpenMenu(!isOpenMenu);
}}
>
<FontAwesomeIcon icon={faEllipsisH} size="lg" color="#C6C6C4" />
</div>
<div className={isOpenMenu ? `${style.opened} opened` : 'closed'}>
<ul>
<li
className="list-item"
onClick={() => {
setIsOpenMenu(false);
fileInput.current.click();
}}
>
Change photo
</li>
<li
className="list-item"
onClick={() => {
setIsOpenMenu(false);
fileInput.current.value = null;
setDataForm({avatar: null});
}}
>
Delete
</li>
</ul>
</div>
</div>
</div>
) : (
Expand All @@ -77,7 +79,7 @@ export const SettingsPage = () => {
icon={faPlus}
size="sm"
color="#474343"
style={{ marginRight: "8px" }}
style={{marginRight: '8px'}}
/>
Upload photo
</button>
Expand All @@ -87,7 +89,7 @@ export const SettingsPage = () => {
accept="image/*"
type="file"
name="image"
style={{ display: "none" }}
style={{display: 'none'}}
onChange={onChangeHandler}
/>
</div>
Expand All @@ -98,7 +100,7 @@ export const SettingsPage = () => {
value={dataForm.nickName}
type="text"
onChange={(element) =>
setDataForm({ ...dataForm, nickName: element.currentTarget.value })
setDataForm({...dataForm, nickName: element.currentTarget.value})
}
/>
</div>
Expand All @@ -109,7 +111,7 @@ export const SettingsPage = () => {
value={dataForm.firstName}
type="text"
onChange={(element) =>
setDataForm({ ...dataForm, firstName: element.currentTarget.value })
setDataForm({...dataForm, firstName: element.currentTarget.value})
}
/>
</div>
Expand All @@ -120,7 +122,7 @@ export const SettingsPage = () => {
value={dataForm.lastName}
type="text"
onChange={(element) =>
setDataForm({ ...dataForm, lastName: element.currentTarget.value })
setDataForm({...dataForm, lastName: element.currentTarget.value})
}
/>
</div>
Expand Down

0 comments on commit d061a6f

Please sign in to comment.