@beisen-phoenix/commentor

发分享组件

可以用于发分享以及回复框组件

参数，详情请看 interface 定义

参数	说明	默认值	类型	是否必填
isShowMentionAllBtn	是否显示@所有同事按钮	true-->显示	boolean	非必填
isShowMentionBtn	是否显示@同事按钮	true-->显示	boolean	非必填
isShowEmojyBtn	是否显示表情包按钮	true-->显示	boolean	非必填
isShowRewardBtn	是否显示打赏按钮	false-->不显示	boolean	非必填
isShowVisible	是否显示可见范围	true-->显示	boolean	非必填
isShowUploadBtn	是否显示附件上传	true-->显示	boolean	非必填
userAdvanceMode	是否开启选人组件的高级模式	false-->不开启	boolean	非必填
tenantId	租户Id	无默认	number|string	必填
userId	用户Id	无默认	number|string	必填
apiPath	主站host（比如：//www.italent.link）	无默认	string	必填
operationBtnExternal	按钮区域的可扩展	无默认	React.ReactElement | React.ReactElement[]	非必填
isInsertUploadFileText	附件上传成功后是否向文本域里插入“分享了xx个文件”的文本	true	boolean	非必填
userTranslation	选人组件多语言翻译	无	object（此参数见下面说明）	非必填
onLableVisibleChange	底部按钮随宽度变化计算是否显示按钮文本（可用于扩展底部按钮时同步隐藏文本）	无	(flag)=>void (true 代表显示 false代表不显示)	非必填

#### 关于粘贴上传的一些说明 1、粘贴上传仅支持图片 2、ie、edge浏览器不支持粘贴上传 3、不支持windows系统下在资源管理器直接复制图片进行粘贴上传，支持截图粘贴上传 #### userTranslation 字段说明--默认翻译字段

export const userTranslation: DefaultTranslationType = {
	search: '搜索',
	advancedMode: '高级模式',
	noDataTip: '这里什么都没有...',
	emptyText: '空 (未填写)',
	commonContact: '常用',
	subordinate: '下属',
	department: '部门',
	searchResult: '搜索结果',
	frequentContacts: '常用联系人',
	person: '人',
	my: '我的',
	aleradySelect: '已选人员',
	group: '组',
	clearSelect: '清空已选',
	cancel: '取消',
	sure: '确认',
	pleaseSelectTip: '请在左侧选择人员',
	one: '个',
	empty: '空(未填写)',
	directSubordinate: '直接下属'
}

// 关于文本输入框的一些配置参数
 textAreaOption {
	placeholder?: string //文本域提示文案  默认：“说点什么吧～”
	maxLength?: number //最多输入多少字  默认：2000
	defaultValue?: string //输入框内的值 默认：“”
	autoHeight?: boolean //是否有最大高度限制 默认：true
	onTextChange?: (vale: string) => void //文本域的change事件
	onTextFocus?: (vale: string) => void //文本域的获取焦点事件
	onTextBlur?: (vale: string) => void //文本域的失去焦点事件
	getTextRef?: (ref: HTMLTextAreaElement) => void //textarea的ref
}

//关于确定取消按钮的一些配置
 sureCancelBtnOption {
	sureBtnText?: string //确定按钮文本 默认“发布”
	sureBtnLoading?: boolean //确定按钮是否处于loading状态 默认false
	onSureBtnClick?: (value: string, files?: IPreviewItemFile[]) => void; //确定按钮点击事件  参数为文本的value与已上传成功的文件
	cancelBtnText?: string //取消按钮文本  默认“取消”
	isShowCancelBtn?: boolean //是否显示取消按钮 默认 true 显示
	onCancelBtnClick?: (e: React.MouseEvent) => void //取消按钮点击事件
}
//可见范围的配置
 visibleRangeOption {
	items?: Array<IVisibleRangeItems> //下拉选择选项 有默认选项
	selectedValue?: string | number //默认选中哪个 默认选中第一个
	visibleBtnText: string //默认显示的文本
	onChange?: (value: IVisibleRangeItems) => void //选择更改时触发的事件
}
//可见范围item的接口
interface IVisibleRangeItems {
	label: string
	value: string | number
	disabled?: boolean
}
uploadBtnOption{
    label?: string //显示的文案 默认“附件”
	tip?: string //提示的文案 默认“最多支持上传20个<br>每个不超过50M”
    tipIsHTMLContent?: boolean //tip是不是支持html 默认true 支持
    // multiple?: boolean //是否允许多选 默认true 允许
	maxSize?: number // 文件体积限制    默认50M
	maxFiles?: number // 文件个数限制   默认20个
	url?: Url // 上传接口地址，支持post  默认`${apiPath}/api/v1/${tenantId}/${userId}/Upload/PostFiles?format=json&timestamp=${new Date().getTime()}`
	onError?: OnError //发生错误回调 (err)=>void  err:{files,type:1(文件体积错误) 2（文件个数错误） 3（网络错误）100（校验错误）}
	// accept?: string | string[] //接受的文件类型格式
}
//@所有同事的配置
mentionAllBtnOption{
    label?: string //显示的文案 默认“所有同事”
	tip?: string //提示的文案 默认“所有同事将收到本条消息”
    tipIsHTMLContent?: boolean //tip是不是支持html 默认true 支持
	onClick?: (e: React.MouseEvent) => void //点击事件
}
//@同事
mentionBtnOption {
    label?: string //显示的文案 默认“同事”
	tip?: string //提示的文案 默认“想确保谁看到就@这个成员”
    tipIsHTMLContent?: boolean //tip是不是支持html 默认true 支持
}
rewardBtnOption{
    label?: string //显示的文案 默认“打赏”
	tip?: string //提示的文案 默认“打赏”
    tipIsHTMLContent?: boolean //tip是不是支持html 默认true 支持
	onClick?: (e: React.MouseEvent) => void //点击事件
}
//表情包
emojyBtnOption{
		label?: string //表情按钮显示文本 默认“表情”
		tip?: string //提示的文案 默认“表情”
    tipIsHTMLContent?: boolean //tip是不是支持html 默认true 支持
	zIndex?: number //表情包的zIndex 默认 100
	getData?: () => any //获取表情包数据的方法，需要返回promise对象拿到数据
}

最简调用方式

import * as React from 'react';
import Commentor from './../../src/index';
import { TextAreaStatus } from '@beisen-phoenix/textarea';
interface IState {
	textareaValue: string;
	visibleValue: string;
}
const maxLength = 20;
const getData = () => {
	return import('./../default/data/italent.json');
};
export default class extends React.Component<any, IState> {
	constructor(props) {
		super(props);
		this.state = {
			textareaValue: '',
			visibleValue: ''
		};
		this.handleChange = this.handleChange.bind(this);
		this.handleVisibleRangeChange = this.handleVisibleRangeChange.bind(
			this
		);
		this.handleSureBtnClick = this.handleSureBtnClick.bind(this);
	}
	handleChange(textareaValue) {
		this.setState({
			textareaValue
		});
	}
	//处理可见范围下拉选选择事件
	handleVisibleRangeChange(obj) {
		this.setState({
			visibleValue: obj.value
		});
	}
	//确定按钮点击事件，可以进行校验和发送请求
	handleSureBtnClick(e) {}
	render() {
		const { textareaValue } = this.state;
		const visibleItems = [
			{
				label: '所有人可见',
				value: 'allcansee'
			},
			{ label: '仅部门可见', value: 'depcansee' },
			{ label: '仅相关成员可见', value: 'someonecansee' }
		];
		const testProps = {
			tenantId: 0, //BSGlobal.tenantInfo中的Id 即租户Id
			userId: 111111, //BSGlobal.loginUserInfo中的Id 即用户Id
			apiPath:
				'https://easy-mock.com/mock/5ba9d7069face31e433357f4/example/department#!method=get', //主站域名  例如：//www.italent.link 用于请求选人组件数据
			textAreaOption: {
				defaultValue: '' //文本value
			},
			sureCancelBtnOption: {
				sureBtnLoading: false, //确定按钮是否处于loading状态
				onSureBtnClick: this.handleSureBtnClick, //确定按钮点击事件
				onCancelBtnClick: e => {
					alert('取消');
				} //取消按钮点击事件
			},
			//可见范围的配置
			visibleRangeOption: {
				visibleBtnText: visibleItems[0].label,
				onChange: this.handleVisibleRangeChange
			},
			uploadBtnOption: {
				url: '' // 上传接口地址，支持post
			},
			//表情包
			emojyBtnOption: {
				getData: getData //获取表情包数据的方法，需要返回promise对象拿到数据
			}
		};
		return <Commentor {...testProps} />;
	}
}

复杂调用方式

import * as React from 'react'
import Commentor from './../../src/index'
import { TextAreaStatus } from '@beisen-phoenix/textarea'
interface IState {
	textareaValue: string
	visibleValue: string
}
const maxLength = 20
const getData = () => {
	return import('./data/italent.json')
}
export default class extends React.Component<any, IState> {
	constructor(props) {
		super(props)
		this.state = {
			textareaValue: '',
			visibleValue: ''
		}
		this.handleChange = this.handleChange.bind(this)
		this.handleBlur = this.handleBlur.bind(this)
		this.handleFocus = this.handleFocus.bind(this)
		this.handleVisibleRangeChange = this.handleVisibleRangeChange.bind(this)
		this.handleSureBtnClick = this.handleSureBtnClick.bind(this)
		this.handleUploadError = this.handleUploadError.bind(this)
		this.handleUploadChange = this.handleUploadChange.bind(this)
		this.handleEachComplete = this.handleEachComplete.bind(this)
	}
	handleChange(textareaValue) {
		this.setState({
			textareaValue
		})
	}
	handleBlur(value) {
		// this.setState({
		// 	value
		// })
	}
	handleFocus(value) {
		// this.setState({
		// 	value
		// })
	}
	handleUploadError() {
		console.log('某个文件上传失败')
	}
	handleUploadChange(files) {
		console.log(files)
	}
	handleEachComplete(file) {
		console.log(file)
	}
	//处理可见范围下拉选选择事件
	handleVisibleRangeChange(obj) {
		console.log(obj)
		this.setState({
			visibleValue: obj.value
		})
	}
	//确定按钮点击事件，可以进行校验和发送请求
	handleSureBtnClick(e) {}
	render() {
		const { textareaValue } = this.state
		const visibleItems = [
			{
				label: '所有人可见',
				value: 'allcansee'
			},
			{ label: '仅部门可见', value: 'depcansee' },
			{ label: '仅相关成员可见', value: 'someonecansee' }
		]
		const testProps = {
			isShowMentionAllBtn: true, // 是否显示@所有同事按钮
			isShowMentionBtn: true, //是否显示@同事按钮
			isShowEmojyBtn: true, //是否显示表情按钮
			userAdvanceMode: false, //是否开启选人组件的高级模式，默认false不开启
			tenantId: 0, //BSGlobal.tenantInfo中的Id 即租户Id
			userId: 111111, //BSGlobal.loginUserInfo中的Id 即用户Id
			isShowRewardBtn: true, //是否显示打赏按钮，默认false，不显示
			apiPath:
				'https://easy-mock.com/mock/5ba9d7069face31e433357f4/example/department#!method=get', //主站域名  例如：//www.italent.link 用于请求选人组件数据
			textAreaOption: {
				defaultValue: '', //文本value
				placeholder: '说点什么吧～',
				maxLength: maxLength,
				autoHeight: true,
				onTextChange: this.handleChange,
				onTextFocus: this.handleFocus,
				onTextBlur: this.handleBlur
			},
			sureCancelBtnOption: {
				sureBtnText: '发布', //确定按钮文本
				sureBtnLoading: false, //确定按钮是否处于loading状态
				onSureBtnClick: this.handleSureBtnClick, //确定按钮点击事件
				cancelBtnText: '取消', //取消按钮文本
				isShowCancelBtn: true, //是否显示取消按钮
				onCancelBtnClick: e => {
					alert('取消')
				} //取消按钮点击事件
			},
			//可见范围的配置
			visibleRangeOption: {
				// items: visibleItems,
				visibleBtnText: visibleItems[0].label,
				selectedValue: visibleItems[0].value,
				onChange: this.handleVisibleRangeChange
			},
			uploadBtnOption: {
				tip: '', //提示
				tipIsHTMLContent: true, //tip是不是支持html
	files: IUploadFileType[], //文件列表

				label: '附件', //@所有同事显示的文案
				multiple: true, //是否允许多选
				maxSize: 50, // 文件体积限制
				maxFiles: 20, // 文件个数限制
				url: '', // 上传接口地址，支持post
				onError: this.handleUploadError, //发生错误回调
				accept: '' //接受的文件类型格式
			},
			//@所有同事的配置
			mentionAllBtnOption: {
				tip: '所有同事将收到本条消息', //提示
				tipIsHTMLContent: true, //tip是不是支持html
				label: '所有同事', //@所有同事显示的文案
				onClick() {} //点击事件
			},
			//表情包
			emojyBtnOption: {
				label: '表情',
				zIndex: 1000, //表情包的zIndex
				getData: getData //获取表情包数据的方法，需要返回promise对象拿到数据
			},
			mentionBtnOption: {
				tip: '想确保谁看到就@这个成员', //提示
				tipIsHTMLContent: true, //tip是不是支持html
				label: '同事' //@所有同事显示的文案
			},
			rewardBtnOption: {
				tip: '打赏', //提示
				tipIsHTMLContent: true, //tip是不是支持html
				label: '打赏', //@所有同事显示的文案
				onClick: e => {
					alert('点击了打赏')
				}
			},
			operationBtnExternal: [<div>扩展</div>, <div>扩展按钮</div>]
		}
		return <Commentor {...testProps} />
	}
}