kylefang/devhub
1
0
Fork 0
mirror of https://github.com/zhigang1992/devhub.git synced 2026-06-18 03:58:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix showAvatarAsIcon

Browse Source
This commit is contained in:
Bruno Lemos
2018-10-17 05:13:58 -03:00
parent 9036630315
commit 3a4dee1655
4 changed files with 65 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/components/columns/ColumnHeaderItem.tsx
View File

@@ -25,19 +25,20 @@ import { UserConsumer } from '../context/UserContext'
export const columnHeaderItemContentSize = 20
export interface ColumnHeaderItemProps {
avatarDetails?: {
owner: string
repo?: string
}
avatarShape?: AvatarProps['shape']
avatarStyle?: StyleProp<ImageStyle>
iconName?: GithubIcon
iconStyle?: StyleProp<TextStyle>
onPress?: () => void
repo?: string
showAvatarAsIcon?: boolean
style?: StyleProp<ViewStyle>
subtitle?: string
subtitleStyle?: StyleProp<TextStyle>
title?: string
titleStyle?: StyleProp<TextStyle>
username?: string
}
const styles = StyleSheet.create({
@@ -80,24 +81,26 @@ export class ColumnHeaderItem extends PureComponent<ColumnHeaderItemProps> {
render() {
const {
avatarDetails,
avatarShape,
avatarStyle,
iconName,
iconStyle,
repo,
showAvatarAsIcon,
subtitle,
subtitleStyle,
title,
titleStyle,
username: _username,
} = this.props
return (
<UserConsumer>
{({ user }) => {
const username =
user && user.login === _username ? undefined : _username
avatarDetails &&
avatarDetails.owner &&
!(user && user.login === avatarDetails.owner)
? avatarDetails.owner
: undefined
const smallAvatarSpacing = 5
@@ -106,7 +109,7 @@ export class ColumnHeaderItem extends PureComponent<ColumnHeaderItemProps> {
{({ theme }) => (
<ConditionalWrap condition wrap={this.wrap}>
<>
{(!!iconName || (showAvatarAsIcon && !!username)) && (
{(!!iconName || !!username) && (
<View
style={{
position: 'relative',
@@ -115,10 +118,7 @@ export class ColumnHeaderItem extends PureComponent<ColumnHeaderItemProps> {
justifyContent: 'center',
marginRight:
title || subtitle
? 8 +
(showAvatarAsIcon && username
? smallAvatarSpacing
: 0)
? 8 + (username ? smallAvatarSpacing : 0)
: 0,
}}
>
@@ -130,46 +130,44 @@ export class ColumnHeaderItem extends PureComponent<ColumnHeaderItemProps> {
style={[styles.icon, iconStyle]}
/>
{showAvatarAsIcon &&
!!username && (
<Avatar
hitSlop={{
top:
columnHeaderItemContentSize +
smallAvatarSpacing,
bottom: smallAvatarSpacing,
left:
columnHeaderItemContentSize / 2 +
smallAvatarSpacing,
right:
columnHeaderItemContentSize / 2 +
smallAvatarSpacing,
}}
isBot={false}
linkURL=""
repo={repo}
shape={avatarShape}
style={[
{
position: 'absolute',
bottom: 0,
marginLeft: smallAvatarSpacing,
width: 10,
height: 10,
},
avatarStyle,
]}
username={username}
/>
)}
{!!username && (
<Avatar
hitSlop={{
top:
columnHeaderItemContentSize +
smallAvatarSpacing,
bottom: smallAvatarSpacing,
left:
columnHeaderItemContentSize / 2 +
smallAvatarSpacing,
right:
columnHeaderItemContentSize / 2 +
smallAvatarSpacing,
}}
isBot={false}
linkURL=""
repo={avatarDetails && avatarDetails.repo}
shape={avatarShape}
style={[
{
position: 'absolute',
bottom: 0,
marginLeft: smallAvatarSpacing,
width: 10,
height: 10,
},
avatarStyle,
]}
username={username}
/>
)}
</>
) : (
showAvatarAsIcon &&
!!username && (
<Avatar
isBot={false}
linkURL=""
repo={repo}
repo={avatarDetails && avatarDetails.repo}
shape={avatarShape}
style={[
{

16
src/components/columns/EventColumn.tsx
View File

@@ -5,7 +5,6 @@ import EventCardsContainer, {
EventCardsContainerProps,
} from '../../containers/EventCardsContainer'
import { getColumnHeaderDetails } from '../../utils/helpers/github/events'
import { getOwnerAndRepo } from '../../utils/helpers/github/shared'
import CardItemSeparator from '../cards/partials/CardItemSeparator'
import Column from './Column'
import { ColumnHeader } from './ColumnHeader'
@@ -32,28 +31,15 @@ export default class EventColumn extends PureComponent<
<Column>
<ColumnHeader>
<ColumnHeaderItem
avatarDetails={requestTypeIconAndData.avatarDetails}
iconName={requestTypeIconAndData.icon}
repo={
'username' in column.params
? getOwnerAndRepo(column.params.username).repo
: undefined
}
showAvatarAsIcon={requestTypeIconAndData.showAvatarAsIcon}
subtitle={requestTypeIconAndData.subtitle}
title={requestTypeIconAndData.title}
username={
'username' in column.params
? getOwnerAndRepo(column.params.username).owner
: undefined
}
/>
<FlexSeparator />
<ColumnHeaderItem
iconName="chevron-down"
onPress={this.handlePress}
username={
'username' in column.params ? column.params.username : undefined
}
/>
</ColumnHeader>

13
src/components/layout/LeftSidebar.tsx
View File

@@ -9,7 +9,6 @@ import {
import { NavigationScreenProps } from 'react-navigation'
import { getColumnHeaderDetails } from '../../utils/helpers/github/events'
import { getOwnerAndRepo } from '../../utils/helpers/github/shared'
import { columnHeaderHeight } from '../columns/ColumnHeader'
import { ColumnHeaderItem } from '../columns/ColumnHeaderItem'
import Avatar from '../common/Avatar'
@@ -95,16 +94,10 @@ class LeftSidebarComponent extends PureComponent<
]}
>
<ColumnHeaderItem
avatarDetails={
requestTypeIconAndData.avatarDetails
}
iconName={requestTypeIconAndData.icon}
showAvatarAsIcon={
requestTypeIconAndData.showAvatarAsIcon
}
username={
'username' in column.params
? getOwnerAndRepo(column.params.username)
.owner
: undefined
}
/>
</View>
)

28
src/utils/helpers/github/events.ts
View File

@@ -22,8 +22,11 @@ import {
export function getColumnHeaderDetails(
column: Column,
): {
avatarDetails?: {
owner: string
repo?: string
}
icon: GithubIcon
showAvatarAsIcon?: boolean
subtitle?: string
title: string
} {
@@ -32,8 +35,8 @@ export function getColumnHeaderDetails(
switch (column.subtype) {
case 'ORG_PUBLIC_EVENTS': {
return {
avatarDetails: { owner: column.params.org },
icon: 'organization',
showAvatarAsIcon: true,
subtitle: 'Events',
title: column.params.org,
}
@@ -47,32 +50,38 @@ export function getColumnHeaderDetails(
}
case 'REPO_EVENTS': {
return {
avatarDetails: {
owner: column.params.owner,
repo: column.params.repo,
},
icon: 'repo',
showAvatarAsIcon: true,
subtitle: 'Events',
title: column.params.repo,
}
}
case 'REPO_NETWORK_EVENTS': {
return {
avatarDetails: {
owner: column.params.owner,
repo: column.params.repo,
},
icon: 'repo',
showAvatarAsIcon: true,
subtitle: 'Network',
title: column.params.repo,
}
}
case 'USER_EVENTS': {
return {
avatarDetails: { owner: column.params.username },
icon: 'person',
showAvatarAsIcon: true,
subtitle: 'Activity',
title: column.params.username,
}
}
case 'USER_ORG_EVENTS': {
return {
avatarDetails: { owner: column.params.org },
icon: 'organization',
showAvatarAsIcon: true,
subtitle: 'Activity',
title: column.params.org,
}
@@ -81,8 +90,8 @@ export function getColumnHeaderDetails(
case 'USER_RECEIVED_EVENTS':
case 'USER_RECEIVED_PUBLIC_EVENTS': {
return {
avatarDetails: { owner: column.params.username },
icon: 'person',
showAvatarAsIcon: true,
subtitle: 'Activity',
title: column.params.username,
}
@@ -94,7 +103,6 @@ export function getColumnHeaderDetails(
)
return {
icon: 'mark-github',
showAvatarAsIcon: false,
subtitle: (column as any).subtype || '',
title: 'Unknown',
}
@@ -105,9 +113,8 @@ export function getColumnHeaderDetails(
case 'notifications': {
return {
icon: 'bell',
showAvatarAsIcon: false,
title: 'Notifications',
subtitle: column.params.all ? 'All' : '',
title: 'Notifications',
}
}
@@ -116,7 +123,6 @@ export function getColumnHeaderDetails(
console.error(`Invalid column type: '${(column as any).type}'.`)
return {
icon: 'mark-github',
showAvatarAsIcon: false,
subtitle: (column as any).type || '',
title: 'Unknown',
}