Skip to content
This repository was archived by the owner on Feb 23, 2021. It is now read-only.

Make list headers sticky #700

Merged
merged 6 commits into from Oct 4, 2018
Merged

Make list headers sticky #700

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a53eda7
Add stickyHeaderIndices prop to List component
Sep 20, 2018
c88a525
Make channel list header sticky
Sep 20, 2018
c76a759
Make notification list header sticky
Sep 20, 2018
38bc300
Make transactions list header sticky
Sep 20, 2018
faaf3b0
Force sticky headers for all list components
Oct 3, 2018
6f26669
Add background color to list header in List story
Oct 4, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/component/list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ export class List extends Component {
ref={component => (this.list = component)}
dataSource={this.dataSource}
renderHeader={this.props.renderHeader}
stickyHeaderIndices={[0]}
Copy link
Contributor

@tanx tanx Oct 4, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since we're setting this globally for all List instances, we'll also need to add style={{ backgroundColor: color.white }} to the ListHeader in list-story in storybook.

Copy link
Author

@ghost ghost Oct 4, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

renderRow={this.props.renderItem}
enableEmptySections={true}
/>
Expand Down
7 changes: 5 additions & 2 deletions src/view/channel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ const ChannelList = ({ store, channel }) => {
<ListContent>
<List
data={channels}
renderHeader={() => <ChannelListHeader />}
renderHeader={ChannelListHeader}
renderItem={item => (
<ChannelListItem
ch={item}
Expand Down Expand Up @@ -259,10 +259,13 @@ const hStyles = StyleSheet.create({
color: color.greyListHeader,
fontSize: font.sizeXS,
},
header: {
backgroundColor: color.blackDark,
},
});

const ChannelListHeader = () => (
<ListHeader>
<ListHeader style={hStyles.header}>
<Text style={[iStyles.m, hStyles.txt]}>STATUS</Text>
<Text style={[iStyles.m, hStyles.txt]}>CAPACITY</Text>
<Text style={[iStyles.l, hStyles.txt]}>FUNDING TRANSACTION ID</Text>
Expand Down
7 changes: 5 additions & 2 deletions src/view/notification.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const NotificationView = ({ store, nav }) => {
<ListContent>
<List
data={notifications}
renderHeader={() => <NotificationListHeader />}
renderHeader={NotificationListHeader}
renderItem={item => <NotificationListItem item={item} />}
/>
</ListContent>
Expand Down Expand Up @@ -96,10 +96,13 @@ const hStyles = StyleSheet.create({
color: color.greyListHeader,
fontSize: font.sizeXS,
},
header: {
backgroundColor: color.blackDark,
},
});

const NotificationListHeader = () => (
<ListHeader>
<ListHeader style={hStyles.header}>
<Text style={[iStyles.s, hStyles.txt]}>TYPE</Text>
<Text style={[iStyles.m, hStyles.txt]}>TIME</Text>
<Text style={[iStyles.l, hStyles.txt]}>DESCRIPTION</Text>
Expand Down
7 changes: 5 additions & 2 deletions src/view/transaction.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const TransactionView = ({ store, nav, transaction }) => {
<ListContent>
<List
data={transactions}
renderHeader={() => <TransactionListHeader />}
renderHeader={TransactionListHeader}
renderItem={item => (
<TransactionListItem
tx={item}
Expand Down Expand Up @@ -123,10 +123,13 @@ const hStyles = StyleSheet.create({
color: color.greyListHeader,
fontSize: font.sizeXS,
},
header: {
backgroundColor: color.blackDark,
},
});

const TransactionListHeader = () => (
<ListHeader style={iStyles.item}>
<ListHeader style={[iStyles.item, hStyles.header]}>
<View style={iStyles.i} />
<Text style={[iStyles.m, hStyles.txt]}>STATUS</Text>
<Text style={[iStyles.m, hStyles.txt]}>DATE</Text>
Expand Down
2 changes: 1 addition & 1 deletion stories/component/list-story.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ storiesOf('List', module).add('List Content', () => (
<List
data={[...Array(1000)].map((x, i) => ({ id: String(i), data: 'foo' }))}
renderHeader={() => (
<ListHeader>
<ListHeader style={{ backgroundColor: color.white }}>
<Text style={{ flex: 1, color: color.greyText }}>ID</Text>
<Text style={{ flex: 1, color: color.greyText }}>Data</Text>
</ListHeader>
Expand Down