joywok-material-components
Version:
<h1 align="center"> Joywok Material Components </h1>
228 lines (218 loc) • 7.15 kB
JavaScript
// description.js
import React, {Component, Fragment} from 'react';
import {withStyles} from "@material-ui/core";
import Slide from '@material-ui/core/Slide';
import Fade from '@material-ui/core/Fade';
import Button from '@material-ui/core/Button';
import request from '../utils/request';
import Input from '../input/customInput';
import Loading from "../loading/index";
import Checkbox from '../checkbox/normal';
const styles = theme => ({
buttonItem: {
minWidth: window.unit * 7.8,
height: window.unit * 3,
lineHeight: window.unit * 3 + 'px',
padding: 0,
minHeight: 0
},
agreeBtn: Underscore.extend({
minWidth: window.unit * (7.8) + 'px ',
background: "#00C78B",
color: '#ffffff',
"&:hover": {
background: "#00C78B",
},
borderRadius: 3,
marginRight: 0,
marginLeft: window.unit * (1.2) + 'px ',
}),
cancelBtn: {
minWidth: window.unit * (7.8) + 'px ',
background: "#ffffff",
color: '#00C78B',
"&:hover": {
background: "#ffffff",
},
border: '1px solid #00C78B',
borderRadius: 3,
marginRight: 0,
marginLeft: window.unit * (1.2) + 'px ',
}
})
class ChoseUser extends React.Component {
constructor(props) {
super(props);
this.state = {
open: true,
loading: true,
check:props.check || [],
searchValue:''
}
this.fetchTime = null;
}
removeCustomDialog() {
let self = this;
setTimeout(function () {
$('#root-' + self.props.containerId).remove();
$('body').removeClass('overflowhidden');
}, 350)
}
handleClose(e) {
this.setState({open: false});
this.props.onClose && this.props.onClose();
if (typeof (this.props.dialogType) != 'undefined') {
this.props.events.emit('close', this);
}
this.removeCustomDialog()
}
handleDialogClose() {
this.setState({open: false});
this.removeCustomDialog()
}
agreeClick() {
this.props.onSave && this.props.onSave();
if (typeof (this.props.dialogType) != 'undefined') {
this.props.events.emit('save', this);
}
}
onChange() {
let self = this;
setTimeout(function () {
let data = {
check:self.state.check
}
self.props.events.emit('change', data);
}, 0)
}
onChangeValue(e){
let self = this;
let value = e.target.value;
this.setState({
searchValue:value
})
clearTimeout(this.fetchTime);
this.fetchTime = setTimeout(function(){
self.requestFetch();
},500)
}
selectItem(e,data){
console.log(e)
let newList = [];
if(e.length!=0){
newList = JSON.parse(JSON.stringify(this.state.check));
newList.push(data);
}else{
_.each(this.state.check,function(i){
if(i['id']!=data['id']){
newList.push(i)
}
})
}
this.setState({
check:newList
})
this.onChange();
}
render() {
const {classes} = this.props;
let data = this.props.data;
let self = this;
return (
<div ref="asdasdasd" className="zzzzzzzz">
<div className="storage-modal" onClick={(e) => {
e.stopPropagation();
e.nativeEvent.stopImmediatePropagation();
}}>
<Fade in={this.state.open}>
<div className="storage-modal-bg"></div>
</Fade>
<Slide direction="up" in={this.state.open}>
<div className={"storage-modal-w choseuser"}>
<div className={"storage-modal-c"}>
<div className="storage-modal-h">
<i className="icon-dialog-close" onClick={(e) => self.handleClose(e)}></i>
<span>分派给</span>
</div>
<div className={"storage-modal-search"}>
<i className={"icon-search"}></i>
<Input value={this.state.value} onChange={(e) => self.onChangeValue(e)} placeholder={i18n("placeholder.search")}
className={"no-border"}/>
</div>
<div className="storage-modal-main">
{
this.state.loading ? <Loading show={true}></Loading> :
<div className={"choseuser-list"}>
{
this.state.list.length!=0?_.map(this.state.list,function (item,key) {
return <div className={"choseuser-i-group"}>
<div className={"choseuser-i-title"}>{item['title'].toUpperCase()}</div>
<div className={"choseuser-i-c"}>
{
_.map(item['list'],function (i) {
return <div title={i['name']} className={"choseuser-i-item "+(_.findWhere(self.state.check,{id:i['id']})?'active':"")} onClick={(e)=>self.choseTag(i)}>
<Checkbox value={(_.findWhere(self.state.check,{id:i['id']})?["1"]:[])} options={[{key:"1"}]} onChange={(e)=>self.selectItem(e,i)}></Checkbox><span className={"choseuser-i-item-name ellipsis"}>{i['name']}</span>
</div>
})
}
</div>
</div>
}):<div className={'choseuser-empty'}>
<img src={distPath+"images/empty-specail.png"}/>
<p>{i18n("label.console.base.no-found-info")}</p>
</div>
}
</div>
}
</div>
{
this.props.btns ? this.props.btns : <div className="storage-modal-btn">
<Button onClick={(e) => this.handleClose(e)}
className={classes.buttonItem + ' ' + classes.cancelBtn}>{i18n("label.form.cancel")}</Button>
<Button disabled={this.state.check.length!=0?false:true} onClick={(e) => this.agreeClick(e)}
className={classes.buttonItem + ' ' + classes.agreeBtn}>{i18n("btn.tasktemplate.selected")}</Button>
</div>
}
</div>
</div>
</Slide>
</div>
</div>
);
}
requestFetch(){
let self = this;
this.setState({
loading:true
})
let loadingData = {
client:2
};
if(this.state.searchValue.lenght!=0){
loadingData['sk'] = this.state.searchValue;
}
request(this.props.fetchurl, {
method: "GET",
body:loadingData
}).then(function (resp) {
self.setState({
loading: false,
list: resp.data.JMDRStoreMembers || [],
})
})
}
choseTag(data){
this.setState({
active:data
})
this.onChange();
}
componentDidMount() {
let self = this;
$('body').addClass('overflowhidden');
this.requestFetch();
}
componentDidUpdate() {
}
}
export default withStyles(styles)(ChoseUser);