dtable-ui-component 6.0.49 → 6.0.50

package/lib/ImageEditor/images-previewer/index.js

@@ -14,6 +14,7 @@ var _utils = require("../../utils/utils");
 var _constants = require("../../constants");
 var _lang = require("../../lang");
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class ImagesPreviewer extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -105,41 +106,43 @@ class ImagesPreviewer extends _react.default.Component {
     let {
       value
     } = this.props;
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _classnames.default)('dtable-ui-image-previewer-container', {
         'mt-0': value.length === 0 && _constants.isMobile
-      })
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)('dtable-ui-image-previewer-wrapper', {
-        'd-none': value.length === 0 && _constants.isMobile
-      })
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-image-previewer-content"
-    }, value.length > 0 && value.map((imageItemUrl, index) => {
-      return /*#__PURE__*/_react.default.createElement(_imagePreview.default, {
-        key: imageItemUrl + index,
-        imageItemUrl: imageItemUrl,
-        value: value,
-        itemIndex: index,
-        deleteImage: this.props.deleteImage,
-        showLargeImage: this.showLargeImage,
+      }),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classnames.default)('dtable-ui-image-previewer-wrapper', {
+          'd-none': value.length === 0 && _constants.isMobile
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "dtable-ui-image-previewer-content",
+          children: value.length > 0 && value.map((imageItemUrl, index) => {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_imagePreview.default, {
+              imageItemUrl: imageItemUrl,
+              value: value,
+              itemIndex: index,
+              deleteImage: this.props.deleteImage,
+              showLargeImage: this.showLargeImage,
+              downloadImage: this.downloadImage,
+              enterImageItemIndex: this.state.enterImageItemIndex,
+              setImageItemIndex: this.setImageItemIndex
+            }, imageItemUrl + index);
+          })
+        })
+      }), this.state.isShowLargeImage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImagePreviewerLightbox.default, {
+        imageItems: value,
+        imageIndex: this.state.largeImageIndex,
+        closeImagePopup: this.hideLargeImage,
+        moveToPrevImage: this.movePrev,
+        moveToNextImage: this.moveNext,
+        deleteImage: this.props.deleteImage ? this.deleteImage : null,
         downloadImage: this.downloadImage,
-        enterImageItemIndex: this.state.enterImageItemIndex,
-        setImageItemIndex: this.setImageItemIndex
-      });
-    }))), this.state.isShowLargeImage && /*#__PURE__*/_react.default.createElement(_ImagePreviewerLightbox.default, {
-      imageItems: value,
-      imageIndex: this.state.largeImageIndex,
-      closeImagePopup: this.hideLargeImage,
-      moveToPrevImage: this.movePrev,
-      moveToNextImage: this.moveNext,
-      deleteImage: this.props.deleteImage ? this.deleteImage : null,
-      downloadImage: this.downloadImage,
-      onRotateImage: this.props.onRotateImage
-    }), /*#__PURE__*/_react.default.createElement(_DTableCommonAddTool.default, {
-      callBack: this.togglePreviewer,
-      footerName: (0, _lang.getLocale)('Add_images')
-    }));
+        onRotateImage: this.props.onRotateImage
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCommonAddTool.default, {
+        callBack: this.togglePreviewer,
+        footerName: (0, _lang.getLocale)('Add_images')
+      })]
+    });
   }
 }
 var _default = exports.default = ImagesPreviewer;

package/lib/ImageEditor/index.js

@@ -11,25 +11,34 @@ var _reactResponsive = _interopRequireDefault(require("react-responsive"));
 var _pcEditor = _interopRequireDefault(require("./pc-editor"));
 var _mbEditor = _interopRequireDefault(require("./mb-editor"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 const ImageEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     isMobile,
     ...props
   } = _ref;
-  if (isMobile === false) return /*#__PURE__*/_react.default.createElement(_pcEditor.default, Object.assign({}, props, {
+  if (isMobile === false) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_pcEditor.default, {
+    ...props,
     ref: ref
-  }));
-  if (isMobile === true) return /*#__PURE__*/_react.default.createElement(_mbEditor.default, Object.assign({}, props, {
+  });
+  if (isMobile === true) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_mbEditor.default, {
+    ...props,
     ref: ref
-  }));
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
-    query: "(min-width: 768px)"
-  }, /*#__PURE__*/_react.default.createElement(_pcEditor.default, Object.assign({}, props, {
-    ref: ref
-  }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
-    query: "(max-width: 768px)"
-  }, /*#__PURE__*/_react.default.createElement(_mbEditor.default, Object.assign({}, props, {
-    ref: ref
-  }))));
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactResponsive.default, {
+      query: "(min-width: 768px)",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_pcEditor.default, {
+        ...props,
+        ref: ref
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactResponsive.default, {
+      query: "(max-width: 768px)",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_mbEditor.default, {
+        ...props,
+        ref: ref
+      })
+    })]
+  });
 });
 var _default = exports.default = ImageEditor;

package/lib/ImageEditor/mb-editor/index.js

@@ -15,6 +15,7 @@ var _toaster = _interopRequireDefault(require("../../toaster"));
 var _utils = require("../../utils/utils");
 var _lang = require("../../lang");
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 const {
   Header,
   Body
@@ -100,37 +101,48 @@ const MBImageEditor = _ref => {
       setUploading(false);
     }
   }, [uploadingFilesCount, uploadedFilesCount, onChange]);
-  return /*#__PURE__*/_react.default.createElement(_MobileFullScreenPage.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MobileFullScreenPage.default, {
     onClose: onToggle,
-    className: "dtable-ui-mobile-image-editor"
-  }, /*#__PURE__*/_react.default.createElement(Header, {
-    onLeftClick: onToggle
-  }, /*#__PURE__*/_react.default.createElement("i", {
-    "aria-hidden": "true",
-    className: "dtable-font dtable-icon-return"
-  }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, column.name)), /*#__PURE__*/_react.default.createElement(Body, null, (0, _utils.isIPhone)() && (0, _utils.isQQBuiltInBrowser)() ? /*#__PURE__*/_react.default.createElement("div", {
-    className: "dtable-ui-file-open-external-browser"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "seatable-tip-danger"
-  }, '不支持 QQ 内置浏览器上传图片或者文件'), /*#__PURE__*/_react.default.createElement("div", {
-    className: "image-container"
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    src: mediaUrl + 'img/qq-upload-tip.png',
-    alt: "Open browser tip"
-  }))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_imagesPreviewer.default, {
-    value: value,
-    resetAdditionImage: resetAdditionImage,
-    togglePreviewer: openEditor,
-    closeEditor: closeEditor,
-    deleteImage: deleteImage
-  }), isShowEditor && /*#__PURE__*/_react.default.createElement(_MobileUpload.default, {
-    type: "image",
-    onClose: closeEditor,
-    onChange: onFilesChange
-  }), isUploading && /*#__PURE__*/_react.default.createElement(_ActivityIndicator.default, {
-    toast: true,
-    text: (0, _lang.getLocale)('Images_are_uploading'),
-    animating: isUploading
-  }))));
+    className: "dtable-ui-mobile-image-editor",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Header, {
+      onLeftClick: onToggle,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+        "aria-hidden": "true",
+        className: "dtable-font dtable-icon-return"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+        children: column.name
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Body, {
+      children: (0, _utils.isIPhone)() && (0, _utils.isQQBuiltInBrowser)() ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "dtable-ui-file-open-external-browser",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "seatable-tip-danger",
+          children: '不支持 QQ 内置浏览器上传图片或者文件'
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "image-container",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+            src: mediaUrl + 'img/qq-upload-tip.png',
+            alt: "Open browser tip"
+          })
+        })]
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_imagesPreviewer.default, {
+          value: value,
+          resetAdditionImage: resetAdditionImage,
+          togglePreviewer: openEditor,
+          closeEditor: closeEditor,
+          deleteImage: deleteImage
+        }), isShowEditor && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MobileUpload.default, {
+          type: "image",
+          onClose: closeEditor,
+          onChange: onFilesChange
+        }), isUploading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActivityIndicator.default, {
+          toast: true,
+          text: (0, _lang.getLocale)('Images_are_uploading'),
+          animating: isUploading
+        })]
+      })
+    })]
+  });
 };
 var _default = exports.default = MBImageEditor;

package/lib/ImageEditor/pc-editor/addition-previewer/image-link/index.js

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _reactstrap = require("reactstrap");
 var _lang = require("../../../../lang");
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class ImageLink extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -52,22 +53,25 @@ class ImageLink extends _react.default.Component {
     const {
       isShowErrorMessage
     } = this.state;
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "dtable-ui-image-link",
-      onKeyDown: this.onKeyDown
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-image-link-container"
-    }, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
-      className: "dtable-ui-image-link-input",
-      placeholder: (0, _lang.getLocale)('Enter_a_URL'),
-      onPaste: this.imageLinkPaste,
-      onChange: this.handleChange
-    }), /*#__PURE__*/_react.default.createElement("span", {
-      className: "dtable-ui-image-link-icon dtable-font dtable-icon-url",
-      onClick: this.saveImageLink
-    })), isShowErrorMessage && /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-image-link-error-message"
-    }, (0, _lang.getLocale)('Please_enter_the_correct_image_address')));
+      onKeyDown: this.onKeyDown,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "dtable-ui-image-link-container",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Input, {
+          className: "dtable-ui-image-link-input",
+          placeholder: (0, _lang.getLocale)('Enter_a_URL'),
+          onPaste: this.imageLinkPaste,
+          onChange: this.handleChange
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "dtable-ui-image-link-icon dtable-font dtable-icon-url",
+          onClick: this.saveImageLink
+        })]
+      }), isShowErrorMessage && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "dtable-ui-image-link-error-message",
+        children: (0, _lang.getLocale)('Please_enter_the_correct_image_address')
+      })]
+    });
   }
 }
 var _default = exports.default = ImageLink;

package/lib/ImageEditor/pc-editor/addition-previewer/index.js

@@ -10,6 +10,7 @@ var _localImageAddition = _interopRequireDefault(require("./local-image-addition
 var _imageLink = _interopRequireDefault(require("./image-link"));
 var _lang = require("../../../lang");
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class AdditionPreviewer extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -34,30 +35,37 @@ class AdditionPreviewer extends _react.default.Component {
     const {
       activeTab
     } = this.state;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-image-addition-container"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-image-addition-left"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-image-addition-nav"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-addition-item ".concat(activeTab === 'localPicture' ? 'dtable-ui-addition-item-selected' : ''),
-      onClick: this.toggle.bind(this, 'localPicture')
-    }, (0, _lang.getLocale)('Local_Images')), this.props.saveImageLink && /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-addition-item ".concat(activeTab === 'imageLink' ? 'dtable-ui-addition-item-selected' : ''),
-      onClick: this.toggle.bind(this, 'imageLink')
-    }, (0, _lang.getLocale)('Image_Link')))), /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-image-addition-right"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-image-addition-right-container"
-    }, activeTab === 'localPicture' && /*#__PURE__*/_react.default.createElement(_localImageAddition.default, {
-      uploadLocalImageValue: this.props.uploadLocalImageValue,
-      deleteImage: this.props.deleteImage,
-      fileUploadCompleted: this.props.fileUploadCompleted,
-      uploadFile: this.props.uploadFile
-    }), activeTab === 'imageLink' && /*#__PURE__*/_react.default.createElement(_imageLink.default, {
-      saveImageLink: this.props.saveImageLink
-    }))));
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "dtable-ui-image-addition-container",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "dtable-ui-image-addition-left",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "dtable-ui-image-addition-nav",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "dtable-ui-addition-item ".concat(activeTab === 'localPicture' ? 'dtable-ui-addition-item-selected' : ''),
+            onClick: this.toggle.bind(this, 'localPicture'),
+            children: (0, _lang.getLocale)('Local_Images')
+          }), this.props.saveImageLink && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "dtable-ui-addition-item ".concat(activeTab === 'imageLink' ? 'dtable-ui-addition-item-selected' : ''),
+            onClick: this.toggle.bind(this, 'imageLink'),
+            children: (0, _lang.getLocale)('Image_Link')
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "dtable-ui-image-addition-right",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "dtable-ui-image-addition-right-container",
+          children: [activeTab === 'localPicture' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_localImageAddition.default, {
+            uploadLocalImageValue: this.props.uploadLocalImageValue,
+            deleteImage: this.props.deleteImage,
+            fileUploadCompleted: this.props.fileUploadCompleted,
+            uploadFile: this.props.uploadFile
+          }), activeTab === 'imageLink' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_imageLink.default, {
+            saveImageLink: this.props.saveImageLink
+          })]
+        })
+      })]
+    });
   }
 }
 var _default = exports.default = AdditionPreviewer;

package/lib/ImageEditor/pc-editor/addition-previewer/local-image-addition/index.js

@@ -13,6 +13,7 @@ var _url = require("../../../../utils/url");
 var _FileUploader = _interopRequireDefault(require("../../../../FileUploader"));
 var _lang = require("../../../../lang");
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class LocalImageAddition extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -123,36 +124,45 @@ class LocalImageAddition extends _react.default.Component {
         }
         if (Array.isArray(thumbnailSrcList) && thumbnailSrcList.length > 0) {
           let thumbnailList = thumbnailSrcList.map((fileThumbnailItem, index) => {
-            return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
-              key: "dtable-ui-image-wrapper-circle".concat(index)
-            }, fileThumbnailItem.isUploading && /*#__PURE__*/_react.default.createElement("div", {
-              className: "dtable-ui-image-wrapper"
-            }, /*#__PURE__*/_react.default.createElement("div", {
-              className: "dtable-ui-image-upload-percent"
-            }, /*#__PURE__*/_react.default.createElement("img", {
-              src: fileThumbnailItem.fileIconUrl,
-              style: {
-                position: 'absolute',
-                zIndex: "".concat(fileThumbnailItem.percent === 100 ? 3 : 1),
-                maxHeight: '100%'
-              },
-              alt: ""
-            }), fileThumbnailItem.percent < 100 && /*#__PURE__*/_react.default.createElement(_UploadProgress.default, {
-              uploadPercent: fileThumbnailItem.percent || 0
-            }), fileThumbnailItem.percent === 100 && /*#__PURE__*/_react.default.createElement("div", {
-              className: "dtable-ui-image-upload-success"
-            }, /*#__PURE__*/_react.default.createElement("div", {
-              className: "dtable-ui-image-upload-success-scale"
-            }, /*#__PURE__*/_react.default.createElement("span", {
-              className: "dtable-ui-image-upload-success-tip"
-            }, (0, _lang.getLocale)('Indexing')))), /*#__PURE__*/_react.default.createElement("div", {
-              className: "dtable-ui-image-upload-mask"
-            }), fileThumbnailItem.isErrorTip && /*#__PURE__*/_react.default.createElement("div", {
-              className: "dtable-ui-image-upload-error-tip"
-            }, /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Network_Error')), /*#__PURE__*/_react.default.createElement("span", {
-              className: "dtable-ui-image-upload-again",
-              onClick: event => this.fileUploadAgain(event, fileThumbnailItem)
-            }, (0, _lang.getLocale)('Re_upload'))))));
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
+              children: fileThumbnailItem.isUploading && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: "dtable-ui-image-wrapper",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                  className: "dtable-ui-image-upload-percent",
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                    src: fileThumbnailItem.fileIconUrl,
+                    style: {
+                      position: 'absolute',
+                      zIndex: "".concat(fileThumbnailItem.percent === 100 ? 3 : 1),
+                      maxHeight: '100%'
+                    },
+                    alt: ""
+                  }), fileThumbnailItem.percent < 100 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_UploadProgress.default, {
+                    uploadPercent: fileThumbnailItem.percent || 0
+                  }), fileThumbnailItem.percent === 100 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                    className: "dtable-ui-image-upload-success",
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                      className: "dtable-ui-image-upload-success-scale",
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                        className: "dtable-ui-image-upload-success-tip",
+                        children: (0, _lang.getLocale)('Indexing')
+                      })
+                    })
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                    className: "dtable-ui-image-upload-mask"
+                  }), fileThumbnailItem.isErrorTip && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                    className: "dtable-ui-image-upload-error-tip",
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                      children: (0, _lang.getLocale)('Network_Error')
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                      className: "dtable-ui-image-upload-again",
+                      onClick: event => this.fileUploadAgain(event, fileThumbnailItem),
+                      children: (0, _lang.getLocale)('Re_upload')
+                    })]
+                  })]
+                })
+              })
+            }, "dtable-ui-image-wrapper-circle".concat(index));
           });
           imageArr.push(...thumbnailList);
         }
@@ -166,25 +176,28 @@ class LocalImageAddition extends _react.default.Component {
       let uploadedFileList = [];
       uploadedFileList = uploadLocalImageValue.length > 0 && uploadLocalImageValue.map((imgSrc, index) => {
         let imageThumbnailUrl = (0, _url.getImageThumbnailUrl)(imgSrc);
-        return /*#__PURE__*/_react.default.createElement("div", {
-          key: 'dtable-ui-image-wrapper-' + index,
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "dtable-ui-image-wrapper",
           onMouseEnter: event => this.showDeleteIcon(event, index),
-          onMouseLeave: this.hideDeleteIcon
-        }, /*#__PURE__*/_react.default.createElement("div", {
-          className: "dtable-ui-image-content"
-        }, /*#__PURE__*/_react.default.createElement("img", {
-          src: imageThumbnailUrl,
-          alt: "",
-          style: {
-            maxHeight: '100%'
-          }
-        })), this.state.isShowDeleteIcon && this.state.enterImageIndex === index && /*#__PURE__*/_react.default.createElement("div", {
-          className: "dtable-delete-image-icon",
-          onClick: event => this.deleteImage(event, index)
-        }, /*#__PURE__*/_react.default.createElement("span", {
-          className: "image-delete-span"
-        }, "x")));
+          onMouseLeave: this.hideDeleteIcon,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "dtable-ui-image-content",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+              src: imageThumbnailUrl,
+              alt: "",
+              style: {
+                maxHeight: '100%'
+              }
+            })
+          }), this.state.isShowDeleteIcon && this.state.enterImageIndex === index && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "dtable-delete-image-icon",
+            onClick: event => this.deleteImage(event, index),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "image-delete-span",
+              children: "x"
+            })
+          })]
+        }, 'dtable-ui-image-wrapper-' + index);
       });
       return uploadedFileList;
     };
@@ -195,34 +208,43 @@ class LocalImageAddition extends _react.default.Component {
       let editorContent;
       let className = imageArr.length === 0 ? "dtable-ui-image-upload-container ".concat(isImageTipShow ? 'dtable-ui-image-upload-container-active' : '') : 'dtable-ui-image-wrapper';
       if (imageArr.length === 0) {
-        editorContent = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-          className: "dtable-ui-image-tip-addition ".concat(isImageTipShow ? 'dtable-ui-image-drop-active' : '')
-        }, /*#__PURE__*/_react.default.createElement("div", {
-          className: "dtable-ui-dtable-ui-image-add-icon"
-        }, /*#__PURE__*/_react.default.createElement("i", {
-          "aria-hidden": "true",
-          className: "dtable-font dtable-icon-add-files"
-        })), isImageTipShow ? /*#__PURE__*/_react.default.createElement("div", {
-          className: "dtable-ui-image-add-span"
-        }, (0, _lang.getLocale)('Drag_and_drop_to_add_an_image')) : /*#__PURE__*/_react.default.createElement("div", {
-          className: "dtable-ui-image-add-span"
-        }, (0, _lang.getLocale)('Drag_and_drop_images_or_click_or_paste_here_to_add'))), this.state.isImagePasteTipShow && /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
-          className: "image-addition-paste",
-          autoFocus: true
-        }));
+        editorContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "dtable-ui-image-tip-addition ".concat(isImageTipShow ? 'dtable-ui-image-drop-active' : ''),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "dtable-ui-dtable-ui-image-add-icon",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+                "aria-hidden": "true",
+                className: "dtable-font dtable-icon-add-files"
+              })
+            }), isImageTipShow ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "dtable-ui-image-add-span",
+              children: (0, _lang.getLocale)('Drag_and_drop_to_add_an_image')
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "dtable-ui-image-add-span",
+              children: (0, _lang.getLocale)('Drag_and_drop_images_or_click_or_paste_here_to_add')
+            })]
+          }), this.state.isImagePasteTipShow && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Input, {
+            className: "image-addition-paste",
+            autoFocus: true
+          })]
+        });
       } else {
-        editorContent = /*#__PURE__*/_react.default.createElement("div", {
-          className: "dtable-ui-image-add-box"
-        }, /*#__PURE__*/_react.default.createElement("div", {
-          className: "dtable-ui-image-add-button ".concat(isImageTipShow ? 'dtable-ui-image-wrapper-drop-active' : '')
-        }, /*#__PURE__*/_react.default.createElement("i", {
-          "aria-hidden": "true",
-          className: "dtable-font dtable-icon-add-table"
-        }), /*#__PURE__*/_react.default.createElement("span", {
-          className: "dtable-ui-image-add-span"
-        }, (0, _lang.getLocale)('Upload'))));
+        editorContent = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "dtable-ui-image-add-box",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "dtable-ui-image-add-button ".concat(isImageTipShow ? 'dtable-ui-image-wrapper-drop-active' : ''),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+              "aria-hidden": "true",
+              className: "dtable-font dtable-icon-add-table"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "dtable-ui-image-add-span",
+              children: (0, _lang.getLocale)('Upload')
+            })]
+          })
+        });
       }
-      return /*#__PURE__*/_react.default.createElement(_FileUploader.default, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FileUploader.default, {
         uploadType: "image",
         isSupportDragDrop: true,
         isSupportPaste: true,
@@ -234,8 +256,9 @@ class LocalImageAddition extends _react.default.Component {
         onFileUploadFailed: this.onFileUploadFailed,
         ref: ref => this.uploaderFileRef = ref,
         onCellTipShow: this.onCellTipShow,
-        uploadFile: this.props.uploadFile
-      }, editorContent);
+        uploadFile: this.props.uploadFile,
+        children: editorContent
+      });
     };
     this.state = {
       isImageTipShow: false,
@@ -248,7 +271,9 @@ class LocalImageAddition extends _react.default.Component {
   }
   render() {
     const imageArr = this.renderMultipleFilesArr();
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, imageArr, this.renderUploadFileWrapper(imageArr));
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [imageArr, this.renderUploadFileWrapper(imageArr)]
+    });
   }
 }
 var _default = exports.default = LocalImageAddition;