Enable React.memo for card components

This commit is contained in:
Bruno Lemos
2018-12-06 02:12:59 -02:00
parent fb16da9a85
commit 4e96d7d5ec
12 changed files with 103 additions and 101 deletions

View File

@@ -20,7 +20,7 @@ export interface BranchRowProps {
export interface BranchRowState {}
export function BranchRow(props: BranchRowProps) {
export const BranchRow = React.memo((props: BranchRowProps) => {
const theme = useTheme()
const {
@@ -84,4 +84,4 @@ export function BranchRow(props: BranchRowProps) {
</View>
</View>
)
}
})

View File

@@ -24,7 +24,7 @@ export interface CommentRowProps {
export interface CommentRowState {}
export function CommentRow(props: CommentRowProps) {
export const CommentRow = React.memo((props: CommentRowProps) => {
const theme = useTheme()
const {
@@ -87,4 +87,4 @@ export function CommentRow(props: CommentRowProps) {
</View>
</View>
)
}
})

View File

@@ -11,7 +11,7 @@ export interface CommitListRowProps {
commits: GitHubPushedCommit[]
}
export function CommitListRow(props: CommitListRowProps) {
export const CommitListRow = React.memo((props: CommitListRowProps) => {
const renderItem: RenderItem<GitHubPushedCommit> = ({
showMoreItemsIndicator,
item: commit,
@@ -36,4 +36,4 @@ export function CommitListRow(props: CommitListRowProps) {
if (!(commits && commits.length > 0)) return null
return <RowList {...otherProps} data={commits} renderItem={renderItem} />
}
})

View File

@@ -30,7 +30,7 @@ export interface CommitRowProps {
export interface CommitRowState {}
export function CommitRow(props: CommitRowProps) {
export const CommitRow = React.memo((props: CommitRowProps) => {
const theme = useTheme()
const {
@@ -121,4 +121,4 @@ export function CommitRow(props: CommitRowProps) {
</View>
</View>
)
}
})

View File

@@ -35,89 +35,91 @@ const styles = StyleSheet.create({
},
})
export function IssueOrPullRequestRow(props: IssueOrPullRequestRowProps) {
const theme = useTheme()
export const IssueOrPullRequestRow = React.memo(
(props: IssueOrPullRequestRowProps) => {
const theme = useTheme()
const {
addBottomAnchor,
avatarURL,
iconColor,
iconName,
isRead,
issueOrPullRequestNumber,
smallLeftColumn,
title: _title,
url,
userLinkURL,
username,
} = props
const {
addBottomAnchor,
avatarURL,
iconColor,
iconName,
isRead,
issueOrPullRequestNumber,
smallLeftColumn,
title: _title,
url,
userLinkURL,
username,
} = props
const title = trimNewLinesAndSpaces(_title)
if (!title) return null
const title = trimNewLinesAndSpaces(_title)
if (!title) return null
const byText = username ? `@${username}` : ''
const byText = username ? `@${username}` : ''
return (
<View style={getCardRowStylesForTheme(theme).container}>
<View
style={[
getCardStylesForTheme(theme).leftColumn,
smallLeftColumn
? getCardStylesForTheme(theme).leftColumn__small
: getCardStylesForTheme(theme).leftColumn__big,
]}
>
{Boolean(username) && (
<Avatar
avatarURL={avatarURL}
isBot={Boolean(username && username.indexOf('[bot]') >= 0)}
linkURL={userLinkURL}
small
style={getCardStylesForTheme(theme).avatar}
username={username}
/>
)}
</View>
<View style={getCardStylesForTheme(theme).rightColumn}>
<Link
href={fixURL(url, {
addBottomAnchor,
issueOrPullRequestNumber,
})}
style={getCardRowStylesForTheme(theme).mainContentContainer}
return (
<View style={getCardRowStylesForTheme(theme).container}>
<View
style={[
getCardStylesForTheme(theme).leftColumn,
smallLeftColumn
? getCardStylesForTheme(theme).leftColumn__small
: getCardStylesForTheme(theme).leftColumn__big,
]}
>
<Text
numberOfLines={1}
style={[
defaultStyles.full,
getCardStylesForTheme(theme).normalText,
isRead && getCardStylesForTheme(theme).mutedText,
]}
>
<Icon color={iconColor} name={iconName} /> {title}
{Boolean(byText) && (
<Text
style={[
getCardStylesForTheme(theme).normalText,
getCardStylesForTheme(theme).smallText,
getCardStylesForTheme(theme).mutedText,
]}
>
{' '}
by {byText}
</Text>
)}
</Text>
</Link>
{Boolean(username) && (
<Avatar
avatarURL={avatarURL}
isBot={Boolean(username && username.indexOf('[bot]') >= 0)}
linkURL={userLinkURL}
small
style={getCardStylesForTheme(theme).avatar}
username={username}
/>
)}
</View>
<CardItemId
id={issueOrPullRequestNumber}
isRead={isRead}
style={styles.cardItemId}
url={url}
/>
<View style={getCardStylesForTheme(theme).rightColumn}>
<Link
href={fixURL(url, {
addBottomAnchor,
issueOrPullRequestNumber,
})}
style={getCardRowStylesForTheme(theme).mainContentContainer}
>
<Text
numberOfLines={1}
style={[
defaultStyles.full,
getCardStylesForTheme(theme).normalText,
isRead && getCardStylesForTheme(theme).mutedText,
]}
>
<Icon color={iconColor} name={iconName} /> {title}
{Boolean(byText) && (
<Text
style={[
getCardStylesForTheme(theme).normalText,
getCardStylesForTheme(theme).smallText,
getCardStylesForTheme(theme).mutedText,
]}
>
{' '}
by {byText}
</Text>
)}
</Text>
</Link>
<CardItemId
id={issueOrPullRequestNumber}
isRead={isRead}
style={styles.cardItemId}
url={url}
/>
</View>
</View>
</View>
)
}
)
},
)

View File

@@ -29,7 +29,7 @@ export interface ReleaseRowProps {
export interface ReleaseRowState {}
export function ReleaseRow(props: ReleaseRowProps) {
export const ReleaseRow = React.memo((props: ReleaseRowProps) => {
const theme = useTheme()
const {
@@ -169,4 +169,4 @@ export function ReleaseRow(props: ReleaseRowProps) {
)}
</View>
)
}
})

View File

@@ -15,7 +15,7 @@ export interface RepositoryListRowProps {
repos: GitHubRepo[]
}
export function RepositoryListRow(props: RepositoryListRowProps) {
export const RepositoryListRow = React.memo((props: RepositoryListRowProps) => {
const renderItem: RenderItem<GitHubRepo> = ({
item: repo,
showMoreItemsIndicator,
@@ -45,4 +45,4 @@ export function RepositoryListRow(props: RepositoryListRowProps) {
if (!(repos && repos.length > 0)) return null
return <RowList {...otherProps} data={repos} renderItem={renderItem} />
}
})

View File

@@ -22,7 +22,7 @@ export interface RepositoryRowProps {
export interface RepositoryRowState {}
export function RepositoryRow(props: RepositoryRowProps) {
export const RepositoryRow = React.memo((props: RepositoryRowProps) => {
const theme = useTheme()
const {
@@ -102,4 +102,4 @@ export function RepositoryRow(props: RepositoryRowProps) {
</View>
</View>
)
}
})

View File

@@ -11,7 +11,7 @@ export interface UserListRowProps {
users: GitHubUser[]
}
export function UserListRow(props: UserListRowProps) {
export const UserListRow = React.memo((props: UserListRowProps) => {
const renderItem: RenderItem<GitHubUser> = ({
item: user,
showMoreItemsIndicator,
@@ -35,4 +35,4 @@ export function UserListRow(props: UserListRowProps) {
if (!(users && users.length > 0)) return null
return <RowList {...otherProps} data={users} renderItem={renderItem} />
}
})

View File

@@ -19,7 +19,7 @@ export interface UserRowProps {
export interface UserRowState {}
export function UserRow(props: UserRowProps) {
export const UserRow = React.memo((props: UserRowProps) => {
const theme = useTheme()
const {
@@ -69,4 +69,4 @@ export function UserRow(props: UserRowProps) {
</View>
</View>
)
}
})

View File

@@ -10,7 +10,7 @@ export interface WikiPageListRowProps {
pages: GitHubPage[]
}
export function WikiPageListRow(props: WikiPageListRowProps) {
export const WikiPageListRow = React.memo((props: WikiPageListRowProps) => {
const renderItem: RenderItem<GitHubPage> = ({
item: page,
showMoreItemsIndicator,
@@ -33,4 +33,4 @@ export function WikiPageListRow(props: WikiPageListRowProps) {
if (!(pages && pages.length > 0)) return null
return <RowList {...otherProps} data={pages} renderItem={renderItem} />
}
})

View File

@@ -20,7 +20,7 @@ export interface WikiPageRowProps {
export interface WikiPageRowState {}
export function WikiPageRow(props: WikiPageRowProps) {
export const WikiPageRow = React.memo((props: WikiPageRowProps) => {
const theme = useTheme()
const {
@@ -75,4 +75,4 @@ export function WikiPageRow(props: WikiPageRowProps) {
</View>
</View>
)
}
})