Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: close on esc

Browse Source
This commit is contained in:
ascarbek 2023-04-07 17:25:04 +06:00
parent e467481b75
commit 915494761a
2 changed files with 21 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/CellOptionsPopup.tsx
View File

@ -30,6 +30,7 @@ export const CellOptionsPopup = ({
onOutsideClick: () => void; onOutsideClick: () => void;
}) => { }) => {
const ref = useRef<HTMLDivElement>(null); const ref = useRef<HTMLDivElement>(null);
const inputRef = useRef<HTMLInputElement>(null);
const { t } = useTranslation(''); const { t } = useTranslation('');
const [adjustedTop, setAdjustedTop] = useState(-100); const [adjustedTop, setAdjustedTop] = useState(-100);
const [value, setValue] = useState(''); const [value, setValue] = useState('');
@ -50,6 +51,12 @@ export const CellOptionsPopup = ({
onOutsideClick(); onOutsideClick();
}); });
useEffect(() => {
if (inputRef?.current) {
inputRef.current.focus();
}
}, [inputRef]);
const onKeyDown: KeyboardEventHandler = async (e) => { const onKeyDown: KeyboardEventHandler = async (e) => {
if (e.key === 'Enter' && value.length > 0) { if (e.key === 'Enter' && value.length > 0) {
await new SelectOptionCellBackendService(cellIdentifier).createOption({ name: value }); await new SelectOptionCellBackendService(cellIdentifier).createOption({ name: value });
@ -75,14 +82,16 @@ export const CellOptionsPopup = ({
setValue(''); setValue('');
}; };
useEffect(() => { const onKeyDownWrapper: KeyboardEventHandler = (e) => {
console.log('loaded data: ', data); if (e.key === 'Escape') {
console.log('have stored ', databaseStore.fields[cellIdentifier.fieldId]); onOutsideClick();
}, [data]); }
};
return ( return (
<div <div
ref={ref} ref={ref}
onKeyDown={onKeyDownWrapper}
className={`fixed z-10 rounded-lg bg-white px-2 py-2 text-xs shadow-md transition-opacity duration-300 ${ className={`fixed z-10 rounded-lg bg-white px-2 py-2 text-xs shadow-md transition-opacity duration-300 ${
adjustedTop === -100 ? 'opacity-0' : 'opacity-100' adjustedTop === -100 ? 'opacity-0' : 'opacity-100'
}`} }`}
@ -101,6 +110,7 @@ export const CellOptionsPopup = ({
)) || ''} )) || ''}
</div> </div>
<input <input
ref={inputRef}
className={'py-2'} className={'py-2'}
value={value} value={value}
onChange={(e) => setValue(e.target.value)} onChange={(e) => setValue(e.target.value)}

8
frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditRow.tsx
View File

@ -120,8 +120,14 @@ export const EditRow = ({
className={`fixed inset-0 z-10 flex items-center justify-center bg-black/30 backdrop-blur-sm transition-opacity duration-300 ${ className={`fixed inset-0 z-10 flex items-center justify-center bg-black/30 backdrop-blur-sm transition-opacity duration-300 ${
unveil ? 'opacity-100' : 'opacity-0' unveil ? 'opacity-100' : 'opacity-0'
}`} }`}
onClick={() => onCloseClick()}
> >
<div className={`relative flex h-[90%] w-[70%] flex-col gap-8 rounded-xl bg-white px-8 pb-4 pt-12`}> <div
onClick={(e) => {
e.stopPropagation();
}}
className={`relative flex h-[90%] w-[70%] flex-col gap-8 rounded-xl bg-white px-8 pb-4 pt-12`}
>
<div onClick={() => onCloseClick()} className={'absolute top-4 right-4'}> <div onClick={() => onCloseClick()} className={'absolute top-4 right-4'}>
<button className={'block h-8 w-8 rounded-lg text-shade-2 hover:bg-main-secondary'}> <button className={'block h-8 w-8 rounded-lg text-shade-2 hover:bg-main-secondary'}>
<CloseSvg></CloseSvg> <CloseSvg></CloseSvg>