Changeset View
Changeset View
Standalone View
Standalone View
native/profile/relationship-list-item.react.js
Show All 9 Lines | import { | ||||
ActivityIndicator, | ActivityIndicator, | ||||
} from 'react-native'; | } from 'react-native'; | ||||
import { | import { | ||||
updateRelationshipsActionTypes, | updateRelationshipsActionTypes, | ||||
updateRelationships, | updateRelationships, | ||||
} from 'lib/actions/relationship-actions.js'; | } from 'lib/actions/relationship-actions.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 type { LoadingStatus } from 'lib/types/loading-types.js'; | import type { LoadingStatus } from 'lib/types/loading-types.js'; | ||||
import { | import { | ||||
type RelationshipRequest, | type RelationshipRequest, | ||||
type RelationshipAction, | type RelationshipAction, | ||||
type RelationshipErrors, | type RelationshipErrors, | ||||
userRelationshipStatus, | userRelationshipStatus, | ||||
relationshipActions, | relationshipActions, | ||||
} from 'lib/types/relationship-types.js'; | } from 'lib/types/relationship-types.js'; | ||||
import type { | import type { | ||||
AccountUserInfo, | AccountUserInfo, | ||||
GlobalAccountUserInfo, | GlobalAccountUserInfo, | ||||
} from 'lib/types/user-types.js'; | } from 'lib/types/user-types.js'; | ||||
import { | import { | ||||
type DispatchActionPromise, | type DispatchActionPromise, | ||||
useServerCall, | useServerCall, | ||||
useDispatchActionPromise, | useDispatchActionPromise, | ||||
} from 'lib/utils/action-utils.js'; | } from 'lib/utils/action-utils.js'; | ||||
import type { RelationshipListNavigate } from './relationship-list.react.js'; | import type { RelationshipListNavigate } from './relationship-list.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 20 Lines • Show All 119 Lines • ▼ Show 20 Lines | ) { | ||||
onPress={this.onSelect} | onPress={this.onSelect} | ||||
style={this.props.styles.editButton} | style={this.props.styles.editButton} | ||||
> | > | ||||
<Text style={this.props.styles.blueAction}>Add</Text> | <Text style={this.props.styles.blueAction}>Add</Text> | ||||
</TouchableOpacity> | </TouchableOpacity> | ||||
); | ); | ||||
} | } | ||||
const avatarInfo = getAvatarForUser(this.props.userInfo); | |||||
return ( | return ( | ||||
<View style={this.props.styles.container}> | <View style={this.props.styles.container}> | ||||
<View style={[this.props.styles.innerContainer, borderBottom]}> | <View style={[this.props.styles.innerContainer, borderBottom]}> | ||||
<Avatar size="small" avatarInfo={avatarInfo} /> | |||||
<SingleLine style={this.props.styles.username}> | <SingleLine style={this.props.styles.username}> | ||||
{this.props.userInfo.username} | {this.props.userInfo.username} | ||||
</SingleLine> | </SingleLine> | ||||
{editButton} | {editButton} | ||||
</View> | </View> | ||||
</View> | </View> | ||||
); | ); | ||||
} | } | ||||
▲ Show 20 Lines • Show All 111 Lines • ▼ Show 20 Lines | const unboundStyles = { | ||||
editButtonWithMargin: { | editButtonWithMargin: { | ||||
marginLeft: 15, | marginLeft: 15, | ||||
}, | }, | ||||
username: { | username: { | ||||
color: 'panelForegroundSecondaryLabel', | color: 'panelForegroundSecondaryLabel', | ||||
flex: 1, | flex: 1, | ||||
fontSize: 16, | fontSize: 16, | ||||
lineHeight: 20, | lineHeight: 20, | ||||
marginLeft: 8, | |||||
}, | }, | ||||
blueAction: { | blueAction: { | ||||
color: 'link', | color: 'link', | ||||
fontSize: 16, | fontSize: 16, | ||||
paddingLeft: 6, | paddingLeft: 6, | ||||
}, | }, | ||||
redAction: { | redAction: { | ||||
color: 'redText', | color: 'redText', | ||||
Show All 36 Lines |