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: fade in change

Browse Source
This commit is contained in:
ascarbek 2023-03-24 20:56:48 +06:00
parent bd8d816862
commit 5762419aae
1 changed files with 5 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -26,8 +26,7 @@ export const EditRow = ({
}) => {
const { cells, onNewColumnClick } = useRow(viewId, controller, rowInfo);
const { t } = useTranslation('');
const [unveilBackdrop, setUnveilBackdrop] = useState(false);
const [unveilForm, setUnveilForm] = useState(false);
const [unveil, setUnveil] = useState(false);
const [showFieldEditor, setShowFieldEditor] = useState(false);
const [editFieldTop, setEditFieldTop] = useState(0);
const [editFieldRight, setEditFieldRight] = useState(0);
@ -37,10 +36,7 @@ export const EditRow = ({
const [editingCell, setEditingCell] = useState<CellIdentifier | null>(null);
useEffect(() => {
setUnveilBackdrop(true);
setTimeout(() => {
setUnveilForm(true);
}, 300);
setUnveil(true);
}, []);
const onEditFieldClick = (cellIdentifier: CellIdentifier, top: number, right: number) => {
@ -63,8 +59,7 @@ export const EditRow = ({
};
const onCloseClick = () => {
setUnveilBackdrop(false);
setUnveilForm(false);
setUnveil(false);
setTimeout(() => {
onClose();
}, 300);
@ -87,14 +82,10 @@ export const EditRow = ({
return (
<div
className={`fixed inset-0 z-10 flex items-center justify-center bg-black/30 backdrop-blur-sm transition-opacity duration-300 ${
unveilBackdrop ? 'opacity-100' : 'opacity-0'
unveil ? 'opacity-100' : 'opacity-0'
}`}
>
<div
className={`relative flex h-[90%] w-[70%] flex-col gap-8 rounded-xl bg-white px-8 pb-4 pt-12 transition-opacity duration-300 ${
unveilForm ? 'opacity-100' : 'opacity-0'
}`}
>
<div 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'}>
<button className={'block h-8 w-8 rounded-lg text-shade-2 hover:bg-main-secondary'}>
<CloseSvg></CloseSvg>