55 IconButton ,
66 LinkButton ,
77 SelectionIndicator ,
8- Text ,
98} from '@/src/common/components/primitives' ;
109import { useFadeIn } from '@/src/common/lib/animation' ;
1110import { confirm } from '@/src/common/lib/dialogs/alert' ;
@@ -16,7 +15,7 @@ import {
1615 useIdentities ,
1716 usePolycentric ,
1817} from '@/src/common/lib/polycentric-hooks' ;
19- import { useSheetContext } from '@/src/common/lib/sheet' ;
18+ import { SheetHeaderBlock , useSheetContext } from '@/src/common/lib/sheet' ;
2019import { Atoms , useTheme } from '@/src/common/theme' ;
2120import { Ionicons } from '@expo/vector-icons' ;
2221import {
@@ -67,15 +66,9 @@ function useIdentitySwitcher() {
6766 return context ;
6867}
6968
70- interface IdentitySwitcherSheetInnerProps {
71- dismiss : ( ) => Promise < void > ;
72- }
73-
74- export function IdentitySwitcherSheetInner ( {
75- dismiss,
76- } : IdentitySwitcherSheetInnerProps ) {
69+ export function IdentitySwitcherSheetInner ( ) {
7770 const client = usePolycentric ( ) ;
78- const { isOpen, setFooter } = useSheetContext ( ) ;
71+ const { isOpen, dismissSheet } = useSheetContext ( ) ;
7972 const identities = useIdentities ( ) ;
8073 const [ isEditing , setIsEditing ] = useState ( false ) ;
8174
@@ -101,10 +94,10 @@ export function IdentitySwitcherSheetInner({
10194 ( ) => ( {
10295 isEditing,
10396 setIsEditing,
104- dismiss,
97+ dismiss : dismissSheet ,
10598 onDeleteIdentity : handleDeleteIdentity ,
10699 } ) ,
107- [ isEditing , dismiss , handleDeleteIdentity ] ,
100+ [ isEditing , dismissSheet , handleDeleteIdentity ] ,
108101 ) ;
109102
110103 useEffect ( ( ) => {
@@ -113,37 +106,45 @@ export function IdentitySwitcherSheetInner({
113106 }
114107 } , [ isOpen ] ) ;
115108
116- useEffect ( ( ) => {
117- setFooter (
118- isEditing ? < Footer onCreateIdentity = { handleCreateIdentity } /> : null ,
119- ) ;
120- } , [ isEditing , handleCreateIdentity ] ) ;
121-
122109 return (
123110 < IdentitySwitcherContext . Provider value = { contextValue } >
124111 < Box style = { Atoms . flex_1 } >
125- < Header isEditing = { isEditing } setIsEditing = { setIsEditing } />
126- { isEditing ? (
127- < DraggableFlatList
128- data = { identities }
129- keyExtractor = { ( item ) => pubkeyStr ( item . publicKey ) }
130- renderItem = { ( props ) => < DraggableIdentityListItem { ...props } /> }
131- onDragEnd = { ( ) => { } }
132- containerStyle = { Atoms . flex_1 }
133- style = { Atoms . flex_1 }
134- nestedScrollEnabled
135- removeClippedSubviews = { Platform . OS !== 'android' }
136- />
137- ) : (
138- < FlatList
139- data = { identities }
140- keyExtractor = { ( item ) => pubkeyStr ( item . publicKey ) }
141- renderItem = { ( props ) => < StaticIdentityListItem { ...props } /> }
142- style = { Atoms . flex_1 }
143- nestedScrollEnabled
144- removeClippedSubviews = { Platform . OS !== 'android' }
145- />
146- ) }
112+ < SheetHeaderBlock
113+ title = { isEditing ? 'Editing identities' : 'Your identities' }
114+ onClose = { ( ) => void dismissSheet ( ) }
115+ trailing = {
116+ < Box style = { { minWidth : 72 , alignItems : 'flex-end' } } >
117+ < LinkButton
118+ title = { isEditing ? 'Done' : 'Edit' }
119+ onPress = { ( ) => setIsEditing ( ! isEditing ) }
120+ />
121+ </ Box >
122+ }
123+ />
124+ < Box style = { Atoms . flex_1 } >
125+ { isEditing ? (
126+ < DraggableFlatList
127+ data = { identities }
128+ keyExtractor = { ( item ) => pubkeyStr ( item . publicKey ) }
129+ renderItem = { ( props ) => < DraggableIdentityListItem { ...props } /> }
130+ onDragEnd = { ( ) => { } }
131+ containerStyle = { Atoms . flex_1 }
132+ style = { Atoms . flex_1 }
133+ nestedScrollEnabled
134+ removeClippedSubviews = { Platform . OS !== 'android' }
135+ />
136+ ) : (
137+ < FlatList
138+ data = { identities }
139+ keyExtractor = { ( item ) => pubkeyStr ( item . publicKey ) }
140+ renderItem = { ( props ) => < StaticIdentityListItem { ...props } /> }
141+ style = { Atoms . flex_1 }
142+ nestedScrollEnabled
143+ removeClippedSubviews = { Platform . OS !== 'android' }
144+ />
145+ ) }
146+ </ Box >
147+ { isEditing ? < Footer onCreateIdentity = { handleCreateIdentity } /> : null }
147148 </ Box >
148149 </ IdentitySwitcherContext . Provider >
149150 ) ;
@@ -262,48 +263,6 @@ function DeleteButton({ publicKey }: { publicKey: types.PublicKey }) {
262263 ) ;
263264}
264265
265- function Header ( {
266- isEditing,
267- setIsEditing,
268- } : {
269- isEditing : boolean ;
270- setIsEditing : ( v : boolean ) => void ;
271- } ) {
272- const { theme } = useTheme ( ) ;
273-
274- return (
275- < Box style = { Atoms . flex_shrink_0 } >
276- < Box
277- style = { [
278- Atoms . flex_row ,
279- Atoms . justify_between ,
280- Atoms . items_center ,
281- Atoms . mt_xl ,
282- Atoms . mb_lg ,
283- Atoms . mx_lg ,
284- { backgroundColor : theme . palette . background_primary } ,
285- ] }
286- >
287- < Text fontSize = { 18 } fontWeight = "semibold" >
288- { isEditing ? 'Editing identities' : 'Your identities' }
289- </ Text >
290- < LinkButton
291- title = { isEditing ? 'Done' : 'Edit' }
292- onPress = { ( ) => setIsEditing ( ! isEditing ) }
293- />
294- </ Box >
295- < Box
296- height = { 1 }
297- style = { {
298- backgroundColor : isEditing
299- ? theme . palette . warning_100
300- : theme . palette . neutral_100 ,
301- } }
302- />
303- </ Box >
304- ) ;
305- }
306-
307266export function Footer ( {
308267 onCreateIdentity,
309268} : {
0 commit comments