ソースを参照

fix:表情弹框可配置位置、头像变形、图片多选等

zhengyingya 5 年 前
コミット
c54e8c3aff
共有5 個のファイルを変更した27 個の追加5 個の削除を含む
  1. 7
    1
      src/components/ContentItem/index.css
  2. 7
    1
      src/components/ContentItem/index.js
  3. 2
    1
      src/components/Editor/Upload.js
  4. 8
    2
      src/components/Editor/index.js
  5. 3
    0
      src/index.js

+ 7
- 1
src/components/ContentItem/index.css ファイルの表示

@@ -16,7 +16,13 @@
16 16
   margin-left: 10px;
17 17
   margin-bottom: 20px;
18 18
 }
19
-
19
+.comment-item-avatar {
20
+  width: 40px;
21
+  height: 40px;
22
+  border-radius: 20px;
23
+  background-position: center;
24
+  background-size: cover;
25
+}
20 26
 .comment-item-content {
21 27
   margin: 10px 0;
22 28
   word-break: break-all;

+ 7
- 1
src/components/ContentItem/index.js ファイルの表示

@@ -116,7 +116,13 @@ class CommentItem extends Component {
116 116
     return (
117 117
       <div className="comment-item-box">
118 118
         <div className="comment-item-left">
119
-          <Avatar src={content.user_avatar || avatar} size="large" />
119
+          {/* <Avatar src={content.user_avatar || avatar} size="large" /> */}
120
+          <div
121
+            className="comment-item-avatar"
122
+            style={{
123
+              backgroundImage: `url(${content.user_avatar || avatar})`
124
+            }}
125
+          />
120 126
         </div>
121 127
         <div className="comment-item-right">
122 128
           <div>

+ 2
- 1
src/components/Editor/Upload.js ファイルの表示

@@ -103,7 +103,7 @@ class App extends React.Component {
103 103
 
104 104
   render() {
105 105
     const { previewVisible, previewImage } = this.state;
106
-    const { fileList, maxUpload } = this.props;
106
+    const { fileList, maxUpload, multiple } = this.props;
107 107
     const uploadButton = (
108 108
       <div>
109 109
         <Icon type="plus" />
@@ -114,6 +114,7 @@ class App extends React.Component {
114 114
       <div>
115 115
         <Upload
116 116
           accept="image/jpg,image/jpeg,image/png,image/bmp"
117
+          multiple={multiple}
117 118
           listType="picture-card"
118 119
           fileList={fileList}
119 120
           customRequest={this.customRequest}

+ 8
- 2
src/components/Editor/index.js ファイルの表示

@@ -172,6 +172,8 @@ class Editor extends React.Component {
172 172
       rows,
173 173
       showEmoji,
174 174
       showUpload,
175
+      multiple,
176
+      emojiPopoverPlacement,
175 177
       closeUploadWhenBlur,
176 178
       maxUpload,
177 179
       // btnSubmitText,
@@ -199,7 +201,6 @@ class Editor extends React.Component {
199 201
             "comment-editor-toolbar-error": inputValue.length > maxLength
200 202
           })}
201 203
         >
202
-
203 204
           {/* {intl.get("editor.alreadyEntered", {
204 205
             count: inputValue.length,
205 206
             maxLength
@@ -219,7 +220,7 @@ class Editor extends React.Component {
219 220
               {showEmoji && (
220 221
                 <Popover
221 222
                   trigger="click"
222
-                  placement="bottomLeft"
223
+                  placement={emojiPopoverPlacement}
223 224
                   autoAdjustOverflow={false}
224 225
                   content={
225 226
                     <div
@@ -264,6 +265,7 @@ class Editor extends React.Component {
264 265
                       }}
265 266
                     >
266 267
                       <Upload
268
+                        multiple={multiple}
267 269
                         onChangeFileList={this.handleChangeFileList}
268 270
                         onUpload={this.handleUpload}
269 271
                         maxUpload={maxUpload}
@@ -343,7 +345,9 @@ Editor.propTypes = {
343 345
   rows: PropTypes.number,
344 346
   placeholder: PropTypes.string,
345 347
   showEmoji: PropTypes.bool,
348
+  emojiPopoverPlacement: PropTypes.string,
346 349
   showUpload: PropTypes.bool,
350
+  multiple: PropTypes.bool,
347 351
   closeUploadWhenBlur: PropTypes.bool,
348 352
   maxUpload: PropTypes.number,
349 353
   value: PropTypes.string,
@@ -366,6 +370,8 @@ Editor.defaultProps = {
366 370
   // placeholder: "说点什么吧",
367 371
   showEmoji: true,
368 372
   showUpload: true,
373
+  multiple: true,
374
+  emojiPopoverPlacement: "bottomLeft",
369 375
   closeUploadWhenBlur: false,
370 376
   maxUpload: 1,
371 377
   // btnSubmitText: "发表",

+ 3
- 0
src/index.js ファイルの表示

@@ -52,6 +52,9 @@ if (process.env.NODE_ENV !== "production") {
52 52
     userId: 71299,
53 53
     onCountChange: c => {
54 54
       console.log(c);
55
+    },
56
+    editorProps: {
57
+      // emojiPopoverPlacement: "bottom"
55 58
     }
56 59
   });
57 60
 }