@beisen-phoenix/lookup
Version:
---
351 lines (340 loc) • 16.8 kB
JavaScript
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Lookup from '../../src/index';
import Button from '@beisen-phoenix/button';
import Layer from '@beisen-phoenix/unmodeled-layer';
import {options, advanceParam, selectOption, options50 } from './mock/data';
import CmpDemo from '@beisen-phoenix/demo-container';
import clonedeep from 'lodash.clonedeep';
import './index.scss'
export default class extends Component {
constructor (props) {
super(props);
this.state = {
}
}
setVisible = (param) => {
this.setState(param)
}
getLook = (param, visible, selectedValue) => {
return <Lookup
options={clonedeep(options)}
onConfirm={(data) => {
let _state = {}
_state[visible] = false
_state[selectedValue] = !(data instanceof Array) ? [data] : data
this.setVisible(_state)
}}
onVisibleChange={() => {
let _state = {}
_state[visible] = false
this.setVisible(_state)
}}
selectValue={this.state[selectedValue] || selectOption}
{...param}
advanceParam={advanceParam}
/>
}
render () {
return (
<div>
<div className="phoenix-lookup-example--title">Lookup单选</div>
<div className="phoenix-lookup-example--wrapper">
<div className="phoenix-lookup-example--flex-item">
<CmpDemo
title="搜索单选"
desc="带头像、搜索、全部查找、选中样式、搜索200字限制"
>
<Layer
extraCls="unmodeled-layer-lookup"
trigger={['click']}
size={'large'}
destroyPopupOnHide={true}
visible={this.state.visible || false}
onVisibleChange={(visible) =>{
this.setState({visible: visible})
}}
content={this.getLook({
isAvator: true,
multiple:false,
isAdvanceVbl:true,
selectValue: selectOption
}, 'visible', 'selectedValue')}
footer={null}
onOk={()=> {}}
>
<Button>单选头像无搜索，默认选中样式</Button>
</Layer>
</CmpDemo>
<CmpDemo
title="搜索单选"
desc="搜索、全部查找、头象，无全部查找"
>
<Layer
extraCls="unmodeled-layer-lookup"
trigger={['click']}
size={'large'}
destroyPopupOnHide={true}
visible={this.state.visible_w || false}
onVisibleChange={(visible) =>{
this.setState({visible_w: visible})
}}
content={this.getLook({
isAvator: false,
multiple:false,
isAdvanceSearchVbl:false
}, 'visible_w', 'selectedValue_w')}
footer={null}
onOk={()=> {}}
>
<Button>搜索、全部查找、选中样式，无头象</Button>
</Layer>
</CmpDemo>
<CmpDemo
title="搜索单选"
desc="全部查找, 无搜索、无头像"
>
<Layer
extraCls="unmodeled-layer-lookup"
trigger={['click']}
size={'large'}
destroyPopupOnHide={true}
visible={this.state.visible_r || false}
onVisibleChange={(visible) =>{
this.setState({visible_r: visible})
}}
content={this.getLook({
isAvator: false,
multiple:false,
isAdvanceSearchVbl:true,
isSearchBox: false
}, 'visible_r', 'selectedValue_r')}
footer={null}
onOk={()=> {}}
>
<Button>全部查找, 无搜索、无头像</Button>
</Layer>
</CmpDemo>
<CmpDemo
title="搜索单选"
desc="自定义按钮，自定义全部查询"
>
<Layer
extraCls="unmodeled-layer-lookup"
trigger={['click']}
size={'large'}
destroyPopupOnHide={true}
visible={this.state.visible_u || false}
onVisibleChange={(visible) =>{
this.setState({visible_u: visible})
}}
content={this.getLook({
isAvator: false,
multiple:false,
moreText:'自定义名称',
btnOkText:'自定义名称'
}, 'visible_u', 'selectedValue_u')}
footer={null}
onOk={()=> {}}
>
<Button>自定义按钮，自定义全部查询</Button>
</Layer>
</CmpDemo>
<CmpDemo
title="搜索单选"
desc="数据为空展示"
>
<Layer
extraCls="unmodeled-layer-lookup"
trigger={['click']}
size={'large'}
destroyPopupOnHide={true}
visible={this.state.visible_o || false}
onVisibleChange={(visible) =>{
this.setState({visible_o: visible})
}}
content={this.getLook({
isAvator: false,
multiple:false,
options: [],
searchUrl: 'https://www.italent.cn/api/v1/110006/114573828/RemindV2/Get?dateTime&qqqq'
}, 'visible_o', 'selectedValue_o')}
footer={null}
onOk={()=> {}}
>
<Button>数据为空展示</Button>
</Layer>
</CmpDemo>
<CmpDemo
title="搜索单选"
desc="跟随父容器宽度"
>
<Layer
extraCls="unmodeled-layer-lookup"
trigger={['click']}
//size={'large'}
width={500}
destroyPopupOnHide={true}
visible={this.state.visible_s || false}
onVisibleChange={(visible) =>{
this.setState({visible_s: visible})
}}
content={this.getLook({
isAvator: false,
multiple:false,
isAdvanceSearchVbl:true,
isSearchBox: false
}, 'visible_s', 'selectedValue_s')}
footer={null}
onOk={()=> {}}
>
<Button>自定义宽父容器宽度，lookup跟随父容器宽度</Button>
</Layer>
</CmpDemo>
<CmpDemo
title="高级模式"
desc="直接弹出高级模式单选"
>
<Button onClick={() => {
this.setState({visible_p: true})
}}>高级模式</Button>
{this.getLook({
mode:'advanced',
isAvator: false,
advancedVbl: this.state.visible_p,
multiple:false,
options: [],
advanceParam: advanceParam
}, 'visible_p', 'selectedValue_p')}
</CmpDemo>
</div>
<div className="phoenix-lookup-example--flex-item">
<CmpDemo
title="搜索单选"
desc="搜索、全部查找、选中样式，无头象"
>
<Layer
extraCls="unmodeled-layer-lookup"
trigger={['click']}
size={'large'}
destroyPopupOnHide={true}
visible={this.state.visible_q || false}
onVisibleChange={(visible) =>{
this.setState({visible_q: visible})
}}
content={this.getLook({
isAvator: false,
multiple:false,
isAdvanceVbl:true
}, 'visible_q', 'selectedValue_q')}
footer={null}
onOk={()=> {}}
>
<Button>搜索、全部查找、选中样式，无头象</Button>
</Layer>
</CmpDemo>
<CmpDemo
title="搜索单选"
desc="搜索、头像，无全部查找"
>
<Layer
extraCls="unmodeled-layer-lookup"
trigger={['click']}
size={'large'}
destroyPopupOnHide={true}
visible={this.state.visible_e || false}
onVisibleChange={(visible) =>{
this.setState({visible_e: visible})
}}
content={this.getLook({
isAvator: true,
multiple:false,
isAdvanceVbl:true,
isSearchBox: false
}, 'visible_e', 'selectedValue_e')}
footer={null}
onOk={()=> {}}
>
<Button>搜索、头像，无全部查找</Button>
</Layer>
</CmpDemo>
<CmpDemo
title="搜索单选"
desc="全部查找，无搜索、无头像"
>
<Layer
extraCls="unmodeled-layer-lookup"
trigger={['click']}
size={'large'}
destroyPopupOnHide={true}
visible={this.state.visible_y || false}
onVisibleChange={(visible) =>{
this.setState({visible_y: visible})
}}
content={this.getLook({
isAvator: true,
multiple:false,
isAdvanceSearchVbl:false,
isSearchBox: false
}, 'visible_y', 'selectedValue_y')}
footer={null}
onOk={()=> {}}
>
<Button>头像, 无全部查找、无搜索</Button>
</Layer>
</CmpDemo>
<CmpDemo
title="搜索单选"
desc="loading"
>
<Layer
extraCls="unmodeled-layer-lookup"
trigger={['click']}
size={'large'}
destroyPopupOnHide={true}
visible={this.state.visible_i || false}
onVisibleChange={(visible) =>{
this.setState({visible_i: visible})
}}
content={this.getLook({
isAvator: false,
multiple:false,
options: []
}, 'visible_i', 'selectedValue_i')}
footer={null}
onOk={()=> {}}
>
<Button>loading</Button>
</Layer>
</CmpDemo>
<CmpDemo
title="搜索单选"
desc="最多限制加载50条"
>
<Layer
extraCls="unmodeled-layer-lookup"
trigger={['click']}
size={'large'}
destroyPopupOnHide={true}
visible={this.state.visible_a || false}
onVisibleChange={(visible) =>{
this.setState({visible_a: visible})
}}
content={this.getLook({
isAvator: true,
multiple:false,
isSearchBox: false,
options: clonedeep(options50)
}, 'visible_a', 'selectedValue_a')}
footer={null}
onOk={()=> {}}
>
<Button>最多限制加载50条</Button>
</Layer>
</CmpDemo>
</div>
</div>
</div>
)
}
}