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
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 { cells, onNewColumnClick } = useRow(viewId, controller, rowInfo);
const { t } = useTranslation(''); const { t } = useTranslation('');
const [unveilBackdrop, setUnveilBackdrop] = useState(false); const [unveil, setUnveil] = useState(false);
const [unveilForm, setUnveilForm] = useState(false);
const [showFieldEditor, setShowFieldEditor] = useState(false); const [showFieldEditor, setShowFieldEditor] = useState(false);
const [editFieldTop, setEditFieldTop] = useState(0); const [editFieldTop, setEditFieldTop] = useState(0);
const [editFieldRight, setEditFieldRight] = useState(0); const [editFieldRight, setEditFieldRight] = useState(0);
@ -37,10 +36,7 @@ export const EditRow = ({
const [editingCell, setEditingCell] = useState<CellIdentifier | null>(null); const [editingCell, setEditingCell] = useState<CellIdentifier | null>(null);
useEffect(() => { useEffect(() => {
setUnveilBackdrop(true); setUnveil(true);
setTimeout(() => {
setUnveilForm(true);
}, 300);
}, []); }, []);
const onEditFieldClick = (cellIdentifier: CellIdentifier, top: number, right: number) => { const onEditFieldClick = (cellIdentifier: CellIdentifier, top: number, right: number) => {
@ -63,8 +59,7 @@ export const EditRow = ({
}; };
const onCloseClick = () => { const onCloseClick = () => {
setUnveilBackdrop(false); setUnveil(false);
setUnveilForm(false);
setTimeout(() => { setTimeout(() => {
onClose(); onClose();
}, 300); }, 300);
@ -87,14 +82,10 @@ export const EditRow = ({
return ( return (
<div <div
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 ${
unveilBackdrop ? 'opacity-100' : 'opacity-0' unveil ? 'opacity-100' : 'opacity-0'
}`} }`}
> >
<div <div className={`relative flex h-[90%] w-[70%] flex-col gap-8 rounded-xl bg-white px-8 pb-4 pt-12`}>
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 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>