From 2d85afe16853bead45e323ecff726ea658f7551b Mon Sep 17 00:00:00 2001 From: ascarbek Date: Sun, 9 Apr 2023 20:13:53 +0600 Subject: [PATCH] chore: HOC popup window --- .../_shared/EditRow/CellOptionsPopup.tsx | 35 +++---------- .../_shared/EditRow/ChangeFieldTypePopup.tsx | 33 ++---------- .../_shared/EditRow/DatePickerPopup.tsx | 30 ++--------- .../_shared/EditRow/EditCellOptionPopup.tsx | 44 ++++------------ .../_shared/EditRow/EditCellWrapper.tsx | 18 ++++--- .../_shared/EditRow/EditFieldPopup.tsx | 40 +++++---------- .../components/_shared/EditRow/EditRow.tsx | 26 +++++----- .../_shared/LanguageSelectPopup.tsx | 6 +-- .../_shared/{Popup.tsx => PopupSelect.tsx} | 2 +- .../components/_shared/PopupWindow.tsx | 51 +++++++++++++++++++ .../components/board/BoardCard.tsx | 8 ++- .../components/board/BoardSettingsPopup.tsx | 6 +-- .../GridTableHeader/GridTableHeaderItem.tsx | 4 +- .../grid/GridTitle/GridTitleOptionsPopup.tsx | 4 +- .../layout/HeaderPanel/OptionsPopup.tsx | 6 +-- .../NavigationPanel/NavItemOptionsPopup.tsx | 6 +-- .../layout/NavigationPanel/NewPagePopup.tsx | 6 +-- 17 files changed, 140 insertions(+), 185 deletions(-) rename frontend/appflowy_tauri/src/appflowy_app/components/_shared/{Popup.tsx => PopupSelect.tsx} (97%) create mode 100644 frontend/appflowy_tauri/src/appflowy_app/components/_shared/PopupWindow.tsx diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/CellOptionsPopup.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/CellOptionsPopup.tsx index 6df9271520..48ff2de44f 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/CellOptionsPopup.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/CellOptionsPopup.tsx @@ -1,4 +1,4 @@ -import { KeyboardEventHandler, MouseEventHandler, useEffect, useRef, useState } from 'react'; +import { KeyboardEventHandler, useEffect, useRef, useState } from 'react'; import { CellIdentifier } from '$app/stores/effects/database/cell/cell_bd_svc'; import { useCell } from '$app/components/_shared/database-hooks/useCell'; import { CellCache } from '$app/stores/effects/database/cell/cell_cache'; @@ -9,10 +9,10 @@ import { useTranslation } from 'react-i18next'; import { Details2Svg } from '$app/components/_shared/svg/Details2Svg'; import { CheckmarkSvg } from '$app/components/_shared/svg/CheckmarkSvg'; import { CloseSvg } from '$app/components/_shared/svg/CloseSvg'; -import useOutsideClick from '$app/components/_shared/useOutsideClick'; import { SelectOptionCellBackendService } from '$app/stores/effects/database/cell/select_option_bd_svc'; import { useAppSelector } from '$app/stores/store'; import { ISelectOption, ISelectOptionType } from '$app/stores/reducers/database/slice'; +import { PopupWindow } from '$app/components/_shared/PopupWindow'; export const CellOptionsPopup = ({ top, @@ -31,28 +31,12 @@ export const CellOptionsPopup = ({ onOutsideClick: () => void; openOptionDetail: (_left: number, _top: number, _select_option: SelectOptionPB) => void; }) => { - const ref = useRef(null); const inputRef = useRef(null); const { t } = useTranslation(''); - const [adjustedTop, setAdjustedTop] = useState(-100); const [value, setValue] = useState(''); - const { data, cellController } = useCell(cellIdentifier, cellCache, fieldController); + const { data } = useCell(cellIdentifier, cellCache, fieldController); const databaseStore = useAppSelector((state) => state.database); - useEffect(() => { - if (!ref.current) return; - const { height } = ref.current.getBoundingClientRect(); - if (top + height + 40 > window.innerHeight) { - setAdjustedTop(window.innerHeight - height - 40); - } else { - setAdjustedTop(top); - } - }, [ref, window, top, left]); - - useOutsideClick(ref, async () => { - onOutsideClick(); - }); - useEffect(() => { if (inputRef?.current) { inputRef.current.focus(); @@ -106,15 +90,8 @@ export const CellOptionsPopup = ({ }; return ( -
-
+ +
{(data as SelectOptionCellDataPB)?.select_options?.map((option, index) => ( @@ -174,6 +151,6 @@ export const CellOptionsPopup = ({ )}
-
+ ); }; diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/ChangeFieldTypePopup.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/ChangeFieldTypePopup.tsx index da7e8b0375..e55b6bf70d 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/ChangeFieldTypePopup.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/ChangeFieldTypePopup.tsx @@ -1,8 +1,7 @@ import { FieldType } from '@/services/backend'; import { FieldTypeIcon } from '$app/components/_shared/EditRow/FieldTypeIcon'; import { FieldTypeName } from '$app/components/_shared/EditRow/FieldTypeName'; -import { useEffect, useMemo, useRef, useState } from 'react'; -import useOutsideClick from '$app/components/_shared/useOutsideClick'; +import { PopupWindow } from '$app/components/_shared/PopupWindow'; const typesOrder: FieldType[] = [ FieldType.RichText, @@ -17,39 +16,17 @@ const typesOrder: FieldType[] = [ export const ChangeFieldTypePopup = ({ top, - right, + left, onClick, onOutsideClick, }: { top: number; - right: number; + left: number; onClick: (newType: FieldType) => void; onOutsideClick: () => void; }) => { - const ref = useRef(null); - const [adjustedTop, setAdjustedTop] = useState(-100); - useOutsideClick(ref, async () => { - onOutsideClick(); - }); - - useEffect(() => { - if (!ref.current) return; - const { height } = ref.current.getBoundingClientRect(); - if (top + height > window.innerHeight) { - setAdjustedTop(window.innerHeight - height); - } else { - setAdjustedTop(top); - } - }, [ref, window, top, right]); - return ( -
+
{typesOrder.map((t, i) => (
-
+ ); }; diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/DatePickerPopup.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/DatePickerPopup.tsx index 03389eb4a3..867af9e06f 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/DatePickerPopup.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/DatePickerPopup.tsx @@ -1,9 +1,8 @@ -import { useEffect, useRef, useState } from 'react'; +import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { CellIdentifier } from '$app/stores/effects/database/cell/cell_bd_svc'; import { CellCache } from '$app/stores/effects/database/cell/cell_cache'; import { FieldController } from '$app/stores/effects/database/field/field_controller'; -import useOutsideClick from '$app/components/_shared/useOutsideClick'; import Calendar from 'react-calendar'; import dayjs from 'dayjs'; import { ClockSvg } from '$app/components/_shared/svg/ClockSvg'; @@ -12,6 +11,7 @@ import { EditorUncheckSvg } from '$app/components/_shared/svg/EditorUncheckSvg'; import { useCell } from '$app/components/_shared/database-hooks/useCell'; import { CalendarData } from '$app/stores/effects/database/cell/controller_builder'; import { DateCellDataPB } from '@/services/backend'; +import { PopupWindow } from '$app/components/_shared/PopupWindow'; export const DatePickerPopup = ({ left, @@ -29,25 +29,9 @@ export const DatePickerPopup = ({ onOutsideClick: () => void; }) => { const { data, cellController } = useCell(cellIdentifier, cellCache, fieldController); - const ref = useRef(null); - const [adjustedTop, setAdjustedTop] = useState(-100); const { t } = useTranslation(''); const [selectedDate, setSelectedDate] = useState(new Date()); - useEffect(() => { - if (!ref.current) return; - const { height } = ref.current.getBoundingClientRect(); - if (top + height + 40 > window.innerHeight) { - setAdjustedTop(top - height - 40); - } else { - setAdjustedTop(top); - } - }, [ref, window, top, left]); - - useOutsideClick(ref, async () => { - onOutsideClick(); - }); - useEffect(() => { const date_pb = data as DateCellDataPB | undefined; if (!date_pb || !date_pb?.date.length) return; @@ -65,13 +49,7 @@ export const DatePickerPopup = ({ }; return ( -
+
onChange(d)} value={selectedDate} />
@@ -96,6 +74,6 @@ export const DatePickerPopup = ({
-
+ ); }; diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellOptionPopup.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellOptionPopup.tsx index c0a06fd3cc..b7a7e9f0e6 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellOptionPopup.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellOptionPopup.tsx @@ -4,9 +4,9 @@ import { useTranslation } from 'react-i18next'; import { SelectOptionColorPB, SelectOptionPB } from '@/services/backend'; import { getBgColor } from '$app/components/_shared/getColor'; import { SelectOptionCellBackendService } from '$app/stores/effects/database/cell/select_option_bd_svc'; -import useOutsideClick from '$app/components/_shared/useOutsideClick'; import { TrashSvg } from '$app/components/_shared/svg/TrashSvg'; import { CheckmarkSvg } from '$app/components/_shared/svg/CheckmarkSvg'; +import { PopupWindow } from '$app/components/_shared/PopupWindow'; export const EditCellOptionPopup = ({ left, @@ -21,33 +21,10 @@ export const EditCellOptionPopup = ({ editingSelectOption: SelectOptionPB; onOutsideClick: () => void; }) => { - const ref = useRef(null); const inputRef = useRef(null); const { t } = useTranslation(''); - const [adjustedTop, setAdjustedTop] = useState(-100); - const [adjustedLeft, setAdjustedLeft] = useState(-100); const [value, setValue] = useState(''); - useOutsideClick(ref, async () => { - await onBlur(); - onOutsideClick(); - }); - - useEffect(() => { - if (!ref.current) return; - const { height, width } = ref.current.getBoundingClientRect(); - if (top + height > window.innerHeight) { - setAdjustedTop(window.innerHeight - height); - } else { - setAdjustedTop(top); - } - if (left + width > window.innerWidth) { - setAdjustedLeft(window.innerWidth - width); - } else { - setAdjustedLeft(left); - } - }, [ref, window, top, left]); - useEffect(() => { setValue(editingSelectOption.name); }, [editingSelectOption]); @@ -93,15 +70,16 @@ export const EditCellOptionPopup = ({ }; return ( -
{ + await onBlur(); + onOutsideClick(); + }} + left={left} + top={top} > -
+
-
+ ); }; diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellWrapper.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellWrapper.tsx index f3905ae230..7b23bc3819 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellWrapper.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellWrapper.tsx @@ -27,9 +27,9 @@ export const EditCellWrapper = ({ cellIdentifier: CellIdentifier; cellCache: CellCache; fieldController: FieldController; - onEditFieldClick: (top: number, right: number) => void; - onEditOptionsClick: (left: number, top: number) => void; - onEditDateClick: (left: number, top: number) => void; + onEditFieldClick: (cell: CellIdentifier, left: number, top: number) => void; + onEditOptionsClick: (cell: CellIdentifier, left: number, top: number) => void; + onEditDateClick: (cell: CellIdentifier, left: number, top: number) => void; }) => { const { data, cellController } = useCell(cellIdentifier, cellCache, fieldController); const databaseStore = useAppSelector((state) => state.database); @@ -38,7 +38,7 @@ export const EditCellWrapper = ({ const onClick = () => { if (!el.current) return; const { top, right } = el.current.getBoundingClientRect(); - onEditFieldClick(top, right); + onEditFieldClick(cellIdentifier, right, top); }; return ( @@ -69,7 +69,10 @@ export const EditCellWrapper = ({ cellIdentifier.fieldType === FieldType.MultiSelect || cellIdentifier.fieldType === FieldType.Checklist) && cellController && ( - + onEditOptionsClick(cellIdentifier, left, top)} + > )} {cellIdentifier.fieldType === FieldType.Checkbox && cellController && ( @@ -80,7 +83,10 @@ export const EditCellWrapper = ({ )} {cellIdentifier.fieldType === FieldType.DateTime && ( - + onEditDateClick(cellIdentifier, left, top)} + > )} {cellIdentifier.fieldType === FieldType.Number && cellController && ( diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditFieldPopup.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditFieldPopup.tsx index 4231aac264..3b1f171cc5 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditFieldPopup.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditFieldPopup.tsx @@ -1,5 +1,4 @@ import { useEffect, useRef, useState } from 'react'; -import useOutsideClick from '$app/components/_shared/useOutsideClick'; import { TrashSvg } from '$app/components/_shared/svg/TrashSvg'; import { FieldTypeIcon } from '$app/components/_shared/EditRow/FieldTypeIcon'; import { FieldTypeName } from '$app/components/_shared/EditRow/FieldTypeName'; @@ -10,10 +9,11 @@ import { FieldInfo } from '$app/stores/effects/database/field/field_controller'; import { MoreSvg } from '$app/components/_shared/svg/MoreSvg'; import { useAppSelector } from '$app/stores/store'; import { CellIdentifier } from '$app/stores/effects/database/cell/cell_bd_svc'; +import { PopupWindow } from '$app/components/_shared/PopupWindow'; export const EditFieldPopup = ({ top, - right, + left, cellIdentifier, viewId, onOutsideClick, @@ -21,7 +21,7 @@ export const EditFieldPopup = ({ changeFieldTypeClick, }: { top: number; - right: number; + left: number; cellIdentifier: CellIdentifier; viewId: string; onOutsideClick: () => void; @@ -30,31 +30,13 @@ export const EditFieldPopup = ({ }) => { const databaseStore = useAppSelector((state) => state.database); const { t } = useTranslation(''); - const ref = useRef(null); const changeTypeButtonRef = useRef(null); const [name, setName] = useState(''); - const [adjustedTop, setAdjustedTop] = useState(-100); - - useOutsideClick(ref, async () => { - await save(); - onOutsideClick(); - }); - useEffect(() => { setName(databaseStore.fields[cellIdentifier.fieldId].title); }, [databaseStore, cellIdentifier]); - useEffect(() => { - if (!ref.current) return; - const { height } = ref.current.getBoundingClientRect(); - if (top + height > window.innerHeight) { - setAdjustedTop(window.innerHeight - height); - } else { - setAdjustedTop(top); - } - }, [ref, window, top, right]); - const save = async () => { if (!fieldInfo) return; const controller = new TypeOptionController(viewId, Some(fieldInfo)); @@ -78,12 +60,14 @@ export const EditFieldPopup = ({ }; return ( -
{ + await save(); + onOutsideClick(); + }} + left={left} + top={top} >
-
+ ); }; diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditRow.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditRow.tsx index 632bda7a58..1a6f7a8a2b 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditRow.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditRow.tsx @@ -35,11 +35,11 @@ export const EditRow = ({ const [editingCell, setEditingCell] = useState(null); const [showFieldEditor, setShowFieldEditor] = useState(false); const [editFieldTop, setEditFieldTop] = useState(0); - const [editFieldRight, setEditFieldRight] = useState(0); + const [editFieldLeft, setEditFieldLeft] = useState(0); const [showChangeFieldTypePopup, setShowChangeFieldTypePopup] = useState(false); const [changeFieldTypeTop, setChangeFieldTypeTop] = useState(0); - const [changeFieldTypeRight, setChangeFieldTypeRight] = useState(0); + const [changeFieldTypeLeft, setChangeFieldTypeLeft] = useState(0); const [showChangeOptionsPopup, setShowChangeOptionsPopup] = useState(false); const [changeOptionsTop, setChangeOptionsTop] = useState(0); @@ -66,10 +66,10 @@ export const EditRow = ({ }, 300); }; - const onEditFieldClick = (cellIdentifier: CellIdentifier, top: number, right: number) => { + const onEditFieldClick = (cellIdentifier: CellIdentifier, left: number, top: number) => { setEditingCell(cellIdentifier); setEditFieldTop(top); - setEditFieldRight(right); + setEditFieldLeft(left + 10); setShowFieldEditor(true); }; @@ -81,7 +81,7 @@ export const EditRow = ({ const onChangeFieldTypeClick = (buttonTop: number, buttonRight: number) => { setChangeFieldTypeTop(buttonTop); - setChangeFieldTypeRight(buttonRight); + setChangeFieldTypeLeft(buttonRight + 30); setShowChangeFieldTypePopup(true); }; @@ -102,14 +102,14 @@ export const EditRow = ({ const onEditOptionsClick = async (cellIdentifier: CellIdentifier, left: number, top: number) => { setEditingCell(cellIdentifier); setChangeOptionsLeft(left); - setChangeOptionsTop(top); + setChangeOptionsTop(top + 40); setShowChangeOptionsPopup(true); }; const onEditDateClick = async (cellIdentifier: CellIdentifier, left: number, top: number) => { setEditingCell(cellIdentifier); setDatePickerLeft(left); - setDatePickerTop(top); + setDatePickerTop(top + 40); setShowDatePicker(true); }; @@ -165,11 +165,9 @@ export const EditRow = ({ cellIdentifier={cell.cellIdentifier} cellCache={controller.databaseViewCache.getRowCache().getCellCache()} fieldController={controller.fieldController} - onEditFieldClick={(top: number, right: number) => onEditFieldClick(cell.cellIdentifier, top, right)} - onEditOptionsClick={(left: number, top: number) => - onEditOptionsClick(cell.cellIdentifier, left, top) - } - onEditDateClick={(left: number, top: number) => onEditDateClick(cell.cellIdentifier, left, top)} + onEditFieldClick={onEditFieldClick} + onEditOptionsClick={onEditOptionsClick} + onEditDateClick={onEditDateClick} > ))}
@@ -192,7 +190,7 @@ export const EditRow = ({ {showFieldEditor && editingCell && ( changeFieldType(newType)} onOutsideClick={() => setShowChangeFieldTypePopup(false)} > diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/LanguageSelectPopup.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/LanguageSelectPopup.tsx index f73ddb2bca..04b31036a9 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/LanguageSelectPopup.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/LanguageSelectPopup.tsx @@ -1,4 +1,4 @@ -import { IPopupItem, Popup } from './Popup'; +import { IPopupItem, PopupSelect } from './PopupSelect'; import i18n from 'i18next'; const supportedLanguages: { key: string; title: string }[] = [ @@ -37,11 +37,11 @@ export const LanguageSelectPopup = ({ onClose }: { onClose: () => void }) => { icon: <>, })); return ( - + > ); }; diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/Popup.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/PopupSelect.tsx similarity index 97% rename from frontend/appflowy_tauri/src/appflowy_app/components/_shared/Popup.tsx rename to frontend/appflowy_tauri/src/appflowy_app/components/_shared/PopupSelect.tsx index 00806d62f4..02d0e783c5 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/Popup.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/PopupSelect.tsx @@ -7,7 +7,7 @@ export interface IPopupItem { onClick: () => void; } -export const Popup = ({ +export const PopupSelect = ({ items, className = '', onOutsideClick, diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/PopupWindow.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/PopupWindow.tsx new file mode 100644 index 0000000000..bcc36db61c --- /dev/null +++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/PopupWindow.tsx @@ -0,0 +1,51 @@ +import { ReactNode, useEffect, useRef, useState } from 'react'; +import useOutsideClick from '$app/components/_shared/useOutsideClick'; + +export const PopupWindow = ({ + children, + className, + onOutsideClick, + left, + top, +}: { + children: ReactNode; + className: string; + onOutsideClick: () => void; + left: number; + top: number; +}) => { + const ref = useRef(null); + useOutsideClick(ref, onOutsideClick); + + const [adjustedTop, setAdjustedTop] = useState(-100); + const [adjustedLeft, setAdjustedLeft] = useState(-100); + + useEffect(() => { + if (!ref.current) return; + const { height, width } = ref.current.getBoundingClientRect(); + if (top + height > window.innerHeight) { + setAdjustedTop(window.innerHeight - height); + } else { + setAdjustedTop(top); + } + if (left + width > window.innerWidth) { + setAdjustedLeft(window.innerWidth - width); + } else { + setAdjustedLeft(left); + } + }, [ref, left, top, window]); + + return ( +
+ {children} +
+ ); +}; diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardCard.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardCard.tsx index a3a9f2b29a..781e4dc3bf 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardCard.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardCard.tsx @@ -4,6 +4,7 @@ import { useRow } from '../_shared/database-hooks/useRow'; import { DatabaseController } from '$app/stores/effects/database/database_controller'; import { BoardCell } from './BoardCell'; import { Draggable } from 'react-beautiful-dnd'; +import { MouseEventHandler } from 'react'; export const BoardCard = ({ index, @@ -22,6 +23,11 @@ export const BoardCard = ({ }) => { const { cells } = useRow(viewId, controller, rowInfo); + const onDetailClick: MouseEventHandler = (e) => { + e.stopPropagation(); + // onOpenRow(rowInfo); + }; + return ( {(provided) => ( @@ -32,7 +38,7 @@ export const BoardCard = ({ onClick={() => onOpenRow(rowInfo)} className={`relative cursor-pointer select-none rounded-lg border border-shade-6 bg-white px-3 py-2 transition-transform duration-100 hover:bg-main-selector `} > -
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardSettingsPopup.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardSettingsPopup.tsx index 96126964a4..6f2d25717d 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardSettingsPopup.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardSettingsPopup.tsx @@ -1,6 +1,6 @@ import { useEffect, useState } from 'react'; import { PropertiesSvg } from '$app/components/_shared/svg/PropertiesSvg'; -import { IPopupItem, Popup } from '$app/components/_shared/Popup'; +import { IPopupItem, PopupSelect } from '$app/components/_shared/PopupSelect'; import { useTranslation } from 'react-i18next'; import { GroupByFieldSvg } from '$app/components/_shared/svg/GroupByFieldSvg'; @@ -39,10 +39,10 @@ export const BoardSettingsPopup = ({ }, [t]); return ( - hidePopup()} items={settingsItems} className={'absolute top-full left-full z-10 text-xs'} - > + > ); }; diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableHeader/GridTableHeaderItem.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableHeader/GridTableHeaderItem.tsx index 3e13ff8eec..56d4a618e5 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableHeader/GridTableHeaderItem.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableHeader/GridTableHeaderItem.tsx @@ -88,7 +88,7 @@ export const GridTableHeaderItem = ({ {showFieldEditor && editingField && ( changeFieldType(newType)} onOutsideClick={() => setShowChangeFieldTypePopup(false)} > diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTitle/GridTitleOptionsPopup.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTitle/GridTitleOptionsPopup.tsx index c57962ed93..dcf22ce95f 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTitle/GridTitleOptionsPopup.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTitle/GridTitleOptionsPopup.tsx @@ -1,4 +1,4 @@ -import { IPopupItem, Popup } from '../../_shared/Popup'; +import { IPopupItem, PopupSelect } from '../../_shared/PopupSelect'; import { FilterSvg } from '../../_shared/svg/FilterSvg'; import { GroupBySvg } from '../../_shared/svg/GroupBySvg'; import { PropertiesSvg } from '../../_shared/svg/PropertiesSvg'; @@ -51,5 +51,5 @@ export const GridTitleOptionsPopup = ({ onClose }: { onClose?: () => void }) => title: 'Group by', }, ]; - return ; + return ; }; diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/layout/HeaderPanel/OptionsPopup.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/layout/HeaderPanel/OptionsPopup.tsx index fe0cf6de9b..15423484dd 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/HeaderPanel/OptionsPopup.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/HeaderPanel/OptionsPopup.tsx @@ -1,4 +1,4 @@ -import { IPopupItem, Popup } from '../../_shared/Popup'; +import { IPopupItem, PopupSelect } from '../../_shared/PopupSelect'; import { LogoutSvg } from '../../_shared/svg/LogoutSvg'; export const OptionsPopup = ({ onSignOutClick, onClose }: { onSignOutClick: () => void; onClose: () => void }) => { @@ -14,10 +14,10 @@ export const OptionsPopup = ({ onSignOutClick, onClose }: { onSignOutClick: () = }, ]; return ( - + > ); }; diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/NavItemOptionsPopup.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/NavItemOptionsPopup.tsx index f167623399..283bdc62bd 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/NavItemOptionsPopup.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/NavItemOptionsPopup.tsx @@ -1,4 +1,4 @@ -import { IPopupItem, Popup } from '../../_shared/Popup'; +import { IPopupItem, PopupSelect } from '../../_shared/PopupSelect'; import { EditSvg } from '../../_shared/svg/EditSvg'; import { TrashSvg } from '../../_shared/svg/TrashSvg'; import { CopySvg } from '../../_shared/svg/CopySvg'; @@ -47,11 +47,11 @@ export const NavItemOptionsPopup = ({ ]; return ( - onClose && onClose()} items={items} className={`absolute right-0`} style={{ top: `${top}px` }} - > + > ); }; diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/NewPagePopup.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/NewPagePopup.tsx index 5b74082907..47ad2f8e9b 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/NewPagePopup.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/NewPagePopup.tsx @@ -1,4 +1,4 @@ -import { IPopupItem, Popup } from '../../_shared/Popup'; +import { IPopupItem, PopupSelect } from '../../_shared/PopupSelect'; import { DocumentSvg } from '../../_shared/svg/DocumentSvg'; import { BoardSvg } from '../../_shared/svg/BoardSvg'; import { GridSvg } from '../../_shared/svg/GridSvg'; @@ -47,11 +47,11 @@ export const NewPagePopup = ({ ]; return ( - onClose && onClose()} items={items} className={'absolute right-0'} style={{ top: `${top}px` }} - > + > ); };