mirror of
https://github.com/status-im/react-native.git
synced 2025-01-10 01:25:39 +00:00
264d67c424
Summary:
Hey there :)
Please let me know if the name `ListEmptyComponent` should be changed. I also thought about `ListNoItemsComponent`. Or maybe `ListPlaceholderComponent`?
- [x] Explain the **motivation** for making this change.
- [x] Provide a **test plan** demonstrating that the code is solid.
- [x] Match the **code formatting** of the rest of the codebase.
- [x] Target the `master` branch, NOT a "stable" branch.
In a FlatList, I wanted to show some placeholder when my data is empty (while keeping eventual Header/Footer/RefreshControl).
A way around this issue would be to do something like adding a `ListHeaderComponent` that checks if the list is empty, like so:
```js
ListHeaderComponent={() => (!data.length ? <Text style={styles.noDataText}>No data found</Text> : null)}
```
But I felt it was not easily readable as soon as you have an actual header.
This PR adds a `ListEmptyComponent` that is rendered when the list is empty.
I added tests for VirtualizedList, FlatList and SectionList and ran `yarn test -- -u`. I then checked that the snapshots changed like I wanted.
I also tested this against one of my project, though I had to manually add my changes because the project is on RN 0.43.
Here are the docs screenshots:
- [VirtualizedList](https://cloud.githubusercontent.com/assets/82368/25566000/0ebf2b82-2dd2-11e7-8b80-d8c505f1f2d6.png)
- [FlatList](https://cloud.githubusercontent.com/assets/82368/25566005/2842ab42-2dd2-11e7-81b4-32c74c2b4fc3.png)
- [SectionList](https://cloud.githubusercontent.com/assets/82368/25566010/368aec1e-2dd2-11e7-9425-3bb5e5803513.png)
Thanks for your work!
Closes https://github.com/facebook/react-native/pull/13718
Differential Revision: D4993711
Pulled By: sahrens
fbshipit-source-id: 055b40f709067071e40308bdf5a37cedaa223dc5
66 lines
1.9 KiB
JavaScript
66 lines
1.9 KiB
JavaScript
/**
|
|
* Copyright (c) 2015-present, Facebook, Inc.
|
|
* All rights reserved.
|
|
*
|
|
* This source code is licensed under the BSD-style license found in the
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
|
*
|
|
*/
|
|
'use strict';
|
|
|
|
jest.disableAutomock();
|
|
|
|
const React = require('React');
|
|
const ReactTestRenderer = require('react-test-renderer');
|
|
|
|
const FlatList = require('FlatList');
|
|
|
|
describe('FlatList', () => {
|
|
it('renders simple list', () => {
|
|
const component = ReactTestRenderer.create(
|
|
<FlatList
|
|
data={[{key: 'i1'}, {key: 'i2'}, {key: 'i3'}]}
|
|
renderItem={({item}) => <item value={item.key} />}
|
|
/>
|
|
);
|
|
expect(component).toMatchSnapshot();
|
|
});
|
|
it('renders empty list', () => {
|
|
const component = ReactTestRenderer.create(
|
|
<FlatList
|
|
data={[]}
|
|
renderItem={({item}) => <item value={item.key} />}
|
|
/>
|
|
);
|
|
expect(component).toMatchSnapshot();
|
|
});
|
|
it('renders null list', () => {
|
|
const component = ReactTestRenderer.create(
|
|
<FlatList
|
|
data={undefined}
|
|
renderItem={({item}) => <item value={item.key} />}
|
|
/>
|
|
);
|
|
expect(component).toMatchSnapshot();
|
|
});
|
|
it('renders all the bells and whistles', () => {
|
|
const component = ReactTestRenderer.create(
|
|
<FlatList
|
|
ItemSeparatorComponent={() => <separator />}
|
|
ListEmptyComponent={() => <empty />}
|
|
ListFooterComponent={() => <footer />}
|
|
ListHeaderComponent={() => <header />}
|
|
data={new Array(5).fill().map((_, ii) => ({id: String(ii)}))}
|
|
keyExtractor={(item, index) => item.id}
|
|
getItemLayout={({index}) => ({length: 50, offset: index * 50})}
|
|
numColumns={2}
|
|
refreshing={false}
|
|
onRefresh={jest.fn()}
|
|
renderItem={({item}) => <item value={item.id} />}
|
|
/>
|
|
);
|
|
expect(component).toMatchSnapshot();
|
|
});
|
|
});
|