通用评论

index.js 8.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306
  1. import React from "react";
  2. import PropTypes from "prop-types";
  3. import { Icon, Button, Popover, Input } from "antd";
  4. import { OSS_LINK } from "../../constant";
  5. import { isFunction } from "../../helper";
  6. import Upload from "./Upload";
  7. import Emoji from "./Emoji";
  8. import "./index.css";
  9. const { TextArea } = Input;
  10. class Editor extends React.Component {
  11. constructor(props) {
  12. super(props);
  13. this.state = {
  14. showUpload: false,
  15. value: "", // 编辑器里面的值
  16. fileList: [], // 图片列表
  17. fileMap: {} // 已经上传的图片路径和 uid 的映射 { uid: path }
  18. };
  19. this.handleChange = this.handleChange.bind(this);
  20. this.handleClickEmoji = this.handleClickEmoji.bind(this);
  21. this.handleChangeFileList = this.handleChangeFileList.bind(this);
  22. this.handleShowUpload = this.handleShowUpload.bind(this);
  23. this.handleUpload = this.handleUpload.bind(this);
  24. this.handleSubmit = this.handleSubmit.bind(this);
  25. this.resetState = this.resetState.bind(this);
  26. }
  27. componentDidMount() {
  28. if (isFunction(this.props.onRef)) {
  29. this.props.onRef(this);
  30. }
  31. }
  32. /**
  33. * 编辑器的值改变事件
  34. * 将最新的值存储到 state 中
  35. * @param {string} value 输入的值
  36. */
  37. handleChange(value) {
  38. this.setState({ value });
  39. if (this.props.onChange) {
  40. this.props.onChange(value);
  41. }
  42. }
  43. /**
  44. * 点击 emoji 的事件
  45. * 点击后,需要将改 emoji 插入到编辑器中
  46. * 插入的值为 [emoji chinese name]
  47. * 参数 emoji 即为 emoji chinese name
  48. * @param {string}} emoji emoji 的中文,如 微笑
  49. */
  50. handleClickEmoji(emoji) {
  51. let { value } = this.state;
  52. value += `[${emoji}]`;
  53. this.handleChange(value);
  54. }
  55. /**
  56. * 监听文件列表改变事件
  57. * @param {Array} fileList 文件列表
  58. */
  59. handleChangeFileList(fileList) {
  60. this.setState({ fileList });
  61. }
  62. /**
  63. * 控制上传 Popover 的显示和隐藏
  64. * @param {boolean} showUpload 是否显示上传的 Popover
  65. */
  66. handleShowUpload(showUpload) {
  67. if (typeof showUpload === "boolean") {
  68. this.setState({ showUpload: showUpload });
  69. } else {
  70. this.setState({ showUpload: !this.state.showUpload });
  71. }
  72. }
  73. /**
  74. * 上传文件
  75. * @param {object} param 文件对象
  76. */
  77. handleUpload({ uid, path }) {
  78. const { fileMap } = this.state;
  79. fileMap[uid] = path;
  80. this.setState({ fileMap });
  81. }
  82. /**
  83. * 提交编辑器内容
  84. * 提交功能,交给父组件来实现
  85. * 需要父组件传入 onSubmit
  86. */
  87. handleSubmit() {
  88. let { value, fileMap, fileList } = this.state;
  89. const files = [];
  90. if (fileList.length) {
  91. fileList.forEach(item => {
  92. files.push(`${OSS_LINK}${fileMap[item.uid]}`);
  93. });
  94. }
  95. if (this.props.beforeSubmit) {
  96. Promise.resolve(this.props.beforeSubmit({ text: value, files })).then(
  97. res => {
  98. if (!(res === false)) {
  99. this.props.onSubmit({ text: value, files }, () => {
  100. this.resetState();
  101. });
  102. }
  103. }
  104. );
  105. } else {
  106. this.props.onSubmit({ text: value, files }, () => {
  107. this.resetState();
  108. });
  109. }
  110. }
  111. resetState() {
  112. this.setState({
  113. showUpload: false,
  114. value: "",
  115. fileList: [],
  116. fileMap: {}
  117. });
  118. }
  119. render() {
  120. const {
  121. value,
  122. placeholder,
  123. rows,
  124. showEmoji,
  125. showUpload,
  126. closeUploadWhenBlur,
  127. maxUpload,
  128. btnSubmitText,
  129. btnLoading,
  130. btnDisabled,
  131. button,
  132. emojiToolIcon,
  133. imageToolIcon
  134. } = this.props;
  135. const handleSubmit = this.handleSubmit;
  136. const disabledSubmit =
  137. btnDisabled ||
  138. (!this.props.value && !this.state.value && !this.state.fileList.length);
  139. return (
  140. <div className="comment-editor">
  141. <TextArea
  142. value={value || this.state.value}
  143. onChange={e => this.handleChange(e.target.value)}
  144. rows={rows}
  145. placeholder={placeholder}
  146. />
  147. <div className="comment-toolbar">
  148. <div className="comment-toolbar-left">
  149. {showEmoji && (
  150. <Popover
  151. trigger="click"
  152. placement="bottomLeft"
  153. autoAdjustOverflow={false}
  154. content={
  155. <div style={{ width: 200 }}>
  156. <Emoji onClick={this.handleClickEmoji} />
  157. </div>
  158. }
  159. overlayClassName="comment-emoji-popover"
  160. >
  161. {emojiToolIcon || (
  162. <Icon type="smile-o" className="comment-toolbar-icon" />
  163. )}
  164. </Popover>
  165. )}
  166. {showUpload ? (
  167. <Popover
  168. trigger="click"
  169. visible={this.state.showUpload}
  170. overlayStyle={{ zIndex: 999 }}
  171. onVisibleChange={
  172. closeUploadWhenBlur
  173. ? visible => {
  174. this.handleShowUpload(visible);
  175. }
  176. : null
  177. }
  178. content={
  179. <div
  180. style={{
  181. width: 112 * maxUpload,
  182. minHeight: 100,
  183. margin: "0 auto"
  184. }}
  185. >
  186. <Upload
  187. onChangeFileList={this.handleChangeFileList}
  188. onUpload={this.handleUpload}
  189. maxUpload={maxUpload}
  190. fileList={this.state.fileList}
  191. showError={this.props.showError}
  192. onError={this.props.onError}
  193. />
  194. </div>
  195. }
  196. placement="bottomLeft"
  197. title={
  198. <div style={{ margin: "5px auto" }}>
  199. <span>
  200. 上传图片
  201. {maxUpload >= 2 ? (
  202. <span style={{ color: "#666", fontWeight: 400 }}>
  203. (您还能上传{maxUpload - this.state.fileList.length}张图片)
  204. </span>
  205. ) : null}
  206. </span>
  207. <Icon
  208. type="close"
  209. onClick={() => this.handleShowUpload(false)}
  210. style={{
  211. float: "right",
  212. cursor: "pointer",
  213. marginTop: 4
  214. }}
  215. />
  216. </div>
  217. }
  218. >
  219. {imageToolIcon ? (
  220. React.cloneElement(imageToolIcon, {
  221. onClick: () => this.handleShowUpload(true)
  222. })
  223. ) : (
  224. <Icon
  225. type="picture"
  226. className="comment-toolbar-icon"
  227. style={{ marginLeft: 10 }}
  228. onClick={() => this.handleShowUpload(true)}
  229. />
  230. )}
  231. </Popover>
  232. ) : null}
  233. </div>
  234. <div className="comment-toolbar-right">
  235. {button ? (
  236. React.cloneElement(button, {
  237. onClick: button.props.onClick || handleSubmit
  238. })
  239. ) : (
  240. <Button
  241. onClick={() => this.handleSubmit()}
  242. type="primary"
  243. loading={btnLoading}
  244. disabled={disabledSubmit}
  245. >
  246. {btnSubmitText}
  247. </Button>
  248. )}
  249. </div>
  250. </div>
  251. </div>
  252. );
  253. }
  254. }
  255. Editor.propTypes = {
  256. rows: PropTypes.number,
  257. placeholder: PropTypes.string,
  258. showEmoji: PropTypes.bool,
  259. showUpload: PropTypes.bool,
  260. closeUploadWhenBlur: PropTypes.bool,
  261. maxUpload: PropTypes.number,
  262. value: PropTypes.string,
  263. onChange: PropTypes.func,
  264. onSubmit: PropTypes.func,
  265. beforeSubmit: PropTypes.func,
  266. btnSubmitText: PropTypes.string,
  267. btnLoading: PropTypes.bool,
  268. btnDisabled: PropTypes.bool,
  269. button: PropTypes.node,
  270. emojiToolIcon: PropTypes.node,
  271. imageToolIcon: PropTypes.node,
  272. showError: PropTypes.bool,
  273. onError: PropTypes.func
  274. };
  275. Editor.defaultProps = {
  276. rows: 5,
  277. placeholder: "说点什么吧...",
  278. showEmoji: true,
  279. showUpload: true,
  280. closeUploadWhenBlur: false,
  281. maxUpload: 1,
  282. btnSubmitText: "发表",
  283. btnLoading: false,
  284. btnDisabled: false,
  285. showError: true
  286. };
  287. export default Editor;