11import { View , ViewLayout } from '@/application/types' ;
2- import { Separator } from '@/components/ui/separator' ;
3- import { toast } from 'sonner' ;
4- import { filterOutByCondition } from '@/components/_shared/outline/utils' ;
2+ import { ReactComponent as SelectedIcon } from '@/assets/icons/tick.svg' ;
53import { useAppHandlers , useAppOutline } from '@/components/app/app.hooks' ;
64import SpaceItem from '@/components/app/outline/SpaceItem' ;
5+ import { Popover , PopoverContent , PopoverTrigger } from '@/components/ui/popover' ;
6+ import { Separator } from '@/components/ui/separator' ;
7+ import OutlineIcon from '@/components/_shared/outline/OutlineIcon' ;
8+ import { filterOutByCondition } from '@/components/_shared/outline/utils' ;
79import React , { useMemo } from 'react' ;
810import { useTranslation } from 'react-i18next' ;
9- import OutlineIcon from '@/components/_shared/outline/OutlineIcon' ;
10- import { ReactComponent as SelectedIcon } from '@/assets/icons/tick.svg' ;
11- import {
12- Popover ,
13- PopoverTrigger ,
14- PopoverContent ,
15- } from '@/components/ui/popover' ;
11+ import { toast } from 'sonner' ;
1612
1713import { Button } from '@/components/ui/button' ;
1814import { SearchInput } from '@/components/ui/search-input' ;
1915
20- function MovePagePopover ( {
16+ function MovePagePopover ( {
2117 viewId,
2218 onMoved,
2319 children,
@@ -32,14 +28,15 @@ function MovePagePopover ({
3228 const outline = useAppOutline ( ) ;
3329
3430 const [ search , setSearch ] = React . useState < string > ( '' ) ;
35- const {
36- movePage,
37- } = useAppHandlers ( ) ;
31+ const { movePage } = useAppHandlers ( ) ;
3832
3933 const views = useMemo ( ( ) => {
4034 if ( ! outline ) return [ ] ;
4135 return filterOutByCondition ( outline , ( view ) => ( {
42- remove : view . view_id === viewId || view . layout !== ViewLayout . Document || Boolean ( search && ! view . name . toLowerCase ( ) . includes ( search . toLowerCase ( ) ) ) ,
36+ remove :
37+ view . view_id === viewId ||
38+ view . layout !== ViewLayout . Document ||
39+ Boolean ( search && ! view . name . toLowerCase ( ) . includes ( search . toLowerCase ( ) ) ) ,
4340 } ) ) ;
4441 } , [ outline , search , viewId ] ) ;
4542 const { t } = useTranslation ( ) ;
@@ -66,19 +63,24 @@ function MovePagePopover ({
6663 }
6764 } , [ movePage , onMoved , selectedViewId , viewId ] ) ;
6865
69- const renderExtra = React . useCallback ( ( { view } : { view : View } ) => {
70- if ( view . view_id !== selectedViewId ) return null ;
71- return < SelectedIcon className = { 'text-fill-default mx-2' } /> ;
72- } , [ selectedViewId ] ) ;
66+ const renderExtra = React . useCallback (
67+ ( { view } : { view : View } ) => {
68+ if ( view . view_id !== selectedViewId ) return null ;
69+ return < SelectedIcon className = { 'mx-2 text-text-action' } /> ;
70+ } ,
71+ [ selectedViewId ]
72+ ) ;
7373
7474 return (
7575 < Popover modal { ...props } >
7676 < PopoverTrigger asChild > { children } </ PopoverTrigger >
7777 < PopoverContent
78- onCloseAutoFocus = { e => {
78+ onCloseAutoFocus = { ( e ) => {
7979 e . preventDefault ( ) ;
80- } } { ...popoverContentProps } >
81- < div className = { 'flex folder-views w-full flex-1 flex-col gap-2 p-2' } >
80+ } }
81+ { ...popoverContentProps }
82+ >
83+ < div className = { 'folder-views flex w-full flex-1 flex-col gap-2 p-2' } >
8284 < SearchInput
8385 value = { search }
8486 onChange = { ( e ) => {
@@ -87,53 +89,48 @@ function MovePagePopover ({
8789 autoFocus = { true }
8890 placeholder = { t ( 'disclosureAction.movePageTo' ) }
8991 />
90- < div className = { 'flex-1 max-h-[400px] overflow-x-hidden overflow-y-auto appflowy-custom-scroller ' } >
92+ < div className = { 'appflowy-custom-scroller max-h-[400px] flex-1 overflow-y-auto overflow-x-hidden ' } >
9193 { views . map ( ( view ) => {
9294 const isExpanded = expandViewIds . includes ( view . view_id ) ;
9395
94- return < div
95- key = { view . view_id }
96- className = { 'flex items-start gap-1' }
97- >
98- < div className = { 'h-[30px] flex items-center' } >
99- < OutlineIcon
100- isExpanded = { isExpanded }
101- setIsExpanded = { ( status ) => {
102- toggleExpandView ( view . view_id , status ) ;
96+ return (
97+ < div key = { view . view_id } className = { 'flex items-start gap-1' } >
98+ < div className = { 'flex h-[30px] items-center' } >
99+ < OutlineIcon
100+ isExpanded = { isExpanded }
101+ setIsExpanded = { ( status ) => {
102+ toggleExpandView ( view . view_id , status ) ;
103+ } }
104+ level = { 0 }
105+ />
106+ </ div >
107+
108+ < SpaceItem
109+ view = { view }
110+ key = { view . view_id }
111+ width = { 268 }
112+ expandIds = { expandViewIds }
113+ toggleExpand = { toggleExpandView }
114+ onClickView = { ( viewId ) => {
115+ toggleExpandView ( viewId , ! expandViewIds . includes ( viewId ) ) ;
116+ setSelectedViewId ( viewId ) ;
103117 } }
104- level = { 0 }
118+ onClickSpace = { setSelectedViewId }
119+ renderExtra = { renderExtra }
105120 />
106121 </ div >
107-
108- < SpaceItem
109- view = { view }
110- key = { view . view_id }
111- width = { 268 }
112- expandIds = { expandViewIds }
113- toggleExpand = { toggleExpandView }
114- onClickView = { viewId => {
115- toggleExpandView ( viewId , ! expandViewIds . includes ( viewId ) ) ;
116- setSelectedViewId ( viewId ) ;
117- } }
118- onClickSpace = { setSelectedViewId }
119- renderExtra = { renderExtra }
120- /> </ div > ;
122+ ) ;
121123 } ) }
122124 </ div >
123125
124126 < Separator className = { 'mb-1' } />
125127 < div className = { 'flex items-center justify-end' } >
126- < Button
127- onClick = { handleMoveTo }
128- >
129- { t ( 'disclosureAction.move' ) }
130- </ Button >
128+ < Button onClick = { handleMoveTo } > { t ( 'disclosureAction.move' ) } </ Button >
131129 </ div >
132130 </ div >
133131 </ PopoverContent >
134-
135132 </ Popover >
136133 ) ;
137134}
138135
139- export default MovePagePopover ;
136+ export default MovePagePopover ;
0 commit comments