@beisen/dropdown-list
Version:
DropDownList
457 lines (442 loc) • 18.1 kB
JavaScript
/* eslint-disable */
import React, {Component, PropTypes} from 'react'
import {render} from 'react-dom'
import DropDownList from './src/index';
import TextBox from '@beisen/text-box';
import ToolTip from '@beisen/tool-tip';
class Demo extends Component{
constructor(props) {
super(props)
let self = this;
this.state = {
"title":"title" //input框前的文字标识，可为空
// ,"placeholder":"" /**没有值的时候显示的内容(string)**/
,"defaultValue":"111111" //默认值
,"errorStatus": false
,"errorMsg":"出错了~~~！"
,"helpMsg":"312321"
,"hasSearch":true //是否显示下拉框
,"PromptMsg":"PromptMsg" //提示问题
,"hasClosebtn":true //是否显示Input框上的 删除按钮
,"limitCount": 5 //限制选择数量，当超过该数量后，其它的则禁用
,"multiple": true //下拉菜单为单选或者多选，true为多选，false为单选,默认为false
,"hasInput": true //多选时是否显示input
,"showInput": true //当有数据时且为true时不渲染input
,"lablePos": true //label位置，true时在左边，false在上边
,"lableTxt": false //label中文字对齐方式，true左对齐，false右对齐
,"children":[
{
"value":0
,"text":"查看详情"
,"isActive":false
,"isChecked":false
}
,{
"value":1
,"text":"性质维度"
,"isActive":false
,"isChecked":false
,"onlyShowInput":true //该参数为true的话，该数据仅在多选的input框中显示，不在下拉中显示
}
,{
"value":2
,"text":"地域维度"
,"isActive":false
,"isChecked":false
}
,{
"value":3
,"text":"包含下aaaaaaaaaaaaaaaaaaaaa属"
,"isActive":false
,"isChecked":false
}
,{
"value":4
,"text":"包含下属"
,"isActive":false
,"isChecked":false
},{
"value":5
,"text":"包含下属1"
,"isActive":false
,"isChecked":false
} ,{
"value":6
,"text":"包含下属2"
,"isActive":false
,"isChecked":false
} ,{
"value":7
,"text":"包含下属3"
,"isActive":false
,"isChecked":false
} ,{
"value":8
,"text":"包含下属4"
,"isActive":false
,"isChecked":false
} ,{
"value":9
,"text":"包含下属5"
,"isActive":false
,"isChecked":false
} ,{
"value":10
,"text":"包含下属6"
,"isActive":false
,"isChecked":false
} ,{
"value":11
,"text":"包含下属7"
,"isActive":false
,"isChecked":false
}
] /** MenuItem **/
,"hidden":false //是否显示\
,'autoShowPanel':true //当获取异步数据会自动渲染
,"showPanel": true //渲染下拉列表
,"disabled":false //是否禁用
,"readonly":false
,"required":true //是否显示必选星号
,"iconName":"pc-sys-arrowdown-nomal-svg" //右侧下拉按钮的样式
,"onClick":function(event, target, val){console.log(val)} /**点击后事件回调；event：事件，target: 事件对象，val：抛出的值**/
,"onBlur":function(event, val){console.log(val)} /**失去焦点后事件回调event：val：input抛出的值**/
,"onChange":function(event, target, val){console.log(event);console.log(target);console.log(val);} /**change后事件回调event：事件，target: 事件对象，val：input中值改变的值**/
,"onFocus":function(event, val){
console.log('focuse')
self.test2();
} /**获取焦点后事件回调event：事件，val：抛出的input中的值**/
,"onClose":function(status){console.log(status)}
}
}
test3(val){
this.setState({defaultValue:"adasdas"+val.text})
}
test2 = () => {
// let self = this;
// this.setState({
// showPanel:true
// })
// this.setState({children:[
// {
// "value":0
// ,"text":"查看详情"
// ,"isActive":false
// ,"isChecked":false
// }
// ,{
// "value":1
// ,"text":"性质维度"
// ,"isActive":false
// ,"isChecked":false
// ,"onlyShowInput":false //该参数为true的话，该数据仅在多选的input框中显示，不在下拉中显示
// }
// ,{
// "value":2
// ,"text":"地域维度"
// ,"isActive":false
// ,"isChecked":false
// }
// ,{
// "value":3
// ,"text":"包含下aaaaaaaaaaaaaaaaaaaaa属"
// ,"isActive":false
// ,"isChecked":false
// }
// ,{
// "value":4
// ,"text":"包含下属"
// ,"isActive":false
// ,"isChecked":false
// },{
// "value":5
// ,"text":"包含下属1"
// ,"isActive":false
// ,"isChecked":false
// } ,{
// "value":6
// ,"text":"包含下属2"
// ,"isActive":false
// ,"isChecked":false
// } ,{
// "value":7
// ,"text":"包含下属3"
// ,"isActive":false
// ,"isChecked":false
// } ,{
// "value":8
// ,"text":"包含下属4"
// ,"isActive":false
// ,"isChecked":false
// } ,{
// "value":9
// ,"text":"包含下属5"
// ,"isActive":false
// ,"isChecked":false
// } ,{
// "value":10
// ,"text":"包含下属6"
// ,"isActive":false
// ,"isChecked":false
// } ,{
// "value":11
// ,"text":"包含下属7"
// ,"isActive":false
// ,"isChecked":false
// } ,{
// "value":12
// ,"text":"哒哒哒"
// ,"isActive":false
// ,"isChecked":false
// } ,{
// "value":13
// ,"text":"发发发"
// ,"isActive":false
// ,"isChecked":false
// } ,{
// "value":14
// ,"text":"改改改"
// ,"isActive":false
// ,"isChecked":false
// } ,{
// "value":15
// ,"text":"哈哈哈"
// ,"isActive":false
// ,"isChecked":false
// } ,{
// "value":16
// ,"text":"旧家具"
// ,"isActive":false
// ,"isChecked":false
// } ,{
// "value":17
// ,"text":"快快快"
// ,"isActive":false
// ,"isChecked":false
// } ,{
// "value":18
// ,"text":"葡萄"
// ,"isActive":false
// ,"isChecked":false
// } ,{
// "value":19
// ,"text":"聚聚"
// ,"isActive":false
// ,"isChecked":false
// }
// ]})
}
componentDidMount(){
}
focus = () =>{
let self = this;
setTimeout(()=>{
self.setState({children:[
{
"value":0
,"text":"查看详情查看详情查看详情查看详情查看详情查看详情查看详情查看详情查看详情查看详情查看详情查看详情查看详情查看详情查看详情查看详情查看详情查看详情查看详情查看详情查看详情查看详情查看详情查看详情查看详情查看详情查看详情查看详情"
,"isActive":false
,"isChecked":true
,"tipText": "哎哎多撒多撒<br/>多撒多撒多所" //如果有该字段，则鼠标移入文字会一直显示tip,tip内容为该字段内容
}
,{
"value":1
,"text":"性质维度"
,"isActive":false
,"isChecked":false
,"onlyShowInput":false //该参数为true的话，该数据仅在多选的input框中显示，不在下拉中显示
}
,{
"value":2
,"text":"地域维度"
,"isActive":false
,"isChecked":false
}
,{
"value":3
,"text":"包含下aaaaaaaaaaaaaaaaaaaaa属"
,"isActive":false
,"isChecked":false
}
,{
"value":4
,"text":"包含下属"
,"isActive":false
,"isChecked":false
},{
"value":5
,"text":"包含下属1"
,"isActive":false
,"isChecked":false
} ,{
"value":6
,"text":"包含下属2"
,"isActive":false
,"isChecked":false
} ,{
"value":7
,"text":"包含下属3"
,"isActive":false
,"isChecked":false
} ,{
"value":8
,"text":"包含下属4"
,"isActive":false
,"isChecked":false
} ,{
"value":9
,"text":"包含下属5"
,"isActive":false
,"isChecked":false
} ,{
"value":10
,"text":"包含下属6"
,"isActive":false
,"isChecked":false
} ,{
"value":11
,"text":"包含下属7"
,"isActive":false
,"isChecked":false
} ,{
"value":12
,"text":"哒哒哒"
,"isActive":false
,"isChecked":false
} ,{
"value":13
,"text":"发发发"
,"isActive":false
,"isChecked":false
} ,{
"value":14
,"text":"改改改"
,"isActive":false
,"isChecked":false
} ,{
"value":15
,"text":"哈哈哈"
,"isActive":false
,"isChecked":false
} ,{
"value":16
,"text":"旧家具"
,"isActive":false
,"isChecked":false
} ,{
"value":17
,"text":"快快快"
,"isActive":false
,"isChecked":false
} ,{
"value":18
,"text":"葡萄"
,"isActive":false
,"isChecked":false
} ,{
"value":19
,"text":"聚聚"
,"isActive":false
,"isChecked":false
}
]})
},1000)
}
test = () =>{
let test = Object.assign({},[],this.state.children)
test.map((item)=>{
item.isChecked = false;
})
this.setState({"children":test})
}
test1 = () =>{
this.setState({readonly: false})
}
render () {
let option = {
"title":"title" //input框前的文字标识，可为空
// ,"placeholder":"" /**没有值的时候显示的内容(string)**/
,"defaultValue":"默认值默认值默认值默认值默认值默认值默认值默认值默认值默认值默认值默认值默认值默认值默认值默认值默认值" //默认值
,"errorStatus": false
,"errorMsg":"出错了~~~！"
,"helpMsg":"312321"
,"hasSearch": true
,"PromptMsg":"PromptMsg"
,"hasClosebtn":true
,"multiple": false //下拉菜单为单选或者多选，true为多选，false为单选,默认为false
,"hasInput": true //多选时是否显示input
,"limitCount": 5 //限制选择数量，当超过该数量后，其它的则禁用
,"showInput": true
,"lablePos": false //label位置，true时在左边，false在上边
,"lableTxt": false //label中文字对齐方式，true左对齐，false右对齐
,"isShowTips": true //是否显示tooltip，若不传默认显示
,"sideTip": false //toolTip是否左右显示
,"children":this.state.children /** MenuItem **/
,"hidden":true //是否显示\
,'autoShowPanel':true //当获取异步数据会自动渲染
,"showPanel": true
,"disabled":false //是否禁用
,"readonly":false
,"required":true //是否显示必选星号
,"iconName":"pc-sys-arrowdown-nomal-svg" //右侧下拉按钮的样式
,"onClick":function(event, target, val){
console.log('1111111')
} /**点击后事件回调；event：事件，target: 事件对象，val：抛出的值**/
,"onBlur":function(event, val){console.log(val)} /**失去焦点后事件回调event：val：input抛出的值**/
,"onChange":function(event, target, val){
// self.test3(val)
// console.log(event);console.log(target);
console.log(val);
} /**change后事件回调event：事件，target: 事件对象，val：input中值改变的值**/
,"onFocus":function(event, val){
console.log('focuse')
// self.test2();
} /**获取焦点后事件回调event：事件，val：抛出的input中的值**/
,"onClose":function(status){console.log(status)}
}
var textboxData = {
"showTag": "测试测试"
,"defaultValue": '请输入请输入请输入请输入请输入请输入请输入请输入请输入请输入请输入请输入请输入请输入请输入请输入请输入'
,"placeHolder": "请输入请输入请输入请输入请输入请输入请输入请输入请输入请输入请输入请输入请输入请输入请输入请输入请输入"
,"errorStatus": false
,"showText": "1111"
,"errorMsg": "出错了~~~！"
,"symbol": "" //符号，为空时没有符号
,"helpMsg": "dsadsa"
,"sideTip": false //toolTip是否左右显示
,"hiddenTip": false //toolTip是否显示
,"maxLength": "30"
,"hidden": false
// ,"hasClosebtn": false
,"disabled": false
,"readonly": false
,"required": true
,"lablePos": true //label位置，true时在左边，false在上边
,"lableTxt": false //label中文字对齐方式，true左对齐，false右对齐
,onClick: function(event, status, value) {}
,onFocus: function(event, status, value) {}
,onChange: function(event, status, value) {
console.log(event.target)
}
,onBlur: function(event, status, value) {
console.log(value)
}
}
return (
<DropDownList
{...this.state}
/>
// <div style={{height:"800px"}}>
// <TextBox {...textboxData} />
// <button onClick={this.test}>12321</button>
// <div style={{marginTop:"500px"}}>
// <DropDownList {...this.state} />
// </div>
// <div style={{marginLeft:"500px",width:"500px"}}>
// {/* <DropDownList {...option} /> */}
// </div>
// </div>
)
}
}
render(<Demo />, document.getElementById('content'))