dtable-ui-component 6.0.49 → 6.0.50

package/lib/GeolocationEditor/pc-editor/province-city-editor.js

@@ -15,6 +15,7 @@ var _Loading = _interopRequireDefault(require("../../Loading"));
 var _parseGeolocation = _interopRequireDefault(require("./parse-geolocation"));
 var _constants = require("../../constants");
 var _lang = require("../../lang");
+var _jsxRuntime = require("react/jsx-runtime");
 class ProvinceCityEditor extends _react.Component {
   constructor(props) {
     super(props);
@@ -183,75 +184,94 @@ class ProvinceCityEditor extends _react.Component {
       isLoadingData,
       location
     } = this.state;
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !isLoadingData ? /*#__PURE__*/_react.default.createElement("div", {
-      onClick: this.onClick,
-      className: "dtable-ui-geolocation-editor-content"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-geolocation-editor-item dtable-ui-geolocation-editor-selector-container"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-geolocation-editor-item-left"
-    }, (0, _lang.getLocale)('Address_information') + ':'), /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-geolocation-editor-item-right"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      onClick: this.onToggleSelector,
-      className: "dtable-ui-geolocation-editor-selector text-truncate ".concat(isShowSelector ? 'focus' : '')
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "selected-option-show"
-    }, location ? location : (0, _lang.getLocale)('Select_province_city')), /*#__PURE__*/_react.default.createElement("span", {
-      "aria-hidden": "true",
-      className: "dtable-font dtable-icon-down3 dtable-ui-geolocation-editor-parameter-icon"
-    }))), isShowSelector && /*#__PURE__*/_react.default.createElement("div", {
-      className: "geolocation-selector-container"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "geolocation-selector-header"
-    }, /*#__PURE__*/_react.default.createElement(_selectorHeaderItem.default, {
-      type: "province",
-      clickHandler: this.selectSelectorType,
-      selectedType: selectedItem,
-      selectedItem: selectedProvince
-    }), /*#__PURE__*/_react.default.createElement(_selectorHeaderItem.default, {
-      type: "city",
-      clickHandler: this.selectSelectorType,
-      selectedType: selectedItem,
-      selectedItem: selectedCity
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: "geolocation-selector-body"
-    }, selectedItem === 'province' && /*#__PURE__*/_react.default.createElement(_selectorList.default, {
-      type: "province",
-      parent: this.locations,
-      selectedItem: selectedProvince,
-      clickHandler: this.selectProvince
-    }), selectedItem === 'city' && /*#__PURE__*/_react.default.createElement(_selectorList.default, {
-      type: "city",
-      parent: selectedProvince,
-      selectedItem: selectedCity,
-      clickHandler: this.selectCity
-    })))), /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-geolocation-editor-item dtable-ui-geolocation-editor-parse"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-geolocation-editor-item-left"
-    }, (0, _lang.getLocale)('Auto_recognition') + ':'), /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-geolocation-editor-item-right"
-    }, /*#__PURE__*/_react.default.createElement("textarea", {
-      ref: ref => this.parseRef = ref,
-      placeholder: (0, _lang.getLocale)('Try_pasting_addresses_such_as_provinces/cities_information_to_quickly_identify_the_address_information'),
-      className: "dtable-ui-geolocation-editor-detail-info dtable-ui-geolocation-editor-recognition",
-      type: "text",
-      onChange: this.onParseChange,
-      onKeyDown: this.onKeyDown,
-      onCompositionEnd: this.onCompositionEnd,
-      onCompositionStart: this.onCompositionStart
-    })))) : /*#__PURE__*/_react.default.createElement(_Loading.default, null), this.state.errMessage && /*#__PURE__*/_react.default.createElement(_reactstrap.Alert, {
-      color: "danger",
-      className: "mt-2"
-    }, this.state.errMessage), /*#__PURE__*/_react.default.createElement(_DTableCustomFooter.default, null, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
-      onClick: this.props.onCancel,
-      color: "secondary"
-    }, (0, _lang.getLocale)('Cancel')), /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
-      onClick: this.onSubmit,
-      color: "primary",
-      autoFocus: true
-    }, (0, _lang.getLocale)('Submit'))));
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [!isLoadingData ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        onClick: this.onClick,
+        className: "dtable-ui-geolocation-editor-content",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "dtable-ui-geolocation-editor-item dtable-ui-geolocation-editor-selector-container",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "dtable-ui-geolocation-editor-item-left",
+            children: (0, _lang.getLocale)('Address_information') + ':'
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "dtable-ui-geolocation-editor-item-right",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              onClick: this.onToggleSelector,
+              className: "dtable-ui-geolocation-editor-selector text-truncate ".concat(isShowSelector ? 'focus' : ''),
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: "selected-option-show",
+                children: location ? location : (0, _lang.getLocale)('Select_province_city')
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                "aria-hidden": "true",
+                className: "dtable-font dtable-icon-down3 dtable-ui-geolocation-editor-parameter-icon"
+              })]
+            })
+          }), isShowSelector && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "geolocation-selector-container",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "geolocation-selector-header",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_selectorHeaderItem.default, {
+                type: "province",
+                clickHandler: this.selectSelectorType,
+                selectedType: selectedItem,
+                selectedItem: selectedProvince
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectorHeaderItem.default, {
+                type: "city",
+                clickHandler: this.selectSelectorType,
+                selectedType: selectedItem,
+                selectedItem: selectedCity
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "geolocation-selector-body",
+              children: [selectedItem === 'province' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectorList.default, {
+                type: "province",
+                parent: this.locations,
+                selectedItem: selectedProvince,
+                clickHandler: this.selectProvince
+              }), selectedItem === 'city' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectorList.default, {
+                type: "city",
+                parent: selectedProvince,
+                selectedItem: selectedCity,
+                clickHandler: this.selectCity
+              })]
+            })]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "dtable-ui-geolocation-editor-item dtable-ui-geolocation-editor-parse",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "dtable-ui-geolocation-editor-item-left",
+            children: (0, _lang.getLocale)('Auto_recognition') + ':'
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "dtable-ui-geolocation-editor-item-right",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", {
+              ref: ref => this.parseRef = ref,
+              placeholder: (0, _lang.getLocale)('Try_pasting_addresses_such_as_provinces/cities_information_to_quickly_identify_the_address_information'),
+              className: "dtable-ui-geolocation-editor-detail-info dtable-ui-geolocation-editor-recognition",
+              type: "text",
+              onChange: this.onParseChange,
+              onKeyDown: this.onKeyDown,
+              onCompositionEnd: this.onCompositionEnd,
+              onCompositionStart: this.onCompositionStart
+            })
+          })]
+        })]
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.default, {}), this.state.errMessage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Alert, {
+        color: "danger",
+        className: "mt-2",
+        children: this.state.errMessage
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DTableCustomFooter.default, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Button, {
+          onClick: this.props.onCancel,
+          color: "secondary",
+          children: (0, _lang.getLocale)('Cancel')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Button, {
+          onClick: this.onSubmit,
+          color: "primary",
+          autoFocus: true,
+          children: (0, _lang.getLocale)('Submit')
+        })]
+      })]
+    });
   }
 }
 var _default = exports.default = ProvinceCityEditor;

package/lib/GeolocationEditor/pc-editor/province-editor.js

@@ -11,6 +11,7 @@ var _DTableSearchInput = _interopRequireDefault(require("../../DTableSearchInput
 var _constants = require("../../constants");
 var _Loading = _interopRequireDefault(require("../../Loading"));
 var _lang = require("../../lang");
+var _jsxRuntime = require("react/jsx-runtime");
 class ProvinceEditor extends _react.Component {
   constructor(props) {
     super(props);
@@ -128,25 +129,26 @@ class ProvinceEditor extends _react.Component {
         highlightIndex
       } = this.state;
       let provinceList = this.filteredProvince.map((item, index) => {
-        return /*#__PURE__*/_react.default.createElement("div", {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "geolocation-region-editor-province ".concat(highlightIndex === index ? 'geolocation-region-editor-province-highlight' : ''),
-          key: item.alphabetic + index,
           title: item.name,
           "aria-label": item.name,
           onClick: () => this.onClick(item.name),
           onMouseEnter: () => this.onMenuMouseEnter(index),
-          onMouseLeave: () => this.onMenuMouseLeave(index)
-        }, /*#__PURE__*/_react.default.createElement("span", {
-          className: "province-name"
-        }, item.name), /*#__PURE__*/_react.default.createElement("span", {
-          className: "icon ".concat(value === item.name ? 'province-selected-icon dtable-font dtable-icon-check-mark' : '')
-        }));
+          onMouseLeave: () => this.onMenuMouseLeave(index),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "province-name",
+            children: item.name
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "icon ".concat(value === item.name ? 'province-selected-icon dtable-font dtable-icon-check-mark' : '')
+          })]
+        }, item.alphabetic + index);
       });
       if (provinceList.length === 0) {
-        provinceList.push( /*#__PURE__*/_react.default.createElement("div", {
-          key: 'province-null',
-          className: "country-list-empty"
-        }, (0, _lang.getLocale)('No_options')));
+        provinceList.push( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "country-list-empty",
+          children: (0, _lang.getLocale)('No_options')
+        }, 'province-null'));
       }
       return provinceList;
     };
@@ -184,19 +186,22 @@ class ProvinceEditor extends _react.Component {
     const {
       isLoadingData
     } = this.state;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-geolocation-province-editor"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "geolocation-province-list-header"
-    }, /*#__PURE__*/_react.default.createElement(_DTableSearchInput.default, {
-      placeholder: (0, _lang.getLocale)('Search_province'),
-      onKeyDown: this.onKeyDown,
-      onChange: this.onChange,
-      autoFocus: true
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: "geolocation-province-list-container",
-      ref: ref => this.selectContainer = ref
-    }, isLoadingData ? /*#__PURE__*/_react.default.createElement(_Loading.default, null) : this.createProvinceList()));
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "dtable-ui-geolocation-province-editor",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "geolocation-province-list-header",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableSearchInput.default, {
+          placeholder: (0, _lang.getLocale)('Search_province'),
+          onKeyDown: this.onKeyDown,
+          onChange: this.onChange,
+          autoFocus: true
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "geolocation-province-list-container",
+        ref: ref => this.selectContainer = ref,
+        children: isLoadingData ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.default, {}) : this.createProvinceList()
+      })]
+    });
   }
 }
 var _default = exports.default = ProvinceEditor;

package/lib/GeolocationEditor/pc-editor/selector-header-item.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _lang = require("../../lang");
+var _jsxRuntime = require("react/jsx-runtime");
 class SelectorHeaderItem extends _react.default.Component {
   render() {
     const {
@@ -15,14 +16,17 @@ class SelectorHeaderItem extends _react.default.Component {
       selectedType,
       selectedItem
     } = this.props;
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: 'dtable-ui-geolocation-selector-header-item ' + (selectedType === type ? 'selected-dtable-ui-geolocation-selector-header-item' : ''),
       onClick: () => {
         clickHandler(type);
-      }
-    }, /*#__PURE__*/_react.default.createElement("span", null, selectedItem ? selectedItem.name ? selectedItem.name : selectedItem : (0, _lang.getLocale)('Select_location')), /*#__PURE__*/_react.default.createElement("i", {
-      className: "dtable-font dtable-icon-down3"
-    }));
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: selectedItem ? selectedItem.name ? selectedItem.name : selectedItem : (0, _lang.getLocale)('Select_location')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+        className: "dtable-font dtable-icon-down3"
+      })]
+    });
   }
 }
 var _default = exports.default = SelectorHeaderItem;

package/lib/GeolocationEditor/pc-editor/selector-list.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
 class SelectorList extends _react.default.Component {
   render() {
     const {
@@ -15,19 +16,20 @@ class SelectorList extends _react.default.Component {
       parent,
       doubleClickHandler
     } = this.props;
-    return /*#__PURE__*/_react.default.createElement("ul", {
-      className: "dtable-ui-geolocation-selector-list"
-    }, parent.children.map((item, index) => {
-      const isSelected = selectedItem && item.name === selectedItem.name;
-      return /*#__PURE__*/_react.default.createElement("li", {
-        onClick: () => clickHandler(item),
-        onDoubleClick: () => {
-          doubleClickHandler && doubleClickHandler(item);
-        },
-        key: type + '-item-' + index,
-        className: "dtable-ui-geolocation-selector-list-item ".concat(type === 'province' ? 'province-item' : '', " ").concat(isSelected ? 'selected-list-item' : '')
-      }, item.name);
-    }));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+      className: "dtable-ui-geolocation-selector-list",
+      children: parent.children.map((item, index) => {
+        const isSelected = selectedItem && item.name === selectedItem.name;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+          onClick: () => clickHandler(item),
+          onDoubleClick: () => {
+            doubleClickHandler && doubleClickHandler(item);
+          },
+          className: "dtable-ui-geolocation-selector-list-item ".concat(type === 'province' ? 'province-item' : '', " ").concat(isSelected ? 'selected-list-item' : ''),
+          children: item.name
+        }, type + '-item-' + index);
+      })
+    });
   }
 }
 var _default = exports.default = SelectorList;

package/lib/GeolocationFormatter/index.js

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _dtableUtils = require("dtable-utils");
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class GeolocationFormatter extends _react.default.Component {
   render() {
     let {
@@ -23,10 +24,11 @@ class GeolocationFormatter extends _react.default.Component {
     const geolocationDisplayString = (0, _dtableUtils.getGeolocationDisplayString)(value, data, {
       hyphen: ' '
     });
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       title: geolocationDisplayString,
-      className: className
-    }, geolocationDisplayString);
+      className: className,
+      children: geolocationDisplayString
+    });
   }
 }
 GeolocationFormatter.defaultProps = {

package/lib/HtmlLongTextFormatter/index.js

@@ -10,6 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _seafileEditor = require("@seafile/seafile-editor");
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class HtmlLongTextFormatter extends _react.Component {
   constructor(_props) {
     super(_props);
@@ -66,7 +67,7 @@ class HtmlLongTextFormatter extends _react.Component {
     } = this.props;
     const className = (0, _classnames.default)('dtable-ui cell-formatter-container long-text-formatter', containerClassName);
     if (!innerHtml) return null;
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "".concat(className, " article"),
       dangerouslySetInnerHTML: {
         __html: innerHtml

package/lib/Icon/index.js

@@ -10,6 +10,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var React = _interopRequireWildcard(require("react"));
 var _loadSprite = _interopRequireDefault(require("./load-sprite"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class Icon extends React.Component {
   componentDidMount() {
     (0, _loadSprite.default)();
@@ -22,11 +23,13 @@ class Icon extends React.Component {
       ...restProps
     } = this.props;
     const cls = (0, _classnames.default)(className, 'am-icon', "am-icon-".concat(type), "am-icon-".concat(size));
-    return /*#__PURE__*/React.createElement("svg", Object.assign({
-      className: cls
-    }, restProps), /*#__PURE__*/React.createElement("use", {
-      xlinkHref: "#".concat(type)
-    }));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+      className: cls,
+      ...restProps,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("use", {
+        xlinkHref: "#".concat(type)
+      })
+    });
   }
 }
 exports.default = Icon;

package/lib/IconButton/index.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
 const IconButton = _ref => {
   let {
     disabled,
@@ -15,13 +16,15 @@ const IconButton = _ref => {
     children,
     ...otherProperties
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", Object.assign({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _classnames.default)('seatable-icon-btn', className, {
       'disabled': disabled
-    })
-  }, otherProperties), icon && /*#__PURE__*/_react.default.createElement("i", {
-    className: (0, _classnames.default)('seatable-icon dtable-font', "dtable-icon-".concat(icon)),
-    "aria-hidden": "true"
-  }), children);
+    }),
+    ...otherProperties,
+    children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+      className: (0, _classnames.default)('seatable-icon dtable-font', "dtable-icon-".concat(icon)),
+      "aria-hidden": "true"
+    }), children]
+  });
 };
 var _default = exports.default = IconButton;

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

@@ -13,6 +13,7 @@ var _url = require("../../../utils/url");
 var _constants = require("../../../constants");
 var _lang = require("../../../lang");
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class ImagePreviewer extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -63,21 +64,24 @@ class ImagePreviewer extends _react.default.Component {
       });
     };
     this.renderImageIcons = () => {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "dtable-ui-image-icons-choice"
-      }, this.props.downloadImage && this.canDownLoad && /*#__PURE__*/_react.default.createElement("span", {
-        className: "image-icon",
-        onClick: this.downloadImage
-      }, /*#__PURE__*/_react.default.createElement("i", {
-        "aria-hidden": "true",
-        className: "dtable-font dtable-icon-download"
-      })), this.props.deleteImage && /*#__PURE__*/_react.default.createElement("span", {
-        className: "image-icon",
-        onClick: this.onClickDelete
-      }, /*#__PURE__*/_react.default.createElement("i", {
-        "aria-hidden": "true",
-        className: "dtable-font dtable-icon-fork-number"
-      })));
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "dtable-ui-image-icons-choice",
+        children: [this.props.downloadImage && this.canDownLoad && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "image-icon",
+          onClick: this.downloadImage,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+            "aria-hidden": "true",
+            className: "dtable-font dtable-icon-download"
+          })
+        }), this.props.deleteImage && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "image-icon",
+          onClick: this.onClickDelete,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+            "aria-hidden": "true",
+            className: "dtable-font dtable-icon-fork-number"
+          })
+        })]
+      });
     };
     this.state = {
       isTooltipOpen: false,
@@ -121,35 +125,39 @@ class ImagePreviewer extends _react.default.Component {
       itemIndex,
       imageItemUrl
     } = this.props;
-    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-      style: _constants.isMobile ? {
-        width: this.containerSize,
-        height: this.containerSize
-      } : {},
-      onClick: this.showLargeImage,
-      className: "dtable-ui-image-previewer-box",
-      onMouseEnter: this.showImageToolbar,
-      onMouseLeave: this.hideImageToolbar,
-      ref: ref => this.ref = ref
-    }, /*#__PURE__*/_react.default.createElement("img", {
-      src: this.state.imageThumbnailUrl,
-      alt: ""
-    }), enterImageItemIndex === itemIndex && this.renderImageIcons()), !_constants.isMobile && enterImageItemIndex === itemIndex && /*#__PURE__*/_react.default.createElement(_reactstrap.Tooltip, {
-      placement: "bottom",
-      isOpen: this.state.isTooltipOpen,
-      toggle: this.toggle,
-      target: this.ref,
-      delay: {
-        show: 0,
-        hide: 0
-      },
-      fade: false
-    }, (0, _url.getFileName)(imageItemUrl)), this.state.showTip && /*#__PURE__*/_react.default.createElement(_DeleteTip.default, {
-      position: this.position,
-      toggle: this.closeTip,
-      handleDelete: this.deleteImage,
-      deleteTip: (0, _lang.getLocale)('Are_you_sure_you_want_to_delete_this_image')
-    }));
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        style: _constants.isMobile ? {
+          width: this.containerSize,
+          height: this.containerSize
+        } : {},
+        onClick: this.showLargeImage,
+        className: "dtable-ui-image-previewer-box",
+        onMouseEnter: this.showImageToolbar,
+        onMouseLeave: this.hideImageToolbar,
+        ref: ref => this.ref = ref,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          src: this.state.imageThumbnailUrl,
+          alt: ""
+        }), enterImageItemIndex === itemIndex && this.renderImageIcons()]
+      }), !_constants.isMobile && enterImageItemIndex === itemIndex && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Tooltip, {
+        placement: "bottom",
+        isOpen: this.state.isTooltipOpen,
+        toggle: this.toggle,
+        target: this.ref,
+        delay: {
+          show: 0,
+          hide: 0
+        },
+        fade: false,
+        children: (0, _url.getFileName)(imageItemUrl)
+      }), this.state.showTip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DeleteTip.default, {
+        position: this.position,
+        toggle: this.closeTip,
+        handleDelete: this.deleteImage,
+        deleteTip: (0, _lang.getLocale)('Are_you_sure_you_want_to_delete_this_image')
+      })]
+    });
   }
 }
 var _default = exports.default = ImagePreviewer;