refactor SimpleList

apps/mobile/src/components/SimpleList/index.js

@@ -13,16 +13,18 @@ import {useTracked} from '../../provider';
 import {ACTIONS} from '../../provider/actions';
 import {eSendEvent} from '../../services/eventManager';
 import {eClearSearch, eScrollEvent} from '../../services/events';
-import {db, hexToRGBA, ToastEvent} from '../../utils/utils';
+import {db, ToastEvent} from '../../utils/utils';
-import {NotebookItem} from '../NotebookItem';
+import * as Animatable from 'react-native-animatable';
-import NoteItem from '../NoteItem';
+import {PinnedItemList} from './PinnedItemList';
-import SelectionWrapper from '../SelectionWrapper';
 const sectionListRef = createRef();
+
+const AnimatedFlatlist = Animatable.createAnimatableComponent(FlatList);
+const AnimatedSectionList = Animatable.createAnimatableComponent(SectionList);
 const SimpleList = ({
   data,
   type,
   placeholder,
-  renderItem,
+  RenderItem,
   focused,
   placeholderText,
   pinned = null,
@@ -34,7 +36,7 @@ const SimpleList = ({
   isHome = false,
 }) => {
   const [state, dispatch] = useTracked();
-  const {colors, selectionMode, syncing} = state;
+  const {colors, selectionMode} = state;
   const searchResults = {...state.searchResults};
   const [refreshing, setRefreshing] = useState(false);
   const insets = useSafeArea();
@@ -163,98 +165,11 @@ const SimpleList = ({
               ? 155 - insets.top
               : 155 - 60 - insets.top,
         }}>
-        {pinned && pinned.length > 0 ? (
+          {
-          <>
+            pinned?   <PinnedItemList type={type} />: null
-            <FlatList
+          }
-              data={pinned}
+      
-              keyExtractor={(item, index) => item.id.toString()}
+
-              renderItem={({item, index}) =>
-                item.type === 'notebook' ? (
-                  <SelectionWrapper
-                    index={index}
-                    currentEditingNote={false}
-                    pinned={true}
-                    background={
-                      Platform.ios
-                        ? hexToRGBA(colors.accent + '19')
-                        : hexToRGBA(colors.shade)
-                    }
-                    item={item}>
-                    <NotebookItem
-                      hideMore={hideMore}
-                      customStyle={{
-                        width: '100%',
-                        paddingTop: 15,
-                        paddingRight: 18,
-                        marginBottom: 10,
-                        marginTop: 15,
-                        borderBottomWidth: 0,
-                        marginHorizontal: 0,
-                      }}
-                      isMove={isMove}
-                      selectionMode={selectionMode}
-                      onLongPress={() => {
-                        if (!selectionMode) {
-                          dispatch({
-                            type: ACTIONS.SELECTION_MODE,
-                            enabled: true,
-                          });
-                        }
-                        dispatch({type: ACTIONS.SELECTED_ITEMS, item: item});
-                      }}
-                      noteToMove={noteToMove}
-                      item={item}
-                      pinned={true}
-                      index={index}
-                      colors={colors}
-                    />
-                  </SelectionWrapper>
-                ) : (
-                  <SelectionWrapper
-                    index={index}
-                    currentEditingNote={false}
-                    pinned={true}
-                    background={
-                      Platform.ios
-                        ? hexToRGBA(colors.accent + '19')
-                        : hexToRGBA(colors.shade)
-                    }
-                    item={item}>
-                    <NoteItem
-                      colors={colors}
-                      customStyle={{
-                        width: selectionMode ? '90%' : '100%',
-                        marginHorizontal: 0,
-                        paddingTop: 15,
-                        paddingRight: 18,
-                        marginBottom: 10,
-                        marginTop: 15,
-                        borderBottomWidth: 0,
-                      }}
-                      currentEditingNote={false}
-                      pinned={true}
-                      selectionMode={selectionMode}
-                      onLongPress={() => {
-                        if (!selectionMode) {
-                          dispatch({
-                            type: ACTIONS.SELECTION_MODE,
-                            enabled: true,
-                          });
-                        }
-                        dispatch({type: ACTIONS.SELECTED_ITEMS, item: item});
-                      }}
-                      update={() => {
-                        dispatch({type: ACTIONS.NOTES});
-                      }}
-                      item={item}
-                      index={index}
-                    />
-                  </SelectionWrapper>
-                )
-              }
-            />
-          </>
-        ) : null}
       </View>
     );
 
@@ -287,7 +202,9 @@ const SimpleList = ({
     item.id.toString() + index.toString();
 
   return isHome && searchResults.type !== 'notes' ? (
-    <SectionList
+    <AnimatedSectionList
+      transition="backgroundColor"
+      duration={300}
       ref={sectionListRef}
       sections={data}
       refreshControl={
@@ -312,13 +229,16 @@ const SimpleList = ({
       }}
       style={{
         height: '100%',
+        backgroundColor: colors.bg,
       }}
       removeClippedSubviews={true}
       ListFooterComponent={_ListFooterComponent}
-      renderItem={renderItem}
+      renderItem={({item, index}) => <RenderItem item={item} index={index} />}
     />
   ) : (
-    <FlatList
+    <AnimatedFlatlist
+      transition="backgroundColor"
+      duration={300}
       data={
         searchResults.type === type &&
         focused &&
@@ -347,8 +267,9 @@ const SimpleList = ({
       }}
       style={{
         height: '100%',
+        backgroundColor: colors.bg,
       }}
-      renderItem={renderItem}
+      renderItem={({item, index}) => <RenderItem item={item} index={index} />}
     />
   );
 };