UnPourTous / react-native-search-list

A searchable ListView which supports Chinese PinYin and alphabetical index.
https://github.com/UnPourTous/react-native-search-list
159 stars 66 forks source link

How can I select a row i need selected items #11

Open cyclone747 opened 6 years ago

cyclone747 commented 6 years ago

Is there any option ?? I am getting selected items but i cannot add Active class to it ..

I have added a indexNum and isSelected(bool) to my array

renderRow (item, sectionID, rowID, highlightRowFunc, isSearching) {
          return (
            <Touchable onPress={() => {
              this.addToSelectedItem(item.indexNum);
            }}>
              <View key={rowID} style={{flex: 1, marginLeft: 20, height: rowHeight, justifyContent: 'center'}}>
                  <View style={this.state.dataSource[item.indexNum].isSelected ? {backgroundColor:'red'} : null}>
                    <HighlightableText
                      matcher={item.matcher}
                      text={item.searchStr}
                      textColor={'#000'}
                      hightlightTextColor={'#0069c0'}
                    />
                  </View>

              </View>
            </Touchable>
          )
        }

it is selecting after a hot re-load .

erichua23 commented 6 years ago

Custom your own renderRow and use a flag in the row data item may help.

Phuzer commented 6 years ago

@erichua23 can you give a hint how to do that? I'm stuck there as well. I have a "selected" flag that changes when the row is selected, but i noticed that the function renderRow never gets called (re-rendered) when i use forceUpdate() inside selectItem function. The only time the background of the selected row changes, is when i'm searching (keyboard opened). Is this a bug or something is missing?

QuYunFengg commented 6 years ago

@Phuzer Have you solved this problem? I have the same problem now.

tong233 commented 6 years ago

It works for me

  pressItem = item => {
    let index = this.state.dataSource.findIndex(element => {
      return element.id === item.id
    })
    if (index === -1) return
    const { dataSource } = this.state
    const data = immutable(dataSource, {
      [index]: { checked: { $set: !item.checked } }
    })
    this.setState({ dataSource: data })
  }

  renderRow = (item, sectionID, rowID, highlightRowFunc, isSearching) => {
    return (
      <TouchableOpacity onPress={() => this.pressItem(item)}>
        <View
          key={rowID}
          style={{
            flex: 1,
            marginLeft: 20,
            height: rowHeight,
            justifyContent: 'center',
            backgroundColor: item.checked ? 'red' : 'white'
          }}
        >
          {/* use `HighlightableText` to highlight the search result */}
          <HighlightableText
            matcher={item.matcher}
            text={item.PerName}
            textColor={'#000'}
            hightlightTextColor={'#0069c0'}
          />
        </View>
      </TouchableOpacity>
    )
  }