| 1 |
- {"version":3,"sources":["../../../src/components/Editor/index.js"],"names":["TextArea","Editor","props","state","showUpload","value","fileList","fileMap","handleChange","bind","handleClickEmoji","handleChangeFileList","handleShowUpload","handleUpload","handleSubmit","setState","onChange","emoji","uid","path","length","forEach","OSS_LINK","item","onSubmit","placeholder","rows","showEmoji","btnSubmitText","btnLoading","btnDisabled","button","emojiToolIcon","imageToolIcon","disabledSubmit","e","target","width","zIndex","MAX_UPLOAD_NUMBER","minHeight","margin","color","fontWeight","float","cursor","marginTop","React","cloneElement","onClick","marginLeft","Component","propTypes","PropTypes","number","string","bool","func","node","defaultProps"],"mappings":"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","file":"index.js","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Icon, Button, Popover, Input } from 'antd';\nimport { OSS_LINK } from '../../constant';\nimport { MAX_UPLOAD_NUMBER } from '../../constant';\nimport Upload from './Upload';\nimport Emoji from './Emoji';\nimport './index.css';\n\nconst { TextArea } = Input;\n\nclass Editor extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n showUpload: false,\n value: '', // 编辑器里面的值\n\n fileList: [], // 图片列表\n fileMap: {}, // 已经上传的图片路径和 uid 的映射 { uid: path }\n };\n this.handleChange = this.handleChange.bind(this);\n this.handleClickEmoji = this.handleClickEmoji.bind(this);\n this.handleChangeFileList = this.handleChangeFileList.bind(this);\n this.handleShowUpload = this.handleShowUpload.bind(this);\n this.handleUpload = this.handleUpload.bind(this);\n this.handleSubmit = this.handleSubmit.bind(this);\n }\n\n componentDidMount() {}\n\n /**\n * 编辑器的值改变事件\n * 将最新的值存储到 state 中\n * @param {string} value 输入的值\n */\n handleChange(value) {\n this.setState({ value });\n if (this.props.onChange) {\n this.props.onChange(value);\n }\n }\n\n /**\n * 点击 emoji 的事件\n * 点击后，需要将改 emoji 插入到编辑器中\n * 插入的值为 [emoji chinese name]\n * 参数 emoji 即为 emoji chinese name\n * @param {string}} emoji emoji 的中文，如 微笑\n */\n handleClickEmoji(emoji) {\n let { value } = this.state;\n value += `[${emoji}]`;\n this.handleChange(value);\n }\n\n /**\n * 监听文件列表改变事件\n * @param {Array} fileList 文件列表\n */\n handleChangeFileList(fileList) {\n this.setState({ fileList });\n }\n\n /**\n * 控制上传 Popover 的显示和隐藏\n * @param {boolean} showUpload 是否显示上传的 Popover\n */\n handleShowUpload(showUpload) {\n if (typeof showUpload === 'boolean') {\n this.setState({ showUpload: showUpload });\n } else {\n this.setState({ showUpload: !this.state.showUpload });\n }\n }\n\n /**\n * 上传文件\n * @param {object} param 文件对象\n */\n handleUpload({ uid, path }) {\n const { fileMap } = this.state;\n fileMap[uid] = path;\n this.setState({ fileMap });\n }\n\n /**\n * 提交编辑器内容\n * 提交功能，交给父组件来实现\n * 需要父组件传入 onSubmit\n */\n handleSubmit() {\n let { value, fileMap, fileList } = this.state;\n if (fileList.length) {\n value += '<br/>';\n fileList.forEach(item => {\n value += `[${OSS_LINK}${fileMap[item.uid]}]`;\n });\n }\n this.props.onSubmit(value, () => {\n this.setState({\n showUpload: false,\n value: '',\n fileList: [],\n fileMap: {},\n });\n });\n }\n\n render() {\n const {\n value,\n placeholder,\n rows,\n showEmoji,\n showUpload,\n btnSubmitText,\n btnLoading,\n btnDisabled,\n button,\n emojiToolIcon,\n imageToolIcon,\n } = this.props;\n const handleSubmit = this.handleSubmit;\n const disabledSubmit =\n btnDisabled ||\n (!this.props.value && !this.state.value && !this.state.fileList.length);\n return (\n <div className=\"comment-editor\">\n <TextArea\n value={value || this.state.value}\n onChange={e => this.handleChange(e.target.value)}\n rows={rows}\n placeholder={placeholder}\n />\n\n <div className=\"comment-toolbar\">\n <div className=\"comment-toolbar-left\">\n {showEmoji && (\n <Popover\n trigger=\"click\"\n placement=\"bottomLeft\"\n autoAdjustOverflow={false}\n content={\n <div style={{ width: 200 }}>\n <Emoji onClick={this.handleClickEmoji} />\n </div>\n }\n overlayClassName=\"comment-emoji-popover\"\n >\n {emojiToolIcon || (\n <Icon type=\"smile-o\" className=\"comment-toolbar-icon\" />\n )}\n </Popover>\n )}\n\n {showUpload && (\n <Popover\n visible={this.state.showUpload}\n overlayStyle={{ zIndex: 999 }}\n content={\n <div\n style={{ width: 112 * MAX_UPLOAD_NUMBER, minHeight: 100 }}\n >\n <Upload\n onChangeFileList={this.handleChangeFileList}\n onUpload={this.handleUpload}\n fileList={this.state.fileList}\n />\n </div>\n }\n placement=\"bottomLeft\"\n title={\n <div style={{ margin: '5px auto' }}>\n <span>\n 上传图片\n <span style={{ color: '#666', fontWeight: 400 }}>\n (您还能上传{MAX_UPLOAD_NUMBER -\n this.state.fileList.length}张图片)\n </span>\n </span>\n <Icon\n type=\"close\"\n onClick={() => this.handleShowUpload(false)}\n style={{\n float: 'right',\n cursor: 'pointer',\n marginTop: 4,\n }}\n />\n </div>\n }\n >\n {imageToolIcon ? (\n React.cloneElement(imageToolIcon, {\n onClick: () => this.handleShowUpload(true),\n })\n ) : (\n <Icon\n type=\"picture\"\n className=\"comment-toolbar-icon\"\n style={{ marginLeft: 10 }}\n onClick={() => this.handleShowUpload(true)}\n />\n )}\n </Popover>\n )}\n </div>\n\n <div className=\"comment-toolbar-right\">\n {button ? (\n React.cloneElement(button, {\n onClick: button.props.onClick || handleSubmit,\n })\n ) : (\n <Button\n onClick={() => this.handleSubmit()}\n type=\"primary\"\n loading={btnLoading}\n disabled={disabledSubmit}\n >\n {btnSubmitText}\n </Button>\n )}\n </div>\n </div>\n </div>\n );\n }\n}\n\nEditor.propTypes = {\n rows: PropTypes.number,\n placeholder: PropTypes.string,\n showEmoji: PropTypes.bool,\n showUpload: PropTypes.bool,\n value: PropTypes.string,\n onChange: PropTypes.func,\n onSubmit: PropTypes.func,\n btnSubmitText: PropTypes.string,\n btnLoading: PropTypes.bool,\n btnDisabled: PropTypes.bool,\n button: PropTypes.node,\n emojiToolIcon: PropTypes.node,\n imageToolIcon: PropTypes.node,\n};\n\nEditor.defaultProps = {\n rows: 5,\n placeholder: '说点什么吧...',\n showEmoji: true,\n showUpload: true,\n btnSubmitText: '发表',\n btnLoading: false,\n btnDisabled: false,\n};\n\nexport default Editor;\n"]}
|
