bhd-components 0.9.19 → 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.
- package/dist/index.esm.es5.development.css +24 -28
- package/dist/index.esm.es5.development.js +70 -24
- package/dist/index.esm.es5.production.css +1 -1
- package/dist/index.esm.es5.production.js +1 -1
- package/dist/vendor.esm.es5.development.js +1 -1
- package/dist/vendor.esm.es5.production.js +1 -1
- package/es2017/viewImage/index.js +69 -23
- package/es2017/viewImage/index.module.less +7 -7
- package/esm/viewImage/index.js +69 -23
- package/esm/viewImage/index.module.less +7 -7
- package/package.json +1 -1
|
@@ -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
|
-
}) :
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
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
|
|
199
|
-
if (
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
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
|
}
|
|
@@ -75,19 +75,19 @@
|
|
|
75
75
|
}
|
|
76
76
|
.viewImgBody_pic {
|
|
77
77
|
max-width: 80%;
|
|
78
|
-
max-height:
|
|
78
|
+
max-height: 80%;
|
|
79
79
|
cursor: move;
|
|
80
80
|
position: absolute;
|
|
81
81
|
user-select: none;
|
|
82
|
-
img{
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
}
|
|
82
|
+
// img{
|
|
83
|
+
// width: 100%;
|
|
84
|
+
// height: 100%;
|
|
85
|
+
// }
|
|
86
86
|
}
|
|
87
87
|
.viewImgActionClose{
|
|
88
88
|
position: absolute;
|
|
89
|
-
top:
|
|
90
|
-
right:
|
|
89
|
+
top: 40px;
|
|
90
|
+
right: 40px;
|
|
91
91
|
display: flex;
|
|
92
92
|
width: 40px;
|
|
93
93
|
height: 40px;
|
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
|
|
59
|
-
if (
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
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
|
-
}) :
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
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,
|
|
@@ -75,19 +75,19 @@
|
|
|
75
75
|
}
|
|
76
76
|
.viewImgBody_pic {
|
|
77
77
|
max-width: 80%;
|
|
78
|
-
max-height:
|
|
78
|
+
max-height: 80%;
|
|
79
79
|
cursor: move;
|
|
80
80
|
position: absolute;
|
|
81
81
|
user-select: none;
|
|
82
|
-
img{
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
}
|
|
82
|
+
// img{
|
|
83
|
+
// width: 100%;
|
|
84
|
+
// height: 100%;
|
|
85
|
+
// }
|
|
86
86
|
}
|
|
87
87
|
.viewImgActionClose{
|
|
88
88
|
position: absolute;
|
|
89
|
-
top:
|
|
90
|
-
right:
|
|
89
|
+
top: 40px;
|
|
90
|
+
right: 40px;
|
|
91
91
|
display: flex;
|
|
92
92
|
width: 40px;
|
|
93
93
|
height: 40px;
|