toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

MM-54575 fix server & user list tutorials (#7698)

Browse source
This commit is contained in:
Elias Nahum 2023-12-06 15:41:04 +08:00 committed by GitHub
parent 21acf6b0e6
commit bcf3dc61ab
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 35 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
app/components/user_list/__snapshots__/index.test.tsx.snap
View file

@ -548,15 +548,6 @@ exports[`components/channel_list_row should show results and tutorial 1`] = `
</View>
</View>
</View>
<Modal
animationType="fade"
hardwareAccelerated={false}
onDismiss={[Function]}
onRequestClose={[Function]}
testID="tutorial_highlight"
transparent={true}
visible={false}
/>
</View>
<View
onFocusCapture={[Function]}

32
app/components/user_list_row/index.tsx
View file

@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
import React, {useCallback, useLayoutEffect, useMemo, useRef, useState} from 'react';
import {useIntl} from 'react-intl';
import {
InteractionManager,
@ -93,6 +93,7 @@ function UserListRow({
const viewRef = useRef<View>(null);
const style = getStyleFromTheme(theme);
const {formatMessage} = useIntl();
const tutorialShown = useRef(false);
const startTutorial = () => {
viewRef.current?.measureInWindow((x, y, w, h) => {
@ -113,18 +114,6 @@ function UserListRow({
storeProfileLongPressTutorial();
}, []);
useEffect(() => {
if (highlight && !tutorialWatched) {
if (isTablet) {
setShowTutorial(true);
return;
}
InteractionManager.runAfterInteractions(() => {
setShowTutorial(true);
});
}
}, [highlight, tutorialWatched, isTablet]);
const handlePress = useCallback((u: UserModel | UserProfile) => {
onPress?.(u);
}, [onPress]);
@ -155,11 +144,24 @@ function UserListRow({
}, [isChannelAdmin, showManageMode, theme]);
const onLayout = useCallback(() => {
if (showTutorial) {
startTutorial();
if (highlight && !tutorialWatched) {
if (isTablet) {
setShowTutorial(true);
return;
}
InteractionManager.runAfterInteractions(() => {
setShowTutorial(true);
});
}
}, [showTutorial]);
useLayoutEffect(() => {
if (showTutorial && !tutorialShown.current) {
tutorialShown.current = true;
startTutorial();
}
});
const icon = useMemo(() => {
if (!selectable && !selected) {
return null;

34
app/screens/home/channel_list/servers/servers_list/server_item/server_item.tsx
View file

@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
import React, {useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState} from 'react';
import {useIntl} from 'react-intl';
import {Animated, DeviceEventEmitter, InteractionManager, Platform, type StyleProp, Text, View, type ViewStyle} from 'react-native';
import {RectButton} from 'react-native-gesture-handler';
@ -159,6 +159,7 @@ const ServerItem = ({
const viewRef = useRef<View>(null);
const [showTutorial, setShowTutorial] = useState(false);
const [itemBounds, setItemBounds] = useState<TutorialItemBounds>({startX: 0, startY: 0, endX: 0, endY: 0});
const tutorialShown = useRef(false);
let displayName = server.displayName;
@ -213,12 +214,25 @@ const ServerItem = ({
};
const onLayout = useCallback(() => {
if (showTutorial) {
swipeable.current?.close();
startTutorial();
if (highlight && !tutorialWatched) {
if (isTablet) {
setShowTutorial(true);
return;
}
InteractionManager.runAfterInteractions(() => {
setShowTutorial(true);
});
}
}, [showTutorial]);
useLayoutEffect(() => {
if (showTutorial && !tutorialShown.current) {
swipeable.current?.close();
tutorialShown.current = true;
startTutorial();
}
});
const containerStyle = useMemo(() => {
const style: StyleProp<ViewStyle> = [styles.container];
if (isActive) {
@ -349,18 +363,6 @@ const ServerItem = ({
};
}, [server.lastActiveAt, isActive]);
useEffect(() => {
if (highlight && !tutorialWatched) {
if (isTablet) {
setShowTutorial(true);
return;
}
InteractionManager.runAfterInteractions(() => {
setShowTutorial(true);
});
}
}, [highlight, tutorialWatched, isTablet]);
const serverItem = `server_list.server_item.${server.displayName.replace(/ /g, '_').toLocaleLowerCase()}`;
const serverItemTestId = isActive ? `${serverItem}.active` : `${serverItem}.inactive`;