Просмотр исходного кода

Merge remote-tracking branch 'node/fix/classname'

# Conflicts:
#	assets/example.html
#	assets/example.js
#	src/index.js
narrowizard 6 лет назад
Родитель
Сommit
854d6375b1

+ 21
- 15
README.md Просмотреть файл

@@ -42,11 +42,14 @@ render() {
42 42
 
43 43
 ### 在非 React.js 项目中使用 ~~作为静态文件引入~~
44 44
 
45
-1. 引入通用评论的 css 和 js 文件。在 `./assets/static` 目录。
45
+**使用`assets` 分支的 `./assets/static` 目录[https://git.links123.net/npm/comment/src/branch/assets/assets/static](https://git.links123.net/npm/comment/src/branch/assets/assets/static)的静态文件**
46
+
47
+1. 引入通用评论的 css 和 js 文件。在 `assets` 分支的 `./assets/static` 目录: [https://git.links123.net/npm/comment/src/branch/assets/assets/static](https://git.links123.net/npm/comment/src/branch/assets/assets/static)。
46 48
 2. 调用 `window.renderComment` 方法并传入对应参数来渲染通用评论。参数列表:
47 49
   - `id`: string, 必填, 渲染评论的节点的 ID
48 50
   - `type`: number, 必填, 评论的 type    
49
-  - `businessId`: string, 必填, 评论的 businessId    
51
+  - `businessId`: string, 选填, 评论的 businessId,默认 test
52
+  - `API`: string, 选填, 评论的 businessId,默认 http://api.links123.net/comment/v1
50 53
 
51 54
 具体可参考 `./assets/example.html`。
52 55
 
@@ -74,10 +77,11 @@ render() {
74 77
   <script type="text/javascript">
75 78
     // 调用 renderComment 这个方法,渲染通用评论
76 79
     window.renderComment({
77
-      id: 'comment', // 渲染通用评论到 comment 这个节点,id 名称可 自定义
78
-      type: 1, // 评论的 type
79
-      businessId: 'test' // 评论的 businessId
80
-    })
80
+      id: 'comment', // required, 渲染通用评论到 comment 这个节点,id 名称可 自定义
81
+      type: 1, // required, 评论的 type
82
+      businessId: 'test' // 评论的 businessId, 默认 test
83
+      API: 'http://api.links123.net/comment/v1', // API 前缀, 默认 http://api.links123.net/comment/v1 
84
+    });
81 85
   </script>
82 86
 </body>
83 87
 </html>
@@ -98,11 +102,11 @@ render() {
98 102
 
99 103
 ```html
100 104
 <!-- ... -->
101
-  <link rel="stylesheet" type="text/css" media="screen" href="./static/css/comment.0.5.13.css" />
105
+  <link rel="stylesheet" type="text/css" media="screen" href="./static/css/xxx.css" />
102 106
 <!-- ... -->
103 107
   <div id="RENDER_ELEMENT_WRAPPER"></div>
104 108
 <!-- ... -->
105
-  <script type="text/javascript" src="./static/js/comment.0.5.13.js"></script>
109
+  <script type="text/javascript" src="./static/js/xxx.js"></script>
106 110
 <!-- ... -->
107 111
 ```
108 112
 
@@ -143,7 +147,8 @@ function main() {
143 147
     window.renderComment({
144 148
       id: id,
145 149
       type: 1,
146
-      businessId: 'test'
150
+      businessId: 'test',
151
+      API: 'http://api.links123.net/comment/v1',
147 152
     })
148 153
   })
149 154
   
@@ -154,23 +159,24 @@ function main() {
154 159
     window.renderComment({
155 160
       id: id,
156 161
       type: 1,
157
-      businessId: 'test1'
162
+      businessId: 'test1',
163
+      API: 'http://api.links123.net/comment/v1',
158 164
     })
159 165
   })
160
-
161 166
 }
162 167
 
163 168
 main();
164 169
 ```
165 170
 
166
-#### class 样式冲突
171
+#### ~~class 样式冲突~~
172
+
173
+> assets 分支已修复。
167 174
 
168
-`master` 分支的图片预览 `container` 样式和 boostrap 有冲突。在 [`fix/classname`](https://git.links123.net/node/npmcomment/src/branch/fix/classname) 分支对评论的样式名称做了修改,改为了 `comment-image-preview-container`。
175
+~~`master` 分支的图片预览 `container` 样式和 boostrap 有冲突。在 [`fix/classname`](https://git.links123.net/node/npmcomment/src/branch/fix/classname) 分支对评论的样式名称做了修改,改为了 `comment-image-preview-container`。~~
169 176
 
170 177
 解决办法就是使用 [`fix/classname`](https://git.links123.net/node/npmcomment/src/branch/fix/classname) 分支中的静态文件:
171 178
 
172
-- css:
173
-- js:
179
+- [https://git.links123.net/node/npmcomment/src/branch/fix/classname](https://git.links123.net/node/npmcomment/src/branch/fix/classname)
174 180
 
175 181
 尝试过使用 CSS Module 进行修改,不过改造量较大,改动的过程中影响了其他样式,所以暂时放弃了。
176 182
 

+ 1
- 1
assets/example.html Просмотреть файл

@@ -20,7 +20,7 @@
20 20
   </div>
21 21
   
22 22
   <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>
23
-  <script type="text/javascript" src="./static/js/main.1e964a23.js"></script>
23
+  <script type="text/javascript" src="./static/js/main.426815d8.js"></script>
24 24
   <script type="text/javascript" src="example.js"></script>
25 25
 </body>
26 26
 </html>

+ 1
- 0
assets/example.js Просмотреть файл

@@ -56,4 +56,5 @@ function main() {
56 56
 }
57 57
 
58 58
 
59
+
59 60
 main();

+ 0
- 2
assets/static/js/main.1e964a23.js
Разница между файлами не показана из-за своего большого размера
Просмотреть файл


+ 0
- 1
assets/static/js/main.1e964a23.js.map
Разница между файлами не показана из-за своего большого размера
Просмотреть файл


+ 2
- 0
assets/static/js/main.426815d8.js
Разница между файлами не показана из-за своего большого размера
Просмотреть файл


+ 1
- 0
assets/static/js/main.426815d8.js.map
Разница между файлами не показана из-за своего большого размера
Просмотреть файл


+ 5
- 15
lib/components/Editor/index.js Просмотреть файл

@@ -346,9 +346,10 @@ var Editor = function (_React$Component) {
346 346
               showUpload ? _react2.default.createElement(
347 347
                 _popover2.default,
348 348
                 {
349
-                  trigger: "click",
350
-                  visible: this.state.showUpload,
351
-                  overlayStyle: { zIndex: 999 },
349
+                  trigger: "click"
350
+                  // TODO: 针对非 react.js,直接使用 click 事件来控制展开或关闭
351
+                  // visible={this.state.showUpload}
352
+                  , overlayStyle: { zIndex: 999 },
352 353
                   onVisibleChange: closeUploadWhenBlur ? function (visible) {
353 354
                     _this3.handleShowUpload(visible);
354 355
                   } : null,
@@ -386,18 +387,7 @@ var Editor = function (_React$Component) {
386 387
                         maxUpload - this.state.fileList.length,
387 388
                         "\u5F20\u56FE\u7247)"
388 389
                       ) : null
389
-                    ),
390
-                    _react2.default.createElement(_icon2.default, {
391
-                      type: "close",
392
-                      onClick: function onClick() {
393
-                        return _this3.handleShowUpload(false);
394
-                      },
395
-                      style: {
396
-                        float: "right",
397
-                        cursor: "pointer",
398
-                        marginTop: 4
399
-                      }
400
-                    })
390
+                    )
401 391
                   )
402 392
                 },
403 393
                 imageToolIcon ? _react2.default.cloneElement(imageToolIcon, {

+ 1
- 1
lib/components/Editor/index.js.map
Разница между файлами не показана из-за своего большого размера
Просмотреть файл


+ 16
- 9
lib/index.js Просмотреть файл

@@ -14,12 +14,10 @@ var _App = require("./App");
14 14
 
15 15
 var _App2 = _interopRequireDefault(_App);
16 16
 
17
-var _registerServiceWorker = require("./registerServiceWorker");
18
-
19
-var _registerServiceWorker2 = _interopRequireDefault(_registerServiceWorker);
20
-
21 17
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
22 18
 
19
+// import registerServiceWorker from "./registerServiceWorker";
20
+
23 21
 var Index = function Index(props) {
24 22
   return _react2.default.createElement(
25 23
     _App2.default,
@@ -34,26 +32,34 @@ var Index = function Index(props) {
34 32
  *  - {string} id 渲染评论的DOM的 ID
35 33
  *  - {number} type 评论的 type
36 34
  *  - {string} businessId 评论的 businessId
35
+ *  - {string} API, API 前缀, 默认 http://api.links123.net/comment/v1
37 36
  */
38 37
 function renderComment(config) {
39 38
   if (!config.id) {
40 39
     throw new Error("id is required");
41 40
   }
42
-  if (!config.id) {
41
+  if (!config.type) {
43 42
     throw new Error("type is required");
44 43
   }
45
-  if (!config.id) {
46
-    throw new Error("businessId is required");
44
+  if (!config.businessId) {
45
+    // throw new Error("businessId is required");
46
+    console.warn("没有传入 businessId 参数,默认使用: test");
47
+  }
48
+  if (!config.API) {
49
+    // throw new Error("API is required");
50
+    console.warn("没有传入 API 参数,默认使用: http://api.links123.net/comment/v1");
47 51
   }
48 52
   var id = config.id,
49 53
       _config$type = config.type,
50 54
       type = _config$type === undefined ? 1 : _config$type,
51 55
       _config$businessId = config.businessId,
52 56
       businessId = _config$businessId === undefined ? "test" : _config$businessId,
57
+      _config$API = config.API,
58
+      API = _config$API === undefined ? "http://api.links123.net/comment/v1" : _config$API,
53 59
       userId = config.userId;
54 60
 
55 61
 
56
-  _reactDom2.default.render(_react2.default.createElement(Index, { type: type, businessId: businessId, userId: userId }), document.getElementById(id));
62
+  _reactDom2.default.render(_react2.default.createElement(Index, { type: type, businessId: businessId, API: API, userId: userId }), document.getElementById(id));
57 63
   // registerServiceWorker();
58 64
 }
59 65
 
@@ -62,6 +68,7 @@ window.renderComment = renderComment;
62 68
 // renderComment({
63 69
 //   id: "root-comment",
64 70
 //   type: 1,
65
-//   businessId: "test"
71
+//   businessId: "test",
72
+//   API: 'http://api.links123.net/comment/v1',
66 73
 // });
67 74
 //# sourceMappingURL=index.js.map

+ 1
- 1
lib/index.js.map Просмотреть файл

@@ -1 +1 @@
1
-{"version":3,"sources":["../src/index.js"],"names":["Index","props","renderComment","config","id","Error","type","businessId","userId","ReactDOM","render","document","getElementById","window"],"mappings":";;;;AAAA;;;;AACA;;;;AACA;;;;AACA;;;;;;AAEA,IAAMA,QAAQ,SAARA,KAAQ;AAAA,SACZ;AAAC,iBAAD;AAAA,eAAK,sBAAL,EAAsB,oBAAtB,EAAqC,oBAArC,EAAoD,eAApD,IAAkEC,KAAlE;AACE,kCAAC,WAAD,IAAQ,WAAW,CAAnB,EAAsB,eAAtB;AADF,GADY;AAAA,CAAd;;AAMA;;;;;;;AAOA,SAASC,aAAT,CAAuBC,MAAvB,EAA+B;AAC7B,MAAI,CAACA,OAAOC,EAAZ,EAAgB;AACd,UAAM,IAAIC,KAAJ,CAAU,gBAAV,CAAN;AACD;AACD,MAAI,CAACF,OAAOC,EAAZ,EAAgB;AACd,UAAM,IAAIC,KAAJ,CAAU,kBAAV,CAAN;AACD;AACD,MAAI,CAACF,OAAOC,EAAZ,EAAgB;AACd,UAAM,IAAIC,KAAJ,CAAU,wBAAV,CAAN;AACD;AAT4B,MAUrBD,EAVqB,GAUyBD,MAVzB,CAUrBC,EAVqB;AAAA,qBAUyBD,MAVzB,CAUjBG,IAViB;AAAA,MAUjBA,IAViB,gCAUV,CAVU;AAAA,2BAUyBH,MAVzB,CAUPI,UAVO;AAAA,MAUPA,UAVO,sCAUM,MAVN;AAAA,MAUcC,MAVd,GAUyBL,MAVzB,CAUcK,MAVd;;;AAY7BC,qBAASC,MAAT,CACE,8BAAC,KAAD,IAAO,MAAMJ,IAAb,EAAmB,YAAYC,UAA/B,EAA2C,QAAQC,MAAnD,GADF,EAEEG,SAASC,cAAT,CAAwBR,EAAxB,CAFF;AAIA;AACD;;AAEDS,OAAOX,aAAP,GAAuBA,aAAvB;;AAEA;AACA;AACA;AACA;AACA","file":"index.js","sourcesContent":["import React from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport App, { Editor } from \"./App\";\r\nimport registerServiceWorker from \"./registerServiceWorker\";\r\n\r\nconst Index = props => (\r\n  <App showAlertComment showAlertReply showAlertFavor showError {...props}>\r\n    <Editor maxUpload={9} autoFocus />\r\n  </App>\r\n);\r\n\r\n/**\r\n * 渲染评论组件\r\n * @param {object} config 编辑器配置\r\n *  - {string} id 渲染评论的DOM的 ID\r\n *  - {number} type 评论的 type\r\n *  - {string} businessId 评论的 businessId\r\n */\r\nfunction renderComment(config) {\r\n  if (!config.id) {\r\n    throw new Error(\"id is required\");\r\n  }\r\n  if (!config.id) {\r\n    throw new Error(\"type is required\");\r\n  }\r\n  if (!config.id) {\r\n    throw new Error(\"businessId is required\");\r\n  }\r\n  const { id, type = 1, businessId = \"test\", userId } = config;\r\n\r\n  ReactDOM.render(\r\n    <Index type={type} businessId={businessId} userId={userId} />,\r\n    document.getElementById(id)\r\n  );\r\n  // registerServiceWorker();\r\n}\r\n\r\nwindow.renderComment = renderComment;\r\n\r\n// renderComment({\r\n//   id: \"root-comment\",\r\n//   type: 1,\r\n//   businessId: \"test\"\r\n// });\r\n"]}
1
+{"version":3,"sources":["../src/index.js"],"names":["Index","props","renderComment","config","id","Error","type","businessId","console","warn","API","userId","ReactDOM","render","document","getElementById","window"],"mappings":";;;;AAAA;;;;AACA;;;;AACA;;;;;;AACA;;AAEA,IAAMA,QAAQ,SAARA,KAAQ;AAAA,SACZ;AAAC,iBAAD;AAAA,eAAK,sBAAL,EAAsB,oBAAtB,EAAqC,oBAArC,EAAoD,eAApD,IAAkEC,KAAlE;AACE,kCAAC,WAAD,IAAQ,WAAW,CAAnB,EAAsB,eAAtB;AADF,GADY;AAAA,CAAd;;AAMA;;;;;;;;AAQA,SAASC,aAAT,CAAuBC,MAAvB,EAA+B;AAC7B,MAAI,CAACA,OAAOC,EAAZ,EAAgB;AACd,UAAM,IAAIC,KAAJ,CAAU,gBAAV,CAAN;AACD;AACD,MAAI,CAACF,OAAOG,IAAZ,EAAkB;AAChB,UAAM,IAAID,KAAJ,CAAU,kBAAV,CAAN;AACD;AACD,MAAI,CAACF,OAAOI,UAAZ,EAAwB;AACtB;AACAC,YAAQC,IAAR,CAAa,+BAAb;AACD;AACD,MAAI,CAACN,OAAOO,GAAZ,EAAiB;AACf;AACAF,YAAQC,IAAR,CACE,sDADF;AAGD;AAhB4B,MAkB3BL,EAlB2B,GAuBzBD,MAvByB,CAkB3BC,EAlB2B;AAAA,qBAuBzBD,MAvByB,CAmB3BG,IAnB2B;AAAA,MAmB3BA,IAnB2B,gCAmBpB,CAnBoB;AAAA,2BAuBzBH,MAvByB,CAoB3BI,UApB2B;AAAA,MAoB3BA,UApB2B,sCAoBd,MApBc;AAAA,oBAuBzBJ,MAvByB,CAqB3BO,GArB2B;AAAA,MAqB3BA,GArB2B,+BAqBrB,oCArBqB;AAAA,MAsB3BC,MAtB2B,GAuBzBR,MAvByB,CAsB3BQ,MAtB2B;;;AAyB7BC,qBAASC,MAAT,CACE,8BAAC,KAAD,IAAO,MAAMP,IAAb,EAAmB,YAAYC,UAA/B,EAA2C,KAAKG,GAAhD,EAAqD,QAAQC,MAA7D,GADF,EAEEG,SAASC,cAAT,CAAwBX,EAAxB,CAFF;AAIA;AACD;;AAEDY,OAAOd,aAAP,GAAuBA,aAAvB;;AAEA;AACA;AACA;AACA;AACA;AACA","file":"index.js","sourcesContent":["import React from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport App, { Editor } from \"./App\";\r\n// import registerServiceWorker from \"./registerServiceWorker\";\r\n\r\nconst Index = props => (\r\n  <App showAlertComment showAlertReply showAlertFavor showError {...props}>\r\n    <Editor maxUpload={9} autoFocus />\r\n  </App>\r\n);\r\n\r\n/**\r\n * 渲染评论组件\r\n * @param {object} config 编辑器配置\r\n *  - {string} id 渲染评论的DOM的 ID\r\n *  - {number} type 评论的 type\r\n *  - {string} businessId 评论的 businessId\r\n *  - {string} API, API 前缀, 默认 http://api.links123.net/comment/v1\r\n */\r\nfunction renderComment(config) {\r\n  if (!config.id) {\r\n    throw new Error(\"id is required\");\r\n  }\r\n  if (!config.type) {\r\n    throw new Error(\"type is required\");\r\n  }\r\n  if (!config.businessId) {\r\n    // throw new Error(\"businessId is required\");\r\n    console.warn(\"没有传入 businessId 参数,默认使用: test\");\r\n  }\r\n  if (!config.API) {\r\n    // throw new Error(\"API is required\");\r\n    console.warn(\r\n      \"没有传入 API 参数,默认使用: http://api.links123.net/comment/v1\"\r\n    );\r\n  }\r\n  const {\r\n    id,\r\n    type = 1,\r\n    businessId = \"test\",\r\n    API = \"http://api.links123.net/comment/v1\",\r\n    userId\r\n  } = config;\r\n\r\n  ReactDOM.render(\r\n    <Index type={type} businessId={businessId} API={API} userId={userId} />,\r\n    document.getElementById(id)\r\n  );\r\n  // registerServiceWorker();\r\n}\r\n\r\nwindow.renderComment = renderComment;\r\n\r\n// renderComment({\r\n//   id: \"root-comment\",\r\n//   type: 1,\r\n//   businessId: \"test\",\r\n//   API: 'http://api.links123.net/comment/v1',\r\n// });\r\n"]}

+ 8
- 4
src/components/Editor/index.js Просмотреть файл

@@ -236,7 +236,8 @@ class Editor extends React.Component {
236 236
               {showUpload ? (
237 237
                 <Popover
238 238
                   trigger="click"
239
-                  visible={this.state.showUpload}
239
+                  // TODO: 针对非 react.js,直接使用 click 事件来控制展开或关闭
240
+                  // visible={this.state.showUpload}
240 241
                   overlayStyle={{ zIndex: 999 }}
241 242
                   onVisibleChange={
242 243
                     closeUploadWhenBlur
@@ -271,11 +272,14 @@ class Editor extends React.Component {
271 272
                         上传图片
272 273
                         {maxUpload >= 2 ? (
273 274
                           <span style={{ color: "#666", fontWeight: 400 }}>
274
-                            (您还能上传{maxUpload - this.state.fileList.length}张图片)
275
+                            (您还能上传
276
+                            {maxUpload - this.state.fileList.length}
277
+                            张图片)
275 278
                           </span>
276 279
                         ) : null}
277 280
                       </span>
278
-                      <Icon
281
+                      {/* 因为是点击别的区域关闭,所以不用右上角的 Icon */}
282
+                      {/* <Icon
279 283
                         type="close"
280 284
                         onClick={() => this.handleShowUpload(false)}
281 285
                         style={{
@@ -283,7 +287,7 @@ class Editor extends React.Component {
283 287
                           cursor: "pointer",
284 288
                           marginTop: 4
285 289
                         }}
286
-                      />
290
+                      /> */}
287 291
                     </div>
288 292
                   }
289 293
                 >

+ 22
- 7
src/index.js Просмотреть файл

@@ -1,7 +1,7 @@
1 1
 import React from "react";
2 2
 import ReactDOM from "react-dom";
3 3
 import App, { Editor } from "./App";
4
-import registerServiceWorker from "./registerServiceWorker";
4
+// import registerServiceWorker from "./registerServiceWorker";
5 5
 
6 6
 const Index = props => (
7 7
   <App showAlertComment showAlertReply showAlertFavor showError {...props}>
@@ -15,21 +15,35 @@ const Index = props => (
15 15
  *  - {string} id 渲染评论的DOM的 ID
16 16
  *  - {number} type 评论的 type
17 17
  *  - {string} businessId 评论的 businessId
18
+ *  - {string} API, API 前缀, 默认 http://api.links123.net/comment/v1
18 19
  */
19 20
 function renderComment(config) {
20 21
   if (!config.id) {
21 22
     throw new Error("id is required");
22 23
   }
23
-  if (!config.id) {
24
+  if (!config.type) {
24 25
     throw new Error("type is required");
25 26
   }
26
-  if (!config.id) {
27
-    throw new Error("businessId is required");
27
+  if (!config.businessId) {
28
+    // throw new Error("businessId is required");
29
+    console.warn("没有传入 businessId 参数,默认使用: test");
30
+  }
31
+  if (!config.API) {
32
+    // throw new Error("API is required");
33
+    console.warn(
34
+      "没有传入 API 参数,默认使用: http://api.links123.net/comment/v1"
35
+    );
28 36
   }
29
-  const { id, type = 1, businessId = "test", userId } = config;
37
+  const {
38
+    id,
39
+    type = 1,
40
+    businessId = "test",
41
+    API = "http://api.links123.net/comment/v1",
42
+    userId
43
+  } = config;
30 44
 
31 45
   ReactDOM.render(
32
-    <Index type={type} businessId={businessId} userId={userId} />,
46
+    <Index type={type} businessId={businessId} API={API} userId={userId} />,
33 47
     document.getElementById(id)
34 48
   );
35 49
   // registerServiceWorker();
@@ -40,5 +54,6 @@ window.renderComment = renderComment;
40 54
 // renderComment({
41 55
 //   id: "root-comment",
42 56
 //   type: 1,
43
-//   businessId: "test"
57
+//   businessId: "test",
58
+//   API: 'http://api.links123.net/comment/v1',
44 59
 // });