Add prop for rendering a header above the list

peacechen · Sep 10, 2021 · 852b575 · 852b575
1 parent 16b14dd
commit 852b575
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -174,6 +174,7 @@ Prop                | Type     | Optional | Default      | Description
 `enableShortPress`          | bool   | Yes | true               | enables short press. This is regular touch behavior.
 `enableLongPress`           | bool   | Yes | false              | enables long press. When true, `onModalOpen` returns `{longPress: true}`
 `optionsTestIDPrefix`       | string   | Yes | `'default'`      | This prefixes each selectable option's testID prop if no testID keys are provided in `props.data` array objects. Default for each option's testID: 'default-\<optionLabel\>'
+`header`     | node   | Yes | undefined          | Render a header above the list
 
 ### Methods
 

diff --git a/SampleApp/App.tsx b/SampleApp/App.tsx
@@ -129,6 +129,29 @@ export const SampleApp = () => {
         }}
         componentExtractor={(option) => <ListItem data={option} />}
       />
+
+      {/* With a fixed header at the top of the list  */}
+      <ModalSelector
+        data={countryList}
+        keyExtractor={(x) => x.name}
+        labelExtractor={(x) => x.name}
+        initValue="listType without FlatList"
+        initValueTextStyle={{ color: "black" }}
+        selectStyle={{ borderColor: "black" }}
+        selectTextStyle={{ color: "blue" }}
+        onChange={(option) => {
+          setTextInputValue(option.name);
+        }}
+        componentExtractor={(option) => <ListItem data={option} />}
+        header={
+          <View style={{ padding: 16, alignItems: 'center' }}>
+            <Text style={{ fontSize: 16, color: 'black' }}>What country would you pick?</Text>
+            <Text style={{ fontSize: 13, color: '#bbbbbb' }}>
+              Please, select an option
+            </Text>
+          </View>
+        }
+      />
     </View>
   );
 };

diff --git a/index.d.ts b/index.d.ts
@@ -367,6 +367,11 @@ interface IModalSelectorProps<TOption> {
    * Default for each option's testID: 'default-<optionLabel>'
    */
   optionsTestIDPrefix?: string;
+
+  /**
+   * Render a header above the list
+   */
+   header?: React.ReactNode;
 
 }
 

diff --git a/index.js b/index.js
@@ -76,6 +76,7 @@ const propTypes = {
     enableShortPress:               PropTypes.bool,
     enableLongPress:                PropTypes.bool,
     optionsTestIDPrefix:            PropTypes.string,
+    header:                         PropTypes.node,
 };
 
 const defaultProps = {
@@ -130,6 +131,7 @@ const defaultProps = {
     enableShortPress:               true,
     enableLongPress:                false,
     optionsTestIDPrefix:            'default',
+    header:                         undefined,
 };
 
 export default class ModalSelector extends React.Component {
@@ -278,6 +280,7 @@ export default class ModalSelector extends React.Component {
             cancelStyle,
             cancelTextStyle,
             cancelText,
+            header,
         } = this.props;
 
         let options = data.map((item, index) => {
@@ -310,6 +313,7 @@ export default class ModalSelector extends React.Component {
             <Overlay {...overlayProps}>
                 <View style={[styles.overlayStyle, overlayStyle]}>
                     <View style={[styles.optionContainer, optionContainerStyle]}>
+                        {header}
                         {listType === 'FLATLIST'?
                             <FlatList
                                 data={data}