dtable-ui-component 6.0.89 → 6.0.92

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 ${checkList.completed === checkList.total ? 'long-text-check-list-completed' : ''}`
+        }), `${checkList.completed}/${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 = {

package/lib/SimpleLongTextFormatter/widgets/LongTextPreview.js

@@ -9,6 +9,7 @@ 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);
@@ -74,18 +75,20 @@ class LongTextPreview extends _react.default.PureComponent {
       value
     } = this.props;
     const markdownContent = value ? value.text : '';
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("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
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "longtext-container longtext-container-scroll"
-    }, /*#__PURE__*/_react.default.createElement(_dtableMarkdownViewer.default, {
-      markdownContent: markdownContent,
-      showTOC: false
-    })));
+      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
+        })
+      })
+    });
   }
 }
 var _default = exports.default = LongTextPreview;

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

@@ -7,6 +7,7 @@ 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
@@ -43,7 +44,7 @@ class DtableMarkdownViewer extends _react.default.PureComponent {
   }
   render() {
     if (this.isWindowsWechat) {
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "long-text-container article",
         dangerouslySetInnerHTML: {
           __html: this.state.innerHtml
@@ -54,7 +55,7 @@ class DtableMarkdownViewer extends _react.default.PureComponent {
       showTOC,
       markdownContent
     } = this.props;
-    return /*#__PURE__*/_react.default.createElement(_seafileEditor.MarkdownViewer, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_seafileEditor.MarkdownViewer, {
       value: markdownContent,
       isShowOutline: showTOC
     });

package/lib/SingleSelectEditor/index.js

@@ -8,15 +8,17 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _selectEditor = _interopRequireDefault(require("../select-editor"));
+var _jsxRuntime = require("react/jsx-runtime");
 const SingleSelectEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     value: oldValue,
     ...props
   } = _ref;
   const value = oldValue ? [oldValue] : [];
-  return /*#__PURE__*/_react.default.createElement(_selectEditor.default, Object.assign({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectEditor.default, {
+    ...props,
     value: value,
     ref: ref
-  }));
+  });
 });
 var _default = exports.default = SingleSelectEditor;

package/lib/SingleSelectFormatter/index.js

@@ -9,6 +9,7 @@ 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);
@@ -20,7 +21,7 @@ class SingleSelectFormatter extends _react.default.PureComponent {
       } = this.props;
       let option = options.find(item => item.id === value || item.name === value);
       if (option) {
-        return /*#__PURE__*/_react.default.createElement(_SelectItem.default, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectItem.default, {
           option: option,
           fontSize: fontSize
         });
@@ -33,9 +34,10 @@ 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__*/_react.default.createElement("div", {
-      className: classname
-    }, value ? this.getOption() : '');
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classname,
+      children: value ? this.getOption() : ''
+    });
   }
 }
 var _default = exports.default = SingleSelectFormatter;

package/lib/SvgIcon/index.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 const iconComponents = {};
 const requireContext = require.context('../assets/icons', false, /\.svg$/);
 requireContext.keys().forEach(path => {
@@ -20,7 +21,7 @@ const SvgIcon = _ref => {
     color
   } = _ref;
   if (!symbol) return null;
-  const iconClass = "dtable-ui-multicolor-icon multicolor-icon-".concat(symbol, " ").concat(className || '');
+  const iconClass = `dtable-ui-multicolor-icon multicolor-icon-${symbol} ${className || ''}`;
   const props = {
     className: iconClass,
     style: {
@@ -30,6 +31,8 @@ const SvgIcon = _ref => {
   };
   const IconComponent = iconComponents[symbol];
   if (!IconComponent) return null;
-  return /*#__PURE__*/_react.default.createElement(IconComponent, props);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
+    ...props
+  });
 };
 var _default = exports.default = SvgIcon;

package/lib/TabBar/Tab.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _Badge = _interopRequireDefault(require("../Badge"));
+var _jsxRuntime = require("react/jsx-runtime");
 class Tab extends React.PureComponent {
   constructor() {
     super(...arguments);
@@ -22,22 +23,24 @@ class Tab extends React.PureComponent {
         prefixCls
       } = this.props;
       const iconRes = selected ? selectedIcon : icon;
-      const iconDom = /*#__PURE__*/React.isValidElement(iconRes) ? iconRes : /*#__PURE__*/React.createElement("img", {
-        className: "".concat(prefixCls, "-image"),
+      const iconDom = /*#__PURE__*/React.isValidElement(iconRes) ? iconRes : /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        className: `${prefixCls}-image`,
         src: iconRes ? iconRes.uri : iconRes,
         alt: title
       });
       if (badge) {
-        return /*#__PURE__*/React.createElement(_Badge.default, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Badge.default, {
           text: badge,
-          className: "".concat(prefixCls, "-badge tab-badge")
-        }, ' ', iconDom, ' ');
+          className: `${prefixCls}-badge tab-badge`,
+          children: [' ', iconDom, ' ']
+        });
       }
       if (dot) {
-        return /*#__PURE__*/React.createElement(_Badge.default, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
           dot: true,
-          className: "".concat(prefixCls, "-badge tab-dot")
-        }, iconDom);
+          className: `${prefixCls}-badge tab-dot`,
+          children: iconDom
+        });
       }
       return iconDom;
     };
@@ -57,20 +60,24 @@ class Tab extends React.PureComponent {
       tintColor
     } = this.props;
     const iconColor = selected ? tintColor : unselectedTintColor;
-    return /*#__PURE__*/React.createElement("div", Object.assign({}, this.props.dataAttrs, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      ...this.props.dataAttrs,
       onClick: this.onClick,
-      className: "".concat(prefixCls)
-    }), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-icon"),
-      style: {
-        color: iconColor
-      }
-    }, this.renderIcon()), /*#__PURE__*/React.createElement("p", {
-      className: "".concat(prefixCls, "-title"),
-      style: {
-        color: selected ? tintColor : unselectedTintColor
-      }
-    }, title));
+      className: `${prefixCls}`,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: `${prefixCls}-icon`,
+        style: {
+          color: iconColor
+        },
+        children: this.renderIcon()
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        className: `${prefixCls}-title`,
+        style: {
+          color: selected ? tintColor : unselectedTintColor
+        },
+        children: title
+      })]
+    });
   }
 }
 var _default = exports.default = Tab;

package/lib/TabBar/index.js

@@ -11,16 +11,18 @@ var _getDataAttr = _interopRequireDefault(require("../utils/getDataAttr"));
 var _Tabs = _interopRequireDefault(require("../Tabs"));
 var _Tab = _interopRequireDefault(require("./Tab"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class Item extends React.Component {
   render() {
     const {
       prefixCls,
       style
     } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: prefixCls,
-      style: style
-    }, this.props.children);
+      style: style,
+      children: this.props.children
+    });
   }
 }
 exports.Item = Item;
@@ -53,9 +55,8 @@ class AntTabBar extends React.Component {
       } = this.props;
       const tabsData = this.getTabs();
       const content = Array.isArray(tabsData) ? tabsData.map((cProps, index) => {
-        return /*#__PURE__*/React.createElement(_Tab.default, {
-          key: index,
-          prefixCls: "".concat(this.props.prefixCls, "-tab"),
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tab.default, {
+          prefixCls: `${this.props.prefixCls}-tab`,
           badge: cProps.badge,
           dot: cProps.dot,
           selected: cProps.selected,
@@ -66,18 +67,19 @@ class AntTabBar extends React.Component {
           unselectedTintColor: unselectedTintColor,
           dataAttrs: (0, _getDataAttr.default)(cProps),
           onClick: () => cProps.onPress && cProps.onPress()
-        });
+        }, index);
       }) : null;
-      let cls = "".concat(prefixCls, "-bar");
+      let cls = `${prefixCls}-bar`;
       if (hidden) {
-        cls += " ".concat(prefixCls, "-bar-hidden-").concat(tabBarPosition);
+        cls += ` ${prefixCls}-bar-hidden-${tabBarPosition}`;
       }
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: cls,
         style: {
           backgroundColor: barTintColor
-        }
-      }, content);
+        },
+        children: content
+      });
     };
   }
   render() {
@@ -99,18 +101,20 @@ class AntTabBar extends React.Component {
         }
       });
     }
-    return /*#__PURE__*/React.createElement("div", {
-      className: prefixCls
-    }, /*#__PURE__*/React.createElement(_Tabs.default, {
-      tabs: tabs,
-      renderTabBar: this.renderTabBar,
-      tabBarPosition: tabBarPosition,
-      page: activeIndex < 0 ? undefined : activeIndex,
-      animated: animated,
-      swipeable: swipeable,
-      noRenderContent: noRenderContent,
-      prerenderingSiblingsNumber: prerenderingSiblingsNumber
-    }, children));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: prefixCls,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tabs.default, {
+        tabs: tabs,
+        renderTabBar: this.renderTabBar,
+        tabBarPosition: tabBarPosition,
+        page: activeIndex < 0 ? undefined : activeIndex,
+        animated: animated,
+        swipeable: swipeable,
+        noRenderContent: noRenderContent,
+        prerenderingSiblingsNumber: prerenderingSiblingsNumber,
+        children: children
+      })
+    });
   }
 }
 AntTabBar.defaultProps = {

package/lib/Tabs/index.js

@@ -8,6 +8,7 @@ exports.default = exports.DefaultTabBar = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _rmcTabs = require("rmc-tabs");
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class DefaultTabBar extends _rmcTabs.DefaultTabBar {}
 exports.DefaultTabBar = DefaultTabBar;
 DefaultTabBar.defaultProps = {
@@ -21,15 +22,17 @@ class Tabs extends React.PureComponent {
       const {
         renderTab
       } = this.props;
-      return /*#__PURE__*/React.createElement(DefaultTabBar, Object.assign({}, props, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(DefaultTabBar, {
+        ...props,
         renderTab: renderTab
-      }));
+      });
     };
   }
   render() {
-    return /*#__PURE__*/React.createElement(_rmcTabs.Tabs, Object.assign({
-      renderTabBar: this.renderTabBar
-    }, this.props));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_rmcTabs.Tabs, {
+      renderTabBar: this.renderTabBar,
+      ...this.props
+    });
   }
 }
 exports.default = Tabs;

package/lib/TextEditor/index.js

@@ -11,6 +11,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _utils = require("../utils/utils");
 var _constants = require("../constants");
 var _cellComparer = require("../utils/cell-comparer");
+var _jsxRuntime = require("react/jsx-runtime");
 class TextEditor extends _react.Component {
   constructor(props) {
     super(props);
@@ -128,24 +129,26 @@ class TextEditor extends _react.Component {
     const {
       value
     } = this.state;
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", {
-      type: "text",
-      className: (0, _classnames.default)('form-control', className),
-      ref: this.setInputRef,
-      placeholder: placeholder || '',
-      onBlur: this.onBlur,
-      onCut: this.onCut,
-      onPaste: this.onPaste,
-      value: value,
-      name: column.name,
-      title: column.name,
-      "aria-label": column.name,
-      onChange: this.onChange,
-      onKeyDown: this.onInputKeyDown,
-      onClick: this.onClick,
-      onCompositionStart: this.onCompositionStart,
-      onCompositionEnd: this.onCompositionEnd
-    }));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+        type: "text",
+        className: (0, _classnames.default)('form-control', className),
+        ref: this.setInputRef,
+        placeholder: placeholder || '',
+        onBlur: this.onBlur,
+        onCut: this.onCut,
+        onPaste: this.onPaste,
+        value: value,
+        name: column.name,
+        title: column.name,
+        "aria-label": column.name,
+        onChange: this.onChange,
+        onKeyDown: this.onInputKeyDown,
+        onClick: this.onClick,
+        onCompositionStart: this.onCompositionStart,
+        onCompositionEnd: this.onCompositionEnd
+      })
+    });
   }
 }
 var _default = exports.default = TextEditor;

package/lib/TextFormatter/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 TextFormatter extends _react.default.Component {
   constructor() {
     super(...arguments);
@@ -28,10 +29,11 @@ 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__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: classname,
-      title: formattedValue
-    }, formattedValue);
+      title: formattedValue,
+      children: formattedValue
+    });
   }
 }
 var _default = exports.default = TextFormatter;

package/lib/TextareaItem/index.js

@@ -11,6 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _rmcFeedback = _interopRequireDefault(require("rmc-feedback"));
 var _exenv = require("../utils/exenv");
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 /* tslint:disable:jsx-no-multiline-js */
 
 function noop() {}
@@ -34,7 +35,7 @@ class TextareaItem extends React.Component {
     this.reAlignHeight = () => {
       const textareaDom = this.textareaRef;
       textareaDom.style.height = ''; // 字数减少时能自动减小高度
-      textareaDom.style.height = "".concat(textareaDom.scrollHeight, "px");
+      textareaDom.style.height = `${textareaDom.scrollHeight}px`;
     };
     this.onChange = e => {
       const value = e.target.value;
@@ -157,20 +158,20 @@ class TextareaItem extends React.Component {
       focus
     } = this.state;
     const hasCount = count > 0 && this.props.rows > 1;
-    const wrapCls = (0, _classnames.default)(className, "".concat(prefixListCls, "-item"), "".concat(prefixCls, "-item"), {
-      ["".concat(prefixCls, "-disabled")]: disabled,
-      ["".concat(prefixCls, "-item-single-line")]: this.props.rows === 1 && !autoHeight,
-      ["".concat(prefixCls, "-error")]: error,
-      ["".concat(prefixCls, "-focus")]: focus,
-      ["".concat(prefixCls, "-has-count")]: hasCount
+    const wrapCls = (0, _classnames.default)(className, `${prefixListCls}-item`, `${prefixCls}-item`, {
+      [`${prefixCls}-disabled`]: disabled,
+      [`${prefixCls}-item-single-line`]: this.props.rows === 1 && !autoHeight,
+      [`${prefixCls}-error`]: error,
+      [`${prefixCls}-focus`]: focus,
+      [`${prefixCls}-has-count`]: hasCount
     });
-    const labelCls = (0, _classnames.default)("".concat(prefixCls, "-label"), {
-      ["".concat(prefixCls, "-label-2")]: labelNumber === 2,
-      ["".concat(prefixCls, "-label-3")]: labelNumber === 3,
-      ["".concat(prefixCls, "-label-4")]: labelNumber === 4,
-      ["".concat(prefixCls, "-label-5")]: labelNumber === 5,
-      ["".concat(prefixCls, "-label-6")]: labelNumber === 6,
-      ["".concat(prefixCls, "-label-7")]: labelNumber === 7
+    const labelCls = (0, _classnames.default)(`${prefixCls}-label`, {
+      [`${prefixCls}-label-2`]: labelNumber === 2,
+      [`${prefixCls}-label-3`]: labelNumber === 3,
+      [`${prefixCls}-label-4`]: labelNumber === 4,
+      [`${prefixCls}-label-5`]: labelNumber === 5,
+      [`${prefixCls}-label-6`]: labelNumber === 6,
+      [`${prefixCls}-label-7`]: labelNumber === 7
     });
     const characterLength = countSymbols(value);
     const lengthCtrlProps = {};
@@ -184,32 +185,40 @@ class TextareaItem extends React.Component {
         lengthCtrlProps.maxLength = count - characterLength + (value ? value.length : 0);
       }
     }
-    return /*#__PURE__*/React.createElement("div", {
-      className: wrapCls
-    }, title && /*#__PURE__*/React.createElement("div", {
-      className: labelCls
-    }, title), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-control")
-    }, /*#__PURE__*/React.createElement("textarea", Object.assign({
-      ref: el => this.textareaRef = el
-    }, lengthCtrlProps, otherProps, {
-      value: value,
-      onChange: this.onChange,
-      onBlur: this.onBlur,
-      onFocus: this.onFocus,
-      readOnly: !editable,
-      style: style
-    }))), clear && editable && value && characterLength > 0 && /*#__PURE__*/React.createElement(_rmcFeedback.default, {
-      activeClassName: "".concat(prefixCls, "-clear-active")
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-clear"),
-      onClick: this.clearInput
-    })), error && /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-error-extra"),
-      onClick: this.onErrorClick
-    }), hasCount && /*#__PURE__*/React.createElement("span", {
-      className: "".concat(prefixCls, "-count")
-    }, /*#__PURE__*/React.createElement("span", null, value ? characterLength : 0), "/", count));
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: wrapCls,
+      children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: labelCls,
+        children: title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: `${prefixCls}-control`,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", {
+          ref: el => this.textareaRef = el,
+          ...lengthCtrlProps,
+          ...otherProps,
+          value: value,
+          onChange: this.onChange,
+          onBlur: this.onBlur,
+          onFocus: this.onFocus,
+          readOnly: !editable,
+          style: style
+        })
+      }), clear && editable && value && characterLength > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_rmcFeedback.default, {
+        activeClassName: `${prefixCls}-clear-active`,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: `${prefixCls}-clear`,
+          onClick: this.clearInput
+        })
+      }), error && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: `${prefixCls}-error-extra`,
+        onClick: this.onErrorClick
+      }), hasCount && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+        className: `${prefixCls}-count`,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: value ? characterLength : 0
+        }), "/", count]
+      })]
+    });
   }
 }
 exports.default = TextareaItem;