[test code]

Implemented basic test that tests the callback
dooboolab-community · Aug 27, 2021 · a321bf0 · a321bf0
1 parent fcc5831
commit a321bf0
Showing 1 changed file with 39 additions and 26 deletions.
diff --git a/main/FloatingActionButtonWrapper/index.tsx b/main/FloatingActionButtonWrapper/index.tsx
@@ -20,7 +20,7 @@ export interface FABItem {
   id: string;
 }
 
-interface FloatingActionButtonsWrapperProps<ITEM extends FABItem> {
+export interface FABProps<ITEM extends FABItem> {
   FABList: ITEM[];
   onPressFABItem: (item: ITEM | FABItem) => void;
   renderMainFAB?: (isActive: boolean) => React.ReactElement;
@@ -37,7 +37,7 @@ function FloatingActionButtons<ITEM extends FABItem = FABItem>({
   renderFABListItem,
   size = 'large',
   style,
-}: FloatingActionButtonsWrapperProps<ITEM> & {
+}: FABProps<ITEM> & {
   theme: DoobooTheme;
 }): ReactElement {
   const [isActive, setFabActive] = useState(false);
@@ -52,6 +52,20 @@ function FloatingActionButtons<ITEM extends FABItem = FABItem>({
     }).start();
   }, [fadeAnim, isActive]);
 
+  useEffect(() => {
+    Animated.timing(fadeAnim.current, {
+      toValue: 1,
+      duration: 200,
+      easing: Easing.linear, // Easing is an additional import from react-native
+      useNativeDriver: true, // To make use of native driver for performance
+    }).start();
+  }, [fadeAnim]);
+
+  const spin = fadeAnim.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '45deg'],
+  });
+
   return (
     <View
       style={
@@ -66,39 +80,38 @@ function FloatingActionButtons<ITEM extends FABItem = FABItem>({
         style={{
           opacity: fadeAnim.current,
         }}>
-        {FABList.map((item, idx) =>
-          renderFABListItem ? (
+        {FABList.map((item, idx) => {
+          return (
             <FABItemWrapperView key={item.icon + idx}>
-              {renderFABListItem(item, idx)}
-            </FABItemWrapperView>
-          ) : (
-            <FABItemWrapperView key={item.icon + idx}>
-              {
+              {renderFABListItem ? (
+                renderFABListItem(item, idx)
+              ) : (
                 <IconButton
+                  testID={item.id}
                   size={size}
                   icon={<StyledIcon theme={theme} size={24} name={item.icon} />}
                   onPress={() => onPressFABItem(item)}
                 />
-              }
+              )}
             </FABItemWrapperView>
-          ),
-        )}
+          );
+        })}
       </Animated.View>
       <FABItemWrapperView>
-        {renderMainFAB ? (
-          renderMainFAB(isActive)
-        ) : (
-          <IconButton
-            size={size}
-            icon={
-              <StyledIcon
-                size={24}
-                name={isActive ? 'cross-light' : 'add-light'}
-              />
-            }
-            onPress={() => setFabActive((prevState) => !prevState)}
-          />
-        )}
+        <Animated.View
+          testID={'main_fab_animation_wrapper'}
+          style={{transform: [{rotate: spin}]}}>
+          {renderMainFAB ? (
+            renderMainFAB(isActive)
+          ) : (
+            <IconButton
+              testID={'main_fab'}
+              size={size}
+              icon={<StyledIcon size={24} name="add-light" />}
+              onPress={() => setFabActive((prevState) => !prevState)}
+            />
+          )}
+        </Animated.View>
       </FABItemWrapperView>
     </View>
   );