Differential D7099 Diff 23944 native/chat/settings/thread-settings-member.react.js

Changeset View

Standalone View

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

Show All 39 Lines
import {		import {
OverlayContext,		OverlayContext,
type OverlayContextType,		type OverlayContextType,
} from '../../navigation/overlay-context.js';		} from '../../navigation/overlay-context.js';
import { ThreadSettingsMemberTooltipModalRouteName } from '../../navigation/route-names.js';		import { ThreadSettingsMemberTooltipModalRouteName } from '../../navigation/route-names.js';
import { useSelector } from '../../redux/redux-utils.js';		import { useSelector } from '../../redux/redux-utils.js';
import { type Colors, useColors, useStyles } from '../../themes/colors.js';		import { type Colors, useColors, useStyles } from '../../themes/colors.js';
import type { VerticalBounds } from '../../types/layout-types.js';		import type { VerticalBounds } from '../../types/layout-types.js';
		import { useShouldRenderAvatars } from '../../utils/avatar-utils.js';

type BaseProps = {		type BaseProps = {
+memberInfo: RelativeMemberInfo,		+memberInfo: RelativeMemberInfo,
+threadInfo: ThreadInfo,		+threadInfo: ThreadInfo,
+canEdit: boolean,		+canEdit: boolean,
+navigate: ThreadSettingsNavigate,		+navigate: ThreadSettingsNavigate,
+firstListItem: boolean,		+firstListItem: boolean,
+lastListItem: boolean,		+lastListItem: boolean,
+verticalBounds: ?VerticalBounds,		+verticalBounds: ?VerticalBounds,
+threadSettingsRouteKey: string,		+threadSettingsRouteKey: string,
};		};
type Props = {		type Props = {
...BaseProps,		...BaseProps,
// Redux state		// Redux state
+removeUserLoadingStatus: LoadingStatus,		+removeUserLoadingStatus: LoadingStatus,
+changeRoleLoadingStatus: LoadingStatus,		+changeRoleLoadingStatus: LoadingStatus,
+colors: Colors,		+colors: Colors,
+styles: typeof unboundStyles,		+styles: typeof unboundStyles,
// withKeyboardState		// withKeyboardState
+keyboardState: ?KeyboardState,		+keyboardState: ?KeyboardState,
// withOverlayContext		// withOverlayContext
+overlayContext: ?OverlayContextType,		+overlayContext: ?OverlayContextType,
		+shouldRenderAvatars: boolean,
};		};
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);
const avatarInfo = getAvatarForUser(this.props.memberInfo);		const avatarInfo = getAvatarForUser(this.props.memberInfo);

		const marginLeftStyle = {
		marginLeft: this.props.shouldRenderAvatars ? 8 : 0,
		};

let usernameInfo = null;		let usernameInfo = null;
if (this.props.memberInfo.username) {		if (this.props.memberInfo.username) {
usernameInfo = (		usernameInfo = (
<SingleLine style={this.props.styles.username}>{userText}</SingleLine>		<SingleLine style={[this.props.styles.username, marginLeftStyle]}>
		{userText}
		</SingleLine>
);		);
} else {		} else {
usernameInfo = (		usernameInfo = (
<SingleLine		<SingleLine
style={[this.props.styles.username, this.props.styles.anonymous]}		style={[
		this.props.styles.username,
		this.props.styles.anonymous,
		marginLeftStyle,
		]}
>		>
{userText}		{userText}
</SingleLine>		</SingleLine>
);		);
}		}

let editButton = null;		let editButton = null;
if (		if (
▲ Show 20 Lines • Show All 158 Lines • ▼ Show 20 Lines	userInfoContainer: {
flexDirection: 'row',		flexDirection: 'row',
alignItems: 'center',		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 11 Lines	) {
);		);

const [memberInfo] = useENSNames([props.memberInfo]);		const [memberInfo] = useENSNames([props.memberInfo]);

const colors = useColors();		const colors = useColors();
const styles = useStyles(unboundStyles);		const styles = useStyles(unboundStyles);
const keyboardState = React.useContext(KeyboardContext);		const keyboardState = React.useContext(KeyboardContext);
const overlayContext = React.useContext(OverlayContext);		const overlayContext = React.useContext(OverlayContext);
		const shouldRenderAvatars = useShouldRenderAvatars();

return (		return (
<ThreadSettingsMember		<ThreadSettingsMember
{...props}		{...props}
memberInfo={memberInfo}		memberInfo={memberInfo}
removeUserLoadingStatus={removeUserLoadingStatus}		removeUserLoadingStatus={removeUserLoadingStatus}
changeRoleLoadingStatus={changeRoleLoadingStatus}		changeRoleLoadingStatus={changeRoleLoadingStatus}
colors={colors}		colors={colors}
styles={styles}		styles={styles}
keyboardState={keyboardState}		keyboardState={keyboardState}
overlayContext={overlayContext}		overlayContext={overlayContext}
		shouldRenderAvatars={shouldRenderAvatars}
/>		/>
);		);
});		});

export default ConnectedThreadSettingsMember;		export default ConnectedThreadSettingsMember;