xh-lab-rc 0.18.49 → 0.18.50

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 (4) hide show
  1. package/dist/LabAttachmentPreview/index.d.ts +1 -0
  2. package/dist/LabAttachmentPreview/index.js +56 -12
  3. package/dist/LabAttachmentPreview/style.less +42 -2
  4. package/package.json +1 -1
package/dist/LabAttachmentPreview/index.d.ts CHANGED
@@ -12,6 +12,7 @@ interface IndexProps {
12
12
  ref?: any;
13
13
  baseUrl?: string;
14
14
  pdfjsSrc?: string;
15
+ isBtnSwitch?: boolean;
15
16
  }
16
17
  interface FileField {
17
18
  filePath?: string;
package/dist/LabAttachmentPreview/index.js CHANGED
@@ -7,13 +7,13 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
7
7
  * @Author: xqy
8
8
  * @Date: 2026-03-16 09:43:38
9
9
  * @LastEditors: xqy
10
- * @LastEditTime: 2026-03-16 16:09:21
10
+ * @LastEditTime: 2026-03-19 14:02:09
11
11
  * @Description: 横向附件预览（支持pdf切换预览）
12
12
  */
13
13
 
14
14
  import { Iconfont } from "../components";
15
15
  import { downloadFileWithBlob, labCanvasToFile } from "../utils/utils";
16
- import { FileTextOutlined, RotateLeftOutlined, RotateRightOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
16
+ import { FileTextOutlined, LeftOutlined, RightOutlined, RotateLeftOutlined, RotateRightOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
17
17
  import { Splitter } from 'antd';
18
18
  import axios from 'axios';
19
19
  import cn from 'classnames';
@@ -21,7 +21,7 @@ import React, { forwardRef, useEffect, useRef, useState } from 'react';
21
21
  import { LabPdf } from "./..";
22
22
  import "./style.less";
23
23
  var LabAttachmentPreview = /*#__PURE__*/forwardRef(function (_ref, ref) {
24
- var _list$curIndex5, _list$curIndex6;
24
+ var _list$curIndex5, _list$curIndex6, _list$curIndex7;
25
25
  var imgList = _ref.imgList,
26
26
  _ref$curImgIndex = _ref.curImgIndex,
27
27
  curImgIndex = _ref$curImgIndex === void 0 ? 0 : _ref$curImgIndex,
@@ -40,7 +40,9 @@ var LabAttachmentPreview = /*#__PURE__*/forwardRef(function (_ref, ref) {
40
40
  _ref$baseUrl = _ref.baseUrl,
41
41
  baseUrl = _ref$baseUrl === void 0 ? '' : _ref$baseUrl,
42
42
  _ref$pdfjsSrc = _ref.pdfjsSrc,
43
- pdfjsSrc = _ref$pdfjsSrc === void 0 ? "".concat(baseUrl, "/statics/pdfjs/web/viewer.html") : _ref$pdfjsSrc;
43
+ pdfjsSrc = _ref$pdfjsSrc === void 0 ? "".concat(baseUrl, "/statics/pdfjs/web/viewer.html") : _ref$pdfjsSrc,
44
+ _ref$isBtnSwitch = _ref.isBtnSwitch,
45
+ isBtnSwitch = _ref$isBtnSwitch === void 0 ? false : _ref$isBtnSwitch;
44
46
  var _useState = useState(curImgIndex),
45
47
  _useState2 = _slicedToArray(_useState, 2),
46
48
  curIndex = _useState2[0],
@@ -294,6 +296,32 @@ var LabAttachmentPreview = /*#__PURE__*/forwardRef(function (_ref, ref) {
294
296
  top: 'auto'
295
297
  });
296
298
  };
299
+
300
+ //点击左右切换事件
301
+ var carouselClick = function carouselClick(type) {
302
+ setScale(1); //重置初始的缩放比例
303
+ setRotatinNum(0); //重置初始的缩放比例
304
+ if (type === 'l') {
305
+ //向左切换
306
+ if (curIndex === 0) {
307
+ //当前的索引为0,获取最后一张图片
308
+ setCurIndex((list === null || list === void 0 ? void 0 : list.length) - 1);
309
+ return;
310
+ } else {
311
+ //获取上一张的图片
312
+ setCurIndex(curIndex - 1);
313
+ }
314
+ } else {
315
+ //向右切换
316
+ if (curIndex === (list === null || list === void 0 ? void 0 : list.length) - 1) {
317
+ //索引为最后一张，还切换就是切换到第一张
318
+ setCurIndex(0);
319
+ } else {
320
+ //获取下一张的图片
321
+ setCurIndex(curIndex + 1);
322
+ }
323
+ }
324
+ };
297
325
  useEffect(function () {
298
326
  setCurIndex(curImgIndex !== null && curImgIndex !== void 0 ? curImgIndex : 0);
299
327
  //重置旋转次数、缩放、角度比例
@@ -352,8 +380,9 @@ var LabAttachmentPreview = /*#__PURE__*/forwardRef(function (_ref, ref) {
352
380
  width: '100%',
353
381
  height: '100%'
354
382
  }
355
- }, (imgList === null || imgList === void 0 ? void 0 : imgList.length) > 1 && /*#__PURE__*/React.createElement(Splitter.Panel, {
383
+ }, (imgList === null || imgList === void 0 ? void 0 : imgList.length) > 1 && !isBtnSwitch && /*#__PURE__*/React.createElement(Splitter.Panel, {
356
384
  defaultSize: 359,
385
+ size: 359,
357
386
  min: "20%",
358
387
  max: "70%"
359
388
  }, /*#__PURE__*/React.createElement("div", {
@@ -382,14 +411,16 @@ var LabAttachmentPreview = /*#__PURE__*/forwardRef(function (_ref, ref) {
382
411
  })))), /*#__PURE__*/React.createElement(Splitter.Panel, null, /*#__PURE__*/React.createElement("div", {
383
412
  className: "right",
384
413
  style: {
385
- borderLeft: (imgList === null || imgList === void 0 ? void 0 : imgList.length) > 1 ? 'none' : '1px solid #D9D9D9'
414
+ border: ((_list$curIndex5 = list[curIndex]) === null || _list$curIndex5 === void 0 ? void 0 : _list$curIndex5.fileType) !== 'pdf' && isBtnSwitch ? 'none' : '1px solid #D9D9D9',
415
+ borderLeft: (imgList === null || imgList === void 0 ? void 0 : imgList.length) > 1 ? 'none' : '1px solid #D9D9D9',
416
+ backgroundColor: isBtnSwitch ? '#fff' : '#F7F7F7'
386
417
  }
387
418
  }, /*#__PURE__*/React.createElement("div", {
388
419
  className: "contentPart"
389
420
  }, list[curIndex] && Object.keys(list[curIndex]).length && /*#__PURE__*/React.createElement("div", {
390
421
  className: cn('contentDiv', list[curIndex].fileType === 'pdf' && 'pdfStyle'),
391
422
  style: contDivStyle
392
- }, ((_list$curIndex5 = list[curIndex]) === null || _list$curIndex5 === void 0 ? void 0 : _list$curIndex5.fileType) === 'pdf' ? /*#__PURE__*/React.createElement(LabPdf, {
423
+ }, ((_list$curIndex6 = list[curIndex]) === null || _list$curIndex6 === void 0 ? void 0 : _list$curIndex6.fileType) === 'pdf' ? /*#__PURE__*/React.createElement(LabPdf, {
393
424
  baseUrl: baseUrl,
394
425
  src: list[curIndex].filePath,
395
426
  pdfjsSrc: pdfjsSrc
@@ -406,14 +437,13 @@ var LabAttachmentPreview = /*#__PURE__*/forwardRef(function (_ref, ref) {
406
437
  top: "".concat(position === null || position === void 0 ? void 0 : position.top)
407
438
  },
408
439
  id: "previewImg",
409
- src: "".concat(baseUrl).concat(list[curIndex].filePath)
410
- // onWheel={handleWheel}
411
- ,
440
+ src: "".concat(baseUrl).concat(list[curIndex].filePath),
441
+ onWheel: handleWheel,
412
442
  key: list[curIndex].filePath,
413
443
  onMouseDown: handleMouseDown,
414
444
  onMouseMove: handleMouseMove,
415
445
  onMouseUp: handleMouseUp
416
- }))), ((_list$curIndex6 = list[curIndex]) === null || _list$curIndex6 === void 0 ? void 0 : _list$curIndex6.fileType) !== 'pdf' && /*#__PURE__*/React.createElement("div", {
446
+ }))), ((_list$curIndex7 = list[curIndex]) === null || _list$curIndex7 === void 0 ? void 0 : _list$curIndex7.fileType) !== 'pdf' && /*#__PURE__*/React.createElement("div", {
417
447
  className: "footer",
418
448
  style: footerStyle
419
449
  }, /*#__PURE__*/React.createElement("div", {
@@ -435,6 +465,20 @@ var LabAttachmentPreview = /*#__PURE__*/forwardRef(function (_ref, ref) {
435
465
  style: {
436
466
  display: 'none'
437
467
  }
438
- })))));
468
+ })))), isBtnSwitch && (list === null || list === void 0 ? void 0 : list.length) > 1 && curIndex > 0 && /*#__PURE__*/React.createElement("span", {
469
+ onClick: function onClick() {
470
+ return carouselClick('l');
471
+ },
472
+ className: "toggleIcon leftIcon"
473
+ }, /*#__PURE__*/React.createElement(LeftOutlined, {
474
+ className: "spanIcon"
475
+ })), isBtnSwitch && (list === null || list === void 0 ? void 0 : list.length) > 1 && curIndex < (list === null || list === void 0 ? void 0 : list.length) - 1 && /*#__PURE__*/React.createElement("span", {
476
+ onClick: function onClick() {
477
+ return carouselClick('r');
478
+ },
479
+ className: "toggleIcon rightIcon"
480
+ }, /*#__PURE__*/React.createElement(RightOutlined, {
481
+ className: "spanIcon"
482
+ })));
439
483
  });
440
484
  export default LabAttachmentPreview;
package/dist/LabAttachmentPreview/style.less CHANGED
@@ -5,6 +5,7 @@
5
5
  margin: 0;
6
6
  padding: 0;
7
7
  display: flex;
8
+ position: relative;
8
9
 
9
10
  .left {
10
11
  // width: 332px;
@@ -60,7 +61,6 @@
60
61
  flex: 1;
61
62
  border: 1px solid #D9D9D9;
62
63
  border-left: none;
63
- padding: 0 45px;
64
64
 
65
65
 
66
66
  .contentPart {
@@ -95,7 +95,7 @@
95
95
  display: flex;
96
96
  align-items: center;
97
97
  justify-content: center;
98
- background-color: rgba(88, 91, 102, 0.9);
98
+ background-color: rgba(88, 91, 102, 0.8);
99
99
  border-radius: 20px;
100
100
  min-width: 218px;
101
101
  bottom: 4px;
@@ -136,6 +136,46 @@
136
136
 
137
137
  }
138
138
 
139
+ .toggleIcon {
140
+ position: absolute;
141
+ width: 36px;
142
+ height: 36px;
143
+ border-radius: 50%;
144
+ top: 50%;
145
+ display: flex;
146
+ justify-content: center;
147
+ align-items: center;
148
+ cursor: pointer;
149
+ background: #FFFFFF;
150
+ transform: translateY(-50%);
151
+ transition: all 0.3s;
152
+ pointer-events: auto;
153
+ border: 1px solid #EAEDF2;
154
+ box-shadow: -2px 3px 5px 0px rgba(#000000, 0.12);
155
+
156
+ .spanIcon {
157
+ color: #7D7D7D;
158
+ font-size: 16px;
159
+ font-weight: 600;
160
+ }
161
+
162
+ &:hover {
163
+ border: 1px solid #D0E4FF;
164
+
165
+ .spanIcon {
166
+ color: #1677FF;
167
+ }
168
+ }
169
+ }
170
+
171
+ .leftIcon {
172
+ left: 20px;
173
+ }
174
+
175
+ .rightIcon {
176
+ right: 20px;
177
+ }
178
+
139
179
  .ant-splitter-horizontal>.ant-splitter-bar .ant-splitter-bar-dragger::before {
140
180
  width: 1px;
141
181
  background-color: #D9D9D9;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "xh-lab-rc",
3
- "version": "0.18.49",
3
+ "version": "0.18.50",
4
4
  "description": " A react library for xinhelab",
5
5
  "license": "MIT",
6
6
  "module": "dist/index.js",