Merge pull request #33 from reberhardt7/fix-refs

Pass ref from Header and Item onto components
evetstech · Aug 30, 2017 · e4e2418 · e4e2418
2 parents d454a24 + a9b46ec
commit e4e2418
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -74,6 +74,7 @@ The following props are used:
 |-------------|-----------------------------------------|------------------------|
 | headerText  | Text for the header                     | React.PropTypes.string |
 | headerStyle | Sets border color for the settings list | Text.propTypes.style   |
+| headerRef   | Sets a `ref` on the header component    | React.PropTypes.func   |
 
 ### <a name='sli'>\<SettingsList.Item></a>
 The following props are used:
@@ -98,6 +99,7 @@ The following props are used:
 | isAuth              | Sets item as an authorization item                                                                       | React.PropTypes.bool   |
 | authPropsUser       | Changes the props for the first TextInput component; overwrites default                                  | React.PropTypes.node   |
 | authPropsPW         | Changes the props for the second TextInput component; overwrites default                                 | React.PropTypes.node   |
+| itemRef             | Sets a `ref` on the TouchableHighlight that SettingsList.Item renders to                                 | React.PropTypes.func   |
 
 ###### <a href='#top'>Top</a>
 

diff --git a/index.js b/index.js
@@ -95,7 +95,7 @@ class SettingsList extends React.Component {
       return (
         <View key={'group_' + index}>
           {group.other}
-          <Text style={[{margin:5},group.header.headerStyle]} numberOfLines={group.header.headerNumberOfLines} ellipsizeMode="tail">{group.header.headerText}</Text>
+          <Text style={[{margin:5},group.header.headerStyle]} numberOfLines={group.header.headerNumberOfLines} ellipsizeMode="tail" ref={group.header.headerRef}>{group.header.headerText}</Text>
           <View style={{borderTopWidth:1, borderBottomWidth:1, borderColor: this.props.borderColor}}>
             {group.items.map((item, index) => {
               return this._itemView(item,index, group.items.length);
@@ -175,7 +175,7 @@ class SettingsList extends React.Component {
     let titleInfoPosition = item.titleInfoPosition ? item.titleInfoPosition : this.props.defaultTitleInfoPosition;
 
     return (
-      <TouchableHighlight accessible={false} key={'item_' + index} underlayColor={item.underlayColor ? item.underlayColor : this.props.underlayColor} onPress={item.onPress} onLongPress={item.onLongPress}>
+      <TouchableHighlight accessible={false} key={'item_' + index} underlayColor={item.underlayColor ? item.underlayColor : this.props.underlayColor} onPress={item.onPress} onLongPress={item.onLongPress} ref={item.itemRef}>
         <View style={item.itemBoxStyle ? item.itemBoxStyle : [styles.itemBox, {backgroundColor: item.backgroundColor ? item.backgroundColor : this.props.backgroundColor}]}>
           {item.icon}
           {item.isAuth ?
@@ -274,6 +274,7 @@ SettingsList.Header = React.createClass({
   propTypes: {
     headerText: PropTypes.string,
     headerStyle: Text.propTypes.style,
+    headerRef: React.PropTypes.func,
     headerNumberOfLines: React.PropTypes.number,
   },
   getDefaultProps() {
@@ -385,6 +386,9 @@ SettingsList.Item = React.createClass({
      */
     rightSideContent: PropTypes.node,
     /* Gives opens to hide specific borders */
+    borderHide: React.PropTypes.oneOf(['Top', 'Bottom', 'Both']),
+
+    itemRef: React.PropTypes.func,
     borderHide: PropTypes.oneOf(['Top', 'Bottom', 'Both'])
   },
   getDefaultProps(){