123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126 |
- // https://github.com/lovasoa/react-contenteditable/blob/master/src/react-contenteditable.js
- import React from "react";
- import { Icon, Button, Popover, Input } from "antd";
- import { MAX_UPLOAD_NUMBER } from "../../constant";
- import Upload from "./Upload";
- import Emoji from "./Emoji";
- // import styles from "./index.less";
- import "./index.css";
-
- const { TextArea } = Input;
-
- export default class Editor extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- showUpload: false
- };
- this.handleClickEmoji = this.handleClickEmoji.bind(this);
- this.handleShowUpload = this.handleShowUpload.bind(this);
- }
-
- componentDidMount() {}
-
- handleClickEmoji(emojiId) {
- this.props.onChangeEmoji(emojiId);
- }
-
- handleShowUpload(showUpload) {
- if (typeof showUpload === "boolean") {
- this.setState({ showUpload: showUpload });
- } else {
- this.setState({ showUpload: !this.state.showUpload });
- }
- }
-
- render() {
- const {
- value,
- onChange,
- placeholder,
- fileList,
- onChangeFileList,
- onUpload
- } = this.props;
- return (
- <div className="editor">
- <TextArea
- value={value}
- onChange={onChange}
- rows={5}
- placeholder={placeholder}
- />
-
- <div className="toolbar">
- <div style={{ float: "left", margin: "8px 11px" }}>
- <Popover
- trigger="click"
- placement="bottomLeft"
- autoAdjustOverflow={false}
- content={
- <div style={{ width: 200 }}>
- <Emoji onClick={this.handleClickEmoji} />
- </div>
- }
- overlayClassName="feed"
- >
- <Icon type="smile-o" className="icon" />
- </Popover>
-
- <Popover
- visible={this.state.showUpload}
- overlayStyle={{ zIndex: 999 }}
- content={
- <div style={{ width: 112 * MAX_UPLOAD_NUMBER, minHeight: 100 }}>
- <Upload
- onChangeFileList={onChangeFileList}
- onUpload={onUpload}
- fileList={fileList}
- />
- </div>
- }
- placement="bottomLeft"
- title={
- <div style={{ margin: "5px auto" }}>
- <span>
- 上传图片
- <span style={{ color: "#666", fontWeight: 400 }}>
- (您还能上传{MAX_UPLOAD_NUMBER - fileList.length}张图片)
- </span>
- </span>
- <Icon
- type="close"
- onClick={() => this.handleShowUpload(false)}
- style={{
- float: "right",
- cursor: "pointer",
- marginTop: 4
- }}
- />
- </div>
- }
- >
- <Icon
- type="picture"
- className="icon"
- style={{ marginLeft: 10 }}
- onClick={() => this.handleShowUpload(true)}
- />
- </Popover>
- </div>
-
- <div style={{ float: "right", margin: "5px 11px" }}>
- <Button
- onClick={this.props.onSubmit}
- type="primary"
- loading={this.props.loading}
- >
- 发表
- </Button>
- </div>
- </div>
- </div>
- );
- }
- }
|