joywok-material-components
Version:
<h1 align="center"> Joywok Material Components </h1>
281 lines (275 loc) • 9.45 kB
JavaScript
import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import InputBase from "@material-ui/core/InputBase/InputBase";
import Popper from '@material-ui/core/Popper';
import Fade from '@material-ui/core/Fade';
import Paper from '@material-ui/core/Paper';
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
import Chip from '@material-ui/core/Chip';
import TagFacesIcon from '@material-ui/icons/TagFaces';
import request from './../utils/request';
require('./style/selectTag.css');
const styles = theme => ({
root: {
width: '100%',
},
inputRoot: {
color: 'inherit',
marginLeft:"5px"
},
inputInput: {
transition: theme.transitions.create('width'),
color: "#333",
fontSize:14,
lineHeight:1
},
list:{
maxHeight:'300px',
overflowY:'auto'
}
});
class CustomSelect extends React.Component {
constructor(props) {
super(props);
this.state = {
open:false,
loading:false,
list:[],
check:props.checked || [],
anchorEl:null,
value:''
}
this.fetchTime = null
this.setTime = null
this.mainRef = null;
this.containerRef = null;
this.inputRef = null;
}
inputChange(e){
let self = this;
let value = e.target.value;
let target = this.containerRef;
self.setState({
value:value
})
// clearTimeout(this.setTime);
// this.setTime = setTimeout(function(){
// if(self.state.value.trim().length != 0){
// self.choseItem(e,self.state.value.trim());
// }
// },1000)
// clearTimeout(this.fetchTime);
// if(value.length!=0){
// this.fetchTime = setTimeout(function(){
// self.setState({
// loading:true,
// anchorEl:target
// })
// self.setState({
// open:true
// })
// let url = self.props.url.replace('{jw.form.search}',value)
// request(url,{
// method:'GET',
// }).then(function(resp){
// if(resp['data']['success'] && resp['data']['success'] == 0){
// }else{
// self.setState({
// list:resp.data['list'],
// loading:false
// })
// }
// })
// },800)
// $(document).off('click').one('click',function(){
// self.setState({
// open:false,
// })
// })
// }else{
// self.setState({
// open:false,
// list:[],
// loading:false
// })
// }
}
onKeyDown(e){
let self = this;
let code = e.keyCode;
// if(code == '38' || code == '40'){
// let item = $('.custom-search-popper .search-item');
// let nowActive = $('.custom-search-popper .search-item.active').eq(0);
// if(nowActive.length!=0){
// let nowIndex = parseInt(nowActive.attr('data-index'));
// item.removeClass('active');
// if(code == '38'){
// nowIndex = nowIndex - 1;
// if(nowIndex==-1){
// $('.custom-search-popper .search-item').eq(item.length-1).addClass('active');
// }else{
// $('.custom-search-popper .search-item').eq(nowIndex).addClass('active');
// }
// }else{
// nowIndex = nowIndex+ 1;
// if(nowIndex==item.length){
// $('.custom-search-popper .search-item').eq(0).addClass('active');
// }else{
// $('.custom-search-popper .search-item').eq(nowIndex).addClass('active');
// }
// }
// }else{
// item.removeClass('active');
// if(code == '38'){
// $('.custom-search-popper .search-item').eq(item.length-1).addClass('active');
// }else{
// $('.custom-search-popper .search-item').eq(0).addClass('active');
// }
// }
// e.preventDefault()
// //上下
// }
if(code == '13'){
//确定
// let index = $('.custom-search-popper .search-item.active').attr('data-index');
// let data = this.state.list[index];
this.choseItem(e,self.state.value);
e.preventDefault();
}
}
onMouseOver(index){
let item = $('.custom-search-popper .search-item');
item.removeClass('active');
item.eq(index).addClass('active');
}
onMouseOut(index){
}
handleDelete(e,data){
let self = this;
if(typeof(this.props.onDelete)!='undefined'){
this.props.onDelete(e)
}else{
let newList = [];
_.each(this.state.check,function(i){
if(i != data){
newList.push(i)
}
});
this.setState({
check:newList,
value:''
})
this.inputFocus();
self.props.onChange && self.props.onChange(newList)
}
}
inputFocus(){
$(this.containerRef).find('input').focus();
}
handleClickAway(){
}
choseItem(e,data){
let self = this;
let check = this.state.check;
if(_.filter(check,function(i){return i == data}).length!=0){
this.setState({
value:''
})
}else{
check.push(data.trim());
this.setState({
check:check,
value:''
})
}
this.inputFocus();
self.props.onChange && self.props.onChange(check)
}
_initElement(){
let self = this;
const { classes } = this.props;
const { anchorEl } = this.state;
return <div className="custom-select-c" ref={container => this.containerRef = container} onClick={(e)=>this.inputFocus(e)}>
{
this.state.value.length!=0 || this.state.check.length!=0?'':<div className="custom-select-placeholder">{this.props.placeholder}</div>
}
<div className="custom-select-list">
{
this.state.check && this.state.check.length!=0?_.map(this.state.check,function(i){
return <Chip
className="custom-select-check-i"
key={i}
onDelete={(e)=>self.handleDelete(e,i)}
label={i}
/>
}):''
}
{
this.state.max && this.state.check.length!=0 && this.state.max <=this.state.check.length?'':<InputBase
classes={{
root: classes.inputRoot,
input: classes.inputInput,
}}
className="custom-select-search-input"
value={this.state.value}
onChange={(e)=>self.inputChange(e)}
onKeyDown={(e)=>self.onKeyDown(e)}
ref={input => this.inputRef = input}
/>
}
</div>
</div>
}
render(){
let self = this;
const { classes } = this.props;
const { anchorEl } = this.state;
let icon = <TagFacesIcon/>
return(<div className="custom-select custom-select-tag" ref={main => this.mainRef = main}>
{self._initElement()}
<div className="custom-select-showlist hide">
<ClickAwayListener onClickAway={() => {}} onClick={(e)=>self.handleClickAway(e)}>
<Popper
id="custom-search-popper"
open={this.state.open}
placement={'bottom-start'}
anchorEl={anchorEl}
modifiers={{
}}
className={'custom-search-popper custom-search-selectlist'}
style={{
width:$(this.containerRef).width()+'px',
marginTop:'10px',
marginBottom:"10px"
}}
transition
>
{({ TransitionProps }) => (
<Fade {...TransitionProps} timeout={350}>
{
self.state.loading?<Paper><div className={'custom-search-loading'}>加载中…</div></Paper>:
<Paper className={classes.list}>
{
self.state.list.length!=0?_.map(self.state.list,function(i,index){
return <div className={"search-item"} data-index={index} data-id={i['id'] || i['key']} onMouseOver={(e)=>self.onMouseOver(index)} onMouseOut={(e)=>self.onMouseOut(index)} onClick={(e)=>self.choseItem(e,i)}>
<div className={"search-item-info"}>
<div className={'search-item-info-l'}>
<div className={'search-item-info-i name ellipsis'} title={i['name'] || i['label']}>
{i['name'] || i['label']}
</div>
</div>
</div>
</div>
}):<div className={'custom-search-none'}>暂无数据</div>
}
</Paper>
}
</Fade>
)}
</Popper>
</ClickAwayListener>
</div>
</div>)
}
}
export default withStyles(styles)(CustomSelect);