发分享组件

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

参数，详情请看 interface 定义

关于粘贴上传的一些说明

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} />
    }
}