refactor selection header to seperate component

2025-12-22 22:49:45 +01:00 · 2020-01-13 14:47:28 +05:00
parent 8d0a92cbd2
commit 119bf9e9f8
2 changed files with 208 additions and 285 deletions
--- a/apps/mobile/src/components/SelectionHeader/index.js
+++ b/apps/mobile/src/components/SelectionHeader/index.js
@@ -0,0 +1,120 @@
+import React from 'react';
+import {SafeAreaView, TouchableOpacity, View, Text} from 'react-native';
+import {SIZE, WEIGHT} from '../../common/common';
+import {w} from '../../utils/utils';
+import Icon from 'react-native-vector-icons/Feather';
+import * as Animatable from 'react-native-animatable';
+import {useAppContext} from '../../provider/useAppContext';
+
+export const AnimatedSafeAreaView = Animatable.createAnimatableComponent(
+  SafeAreaView,
+);
+
+export const SelectionHeader = ({navigation}) => {
+  // State
+  const {
+    colors,
+    selectionMode,
+    selectedItemsList,
+    changeSelectionMode,
+  } = useAppContext();
+
+  // Render
+
+  return (
+    <Animatable.View
+      transition={['backgroundColor', 'opacity', 'height']}
+      duration={300}
+      style={{
+        width: '100%',
+        position: 'absolute',
+        height: selectionMode ? 50 : 0,
+        opacity: selectionMode ? 1 : 0,
+        justifyContent: 'flex-end',
+        zIndex: 11,
+      }}>
+      <View
+        style={{
+          width: w - 24,
+          marginHorizontal: 12,
+          height: 50,
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+        }}>
+        <View
+          style={{
+            justifyContent: 'space-between',
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}>
+          <TouchableOpacity
+            onPress={() => {
+              changeSelectionMode(false);
+            }}
+            hitSlop={{top: 20, bottom: 20, left: 50, right: 40}}
+            style={{
+              justifyContent: 'center',
+              alignItems: 'flex-start',
+              height: 40,
+              width: 50,
+              marginTop: 2.5,
+            }}>
+            <Icon
+              style={{
+                marginLeft: -5,
+              }}
+              color={colors.pri}
+              name={'chevron-left'}
+              size={SIZE.xxxl - 3}
+            />
+          </TouchableOpacity>
+          <Text
+            style={{
+              fontSize: SIZE.lg,
+              fontFamily: WEIGHT.regular,
+              color: colors.pri,
+              textAlignVertical: 'center',
+            }}>
+            {selectedItemsList.length}
+          </Text>
+        </View>
+
+        <View
+          style={{
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}>
+          <Icon
+            style={{
+              paddingLeft: 25,
+            }}
+            color={colors.accent}
+            name={'plus'}
+            size={SIZE.xl}
+          />
+          <Icon
+            style={{
+              paddingLeft: 25,
+            }}
+            color={colors.accent}
+            name={'star'}
+            size={SIZE.xl - 3}
+          />
+
+          <Icon
+            style={{
+              paddingLeft: 25,
+            }}
+            color={colors.errorText}
+            name={'trash'}
+            size={SIZE.xl - 3}
+          />
+        </View>
+      </View>
+    </Animatable.View>
+  );
+};
+
+export default SelectionHeader;