joywok-material-components
Version:
<h1 align="center"> Joywok Material Components </h1>
556 lines (552 loc) • 25.9 kB
JavaScript
/**
*
* @api {} BaseShare
* @apiName BaseShare
* @apiGroup 组件使用
*
* @apiParam {String } url 远程请求的url
* @apiParam {String } placeholder Input默认Placeholder
* @apiParam {Array } shareobj 当前选中的数据
* @apiParam {Function } onChange 数据变化的回调事件（传回Array）
*
* @apiSuccessExample {json} 使用案例:
* import BaseShare from 'joywok-material-components/lib/share/BaseShare';
* <BaseShare url={'/api/suggestion/searchobjs?s='} placeholder={'搜点什么吧'} shareobj={[]} onChange={(data)=>this.changeAllVisiScope(data)}/>
*
*
*/
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/index.css');
import { generateMixed } from './../utils/pubfun';
import { COMPONENT_DICT } from '../constants';
const shareobj_type = {
jw_n_calendar: COMPONENT_DICT('label.business.shareobj.calendar'),
jw_n_dept: COMPONENT_DICT('label.business.shareobj.dept'),
jw_n_group: COMPONENT_DICT('label.business.shareobj.group'),
jw_n_post: COMPONENT_DICT('label.business.shareobj.jwpost'),
jw_n_role: COMPONENT_DICT('label.business.shareobj.jwrole'),
jw_n_user: COMPONENT_DICT('label.business.shareobj.user'),
jw_n_user_category: COMPONENT_DICT('label.business.shareobj.jwuser.category'),
jw_n_region: COMPONENT_DICT('label.business.shareobj.jwregion'),
jw_n_area: COMPONENT_DICT('label.business.shareobj.jwarea'),
jw_n_usergroup: COMPONENT_DICT('label.business.shareobj.usergroup')
}
const curLang = (window.language || window.cur_lang) || 'zh';
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.shareobj || [],
anchorEl:null,
value:''
}
this.fetchTime = null
}
inputChange(e){
let self = this;
let value = e.target.value;
// let target = this.refs.container;
let target = this.container;
self.setState({
value:value
})
clearTimeout(this.fetchTime);
if(value.length!=0 && self.props.url && self.props.url !== ''){
this.fetchTime = setTimeout(function(){
self.setState({
loading:true,
anchorEl:target
})
self.setState({
open:true
})
let url = self.props.url + value
request(url,{
method:'GET',
}).then(function(resp){
if(resp['data']['success'] && resp['data']['success'] == 0){
}else{
let nowData = [];
_.each( (resp.data.JMObjs&&resp.data.JMObjs.list) || resp.data.JMObjs || resp.data.JMUsergroups||resp.data.JMTrioInsts, function (i) {
// if (Underscore.findWhere(self.props.shareobj, { id: i['id'] })) {
// } else {
nowData.push(i)
// }
})
// nowData = nowData.reverse();
let allData = [];
// let key = nowData[0]['type']
let key = 'jw_n_user';
_.each(nowData, function (i) {
if (i['type'] != key && i['type']!="jw_trio_inst") {
key = i['type']
allData.push({ type: 'sep', name: shareobj_type[i['type']] })
allData.push(i)
} else {
allData.push(i)
}
})
console.log("allData::::",allData)
self.setState({
list:allData,
loading:false
})
}
})
},800)
$(document).off('click').one('click',function(){
self.setState({
open:false,
})
})
}else{
self.setState({
open:false,
list:[],
loading:false
})
}
}
onKeyDown(e){
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');
// console.log(index,'asdasdasd');
if(typeof(index) != 'undefined'){
let data = this.state.list[index];
this.choseItem(e,data);
}
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,data)
}else{
if(typeof(this.props.sigle)!='undefined'){
this.setState({
check:{},
})
self.props.onChange && self.props.onChange({})
setTimeout(function(){
self.inputFocus();
},100)
}else{
let newList = [];
// console.log(this.state.check,data,'dsadasdasdasd');
_.each(this.state.check,function(i){
// if(i['id'] != data['id']){
// newList.push(i)
// }
if(i['id']){
if(i['id'] != data['id']){
newList.push(i)
}
}else{
if(i['key']){
if(i['key'] != data['key']){
newList.push(i)
}
}else{
if(i['value']){
if(i['value'] != data['value']){
newList.push(i)
}
}
}
}
});
this.setState({
check:newList,
})
this.inputFocus();
self.props.onChange && self.props.onChange(newList)
}
}
}
inputFocus(){
// $(this.refs.container).find('input').focus();
$(this.container).find('input').focus();
}
customHandleDelete(e,data){
// console.log(e,data,'这个是什么啊');
}
handleClickAway(){
this.setState({
open:false
})
}
choseItem(e,data){
let self = this;
let check = this.state.check;
if(data.type == 'sep'){
setTimeout(function(){
self.setState({
open:true
})
},0)
}else{
if(typeof(this.props.sigle)!='undefined'){
check = data;
this.setState({
check:check,
open:false,
value:''
})
}else{
if(_.findWhere(check,{id:data['id'] || data['key'] || data['value']})){
this.setState({
value:''
})
}else{
check.push(data);
this.setState({
open:false,
check:check,
value:''
})
}
this.inputFocus();
}
self.props.onChange && self.props.onChange(check)
}
}
_combineOne(socialobj) {
if (socialobj.type == 'jw_n_user') {
return (<div className={"jw-shareobj-item-w " + socialobj.type} data-action-val={socialobj["name"]} data-action-id={socialobj["id"]}>
<div className="jw-shareobj-item-pic">
<img src={socialobj.dtype&&socialobj.dtype==1 ? jwimgsrc + '/images/jw-img/share/group.png' : (socialobj['avatar'] ? socialobj['avatar']['avatar_l'] : jwimgsrc + '/images/jw-img/share/user.jpg')} />
</div>
<div className="jw-shareobj-item-c">
<div className="jw-shareobj-item-c-name ellipsis">{socialobj.name}</div>
{
socialobj['depts'] && socialobj['depts'].length != 0 ?
<div className="jw-shareobj-item-c-tip">{(socialobj['depts'][0]['title'])+(socialobj['depts'][0]['title']!='' ? '，' : '')+(socialobj['depts'][0]['name'])}</div> : ''
}
</div>
</div>)
} else if (socialobj.type == 'jw_n_group' || socialobj.type == 'jw_n_dept' || socialobj.type == '1'||socialobj.type=='app') {
return (<div className={"jw-shareobj-item-w " + socialobj.type} data-action-val={socialobj["name"]} data-action-id={socialobj["id"]}>
<div className={"jw-shareobj-item-pic " + (socialobj.type=='app' ? 'jw-shareobj-item-pic-app' : '')}>
<img src={socialobj.dtype&&socialobj.dtype==1 ? jwimgsrc + '/images/jw-img/share/group.png' : socialobj['logo']} />
</div>
<div className="jw-shareobj-item-c">
<div className="jw-shareobj-item-c-name ellipsis">{socialobj.name}</div>
<div className="jw-shareobj-item-c-tip">{COMPONENT_DICT('label.business.shareobj.dept.member').replace('{num}',socialobj.members_num)}</div>
</div>
</div>)
} else if (socialobj.type == 'jw_n_role') {
return (<div className={"jw-shareobj-item-w " + socialobj.type} data-action-val={socialobj["name"]} data-action-id={socialobj["id"]}>
<div className="jw-shareobj-item-pic">
<img src={socialobj.dtype&&socialobj.dtype==1 ? jwimgsrc + '/images/jw-img/share/group.png' : jwimgsrc + '/images/jw-img/share/roles.png'} />
</div>
<div className={socialobj.dtype&&socialobj.dtype==2 ? "jw-shareobj-item-c jw-shareobj-item-c-margin" :"jw-shareobj-item-c"}>
<div className="jw-shareobj-item-c-name ellipsis">{socialobj.name}</div>
<div className="jw-shareobj-item-c-tip"></div>
</div>
</div>)
} else if (socialobj.type == 'jw_n_topic') {
} else if (socialobj.type == 'jw_n_folder') {
} else if (socialobj.type == 'jw_n_file') {
} else if (socialobj.type == 'jw_n_calendar') {
} else if (socialobj.type == 'jw_n_task') {
} else if (socialobj.type == 'jw_n_project') {
} else if (socialobj.type == 'jw_n_domain') {
} else if (socialobj.type == 'jw_n_post') {
return (<div className={"jw-shareobj-item-w " + socialobj.type} data-action-val={socialobj["name"]} data-action-id={socialobj["id"]}>
<div className={"jw-shareobj-item-pic"}>
<img src={socialobj.dtype&&socialobj.dtype==1 ? jwimgsrc + '/images/jw-img/share/group.png' : jwimgsrc + '/images/jw-img/share/position.png'} />
</div>
<div className={"jw-shareobj-item-c"}>
<div className="jw-shareobj-item-c-name ellipsis">{socialobj.parent_path&&socialobj.parent_path!="" ? socialobj.parent_path+"-"+socialobj.name : socialobj.name}</div>
<div className="jw-shareobj-item-c-tip"></div>
</div>
</div>)
// } else if (socialobj.type == 'jw_user_category') {
} else if (socialobj.type == 'jw_n_user_category') {
return (<div className={"jw-shareobj-item-w " + socialobj.type} data-action-val={socialobj["name"]} data-action-id={socialobj["id"]}>
<div className={socialobj.dtype&&socialobj.dtype==2 ? 'hide' : "jw-shareobj-item-pic"}>
<img src={socialobj.dtype&&socialobj.dtype==1 ? jwimgsrc + '/images/jw-img/share/group.png' : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAABSpJREFUaAXtW2tsFFUU/mahy6stiG2xJA3avxUJirWBCk2qaDCCJCZAogmJ4osEoyb6Q43GV6IxGiWgVYk/NNGUUNRoFCmGNIWAaLBI9Yc0KhCssBDtFkq70PU7e3eyszu7szNz12z3cZLdmXvuOffeb777OPfujoG4RKMwsBX3I4r7qGritdLMK8irgWG2u5+otuERfGAYREQx5CvagXpE8BFV7ZIuOjGwh0jvMTZiMBBjtpjBCntCZBQfC1YjugUbMI73io7VdIACeCBA5DJmS0OINUCkTaWBNoaySRgu7NnYC1vEKgyXlJQBFzvdZYbLDBfZEyh36SIj1Aan5BiebHsEOoppc4ApM+0ljA0BFwbtepuGz3/BJga7G4DKBiD0E3DgGeBUj83Sr8KIbmZwqSuNq4HWN4HqeZlLCp8A9j0BHNue3iZQAdzeCTTelZzPPR32PsytfEey3mdKv0s3LAdWdDmDlcZVkTEBNO8Oe1OtYC+eAz6/DeioJrvP8oiCZxRt75D1B+1+PjT6gJuf81Zt8/PJ9qlgP7sFOPEtEAkDP7wE9DyaAH3tQ8m+PlL6Y7h2obdqa66jvTzncV6kG7OLN64ChFkBGzqcXN6Rt1V66VvAsq3q/ui7yTYeUvoMT57moTqaTgoS6CTl0/KKM1izZAHds0kxLaDnLjVzPF/1AXuuMu4wtQZY+DhweYxjlvNAKrOp5R7ZrGZsGdMtL6fmuk7nD/CV88kYq/9rH3DmR3cN7ot375oF7uzTWOUPcPi4as5snjAFZ6ZpWhpV/WKlNH3TmGRT5Q/w0ABw8jtgeh1w51dARZVzW2uvB5Z/omx+ed/Z1iFXH/BIyKH4NFmj/3KCjqiM7vWAsFW/BFj5dWbQAnZVNzD1CmCgC+jjePYp+oC9hn1W+2FGX11twNCfcdDf2EEngd0J7FpLqFzSfIo+4F6Gi7KGupHRf4BezsxWCf8O7GyLg+YYXUnQwVnKou5GC7MCdk2id1jL8HCfm1h6xlxgEcPAq25KPwHJ5uHv74FDLwLnT6ZvXtXVwOq9KkQdOQOc+5Xltah1eyA3YKXi3ACWknIhskNq/xBoaFeljV8GDr8OHOTDNMe9Zj0TC7AJpuoatdk4exQYdTlcTN8sV/1YOrUCIx42WvVRmWSiVk3me/Ef5swtHxFJe/FXXhm/cwO49gZgyWtAXTPHcKW9ssh5juFDwP6ngNMcy6kijN78BmPkZWrpSc2X8DPUxzngBeCPL1NzPaX1u7QsG3cf4OTCnU82Gb8E7Ggl+IMJS5nw1v1MoLMTOqe7XeuA3z51snDM01+WFr/qDqw0I8AOJfZWWfS0e7Di18qeoCH6gOdwKfIisraqf1ooL6/+M+rVeZeXOi22+oCDWWJgS2Wx24rpimlTH6w279xf/fjES9cH7L6ZE8KyDHhC0PA/NqLMsOeHKxsDLxK5wLiY67EpXv3FT/bUPkWf4UFLEOGmEbJrsoaZgwxavMjwqcw7Lhfl6AOWcFFCPzcizO5/MtlSDttHzibrnFK9jznlZs3TByzHq9u5bz2+G8jUPcfC/DWhW9mdZkxtFfmRrZOx+LEdBB6y5iTuL10EpCd8sYJ2nQm9jzv9WNpHpfl00Wc4n633UXcZsI+HVlAuZYYLii4fjS0z7OOhFZRLgIcP8vZHaQixSpfuLw20MZT9wvC2kgFMrEbsNZ4t2M0NTPz3jSKFL+8ubcStgdgbWxW4l0zvKVKockiqXtTi22n8h4iSGNMl8Cref+zuVmHr6M+NAAAAAElFTkSuQmCC"} />
</div>
<div className={socialobj.dtype&&socialobj.dtype==2 ? "jw-shareobj-item-c jw-shareobj-item-c-margin" : "jw-shareobj-item-c"}>
<div className="jw-shareobj-item-c-name ellipsis">{socialobj.parent_path&&socialobj.parent_path!="" ? socialobj.parent_path+"-"+socialobj.name : socialobj.name}</div>
<div className="jw-shareobj-item-c-tip"></div>
</div>
</div>)
} else if (socialobj.type == 'jw_n_region') {
return (<div className={"jw-shareobj-item-w " + socialobj.type} data-action-val={socialobj["name"]} data-action-id={socialobj["id"]}>
<div className={socialobj.dtype&&socialobj.dtype==2 ? 'hide' : "jw-shareobj-item-pic"}>
<img src={socialobj.dtype&&socialobj.dtype==1 ? jwimgsrc + '/images/jw-img/share/group.png' : jwimgsrc + '/images/jw-img/share/region.png'} />
</div>
<div className={socialobj.dtype&&socialobj.dtype==2 ? "jw-shareobj-item-c jw-shareobj-item-c-margin" :"jw-shareobj-item-c"}>
<div className="jw-shareobj-item-c-name ellipsis">{socialobj.parent_path&&socialobj.parent_path!="" ? socialobj.parent_path+"-"+socialobj.name : socialobj.name}</div>
<div className="jw-shareobj-item-c-tip"></div>
</div>
</div>)
} else if(socialobj.type == 'jw_n_brand'||socialobj.type == 'jw_n_office'||socialobj.type == 'jw_n_personnel_category'||socialobj.type == 'jw_n_function_level'||socialobj.type == 'jw_n_personnel_group'||socialobj.type == 'jw_n_assign_category'||socialobj.type == 'jw_n_store_category'||socialobj.type == 'jw_n_teamtype'||socialobj.type == 'jw_n_region_category'){
return (<div className={"jw-shareobj-item-w " + socialobj.type} data-action-val={socialobj["name"]} data-action-id={socialobj["id"]}>
<div className={socialobj.dtype&&socialobj.dtype==2 ? 'hide' : "jw-shareobj-item-pic"}>
<img src={socialobj.dtype&&socialobj.dtype==1 ? jwimgsrc + '/images/jw-img/share/group.png' : jwimgsrc + '/images/jw-img/share/position.png'} />
</div>
<div className={socialobj.dtype&&socialobj.dtype==2 ? "jw-shareobj-item-c jw-shareobj-item-c-margin" : "jw-shareobj-item-c"}>
<div className="jw-shareobj-item-c-name ellipsis">{socialobj.parent_path&&socialobj.parent_path!="" ? socialobj.parent_path+"-"+socialobj.name : socialobj.name}</div>
<div className="jw-shareobj-item-c-tip"></div>
</div>
</div>)
}else if (socialobj.type == 'jw_n_area') {
return (<div className={"jw-shareobj-item-w " + socialobj.type} data-action-val={socialobj["name"]} data-action-id={socialobj["id"]}>
<div className={socialobj.dtype&&socialobj.dtype==2 ? 'hide' : "jw-shareobj-item-pic"}>
<img src={socialobj.dtype&&socialobj.dtype==1 ? jwimgsrc + '/images/jw-img/share/group.png' :jwimgsrc + '/images/jw-img/share/area.png'} />
</div>
<div className={socialobj.dtype&&socialobj.dtype==2 ? "jw-shareobj-item-c jw-shareobj-item-c-margin" :"jw-shareobj-item-c "}>
<div className="jw-shareobj-item-c-name ellipsis">{socialobj.name}</div>
<div className="jw-shareobj-item-c-tip"></div>
</div>
</div>)
} else if (socialobj.type == 'jw_n_usergroup'||socialobj.type == 'jw_trio_inst') {
return (<div className={"jw-shareobj-item-w " + socialobj.type} data-action-val={socialobj["name"]} data-action-id={socialobj["id"]}>
<div className="jw-shareobj-item-c margin-left">
<div className="jw-shareobj-item-c-name ellipsis">{socialobj.name}</div>
<div className="jw-shareobj-item-c-tip"></div>
</div>
</div>)
} else {
return <div className="jw-shareobj-item-w disabled">
{socialobj.name}
</div>
}
}
onBlur(e){
}
_initElement(){
let self = this;
const { classes } = this.props;
const { anchorEl } = this.state;
if(typeof(this.props.sigle)!='undefined'){
let chipData = {
className:"custom-shareselect-check-i",
key:(this.state.check.id || this.state.check.key || this.state.check.value ),
onDelete:(e)=>self.handleDelete(e,this.state.check),
label:(curLang == 'en' ? (this.state.check['en_name'] || this.state.check['name']) : this.state.check['name']) || this.state.check['label'],
title:(curLang == 'en' ? (this.state.check['en_name'] || this.state.check['name']) : this.state.check['name']) || this.state.check['label'],
}
if(this.props.disabled || this.props.autoShowDis){
delete chipData['onDelete']
}
return <div className="custom-shareselect-c"
// ref="container"
ref={ref=>this.container=ref}
onClick={(e)=>this.inputFocus(e)}>
{
this.state.value.length!=0 || this.state.check.id || this.state.check.key || this.state.check.value ?'':<div className="custom-shareselect-placeholder">{this.props.placeholder}</div>
}
<div className="custom-shareselect-list">
{
this.state.check && (this.state.check.id || this.state.check.key || this.state.check.value )?<Chip
{...chipData}
/>:''
}
{
this.state.check && (this.state.check.id || this.state.check.key || this.state.check.value )?'':<InputBase
classes={{
root: classes.inputRoot,
input: classes.inputInput,
}}
className="custom-shareselect-search-input"
value={this.state.value}
onChange={(e)=>self.inputChange(e)}
onKeyDown={(e)=>self.onKeyDown(e)}
disabled={self.props.disabled?true:false}
// ref="input"
/>
}
</div>
{
this.props.autoShowDis?<div className="custom-shareselect-auto-remove" onClick={(e)=>self.handleDelete(e,this.state.check)}><svg focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"></path></svg></div>:""
}
</div>
}else{
return <div className="custom-shareselect-c"
// ref="container"
ref={ref=>this.container=ref}
onClick={(e)=>this.inputFocus(e)}>
{
this.state.value.length!=0 || (this.state.check.length>0)?'':<div className="custom-shareselect-placeholder">{this.props.placeholder}</div>
}
<div className="custom-shareselect-list">
{
this.state.check && this.state.check.length!=0?_.map(this.state.check,function(i){
let chipData = {
className:"custom-shareselect-check-i",
key:(i['id'] || i['key'] || i['value']),
onDelete:(e)=>self.handleDelete(e,i),
label:(curLang == 'en' ? (i['en_name'] || i['name']) : i['name']) || i['label'],
title:(curLang == 'en' ? (i['en_name'] || i['name']) : i['name']) || i['label']
}
if(self.props.disabled){
delete chipData['onDelete']
}
return <Chip
{...chipData}
/>
}):''
}
{
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-shareselect-search-input"
value={this.state.value}
onChange={(e)=>self.inputChange(e)}
onKeyDown={(e)=>self.onKeyDown(e)}
disabled={self.props.disabled?true:false}
// ref="input"
/>
}
</div>
</div>
}
}
render(){
let self = this;
const { classes } = this.props;
const { anchorEl } = this.state;
let icon = <TagFacesIcon/>
// return <div ref={input => (this.yourView = input)}>ss</div>
return(<div className={"custom-shareselect base-share "+(this.props.className || "")}
// ref="main"
ref={ref=>this.main=ref}
>
{self._initElement()}
<div className="custom-shareselect-showlist">
<Popper
id="custom-search-popper"
open={this.state.open}
placement={'bottom-start'}
anchorEl={anchorEl}
modifiers={{
preventOverflow: {
enabled: true,
boundariesElement: 'viewport',
},
}}
className={'custom-search-popper custom-search-selectlist'}
style={{
// width:$(this.refs.container).width()+'px',
width:$(this.container).width()+'px',
marginTop:'10px',
marginBottom:"10px",
zIndex:'3001'
}}
transition
>
{({ TransitionProps }) => (
<Fade {...TransitionProps} timeout={350}>
{
self.state.loading?<Paper><div className={'custom-search-loading'}>加载中…</div></Paper>:
<Paper className={classes.list}>
<ClickAwayListener onClickAway={(e)=>self.handleClickAway(e)}>
{
self.state.list.length!=0?_.map(self.state.list,function(i,index){
return <div className={"search-item " + (i.name==undefined ? 'hide' : '')} 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'}>
{
self._combineOne(i)
}
</div>
</div>
</div>
}):<div className={'custom-search-none'}>{i18n('label.form.nullData')}</div>
}
</ClickAwayListener>
</Paper>
}
</Fade>
)}
</Popper>
</div>
</div>)
}
componentWillReceiveProps(nextProps, nextState){
// console.log(nextProps,'zzzzzz');
this.setState({
check:nextProps.shareobj || []
})
}
}
export default withStyles(styles)(CustomSelect);