|
@@ -2,8 +2,9 @@ import React,{Component} from 'react';
|
|
|
import classNames from 'classnames';
|
|
|
import config from '@config/index.js';
|
|
|
import style from './index.less';
|
|
|
-import {deepClone,filterArr,handleEnter,isIE,windowEventHandler,filterDataArr,getIds} from '@utils/tools.js';
|
|
|
+import {deepClone,filterArr,handleEnter,isIE,windowEventHandler,filterDataArr,getIds,getPageCoordinate} from '@utils/tools.js';
|
|
|
import {Notify} from '@commonComp';
|
|
|
+import ScrollArea from 'react-scrollbar';
|
|
|
import $ from 'jquery';
|
|
|
/****
|
|
|
* 标签组合下拉,选中的项目展开
|
|
@@ -44,9 +45,11 @@ class SpreadDrop extends Component{
|
|
|
ban:{}, //放'伴'字段
|
|
|
editable:false, //双击编辑
|
|
|
labelVal:'', //存放标签原有的值--主诉字数限制用
|
|
|
+ left:'auto',
|
|
|
tmpDom:null
|
|
|
};
|
|
|
this.$div = React.createRef();
|
|
|
+ this.$list = React.createRef();
|
|
|
this.handleSelect = this.handleSelect.bind(this);
|
|
|
this.clearState = this.clearState.bind(this);
|
|
|
this.handleClear = this.handleClear.bind(this);
|
|
@@ -68,6 +71,12 @@ class SpreadDrop extends Component{
|
|
|
++num
|
|
|
}
|
|
|
});
|
|
|
+ const listWidth = 30+$(this.$list.current).width();
|
|
|
+ if(num >= 5 && windowWidth-getPageCoordinate(e).boxLeft < listWidth){
|
|
|
+ this.setState({
|
|
|
+ left:windowWidth-listWidth-150
|
|
|
+ })
|
|
|
+ }
|
|
|
// window.event? window.event.cancelBubble = true : e.stopPropagation();
|
|
|
this.setStateInit(); //恢复初始选中状态
|
|
|
const that = this;
|
|
@@ -342,7 +351,7 @@ class SpreadDrop extends Component{
|
|
|
|
|
|
render(){
|
|
|
const {placeholder,value,show,data,order} = this.props;
|
|
|
- const {tmpDom} = this.state
|
|
|
+ const {tmpDom,left} = this.state
|
|
|
if(!show&&tmpDom){
|
|
|
$(tmpDom).parent().prev().attr({"contentEditable":true})
|
|
|
}
|
|
@@ -361,7 +370,7 @@ class SpreadDrop extends Component{
|
|
|
onInput={this.onChange}
|
|
|
onkeydown={handleEnter}
|
|
|
>{value||placeholder}</div>
|
|
|
- <ListItems data={data} order={order}
|
|
|
+ <ListItems parDiv={this.$list} data={data} order={order} left={left}
|
|
|
show={show} handleSelect={this.handleSelect} handleConfirm={this.handleConfirm} handleClear={this.handleClear} {...this.state}></ListItems>
|
|
|
</div>
|
|
|
}
|
|
@@ -370,6 +379,7 @@ class SpreadDrop extends Component{
|
|
|
class ListItems extends Component{
|
|
|
constructor(props){
|
|
|
super(props);
|
|
|
+ this.$cont = React.createRef();
|
|
|
}
|
|
|
getLabels(){
|
|
|
const {data,handleSelect} = this.props;
|
|
@@ -398,14 +408,15 @@ class ListItems extends Component{
|
|
|
return list;
|
|
|
}
|
|
|
getStyle(){
|
|
|
- const {show} = this.props;
|
|
|
+ const {show,left} = this.props;
|
|
|
return {
|
|
|
- display:show?'block':'none'
|
|
|
+ display:show?'block':'none',
|
|
|
+ left:left
|
|
|
}
|
|
|
}
|
|
|
render (){
|
|
|
- const {handleClear,handleConfirm,order} = this.props;
|
|
|
- return <div className={style["drop-list"]} style={this.getStyle()} contentEditable="false" onClick={(e)=>{e.stopPropagation();}}>
|
|
|
+ const {handleClear,handleConfirm,order,parDiv} = this.props;
|
|
|
+ return <div className={style["drop-list"]} ref={parDiv} style={this.getStyle()} contentEditable="false" onClick={(e)=>{e.stopPropagation();}}>
|
|
|
<p className={style['orderTips']}>按{order?'从左到右从上到下':'点击'}顺序成文</p>
|
|
|
{this.getLabels()}
|
|
|
<div className="oper clearfix">
|
|
@@ -474,13 +485,30 @@ class ListItem extends Component{
|
|
|
render(){
|
|
|
const {datas,isSpecialPos} = this.props;
|
|
|
const pos = isSpecialPos?style['independent']:'';
|
|
|
+ const contStyle={
|
|
|
+ opacity:'0.4',
|
|
|
+ right:'0',
|
|
|
+ top:'1px',
|
|
|
+ zIndex:'15',
|
|
|
+ width:'6px',
|
|
|
+ background:'#f1f1f1'};
|
|
|
+ const barStyle={background:'#777',width:'100%'};
|
|
|
return <ul className={classNames(style['row'],pos)} onBlur={(e)=>e.stopPropagation()}>
|
|
|
+ <ScrollArea speed={0.8}
|
|
|
+ horizontal={false}
|
|
|
+ stopScrollPropagation={true}
|
|
|
+ style={{maxHeight:'330px'}}
|
|
|
+ className={style["area"]}
|
|
|
+ verticalContainerStyle={contStyle}
|
|
|
+ verticalScrollbarStyle={barStyle}
|
|
|
+ contentClassName="content">
|
|
|
{datas&&datas.map((it,i)=>{
|
|
|
if(isSpecialPos){
|
|
|
return <li onClick={(e)=>this.handleClick(e,it,i)} className={this.getClass(it.id)}>{it.name}</li>
|
|
|
}
|
|
|
return <li onClick={(e)=>this.handleClick(e,it,i)} className={this.getClass(it.id)} title={it.name.length>8?it.name:''}>{it.name&&it.name.length>8?it.name.slice(0,8)+'...':it.name}</li>
|
|
|
})}
|
|
|
+ </ScrollArea>
|
|
|
</ul>;
|
|
|
}
|
|
|
}
|