yylib-quick-mobile/dist/yylib/library/YYLibrary.js

yylib-quick-mobile

import React from 'react';
import classnames from 'classnames';
import { Toast, ActionSheet, Modal, SearchBar } from 'antd-mobile';
import YYLibraryNavBar from './YYLibraryNavBar';
import YYLibraryList from './YYLibraryList';
import  YYFile  from  './YYFile';
import CreateFile from './createfile.js';
import { ADDR } from '../../common/RestUrl';
import UploadFileUtils from '../../utils/UploadFileUtils';
const alert = Modal.alert;
import './YYLibrary.less';
import PropTypes from 'prop-types';
const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
let wrapProps;
if(isIPhone) {
	wrapProps = {
		onTouchStart: e => e.preventDefault(),
	};
}
class YYLibrary extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			visible: false,
			selected: '',
			multi: false,
			selectAll: false,
			add: false,
			selectRowKeys: [],
			selectRows: [],
			currentItem: null,
			copyFile: null,
			showFile:false
		}
	}
	onSelect = (opt) => {
		let {
			buttonAuth
		} = this.props;
		let {
			key
		} = opt;
		if(key === '1') {
			if(buttonAuth.upload) {
				if(window.YYPlugin) {
					this.uploadFile();
				}
			} else {
				Toast.info('无上传权限', 1);
			}
		}
		if(key === '2') {
			if(buttonAuth.addBtn) {
				this.onAddFile(); //新建文件夹
			} else {
				Toast.info('无新建权限', 1);
			}
		}
		if(key === '3') {
			this.multiSelect(); //多选
		}
		this.setState({
			visible: false,
			selected: opt.props.value
		});
	}
	//重命名文件
	modifyName(file) {
		this.setState({
			add: false
		}, () => {
			this.props.updateFolder && this.props.updateFolder(file); //调用重命名方法
		})
	}
	onFileSave(file) {
		this.setState({
			add: false
		}, () => {
			this.props.addFolder && this.props.addFolder(file); //调用新增文件数据接口
		});
	}
	//上传文件
	uploadFile() {
		const {
			source,
			billType
		} = this.props;
		let self = this;
		let sourceId = parseInt(Math.random() * 1000);
		let params = {
			billType: source ? source.billType : billType,
			sourceType: source ? source.sourceType : "MD001",
			sourceId: source ? source.sourceId : sourceId,
			userId: window.YYUtils.AuthToken.getUserId(),
			userName: window.YYUtils.AuthToken.getUserName(),
			camera: true,
			picture: true,
			file: true
		};
		if(window.YYPlugin) {
			window.YYPlugin.call("CommonPlugin", "postFile", params, function success(result) {
				try {
					if(result) {
						let addObj = {
							billType: billType,
							type: 0,
							parentId: self.context.location && self.context.location.query.fileid,
							fileName: result.fileName,
							filePath: result.filePath,
							fileSize: result.fileSize,
							attachMgr: result.gid,
							attachObjs: result.sourceType
						}
						self.props.addFile && self.props.addFile(Object.assign({}, addObj, {
							id: sourceId
						}))
					}
				} catch(e) {
					throw '上传文件失败'
				}
			});
		} else {
			Toast.info('请在手机上进行调试或检查yyplus的引入！')
		}
	}
	onFilesChange(files) {
		if(!window.YYPlugin) {
			this.uploadPCFile(files[0])
		} else {
			this.uploadFile();
		}
	}
	uploadPCFile(files) {
		let self = this;
		const {
			source,
			billType
		} = this.props;
		let sourceId = parseInt(Math.random() * 1000);
		let params = {
			billType: source ? source.billType : billType,
			sourceType: source ? source.sourceType : "MD001",
			sourceId: source ? source.sourceId : sourceId,
			userId: window.YYUtils.AuthToken.getUserId(),
			userName: window.YYUtils.AuthToken.getUserName(),
			camera: true,
			picture: true,
			file: files,
			billId: source ? source.billId : "MD001",
		};
		UploadFileUtils.multiFilesUpLoad(
			params, params.billType, {
				sourceId: params.sourceId,
				sourceType: params.sourceType
			},
			([result]) => {
				try {
					var backData = result.backData;
					let addObj = {
						billType: billType,
						type: 0,
						parentId: self.context.location && self.context.location.query.fileid,
						fileName: backData.fileName,
						filePath: backData.filePath,
						fileSize: backData.fileSize,
						attachMgr: backData.gid,
						attachObjs: backData.sourceType
					}
					if (!addObj.parentId) {
            addObj.parentId = 0;
					}
					self.props.addFile && self.props.addFile(Object.assign({}, addObj, {
						id: sourceId
					}))
				} catch(e) {
					throw '上传文件失败'
				}
			}
		)
	}

	handleVisibleChange(visible) {
		this.setState({
			visible
		});
	};
	//分享文件
	shareFile(file) {
		let {
			source
		} = this.props;
		if(file.type === 0) { //文件
			if(file && window.YYPlugin) {
				let url = ADDR + '/icop-file/onlinePreview?url=' + ADDR+'/'+file.filePath;
				let params = {
					type: "3",
					text: file.fileName,
					url: url,
					title: file.fileName
				};
				window.YYPlugin.call("CommonPlugin", 'share', params)
			}
		} else {
			Toast.info('文件夹无法分享', 1)
		}
	}
	onChange(item) {
		let selectRowKeys = this.state.selectRowKeys;
		let selectRows = this.state.selectRows;
		let index = selectRowKeys.indexOf(item.id);
		if(index > -1) { //有了则减
			selectRowKeys.splice(index, 1);
			selectRows.splice(index, 1);
		} else { //原来没有则加
			selectRowKeys.push(item.id);
			selectRows.push(item);
		}
		this.setState({
			selectRowKeys,
			selectRows
		});
	}
	operation(item) {
		this.showActionSheet(item);
	}
	multiSelect() {
		this.setState({
			currentItem: null,
			copyFile: null,
			multi: true
		});
	}
	onCancel() {
		this.setState({
			multi: false
		});
	}
	onAddFile() {
		this.setState({
			currentItem: null,
			copyFile: null,
			add: true
		});
	}
	onCoyeFile(item) { //复制
		this.setState({
			copyFile: item
		});
	}
	paste() { //粘贴
		let target = this.context.location && this.context.location.query.fileid;
		let sourceId = this.state.copyFile && this.state.copyFile.id;
		this.props.copyFolder([sourceId], target);
		this.setState({
			copyFile: null
		});
	}
	cancel() {
		this.setState({
			copyFile: null
		});
	}
	downLoad(item) { //下载
		let {
			source
		} = this.props;
		if(item.type === 0) { //文件
			let url = ADDR + '/' + item.filePath + '?filename=' + item.fileName;
			var elemIF = document.createElement("iframe");
			elemIF.src = url;
			elemIF.style.display = "none";

		} else {
			Toast.info('文件夹无法下载', 1)
		}
	}
	handleClick(buttonIndex, item) {
		let {
			buttonAuth
		} = this.props;
		switch(buttonIndex) {
			case 0:
				if(buttonAuth.deleteBtn) {
					alert('删除', '确定要删除此条文件记录?', [{
							text: '取消',
							onPress: () => {}
						},
						{
							text: '确定',
							onPress: () => {
								let deleteItems = [];
								deleteItems.push({
									id: item.id,
									ts: item.ts
								});
								this.props.deleteFile && this.props.deleteFile(deleteItems); //删除数据
							}
						}
					])
				} else {
					Toast.info('无删除权限', 1);
				}
				break;
			case 1:
				if(buttonAuth.edit) {
					this.setState({
						currentItem: item,
						add: true
					}); //重命名
				} else {
					Toast.info('无重命名权限', 1);
				}
				break;
			case 2:
				if(buttonAuth.share) {
					this.shareFile(item); //分享文件
				} else {
					Toast.info('无分享权限', 1);
				}
				break;
			case 3:
				if(buttonAuth.copy) {
					this.onCoyeFile(item); //复制
				} else {
					Toast.info('无复制权限', 1);
				}
		}
	}
	showActionSheet(item) {
		const BUTTONS = ['删除', '重命名', '分享', '复制', '取消', ];
		ActionSheet.showActionSheetWithOptions({
				options: BUTTONS,
				cancelButtonIndex: BUTTONS.length - 1,
				destructiveButtonIndex: BUTTONS.length - 5,
				maskClosable: true,
				'data-seed': 'logId',
				wrapProps,
			},
			(buttonIndex) => {
				this.handleClick(buttonIndex, item)
			});
	}
	onSelectAll() {
		let {
			fileData
		} = this.props;
		let selectRows = [];
		let selectRowKeys = [];
		fileData.map((item, index) => {
			selectRowKeys.push(item.id), selectRows.push(item)
		});
		this.setState({
			selectAll: true,
			selectRowKeys: selectRowKeys,
			selectRows: selectRows
		});
	}
	onCancelSelectAll() {
		this.setState({
			selectAll: false,
			selectRowKeys: [],
			selectRows: []
		});
	}
	cancelCreate() {
		this.setState({
			add: false
		})
	}
	onRefresh() {
		this.props.refresh && this.props.refresh()
	}
	//搜索方法
	searchText(value) {
		this.props.searchFile && this.props.searchFile(value);
	}
	//取消搜索
	cancelSearch() {
		if(this.refs.mySearch) {
			this.refs.mySearch.doClear();
			this.props.cancelSearch && this.props.cancelSearch();
		}
	}
	//关闭
	closeFile(){
		this.setState({showFile:false})
	}
	//打开文件
	openFile(params){
			this.setState({showFile:true,selectRow:params})
	}
	render() {
		let {
			visible,
			multi,
			selectAll,
			add,
			selectRows,
			selectRowKeys,
			currentItem,
			copyFile,
			showFile,
      selectRow
		} = this.state;
		let {
			fileData,
			billType,
			searchText,
			title,
			buttonAuth
		} = this.props;
		let wrapClz = classnames('yy-library', (visible && 'change'));
		return(
			<div  style={{height:"100%"}} className={wrapClz}>
			  {
			  	!showFile||<YYFile
			  	selectRow={selectRow}
			    closeFile={this.closeFile.bind(this)}
			    send={this.props.send}
          getCommentList={this.props.getCommentList}
          reached={this.props.reached}
          liked={this.props.liked}
          total={this.props.total}
          last={this.props.last}
          appendData={this.props.appendData}
          commentList={this.props.commentList}/>
			  }
        {!add&&<YYLibraryNavBar
          multi={multi}
          selectAll={selectAll}
          visible={visible}
          buttonAuth={buttonAuth}
          onVisibleChange={this.handleVisibleChange.bind(this)}
          onSelect={this.onSelect.bind(this)}
          onSelectAll={this.onSelectAll.bind(this)}
          onCancelSelectAll={this.onCancelSelectAll.bind(this)}
          onCancel={this.onCancel.bind(this)}
          onChange={this.onFilesChange.bind(this)}/>}
          {!add&&<SearchBar
            ref='mySearch'
            placeholder={searchText}
            onSubmit={this.searchText.bind(this)}
            onCancel={this.cancelSearch.bind(this)}
            showCancelButton/>}
        {!add&&<YYLibraryList
          multi={multi}
          selectAll={selectAll}
          selectRowKeys={selectRowKeys}
          selectRows={selectRows}
          data={fileData}
          onChange={this.onChange.bind(this)}
          operation={this.operation.bind(this)}
          onRefresh={this.onRefresh.bind(this)}
          openFile={this.openFile.bind(this)}/>}
        {add&&<CreateFile
          modifyName={this.modifyName.bind(this)}
          cancelCreate={this.cancelCreate.bind(this)}
          currentItem={currentItem}
          onFileSave={this.onFileSave.bind(this)}
          billType={billType}
          title={title}
          buttonAuth={buttonAuth}/>}
        {copyFile&&<div className='buttons'><div className='btn-paste'  onClick={this.paste.bind(this)}>粘贴</div><div className='btn-paste' onClick={this.cancel.bind(this)}>取消</div></div>}
      </div>
		)
	}
}
YYLibrary.defaultProps = {
	searchText: '请输入文件关键字',
	fileData: [],
	billType: '',
	buttonAuth: {
		addBtn: true,
		edit: true,
		deleteBtn: true,
		upload: true,
		copy: true,
		share: true
	}
}
YYLibrary.contextTypes = {
	router: PropTypes.object.isRequired,
	location: PropTypes.object.isRequired
}
module.exports = YYLibrary;