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

package/lib/SimpleLongTextFormatter/widgets/LongTextPreview.js

@@ -9,7 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _dtableMarkdownViewer = _interopRequireDefault(require("./dtable-markdown-viewer"));
 require("./longTextEditor.css");
-var _jsxRuntime = require("react/jsx-runtime");
 class LongTextPreview extends _react.default.PureComponent {
   constructor(props) {
     super(props);
@@ -75,20 +74,18 @@ class LongTextPreview extends _react.default.PureComponent {
       value
     } = this.props;
     const markdownContent = value ? value.text : '';
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    return /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)('longtext-modal-dialog longtext-preview', className),
       style: this.getStyle(),
       ref: ref => this.ref = ref,
       onMouseEnter: this.onMouseEnter,
-      onMouseLeave: this.onMouseLeave,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "longtext-container longtext-container-scroll",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dtableMarkdownViewer.default, {
-          markdownContent: markdownContent,
-          showTOC: false
-        })
-      })
-    });
+      onMouseLeave: this.onMouseLeave
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "longtext-container longtext-container-scroll"
+    }, /*#__PURE__*/_react.default.createElement(_dtableMarkdownViewer.default, {
+      markdownContent: markdownContent,
+      showTOC: false
+    })));
   }
 }
 var _default = exports.default = LongTextPreview;

package/lib/SimpleLongTextFormatter/widgets/dtable-markdown-viewer.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _seafileEditor = require("@seafile/seafile-editor");
-var _jsxRuntime = require("react/jsx-runtime");
 // Windows old Wechat (3.0 or earlier) inner core is chrome 53 and don't support ECMA6, can't use seafile-editor markdownViewer
 // Windows new Wechat (lastest version 3.3.5) support seafile-editor markdownViewer
 // so use dangerouslySetInnerHTML to preview
@@ -44,7 +43,7 @@ class DtableMarkdownViewer extends _react.default.PureComponent {
   }
   render() {
     if (this.isWindowsWechat) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      return /*#__PURE__*/_react.default.createElement("div", {
         className: "long-text-container article",
         dangerouslySetInnerHTML: {
           __html: this.state.innerHtml
@@ -55,7 +54,7 @@ class DtableMarkdownViewer extends _react.default.PureComponent {
       showTOC,
       markdownContent
     } = this.props;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_seafileEditor.MarkdownViewer, {
+    return /*#__PURE__*/_react.default.createElement(_seafileEditor.MarkdownViewer, {
       value: markdownContent,
       isShowOutline: showTOC
     });

package/lib/SingleSelectEditor/index.js

@@ -12,7 +12,6 @@ var _lang = require("../lang");
 var _EditEditorButton = _interopRequireDefault(require("../EditEditorButton"));
 var _selectEditor = require("../select-editor");
 require("./index.css");
-var _jsxRuntime = require("react/jsx-runtime");
 class SingleSelectEditor extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -124,48 +123,41 @@ class SingleSelectEditor extends _react.default.Component {
     let option = this.formatOption();
     let options = this.options;
     let selectedOptions = option ? [option] : [];
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    return /*#__PURE__*/_react.default.createElement("div", {
       ref: this.setEditorContainerRef,
-      className: "dtable-ui-single-select-editor",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        ref: this.setEditorRef,
-        className: option ? '' : 'd-inline-block',
-        onClick: this.onAddOptionToggle,
-        children: option ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "dtable-ui-single-select-option-container",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectEditor.SelectEditorOption, {
-            option: option
-          })
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditEditorButton.default, {
-          text: (0, _lang.getLocale)('Add_an_option')
-        })
-      }), isPopoverShow && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactResponsive.default, {
-          query: "(min-width: 768px)",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectEditor.PCSelectEditorPopover, {
-            popoverPosition: popoverPosition,
-            options: options,
-            selectedOptions: selectedOptions,
-            onOptionItemToggle: this.onOptionItemToggle,
-            isSupportNewOption: this.props.isSupportNewOption,
-            onAddNewOption: this.onAddNewOption
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactResponsive.default, {
-          query: "(max-width: 767.8px)",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectEditor.MBSelectEditorPopover, {
-            isReadOnly: this.props.isReadOnly,
-            value: [this.state.newValue],
-            column: this.props.column,
-            options: options,
-            onOptionItemToggle: this.onOptionItemToggle,
-            isShowRemoveIcon: true,
-            isSupportNewOption: this.props.isSupportNewOption,
-            onAddNewOption: this.onAddNewOption,
-            onClosePopover: this.onClosePopover
-          })
-        })]
-      })]
-    });
+      className: "dtable-ui-single-select-editor"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      ref: this.setEditorRef,
+      className: option ? '' : 'd-inline-block',
+      onClick: this.onAddOptionToggle
+    }, option ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-single-select-option-container"
+    }, /*#__PURE__*/_react.default.createElement(_selectEditor.SelectEditorOption, {
+      option: option
+    })) : /*#__PURE__*/_react.default.createElement(_EditEditorButton.default, {
+      text: (0, _lang.getLocale)('Add_an_option')
+    })), isPopoverShow && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+      query: "(min-width: 768px)"
+    }, /*#__PURE__*/_react.default.createElement(_selectEditor.PCSelectEditorPopover, {
+      popoverPosition: popoverPosition,
+      options: options,
+      selectedOptions: selectedOptions,
+      onOptionItemToggle: this.onOptionItemToggle,
+      isSupportNewOption: this.props.isSupportNewOption,
+      onAddNewOption: this.onAddNewOption
+    })), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+      query: "(max-width: 767.8px)"
+    }, /*#__PURE__*/_react.default.createElement(_selectEditor.MBSelectEditorPopover, {
+      isReadOnly: this.props.isReadOnly,
+      value: [this.state.newValue],
+      column: this.props.column,
+      options: options,
+      onOptionItemToggle: this.onOptionItemToggle,
+      isShowRemoveIcon: true,
+      isSupportNewOption: this.props.isSupportNewOption,
+      onAddNewOption: this.onAddNewOption,
+      onClosePopover: this.onClosePopover
+    }))));
   }
 }
 SingleSelectEditor.defaultProps = {

package/lib/SingleSelectFormatter/index.js

@@ -9,7 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _SelectItem = _interopRequireDefault(require("../SelectItem"));
 require("./index.css");
-var _jsxRuntime = require("react/jsx-runtime");
 class SingleSelectFormatter extends _react.default.PureComponent {
   constructor() {
     super(...arguments);
@@ -21,7 +20,7 @@ class SingleSelectFormatter extends _react.default.PureComponent {
       } = this.props;
       let option = options.find(item => item.id === value || item.name === value);
       if (option) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectItem.default, {
+        return /*#__PURE__*/_react.default.createElement(_SelectItem.default, {
           option: option,
           fontSize: fontSize
         });
@@ -34,10 +33,9 @@ class SingleSelectFormatter extends _react.default.PureComponent {
       value
     } = this.props;
     let classname = (0, _classnames.default)('dtable-ui cell-formatter-container single-select-formatter', containerClassName);
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: classname,
-      children: value ? this.getOption() : ''
-    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: classname
+    }, value ? this.getOption() : '');
   }
 }
 SingleSelectFormatter.defaultProps = {

package/lib/TextEditor/index.js

@@ -8,7 +8,6 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _isHotkey = _interopRequireDefault(require("is-hotkey"));
 var _reactstrap = require("reactstrap");
-var _jsxRuntime = require("react/jsx-runtime");
 class TextEditor extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -62,7 +61,7 @@ class TextEditor extends _react.default.Component {
     const {
       isReadOnly
     } = this.props;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Input, {
+    return /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
       ref: this.setInputRef,
       type: "text",
       value: this.state.newValue,

package/lib/TextFormatter/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 TextFormatter extends _react.default.Component {
   constructor() {
     super(...arguments);
@@ -29,11 +28,10 @@ class TextFormatter extends _react.default.Component {
     } = this.props;
     const classname = (0, _classnames.default)('dtable-ui cell-formatter-container text-formatter', containerClassName);
     const formattedValue = this.getFormattedValue(value);
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    return /*#__PURE__*/_react.default.createElement("div", {
       className: classname,
-      title: formattedValue,
-      children: formattedValue
-    });
+      title: formattedValue
+    }, formattedValue);
   }
 }
 var _default = exports.default = TextFormatter;

package/lib/UrlFormatter/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 UrlFormatter extends _react.default.Component {
   render() {
     const {
@@ -16,10 +15,9 @@ 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.jsx)("div", {
-      className: classname,
-      children: value
-    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: classname
+    }, value);
   }
 }
 var _default = exports.default = UrlFormatter;

package/lib/common/delete-tip.js

@@ -9,7 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 var _modalPortal = _interopRequireDefault(require("./modal-portal"));
 var _lang = require("../lang");
 require("./delete-tip.css");
-var _jsxRuntime = require("react/jsx-runtime");
 class DeleteTip extends _react.default.Component {
   constructor() {
     super(...arguments);
@@ -32,32 +31,25 @@ class DeleteTip extends _react.default.Component {
       position,
       deleteTip
     } = this.props;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_modalPortal.default, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        ref: node => this.tipContainer = node,
-        className: "dtable-tip tip-container",
-        style: {
-          top: position.top,
-          left: position.left
-        },
-        onClick: e => e.stopPropagation(),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("b", {
-          className: "mb-4",
-          children: deleteTip
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "d-flex justify-content-end",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-            className: "btn btn-secondary mr-2",
-            onClick: toggle,
-            children: (0, _lang.getLocale)('Cancel')
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-            className: "btn btn-primary",
-            onClick: onDelete,
-            children: (0, _lang.getLocale)('Delete')
-          })]
-        })]
-      })
-    });
+    return /*#__PURE__*/_react.default.createElement(_modalPortal.default, null, /*#__PURE__*/_react.default.createElement("div", {
+      ref: node => this.tipContainer = node,
+      className: "dtable-tip tip-container",
+      style: {
+        top: position.top,
+        left: position.left
+      },
+      onClick: e => e.stopPropagation()
+    }, /*#__PURE__*/_react.default.createElement("b", {
+      className: "mb-4"
+    }, deleteTip), /*#__PURE__*/_react.default.createElement("div", {
+      className: "d-flex justify-content-end"
+    }, /*#__PURE__*/_react.default.createElement("button", {
+      className: "btn btn-secondary mr-2",
+      onClick: toggle
+    }, (0, _lang.getLocale)('Cancel')), /*#__PURE__*/_react.default.createElement("button", {
+      className: "btn btn-primary",
+      onClick: onDelete
+    }, (0, _lang.getLocale)('Delete')))));
   }
 }
 exports.default = DeleteTip;

package/lib/formatterConfig/base-formatter-config.js

@@ -28,29 +28,28 @@ var _EmailFormatter = _interopRequireDefault(require("../EmailFormatter"));
 var _DurationFormatter = _interopRequireDefault(require("../DurationFormatter"));
 var _RateFormatter = _interopRequireDefault(require("../RateFormatter"));
 var _ButtonFormatter = _interopRequireDefault(require("../ButtonFormatter"));
-var _jsxRuntime = require("react/jsx-runtime");
 const BaseFormatterConfig = {
-  [_constants.CellType.DEFAULT]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextFormatter.default, {}),
-  [_constants.CellType.TEXT]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextFormatter.default, {}),
-  [_constants.CellType.CHECKBOX]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxFormatter.default, {}),
-  [_constants.CellType.LONG_TEXT]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SimpleLongTextFormatter.default, {}),
-  [_constants.CellType.SINGLE_SELECT]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SingleSelectFormatter.default, {}),
-  [_constants.CellType.IMAGE]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageFormatter.default, {}),
-  [_constants.CellType.FILE]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FileFormatter.default, {}),
-  [_constants.CellType.MULTIPLE_SELECT]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MultipleSelectFormatter.default, {}),
-  [_constants.CellType.COLLABORATOR]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CollaboratorFormatter.default, {}),
-  [_constants.CellType.NUMBER]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NumberFormatter.default, {}),
-  [_constants.CellType.DATE]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateFormatter.default, {}),
-  [_constants.CellType.CREATOR]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CreatorFormatter.default, {}),
-  [_constants.CellType.CTIME]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CTimeFormatter.default, {}),
-  [_constants.CellType.LAST_MODIFIER]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LastModifierFormatter.default, {}),
-  [_constants.CellType.MTIME]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MTimeFormatter.default, {}),
-  [_constants.CellType.GEOLOCATION]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeolocationFormatter.default, {}),
-  [_constants.CellType.AUTO_NUMBER]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AutoNumberFormatter.default, {}),
-  [_constants.CellType.URL]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_UrlFormatter.default, {}),
-  [_constants.CellType.EMAIL]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EmailFormatter.default, {}),
-  [_constants.CellType.DURATION]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DurationFormatter.default, {}),
-  [_constants.CellType.RATE]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RateFormatter.default, {}),
-  [_constants.CellType.BUTTON]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonFormatter.default, {})
+  [_constants.CellType.DEFAULT]: /*#__PURE__*/_react.default.createElement(_TextFormatter.default, null),
+  [_constants.CellType.TEXT]: /*#__PURE__*/_react.default.createElement(_TextFormatter.default, null),
+  [_constants.CellType.CHECKBOX]: /*#__PURE__*/_react.default.createElement(_CheckboxFormatter.default, null),
+  [_constants.CellType.LONG_TEXT]: /*#__PURE__*/_react.default.createElement(_SimpleLongTextFormatter.default, null),
+  [_constants.CellType.SINGLE_SELECT]: /*#__PURE__*/_react.default.createElement(_SingleSelectFormatter.default, null),
+  [_constants.CellType.IMAGE]: /*#__PURE__*/_react.default.createElement(_ImageFormatter.default, null),
+  [_constants.CellType.FILE]: /*#__PURE__*/_react.default.createElement(_FileFormatter.default, null),
+  [_constants.CellType.MULTIPLE_SELECT]: /*#__PURE__*/_react.default.createElement(_MultipleSelectFormatter.default, null),
+  [_constants.CellType.COLLABORATOR]: /*#__PURE__*/_react.default.createElement(_CollaboratorFormatter.default, null),
+  [_constants.CellType.NUMBER]: /*#__PURE__*/_react.default.createElement(_NumberFormatter.default, null),
+  [_constants.CellType.DATE]: /*#__PURE__*/_react.default.createElement(_DateFormatter.default, null),
+  [_constants.CellType.CREATOR]: /*#__PURE__*/_react.default.createElement(_CreatorFormatter.default, null),
+  [_constants.CellType.CTIME]: /*#__PURE__*/_react.default.createElement(_CTimeFormatter.default, null),
+  [_constants.CellType.LAST_MODIFIER]: /*#__PURE__*/_react.default.createElement(_LastModifierFormatter.default, null),
+  [_constants.CellType.MTIME]: /*#__PURE__*/_react.default.createElement(_MTimeFormatter.default, null),
+  [_constants.CellType.GEOLOCATION]: /*#__PURE__*/_react.default.createElement(_GeolocationFormatter.default, null),
+  [_constants.CellType.AUTO_NUMBER]: /*#__PURE__*/_react.default.createElement(_AutoNumberFormatter.default, null),
+  [_constants.CellType.URL]: /*#__PURE__*/_react.default.createElement(_UrlFormatter.default, null),
+  [_constants.CellType.EMAIL]: /*#__PURE__*/_react.default.createElement(_EmailFormatter.default, null),
+  [_constants.CellType.DURATION]: /*#__PURE__*/_react.default.createElement(_DurationFormatter.default, null),
+  [_constants.CellType.RATE]: /*#__PURE__*/_react.default.createElement(_RateFormatter.default, null),
+  [_constants.CellType.BUTTON]: /*#__PURE__*/_react.default.createElement(_ButtonFormatter.default, null)
 };
 var _default = exports.default = BaseFormatterConfig;

package/lib/formatterConfig/index.js

@@ -10,10 +10,9 @@ var _constants = require("../constants");
 var _baseFormatterConfig = _interopRequireDefault(require("./base-formatter-config"));
 var _LinkFormatter = _interopRequireDefault(require("../LinkFormatter"));
 var _FormulaFormatter = _interopRequireDefault(require("../FormulaFormatter"));
-var _jsxRuntime = require("react/jsx-runtime");
 const FormatterConfig = {
   ..._baseFormatterConfig.default,
-  [_constants.CellType.FORMULA]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormulaFormatter.default, {}),
-  [_constants.CellType.LINK]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkFormatter.default, {})
+  [_constants.CellType.FORMULA]: /*#__PURE__*/_react.default.createElement(_FormulaFormatter.default, null),
+  [_constants.CellType.LINK]: /*#__PURE__*/_react.default.createElement(_LinkFormatter.default, null)
 };
 var _default = exports.default = FormatterConfig;

package/lib/select-editor/mb-select-editor-popover/index.js

@@ -11,7 +11,6 @@ var _lang = require("../../lang");
 var _selectEditorOption = _interopRequireDefault(require("../select-editor-option"));
 var _MBEditorHeader = _interopRequireDefault(require("../../MBEditorHeader"));
 require("./index.css");
-var _jsxRuntime = require("react/jsx-runtime");
 class MBSelectEditorPopover extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -84,24 +83,21 @@ class MBSelectEditorPopover extends _react.default.Component {
           backgroundColor: option.color,
           color: option.textColor || null
         };
-        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        return /*#__PURE__*/_react.default.createElement("div", {
           className: "mb-select-option-item",
-          onMouseDown: this.onSelectOption.bind(this, option),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            className: "mb-select-item",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              className: "item-name",
-              style: style,
-              title: option.name,
-              children: option.name
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            className: "mb-item-checked",
-            children: isSelect && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-              className: "dtable-font dtable-icon-check-mark"
-            })
-          })]
-        }, index);
+          key: index,
+          onMouseDown: this.onSelectOption.bind(this, option)
+        }, /*#__PURE__*/_react.default.createElement("span", {
+          className: "mb-select-item"
+        }, /*#__PURE__*/_react.default.createElement("span", {
+          className: "item-name",
+          style: style,
+          title: option.name
+        }, option.name)), /*#__PURE__*/_react.default.createElement("span", {
+          className: "mb-item-checked"
+        }, isSelect && /*#__PURE__*/_react.default.createElement("i", {
+          className: "dtable-font dtable-icon-check-mark"
+        })));
       });
     };
     this.setEditorPopover = editorPopover => {
@@ -135,77 +131,61 @@ class MBSelectEditorPopover extends _react.default.Component {
     if (isShowCreateBtn) {
       isShowCreateBtn = filteredOptions.length === 0;
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    return /*#__PURE__*/_react.default.createElement("div", {
       ref: this.setEditorPopover,
       className: "dtable-ui-mb-editor-popover mb-select-editor-popover",
       style: {
         zIndex: 99
       },
-      onClick: this.onContainerClick,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_MBEditorHeader.default, {
-        title: column.name,
-        leftContent: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-          className: "dtable-font dtable-icon-return"
-        }),
-        onLeftClick: this.props.onClosePopover
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "dtable-ui-mb-editor-body dtable-ui-mb-select-editor-body",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "mb-selected-item",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "title",
-            children: (0, _lang.getLocale)('Current_option')
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "content",
-            children: [selectedOptions.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              className: "empty-placeholder",
-              children: (0, _lang.getLocale)('No_option')
-            }), selectedOptions.length > 0 && selectedOptions.map(selectedOption => {
-              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectEditorOption.default, {
-                option: selectedOption,
-                isShowRemoveIcon: isShowRemoveBtn,
-                onDeleteSelectOption: this.onRemoveOption
-              }, selectedOption.id);
-            })]
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "mb-search-select-items",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-            className: "form-control",
-            type: "text",
-            placeholder: (0, _lang.getLocale)('Search_option'),
-            value: searchVal,
-            onChange: this.onChangeSearch,
-            onClick: this.onInputClick
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "mb-select-options-container",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "title",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              children: (0, _lang.getLocale)('Choose_an_option')
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "content",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
-              children: [filteredOptions.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                className: "search-result-none",
-                children: (0, _lang.getLocale)('No_options_available')
-              }), filteredOptions.length > 0 && this.renderSelectOptions(filteredOptions)]
-            })
-          })]
-        }), isShowCreateBtn && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "mb-create-select-item",
-          onClick: this.onAddNewOption,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-            className: "dtable-font dtable-icon-add-table"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            className: "dtable-ui-add-new-option",
-            children: "".concat((0, _lang.getLocale)('Add_an_option'), " ").concat(searchVal)
-          })]
-        })]
-      })]
-    });
+      onClick: this.onContainerClick
+    }, /*#__PURE__*/_react.default.createElement(_MBEditorHeader.default, {
+      title: column.name,
+      leftContent: /*#__PURE__*/_react.default.createElement("i", {
+        className: "dtable-font dtable-icon-return"
+      }),
+      onLeftClick: this.props.onClosePopover
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-mb-editor-body dtable-ui-mb-select-editor-body"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "mb-selected-item"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "title"
+    }, (0, _lang.getLocale)('Current_option')), /*#__PURE__*/_react.default.createElement("div", {
+      className: "content"
+    }, selectedOptions.length === 0 && /*#__PURE__*/_react.default.createElement("span", {
+      className: "empty-placeholder"
+    }, (0, _lang.getLocale)('No_option')), selectedOptions.length > 0 && selectedOptions.map(selectedOption => {
+      return /*#__PURE__*/_react.default.createElement(_selectEditorOption.default, {
+        key: selectedOption.id,
+        option: selectedOption,
+        isShowRemoveIcon: isShowRemoveBtn,
+        onDeleteSelectOption: this.onRemoveOption
+      });
+    }))), /*#__PURE__*/_react.default.createElement("div", {
+      className: "mb-search-select-items"
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      className: "form-control",
+      type: "text",
+      placeholder: (0, _lang.getLocale)('Search_option'),
+      value: searchVal,
+      onChange: this.onChangeSearch,
+      onClick: this.onInputClick
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "mb-select-options-container"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "title"
+    }, /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Choose_an_option'))), /*#__PURE__*/_react.default.createElement("div", {
+      className: "content"
+    }, /*#__PURE__*/_react.default.createElement(_react.Fragment, null, filteredOptions.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
+      className: "search-result-none"
+    }, (0, _lang.getLocale)('No_options_available')), filteredOptions.length > 0 && this.renderSelectOptions(filteredOptions)))), isShowCreateBtn && /*#__PURE__*/_react.default.createElement("div", {
+      className: "mb-create-select-item",
+      onClick: this.onAddNewOption
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: "dtable-font dtable-icon-add-table"
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: "dtable-ui-add-new-option"
+    }, "".concat((0, _lang.getLocale)('Add_an_option'), " ").concat(searchVal)))));
   }
 }
 MBSelectEditorPopover.defaultProps = {