theluyuan/xm-select
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

v1.1.0.Beta+

Browse Source
This commit is contained in:
maplemei
2019-11-22 20:33:17 +08:00
parent db6fdae5cd
commit b14cbaa913
17 changed files with 366 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
src/components/plugin/general.js
View File

@@ -14,7 +14,7 @@ class General extends Component{
remote: true,
loading: false,
pageIndex: 1,
pageSize: 10,
totalSize: 0,
});
this.searchCid = 0;
@@ -55,14 +55,16 @@ class General extends Component{
if(index <= 1){
return ;
}
this.changePageIndex(index - 1);
this.changePageIndex(index - 1);
this.props.pageRemote && this.postData(index - 1, true);
}
pageNextClick(e, size){
let index = this.state.pageIndex;
if(index >= size){
return ;
}
this.changePageIndex(index + 1);
this.changePageIndex(index + 1);
this.props.pageRemote && this.postData(index + 1, true);
}
changePageIndex(index){
@@ -72,7 +74,7 @@ class General extends Component{
}
searchInput(e){
let v = e.target.value;
let v = e.target.value;
if(v === this.__value){
return ;
@@ -101,7 +103,7 @@ class General extends Component{
handleComposition(e){
let type = e.type;
if(type === 'compositionstart'){
this.inputOver = false;
clearTimeout(this.searchCid);
@@ -109,8 +111,26 @@ class General extends Component{
this.inputOver = true;
this.searchInput(e);
}
}
}
postData(pageIndex = this.state.pageIndex, mandatory = false){
if(this.state.remote || mandatory){
this.callback = false;
this.setState({ loading: true, remote: false });
//让输入框失去焦点
this.blur();
this.props.remoteMethod(this.state.filterValue, (result, totalSize) => {
//回调后可以重新聚焦
this.focus();
this.callback = true;
this.setState({ loading: false, totalSize });
this.props.onReset(result, 'data');
}, this.props.show, pageIndex);
}
}
//组件将要接收新属性
componentWillReceiveProps(props){
if(this.props.show != props.show){
if(!props.show){
@@ -123,22 +143,10 @@ class General extends Component{
setTimeout(() => this.focus(), 0);
}
}
}
componentDidUpdate(){
if(this.callback){
this.callback = false;
let done = this.props.filterDone;
if(isFunction(done)){
done(this.state.filterValue, this.tempData || []);
}
}
}
render(config) {
let { data, flatData, prop, template, theme, radio, sels, empty, filterable, filterMethod, remoteSearch, remoteMethod, delay, searchTips, create } = config
}
render(config) {
let { data, flatData, prop, template, theme, radio, sels, empty, filterable, filterMethod, remoteSearch, remoteMethod, delay, searchTips, create, pageRemote } = config
const { name, value, disabled, children, optgroup } = prop;
@@ -146,20 +154,7 @@ class General extends Component{
//是否开启了搜索
if(filterable){
if(remoteSearch){//是否进行远程搜索
if(this.state.remote){
this.callback = false;
this.setState({ loading: true, remote: false });
//让输入框失去焦点
this.blur();
remoteMethod(this.state.filterValue, result => {
//回调后可以重新聚焦
this.focus();
this.callback = true;
this.setState({ loading: false });
this.props.onReset(result, 'data');
}, this.props.show);
}
this.postData();
}else{
const filterData = (item, index) => {
const isGroup = item[optgroup];
@@ -185,19 +180,17 @@ class General extends Component{
//创建条目
creator = this.state.filterValue && isFunction(create);
}
}
}
//远程分页
if(pageRemote){
this.postData();
}
const search = (
<div class='xm-search'>
<i class="xm-iconfont xm-icon-sousuo"></i>
<input type="text" class="xm-input xm-search-input" placeholder={ searchTips }
ref={ input => this.searchInputRef = input }
onClick={ this.blockClick.bind(this) }
onInput={ this.searchInput.bind(this) }
onCompositionStart={ this.handleComposition.bind(this) }
onCompositionUpdate={ this.handleComposition.bind(this) }
onCompositionEnd={ this.handleComposition.bind(this) }
/>
<input class="xm-input xm-search-input" placeholder={ searchTips } />
</div>
);
@@ -211,7 +204,7 @@ class General extends Component{
let paging = '';
if(config.paging){
//计算当前分页的总页码
let size = Math.floor((arr.length - 1) / config.pageSize) + 1;
let size = pageRemote ? this.state.totalSize : Math.floor((arr.length - 1) / config.pageSize) + 1;
size <= 0 && (size = 1);
let pageIndex = this.state.pageIndex;
@@ -225,11 +218,13 @@ class General extends Component{
if(size > 0 && pageIndex <= 0){
pageIndex = 1;
}
//实现简单的物理分页
let start = (pageIndex - 1) * config.pageSize;
let end = start + config.pageSize;
arr = arr.slice(start, end);
if(!pageRemote){
//实现简单的物理分页
let start = (pageIndex - 1) * config.pageSize;
let end = start + config.pageSize;
arr = arr.slice(start, end);
}
const disabledStyle = {cursor: 'no-drop', color: '#d2d2d2'};
@@ -237,23 +232,6 @@ class General extends Component{
pageIndex <= 1 && (prevStyle = disabledStyle);
pageIndex == size && (nextStyle = disabledStyle);
// const defaultCurrClass = {
// position: 'relative',
// borderRadius: '1px',
// }
// {
// ''.padEnd(size, ' ').split('').map((s, i) => (
// <span style={
// this.state.pageIndex == i + 1 ? {
// ...defaultCurrClass,
// backgroundColor: theme.color,
// borderColor: theme.color,
// color: '#FFF',
// } : defaultCurrClass
// }>{ i + 1 }</span>
// ))
// }
this.state.pageIndex !== pageIndex && this.changePageIndex(pageIndex);
paging = (
@@ -324,11 +302,6 @@ class General extends Component{
})
this.props.onReset(mergeArr(list, selectedList, prop), 'sels');
} };
}else if(tool === 'SEARCH'){
toolStyle.color = theme.color;
info = { icon: 'xm-iconfont xm-icon-sousuo', name, method: (pageData) => {
} };
}else {
info = tool
}
@@ -406,7 +379,32 @@ class General extends Component{
</div> }
</div>
)
}
}
//组件完成挂载
componentDidMount(){
let input = this.base.querySelector('.xm-search-input');
if(input){
input.addEventListener('compositionstart', this.handleComposition.bind(this));
input.addEventListener('compositionupdate', this.handleComposition.bind(this));
input.addEventListener('compositionend', this.handleComposition.bind(this));
input.addEventListener('input', this.searchInput.bind(this));
this.searchInputRef = input;
}
}
//此时页面又被重新渲染了
componentDidUpdate(){
if(this.callback){
this.callback = false;
let done = this.props.filterDone;
if(isFunction(done)){
done(this.state.filterValue, this.tempData || []);
}
}
}
}
export default General;