dtable-ui-component 6.0.10 → 6.0.11

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/lib/ImageFormatter/images-lazy-load.js +101 -126
  2. package/lib/ImagePreviewerLightbox/index.js +1 -3
  3. package/lib/utils/url.js +7 -4
  4. package/package.json +1 -1
package/lib/ImageFormatter/images-lazy-load.js CHANGED
@@ -9,138 +9,113 @@ exports.default = void 0;
9
9
  var _react = _interopRequireWildcard(require("react"));
10
10
  var _Loading = _interopRequireDefault(require("../Loading"));
11
11
  var _url = require("../utils/url");
12
- class ImagesLazyLoad extends _react.default.Component {
13
- constructor(_props) {
14
- super(_props);
15
- this.componentDidMount = () => {
16
- this.lazyLoadImages(this.props);
17
- };
18
- this.UNSAFE_componentWillReceiveProps = nextProps => {
19
- if (nextProps.images.toString() !== this.props.images.toString()) {
20
- this.lazyLoadImages(nextProps);
21
- }
12
+ const ImagesLazyLoad = _ref => {
13
+ let {
14
+ images,
15
+ server,
16
+ onImageClick,
17
+ renderItem,
18
+ dtableUuid
19
+ } = _ref;
20
+ const [currentImages, setCurrentImages] = (0, _react.useState)(images);
21
+ const [loadedImages, setLoadedImages] = (0, _react.useState)([]);
22
+ const [loadedCount, setLoadedCount] = (0, _react.useState)(0);
23
+ const lazyLoadImage = (url, resolve, reject) => {
24
+ if (!url) {
25
+ reject('img path is required');
26
+ return;
27
+ }
28
+ const image = new Image();
29
+ image.onload = () => {
30
+ resolve(image);
22
31
  };
23
- this.componentWillUnmount = () => {
24
- // prevent async operation
25
- this.setState = (state, callback) => {
26
- return;
27
- };
32
+ image.onerror = e => {
33
+ reject(e);
28
34
  };
29
- this.lazyLoadImages = props => {
30
- const {
31
- images
32
- } = props;
33
- if (!Array.isArray(images) || images.length === 0) {
34
- return;
35
- }
36
- this.setState({
37
- images,
38
- loadedImages: [],
39
- loadedCount: 0
40
- }, () => {
41
- let {
42
- server,
43
- dtableUuid
44
- } = this.props;
45
- images.forEach((item, index) => {
46
- let url = (0, _url.getImageThumbnailUrl)(item, {
47
- server,
48
- dtableUuid
49
- });
50
- this.lazyLoadImage(url, image => {
51
- let {
52
- loadedCount,
53
- loadedImages
54
- } = this.state;
55
- let newImageList = loadedImages.slice(0);
56
- newImageList[index] = image;
57
- this.setState({
58
- loadedCount: loadedCount + 1,
59
- loadedImages: newImageList
60
- });
61
- }, () => {
62
- let {
63
- loadedCount
64
- } = this.state;
65
- this.setState({
66
- loadedCount: loadedCount + 1
67
- });
68
- });
35
+ image.src = url;
36
+ };
37
+ const lazyLoadImages = () => {
38
+ if (!Array.isArray(currentImages) || currentImages.length === 0) {
39
+ return;
40
+ }
41
+
42
+ // Reset state for new images
43
+ setLoadedImages([]);
44
+ setLoadedCount(0);
45
+ currentImages.forEach((item, index) => {
46
+ const url = (0, _url.getImageThumbnailUrl)(item, {
47
+ server,
48
+ dtableUuid
49
+ });
50
+ lazyLoadImage(url, image => {
51
+ setLoadedImages(prev => {
52
+ const newList = [...prev];
53
+ newList[index] = image;
54
+ return newList;
69
55
  });
56
+ setLoadedCount(count => count + 1);
57
+ }, () => {
58
+ setLoadedCount(count => count + 1);
70
59
  });
60
+ });
61
+ };
62
+ (0, _react.useEffect)(() => {
63
+ lazyLoadImages();
64
+ }, []);
65
+ (0, _react.useEffect)(() => {
66
+ if (images.toString() !== currentImages.toString()) {
67
+ setCurrentImages(images);
68
+ }
69
+ }, [images]);
70
+ (0, _react.useEffect)(() => {
71
+ if (currentImages !== images) {
72
+ lazyLoadImages();
73
+ }
74
+ }, [currentImages]);
75
+ const handleMouseDown = event => {
76
+ event.stopPropagation();
77
+ };
78
+ const handleImageClick = (event, index) => {
79
+ event.stopPropagation();
80
+ if (onImageClick) {
81
+ onImageClick(index);
82
+ }
83
+ };
84
+ if (!Array.isArray(currentImages) || currentImages.length === 0) {
85
+ return null;
86
+ }
87
+ if (currentImages.length > loadedCount) {
88
+ const style = {
89
+ marginLeft: '4px'
71
90
  };
72
- this.lazyLoadImage = (url, resolve, reject) => {
73
- if (!url) {
74
- reject('img path is require');
75
- return;
76
- }
77
- const image = new Image();
78
- image.onload = () => {
79
- resolve(image);
80
- };
81
- image.onerror = e => {
82
- reject(e);
83
- };
84
- image.src = url;
85
- };
86
- this.onMouseDown = event => {
87
- event.stopPropagation();
88
- };
89
- this.onImageClick = (event, index) => {
90
- event.stopPropagation();
91
- this.props.onImageClick(index);
92
- };
93
- this.state = {
94
- images: _props.images,
95
- loadedImages: [],
96
- loadedCount: 0
97
- };
91
+ return /*#__PURE__*/_react.default.createElement("div", {
92
+ style: style,
93
+ className: "d-flex align-items-center"
94
+ }, /*#__PURE__*/_react.default.createElement(_Loading.default, null));
98
95
  }
99
- render() {
100
- const {
101
- images,
102
- loadedImages,
103
- loadedCount
104
- } = this.state;
105
- const {
106
- renderItem
107
- } = this.props;
108
- if (!Array.isArray(images) || images.length === 0) {
109
- return '';
110
- }
111
- if (images.length > loadedCount) {
112
- let style = {
113
- marginLeft: '4px'
114
- };
115
- return /*#__PURE__*/_react.default.createElement("div", {
116
- style: style,
117
- className: "d-flex align-items-center"
118
- }, /*#__PURE__*/_react.default.createElement(_Loading.default, null));
96
+ return loadedImages.map((image, index) => {
97
+ let imageName = '';
98
+ const imageSrc = image === null || image === void 0 ? void 0 : image.src;
99
+ try {
100
+ imageName = imageSrc ? decodeURI(imageSrc.slice(imageSrc.lastIndexOf('/') + 1)) : '';
101
+ } catch (error) {
102
+ // eslint-disable-next-line no-console
103
+ console.log(error);
119
104
  }
120
- return loadedImages.map((image, index) => {
121
- let imageName = '';
122
- const imageSrc = image === null || image === void 0 ? void 0 : image.src;
123
- try {
124
- imageName = imageSrc ? decodeURI(imageSrc.slice(imageSrc.lastIndexOf('/') + 1)) : '';
125
- } catch (error) {
126
- // eslint-disable-next-line no-console
127
- console.log(error);
128
- }
129
- const imgDom = /*#__PURE__*/_react.default.createElement("img", {
130
- title: imageName,
131
- className: "image-item",
132
- src: image.src,
133
- onMouseDown: this.onMouseDown,
134
- onClick: event => this.onImageClick(event, index),
135
- alt: ""
136
- });
137
- if (renderItem) return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
138
- key: index
139
- }, renderItem(imgDom));
140
- return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
141
- key: index
142
- }, imgDom);
105
+ const imgDom = /*#__PURE__*/_react.default.createElement("img", {
106
+ title: imageName,
107
+ className: "image-item",
108
+ src: image === null || image === void 0 ? void 0 : image.src,
109
+ onMouseDown: handleMouseDown,
110
+ onClick: event => handleImageClick(event, index),
111
+ alt: ""
143
112
  });
144
- }
145
- }
113
+ if (renderItem) return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
114
+ key: index
115
+ }, renderItem(imgDom));
116
+ return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
117
+ key: index
118
+ }, imgDom);
119
+ });
120
+ };
146
121
  var _default = exports.default = ImagesLazyLoad;
package/lib/ImagePreviewerLightbox/index.js CHANGED
@@ -51,9 +51,7 @@ function ImagePreviewerLightbox(props) {
51
51
  // eslint-disable-next-line no-console
52
52
  console.log(error);
53
53
  }
54
-
55
- // svg image is vectorgraph and can't rotate, external image can't rotate
56
- const canRotateImage = onRotateImage && !readOnly && !(0, _url.checkSVGImage)(URL) && (0, _url.isInternalImg)(URL, server);
54
+ const canRotateImage = onRotateImage && !readOnly && ['gif', 'heic', 'heif'].includes((0, _url.getFileSuffix)(URL)) && (0, _url.isInternalImg)(URL, server);
57
55
  let mainSrc = URL;
58
56
  if ((0, _url.needUseThumbnailImage)(URL)) {
59
57
  mainSrc = (0, _url.getImageThumbnailUrl)(URL, {
package/lib/utils/url.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.needUseThumbnailImage = exports.isTargetUrl = exports.isInternalURL = exports.isInternalImg = exports.isDigitalSignsUrl = exports.isCustomAssetUrl = exports.isBase64 = exports.isAIUrl = exports.imageCheck = exports.getValidFileImageUrls = exports.getImageThumbnailUrl = exports.getFileThumbnailInfo = exports.getFileName = exports.getFileIconUrl = exports.generateCurrentBaseImageUrl = exports.generateCurrentBaseImageThumbnailUrl = exports.checkSVGImage = exports.checkImgExists = void 0;
6
+ exports.needUseThumbnailImage = exports.isTargetUrl = exports.isInternalURL = exports.isInternalImg = exports.isDigitalSignsUrl = exports.isCustomAssetUrl = exports.isBase64 = exports.isAIUrl = exports.imageCheck = exports.getValidFileImageUrls = exports.getImageThumbnailUrl = exports.getFileThumbnailInfo = exports.getFileSuffix = exports.getFileName = exports.getFileIconUrl = exports.generateCurrentBaseImageUrl = exports.generateCurrentBaseImageThumbnailUrl = exports.checkSVGImage = exports.checkImgExists = void 0;
7
7
  var _file = require("../constants/file");
8
8
  const isTargetUrl = (target, url) => {
9
9
  if (!url || typeof url !== 'string') return false;
@@ -40,10 +40,13 @@ const checkImgExists = url => {
40
40
  });
41
41
  };
42
42
  exports.checkImgExists = checkImgExists;
43
+ const getFileSuffix = filename => {
44
+ if (!filename || typeof filename !== 'string') return '';
45
+ return filename.substring(filename.lastIndexOf('.') + 1).toLowerCase();
46
+ };
47
+ exports.getFileSuffix = getFileSuffix;
43
48
  const checkSVGImage = url => {
44
- if (!url || typeof url !== 'string') return false;
45
- const isSVGImage = url.substring(url.lastIndexOf('.')).toLowerCase() === '.svg';
46
- return isSVGImage;
49
+ return getFileSuffix(url) === 'svg';
47
50
  };
48
51
  exports.checkSVGImage = checkSVGImage;
49
52
  const isAIUrl = url => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dtable-ui-component",
3
- "version": "6.0.10",
3
+ "version": "6.0.11",
4
4
  "main": "./lib/index.js",
5
5
  "dependencies": {
6
6
  "@seafile/react-image-lightbox": "4.0.0",