joywok-material-components
Version:
<h1 align="center"> Joywok Material Components </h1>
432 lines (388 loc) • 12.9 kB
JavaScript
/**
组件说明：文件信息流分享
files：[], 要分享的文件list
selfinfo : {} 转发者信息
*/
import React,{ Component }from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import { connect } from 'dva';
import request from './../utils/request';
import Tip from './../tips/aloneTip'
import Reply from './../shareAs/Reply'
import Emoji from './../shareAs/Emoji'
import Dialog from '@material-ui/core/Dialog';
import DialogTitle from '@material-ui/core/DialogTitle';
import Slide from '@material-ui/core/Slide';
import { Checkbox, Button, TextField} from 'joywok-material-components';
require('./style/Index.css');
// const Transition = React.forwardRef(function Transition(props, ref) {
// return <Slide direction="up" ref={ref} {...props} />;
// });
class ShareAs extends Component{
constructor(props) {
super(props);
this.myref = React.createRef();
this.reply = React.createRef();
this.state = {
selfinfo: props.selfinfo,
owner: "zhangsan",
val: "",
open: true,
spaces: spaces,
spacesValue: "无分类",
shareFlag: 0,
downloadFlag: 0,
categoryFlag: false,
shareObjList: [],
shareObj:[
{
id: 'public',
name: '公开'
}
],
files: props.files ? props.files : []
}
}
componentDidMount() {
}
handleClose(){
let self = this;
self.setState({
open: false
})
self.props.onClose && self.props.onClose();
}
onFocus(){
}
submitComment(){
}
onBlur(){
}
onSubmit(){
let self = this;
let body = {};
let publicFlag = false;
_.map(self.state.shareObj, function(item){
if(item.id === "public"){
publicFlag = true
}
})
body.append = self.state.files;
body.content = self.state.val;
if(publicFlag){
body.share_scope = 'public';
}else{
body.share_scope = 'custom';
}
body.allow_download = self.state.downloadFlag;
body.space = self.state.spacesValue;
body.allow_share = self.state.shareFlag;
console.log(body)
request(basurl + '/api/as/sharefile',{
method:"POST",
body: JSON.stringify(body)
}).then(function(resp){
if(resp.data.data && resp.data.data.errcode){
self.setState({
loading: false
})
}else{
self.setState({
open: false
})
}
})
}
onChangeReply(value){
let self = this;
console.log(value)
self.setState({
val: value
})
}
openEmoji(){
let self = this;
self.myref.current.open($('#fileEmoji'))
}
emojiChange(obj, index){
let self = this;
console.log(obj, index)
self.setState({
val: self.state.val+obj.text
})
setTimeout(function(){
self.props.onChange && self.props.onChange(self.state)
self.reply.current.setValue(self.state.val)
})
}
onCloseEmoji(){
let self = this;
self.setState({
emojiFlag: false
})
}
changeForceFollow(e, key){
console.log(e, key)
let self = this;
let obj = {};
obj[key+'Flag'] = e.target.checked == 1 ? 1 : 0
self.setState(obj)
}
selectSpace(item){
let self = this;
self.setState({
spacesValue: item,
categoryFlag: false
})
}
showCategory(){
let self = this;
self.setState({
categoryFlag: !!!self.state.categoryFlag
})
}
closeCategory(){
let self = this;
console.log(111)
self.setState({
categoryFlag: false
})
}
openShareObj(){
let self = this;
self.setState({
shareObjFlag: true
})
setTimeout(function(){
$('#shareObjInput').focus()
}, 200)
}
selectObj(item){
let self = this;
let arr = self.state.shareObj;
arr.push(item);
console.log(item, arr)
self.setState({
shareObj: arr,
shareObjFlag: false,
shareObjValue: ''
})
}
shareObjBlur(v){
console.log(v)
let self = this;
if(v.target.value == ""){
self.setState({
shareObjFlag: false
})
}
}
delShareObj(item){
let self = this;
let arr = []
_.map(self.state.shareObj, function(i){
if(i.id != item.id){
arr.push(i)
}
})
self.setState({
shareObj: arr
})
}
getObj(str){
let self = this;
// self.setState({
// shareObjListFlag: true,
// shareObjFlag: true,
// shareObjValue: str
// })
// return;
request(basurl + '/suggestion/index?s='+str,{
method:"GET"
}).then(function(resp){
if(resp.data.data && resp.data.data.errcode){
self.setState({
loading: false
})
}else{
self.setState({
shareObjList: resp.data.data,
shareObjListFlag: true,
shareObjFlag: true,
shareObjValue: str
})
}
})
}
shareObjOnChange(v){
let self = this;
self.getObj(v.target.value)
}
shareObjFocus(v){
let self = this;
self.setState({
shareObjFlag: true,
shareObjListFlag: true
})
}
render(){
let self = this;
// if(!self.state.selfinfo){
// return <div>请传入正确的参数</div>
// }
let style = {};
let length = self.state.files.length;
style = {
width: 210*length+'px'
}
let offset;
if(self.state.categoryFlag){
let el = $('.category')
if(el && el.offset()){
offset = el.offset();
}
}
let offsetShareObj;
if(self.state.shareObjFlag){
console.log(1111)
let el = $('.share-obj-input')
if(el && el.offset()){
offsetShareObj = el.offset();
if(offsetShareObj.top > 210){
offsetShareObj.top = offsetShareObj.top-210
}else{
offsetShareObj.top = 10
}
offsetShareObj.left = offsetShareObj.left-50
}
}
let submitFlag = true;
if(self.state.val == ""){
submitFlag = false
}else if(self.state.files.length == 0){
submitFlag = false
}
return (<Dialog
open={self.state.open}
onClose={self.handleClose.bind(self)}
// TransitionComponent={Transition}
keepMounted
disableBackdropClick = {true}
disableEscapeKeyDown = {true}
PaperProps = {{tabIndex:0}}
className="jw-dialog"
>
<DialogTitle className="shareAs-title">分享到信息流</DialogTitle>
<div className="shareAs-txt">
<Reply ref={self.reply} placeholder={"分享你的想法给大家"} callback={{
onFocus: self.onFocus.bind(self, self.props.article_id),
onBlur: self.onBlur.bind(self),
onChange: self.onChangeReply.bind(self)
}}/>
</div>
<div className="share-files">
<div className="files-form">此文件最开始由 <span>{self.state.owner}</span> 发布</div>
{
self.state.files.length == 1 ? <div className="file-single">
<img src="http://bpic.588ku.com/element_origin_min_pic/16/10/29/2ac8e99273bc079e40a8dc079ca11b1f.jpg"/>
</div> : <div className="file-multi">
<div className="file-multi-c" style={style}>
{
_.map(self.state.files, function(item){
return <div className="file-multi-item">
<img src={item.url}/>
</div>
})
}
</div>
</div>
}
</div>
<div className="funcs">
<div className="emoji-c">
<i class="icon icon-shareAs-emoji" id="fileEmoji" onClick={self.openEmoji.bind(self)}></i>
<Emoji ref={self.myref} onClose={self.onCloseEmoji.bind(self)} el={$('#fileEmoji')} onClose={self.onCloseEmoji.bind(self)} open={false} onChange={self.emojiChange.bind(self)}/>
</div>
<div className="category">
<i class="icon icon-shareAs-category" onClick={self.showCategory.bind(self)}></i>
<span>{self.state.spacesValue == "无分类" ? "" : self.state.spacesValue }</span>
<div className={self.state.categoryFlag ? "category-c" : "category-c hide"}>
<div className="category-bg" onClick={self.closeCategory.bind(self)}> </div>
<div className={self.state.categoryFlag ? "category-list" : "category-list hide"} style={offset}>
{
_.map(self.state.spaces, function(item){
let className = item == self.state.spacesValue ? "selected" : ""
return <div className={"category-item "+className} onClick={self.selectSpace.bind(self, item)}>
<span className="jw-fd-i"></span>
<span>{item}</span>
</div>
})
}
</div>
</div>
</div>
</div>
<div className="share-obj">
<div className="share-obj-c">
{
_.map(self.state.shareObj, function(item){
return <div className="obj-item">{item.name} <i onClick={self.delShareObj.bind(self, item)} className="ico-shareAs-del"/></div>
})
}
{
self.state.shareObjFlag ? <TextField className="share-obj-input" onChange={self.shareObjOnChange.bind(self)} value={self.state.shareObjValue} onBlur={self.shareObjBlur.bind(self)} id="shareObjInput"/> : <div className="share-obj-add" onClick={self.openShareObj.bind(self)}>+添加</div>
}
<div className={self.state.shareObjListFlag ? "share-list" : "share-list hide"} style={offsetShareObj}>
{
self.state.shareObjValue == "" ? <div className="offen-use">
</div> : <div className="share-list-c">
{
_.map(self.state.shareObjList, function(item){
let flag = true;
_.map(self.state.shareObj, function(i){
if(item.id == i.id){
flag = false
}
})
if(flag){
return <div className="share-list-item" onClick={self.selectObj.bind(self, item)}>{item.name}</div>
}
})
}
</div>
}
</div>
</div>
</div>
<div className="dialog-footer">
<div className="jw-m-common-checkbox-item">
<Checkbox
className="jw-m-common-checkbox"
colorSystem="blue"
value={'force_follow'}
checked={this.state.shareFlag==1 ? true : false}
onChange={(e)=>self.changeForceFollow(e, 'share')}
/>
<font>禁止浏览者分享</font>
</div>
<div className="jw-m-common-checkbox-item">
<Checkbox
className="jw-m-common-checkbox"
colorSystem="blue"
value={'force_follow'}
checked={this.state.downloadFlag==1 ? true : false}
onChange={(e)=>self.changeForceFollow(e, 'download')}
/>
<font>禁止浏览者下载</font>
</div>
{
submitFlag ? <Button className="sure" style={{"background": "#3297fc"}} onClick={self.onSubmit.bind(self)}>发布</Button> : <Button className="sure" style={{"background": "#EEEEEE"}} disabled="disabled">发布</Button>
}
<Button onClick={self.handleClose.bind(self)}>取消</Button>
</div>
</Dialog>)
}
}
export default ShareAs;