dtable-ui-component 6.0.49 → 6.0.50

package/lib/RowExpandFormatter/url-formatter/index.js

@@ -11,6 +11,7 @@ var _toaster = _interopRequireDefault(require("../../toaster"));
 var _editorUtils = require("../../utils/editor-utils");
 var _utils = require("../../utils/utils");
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class UrlFormatter extends _react.default.Component {
   constructor() {
     super(...arguments);
@@ -39,14 +40,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/RowExpandView/body/index.js

@@ -13,6 +13,7 @@ var _RowExpandEditor = _interopRequireDefault(require("../../RowExpandEditor"));
 var _RowExpandFormatter = _interopRequireDefault(require("../../RowExpandFormatter"));
 var _utils = require("../../utils/utils");
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class Body extends _react.default.Component {
   constructor() {
     super(...arguments);
@@ -55,20 +56,22 @@ class Body extends _react.default.Component {
         formatter
       } = component || {};
       if (editable) {
-        return /*#__PURE__*/_react.default.createElement(_RowExpandEditor.default, Object.assign({}, props, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RowExpandEditor.default, {
+          ...props,
           column: column,
           row: row,
           component: editor,
           onCommit: value => onChange(column, value)
-        }));
+        });
       }
-      return /*#__PURE__*/_react.default.createElement(_RowExpandFormatter.default, Object.assign({}, props, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RowExpandFormatter.default, {
+        ...props,
         className: (0, _classnames.default)('dtable-ui-mobile-row-expand-formatter', "mobile-dtable-row-expand-".concat(column.type, "-formatter"), className),
         column: column,
         row: row,
         component: formatter,
         downloadImage: getDownLoadFiles ? this.downloadImage : null
-      }));
+      });
     };
   }
   render() {
@@ -77,35 +80,38 @@ class Body extends _react.default.Component {
       row,
       placeholder
     } = this.props;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-row-expand-body dtable-ui-mobile-row-expand-body"
-    }, columns.length === 0 && placeholder && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, placeholder), columns.map(column => {
-      const {
-        type,
-        data
-      } = column;
-      let isHasMore = false;
-      if (type === _dtableUtils.CellType.LINK_FORMULA) {
-        let {
-          array_type
-        } = data || {};
-        const value = this.getCellValue({
-          row,
-          column
-        });
-        const cellValue = (0, _utils.getFormulaArrayValue)(value, !(0, _utils.isArrayFormatColumn)(array_type));
-        if (cellValue.length >= 10) {
-          isHasMore = true;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "dtable-ui-row-expand-body dtable-ui-mobile-row-expand-body",
+      children: [columns.length === 0 && placeholder && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+        children: placeholder
+      }), columns.map(column => {
+        const {
+          type,
+          data
+        } = column;
+        let isHasMore = false;
+        if (type === _dtableUtils.CellType.LINK_FORMULA) {
+          let {
+            array_type
+          } = data || {};
+          const value = this.getCellValue({
+            row,
+            column
+          });
+          const cellValue = (0, _utils.getFormulaArrayValue)(value, !(0, _utils.isArrayFormatColumn)(array_type));
+          if (cellValue.length >= 10) {
+            isHasMore = true;
+          }
         }
-      }
-      return /*#__PURE__*/_react.default.createElement(_columnContent.default, {
-        column: column,
-        className: (0, _classnames.default)('', {
-          'is-has-more': isHasMore
-        }),
-        key: column.key
-      }, this.renderColumnValue(row, column));
-    }));
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_columnContent.default, {
+          column: column,
+          className: (0, _classnames.default)('', {
+            'is-has-more': isHasMore
+          }),
+          children: this.renderColumnValue(row, column)
+        }, column.key);
+      })]
+    });
   }
 }
 var _default = exports.default = Body;

package/lib/RowExpandView/column-content/index.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactstrap = require("reactstrap");
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 const ColumnContent = _ref => {
   let {
     column,
@@ -16,10 +17,14 @@ const ColumnContent = _ref => {
   const {
     name
   } = column;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "dtable-ui-mobile-row-expand-item"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "dtable-ui-mobile-row-expand-item-title"
-  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, null, name)), children);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "dtable-ui-mobile-row-expand-item",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "dtable-ui-mobile-row-expand-item-title",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Label, {
+        children: name
+      })
+    }), children]
+  });
 };
 var _default = exports.default = ColumnContent;

package/lib/RowExpandView/index.js

@@ -16,6 +16,7 @@ var _lang = require("../lang");
 var _cellComparer = require("../utils/cell-comparer");
 var _MobileFullScreenPage = _interopRequireDefault(require("../MobileFullScreenPage"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 const {
   Header,
   Body: MobileFullScreenPageBody
@@ -155,24 +156,34 @@ const RowExpandView = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       });
     }
   }), [row, columns]);
-  return /*#__PURE__*/_react.default.createElement(_MobileFullScreenPage.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MobileFullScreenPage.default, {
     className: (0, _classnames.default)('dtable-ui-mobile-row-expand-full-screen-page', className),
     zIndex: zIndex || 100,
-    historyCallback: historyCallback
-  }, /*#__PURE__*/_react.default.createElement(Header, {
-    onLeftClick: toggle,
-    onRightClick: (!saveImmediately || isInsertingRow) && !(isSaving || !isChangedRef.current) ? onSubmit : null
-  }, /*#__PURE__*/_react.default.createElement("i", {
-    className: "dtable-font dtable-icon-return"
-  }), title, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (!saveImmediately || isInsertingRow) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _lang.getLocale)('Submit')))), /*#__PURE__*/_react.default.createElement(MobileFullScreenPageBody, null, isLoading ? /*#__PURE__*/_react.default.createElement("div", {
-    className: "w-100 -h-100 d-flex align-items-center justify-content-center"
-  }, /*#__PURE__*/_react.default.createElement(_Loading.default, null)) : /*#__PURE__*/_react.default.createElement(_body.default, Object.assign({}, otherProps, {
-    row: row,
-    columns: columns,
-    valueKey: valueKey,
-    onChange: onChange,
-    uploadFile: uploadFile
-  }))));
+    historyCallback: historyCallback,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Header, {
+      onLeftClick: toggle,
+      onRightClick: (!saveImmediately || isInsertingRow) && !(isSaving || !isChangedRef.current) ? onSubmit : null,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+        className: "dtable-font dtable-icon-return"
+      }), title, /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+        children: (!saveImmediately || isInsertingRow) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+          children: (0, _lang.getLocale)('Submit')
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MobileFullScreenPageBody, {
+      children: isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "w-100 -h-100 d-flex align-items-center justify-content-center",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.default, {})
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_body.default, {
+        ...otherProps,
+        row: row,
+        columns: columns,
+        valueKey: valueKey,
+        onChange: onChange,
+        uploadFile: uploadFile
+      })
+    })]
+  });
 });
 RowExpandView.Body = _body.default;
 var _default = exports.default = RowExpandView;

package/lib/SelectItem/index.js

@@ -9,6 +9,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 const SelectItem = _ref => {
   let {
     option,
@@ -30,18 +31,21 @@ const SelectItem = _ref => {
       color: textColor === '#FFFFFF' ? '#FFFFFF' : '#909090'
     };
   }, [option]);
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _classnames.default)('dtable-ui dtable-ui-select-item', className),
-    style: selectItemStyle
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "dtable-ui-select-item-name text-truncate",
-    title: option.name
-  }, option.name), isShowRemove && /*#__PURE__*/_react.default.createElement("div", {
-    className: "dtable-ui-select-item-remove-btn",
-    style: removeBtnStyle,
-    onClick: onRemove
-  }, /*#__PURE__*/_react.default.createElement("i", {
-    className: "dtable-font dtable-icon-fork-number"
-  })));
+    style: selectItemStyle,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "dtable-ui-select-item-name text-truncate",
+      title: option.name,
+      children: option.name
+    }), isShowRemove && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "dtable-ui-select-item-remove-btn",
+      style: removeBtnStyle,
+      onClick: onRemove,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+        className: "dtable-font dtable-icon-fork-number"
+      })
+    })]
+  });
 };
 var _default = 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) {
@@ -130,23 +131,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: "".concat(key, "-").concat(i),
+        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
+        }, "".concat(key, "-").concat(i));
       });
     };
     this.state = {
@@ -210,31 +212,36 @@ 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,
-      ref: this.searchInputRef
-    })), /*#__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,
+            ref: this.searchInputRef
+          })
+        }), /*#__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/SelectedDepartments/index.js

@@ -10,6 +10,7 @@ var _dtableUtils = require("dtable-utils");
 var _departments = require("../constants/departments");
 var _lang = require("../lang");
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 function SelectedDepartments(_ref) {
   let {
     value,
@@ -27,57 +28,66 @@ function SelectedDepartments(_ref) {
   const dom = Array.isArray(value) ? value.map((content, index) => {
     if ([_dtableUtils.DEPARTMENT_SELECT_RANGE_MAP.CURRENT_USER_DEPARTMENT, _dtableUtils.DEPARTMENT_SELECT_RANGE_MAP.CURRENT_USER_DEPARTMENT_AND_SUB].includes(content)) {
       const name = (0, _lang.getLocale)(_departments.DEPARTMENT_SELECT_RANGE_OPTIONS.find(option => option.type === content).name);
-      return /*#__PURE__*/_react.default.createElement("div", {
-        key: "department-".concat(index),
-        className: "department mr-1"
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        className: "department-name text-truncate",
-        title: name,
-        "aria-label": name
-      }, name));
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "department mr-1",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "department-name text-truncate",
+          title: name,
+          "aria-label": name,
+          children: name
+        })
+      }, "department-".concat(index));
     }
     const department = idDepartmentMap[content];
     if (department) {
       const {
         name
       } = department;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        key: "department-".concat(index),
-        className: "department mr-1"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "department-avatar-container d-flex align-items-center justify-content-center"
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        className: "dtable-font dtable-icon-department-single-selection"
-      })), /*#__PURE__*/_react.default.createElement("span", {
-        className: "department-name text-truncate",
-        title: name,
-        "aria-label": name
-      }, name), isShowRemoveIcon && /*#__PURE__*/_react.default.createElement("span", {
-        className: "remove-container"
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        className: "remove-icon",
-        onClick: event => removeDepartment(event, content)
-      }, /*#__PURE__*/_react.default.createElement("i", {
-        className: "dtable-font dtable-icon-fork-number department-remove-icon"
-      }))));
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "department mr-1",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "department-avatar-container d-flex align-items-center justify-content-center",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "dtable-font dtable-icon-department-single-selection"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "department-name text-truncate",
+          title: name,
+          "aria-label": name,
+          children: name
+        }), isShowRemoveIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "remove-container",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "remove-icon",
+            onClick: event => removeDepartment(event, content),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+              className: "dtable-font dtable-icon-fork-number department-remove-icon"
+            })
+          })
+        })]
+      }, "department-".concat(index));
     }
-    return /*#__PURE__*/_react.default.createElement("div", {
-      key: "department-".concat(index),
-      className: "department empty-department mr-1"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "department-avatar-container d-flex align-items-center justify-content-center"
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "dtable-font dtable-icon-department-single-selection"
-    })), /*#__PURE__*/_react.default.createElement("span", {
-      className: "department-name"
-    }, (0, _lang.getLocale)('Deleted_department')), isShowRemoveIcon && /*#__PURE__*/_react.default.createElement("span", {
-      className: "remove-container"
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "remove-icon",
-      onClick: event => removeDepartment(event, content)
-    }, /*#__PURE__*/_react.default.createElement("i", {
-      className: "dtable-font dtable-icon-fork-number department-remove-icon"
-    }))));
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "department empty-department mr-1",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "department-avatar-container d-flex align-items-center justify-content-center",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "dtable-font dtable-icon-department-single-selection"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "department-name",
+        children: (0, _lang.getLocale)('Deleted_department')
+      }), isShowRemoveIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "remove-container",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "remove-icon",
+          onClick: event => removeDepartment(event, content),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+            className: "dtable-font dtable-icon-fork-number department-remove-icon"
+          })
+        })
+      })]
+    }, "department-".concat(index));
   }) : null;
   return dom;
 }

package/lib/SimpleLongTextFormatter/index.js

@@ -11,43 +11,49 @@ var _seafileEditor = require("@seafile/seafile-editor");
 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 {
@@ -145,18 +151,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 = {