dtable-ui-component 7.0.13 → 7.0.15

package/lib/RowExpandView/index.js

@@ -6,9 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _dtableUtils = require("dtable-utils");
@@ -20,47 +17,34 @@ var _cellComparer = require("../utils/cell-comparer");
 var _MobileFullScreenPage = _interopRequireDefault(require("../MobileFullScreenPage"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["saveImmediately", "readonly", "isInsertingRow", "zIndex", "title", "className", "valueKey", "row", "columns", "commit", "onToggle", "uploadFile", "copyURL", "children", "historyCallback"];
-const Header = _MobileFullScreenPage.default.Header,
-  MobileFullScreenPageBody = _MobileFullScreenPage.default.Body;
+const {
+  Header,
+  Body: MobileFullScreenPageBody
+} = _MobileFullScreenPage.default;
 const RowExpandView = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let _ref$saveImmediately = _ref.saveImmediately,
-    saveImmediately = _ref$saveImmediately === void 0 ? true : _ref$saveImmediately,
-    _ref$readonly = _ref.readonly,
-    readonly = _ref$readonly === void 0 ? false : _ref$readonly,
-    _ref$isInsertingRow = _ref.isInsertingRow,
-    isInsertingRow = _ref$isInsertingRow === void 0 ? false : _ref$isInsertingRow,
-    zIndex = _ref.zIndex,
-    title = _ref.title,
-    className = _ref.className,
-    _ref$valueKey = _ref.valueKey,
-    valueKey = _ref$valueKey === void 0 ? 'name' : _ref$valueKey,
-    defaultRow = _ref.row,
-    defaultColumns = _ref.columns,
-    commit = _ref.commit,
-    onToggle = _ref.onToggle,
-    uploadFile = _ref.uploadFile,
-    copyURL = _ref.copyURL,
-    _ref$children = _ref.children,
-    children = _ref$children === void 0 ? [] : _ref$children,
-    historyCallback = _ref.historyCallback,
-    otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  const _useState = (0, _react.useState)(true),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isLoading = _useState2[0],
-    setLoading = _useState2[1];
-  const _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    isSaving = _useState4[0],
-    setSaving = _useState4[1];
-  const _useState5 = (0, _react.useState)({}),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    row = _useState6[0],
-    setRow = _useState6[1];
-  const _useState7 = (0, _react.useState)([]),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    columns = _useState8[0],
-    setColumns = _useState8[1];
+  let {
+    saveImmediately = true,
+    readonly = false,
+    isInsertingRow = false,
+    zIndex,
+    title,
+    className,
+    valueKey = 'name',
+    // name or key
+    row: defaultRow,
+    columns: defaultColumns,
+    commit,
+    onToggle,
+    uploadFile,
+    copyURL,
+    children = [],
+    historyCallback,
+    ...otherProps
+  } = _ref;
+  const [isLoading, setLoading] = (0, _react.useState)(true);
+  const [isSaving, setSaving] = (0, _react.useState)(false);
+  const [row, setRow] = (0, _react.useState)({});
+  const [columns, setColumns] = (0, _react.useState)([]);
   const isChangedRef = (0, _react.useRef)(false);
   const update = (0, _react.useRef)({});
   const checkEditable = (0, _react.useCallback)(column => {
@@ -72,7 +56,8 @@ const RowExpandView = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const initRowData = (0, _react.useCallback)(() => {
     setLoading(true);
     setRow(defaultRow);
-    let validColumns = defaultColumns.map(c => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, c), {}, {
+    let validColumns = defaultColumns.map(c => ({
+      ...c,
       editable: checkEditable(c, defaultRow),
       width: 320
     }));
@@ -88,9 +73,10 @@ const RowExpandView = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     onToggle();
   }, [isSaving, onToggle]);
   const onSave = (0, _react.useCallback)(function (updated) {
-    let _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      successCallback = _ref2.successCallback,
-      failCallback = _ref2.failCallback;
+    let {
+      successCallback,
+      failCallback
+    } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     commit(updated, columns, {
       successCallback,
       failCallback
@@ -105,15 +91,24 @@ const RowExpandView = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     if (!(0, _cellComparer.isCellValueChanged)(oldValue, value, column.type)) return;
     if (!saveImmediately || isInsertingRow) {
       isChangedRef.current = true;
-      update.current = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, update.current), updated);
-      setRow((0, _objectSpread2.default)((0, _objectSpread2.default)({}, row), updated));
+      update.current = {
+        ...update.current,
+        ...updated
+      };
+      setRow({
+        ...row,
+        ...updated
+      });
       return;
     }
     onSave(updated, {
       successCallback: () => {
         isChangedRef.current = false;
         update.current = {};
-        setRow((0, _objectSpread2.default)((0, _objectSpread2.default)({}, row), updated));
+        setRow({
+          ...row,
+          ...updated
+        });
       },
       failCallback: () => {
         _toaster.default.danger((0, _lang.getLocale)('Save_failed'));
@@ -131,7 +126,10 @@ const RowExpandView = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       setSaving(false);
       _toaster.default.danger((0, _lang.getLocale)('Save_failed'));
     };
-    const newRow = isInsertingRow ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, row), update.current) : update.current;
+    const newRow = isInsertingRow ? {
+      ...row,
+      ...update.current
+    } : update.current;
     onSave(newRow, {
       successCallback,
       failCallback
@@ -176,13 +174,14 @@ const RowExpandView = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       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, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, otherProps), {}, {
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_body.default, {
+        ...otherProps,
         row: row,
         columns: columns,
         valueKey: valueKey,
         onChange: onChange,
         uploadFile: uploadFile
-      }))
+      })
     })]
   });
 });

package/lib/SelectItem/index.js

@@ -11,11 +11,13 @@ var _classnames = _interopRequireDefault(require("classnames"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 const SelectItem = _ref => {
-  let option = _ref.option,
-    fontSize = _ref.fontSize,
-    className = _ref.className,
-    isShowRemove = _ref.isShowRemove,
-    onRemove = _ref.onRemove;
+  let {
+    option,
+    fontSize,
+    className,
+    isShowRemove,
+    onRemove
+  } = _ref;
   const selectItemStyle = (0, _react.useMemo)(() => {
     return {
       fontSize: fontSize || 13,

package/lib/SelectOptionGroup/index.js

@@ -19,12 +19,14 @@ class SelectOptionGroup extends _react.Component {
   constructor(props) {
     super(props);
     this.resetMenuStyle = () => {
-      const _this$props = this.props,
-        isInModal = _this$props.isInModal,
-        position = _this$props.position;
-      const _this$optionGroupRef$ = this.optionGroupRef.getBoundingClientRect(),
-        top = _this$optionGroupRef$.top,
-        height = _this$optionGroupRef$.height;
+      const {
+        isInModal,
+        position
+      } = this.props;
+      const {
+        top,
+        height
+      } = this.optionGroupRef.getBoundingClientRect();
       if (isInModal) {
         if (position.y + position.height + height > window.innerHeight) {
           this.optionGroupRef.style.top = position.y - height + 'px';
@@ -75,7 +77,9 @@ class SelectOptionGroup extends _react.Component {
       }
     };
     this.onMouseDown = e => {
-      const isInModal = this.props.isInModal;
+      const {
+        isInModal
+      } = this.props;
       // prevent event propagation when click option or search input
       if (isInModal) {
         e.stopPropagation();
@@ -87,9 +91,10 @@ class SelectOptionGroup extends _react.Component {
       }
     };
     this.scrollContent = () => {
-      const _this$optionGroupCont = this.optionGroupContentRef,
-        offsetHeight = _this$optionGroupCont.offsetHeight,
-        scrollTop = _this$optionGroupCont.scrollTop;
+      const {
+        offsetHeight,
+        scrollTop
+      } = this.optionGroupContentRef;
       this.setState({
         disableHover: true
       });
@@ -129,10 +134,11 @@ class SelectOptionGroup extends _react.Component {
       });
     };
     this.renderOptGroup = searchVal => {
-      let _this$props2 = this.props,
-        noOptionsPlaceholder = _this$props2.noOptionsPlaceholder,
-        onSelectOption = _this$props2.onSelectOption,
-        value = _this$props2.value;
+      let {
+        noOptionsPlaceholder,
+        onSelectOption,
+        value
+      } = this.props;
       this.filterOptions = this.props.getFilterOptions(searchVal);
       if (this.filterOptions.length === 0) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -190,22 +196,26 @@ class SelectOptionGroup extends _react.Component {
     window.removeEventListener('keydown', this.onHotKey);
   }
   render() {
-    const _this$props3 = this.props,
-      searchable = _this$props3.searchable,
-      searchPlaceholder = _this$props3.searchPlaceholder,
-      top = _this$props3.top,
-      left = _this$props3.left,
-      minWidth = _this$props3.minWidth,
-      value = _this$props3.value,
-      isShowSelected = _this$props3.isShowSelected,
-      isInModal = _this$props3.isInModal,
-      position = _this$props3.position,
-      className = _this$props3.className,
-      addOptionAble = _this$props3.addOptionAble,
-      component = _this$props3.component;
-    const _ref = component || {},
-      AddOption = _ref.AddOption;
-    let searchVal = this.state.searchVal;
+    const {
+      searchable,
+      searchPlaceholder,
+      top,
+      left,
+      minWidth,
+      value,
+      isShowSelected,
+      isInModal,
+      position,
+      className,
+      addOptionAble,
+      component
+    } = this.props;
+    const {
+      AddOption
+    } = component || {};
+    let {
+      searchVal
+    } = this.state;
     let style = {
       top: top || 0,
       left: left || 0

package/lib/SelectedDepartments/index.js

@@ -12,12 +12,12 @@ var _lang = require("../lang");
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 function SelectedDepartments(_ref) {
-  let value = _ref.value,
-    removeDepartment = _ref.removeDepartment,
-    _ref$isShowRemoveIcon = _ref.isShowRemoveIcon,
-    isShowRemoveIcon = _ref$isShowRemoveIcon === void 0 ? false : _ref$isShowRemoveIcon,
-    _ref$departments = _ref.departments,
-    departments = _ref$departments === void 0 ? [] : _ref$departments;
+  let {
+    value,
+    removeDepartment,
+    isShowRemoveIcon = false,
+    departments = []
+  } = _ref;
   const idDepartmentMap = (0, _react.useMemo)(() => {
     let idDepartmentMap = {};
     departments.forEach(department => {
@@ -36,11 +36,13 @@ function SelectedDepartments(_ref) {
           "aria-label": name,
           children: name
         })
-      }, "department-".concat(index));
+      }, `department-${index}`);
     }
     const department = idDepartmentMap[content];
     if (department) {
-      const name = department.name;
+      const {
+        name
+      } = department;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "department mr-1",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -63,7 +65,7 @@ function SelectedDepartments(_ref) {
             })
           })
         })]
-      }, "department-".concat(index));
+      }, `department-${index}`);
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "department empty-department mr-1",
@@ -85,7 +87,7 @@ function SelectedDepartments(_ref) {
           })
         })
       })]
-    }, "department-".concat(index));
+    }, `department-${index}`);
   }) : null;
   return dom;
 }

package/lib/SimpleLongTextFormatter/index.js

@@ -31,8 +31,8 @@ class SimpleLongTextFormatter extends _react.default.Component {
       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)]
+          className: `dtable-font dtable-icon-check-square-solid ${checkList.completed === checkList.total ? 'long-text-check-list-completed' : ''}`
+        }), `${checkList.completed}/${checkList.total}`]
       });
     };
     this.renderImages = value => {
@@ -56,17 +56,20 @@ class SimpleLongTextFormatter extends _react.default.Component {
       });
     };
     this.translateValue = () => {
-      const value = this.props.value;
+      const {
+        value
+      } = this.props;
       if (!value) return {};
       const valueType = Object.prototype.toString.call(value);
       if (valueType === '[object String]') {
         const isMarkdown = true;
         const previewTextNeedSlice = false;
-        const _getPreviewContent = (0, _seafileEditor.getPreviewContent)(value, isMarkdown, previewTextNeedSlice),
-          previewText = _getPreviewContent.previewText,
-          images = _getPreviewContent.images,
-          links = _getPreviewContent.links,
-          checklist = _getPreviewContent.checklist;
+        const {
+          previewText,
+          images,
+          links,
+          checklist
+        } = (0, _seafileEditor.getPreviewContent)(value, isMarkdown, previewTextNeedSlice);
         const newValue = Object.assign({}, {
           text: value,
           preview: previewText,
@@ -139,10 +142,13 @@ class SimpleLongTextFormatter extends _react.default.Component {
     this.clearClosePreviewTimer();
   }
   render() {
-    const isPreview = this.state.isPreview;
-    const _this$props = this.props,
-      containerClassName = _this$props.containerClassName,
-      previewClassName = _this$props.previewClassName;
+    const {
+      isPreview
+    } = this.state;
+    const {
+      containerClassName,
+      previewClassName
+    } = this.props;
     const className = (0, _classnames.default)('dtable-ui cell-formatter-container long-text-formatter', containerClassName);
     const value = this.translateValue();
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {

package/lib/SimpleLongTextFormatter/normalize-long-text-value.js

@@ -46,9 +46,10 @@ const getPreviewContent = markdownContent => {
   }
   const hrefList = markdownContent.match(hrefReg);
   if (hrefList) {
-    const _getLinks = getLinks(hrefList),
-      images = _getLinks.images,
-      links = _getLinks.links;
+    const {
+      images,
+      links
+    } = getLinks(hrefList);
     return {
       preview,
       images,

package/lib/SimpleLongTextFormatter/widgets/LongTextPreview.js

@@ -14,12 +14,17 @@ class LongTextPreview extends _react.default.PureComponent {
   constructor(props) {
     super(props);
     this.getStyle = () => {
-      let formatterStyle = this.props.formatterStyle;
-      let left = formatterStyle.left,
-        top = formatterStyle.top;
-      const _this$state = this.state,
-        height = _this$state.height,
-        opacity = _this$state.opacity;
+      let {
+        formatterStyle
+      } = this.props;
+      let {
+        left,
+        top
+      } = formatterStyle;
+      const {
+        height,
+        opacity
+      } = this.state;
       const width = 520;
       const padding = 6;
       left = left - width > 0 ? left - width - 12 : 0;
@@ -48,12 +53,15 @@ class LongTextPreview extends _react.default.PureComponent {
     setTimeout(() => {
       var _value$images;
       if (!this.ref) return;
-      const value = this.props.value;
+      const {
+        value
+      } = this.props;
 
       // If image is included, sets the preview height to the maximum height
       const hasImage = (value === null || value === void 0 ? void 0 : (_value$images = value.images) === null || _value$images === void 0 ? void 0 : _value$images.length) >= 2 ? true : false;
-      let _this$ref$getBounding = this.ref.getBoundingClientRect(),
-        domHeight = _this$ref$getBounding.height;
+      let {
+        height: domHeight
+      } = this.ref.getBoundingClientRect();
       domHeight = hasImage ? 450 : domHeight;
       this.setState({
         height: Math.min(domHeight, 450),
@@ -62,9 +70,10 @@ class LongTextPreview extends _react.default.PureComponent {
     }, 10);
   }
   render() {
-    const _this$props = this.props,
-      className = _this$props.className,
-      value = _this$props.value;
+    const {
+      className,
+      value
+    } = this.props;
     const markdownContent = value ? value.text : '';
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _classnames.default)('longtext-modal-dialog longtext-preview', className),

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

@@ -51,9 +51,10 @@ class DtableMarkdownViewer extends _react.default.PureComponent {
         }
       });
     }
-    const _this$props = this.props,
-      showTOC = _this$props.showTOC,
-      markdownContent = _this$props.markdownContent;
+    const {
+      showTOC,
+      markdownContent
+    } = this.props;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_seafileEditor.MarkdownViewer, {
       value: markdownContent,
       isShowOutline: showTOC

package/lib/SingleSelectEditor/index.js

@@ -6,19 +6,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _selectEditor = _interopRequireDefault(require("../select-editor"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["value"];
 const SingleSelectEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let oldValue = _ref.value,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  let {
+    value: oldValue,
+    ...props
+  } = _ref;
   const value = oldValue ? [oldValue] : [];
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectEditor.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectEditor.default, {
+    ...props,
     value: value,
     ref: ref
-  }));
+  });
 });
 var _default = exports.default = SingleSelectEditor;

package/lib/SingleSelectFormatter/index.js

@@ -14,11 +14,11 @@ class SingleSelectFormatter extends _react.default.PureComponent {
   constructor() {
     super(...arguments);
     this.getOption = () => {
-      let _this$props = this.props,
-        value = _this$props.value,
-        _this$props$options = _this$props.options,
-        options = _this$props$options === void 0 ? [] : _this$props$options,
-        fontSize = _this$props.fontSize;
+      let {
+        value,
+        options = [],
+        fontSize
+      } = this.props;
       let option = options.find(item => item.id === value || item.name === value);
       if (option) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectItem.default, {
@@ -29,9 +29,10 @@ class SingleSelectFormatter extends _react.default.PureComponent {
     };
   }
   render() {
-    const _this$props2 = this.props,
-      containerClassName = _this$props2.containerClassName,
-      value = _this$props2.value;
+    const {
+      containerClassName,
+      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,

package/lib/TabBar/Tab.js

@@ -1,12 +1,11 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var React = _interopRequireWildcard(require("react"));
 var _Badge = _interopRequireDefault(require("../Badge"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -14,31 +13,32 @@ class Tab extends React.PureComponent {
   constructor() {
     super(...arguments);
     this.renderIcon = () => {
-      const _this$props = this.props,
-        dot = _this$props.dot,
-        badge = _this$props.badge,
-        selected = _this$props.selected,
-        selectedIcon = _this$props.selectedIcon,
-        icon = _this$props.icon,
-        title = _this$props.title,
-        prefixCls = _this$props.prefixCls;
+      const {
+        dot,
+        badge,
+        selected,
+        selectedIcon,
+        icon,
+        title,
+        prefixCls
+      } = this.props;
       const iconRes = selected ? selectedIcon : icon;
       const iconDom = /*#__PURE__*/React.isValidElement(iconRes) ? iconRes : /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-        className: "".concat(prefixCls, "-image"),
+        className: `${prefixCls}-image`,
         src: iconRes ? iconRes.uri : iconRes,
         alt: title
       });
       if (badge) {
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Badge.default, {
           text: badge,
-          className: "".concat(prefixCls, "-badge tab-badge"),
+          className: `${prefixCls}-badge tab-badge`,
           children: [' ', iconDom, ' ']
         });
       }
       if (dot) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
           dot: true,
-          className: "".concat(prefixCls, "-badge tab-dot"),
+          className: `${prefixCls}-badge tab-dot`,
           children: iconDom
         });
       }
@@ -52,30 +52,32 @@ class Tab extends React.PureComponent {
     };
   }
   render() {
-    const _this$props2 = this.props,
-      title = _this$props2.title,
-      prefixCls = _this$props2.prefixCls,
-      selected = _this$props2.selected,
-      unselectedTintColor = _this$props2.unselectedTintColor,
-      tintColor = _this$props2.tintColor;
+    const {
+      title,
+      prefixCls,
+      selected,
+      unselectedTintColor,
+      tintColor
+    } = this.props;
     const iconColor = selected ? tintColor : unselectedTintColor;
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.props.dataAttrs), {}, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      ...this.props.dataAttrs,
       onClick: this.onClick,
-      className: "".concat(prefixCls),
+      className: `${prefixCls}`,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "".concat(prefixCls, "-icon"),
+        className: `${prefixCls}-icon`,
         style: {
           color: iconColor
         },
         children: this.renderIcon()
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        className: "".concat(prefixCls, "-title"),
+        className: `${prefixCls}-title`,
         style: {
           color: selected ? tintColor : unselectedTintColor
         },
         children: title
       })]
-    }));
+    });
   }
 }
 var _default = exports.default = Tab;