joywok-material-components
Version:
<h1 align="center"> Joywok Material Components </h1>
210 lines (204 loc) • 8.33 kB
JavaScript
import React from 'react';
import {Dialog, DialogTitle, InputBase, Paper, DialogActions, DialogContent, Typography, IconButton, Grid, Radio, RadioGroup, Checkbox} from '@material-ui/core';
import {withStyles} from '@material-ui/core/styles';
import CloseIcon from '@material-ui/icons/Close';
import SearchIcon from '@material-ui/icons/Search';
import moment from 'moment';
import Button from './../button';
import request from './../utils/request';
require('./style/material.css');
const styles = {
textSecondary: {
color: '#f00'
},
root: {
flexGrow: 1
},
overrides: {
},
box: {
}
};
class materialSelect extends React.Component {
constructor(props) {
super(props);
this.cls = props.classes;
console.log(this.cls, 'classes');
let hasItems = [];
let pi = this.clone( this.props.hasItems );
if( Object.prototype.toString.call(pi) === '[object Object]' && typeof pi.length==='undefined' ){
hasItems = [pi];
}else if( Object.prototype.toString.call(pi) === '[object Array]' ||
(Object.prototype.toString.call(pi) === '[object Object]' && typeof pi.length==='number') ){
hasItems = pi;
}
let opt = {
listType: this.props.listType,
showList: this.props.listType.length===2?0:1,
defaultList: this.props.listType[0],
listItems: [],
selectItems: hasItems,
searchKey: '',
pageno: 0,
multiple: this.props.multiple || false, // 多选
radioSelect: '',
checkboxSelect: []
};
if(hasItems.length>0){
let tmpsel = hasItems.map((it)=>{ return it.id; });
if(this.props.multiple===true){
opt.checkboxSelect = tmpsel;
}else{
opt.radioSelect = hasItems[0].id;
}
}
this.state = opt;
}
showList = (v) => {
this.setState({showList: 1, defaultList: v});
}
onClose = () => {
this.props.onClose(null);
}
onOk = () => {
if(this.state.multiple===true){
this.props.onClose( this.state.selectItems );
}else{
this.props.onClose( this.state.selectItems[0] );
}
}
radioSelect = (e, v) => {
let item = this.clone( this.state.listItems.find((item)=>{ return item.id===v; }) );
this.setState({radioSelect: v, selectItems: [item]});
}
checkboxSelect = (e, v) => {
let a = [];
let items = this.clone( this.state.selectItems );
if(v===true){
let item = this.clone( this.state.listItems.find((it)=>{return it.id===e.target.value; }) );
let b = this.state.checkboxSelect;
b.push( e.target.value );
a = b;
items.push( item );
}else{
a = this.state.checkboxSelect.filter((it)=>{ return e.target.value!==it; });
items = items.filter((it)=>{ return it.id!==e.target.value; });
}
this.setState({checkboxSelect: a, selectItems: items});
}
clone(obj){
return {
__proto__: Object.getPrototypeOf(obj),
...obj
};
}
fetchList(){
const url = '/api/subscription/materiallist?id='+this.props.srcId+'&pageno='+this.state.pageno+'&type='+this.state.defaultList+'&search='+this.state.searchKey;
request(url, {method: 'GET'}).then((resp)=>{
console.log(resp, 'resp');
if(resp && resp.data && resp.data.JMSubscription){
this.setState({listItems: resp.data.JMSubscription});
}
// 假数据
let d = [
{
"material_id": "6bfa66276ad34ce223b007b6b69ab14b",
"subscribe_id": "236e9ae43dc806bd3f6636aec764c7a9",
"logo": "/dist/images/pub/bg.png",
"name": "文章name文章name文章name文章name文章name文章name文章name文章name文章name文章name文章name文章name文章name文章name文章name文章name文",
"content": "contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent",
"created_at": 1593330038,
"id": "5705ffd76666f7d5676d79a9c6a23510",
"subscribe": {
"name": "订阅号名称",
"updated_at": 1593330038
}
}
];
for(let i=0; i<10; i++){
let it = this.clone(d[0]);
it.id = 'id-'+i;
d.push( it );
}
this.setState({listItems: d});
});
}
render() {
console.log(this.state.selectItems, 'hasItems2')
let v = '';
if( this.state.showList===0 ){
v = <Dialog className="material-types-sel" open={true} onClose={this.onClose}>
<DialogTitle id="material-types-sel-title">
<Typography variant="h6">选择资讯来源</Typography>
<IconButton aria-label="close" onClick={this.onClose} className="material-close"><CloseIcon /></IconButton>
</DialogTitle>
<div className="material-types-sel-c">
<div className="material-types-sel-m" onClick={()=>{this.showList('material')}}><span>素材库</span></div>
<div className="material-types-sel-h" onClick={()=>{this.showList('history')}}><span>历史消息</span></div>
</div>
</Dialog>;
}else{
let mtitle = <DialogTitle id="material-types-sel-title">
<Typography variant="h6">{this.state.listType.length===2?'选择资讯':'选择图文资讯'}</Typography>
<IconButton aria-label="close" onClick={this.onClose} className="material-close"><CloseIcon /></IconButton>
</DialogTitle>;
let btns = <DialogActions className="material-types-sel-btns">
<Button variant="outlined" onClick={()=>this.onClose()} disableElevation={true}>取消</Button>
<Button color="primary" variant="contained" onClick={()=>this.onOk()} disableElevation={true}>确认</Button>
</DialogActions>;
let content = <DialogContent dividers={true}>
{ this.state.listItems.map((item)=>(
<Grid container spacing={2} className="material-item">
<Grid item xs={1}>
<div className="material-item-si">{
this.state.multiple===true?<Checkbox onChange={this.checkboxSelect} checked={this.state.checkboxSelect.indexOf(item.id)!==-1} value={item.id} color="primary" />:<Radio checked={this.state.radioSelect===item.id} value={item.id} color="primary" />
}</div></Grid>
<Grid item><div className="material-item-logo" style={{backgroundImage:'url('+item.logo+')'}}></div></Grid>
<Grid item xs={8} container className="material-item-info">
<Grid item container xs direction="column" spacing={2} noWrap>
<Grid item xs>
<Typography gutterBottom variant="subtitle1" noWrap>{item.name}</Typography>
<Typography variant="body2" color="textSecondary" noWrap>{item.content}</Typography>
</Grid>
<Grid item>
<Typography variant="body2" color="textSecondary" noWrap>
{item.subscribe.name} <u>{moment(item.subscribe.updated_at*1000).format('YYYY-MM-DD')}</u>
</Typography>
</Grid>
</Grid>
</Grid>
</Grid>
))}
</DialogContent>;
const search = <Grid container spacing={2} justify="center">
<Grid item xs={11}>
<Paper component="form" className="material-search-form">
<IconButton type="submit" aria-label="search">
<SearchIcon />
</IconButton>
<InputBase className="material-search"
placeholder="搜索"
inputProps={{ 'aria-label': '搜索' }}
/>
</Paper>
</Grid>
</Grid>;
if( this.state.multiple===true ){
content = <DialogContent dividers={true}>{content}</DialogContent>;
}else{
content = <DialogContent dividers={true}><RadioGroup noWrap name="msel" value={this.state.radioSelect} onChange={this.radioSelect}>{content}</RadioGroup></DialogContent>
}
v = <Dialog open={true} className="material-select-list-dialog" onClose={this.onClose} scroll={'paper'} fullWidth={true} maxWidth="md">
{mtitle}
{search}
{content}
{btns}
</Dialog>;
}
return (<div>{v}</div>);
}
componentDidMount(){
this.fetchList();
}
}
export default withStyles(styles)(materialSelect);