Merge pull request #4 from adammcarth/feature/list-item-key-support

Option to specify the react "key" prop for list items
adammcarth · Jan 20, 2020 · 2806832 · 2806832
2 parents a5903db + e2213b7
commit 2806832
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -56,7 +56,7 @@ class Example extends Component {
             { label: 'Option 2' },
           ],
           column2: [
-            { label: 'Option 3' },
+            { label: 'Option 3', key: 'option_3' },
           ],
         }}
       />
@@ -73,7 +73,7 @@ Further examples can be found in [./examples/src](https://github.com/adammcarth/
 
 | Prop                         | Description                                                                    | Default     |
 |------------------------------|--------------------------------------------------------------------------------|-------------|
-| `options`                    | Data to be populated into the picklists. `{columnId: [{label: ''}, ...], ...}` |             |
+| `options`                    | Data to be populated into the picklists. `{columnId: [{label: '', key: ''}, ...], ...}` |             |
 | `visible`                    | Not used by default. Set to `true` or `false` to manually handle visibility.   | `null`      |
 | `defaultSelections`          | Eg: `{columnId: 'label string to auto-select', ...}`                           | `{}`        |
 | `confirmText`                | Text displayed in the top right hand corner.                                   | `'Done'`    |

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-segmented-picker",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A segmentable dropdown picker wheel with no native dependencies.",
   "main": "index.js",
   "scripts": {

diff --git a/src/components/SegmentedPicker/SegmentedPicker.js b/src/components/SegmentedPicker/SegmentedPicker.js
@@ -463,9 +463,13 @@ class SegmentedPicker extends Component {
 
                   <UI.PickerList>
                     <FlatList
-                      data={options[column].map(({ label }) => ({ label, column }))}
+                      data={options[column].map(({ label, key }) => ({
+                        label,
+                        key,
+                        column,
+                      }))}
                       renderItem={this._renderPickerItem}
-                      keyExtractor={item => `${column}_${item.label}`}
+                      keyExtractor={item => `${column}_${item.key || item.label}`}
                       initialNumToRender={40}
                       getItemLayout={(data, index) => (
                         {

diff --git a/src/components/SegmentedPicker/SegmentedPicker.test.js b/src/components/SegmentedPicker/SegmentedPicker.test.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import 'react-native';
+import { FlatList } from 'react-native';
 import renderer from 'react-test-renderer';
 import SegmentedPicker from './SegmentedPicker';
 
@@ -83,6 +83,31 @@ describe('SegmentedPicker', () => {
     );
   });
 
+  it('Sets the react "key" of list items correctly', () => {
+    const column1 = 'column1';
+    const listData = {
+      [column1]: [
+        { label: 'Adam' },
+        { label: 'Francesca', key: 'fran' },
+      ],
+    };
+    const testRenderer = renderer.create(
+      <SegmentedPicker
+        visible
+        options={listData}
+      />,
+    );
+    const testInstance = testRenderer.root;
+    jest.advanceTimersByTime(1000);
+    const {
+      props: { data, keyExtractor: listItemKeyExtractor },
+    } = testInstance.findByType(FlatList);
+    expect(listItemKeyExtractor(data[0]))
+      .toBe(`${column1}_${listData[column1][0].label}`);
+    expect(listItemKeyExtractor(data[1]))
+      .toBe(`${column1}_${listData[column1][1].key}`);
+  });
+
   it('Can be shown and hidden programmatically.', () => {
     const ref = React.createRef();
     renderer.create(