Changeset View
Changeset View
Standalone 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 |