@umituz/react-native-settings 5.3.22 → 5.3.23

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.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/domains/notifications/reminders/presentation/screens/ReminderListScreen.tsx +35 -69
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umituz/react-native-settings",
3
- "version": "5.3.22",
3
+ "version": "5.3.23",
4
4
  "description": "Complete settings hub for React Native apps - consolidated package with settings, localization, about, legal, appearance, feedback, FAQs, rating, and gamification",
5
5
  "main": "./src/index.ts",
6
6
  "types": "./src/index.ts",
package/src/domains/notifications/reminders/presentation/screens/ReminderListScreen.tsx CHANGED
@@ -4,10 +4,9 @@
4
4
  */
5
5
 
6
6
  import React, { useMemo, useCallback } from 'react';
7
- import { View, FlatList, StyleSheet, TouchableOpacity } from 'react-native';
7
+ import { View, StyleSheet, TouchableOpacity } from 'react-native';
8
8
  import { AtomicText, AtomicIcon, AtomicSpinner } from '@umituz/react-native-design-system/atoms';
9
9
  import { ScreenLayout } from '@umituz/react-native-design-system/layouts';
10
- import { NavigationHeader, useAppNavigation } from '@umituz/react-native-design-system/molecules';
11
10
  import { useAppDesignTokens } from '@umituz/react-native-design-system/theme';
12
11
  import { ReminderItem } from '../components/ReminderItem';
13
12
  import { useReminders, useRemindersLoading } from '../../../infrastructure/storage/UnifiedNotificationStore';
@@ -28,7 +27,6 @@ export const ReminderListScreen: React.FC<ReminderListScreenProps> = ({
28
27
  onEditPress,
29
28
  maxReminders = 20,
30
29
  }) => {
31
- const navigation = useAppNavigation();
32
30
  const tokens = useAppDesignTokens();
33
31
  const styles = useMemo(() => createStyles(tokens), [tokens]);
34
32
 
@@ -41,7 +39,6 @@ export const ReminderListScreen: React.FC<ReminderListScreenProps> = ({
41
39
  await toggleReminderEnabled(id);
42
40
  } catch (error) {
43
41
  devError('[ReminderListScreen] Failed to toggle reminder:', error);
44
- console.error('[ReminderList] Error:', error);
45
42
  }
46
43
  }, [toggleReminderEnabled]);
47
44
 
@@ -50,79 +47,52 @@ export const ReminderListScreen: React.FC<ReminderListScreenProps> = ({
50
47
  await removeReminder(id);
51
48
  } catch (error) {
52
49
  devError('[ReminderListScreen] Failed to delete reminder:', error);
53
- console.error('[ReminderList] Error:', error);
54
50
  }
55
51
  }, [removeReminder]);
56
52
 
57
53
  const canAddMore = reminders.length < maxReminders;
58
54
 
59
- const renderItem = useCallback(({ item }: { item: Reminder }) => (
60
- <ReminderItem
61
- reminder={item}
62
- translations={{
63
- frequencyOnce: translations.frequencyOnce,
64
- frequencyDaily: translations.frequencyDaily,
65
- frequencyWeekly: translations.frequencyWeekly,
66
- frequencyMonthly: translations.frequencyMonthly,
67
- }}
68
- onToggle={handleToggle}
69
- onEdit={onEditPress}
70
- onDelete={handleDelete}
71
- />
72
- ), [translations, handleToggle, onEditPress, handleDelete]);
73
-
74
- const renderEmpty = useCallback(() => (
75
- <View style={styles.emptyContainer}>
76
- <View style={styles.emptyIconContainer}>
77
- <AtomicIcon name="notifications-off" size="xl" color="secondary" />
78
- </View>
79
- <AtomicText type="bodyLarge" style={styles.emptyTitle}>{translations.emptyTitle}</AtomicText>
80
- <AtomicText type="bodySmall" style={styles.emptyDescription}>{translations.emptyDescription}</AtomicText>
81
- </View>
82
- ), [translations, styles]);
83
-
84
- const keyExtractor = useCallback((item: Reminder) => item.id, []);
85
-
86
- const header = (
87
- <NavigationHeader
88
- title={translations.screenTitle}
89
- onBackPress={() => navigation.goBack()}
90
- />
91
- );
55
+ const fab = canAddMore ? (
56
+ <TouchableOpacity style={styles.fab} onPress={onAddPress} activeOpacity={0.8}>
57
+ <AtomicIcon name="add" size="md" color="onPrimary" />
58
+ <AtomicText type="bodyMedium" style={styles.fabText}>{translations.addButtonLabel}</AtomicText>
59
+ </TouchableOpacity>
60
+ ) : undefined;
92
61
 
93
62
  if (isLoading) {
94
63
  return (
95
- <ScreenLayout header={header}>
64
+ <ScreenLayout footer={fab}>
96
65
  <AtomicSpinner size="lg" color="primary" fullContainer />
97
66
  </ScreenLayout>
98
67
  );
99
68
  }
100
69
 
101
70
  return (
102
- <ScreenLayout header={header}>
103
- <FlatList
104
- data={reminders}
105
- renderItem={renderItem}
106
- keyExtractor={keyExtractor}
107
- ListEmptyComponent={renderEmpty}
108
- contentContainerStyle={styles.listContent}
109
- showsVerticalScrollIndicator={false}
110
- initialNumToRender={10}
111
- maxToRenderPerBatch={5}
112
- windowSize={10}
113
- removeClippedSubviews={true}
114
- getItemLayout={(data, index) => ({
115
- length: 88,
116
- offset: 88 * index,
117
- index,
118
- })}
119
- />
120
-
121
- {canAddMore && (
122
- <TouchableOpacity style={styles.fab} onPress={onAddPress} activeOpacity={0.8}>
123
- <AtomicIcon name="add" size="md" color="onPrimary" />
124
- <AtomicText type="bodyMedium" style={styles.fabText}>{translations.addButtonLabel}</AtomicText>
125
- </TouchableOpacity>
71
+ <ScreenLayout footer={fab} contentContainerStyle={styles.listContent}>
72
+ {reminders.length === 0 ? (
73
+ <View style={styles.emptyContainer}>
74
+ <View style={styles.emptyIconContainer}>
75
+ <AtomicIcon name="notifications-off" size="xl" color="secondary" />
76
+ </View>
77
+ <AtomicText type="bodyLarge" style={styles.emptyTitle}>{translations.emptyTitle}</AtomicText>
78
+ <AtomicText type="bodySmall" style={styles.emptyDescription}>{translations.emptyDescription}</AtomicText>
79
+ </View>
80
+ ) : (
81
+ reminders.map((reminder) => (
82
+ <ReminderItem
83
+ key={reminder.id}
84
+ reminder={reminder}
85
+ translations={{
86
+ frequencyOnce: translations.frequencyOnce,
87
+ frequencyDaily: translations.frequencyDaily,
88
+ frequencyWeekly: translations.frequencyWeekly,
89
+ frequencyMonthly: translations.frequencyMonthly,
90
+ }}
91
+ onToggle={handleToggle}
92
+ onEdit={onEditPress}
93
+ onDelete={handleDelete}
94
+ />
95
+ ))
126
96
  )}
127
97
  </ScreenLayout>
128
98
  );
@@ -130,8 +100,7 @@ export const ReminderListScreen: React.FC<ReminderListScreenProps> = ({
130
100
 
131
101
  const createStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
132
102
  StyleSheet.create({
133
- loadingContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' },
134
- listContent: { padding: 16, paddingBottom: 100, flexGrow: 1 },
103
+ listContent: { padding: 16, flexGrow: 1 },
135
104
  emptyContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 32, paddingTop: 100 },
136
105
  emptyIconContainer: {
137
106
  width: 80,
@@ -145,13 +114,10 @@ const createStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
145
114
  emptyTitle: { color: tokens.colors.textPrimary, textAlign: 'center', marginBottom: 8 },
146
115
  emptyDescription: { color: tokens.colors.textSecondary, textAlign: 'center' },
147
116
  fab: {
148
- position: 'absolute',
149
- bottom: 24,
150
- left: 16,
151
- right: 16,
152
117
  backgroundColor: tokens.colors.primary,
153
118
  borderRadius: 12,
154
119
  paddingVertical: 14,
120
+ marginHorizontal: 16,
155
121
  flexDirection: 'row',
156
122
  alignItems: 'center',
157
123
  justifyContent: 'center',