feat(app): 增加了踢出团成员的功能

src/app/src/components/UserItem.tsx

@@ -17,13 +17,16 @@ export const UserItemContainer = styled.TouchableOpacity`
   background-color: white;
 `;
 
+type UserItemActionCallback = (uuid: string, name: string) => void;
+
 export const UserItem: React.FC<{
   uuid: string;
-  onPress?: (uuid: string, name: string) => void;
+  onPress?: UserItemActionCallback;
+  onLongPress?: UserItemActionCallback;
   prefix?: React.ReactNode;
   suffix?: React.ReactNode;
 }> = TMemo((props) => {
-  const { uuid, onPress, prefix, suffix } = props;
+  const { uuid, onPress, onLongPress, prefix, suffix } = props;
 
   const userInfo = useCachedUserInfo(uuid);
   const name = getUserName(userInfo);
@@ -33,8 +36,12 @@ export const UserItem: React.FC<{
     _isFunction(onPress) && onPress(uuid, name);
   }, [uuid, name, onPress]);
 
+  const handleLongPress = useCallback(() => {
+    _isFunction(onLongPress) && onLongPress(uuid, name);
+  }, [uuid, name, onLongPress]);
+
   return (
-    <UserItemContainer onPress={handlePress}>
+    <UserItemContainer onPress={handlePress} onLongPress={handleLongPress}>
       {prefix}
       <UserAvatar name={name} uri={avatar} />
       <Text>{name}</Text>

src/app/src/screens/GroupMemberScreen.tsx

@@ -4,10 +4,16 @@ import UserList from '@app/components/UserList';
 import _isNil from 'lodash/isNil';
 import { TRPGStackScreenProps, useTRPGStackNavigation } from '@app/router';
 import { TMemo } from '@shared/components/TMemo';
-import { useTRPGSelector } from '@shared/hooks/useTRPGSelector';
+import {
+  useTRPGSelector,
+  useTRPGDispatch,
+} from '@shared/hooks/useTRPGSelector';
 import { UserItem } from '@app/components/UserItem';
 import { TIcon } from '@app/components/TComponent';
 import styledTheme from '@shared/utils/theme';
+import { Modal } from '@ant-design/react-native';
+import { tickMember } from '@redux/actions/group';
+import { showAlert } from '@redux/actions/ui';
 
 interface Props extends TRPGStackScreenProps<'GroupMember'>, TRPGDispatchProp {
   groupMembers: string[];
@@ -22,6 +28,7 @@ const GroupMemberScreen: React.FC<Props> = TMemo((props) => {
   const managersUUID = group?.managers_uuid ?? [];
   const ownerUUID = group?.owner_uuid ?? '';
 
+  const dispatch = useTRPGDispatch();
   const navigation = useTRPGStackNavigation();
   const handlePress = useCallback(
     (uuid: string, name: string) => {
@@ -34,6 +41,27 @@ const GroupMemberScreen: React.FC<Props> = TMemo((props) => {
     [navigation]
   );
 
+  const handleLongPress = useCallback(
+    (uuid: string, name: string) => {
+      Modal.operation([
+        {
+          text: '踢出成员',
+          onPress: () => {
+            dispatch(
+              showAlert({
+                content: `确认要踢出 ${name} 么`,
+                onConfirm() {
+                  dispatch(tickMember(groupUUID, uuid));
+                },
+              })
+            );
+          },
+        },
+      ]);
+    },
+    [groupUUID]
+  );
+
   const getIcon = useCallback(
     (uuid: string) => {
       if (uuid === ownerUUID) {
@@ -67,7 +95,8 @@ const GroupMemberScreen: React.FC<Props> = TMemo((props) => {
         return (
           <UserItem
             uuid={uuid}
-            onPress={(uuid, name) => handlePress(uuid, name)}
+            onPress={handlePress}
+            onLongPress={handleLongPress}
             suffix={getIcon(uuid)}
           />
         );

src/shared/redux/actions/group.ts

@@ -50,6 +50,7 @@ import {
   hideModal,
   hideAlert,
   hideSlidePanel,
+  showToast,
 } from './ui';
 import _set from 'lodash/set';
 import _get from 'lodash/get';
@@ -782,6 +783,7 @@ export const tickMember = function(groupUUID, memberUUID) {
         dispatch(showAlert('操作成功'));
         dispatch(hideModal());
       } else {
+        dispatch(showToast(data?.msg));
         console.error(data);
       }
     });

src/web/containers/main/group/modal/GroupMemberManage.tsx

@@ -1,12 +1,9 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import {
-  tickMember,
-  setMemberToManager,
-} from '../../../../../shared/redux/actions/group';
-import ModalPanel from '../../../../components/ModalPanel';
-import config from '../../../../../shared/project.config';
-import { getUserInfoCache } from '../../../../../shared/utils/cache-helper';
+import { tickMember, setMemberToManager } from '@shared/redux/actions/group';
+import ModalPanel from '@web/components/ModalPanel';
+import config from '@shared/project.config';
+import { getUserInfoCache } from '@shared/utils/cache-helper';
 import { TRPGState, TRPGDispatchProp } from '@redux/types/__all__';
 
 import './GroupMemberManage.scss';