@beisen-platform/dropdown-list
Advanced tools
Comparing version 1.0.14 to 1.0.16
@@ -379,2 +379,5 @@ import DropDownList from '../../src'; | ||
}; | ||
const customEmptyResult = <div>asdasdasdasd</div> | ||
return ( | ||
@@ -384,3 +387,3 @@ <div style={{ height: '100000px' }}> | ||
<div style={{ marginTop: '300px' }}> | ||
<DropDownList {...this.state} /> | ||
<DropDownList {...this.state} customEmptyResult={customEmptyResult}/> | ||
</div> | ||
@@ -387,0 +390,0 @@ <div style={{ marginLeft: '500px', width: '500px' }}>{/* <DropDownList {...option} /> */}</div> |
453
lib/index.js
import _extends from "@babel/runtime/helpers/extends"; | ||
import _typeof from "@babel/runtime/helpers/typeof"; | ||
import _classCallCheck from "@babel/runtime/helpers/classCallCheck"; | ||
import _createClass from "@babel/runtime/helpers/createClass"; | ||
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn"; | ||
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf"; | ||
import _inherits from "@babel/runtime/helpers/inherits"; | ||
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized"; | ||
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose"; | ||
import React, { Component } from 'react'; | ||
@@ -20,3 +15,3 @@ import { findDOMNode } from 'react-dom'; | ||
function (_Component) { | ||
_inherits(App, _Component); | ||
_inheritsLoose(App, _Component); | ||
@@ -26,6 +21,4 @@ function App(props) { | ||
_classCallCheck(this, App); | ||
_this = _Component.call(this, props) || this; | ||
_this = _possibleConstructorReturn(this, _getPrototypeOf(App).call(this, props)); | ||
_this.clearToolTipDom = function () { | ||
@@ -42,3 +35,3 @@ var dom_1 = document.getElementById('DropdownList_ul'); | ||
try { | ||
findDOMNode(_assertThisInitialized(_assertThisInitialized(_this))); | ||
findDOMNode(_assertThisInitialized(_this)); | ||
} catch (e) { | ||
@@ -135,245 +128,241 @@ _this.CommonMount.unmountBox(); | ||
_createClass(App, [{ | ||
key: "componentWillReceiveProps", | ||
value: function componentWillReceiveProps(nextProps) { | ||
if (JSON.stringify(nextProps.children) != JSON.stringify(this.props.children)) { | ||
this.setState({ | ||
children: nextProps.children, | ||
selectDate: nextProps.children.filter(function (item) { | ||
return item.isChecked; | ||
}) | ||
}); | ||
} | ||
var _proto = App.prototype; | ||
if (nextProps.defaultValue != this.state.defaultValue) { | ||
this.setState({ | ||
defaultValue: nextProps.defaultValue | ||
}); | ||
} | ||
_proto.componentWillReceiveProps = function componentWillReceiveProps(nextProps) { | ||
if (JSON.stringify(nextProps.children) != JSON.stringify(this.props.children)) { | ||
this.setState({ | ||
children: nextProps.children, | ||
selectDate: nextProps.children.filter(function (item) { | ||
return item.isChecked; | ||
}) | ||
}); | ||
} | ||
}, { | ||
key: "componentDidUpdate", | ||
value: function componentDidUpdate() { | ||
var dom = document.getElementsByClassName('form-item__control_is-active')[0]; | ||
if (dom && this.state.keepActive && this.props.autoShowPanel) this.renderDOM(dom, this.state.selectDate); | ||
if (this.props.readonly || this.props.disabled) { | ||
this.CommonMount.unmountBox(); | ||
} | ||
if (nextProps.defaultValue != this.state.defaultValue) { | ||
this.setState({ | ||
defaultValue: nextProps.defaultValue | ||
}); | ||
} | ||
}, { | ||
key: "componentWillUnmount", | ||
value: function componentWillUnmount() { | ||
}; | ||
_proto.componentDidUpdate = function componentDidUpdate() { | ||
var dom = document.getElementsByClassName('form-item__control_is-active')[0]; | ||
if (dom && this.state.keepActive && this.props.autoShowPanel) this.renderDOM(dom, this.state.selectDate); | ||
if (this.props.readonly || this.props.disabled) { | ||
this.CommonMount.unmountBox(); | ||
} | ||
}, { | ||
key: "renderDOM", | ||
value: function renderDOM(tar, selectDate) { | ||
if (!this.props.showPanel || !tar) return; | ||
var children = this.state.children; | ||
children.map(function (item, index) { | ||
item.isChecked = false; | ||
selectDate.map(function (it, i) { | ||
if (item.value == it.value) { | ||
item.isChecked = true; | ||
} | ||
}); | ||
}); | ||
var self = this; | ||
var dropdownDate = { | ||
limitCount: this.props.limitCount, | ||
multiple: this.props.multiple, | ||
children: children.filter(function (item) { | ||
return !item.onlyShowInput; | ||
}), | ||
dropdownWidth: tar.offsetWidth, | ||
hasSearch: children.length > 10 && this.props.hasSearch != false, | ||
onClick: function onClick(event, val) { | ||
if (_typeof(val) == 'object' && val.constructor == Array) { | ||
self.setState({ | ||
selectDate: val, | ||
keepActive: false | ||
}); | ||
self.props.onClick && self.props.onClick(event, event.target, val); | ||
self.props.onChange && self.props.onChange(event, event.target, val); | ||
} else { | ||
self.setState({ | ||
keepActive: false | ||
}); | ||
self.props.onClick && self.props.onClick(event, event.target, val); | ||
self.props.onChange && self.props.onChange(event, event.target, val); | ||
} | ||
}; | ||
self.CommonMount.unmountBox(); | ||
document.removeEventListener('mousedown', self.onClose); | ||
_proto.componentWillUnmount = function componentWillUnmount() { | ||
this.CommonMount.unmountBox(); | ||
}; | ||
_proto.renderDOM = function renderDOM(tar, selectDate) { | ||
if (!this.props.showPanel || !tar) return; | ||
var children = this.state.children; | ||
children.map(function (item, index) { | ||
item.isChecked = false; | ||
selectDate.map(function (it, i) { | ||
if (item.value == it.value) { | ||
item.isChecked = true; | ||
} | ||
}; | ||
var dropHeight, documentHeight; | ||
documentHeight = document.body.scrollHeight == 0 ? document.documentElement.scrollHeight : document.body.scrollHeight; | ||
var dropcount = this.props.children.length > 10 ? 10 : this.props.children.length; | ||
dropHeight = this.props.children.length > 10 ? this.props.multiple ? 374 : 260 : this.props.multiple ? dropcount * 26 + 66 : dropcount * 26 + 10; | ||
}); | ||
}); | ||
var self = this; | ||
var dropdownDate = { | ||
limitCount: this.props.limitCount, | ||
multiple: this.props.multiple, | ||
children: children.filter(function (item) { | ||
return !item.onlyShowInput; | ||
}), | ||
dropdownWidth: tar.offsetWidth, | ||
hasSearch: children.length > 10 && this.props.hasSearch != false, | ||
onClick: function onClick(event, val) { | ||
if (typeof val == 'object' && val.constructor == Array) { | ||
self.setState({ | ||
selectDate: val, | ||
keepActive: false | ||
}); | ||
self.props.onClick && self.props.onClick(event, event.target, val); | ||
self.props.onChange && self.props.onChange(event, event.target, val); | ||
} else { | ||
self.setState({ | ||
keepActive: false | ||
}); | ||
self.props.onClick && self.props.onClick(event, event.target, val); | ||
self.props.onChange && self.props.onChange(event, event.target, val); | ||
} | ||
while (documentHeight < dropHeight) { | ||
dropHeight = dropHeight - 26; | ||
} | ||
self.CommonMount.unmountBox(); | ||
document.removeEventListener('mousedown', self.onClose); | ||
}, | ||
customEmptyResult: this.props.customEmptyResult | ||
}; | ||
var dropHeight, documentHeight; | ||
documentHeight = document.body.scrollHeight == 0 ? document.documentElement.scrollHeight : document.body.scrollHeight; | ||
var dropcount = this.props.children.length > 10 ? 10 : this.props.children.length; | ||
dropHeight = this.props.children.length > 10 ? this.props.multiple ? 374 : 260 : this.props.multiple ? dropcount * 26 + 66 : dropcount * 26 + 10; | ||
var maxHeight = this.props.multiple ? this.props.children.length > 10 ? dropHeight - 118 : dropHeight - 66 : dropHeight; | ||
maxHeight = maxHeight < 120 ? 120 : maxHeight; | ||
maxHeight = maxHeight > 260 ? 260 : maxHeight; | ||
dropHeight = this.props.children.length ? dropHeight : 0; | ||
var showAutoUl = React.createElement(DropDown, _extends({}, dropdownDate, { | ||
maxHeight: maxHeight | ||
})); | ||
this.CommonMount.renderDom('mount-box-dropdownlist', // wrap's classname & id | ||
showAutoUl, // content dom | ||
tar, // 跟随目标 | ||
[tar, //挂载目标节点 | ||
{ | ||
// 挂载元素宽高 {width: '', height: ''} | ||
width: tar.clientWidth, | ||
// 挂载宽度 | ||
height: dropHeight | ||
}], true, //labeL和input框是否为竖向结构,会留出对应的label空间 | ||
0, //水平向左偏移量,为负数则向右 | ||
false, //弹层靠左靠右模式,默认为false 靠左模式 | ||
100, //window.onresize执行时间,默认100ms | ||
false, //输入框高度 | ||
this.props.zindex //自定义zindex false/undefined, false不传zindex,undefiend默认zindex为999999 | ||
); | ||
while (documentHeight < dropHeight) { | ||
dropHeight = dropHeight - 26; | ||
} | ||
}, { | ||
key: "render", | ||
value: function render() { | ||
if (this.tar && document.getElementById('mount-box-dropdownlist')) { | ||
var _bottom = this.tar.getBoundingClientRect().bottom; | ||
var _width = this.tar.offsetWidth; | ||
document.getElementById('mount-box-dropdownlist').style.top = _bottom + 'px'; | ||
document.getElementById('mount-box-dropdownlist').style.width = _width + 'px'; | ||
} | ||
var self = this; | ||
var _this$props = this.props, | ||
title = _this$props.title, | ||
PromptMsg = _this$props.PromptMsg, | ||
errorStatus = _this$props.errorStatus, | ||
errorMsg = _this$props.errorMsg, | ||
helpMsg = _this$props.helpMsg, | ||
multiple = _this$props.multiple, | ||
disabled = _this$props.disabled, | ||
readonly = _this$props.readonly, | ||
required = _this$props.required, | ||
hasClosebtn = _this$props.hasClosebtn, | ||
lablePos = _this$props.lablePos, | ||
lableTxt = _this$props.lableTxt, | ||
hasInput = _this$props.hasInput, | ||
showInput = _this$props.showInput, | ||
isShowTips = _this$props.isShowTips, | ||
sideTip = _this$props.sideTip; | ||
var oriData = this.state.selectDate; | ||
oriData.map(function (item, index) { | ||
item['value'] = item.value, item['name'] = item.text, item['isActive'] = item.isActive, item['tipText'] = item.tipText, item['isChecked'] = item.isChecked; | ||
}); | ||
var inputDate = { | ||
status: '', | ||
//展示态为show,编辑态为其他 | ||
multiple: multiple, | ||
//单选还是多选 | ||
titleDate: { | ||
title: title, | ||
//标题 | ||
required: required, | ||
//必选 | ||
helpMsg: helpMsg, | ||
//帮助信息,当为空时没有帮助信息 | ||
lablePos: lablePos, | ||
//label位置,true时在左边,false在上边 | ||
lableTxt: lableTxt //label中文字对齐方式,true左对齐,false右对齐 | ||
var maxHeight = this.props.multiple ? this.props.children.length > 10 ? dropHeight - 118 : dropHeight - 66 : dropHeight; | ||
maxHeight = maxHeight < 120 ? 120 : maxHeight; | ||
maxHeight = maxHeight > 260 ? 260 : maxHeight; | ||
dropHeight = this.props.children.length ? dropHeight : 0; | ||
var showAutoUl = React.createElement(DropDown, _extends({}, dropdownDate, { | ||
maxHeight: maxHeight | ||
})); | ||
this.CommonMount.renderDom('mount-box-dropdownlist', // wrap's classname & id | ||
showAutoUl, // content dom | ||
tar, // 跟随目标 | ||
[tar, //挂载目标节点 | ||
{ | ||
// 挂载元素宽高 {width: '', height: ''} | ||
width: tar.clientWidth, | ||
// 挂载宽度 | ||
height: dropHeight | ||
}], true, //labeL和input框是否为竖向结构,会留出对应的label空间 | ||
0, //水平向左偏移量,为负数则向右 | ||
false, //弹层靠左靠右模式,默认为false 靠左模式 | ||
100, //window.onresize执行时间,默认100ms | ||
false, //输入框高度 | ||
this.props.zindex //自定义zindex false/undefined, false不传zindex,undefiend默认zindex为999999 | ||
); | ||
}; | ||
}, | ||
commonDate: { | ||
defaultValue: this.state.defaultValue, | ||
//默认文字 | ||
placeholder: this.state.defaultPlaceholder, | ||
//input中placeholder | ||
keepActive: this.state.keepActive, | ||
//保持蓝线一直存在 | ||
PromptMsg: PromptMsg, | ||
//提示信息,为空时不显示 | ||
errorStatus: errorStatus, | ||
//报错 | ||
errorMsg: errorMsg, | ||
//报错信息,为空时不显示 | ||
disabled: disabled, | ||
//input的disable状态,没有下划线 | ||
readonly: readonly, | ||
//input的readonly状态 | ||
isShowTips: isShowTips, | ||
//是否显示tooltip,若不传默认显示 | ||
sideTip: sideTip //toolTip是否左右显示 | ||
_proto.render = function render() { | ||
if (this.tar && document.getElementById('mount-box-dropdownlist')) { | ||
var _bottom = this.tar.getBoundingClientRect().bottom; | ||
var _width = this.tar.offsetWidth; | ||
document.getElementById('mount-box-dropdownlist').style.top = _bottom + 'px'; | ||
document.getElementById('mount-box-dropdownlist').style.width = _width + 'px'; | ||
} | ||
}, | ||
showDate: { | ||
isLink: false, | ||
//展示态是否是链接 | ||
linkValue: '', | ||
//展示态链接地址 | ||
selfJump: true //链接跳转方式 | ||
var self = this; | ||
var _this$props = this.props, | ||
title = _this$props.title, | ||
PromptMsg = _this$props.PromptMsg, | ||
errorStatus = _this$props.errorStatus, | ||
errorMsg = _this$props.errorMsg, | ||
helpMsg = _this$props.helpMsg, | ||
multiple = _this$props.multiple, | ||
disabled = _this$props.disabled, | ||
readonly = _this$props.readonly, | ||
required = _this$props.required, | ||
hasClosebtn = _this$props.hasClosebtn, | ||
lablePos = _this$props.lablePos, | ||
lableTxt = _this$props.lableTxt, | ||
hasInput = _this$props.hasInput, | ||
showInput = _this$props.showInput, | ||
isShowTips = _this$props.isShowTips, | ||
sideTip = _this$props.sideTip; | ||
var oriData = this.state.selectDate; | ||
oriData.map(function (item, index) { | ||
item['value'] = item.value, item['name'] = item.text, item['isActive'] = item.isActive, item['tipText'] = item.tipText, item['isChecked'] = item.isChecked; | ||
}); | ||
var inputDate = { | ||
status: '', | ||
//展示态为show,编辑态为其他 | ||
multiple: multiple, | ||
//单选还是多选 | ||
titleDate: { | ||
title: title, | ||
//标题 | ||
required: required, | ||
//必选 | ||
helpMsg: helpMsg, | ||
//帮助信息,当为空时没有帮助信息 | ||
lablePos: lablePos, | ||
//label位置,true时在左边,false在上边 | ||
lableTxt: lableTxt //label中文字对齐方式,true左对齐,false右对齐 | ||
}, | ||
singleDate: { | ||
closeBtn: hasClosebtn == undefined || hasClosebtn ? true : false, | ||
//是否使用close按钮 | ||
arrowdownBtn: true, | ||
//是否使用下拉图标 | ||
keepValue: true, | ||
//用于带下拉,可以focue以及蓝线等,只是不可以输入值,通过defaultvalue改变 | ||
handlerClick: function handlerClick(event, status, value) { | ||
if (readonly || disabled) return; // if (event.target.tagName == 'INPUT') { | ||
// self.handlerClick(event, event.target.parentNode) | ||
// } else { | ||
}, | ||
commonDate: { | ||
defaultValue: this.state.defaultValue, | ||
//默认文字 | ||
placeholder: this.state.defaultPlaceholder, | ||
//input中placeholder | ||
keepActive: this.state.keepActive, | ||
//保持蓝线一直存在 | ||
PromptMsg: PromptMsg, | ||
//提示信息,为空时不显示 | ||
errorStatus: errorStatus, | ||
//报错 | ||
errorMsg: errorMsg, | ||
//报错信息,为空时不显示 | ||
disabled: disabled, | ||
//input的disable状态,没有下划线 | ||
readonly: readonly, | ||
//input的readonly状态 | ||
isShowTips: isShowTips, | ||
//是否显示tooltip,若不传默认显示 | ||
sideTip: sideTip //toolTip是否左右显示 | ||
var target; | ||
}, | ||
showDate: { | ||
isLink: false, | ||
//展示态是否是链接 | ||
linkValue: '', | ||
//展示态链接地址 | ||
selfJump: true //链接跳转方式 | ||
if (event.className == 'u-input') { | ||
target = event; | ||
}, | ||
singleDate: { | ||
closeBtn: hasClosebtn == undefined || hasClosebtn ? true : false, | ||
//是否使用close按钮 | ||
arrowdownBtn: true, | ||
//是否使用下拉图标 | ||
keepValue: true, | ||
//用于带下拉,可以focue以及蓝线等,只是不可以输入值,通过defaultvalue改变 | ||
handlerClick: function handlerClick(event, status, value) { | ||
if (readonly || disabled) return; // if (event.target.tagName == 'INPUT') { | ||
// self.handlerClick(event, event.target.parentNode) | ||
// } else { | ||
if (event.style.maxWidth.indexOf('calc') >= 0) { | ||
target = event.parentNode; | ||
} | ||
} else if (event.target.className == 'u-input') { | ||
target = event.target.parentNode; | ||
} else { | ||
target = event.target; | ||
var target; | ||
if (event.className == 'u-input') { | ||
target = event; | ||
if (event.style.maxWidth.indexOf('calc') >= 0) { | ||
target = event.parentNode; | ||
} | ||
} else if (event.target.className == 'u-input') { | ||
target = event.target.parentNode; | ||
} else { | ||
target = event.target; | ||
} | ||
self.handlerClick(event, target); // } | ||
}, | ||
dropClick: function dropClick(event, value, dom) { | ||
self.handlerClick(event, dom.parentNode); | ||
}, | ||
handlerChange: function handlerChange(event, status, value) { | ||
self.props.onChange && self.props.onChange(event, status, value); | ||
} | ||
self.handlerClick(event, target); // } | ||
}, | ||
multiDate: { | ||
hasInput: hasInput, | ||
showInput: showInput, | ||
selectDate: oriData, | ||
//数据 | ||
handlerClick: function handlerClick(event, dom) { | ||
self.handlerClick(event, dom); | ||
}, | ||
itemClose: function itemClose(event, item, index, selectDate) { | ||
self.itemClose(event, index, item); | ||
}, | ||
dropClick: function dropClick(event, status, dom) { | ||
self.handlerClick(event, dom); | ||
} | ||
dropClick: function dropClick(event, value, dom) { | ||
self.handlerClick(event, dom.parentNode); | ||
}, | ||
handlerChange: function handlerChange(event, status, value) { | ||
self.props.onChange && self.props.onChange(event, status, value); | ||
} | ||
}; | ||
return React.createElement(InputBox, _extends({}, inputDate, { | ||
ref: "inputbox" | ||
})); | ||
} | ||
}]); | ||
}, | ||
multiDate: { | ||
hasInput: hasInput, | ||
showInput: showInput, | ||
selectDate: oriData, | ||
//数据 | ||
handlerClick: function handlerClick(event, dom) { | ||
self.handlerClick(event, dom); | ||
}, | ||
itemClose: function itemClose(event, item, index, selectDate) { | ||
self.itemClose(event, index, item); | ||
}, | ||
dropClick: function dropClick(event, status, dom) { | ||
self.handlerClick(event, dom); | ||
} | ||
} | ||
}; | ||
return React.createElement(InputBox, _extends({}, inputDate, { | ||
ref: "inputbox" | ||
})); | ||
}; | ||
@@ -380,0 +369,0 @@ return App; |
{ | ||
"name": "@beisen-platform/dropdown-list", | ||
"version": "1.0.14", | ||
"version": "1.0.16", | ||
"description": "平台drop-down-list组件", | ||
@@ -5,0 +5,0 @@ "main": "lib/index.js", |
@@ -86,3 +86,4 @@ import React, { Component } from 'react'; | ||
document.removeEventListener('mousedown', self.onClose); | ||
} | ||
}, | ||
customEmptyResult: this.props.customEmptyResult | ||
}; | ||
@@ -127,2 +128,3 @@ let dropHeight, documentHeight; | ||
} | ||
clearToolTipDom = () => { | ||
@@ -129,0 +131,0 @@ let dom_1 = document.getElementById('DropdownList_ul'); |
706248
257
5817