Merge pull request #17 from hecom-rn/hanhu

修改群聊设置-全部成员UI ；修改语音未读标记竖直居中
gxsshallot · Jan 7, 2021 · dc32f54 · dc32f54
2 parents d8e42fa + c2c34ac
commit dc32f54
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 9 deletions.
diff --git a/language/zh.json b/language/zh.json
@@ -25,7 +25,7 @@
     "IMPageChooseUserSelectFromOrg": "按部门选同事",
     "IMPageChooseUserAll": "所有人",
     "IMSettingAddGroupMember": "添加群成员",
-    "IMSettingAllMembers": "全体成员({{length}})",
+    "IMSettingAllMembers": "查看全体群成员({{length}})",
     "IMSettingAllowInvite": "允许添加成员",
     "IMSettingAvoid": "消息免打扰",
     "IMSettingChooseGroupMember": "选择群成员",

diff --git a/plugin/setting/AllMembers.tsx b/plugin/setting/AllMembers.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import i18n from 'i18n-js';
 import { Typings, Delegate, PageKeys } from '../../standard';
 import { onAddMembers, onRemoveMembers } from './GeneralUpdate';
-import { Dimensions } from 'react-native';
+import { Dimensions, TouchableHighlight, StyleSheet, View, Text} from 'react-native';
 import { getSafeAreaInset } from '@hecom/react-native-pure-navigation-bar';
 
 export const name = 'IMSettingAllMembers';
@@ -17,10 +17,10 @@ export function getUi(props: Typings.Action.Setting.Params): Typings.Action.Sett
     if (groupMembers.length <= showMaxColumn(props)) {
         return null;
     }
+
     return (
-        <Delegate.component.SettingItem
+        <AllMembersCell
             key={key}
-            type={Typings.Component.SettingItemType.Text}
             title={i18n.t('IMSettingAllMembers', {length: groupMembers.length})}
             onPressLine={() => _clickAllMembers(props)}
         />
@@ -43,7 +43,7 @@ function showMaxColumn(props: Typings.Action.Setting.Params): number {
     }
     let canAdd = true;
     let canRemove = groupOwner === Delegate.user.getMine().userId;
-    const maxRow = 6;
+    const maxRow = 3;
     const showCount = column * maxRow - (canAdd ? 1 : 0) - (canRemove ? 1 : 0);
     return showCount;
 }
@@ -61,4 +61,83 @@ function _clickAllMembers(props: Typings.Action.Setting.Params): void {
             onAddMembers: (memberUserIds: string[]) => onAddMembers(props, memberUserIds),
             onRemoveMembers: (memberUserIds: string[]) => onRemoveMembers(props, memberUserIds),
         });
-}
+}
+
+export interface Props {
+    title: string;
+    onPressLine?: () => void;
+}
+
+export interface State {
+    allowInvites: boolean;
+}
+
+export class AllMembersCell extends React.PureComponent<Props> {
+    constructor(props: Props) {
+        super(props);
+    }
+
+    render() {
+        const {onPressLine} = this.props;
+        return onPressLine ? (
+            <TouchableHighlight
+                underlayColor={Delegate.style.separatorLineColor}
+                onPress={onPressLine}
+            >
+                {this._renderLine()}
+            </TouchableHighlight>
+        ) : this._renderLine();
+    }
+
+    protected _renderLine() {
+        const {title} = this.props;
+        return (
+            <View style={styles.container}>
+                {/* <View style={styles.line}>
+                    
+                </View> */}
+                {this._renderLabel(title)}
+            </View>
+        );
+    }
+
+    protected _renderLabel(title: string) {
+        return (
+            <View style={styles.titleview}>
+                <Text numberOfLines={1} style={styles.title}>
+                    {title}
+                </Text>
+            </View>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        flexDirection: 'row',
+        backgroundColor: 'white',
+
+    },
+    line: {
+        height: 48,
+        flex: 1,
+        alignItems: 'center',
+        flexDirection: 'row',
+        backgroundColor: 'white',
+        justifyContent: 'center',
+        paddingHorizontal: 16,
+    },
+
+    titleview: {
+        height: 48,
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    title: {
+        fontSize: 16,
+        color: '#333333',
+        textAlign:'center',
+    },
+});
diff --git a/plugin/setting/AvatarList.tsx b/plugin/setting/AvatarList.tsx
@@ -21,6 +21,7 @@ export function getUi(props: Typings.Action.Setting.Params): Typings.Action.Sett
             canAdd={isOwner || allowAdd}
             canRemove={isOwner}
             navigation={navigation}
+            tempProps={props}
         />
     );
 }
diff --git a/plugin/setting/index.ts b/plugin/setting/index.ts
@@ -20,7 +20,6 @@ export function setup() {
         (props: Typings.Action.Setting.Params) => Typings.Action.Setting.Result
     ];
     const actions: ActionItem[] = [
-        [AllMembers.name, AllMembers.getUi],
         [AllowInvite.name, AllowInvite.getUi],
         [AvatarList.name, AvatarList.getUi],
         [Avoid.name, Avoid.getUi],
@@ -37,7 +36,7 @@ export function setup() {
         Model.Setting.registerDefault(name, getUi);
     });
     Delegate.page[PageKeys.ChatSetting].defaultProps.sections = [
-        [AvatarList.name, AllMembers.name],
+        [AvatarList.name],
         [GroupData.name],
         [GroupName.name, GroupAvatar.name, GroupAnnouncement.name, AllowInvite.name, Top.name, Avoid.name, GroupMemberName.name]
     ];

diff --git a/standard/component/AvatarList.tsx b/standard/component/AvatarList.tsx
@@ -5,6 +5,7 @@ import i18n from 'i18n-js';
 import { Component } from '../typings';
 import * as PageKeys from '../pagekey';
 import delegate from '../delegate';
+import { AllMembers } from 'react-native-im/plugin/setting';
 
 export type Props = Component.AvatarListProps;
 
@@ -30,9 +31,11 @@ export default class extends React.PureComponent<Props> {
 
     render() {
         const dataSource = this._getDataSource();
+        const {tempProps} = this.props;
         return (
             <View>
                 {dataSource.map(this._renderRow.bind(this))}
+                {AllMembers.getUi(tempProps)}
             </View>
         );
     }
@@ -104,7 +107,7 @@ export default class extends React.PureComponent<Props> {
 
     protected _getDataSource(): string[][] {
         const column = this._calculateColumn();
-        const maxRow = 6;
+        const maxRow = 3;
         const {canAdd, canRemove, data} = this.props;
         const showCount = column * maxRow - (canAdd ? 1 : 0) - (canRemove ? 1 : 0);
         const newData = [...data.slice(0, showCount)];

diff --git a/standard/component/MessageBubble.tsx b/standard/component/MessageBubble.tsx
@@ -71,6 +71,7 @@ export default class extends React.PureComponent<Props, State> {
                     height: 5,
                     borderRadius: 10,
                     marginLeft: 5,
+                    alignSelf: 'center',
                 }}/>
             )
         } else {

diff --git a/standard/typings/Component.ts b/standard/typings/Component.ts
@@ -1,6 +1,7 @@
 import { StyleProp, ViewStyle, ImageURISource, ImageRequireSource } from 'react-native';
 import * as Props from './Props';
 import * as Message from './Message';
+import {Typings} from '../../standard'
 
 export interface AvatarImageProps extends Props.Conversation {
     style?: StyleProp<ViewStyle>;
@@ -11,6 +12,7 @@ export interface AvatarListProps extends Props.Navigation {
     data: string[];
     canAdd: boolean;
     canRemove: boolean;
+    tempProps: Typings.Action.Setting.Params;
     onAddMembers: (newMemberUserIds: string[]) => void;
     onRemoveMembers: (deletedMemberUserIds: string[]) => void;
 }