Gekidou category collapse animated (#6049)

* Adds chevron animation for collapsing categories * Adds category body channel item collapsing * Updates category body channel list tests and timing
mattermost · Mar 11, 2022 · 7001e29 · 7001e29
1 parent 9f61c27
commit 7001e29
Show file tree

Hide file tree

Showing 10 changed files with 354 additions and 178 deletions.
diff --git a/app/actions/local/category.ts b/app/actions/local/category.ts
@@ -84,3 +84,28 @@ export const storeCategories = async (serverUrl: string, categories: CategoryWit
 
     return {models: flattenedModels};
 };
+
+export const toggleCollapseCategory = async (serverUrl: string, categoryId: string) => {
+    const database = DatabaseManager.serverDatabases[serverUrl].database;
+    if (!database) {
+        return {error: `${serverUrl} database not found`};
+    }
+
+    try {
+        const category = await queryCategoryById(database, categoryId);
+
+        if (category) {
+            await database.write(async () => {
+                await category.update(() => {
+                    category.collapsed = !category.collapsed;
+                });
+            });
+        }
+
+        return {category};
+    } catch (error) {
+        // eslint-disable-next-line no-console
+        console.log('FAILED TO COLLAPSE CATEGORY', categoryId, error);
+        return {error};
+    }
+};
diff --git a/app/components/channel_list/categories/body/__snapshots__/category_body.test.tsx.snap b/app/components/channel_list/categories/body/__snapshots__/category_body.test.tsx.snap
@@ -5,103 +5,121 @@ Object {
   "children": Array [
     <View>
       <View
+        onLayout={[Function]}
         style={null}
       >
-        <RNGestureHandlerButton
+        <View
+          animatedStyle={
+            Object {
+              "value": Object {
+                "height": 40,
+                "opacity": 1,
+              },
+            }
+          }
           collapsable={false}
-          exclusive={true}
-          onGestureEvent={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onHandlerStateChange={[Function]}
-          rippleColor={0}
+          style={
+            Object {
+              "height": 40,
+              "opacity": 1,
+            }
+          }
         >
-          <View
-            accessible={true}
+          <RNGestureHandlerButton
             collapsable={false}
-            style={
-              Object {
-                "opacity": 1,
-              }
-            }
+            exclusive={true}
+            onGestureEvent={[Function]}
+            onGestureHandlerEvent={[Function]}
+            onGestureHandlerStateChange={[Function]}
+            onHandlerStateChange={[Function]}
+            rippleColor={0}
           >
             <View
+              accessible={true}
+              collapsable={false}
               style={
                 Object {
-                  "flexDirection": "row",
-                  "marginBottom": 8,
-                  "paddingLeft": 2,
-                  "paddingVertical": 4,
+                  "opacity": 1,
                 }
               }
             >
               <View
                 style={
-                  Array [
-                    Object {
-                      "alignItems": "center",
-                      "justifyContent": "center",
-                    },
-                    Object {
-                      "height": 24,
-                      "width": 24,
-                    },
-                    undefined,
-                  ]
+                  Object {
+                    "flexDirection": "row",
+                    "marginBottom": 8,
+                    "paddingLeft": 2,
+                    "paddingVertical": 4,
+                  }
                 }
               >
-                <Icon
-                  name="globe"
+                <View
                   style={
                     Array [
                       Object {
-                        "color": "rgba(255,255,255,0.4)",
+                        "alignItems": "center",
+                        "justifyContent": "center",
+                      },
+                      Object {
+                        "height": 24,
+                        "width": 24,
                       },
                       undefined,
-                      undefined,
+                    ]
+                  }
+                >
+                  <Icon
+                    name="globe"
+                    style={
+                      Array [
+                        Object {
+                          "color": "rgba(255,255,255,0.4)",
+                        },
+                        undefined,
+                        undefined,
+                        Object {
+                          "fontSize": 24,
+                          "left": 1,
+                        },
+                      ]
+                    }
+                    testID="undefined.public"
+                  />
+                </View>
+                <Text
+                  ellipsizeMode="tail"
+                  numberOfLines={1}
+                  style={
+                    Array [
                       Object {
-                        "fontSize": 24,
-                        "left": 1,
+                        "fontFamily": "OpenSans",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "lineHeight": 24,
                       },
+                      Object {
+                        "color": "rgba(255,255,255,0.72)",
+                        "flex": 1,
+                        "marginTop": -1,
+                        "paddingLeft": 12,
+                      },
+                      false,
                     ]
                   }
-                  testID="undefined.public"
-                />
+                >
+                  Channel
+                </Text>
               </View>
-              <Text
-                ellipsizeMode="tail"
-                numberOfLines={1}
-                style={
-                  Array [
-                    Object {
-                      "fontFamily": "OpenSans",
-                      "fontSize": 16,
-                      "fontWeight": "400",
-                      "lineHeight": 24,
-                    },
-                    Object {
-                      "color": "rgba(255,255,255,0.72)",
-                      "flex": 1,
-                      "marginTop": -1,
-                      "paddingLeft": 12,
-                    },
-                    false,
-                  ]
-                }
-              >
-                Channel
-              </Text>
             </View>
-          </View>
-        </RNGestureHandlerButton>
+          </RNGestureHandlerButton>
+        </View>
       </View>
     </View>,
   ],
   "props": Object {
     "data": Anything,
     "getItem": [Function],
     "getItemCount": [Function],
-    "getItemLayout": [Function],
     "initialNumToRender": 20,
     "invertStickyHeaders": undefined,
     "keyExtractor": [Function],

diff --git a/app/components/channel_list/categories/body/category_body.tsx b/app/components/channel_list/categories/body/category_body.tsx
@@ -6,22 +6,23 @@ import {FlatList} from 'react-native';
 
 import ChannelListItem from './channel';
 
+import type CategoryModel from '@typings/database/models/servers/category';
+
 type Props = {
     currentChannelId: string;
     sortedIds: string[];
+    category: CategoryModel;
 };
 
 const extractKey = (item: any) => item;
-const itemLayout = (d: any, index: number) => (
-    {length: 40, offset: 40 * index, index}
-);
 
-const CategoryBody = ({currentChannelId, sortedIds}: Props) => {
+const CategoryBody = ({currentChannelId, sortedIds, category}: Props) => {
     const ChannelItem = useCallback(({item}: {item: string}) => {
         return (
             <ChannelListItem
                 channelId={item}
                 isActive={item === currentChannelId}
+                collapsed={category.collapsed}
             />
         );
     }, [currentChannelId]);
@@ -35,7 +36,6 @@ const CategoryBody = ({currentChannelId, sortedIds}: Props) => {
             initialNumToRender={20}
             windowSize={15}
             updateCellsBatchingPeriod={10}
-            getItemLayout={itemLayout}
         />
     );
 };