@beisen-phoenix/commentor v3.3.55
发分享组件
可以用于发分享以及回复框组件
参数,详情请看 interface 定义
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×tamp=${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} />
}
}
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago