this repo has no description
1import {useRef} from 'react'
2import {type ListRenderItemInfo} from 'react-native'
3import {View} from 'react-native'
4import {
5 type AppBskyActorDefs,
6 type AppBskyFeedDefs,
7 type ModerationOpts,
8} from '@atproto/api'
9import {msg} from '@lingui/core/macro'
10import {useLingui} from '@lingui/react'
11import {Trans} from '@lingui/react/macro'
12
13import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender'
14import {type ListMethods} from '#/view/com/util/List'
15import {
16 type WizardAction,
17 type WizardState,
18} from '#/screens/StarterPack/Wizard/State'
19import {atoms as a, native, useTheme, web} from '#/alf'
20import {Button, ButtonText} from '#/components/Button'
21import * as Dialog from '#/components/Dialog'
22import {
23 WizardFeedCard,
24 WizardProfileCard,
25} from '#/components/StarterPack/Wizard/WizardListCard'
26import {Text} from '#/components/Typography'
27import {IS_WEB} from '#/env'
28
29function keyExtractor(
30 item: AppBskyActorDefs.ProfileViewBasic | AppBskyFeedDefs.GeneratorView,
31 index: number,
32) {
33 return `${item.did}-${index}`
34}
35
36export function WizardEditListDialog({
37 control,
38 state,
39 dispatch,
40 moderationOpts,
41 profile,
42}: {
43 control: Dialog.DialogControlProps
44 state: WizardState
45 dispatch: (action: WizardAction) => void
46 moderationOpts: ModerationOpts
47 profile: AppBskyActorDefs.ProfileViewDetailed
48}) {
49 const {_} = useLingui()
50 const t = useTheme()
51 const initialNumToRender = useInitialNumToRender()
52
53 const listRef = useRef<ListMethods>(null)
54
55 const getData = () => {
56 if (state.currentStep === 'Feeds') return state.feeds
57
58 return [profile, ...state.profiles.filter(p => p.did !== profile.did)]
59 }
60
61 const renderItem = ({item}: ListRenderItemInfo<any>) =>
62 state.currentStep === 'Profiles' ? (
63 <WizardProfileCard
64 profile={item}
65 btnType="remove"
66 state={state}
67 dispatch={dispatch}
68 moderationOpts={moderationOpts}
69 />
70 ) : (
71 <WizardFeedCard
72 generator={item}
73 btnType="remove"
74 state={state}
75 dispatch={dispatch}
76 moderationOpts={moderationOpts}
77 />
78 )
79
80 return (
81 <Dialog.Outer
82 control={control}
83 testID="newChatDialog"
84 nativeOptions={{fullHeight: true}}>
85 <Dialog.Handle />
86 <Dialog.InnerFlatList
87 ref={listRef}
88 data={getData()}
89 renderItem={renderItem}
90 keyExtractor={keyExtractor}
91 ListHeaderComponent={
92 <View
93 style={[
94 native(a.pt_4xl),
95 a.flex_row,
96 a.justify_between,
97 a.border_b,
98 a.px_sm,
99 a.mb_sm,
100 t.atoms.bg,
101 t.atoms.border_contrast_medium,
102 IS_WEB
103 ? [
104 a.align_center,
105 {
106 height: 48,
107 },
108 ]
109 : [a.pb_sm, a.align_end],
110 ]}>
111 <View style={{width: 60}} />
112 <Text style={[a.font_semi_bold, a.text_xl]}>
113 {state.currentStep === 'Profiles' ? (
114 <Trans>Edit People</Trans>
115 ) : (
116 <Trans>Edit Feeds</Trans>
117 )}
118 </Text>
119 <View style={{width: 60}}>
120 {IS_WEB && (
121 <Button
122 label={_(msg`Close`)}
123 variant="ghost"
124 color="primary"
125 size="small"
126 onPress={() => control.close()}>
127 <ButtonText>
128 <Trans>Close</Trans>
129 </ButtonText>
130 </Button>
131 )}
132 </View>
133 </View>
134 }
135 stickyHeaderIndices={[0]}
136 style={[
137 web([a.py_0, {height: '100vh', maxHeight: 600}, a.px_0]),
138 native({
139 height: '100%',
140 paddingHorizontal: 0,
141 marginTop: 0,
142 paddingTop: 0,
143 }),
144 ]}
145 webInnerStyle={[a.py_0, {maxWidth: 500, minWidth: 200}]}
146 keyboardDismissMode="on-drag"
147 removeClippedSubviews={true}
148 initialNumToRender={initialNumToRender}
149 />
150 </Dialog.Outer>
151 )
152}