diff --git a/README.md b/README.md
index e3ceefd..12a4c65 100644
--- 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
index 77d3caa..1db9bb9 100644
--- 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' />
- {this._renderStickHeader()}
+ {this._renderStickyHeader()}
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 (
@@ -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)} />
diff --git a/library/components/SearchBar.js b/library/components/SearchBar.js
index 309a7fe..dd34737 100644
--- 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
}}>
-
+
{this.state.isSearching ? this._renderCancelWhileSearching.bind(this)() : this._renderCancel.bind(this)()}
diff --git a/package.json b/package.json
index 8f62cd0..324a924 100644
--- 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": {