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": {