bhd-components 0.9.18 → 0.9.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/index.esm.es5.development.css +124 -122
  2. package/dist/index.esm.es5.development.js +71 -25
  3. package/dist/index.esm.es5.production.css +1 -1
  4. package/dist/index.esm.es5.production.js +1 -1
  5. package/dist/vendor.esm.es5.development.js +1 -1
  6. package/dist/vendor.esm.es5.production.js +1 -1
  7. package/es2017/table/index.module.less +22 -14
  8. package/es2017/viewImage/index.js +69 -23
  9. package/es2017/viewImage/index.module.less +7 -7
  10. package/esm/table/index.module.less +22 -14
  11. package/esm/viewImage/index.js +69 -23
  12. package/esm/viewImage/index.module.less +7 -7
  13. package/package.json +1 -1
package/es2017/table/index.module.less CHANGED
@@ -3,6 +3,11 @@
3
3
  width: 100%;
4
4
  // color:@customColor;
5
5
  :global {
6
+ .bhd-table-container {
7
+ & > .bhd-table-body {
8
+ overflow-y: auto !important;
9
+ }
10
+ }
6
11
  table {
7
12
  th,
8
13
  td {
@@ -152,8 +157,8 @@
152
157
  .bhd-select .bhd-select-arrow {
153
158
  margin-top: -5px;
154
159
  color: rgba(0, 0, 0, 0.65);
155
- &>.anticon{
156
- pointer-events:none;
160
+ & > .anticon {
161
+ pointer-events: none;
157
162
  }
158
163
  }
159
164
  }
@@ -163,7 +168,11 @@
163
168
  .Table.SmallTable {
164
169
  width: 100%;
165
170
  :global {
166
-
171
+ .bhd-table-container {
172
+ & > .bhd-table-body {
173
+ overflow-y: auto !important;
174
+ }
175
+ }
167
176
  table {
168
177
  th,
169
178
  td {
@@ -173,7 +182,6 @@
173
182
  }
174
183
  & > .bhd-table-thead {
175
184
  & > tr {
176
-
177
185
  & > .bhd-table-cell {
178
186
  font-weight: 600;
179
187
  font-size: 16px;
@@ -262,29 +270,29 @@
262
270
  // border-top-right-radius: 0;
263
271
  // }
264
272
  /* 去除head 圆角 */
265
- .bhd-table-container table>thead>tr:first-child >*:first-child{
266
- border-top-left-radius:0;
273
+ .bhd-table-container table > thead > tr:first-child > *:first-child {
274
+ border-top-left-radius: 0;
267
275
  }
268
- .bhd-table-container table>thead>tr:first-child >*:last-child{
276
+ .bhd-table-container table > thead > tr:first-child > *:last-child {
269
277
  border-top-right-radius: 0;
270
278
  }
271
- table{
279
+ table {
272
280
  border-radius: 0;
273
- .bhd-table-header{
281
+ .bhd-table-header {
274
282
  border-radius: 0;
275
283
  }
276
284
  }
277
- .bhd-table-container{
285
+ .bhd-table-container {
278
286
  border-top-left-radius: 0;
279
287
  border-top-right-radius: 0;
280
288
  }
281
- .bhd-table{
289
+ .bhd-table {
282
290
  border-radius: 0;
283
291
  }
284
- .bhd-table-wrapper .bhd-table .bhd-table-header{
292
+ .bhd-table-wrapper .bhd-table .bhd-table-header {
285
293
  border-radius: 0;
286
294
  }
287
-
295
+
288
296
  /* 多选框间距问题 */
289
297
  .bhd-table-wrapper {
290
298
  .bhd-table-selection-col {
@@ -374,7 +382,7 @@
374
382
  margin-top: -5px;
375
383
  color: @color-icon-fill-Tr;
376
384
  }
377
- .bhd-select-open .bhd-select-arrow{
385
+ .bhd-select-open .bhd-select-arrow {
378
386
  color: @color-icon;
379
387
  }
380
388
  }
package/es2017/viewImage/index.js CHANGED
@@ -25,6 +25,7 @@ class ViewImage extends React.Component {
25
25
  document.oncontextmenu = function() {
26
26
  return false;
27
27
  };
28
+ this.moveActionClose();
28
29
  }
29
30
  componentWillUnmount() {
30
31
  document.oncontextmenu = null;
@@ -104,33 +105,57 @@ class ViewImage extends React.Component {
104
105
  color: "#FFFFFF"
105
106
  },
106
107
  children: imgSrc ? "图片加载错误" : "暂无内容"
107
- }) : /*#__PURE__*/ _jsxs("div", {
108
- onMouseDown: this.moveImg,
109
- style: {
110
- transform: `scale(${scaleValue / 100},${scaleValue / 100})`,
111
- left: imgLeft == "auto" ? "auto" : imgLeft + "px",
112
- top: imgTop == "auto" ? "auto" : imgTop + "px"
113
- },
114
- className: styles.viewImgBody_pic,
108
+ }) : // <div onMouseDown={this.moveImg}
109
+ // style={{
110
+ // transform: `scale(${scaleValue / 100},${
111
+ // scaleValue / 100
112
+ // })`,
113
+ // left: imgLeft == "auto" ? "auto" : imgLeft + "px",
114
+ // top: imgTop == "auto" ? "auto" : imgTop + "px",
115
+ // }}
116
+ // className={styles.viewImgBody_pic}>
117
+ // <img
118
+ // id="viewImgBody_pic"
119
+ // key="img"
120
+ // src={imgSrc}
121
+ // alt="图片加载错误"
122
+ // draggable="false"
123
+ // style={{transform:`rotate(${rotateValue}deg)`}}
124
+ // onLoad={this.imgLoad}
125
+ // onError={this.imgErr}
126
+ // />
127
+ // {
128
+ // this.state.actionCloseFlag===0&&(
129
+ // <span
130
+ // id="actionClose"
131
+ // style={{right:`calc(-40px + (-12px * (1 / ${scaleValue / 100}) ))` ,transform: `scale(calc(1 / ${scaleValue / 100}),calc(1 / ${scaleValue / 100}))`,transformOrigin: `top left`}}
132
+ // className={styles.viewImgActionClose}
133
+ // title="关闭"
134
+ // onClick={this.close}>
135
+ // <CustomClose />
136
+ // </span>
137
+ // )
138
+ // }
139
+ // </div>
140
+ /*#__PURE__*/ _jsxs(_Fragment, {
115
141
  children: [
116
142
  /*#__PURE__*/ _jsx("img", {
117
143
  id: "viewImgBody_pic",
118
144
  src: imgSrc,
119
145
  alt: "图片加载错误",
120
146
  draggable: "false",
147
+ onMouseDown: this.moveImg,
121
148
  style: {
122
- transform: `rotate(${rotateValue}deg)`
149
+ transform: `scale(${scaleValue / 100},${scaleValue / 100}) rotate(${rotateValue}deg)`,
150
+ left: imgLeft == "auto" ? "auto" : imgLeft + "px",
151
+ top: imgTop == "auto" ? "auto" : imgTop + "px"
123
152
  },
153
+ className: styles.viewImgBody_pic,
124
154
  onLoad: this.imgLoad,
125
155
  onError: this.imgErr
126
156
  }, "img"),
127
157
  this.state.actionCloseFlag === 0 && /*#__PURE__*/ _jsx("span", {
128
158
  id: "actionClose",
129
- style: {
130
- right: `calc(-40px + (-12px * (1 / ${scaleValue / 100}) ))`,
131
- transform: `scale(calc(1 / ${scaleValue / 100}),calc(1 / ${scaleValue / 100}))`,
132
- transformOrigin: `top left`
133
- },
134
159
  className: styles.viewImgActionClose,
135
160
  title: "关闭",
136
161
  onClick: this.close,
@@ -195,15 +220,24 @@ class ViewImage extends React.Component {
195
220
  });
196
221
  _define_property(this, "moveActionClose", ()=>{
197
222
  setTimeout(()=>{
198
- const rect = document.getElementById('viewImgBody_pic').getBoundingClientRect();
199
- if (rect.top >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight) - 40 && rect.right <= (window.innerWidth || document.documentElement.clientWidth) - 52) {
200
- this.setState({
201
- actionCloseFlag: 0
202
- });
203
- } else {
204
- this.setState({
205
- actionCloseFlag: 1
206
- });
223
+ const pic = document.getElementById('viewImgBody_pic');
224
+ if (pic) {
225
+ const rect = pic.getBoundingClientRect();
226
+ if (rect.top >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight) - 40 && rect.right <= (window.innerWidth || document.documentElement.clientWidth) - 52) {
227
+ this.setState({
228
+ actionCloseFlag: 0
229
+ }, ()=>{
230
+ const actionCloseDom = document.getElementById('actionClose');
231
+ if (actionCloseDom) {
232
+ actionCloseDom.style.top = rect.top + 'px';
233
+ actionCloseDom.style.left = rect.left + rect.width + 12 + 'px';
234
+ }
235
+ });
236
+ } else {
237
+ this.setState({
238
+ actionCloseFlag: 1
239
+ });
240
+ }
207
241
  }
208
242
  }, 10);
209
243
  });
@@ -350,11 +384,15 @@ class ViewImage extends React.Component {
350
384
  imgTop: "auto",
351
385
  rotateValue: 0,
352
386
  scaleValue: 100
387
+ }, ()=>{
388
+ this.moveActionClose();
353
389
  });
354
390
  });
355
391
  _define_property(this, "rotate", ()=>{
356
392
  this.setState({
357
393
  rotateValue: this.state.rotateValue + 90
394
+ }, ()=>{
395
+ this.moveActionClose();
358
396
  });
359
397
  });
360
398
  _define_property(this, "close", ()=>{
@@ -375,6 +413,10 @@ class ViewImage extends React.Component {
375
413
  this.setState({
376
414
  imgSrc: src,
377
415
  loading: false
416
+ }, ()=>{
417
+ setTimeout(()=>{
418
+ this.moveActionClose();
419
+ }, 100);
378
420
  });
379
421
  });
380
422
  _define_property(this, "preChange", async ()=>{
@@ -390,11 +432,15 @@ class ViewImage extends React.Component {
390
432
  _define_property(this, "imgLoad", ()=>{
391
433
  this.setState({
392
434
  imgError: false
435
+ }, ()=>{
436
+ this.moveActionClose();
393
437
  });
394
438
  });
395
439
  _define_property(this, "imgErr", ()=>{
396
440
  this.setState({
397
441
  imgError: true
442
+ }, ()=>{
443
+ this.moveActionClose();
398
444
  });
399
445
  });
400
446
  }
package/es2017/viewImage/index.module.less CHANGED
@@ -75,19 +75,19 @@
75
75
  }
76
76
  .viewImgBody_pic {
77
77
  max-width: 80%;
78
- max-height: 80%;
78
+ max-height: 80%;
79
79
  cursor: move;
80
80
  position: absolute;
81
81
  user-select: none;
82
- img{
83
- width: 100%;
84
- height: 100%;
85
- }
82
+ // img{
83
+ // width: 100%;
84
+ // height: 100%;
85
+ // }
86
86
  }
87
87
  .viewImgActionClose{
88
88
  position: absolute;
89
- top: 0;
90
- right: -52px;
89
+ top: 40px;
90
+ right: 40px;
91
91
  display: flex;
92
92
  width: 40px;
93
93
  height: 40px;
package/esm/table/index.module.less CHANGED
@@ -3,6 +3,11 @@
3
3
  width: 100%;
4
4
  // color:@customColor;
5
5
  :global {
6
+ .bhd-table-container {
7
+ & > .bhd-table-body {
8
+ overflow-y: auto !important;
9
+ }
10
+ }
6
11
  table {
7
12
  th,
8
13
  td {
@@ -152,8 +157,8 @@
152
157
  .bhd-select .bhd-select-arrow {
153
158
  margin-top: -5px;
154
159
  color: rgba(0, 0, 0, 0.65);
155
- &>.anticon{
156
- pointer-events:none;
160
+ & > .anticon {
161
+ pointer-events: none;
157
162
  }
158
163
  }
159
164
  }
@@ -163,7 +168,11 @@
163
168
  .Table.SmallTable {
164
169
  width: 100%;
165
170
  :global {
166
-
171
+ .bhd-table-container {
172
+ & > .bhd-table-body {
173
+ overflow-y: auto !important;
174
+ }
175
+ }
167
176
  table {
168
177
  th,
169
178
  td {
@@ -173,7 +182,6 @@
173
182
  }
174
183
  & > .bhd-table-thead {
175
184
  & > tr {
176
-
177
185
  & > .bhd-table-cell {
178
186
  font-weight: 600;
179
187
  font-size: 16px;
@@ -262,29 +270,29 @@
262
270
  // border-top-right-radius: 0;
263
271
  // }
264
272
  /* 去除head 圆角 */
265
- .bhd-table-container table>thead>tr:first-child >*:first-child{
266
- border-top-left-radius:0;
273
+ .bhd-table-container table > thead > tr:first-child > *:first-child {
274
+ border-top-left-radius: 0;
267
275
  }
268
- .bhd-table-container table>thead>tr:first-child >*:last-child{
276
+ .bhd-table-container table > thead > tr:first-child > *:last-child {
269
277
  border-top-right-radius: 0;
270
278
  }
271
- table{
279
+ table {
272
280
  border-radius: 0;
273
- .bhd-table-header{
281
+ .bhd-table-header {
274
282
  border-radius: 0;
275
283
  }
276
284
  }
277
- .bhd-table-container{
285
+ .bhd-table-container {
278
286
  border-top-left-radius: 0;
279
287
  border-top-right-radius: 0;
280
288
  }
281
- .bhd-table{
289
+ .bhd-table {
282
290
  border-radius: 0;
283
291
  }
284
- .bhd-table-wrapper .bhd-table .bhd-table-header{
292
+ .bhd-table-wrapper .bhd-table .bhd-table-header {
285
293
  border-radius: 0;
286
294
  }
287
-
295
+
288
296
  /* 多选框间距问题 */
289
297
  .bhd-table-wrapper {
290
298
  .bhd-table-selection-col {
@@ -374,7 +382,7 @@
374
382
  margin-top: -5px;
375
383
  color: @color-icon-fill-Tr;
376
384
  }
377
- .bhd-select-open .bhd-select-arrow{
385
+ .bhd-select-open .bhd-select-arrow {
378
386
  color: @color-icon;
379
387
  }
380
388
  }
package/esm/viewImage/index.js CHANGED
@@ -55,15 +55,24 @@ var ViewImage = /*#__PURE__*/ function(_React_Component) {
55
55
  });
56
56
  _define_property(_assert_this_initialized(_this), "moveActionClose", function() {
57
57
  setTimeout(function() {
58
- var rect = document.getElementById("viewImgBody_pic").getBoundingClientRect();
59
- if (rect.top >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight) - 40 && rect.right <= (window.innerWidth || document.documentElement.clientWidth) - 52) {
60
- _this.setState({
61
- actionCloseFlag: 0
62
- });
63
- } else {
64
- _this.setState({
65
- actionCloseFlag: 1
66
- });
58
+ var pic = document.getElementById("viewImgBody_pic");
59
+ if (pic) {
60
+ var rect = pic.getBoundingClientRect();
61
+ if (rect.top >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight) - 40 && rect.right <= (window.innerWidth || document.documentElement.clientWidth) - 52) {
62
+ _this.setState({
63
+ actionCloseFlag: 0
64
+ }, function() {
65
+ var actionCloseDom = document.getElementById("actionClose");
66
+ if (actionCloseDom) {
67
+ actionCloseDom.style.top = rect.top + "px";
68
+ actionCloseDom.style.left = rect.left + rect.width + 12 + "px";
69
+ }
70
+ });
71
+ } else {
72
+ _this.setState({
73
+ actionCloseFlag: 1
74
+ });
75
+ }
67
76
  }
68
77
  }, 10);
69
78
  });
@@ -211,11 +220,15 @@ var ViewImage = /*#__PURE__*/ function(_React_Component) {
211
220
  imgTop: "auto",
212
221
  rotateValue: 0,
213
222
  scaleValue: 100
223
+ }, function() {
224
+ _this.moveActionClose();
214
225
  });
215
226
  });
216
227
  _define_property(_assert_this_initialized(_this), "rotate", function() {
217
228
  _this.setState({
218
229
  rotateValue: _this.state.rotateValue + 90
230
+ }, function() {
231
+ _this.moveActionClose();
219
232
  });
220
233
  });
221
234
  _define_property(_assert_this_initialized(_this), "close", function() {
@@ -259,6 +272,10 @@ var ViewImage = /*#__PURE__*/ function(_React_Component) {
259
272
  _this1.setState({
260
273
  imgSrc: src,
261
274
  loading: false
275
+ }, function() {
276
+ setTimeout(function() {
277
+ _this1.moveActionClose();
278
+ }, 100);
262
279
  });
263
280
  return [
264
281
  2
@@ -317,11 +334,15 @@ var ViewImage = /*#__PURE__*/ function(_React_Component) {
317
334
  _define_property(_assert_this_initialized(_this), "imgLoad", function() {
318
335
  _this.setState({
319
336
  imgError: false
337
+ }, function() {
338
+ _this.moveActionClose();
320
339
  });
321
340
  });
322
341
  _define_property(_assert_this_initialized(_this), "imgErr", function() {
323
342
  _this.setState({
324
343
  imgError: true
344
+ }, function() {
345
+ _this.moveActionClose();
325
346
  });
326
347
  });
327
348
  return _this;
@@ -344,6 +365,7 @@ var ViewImage = /*#__PURE__*/ function(_React_Component) {
344
365
  document.oncontextmenu = function() {
345
366
  return false;
346
367
  };
368
+ this.moveActionClose();
347
369
  }
348
370
  },
349
371
  {
@@ -430,33 +452,57 @@ var ViewImage = /*#__PURE__*/ function(_React_Component) {
430
452
  color: "#FFFFFF"
431
453
  },
432
454
  children: imgSrc ? "图片加载错误" : "暂无内容"
433
- }) : /*#__PURE__*/ _jsxs("div", {
434
- onMouseDown: this.moveImg,
435
- style: {
436
- transform: "scale(".concat(scaleValue / 100, ",").concat(scaleValue / 100, ")"),
437
- left: imgLeft == "auto" ? "auto" : imgLeft + "px",
438
- top: imgTop == "auto" ? "auto" : imgTop + "px"
439
- },
440
- className: styles.viewImgBody_pic,
455
+ }) : // <div onMouseDown={this.moveImg}
456
+ // style={{
457
+ // transform: `scale(${scaleValue / 100},${
458
+ // scaleValue / 100
459
+ // })`,
460
+ // left: imgLeft == "auto" ? "auto" : imgLeft + "px",
461
+ // top: imgTop == "auto" ? "auto" : imgTop + "px",
462
+ // }}
463
+ // className={styles.viewImgBody_pic}>
464
+ // <img
465
+ // id="viewImgBody_pic"
466
+ // key="img"
467
+ // src={imgSrc}
468
+ // alt="图片加载错误"
469
+ // draggable="false"
470
+ // style={{transform:`rotate(${rotateValue}deg)`}}
471
+ // onLoad={this.imgLoad}
472
+ // onError={this.imgErr}
473
+ // />
474
+ // {
475
+ // this.state.actionCloseFlag===0&&(
476
+ // <span
477
+ // id="actionClose"
478
+ // style={{right:`calc(-40px + (-12px * (1 / ${scaleValue / 100}) ))` ,transform: `scale(calc(1 / ${scaleValue / 100}),calc(1 / ${scaleValue / 100}))`,transformOrigin: `top left`}}
479
+ // className={styles.viewImgActionClose}
480
+ // title="关闭"
481
+ // onClick={this.close}>
482
+ // <CustomClose />
483
+ // </span>
484
+ // )
485
+ // }
486
+ // </div>
487
+ /*#__PURE__*/ _jsxs(_Fragment, {
441
488
  children: [
442
489
  /*#__PURE__*/ _jsx("img", {
443
490
  id: "viewImgBody_pic",
444
491
  src: imgSrc,
445
492
  alt: "图片加载错误",
446
493
  draggable: "false",
494
+ onMouseDown: this.moveImg,
447
495
  style: {
448
- transform: "rotate(".concat(rotateValue, "deg)")
496
+ transform: "scale(".concat(scaleValue / 100, ",").concat(scaleValue / 100, ") rotate(").concat(rotateValue, "deg)"),
497
+ left: imgLeft == "auto" ? "auto" : imgLeft + "px",
498
+ top: imgTop == "auto" ? "auto" : imgTop + "px"
449
499
  },
500
+ className: styles.viewImgBody_pic,
450
501
  onLoad: this.imgLoad,
451
502
  onError: this.imgErr
452
503
  }, "img"),
453
504
  this.state.actionCloseFlag === 0 && /*#__PURE__*/ _jsx("span", {
454
505
  id: "actionClose",
455
- style: {
456
- right: "calc(-40px + (-12px * (1 / ".concat(scaleValue / 100, ") ))"),
457
- transform: "scale(calc(1 / ".concat(scaleValue / 100, "),calc(1 / ").concat(scaleValue / 100, "))"),
458
- transformOrigin: "top left"
459
- },
460
506
  className: styles.viewImgActionClose,
461
507
  title: "关闭",
462
508
  onClick: this.close,
package/esm/viewImage/index.module.less CHANGED
@@ -75,19 +75,19 @@
75
75
  }
76
76
  .viewImgBody_pic {
77
77
  max-width: 80%;
78
- max-height: 80%;
78
+ max-height: 80%;
79
79
  cursor: move;
80
80
  position: absolute;
81
81
  user-select: none;
82
- img{
83
- width: 100%;
84
- height: 100%;
85
- }
82
+ // img{
83
+ // width: 100%;
84
+ // height: 100%;
85
+ // }
86
86
  }
87
87
  .viewImgActionClose{
88
88
  position: absolute;
89
- top: 0;
90
- right: -52px;
89
+ top: 40px;
90
+ right: 40px;
91
91
  display: flex;
92
92
  width: 40px;
93
93
  height: 40px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bhd-components",
3
- "version": "0.9.18",
3
+ "version": "0.9.20",
4
4
  "description": "组件功能描述",
5
5
  "config": {
6
6
  "commitizen": {