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

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

@@ -11,6 +11,7 @@ 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);
@@ -64,45 +65,52 @@ 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__*/_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)));
+    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
+        })
+      })]
+    });
   }
 }
 exports.default = RowExpandImageItemFormatter;

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

@@ -9,6 +9,7 @@ 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);
@@ -115,7 +116,7 @@ class CollaboratorItemFormatter extends _react.Component {
     if (!isDataLoaded || !cellValue || !collaborator) {
       return this.props.renderEmpty();
     }
-    return /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CollaboratorItem.default, {
       collaborator: collaborator,
       enableDeleteCollaborator: false
     });

package/lib/RowExpandLinkFormatter/index.js

@@ -16,6 +16,7 @@ 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;
@@ -53,96 +54,98 @@ class RowExpandLinkFormatter extends _react.Component {
       case _constants.CellType.DURATION:
       case _constants.CellType.NUMBER:
         {
-          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);
-          }));
+          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));
+            })
+          });
         }
       case _constants.CellType.DATE:
         {
-          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"
-            });
-          }));
+          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));
+            })
+          });
         }
       case _constants.CellType.CTIME:
         {
-          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"
-            });
-          }));
+          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));
+            })
+          });
         }
       case _constants.CellType.MTIME:
         {
-          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"
-            });
-          }));
+          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));
+            })
+          });
         }
       case _constants.CellType.CREATOR:
       case _constants.CellType.LAST_MODIFIER:
         {
-          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
-            });
-          }));
+          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));
+            })
+          });
         }
       case _constants.CellType.SINGLE_SELECT:
         {
           const options = displayColumnData && Array.isArray(displayColumnData.options) ? displayColumnData.options : [];
-          return /*#__PURE__*/_react.default.createElement(_MultipleSelectFormatter.default, {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MultipleSelectFormatter.default, {
             value: cellValue,
             options: options || []
           });
         }
       case _constants.CellType.FORMULA:
         {
-          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));
-          }));
+          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));
+            })
+          });
         }
       default:
         {

package/lib/RowExpandRateFormatter/index.js

@@ -8,6 +8,7 @@ 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);
@@ -26,11 +27,10 @@ class RateExpendRateFormatter extends _react.default.Component {
         let style = {
           color: value >= i + 1 ? rate_style_color : '#e5e5e5'
         };
-        rateList.push( /*#__PURE__*/_react.default.createElement("i", {
-          key: "dtable-ui-component-rate-".concat(i),
+        rateList.push( /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
           className: "dtable-font ".concat(rate_style_type),
           style: style
-        }));
+        }, "dtable-ui-component-rate-".concat(i)));
       }
       return rateList;
     };
@@ -41,9 +41,10 @@ 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__*/_react.default.createElement("div", {
-      className: className
-    }, rateList);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: className,
+      children: rateList
+    });
   }
 }
 RateExpendRateFormatter.defaultProps = {

package/lib/RowExpandUrlFormatter/index.js

@@ -10,6 +10,7 @@ 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);
@@ -38,14 +39,16 @@ class UrlFormatter extends _react.default.Component {
       value
     } = this.props;
     let classname = (0, _classnames.default)('dtable-ui cell-formatter-container url-formatter', containerClassName);
-    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
-    }));
+    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
+      })]
+    });
   }
 }
 var _default = exports.default = UrlFormatter;

package/lib/SelectItem/index.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 SelectItem extends _react.default.PureComponent {
   constructor() {
     super(...arguments);
@@ -31,11 +32,12 @@ class SelectItem extends _react.default.PureComponent {
       fontSize
     } = this.props;
     const style = this.getStyle(option, fontSize);
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "dtable-ui select-item text-truncate",
       style: style,
-      title: option.name
-    }, option.name);
+      title: option.name,
+      children: option.name
+    });
   }
 }
 exports.default = SelectItem;

package/lib/SelectOptionGroup/index.js

@@ -13,6 +13,7 @@ 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) {
@@ -128,23 +129,24 @@ class SelectOptionGroup extends _react.Component {
       } = this.props;
       this.filterOptions = this.props.getFilterOptions(searchVal);
       if (this.filterOptions.length === 0) {
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: "none-search-result"
-        }, noOptionsPlaceholder);
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "none-search-result",
+          children: 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__*/_react.default.createElement(_option.default, {
-          key: key,
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_option.default, {
           index: i,
           isActive: isActive,
           value: opt.value,
           onSelectOption: onSelectOption,
           changeIndex: this.changeIndex,
           supportMultipleSelect: this.props.supportMultipleSelect,
-          disableHover: this.state.disableHover
-        }, opt.label);
+          disableHover: this.state.disableHover,
+          children: opt.label
+        }, key);
       });
     };
     this.state = {
@@ -207,30 +209,35 @@ class SelectOptionGroup extends _react.Component {
         opacity: 0
       };
     }
-    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));
+    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]
+      })
+    });
   }
 }
 var _default = exports.default = SelectOptionGroup;

package/lib/SelectOptionGroup/option.js

@@ -6,6 +6,7 @@ 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);
@@ -27,12 +28,13 @@ class Option extends _react.Component {
     };
   }
   render() {
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: this.props.isActive ? 'option option-active' : 'option',
       onClick: this.onSelectOption.bind(this, this.props.value),
       onMouseEnter: this.onMouseEnter,
-      onMouseLeave: this.onMouseLeave
-    }, this.props.children);
+      onMouseLeave: this.onMouseLeave,
+      children: this.props.children
+    });
   }
 }
 var _default = exports.default = Option;

package/lib/SimpleLongTextFormatter/index.js

@@ -11,43 +11,49 @@ 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__*/_react.default.createElement("span", {
-        className: "long-text-links"
-      }, /*#__PURE__*/_react.default.createElement("i", {
-        className: "dtable-font dtable-icon-url"
-      }), links.length);
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+        className: "long-text-links",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("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__*/_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));
+      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)]
+      });
     };
     this.renderImages = value => {
       const images = value.images;
       if (!Array.isArray(images) || images.length === 0) return 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));
+      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
+        })]
+      });
     };
     this.renderContent = value => {
-      return /*#__PURE__*/_react.default.createElement("span", {
-        className: "long-text-content"
-      }, value.preview);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "long-text-content",
+        children: value.preview
+      });
     };
     this.translateValue = () => {
       const {
@@ -130,18 +136,21 @@ 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__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: className,
       onMouseEnter: this.onMouseEnter,
       onMouseLeave: this.onMouseLeave,
-      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
-    })));
+      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
+        })
+      })]
+    });
   }
 }
 SimpleLongTextFormatter.defaultProps = {