dtable-ui-component 5.0.9-beta.2 → 5.0.9-beta.4

package/lib/RowExpandImageFormatter/row-expand-image-item-formatter.js

@@ -11,7 +11,6 @@ var _reactstrap = require("reactstrap");
 var _reactResponsive = _interopRequireDefault(require("react-responsive"));
 var _lang = require("../lang");
 var _deleteTip = _interopRequireDefault(require("../common/delete-tip"));
-var _jsxRuntime = require("react/jsx-runtime");
 class RowExpandImageItemFormatter extends _react.Component {
   constructor(props) {
     super(props);
@@ -65,52 +64,45 @@ class RowExpandImageItemFormatter extends _react.Component {
     } = this.props;
     const id = 'image-list-preview-item' + column.key + index;
     const name = decodeURI(url.slice(url.lastIndexOf('/') + 1));
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "row-expand-item-image",
-        id: id,
-        onClick: this.onClickImage,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-          src: url,
-          id: "item-image-".concat(index),
-          alt: name
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "dtable-image-icons-choice",
-          children: [downloadFile && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            className: "image-icon",
-            onClick: this.onClickDownload,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-              className: "dtable-font dtable-icon-download"
-            })
-          }), !readOnly && deleteFile && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            className: "image-icon",
-            onClick: this.onClickDelete,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-              className: "dtable-font dtable-icon-fork-number"
-            })
-          })]
-        })]
-      }, "image-".concat(index)), this.state.isDeleteTipOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_deleteTip.default, {
-        position: this.position,
-        toggle: this.closeDeleteTip,
-        onDelete: this.onDelete,
-        deleteTip: (0, _lang.getLocale)('Are_you_sure_you_want_to_delete_this_image')
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactResponsive.default, {
-        query: '(min-width: 768px)',
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Tooltip, {
-          placement: "bottom",
-          isOpen: this.state.isTooltipOpen,
-          toggle: this.toggleTooltip,
-          target: id,
-          delay: {
-            show: 0,
-            hide: 0
-          },
-          fade: false,
-          children: name
-        })
-      })]
-    });
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      key: "image-".concat(index),
+      className: "row-expand-item-image",
+      id: id,
+      onClick: this.onClickImage
+    }, /*#__PURE__*/_react.default.createElement("img", {
+      src: url,
+      id: "item-image-".concat(index),
+      alt: name
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-image-icons-choice"
+    }, downloadFile && /*#__PURE__*/_react.default.createElement("span", {
+      className: "image-icon",
+      onClick: this.onClickDownload
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: "dtable-font dtable-icon-download"
+    })), !readOnly && deleteFile && /*#__PURE__*/_react.default.createElement("span", {
+      className: "image-icon",
+      onClick: this.onClickDelete
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: "dtable-font dtable-icon-fork-number"
+    })))), this.state.isDeleteTipOpen && /*#__PURE__*/_react.default.createElement(_deleteTip.default, {
+      position: this.position,
+      toggle: this.closeDeleteTip,
+      onDelete: this.onDelete,
+      deleteTip: (0, _lang.getLocale)('Are_you_sure_you_want_to_delete_this_image')
+    }), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+      query: '(min-width: 768px)'
+    }, /*#__PURE__*/_react.default.createElement(_reactstrap.Tooltip, {
+      placement: "bottom",
+      isOpen: this.state.isTooltipOpen,
+      toggle: this.toggleTooltip,
+      target: id,
+      delay: {
+        show: 0,
+        hide: 0
+      },
+      fade: false
+    }, name)));
   }
 }
 exports.default = RowExpandImageItemFormatter;

package/lib/RowExpandLinkFormatter/collaborator-item-formatter.js

@@ -9,7 +9,6 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _dtableUtils = require("dtable-utils");
 var _CollaboratorItem = _interopRequireDefault(require("../CollaboratorItem"));
-var _jsxRuntime = require("react/jsx-runtime");
 class CollaboratorItemFormatter extends _react.Component {
   constructor(_props) {
     super(_props);
@@ -116,7 +115,7 @@ class CollaboratorItemFormatter extends _react.Component {
     if (!isDataLoaded || !cellValue || !collaborator) {
       return this.props.renderEmpty();
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CollaboratorItem.default, {
+    return /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
       collaborator: collaborator,
       enableDeleteCollaborator: false
     });

package/lib/RowExpandLinkFormatter/index.js

@@ -16,7 +16,6 @@ var _collaboratorItemFormatter = _interopRequireDefault(require("./collaborator-
 var _utils = require("./utils");
 var _valueDisplayUtils = require("./value-display-utils");
 require("./index.css");
-var _jsxRuntime = require("react/jsx-runtime");
 class RowExpandLinkFormatter extends _react.Component {
   render() {
     const props = this.props;
@@ -54,98 +53,96 @@ class RowExpandLinkFormatter extends _react.Component {
       case _constants.CellType.DURATION:
       case _constants.CellType.NUMBER:
         {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: containerClassName,
-            children: cellValue.map((value, index) => {
-              if (!value) return null;
-              return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                className: "row-expand-link-item",
-                children: value
-              }, "link-".concat(displayColumnType, "-").concat(index));
-            })
-          });
+          return /*#__PURE__*/_react.default.createElement("div", {
+            className: containerClassName
+          }, cellValue.map((value, index) => {
+            if (!value) return null;
+            return /*#__PURE__*/_react.default.createElement("div", {
+              key: "link-".concat(displayColumnType, "-").concat(index),
+              className: "row-expand-link-item"
+            }, value);
+          }));
         }
       case _constants.CellType.DATE:
         {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: containerClassName,
-            children: cellValue.map((value, index) => {
-              if (!value || typeof value !== 'string') return null;
-              const {
-                format
-              } = displayColumnData || {};
-              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateFormatter.default, {
-                value: value,
-                format: format,
-                containerClassName: "row-expand-link-item"
-              }, "link-".concat(displayColumnType, "-").concat(index));
-            })
-          });
+          return /*#__PURE__*/_react.default.createElement("div", {
+            className: containerClassName
+          }, cellValue.map((value, index) => {
+            if (!value || typeof value !== 'string') return null;
+            const {
+              format
+            } = displayColumnData || {};
+            return /*#__PURE__*/_react.default.createElement(_DateFormatter.default, {
+              key: "link-".concat(displayColumnType, "-").concat(index),
+              value: value,
+              format: format,
+              containerClassName: "row-expand-link-item"
+            });
+          }));
         }
       case _constants.CellType.CTIME:
         {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: containerClassName,
-            children: cellValue.map((value, index) => {
-              if (!value) return null;
-              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CTimeFormatter.default, {
-                value: value,
-                containerClassName: "row-expand-link-item"
-              }, "link-".concat(displayColumnType, "-").concat(index));
-            })
-          });
+          return /*#__PURE__*/_react.default.createElement("div", {
+            className: containerClassName
+          }, cellValue.map((value, index) => {
+            if (!value) return null;
+            return /*#__PURE__*/_react.default.createElement(_CTimeFormatter.default, {
+              key: "link-".concat(displayColumnType, "-").concat(index),
+              value: value,
+              containerClassName: "row-expand-link-item"
+            });
+          }));
         }
       case _constants.CellType.MTIME:
         {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: containerClassName,
-            children: cellValue.map((value, index) => {
-              if (!value) return null;
-              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MTimeFormatter.default, {
-                value: value,
-                containerClassName: "row-expand-link-item"
-              }, "link-".concat(displayColumnType, "-").concat(index));
-            })
-          });
+          return /*#__PURE__*/_react.default.createElement("div", {
+            className: containerClassName
+          }, cellValue.map((value, index) => {
+            if (!value) return null;
+            return /*#__PURE__*/_react.default.createElement(_MTimeFormatter.default, {
+              key: "link-".concat(displayColumnType, "-").concat(index),
+              value: value,
+              containerClassName: "row-expand-link-item"
+            });
+          }));
         }
       case _constants.CellType.CREATOR:
       case _constants.CellType.LAST_MODIFIER:
         {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "dtable-ui cell-formatter-container collaborator-formatter sql-query-collaborator-formatter",
-            children: cellValue.map((value, index) => {
-              if (!value) return null;
-              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_collaboratorItemFormatter.default, {
-                cellValue: value,
-                collaborators: collaborators,
-                context: props.context,
-                renderEmpty: props.renderEmpty
-              }, "link-".concat(displayColumnType, "-").concat(index));
-            })
-          });
+          return /*#__PURE__*/_react.default.createElement("div", {
+            className: "dtable-ui cell-formatter-container collaborator-formatter sql-query-collaborator-formatter"
+          }, cellValue.map((value, index) => {
+            if (!value) return null;
+            return /*#__PURE__*/_react.default.createElement(_collaboratorItemFormatter.default, {
+              key: "link-".concat(displayColumnType, "-").concat(index),
+              cellValue: value,
+              collaborators: collaborators,
+              context: props.context,
+              renderEmpty: props.renderEmpty
+            });
+          }));
         }
       case _constants.CellType.SINGLE_SELECT:
         {
           const options = displayColumnData && Array.isArray(displayColumnData.options) ? displayColumnData.options : [];
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MultipleSelectFormatter.default, {
+          return /*#__PURE__*/_react.default.createElement(_MultipleSelectFormatter.default, {
             value: cellValue,
             options: options || []
           });
         }
       case _constants.CellType.FORMULA:
         {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: containerClassName,
-            children: cellValue.map((value, index) => {
-              if (!value) return null;
-              return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                className: "row-expand-link-item",
-                children: (0, _valueDisplayUtils.getCellDisplayValue)({
-                  [displayColumn.key]: value
-                }, displayColumn, collaborators)
-              }, "link-".concat(displayColumnType, "-").concat(index));
-            })
-          });
+          return /*#__PURE__*/_react.default.createElement("div", {
+            className: containerClassName
+          }, cellValue.map((value, index) => {
+            if (!value) return null;
+            return /*#__PURE__*/_react.default.createElement("div", {
+              key: "link-".concat(displayColumnType, "-").concat(index),
+              className: "row-expand-link-item"
+            }, (0, _valueDisplayUtils.getCellDisplayValue)({
+              [displayColumn.key]: value
+            }, displayColumn, collaborators));
+          }));
         }
       default:
         {

package/lib/RowExpandRateFormatter/index.js

@@ -8,7 +8,6 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 require("./index.css");
-var _jsxRuntime = require("react/jsx-runtime");
 class RateExpendRateFormatter extends _react.default.Component {
   constructor() {
     super(...arguments);
@@ -27,10 +26,11 @@ class RateExpendRateFormatter extends _react.default.Component {
         let style = {
           color: value >= i + 1 ? rate_style_color : '#e5e5e5'
         };
-        rateList.push( /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+        rateList.push( /*#__PURE__*/_react.default.createElement("i", {
+          key: "dtable-ui-component-rate-".concat(i),
           className: "dtable-font ".concat(rate_style_type),
           style: style
-        }, "dtable-ui-component-rate-".concat(i)));
+        }));
       }
       return rateList;
     };
@@ -41,10 +41,9 @@ class RateExpendRateFormatter extends _react.default.Component {
     } = this.props;
     const className = (0, _classnames.default)('dtable-ui cell-formatter-container rate-formatter', containerClassName);
     const rateList = this.getRateList();
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: className,
-      children: rateList
-    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: className
+    }, rateList);
   }
 }
 RateExpendRateFormatter.defaultProps = {

package/lib/RowExpandUrlFormatter/index.js

@@ -10,7 +10,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _toaster = _interopRequireDefault(require("../toaster"));
 var _editorUtils = require("../utils/editor-utils");
 require("./index.css");
-var _jsxRuntime = require("react/jsx-runtime");
 class UrlFormatter extends _react.default.Component {
   constructor() {
     super(...arguments);
@@ -39,16 +38,14 @@ class UrlFormatter extends _react.default.Component {
       value
     } = this.props;
     let classname = (0, _classnames.default)('dtable-ui cell-formatter-container url-formatter', containerClassName);
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: classname,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "url-formatter-value text-truncate",
-        children: value
-      }), (0, _editorUtils.getTrimmedString)(value) && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "dtable-font dtable-icon-url row-expand-jump-link",
-        onClick: this.onOpenUrlLink
-      })]
-    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: classname
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "url-formatter-value text-truncate"
+    }, value), (0, _editorUtils.getTrimmedString)(value) && /*#__PURE__*/_react.default.createElement("span", {
+      className: "dtable-font dtable-icon-url row-expand-jump-link",
+      onClick: this.onOpenUrlLink
+    }));
   }
 }
 var _default = exports.default = UrlFormatter;

package/lib/SelectItem/index.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _jsxRuntime = require("react/jsx-runtime");
 class SelectItem extends _react.default.PureComponent {
   constructor() {
     super(...arguments);
@@ -32,12 +31,11 @@ class SelectItem extends _react.default.PureComponent {
       fontSize
     } = this.props;
     const style = this.getStyle(option, fontSize);
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    return /*#__PURE__*/_react.default.createElement("div", {
       className: "dtable-ui select-item text-truncate",
       style: style,
-      title: option.name,
-      children: option.name
-    });
+      title: option.name
+    }, option.name);
   }
 }
 exports.default = SelectItem;

package/lib/SelectOptionGroup/index.js

@@ -13,7 +13,6 @@ var _DTableSearchInput = _interopRequireDefault(require("../DTableSearchInput"))
 var _KeyCodes = _interopRequireDefault(require("./KeyCodes"));
 var _ClickOutside = _interopRequireDefault(require("../ClickOutside"));
 require("./index.css");
-var _jsxRuntime = require("react/jsx-runtime");
 const OPTION_HEIGHT = 32;
 class SelectOptionGroup extends _react.Component {
   constructor(props) {
@@ -129,24 +128,23 @@ class SelectOptionGroup extends _react.Component {
       } = this.props;
       this.filterOptions = this.props.getFilterOptions(searchVal);
       if (this.filterOptions.length === 0) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "none-search-result",
-          children: noOptionsPlaceholder
-        });
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: "none-search-result"
+        }, noOptionsPlaceholder);
       }
       return this.filterOptions.map((opt, i) => {
         let key = opt.value.column ? opt.value.column.key : i;
         let isActive = this.state.activeIndex === i;
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_option.default, {
+        return /*#__PURE__*/_react.default.createElement(_option.default, {
+          key: key,
           index: i,
           isActive: isActive,
           value: opt.value,
           onSelectOption: onSelectOption,
           changeIndex: this.changeIndex,
           supportMultipleSelect: this.props.supportMultipleSelect,
-          disableHover: this.state.disableHover,
-          children: opt.label
-        }, key);
+          disableHover: this.state.disableHover
+        }, opt.label);
       });
     };
     this.state = {
@@ -209,35 +207,30 @@ class SelectOptionGroup extends _react.Component {
         opacity: 0
       };
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickOutside.default, {
-      onClickOutside: this.props.onClickOutside,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _classnames.default)('option-group', className ? 'option-group-' + className : '', {
-          'pt-0': isShowSelected,
-          'create-new-option-group': addOptionAble
-        }),
-        ref: ref => this.optionGroupRef = ref,
-        style: style,
-        onMouseDown: this.onMouseDown,
-        children: [isShowSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "editor-list-delete mb-2",
-          onClick: e => e.stopPropagation(),
-          children: value.label || ''
-        }), searchable && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "option-group-search",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableSearchInput.default, {
-            className: "option-search-control",
-            placeholder: searchPlaceholder,
-            onChange: this.onChangeSearch,
-            autoFocus: true
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "option-group-content",
-          ref: ref => this.optionGroupContentRef = ref,
-          children: this.renderOptGroup(searchVal)
-        }), addOptionAble && AddOption]
-      })
-    });
+    return /*#__PURE__*/_react.default.createElement(_ClickOutside.default, {
+      onClickOutside: this.props.onClickOutside
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)('option-group', className ? 'option-group-' + className : '', {
+        'pt-0': isShowSelected,
+        'create-new-option-group': addOptionAble
+      }),
+      ref: ref => this.optionGroupRef = ref,
+      style: style,
+      onMouseDown: this.onMouseDown
+    }, isShowSelected && /*#__PURE__*/_react.default.createElement("div", {
+      className: "editor-list-delete mb-2",
+      onClick: e => e.stopPropagation()
+    }, value.label || ''), searchable && /*#__PURE__*/_react.default.createElement("div", {
+      className: "option-group-search"
+    }, /*#__PURE__*/_react.default.createElement(_DTableSearchInput.default, {
+      className: "option-search-control",
+      placeholder: searchPlaceholder,
+      onChange: this.onChangeSearch,
+      autoFocus: true
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "option-group-content",
+      ref: ref => this.optionGroupContentRef = ref
+    }, this.renderOptGroup(searchVal)), addOptionAble && AddOption));
   }
 }
 var _default = exports.default = SelectOptionGroup;

package/lib/SelectOptionGroup/option.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _jsxRuntime = require("react/jsx-runtime");
 class Option extends _react.Component {
   constructor() {
     super(...arguments);
@@ -28,13 +27,12 @@ class Option extends _react.Component {
     };
   }
   render() {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    return /*#__PURE__*/_react.default.createElement("div", {
       className: this.props.isActive ? 'option option-active' : 'option',
       onClick: this.onSelectOption.bind(this, this.props.value),
       onMouseEnter: this.onMouseEnter,
-      onMouseLeave: this.onMouseLeave,
-      children: this.props.children
-    });
+      onMouseLeave: this.onMouseLeave
+    }, this.props.children);
   }
 }
 var _default = exports.default = Option;

package/lib/SimpleLongTextFormatter/index.js

@@ -11,49 +11,43 @@ var _normalizeLongTextValue = _interopRequireDefault(require("./normalize-long-t
 var _LongTextPreview = _interopRequireDefault(require("./widgets/LongTextPreview"));
 var _ModalPortal = _interopRequireDefault(require("../ModalPortal"));
 require("./index.css");
-var _jsxRuntime = require("react/jsx-runtime");
 class SimpleLongTextFormatter extends _react.default.Component {
   constructor(props) {
     super(props);
     this.renderLinks = value => {
       const links = value.links;
       if (!Array.isArray(links) || links.length === 0) return null;
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-        className: "long-text-links",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-          className: "dtable-font dtable-icon-url"
-        }), links.length]
-      });
+      return /*#__PURE__*/_react.default.createElement("span", {
+        className: "long-text-links"
+      }, /*#__PURE__*/_react.default.createElement("i", {
+        className: "dtable-font dtable-icon-url"
+      }), links.length);
     };
     this.renderCheckList = value => {
       const checkList = value.checklist;
       if (!checkList || checkList.total === 0) return null;
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-        className: "long-text-check-list",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-          className: "dtable-font dtable-icon-check-square-solid ".concat(checkList.completed === checkList.total ? 'long-text-check-list-completed' : '')
-        }), "".concat(checkList.completed, "/").concat(checkList.total)]
-      });
+      return /*#__PURE__*/_react.default.createElement("span", {
+        className: "long-text-check-list"
+      }, /*#__PURE__*/_react.default.createElement("i", {
+        className: "dtable-font dtable-icon-check-square-solid ".concat(checkList.completed === checkList.total ? 'long-text-check-list-completed' : '')
+      }), "".concat(checkList.completed, "/").concat(checkList.total));
     };
     this.renderImages = value => {
       const images = value.images;
       if (!Array.isArray(images) || images.length === 0) return null;
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-        className: "long-text-images",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-          src: images[0],
-          alt: ""
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-          className: "image-number",
-          children: images.length > 1 ? '+' + images.length : null
-        })]
-      });
+      return /*#__PURE__*/_react.default.createElement("span", {
+        className: "long-text-images"
+      }, /*#__PURE__*/_react.default.createElement("img", {
+        src: images[0],
+        alt: ""
+      }), /*#__PURE__*/_react.default.createElement("i", {
+        className: "image-number"
+      }, images.length > 1 ? '+' + images.length : null));
     };
     this.renderContent = value => {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "long-text-content",
-        children: value.preview
-      });
+      return /*#__PURE__*/_react.default.createElement("span", {
+        className: "long-text-content"
+      }, value.preview);
     };
     this.translateValue = () => {
       const {
@@ -136,21 +130,18 @@ class SimpleLongTextFormatter extends _react.default.Component {
     } = this.props;
     const className = (0, _classnames.default)('dtable-ui cell-formatter-container long-text-formatter', containerClassName);
     const value = this.translateValue();
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    return /*#__PURE__*/_react.default.createElement("div", {
       className: className,
       onMouseEnter: this.onMouseEnter,
       onMouseLeave: this.onMouseLeave,
-      ref: ref => this.ref = ref,
-      children: [this.renderLinks(value), this.renderCheckList(value), this.renderImages(value), this.renderContent(value), isPreview && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalPortal.default, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LongTextPreview.default, {
-          className: previewClassName,
-          value: value,
-          formatterStyle: this.formatterStyle,
-          onMouseEnter: this.onPreviewMouseEnter,
-          onMouseLeave: this.onPreviewMouseLeave
-        })
-      })]
-    });
+      ref: ref => this.ref = ref
+    }, this.renderLinks(value), this.renderCheckList(value), this.renderImages(value), this.renderContent(value), isPreview && /*#__PURE__*/_react.default.createElement(_ModalPortal.default, null, /*#__PURE__*/_react.default.createElement(_LongTextPreview.default, {
+      className: previewClassName,
+      value: value,
+      formatterStyle: this.formatterStyle,
+      onMouseEnter: this.onPreviewMouseEnter,
+      onMouseLeave: this.onPreviewMouseLeave
+    })));
   }
 }
 SimpleLongTextFormatter.defaultProps = {