Switch initList to return Promise to fix searchOnDefaultValue

zanechua · Jul 17, 2019 · aaf62e0 · aaf62e0
1 parent 1e591d6
commit aaf62e0
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 31 deletions.
diff --git a/README.md b/README.md
@@ -168,6 +168,7 @@ renderItemSeparator | func | Render row separator. |
 renderSectionHeader | func | `renderSectionHeader` for the internal ListView |
 renderHeader | func | `renderHeader` for the internal ListView |
 renderFooter | func | `renderFooter` for the internal ListView |
+renderStickyHeader | func | `renderStickyHeader` for the section below the SearchBar |
 renderRow | func | `renderRow` for the internal ListView |
 renderToolbar | func | `renderToolbar` for the Toolbar |
 renderCancel | func | `renderCancel` for custom rendering of the cancel button |

diff --git a/library/SearchList.js b/library/SearchList.js
@@ -94,7 +94,7 @@ export default class SearchList extends Component {
     renderSectionHeader: PropTypes.func,
     renderHeader: PropTypes.func,
     renderFooter: PropTypes.func,
-    // custom render row
+    renderStickyHeader: PropTypes.func,
     renderRow: PropTypes.func.isRequired,
 
     onSearchStart: PropTypes.func,
@@ -126,6 +126,13 @@ export default class SearchList extends Component {
       animatedValue: new Animated.Value(0)
     };
 
+    this.search = this.search.bind(this);
+    this.cancelSearch = this.cancelSearch.bind(this);
+    this.onFocus = this.onFocus.bind(this);
+    this.onBlur = this.onBlur.bind(this);
+    this.onClickCancel = this.onClickCancel.bind(this);
+    this.scrollToSection = this.scrollToSection.bind(this);
+
     pinyin.setOptions({checkPolyphone: false, charCase: 2});
   }
 
@@ -136,18 +143,22 @@ export default class SearchList extends Component {
   }
 
   componentDidMount () {
-    this.initList(this.props.data);
-
-    if (this.props.searchOnDefaultValue && this.props.searchInputDefaultValue != '') {
-      this.search(this.props.searchInputDefaultValue);
-      this.enterSearchState();
-    }
+    this.initList(this.props.data)
+      .then(() => {
+        if (this.props.searchOnDefaultValue && this.props.searchInputDefaultValue != '') {
+          this.search(this.props.searchInputDefaultValue);
+          this.enterSearchState();
+        }
+      });
   }
 
   initList (data = []) {
-    const copiedSource = Array.from(data);
-    this.setState({ originalListData: copiedSource });
-    this.parseInitList(SearchService.sortList(SearchService.initList(copiedSource), this.props.sortFunc));
+    return new Promise((resolve, reject) => {
+      const copiedSource = Array.from(data);
+      this.setState({ originalListData: copiedSource });
+      this.parseInitList(SearchService.sortList(SearchService.initList(copiedSource), this.props.sortFunc));
+      resolve();
+    });
   }
 
   parseInitList (srcList) {
@@ -371,11 +382,11 @@ export default class SearchList extends Component {
               placeholder={this.props.searchInputPlaceholder ? this.props.searchInputPlaceholder : ''}
               defaultValue={this.props.searchInputDefaultValue ? this.props.searchInputDefaultValue : ''}
 
-              onChange={this.search.bind(this)}
-              onFocus={this.onFocus.bind(this)}
-              onBlur={this.onBlur.bind(this)}
+              onChange={this.search}
+              onFocus={this.onFocus}
+              onBlur={this.onBlur}
 
-              onClickCancel={this.onClickCancel.bind(this)}
+              onClickCancel={this.onClickCancel}
               cancelTitle={this.props.cancelTitle}
               cancelTextColor={this.props.cancelTextColor}
 
@@ -397,7 +408,7 @@ export default class SearchList extends Component {
 
               ref='searchBar' />
           </View>
-          {this._renderStickHeader()}
+          {this._renderStickyHeader()}
 
           <View
             shouldRasterizeIOS
@@ -420,9 +431,9 @@ export default class SearchList extends Component {
    */
   _renderSearchBody () {
     const { isReady, isSearching, searchStr, sectionListData } = this.state;
-    const { renderEmptyResult, renderEmpty, data, rowHeight } = this.props;
+    const { renderEmptyResult, renderEmpty, data } = this.props;
 
-    if (isSearching && renderEmptyResult && searchStr !== '') {
+    if (isSearching && !isReady && renderEmptyResult && searchStr !== '') {
       return renderEmptyResult(searchStr);
     } else {
       if (data && data.length > 0 && isReady) {
@@ -444,7 +455,7 @@ export default class SearchList extends Component {
             ListFooterComponent={this.props.renderFooter || this._renderFooter.bind(this)}
             ListHeaderComponent={this.props.renderHeader || this._renderHeader.bind(this)}
 
-            onScrollToIndexFailed={()=>{}}
+            onScrollToIndexFailed={() => {}}
           />
         );
       } else {
@@ -456,14 +467,14 @@ export default class SearchList extends Component {
   }
 
   /**
-   * render a custom stick header, isSearching is pass to renderStickHeader
+   * render a custom sticky header, isSearching is pass to renderStickyHeader
    * @returns {*}
    * @private
    */
-  _renderStickHeader () {
-    const { renderStickHeader } = this.props;
+  _renderStickyHeader () {
+    const { renderStickyHeader } = this.props;
     const { isSearching } = this.state;
-    return renderStickHeader ? renderStickHeader(isSearching) : null;
+    return renderStickyHeader ? renderStickyHeader(isSearching) : null;
   }
 
   /**
@@ -476,7 +487,7 @@ export default class SearchList extends Component {
     if (isSearching && !searchStr) {
       return (
         <Touchable
-          onPress={this.cancelSearch.bind(this)} underlayColor='rgba(0, 0, 0, 0.0)'
+          onPress={this.cancelSearch} underlayColor='rgba(0, 0, 0, 0.0)'
           style={[{top: this.props.toolbarHeight + Theme.size.searchInputHeight}, styles.maskStyle]}>
           <Animated.View />
         </Touchable>
@@ -575,7 +586,7 @@ export default class SearchList extends Component {
                 outputRange: [1, 0]
               })
             }}
-            onSectionSelect={this.scrollToSection.bind(this)}
+            onSectionSelect={this.scrollToSection}
             sections={sectionIds}
             renderSectionItem={renderSectionIndexItem || this._renderSectionIndexItem.bind(this)} />
         </View>

diff --git a/library/components/SearchBar.js b/library/components/SearchBar.js
@@ -72,6 +72,12 @@ export default class SearchBar extends Component {
       isSearching: props.defaultValue !== '',
       animatedValue: new Animated.Value(0)
     };
+
+    this.onFocus = this.onFocus.bind(this);
+    this.onBlur = this.onBlur.bind(this);
+    this.onSubmitEditing = this.onSubmitEditing.bind(this);
+    this.onChange = this.onChange.bind(this);
+    this.cancelSearch = this.cancelSearch.bind(this);
   }
 
   onChange (value) {
@@ -144,7 +150,7 @@ export default class SearchBar extends Component {
             inputRange: [0, buttonWidth],
             // TODO 这里要想办法做得更灵活一点
             // Control total width of searchBar
-            outputRange: [ this.props.staticCancelButton ? Theme.size.windowWidth - buttonWidth - searchBarHorizontalPadding : Theme.size.windowWidth - searchBarHorizontalPadding * 2, Theme.size.windowWidth - buttonWidth - searchBarHorizontalPadding]
+            outputRange: [this.props.staticCancelButton ? Theme.size.windowWidth - buttonWidth - searchBarHorizontalPadding : Theme.size.windowWidth - searchBarHorizontalPadding * 2, Theme.size.windowWidth - buttonWidth - searchBarHorizontalPadding]
           }),
           backgroundColor: this.state.animatedValue.interpolate({
             inputRange: [0, buttonWidth],
@@ -154,16 +160,16 @@ export default class SearchBar extends Component {
           borderRadius: 5
         }}>
           <TextInput
-            onFocus={this.onFocus.bind(this)}
-            onBlur={this.onBlur.bind(this)}
-            onSubmitEditing={this.onSubmitEditing.bind(this)}
+            onFocus={this.onFocus}
+            onBlur={this.onBlur}
+            onSubmitEditing={this.onSubmitEditing}
             ref='input'
             style={[styles.searchTextInputStyle, this.props.showSearchIcon ? '' : {paddingLeft: 8}, {
               color: this.props.searchInputTextColorActive && !this.state.isSearching
                 ? this.props.searchInputTextColorActive
                 : this.props.searchInputTextColor || '#979797'
             }, this.props.searchInputStyle]}
-            onChangeText={this.onChange.bind(this)}
+            onChangeText={this.onChange}
             value={this.state.value}
             underlineColorAndroid='transparent'
             placeholder={this.props.placeholder}
@@ -178,7 +184,7 @@ export default class SearchBar extends Component {
           </Animated.View>
         </Animated.View>
         <View style={[styles.cancelContainer, this.props.cancelContainerStyle]}>
-          <TouchableWithoutFeedback onPress={this.cancelSearch.bind(this)}>
+          <TouchableWithoutFeedback onPress={this.cancelSearch}>
             {this.state.isSearching ? this._renderCancelWhileSearching.bind(this)() : this._renderCancel.bind(this)()}
           </TouchableWithoutFeedback>
         </View>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@zanechua/react-native-search-list",
-  "version": "2.3.2",
+  "version": "2.3.3",
   "description": "react native component for search list view",
   "main": "./library/index.js",
   "scripts": {