Differential D7069 Diff 23738 native/chat/settings/thread-settings-member.react.js

Changeset View

Standalone View

native/chat/settings/thread-settings-member.react.js

Show All 10 Lines
} from 'react-native';		} from 'react-native';

import {		import {
removeUsersFromThreadActionTypes,		removeUsersFromThreadActionTypes,
changeThreadMemberRolesActionTypes,		changeThreadMemberRolesActionTypes,
} from 'lib/actions/thread-actions.js';		} from 'lib/actions/thread-actions.js';
import { useENSNames } from 'lib/hooks/ens-cache.js';		import { useENSNames } from 'lib/hooks/ens-cache.js';
import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';		import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
		import { getAvatarForUser } from 'lib/shared/avatar-utils.js';
import {		import {
memberIsAdmin,		memberIsAdmin,
memberHasAdminPowers,		memberHasAdminPowers,
getAvailableThreadMemberActions,		getAvailableThreadMemberActions,
} from 'lib/shared/thread-utils.js';		} from 'lib/shared/thread-utils.js';
import { stringForUser } from 'lib/shared/user-utils.js';		import { stringForUser } from 'lib/shared/user-utils.js';
import type { LoadingStatus } from 'lib/types/loading-types.js';		import type { LoadingStatus } from 'lib/types/loading-types.js';
import {		import {
type ThreadInfo,		type ThreadInfo,
type RelativeMemberInfo,		type RelativeMemberInfo,
} from 'lib/types/thread-types.js';		} from 'lib/types/thread-types.js';

import type { ThreadSettingsNavigate } from './thread-settings.react.js';		import type { ThreadSettingsNavigate } from './thread-settings.react.js';
		import Avatar from '../../components/avatar.react.js';
import PencilIcon from '../../components/pencil-icon.react.js';		import PencilIcon from '../../components/pencil-icon.react.js';
import { SingleLine } from '../../components/single-line.react.js';		import { SingleLine } from '../../components/single-line.react.js';
import {		import {
type KeyboardState,		type KeyboardState,
KeyboardContext,		KeyboardContext,
} from '../../keyboard/keyboard-state.js';		} from '../../keyboard/keyboard-state.js';
import {		import {
OverlayContext,		OverlayContext,
Show All 26 Lines	type Props = {
// withOverlayContext		// withOverlayContext
+overlayContext: ?OverlayContextType,		+overlayContext: ?OverlayContextType,
};		};
class ThreadSettingsMember extends React.PureComponent<Props> {		class ThreadSettingsMember extends React.PureComponent<Props> {
editButton: ?React.ElementRef<typeof View>;		editButton: ?React.ElementRef<typeof View>;

render() {		render() {
const userText = stringForUser(this.props.memberInfo);		const userText = stringForUser(this.props.memberInfo);
let userInfo = null;		const avatarInfo = getAvatarForUser(this.props.memberInfo);
		let usernameInfo = null;
if (this.props.memberInfo.username) {		if (this.props.memberInfo.username) {
userInfo = (		usernameInfo = (
<SingleLine style={this.props.styles.username}>{userText}</SingleLine>		<SingleLine style={this.props.styles.username}>{userText}</SingleLine>
);		);
} else {		} else {
userInfo = (		usernameInfo = (
<SingleLine		<SingleLine
style={[this.props.styles.username, this.props.styles.anonymous]}		style={[this.props.styles.username, this.props.styles.anonymous]}
>		>
{userText}		{userText}
</SingleLine>		</SingleLine>
);		);
}		}

▲ Show 20 Lines • Show All 51 Lines • ▼ Show 20 Lines	const firstItem = this.props.firstListItem
: this.props.styles.topBorder;		: this.props.styles.topBorder;
const lastItem = this.props.lastListItem		const lastItem = this.props.lastListItem
? this.props.styles.lastInnerContainer		? this.props.styles.lastInnerContainer
: null;		: null;
return (		return (
<View style={this.props.styles.container}>		<View style={this.props.styles.container}>
<View style={[this.props.styles.innerContainer, firstItem, lastItem]}>		<View style={[this.props.styles.innerContainer, firstItem, lastItem]}>
<View style={this.props.styles.row}>		<View style={this.props.styles.row}>
{userInfo}		<View style={this.props.styles.userInfoContainer}>
		<Avatar size="small" avatarInfo={avatarInfo} />
		{usernameInfo}
		</View>
{editButton}		{editButton}
</View>		</View>
{roleInfo}		{roleInfo}
</View>		</View>
</View>		</View>
);		);
}		}

▲ Show 20 Lines • Show All 79 Lines • ▼ Show 20 Lines	role: {
flex: 1,		flex: 1,
fontSize: 14,		fontSize: 14,
paddingTop: 4,		paddingTop: 4,
},		},
row: {		row: {
flex: 1,		flex: 1,
flexDirection: 'row',		flexDirection: 'row',
},		},
		userInfoContainer: {
		flex: 1,
		flexDirection: 'row',
		alignItems: 'center',
		},
username: {		username: {
color: 'panelForegroundSecondaryLabel',		color: 'panelForegroundSecondaryLabel',
flex: 1,		flex: 1,
fontSize: 16,		fontSize: 16,
lineHeight: 20,		lineHeight: 20,
		marginLeft: 8,
},		},
};		};

const ConnectedThreadSettingsMember: React.ComponentType<BaseProps> =		const ConnectedThreadSettingsMember: React.ComponentType<BaseProps> =
React.memo<BaseProps>(function ConnectedThreadSettingsMember(		React.memo<BaseProps>(function ConnectedThreadSettingsMember(
props: BaseProps,		props: BaseProps,
) {		) {
const memberID = props.memberInfo.id;		const memberID = props.memberInfo.id;
Show All 34 Lines