Improve dropdown+modal behavior again?
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
parent
95d131ca3e
commit
d9bb643284
2 changed files with 11 additions and 5 deletions
|
@ -2,6 +2,8 @@ import clsx from 'clsx';
|
||||||
import React, { useEffect, useRef } from 'react';
|
import React, { useEffect, useRef } from 'react';
|
||||||
import { useHistory } from 'react-router-dom';
|
import { useHistory } from 'react-router-dom';
|
||||||
|
|
||||||
|
import { userTouching } from 'soapbox/is-mobile';
|
||||||
|
|
||||||
import { Counter, Icon } from '../ui';
|
import { Counter, Icon } from '../ui';
|
||||||
|
|
||||||
interface MenuItem {
|
interface MenuItem {
|
||||||
|
@ -21,7 +23,7 @@ interface MenuItem {
|
||||||
interface IDropdownMenuItem {
|
interface IDropdownMenuItem {
|
||||||
index: number;
|
index: number;
|
||||||
item: MenuItem | null;
|
item: MenuItem | null;
|
||||||
onClick?(): void;
|
onClick?(goBack?: boolean): void;
|
||||||
autoFocus?: boolean;
|
autoFocus?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -35,14 +37,18 @@ const DropdownMenuItem = ({ index, item, onClick, autoFocus }: IDropdownMenuItem
|
||||||
|
|
||||||
if (!item) return;
|
if (!item) return;
|
||||||
|
|
||||||
if (onClick) onClick();
|
if (onClick) onClick(!(item.to && userTouching.matches));
|
||||||
|
|
||||||
if (item.to) {
|
if (item.to) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
history.push(item.to);
|
if (userTouching.matches) {
|
||||||
|
history.replace(item.to);
|
||||||
|
} else history.push(item.to);
|
||||||
} else if (typeof item.action === 'function') {
|
} else if (typeof item.action === 'function') {
|
||||||
|
const action = item.action;
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
item.action(event);
|
// TODO
|
||||||
|
setTimeout(() => action(event), userTouching.matches ? 10 : 0);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -227,7 +227,7 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
|
||||||
unlistenHistory.current();
|
unlistenHistory.current();
|
||||||
} else if (!isDropdownOpen && wasDropdownOpen) {
|
} else if (!isDropdownOpen && wasDropdownOpen) {
|
||||||
// TODO find a better solution
|
// TODO find a better solution
|
||||||
setTimeout(() => handleModalOpen(), 100);
|
setTimeout(() => handleModalOpen(), 50);
|
||||||
}
|
}
|
||||||
}, [isDropdownOpen]);
|
}, [isDropdownOpen]);
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue