@umituz/react-native-settings 1.11.4 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +0 -0
- package/README.md +0 -0
- package/package.json +1 -1
- package/src/domain/repositories/ISettingsRepository.ts +0 -0
- package/src/index.ts +0 -1
- package/src/infrastructure/storage/SettingsStore.ts +0 -0
- package/src/presentation/components/CloudSyncSetting.tsx +0 -0
- package/src/presentation/components/DisclaimerSetting.tsx +0 -0
- package/src/presentation/components/SettingItem.tsx +0 -0
- package/src/presentation/components/SettingsFooter.tsx +0 -0
- package/src/presentation/components/SettingsSection.tsx +0 -0
- package/src/presentation/components/StorageClearSetting.tsx +0 -0
- package/src/presentation/components/UserProfileHeader.tsx +0 -0
- package/src/presentation/screens/AppearanceScreen.tsx +0 -0
- package/src/presentation/screens/SettingsScreen.tsx +0 -0
- package/src/presentation/screens/components/AboutLegalSection.tsx +0 -0
- package/src/presentation/screens/components/AppearanceSection.tsx +0 -0
- package/src/presentation/screens/components/LanguageSection.tsx +0 -0
- package/src/presentation/screens/components/NotificationsSection.tsx +0 -0
- package/src/presentation/screens/components/index.ts +0 -0
- package/src/presentation/screens/hooks/useFeatureDetection.ts +0 -0
- package/src/presentation/screens/types.ts +0 -0
- package/src/presentation/screens/utils/normalizeConfig.ts +0 -0
- package/src/presentation/screens/LanguageSelectionScreen.tsx +0 -204
package/LICENSE
CHANGED
|
File without changes
|
package/README.md
CHANGED
|
File without changes
|
package/package.json
CHANGED
|
File without changes
|
package/src/index.ts
CHANGED
|
@@ -35,7 +35,6 @@ export {
|
|
|
35
35
|
export { SettingsScreen } from './presentation/screens/SettingsScreen';
|
|
36
36
|
export type { SettingsScreenProps } from './presentation/screens/SettingsScreen';
|
|
37
37
|
export { AppearanceScreen } from './presentation/screens/AppearanceScreen';
|
|
38
|
-
export { LanguageSelectionScreen } from './presentation/screens/LanguageSelectionScreen';
|
|
39
38
|
|
|
40
39
|
// =============================================================================
|
|
41
40
|
// PRESENTATION LAYER - Types
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
@@ -1,204 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Language Selection Screen
|
|
3
|
-
*
|
|
4
|
-
* Language picker with search functionality
|
|
5
|
-
*
|
|
6
|
-
* App Factory - Universal Language Selector
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
import React, { useState, useMemo } from 'react';
|
|
10
|
-
import {
|
|
11
|
-
View,
|
|
12
|
-
StyleSheet,
|
|
13
|
-
FlatList,
|
|
14
|
-
TouchableOpacity,
|
|
15
|
-
TextInput,
|
|
16
|
-
} from 'react-native';
|
|
17
|
-
import { useNavigation } from '@react-navigation/native';
|
|
18
|
-
import { useAppDesignTokens, withAlpha, STATIC_TOKENS, type DesignTokens } from '@umituz/react-native-design-system-theme';
|
|
19
|
-
import { AtomicIcon, AtomicText } from '@umituz/react-native-design-system-atoms';
|
|
20
|
-
import { ScreenLayout } from '@umituz/react-native-design-system-organisms';
|
|
21
|
-
import { useLocalization, searchLanguages, Language, LANGUAGES } from '@umituz/react-native-localization';
|
|
22
|
-
|
|
23
|
-
/**
|
|
24
|
-
* Language Selection Screen Component
|
|
25
|
-
*/
|
|
26
|
-
export const LanguageSelectionScreen: React.FC = () => {
|
|
27
|
-
const navigation = useNavigation();
|
|
28
|
-
const { t, currentLanguage, setLanguage } = useLocalization();
|
|
29
|
-
const tokens = useAppDesignTokens();
|
|
30
|
-
const [searchQuery, setSearchQuery] = useState('');
|
|
31
|
-
const [selectedCode, setSelectedCode] = useState(currentLanguage);
|
|
32
|
-
const [isFocused, setIsFocused] = useState(false);
|
|
33
|
-
|
|
34
|
-
const filteredLanguages = useMemo(() => {
|
|
35
|
-
return searchLanguages(searchQuery);
|
|
36
|
-
}, [searchQuery]);
|
|
37
|
-
|
|
38
|
-
const handleLanguageSelect = async (code: string) => {
|
|
39
|
-
setSelectedCode(code);
|
|
40
|
-
await setLanguage(code);
|
|
41
|
-
navigation.goBack();
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
const renderLanguageItem = ({ item }: { item: Language }) => {
|
|
45
|
-
const isSelected = selectedCode === item.code;
|
|
46
|
-
|
|
47
|
-
return (
|
|
48
|
-
<TouchableOpacity
|
|
49
|
-
style={StyleSheet.flatten([
|
|
50
|
-
styles.languageItem,
|
|
51
|
-
{
|
|
52
|
-
borderColor: isSelected
|
|
53
|
-
? tokens.colors.primary
|
|
54
|
-
: tokens.colors.borderLight,
|
|
55
|
-
backgroundColor: isSelected
|
|
56
|
-
? withAlpha(tokens.colors.primary, 0.1)
|
|
57
|
-
: tokens.colors.surface,
|
|
58
|
-
},
|
|
59
|
-
])}
|
|
60
|
-
onPress={() => handleLanguageSelect(item.code)}
|
|
61
|
-
activeOpacity={0.7}
|
|
62
|
-
>
|
|
63
|
-
<View style={styles.languageContent}>
|
|
64
|
-
<AtomicText style={StyleSheet.flatten([STATIC_TOKENS.typography.headingLarge, styles.flag])}>
|
|
65
|
-
{item.flag}
|
|
66
|
-
</AtomicText>
|
|
67
|
-
<View style={styles.languageText}>
|
|
68
|
-
<AtomicText
|
|
69
|
-
style={StyleSheet.flatten([
|
|
70
|
-
STATIC_TOKENS.typography.bodyMedium,
|
|
71
|
-
styles.nativeName,
|
|
72
|
-
])}
|
|
73
|
-
>
|
|
74
|
-
{item.nativeName}
|
|
75
|
-
</AtomicText>
|
|
76
|
-
<AtomicText style={StyleSheet.flatten([{ color: tokens.colors.textSecondary }])}>
|
|
77
|
-
{item.name}
|
|
78
|
-
</AtomicText>
|
|
79
|
-
</View>
|
|
80
|
-
</View>
|
|
81
|
-
{isSelected && (
|
|
82
|
-
<AtomicIcon
|
|
83
|
-
name="CircleCheck"
|
|
84
|
-
size="md"
|
|
85
|
-
color="primary"
|
|
86
|
-
/>
|
|
87
|
-
)}
|
|
88
|
-
</TouchableOpacity>
|
|
89
|
-
);
|
|
90
|
-
};
|
|
91
|
-
|
|
92
|
-
return (
|
|
93
|
-
<ScreenLayout scrollable={false} testID="language-selection-screen">
|
|
94
|
-
{/* Search Input */}
|
|
95
|
-
<View
|
|
96
|
-
style={StyleSheet.flatten([
|
|
97
|
-
styles.searchContainer,
|
|
98
|
-
{
|
|
99
|
-
borderColor: isFocused ? tokens.colors.primary : tokens.colors.borderLight,
|
|
100
|
-
borderWidth: isFocused ? 2 : 1.5,
|
|
101
|
-
backgroundColor: tokens.colors.surface,
|
|
102
|
-
},
|
|
103
|
-
])}
|
|
104
|
-
>
|
|
105
|
-
<AtomicIcon
|
|
106
|
-
name="Search"
|
|
107
|
-
size="md"
|
|
108
|
-
color="secondary"
|
|
109
|
-
style={styles.searchIcon}
|
|
110
|
-
/>
|
|
111
|
-
<TextInput
|
|
112
|
-
style={StyleSheet.flatten([styles.searchInput, { color: tokens.colors.textPrimary }])}
|
|
113
|
-
placeholder={t('settings.languageSelection.searchPlaceholder')}
|
|
114
|
-
placeholderTextColor={tokens.colors.textSecondary}
|
|
115
|
-
value={searchQuery}
|
|
116
|
-
onChangeText={setSearchQuery}
|
|
117
|
-
onFocus={() => setIsFocused(true)}
|
|
118
|
-
onBlur={() => setIsFocused(false)}
|
|
119
|
-
autoCapitalize="none"
|
|
120
|
-
autoCorrect={false}
|
|
121
|
-
/>
|
|
122
|
-
{searchQuery.length > 0 && (
|
|
123
|
-
<TouchableOpacity
|
|
124
|
-
onPress={() => setSearchQuery('')}
|
|
125
|
-
style={styles.clearButton}
|
|
126
|
-
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
|
|
127
|
-
>
|
|
128
|
-
<AtomicIcon
|
|
129
|
-
name="X"
|
|
130
|
-
size="sm"
|
|
131
|
-
color="secondary"
|
|
132
|
-
/>
|
|
133
|
-
</TouchableOpacity>
|
|
134
|
-
)}
|
|
135
|
-
</View>
|
|
136
|
-
|
|
137
|
-
{/* Language List */}
|
|
138
|
-
<FlatList
|
|
139
|
-
data={filteredLanguages}
|
|
140
|
-
renderItem={renderLanguageItem}
|
|
141
|
-
keyExtractor={item => item.code}
|
|
142
|
-
contentContainerStyle={styles.listContent}
|
|
143
|
-
showsVerticalScrollIndicator={false}
|
|
144
|
-
keyboardShouldPersistTaps="handled"
|
|
145
|
-
/>
|
|
146
|
-
</ScreenLayout>
|
|
147
|
-
);
|
|
148
|
-
};
|
|
149
|
-
|
|
150
|
-
const styles = StyleSheet.create({
|
|
151
|
-
searchContainer: {
|
|
152
|
-
flexDirection: 'row',
|
|
153
|
-
alignItems: 'center',
|
|
154
|
-
marginHorizontal: 20,
|
|
155
|
-
marginBottom: 24,
|
|
156
|
-
paddingHorizontal: 16,
|
|
157
|
-
paddingVertical: 8,
|
|
158
|
-
borderRadius: STATIC_TOKENS.borders.radius.lg,
|
|
159
|
-
},
|
|
160
|
-
searchIcon: {
|
|
161
|
-
marginRight: 8,
|
|
162
|
-
},
|
|
163
|
-
searchInput: {
|
|
164
|
-
flex: 1,
|
|
165
|
-
fontSize: STATIC_TOKENS.typography.bodyMedium.fontSize,
|
|
166
|
-
padding: 0,
|
|
167
|
-
fontWeight: '500',
|
|
168
|
-
},
|
|
169
|
-
clearButton: {
|
|
170
|
-
padding: STATIC_TOKENS.spacing.xs,
|
|
171
|
-
},
|
|
172
|
-
listContent: {
|
|
173
|
-
paddingHorizontal: 20,
|
|
174
|
-
paddingBottom: 32,
|
|
175
|
-
},
|
|
176
|
-
languageItem: {
|
|
177
|
-
flexDirection: 'row',
|
|
178
|
-
alignItems: 'center',
|
|
179
|
-
justifyContent: 'space-between',
|
|
180
|
-
padding: STATIC_TOKENS.spacing.md,
|
|
181
|
-
borderRadius: STATIC_TOKENS.borders.radius.lg,
|
|
182
|
-
borderWidth: 2,
|
|
183
|
-
marginBottom: 8,
|
|
184
|
-
},
|
|
185
|
-
languageContent: {
|
|
186
|
-
flexDirection: 'row',
|
|
187
|
-
alignItems: 'center',
|
|
188
|
-
flex: 1,
|
|
189
|
-
gap: 16,
|
|
190
|
-
},
|
|
191
|
-
flag: {
|
|
192
|
-
fontSize: STATIC_TOKENS.typography.headingLarge.fontSize,
|
|
193
|
-
},
|
|
194
|
-
languageText: {
|
|
195
|
-
flex: 1,
|
|
196
|
-
gap: 2,
|
|
197
|
-
},
|
|
198
|
-
nativeName: {
|
|
199
|
-
fontWeight: '600',
|
|
200
|
-
},
|
|
201
|
-
});
|
|
202
|
-
|
|
203
|
-
export default LanguageSelectionScreen;
|
|
204
|
-
|