@douyinfe/semi-ui 2.25.2 → 2.25.4

package/lib/es/empty/index.js

@@ -75,14 +75,14 @@ export default class Empty extends BaseComponent {
       imageNode = /*#__PURE__*/React.createElement("svg", {
         "aria-hidden": "true"
       }, /*#__PURE__*/React.createElement("use", {
-        xlinkHref: "#".concat(imgSrc.id)
+        xlinkHref: `#${imgSrc.id}`
       }));
     } else {
       imageNode = imgSrc;
     }
 
     const wrapperCls = cls(className, prefixCls, {
-      ["".concat(prefixCls, "-").concat(layout)]: layout
+      [`${prefixCls}-${layout}`]: layout
     });
     const titleProps = imageNode ? {
       heading: 4
@@ -96,19 +96,19 @@ export default class Empty extends BaseComponent {
       className: wrapperCls,
       style: style
     }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-image"),
+      className: `${prefixCls}-image`,
       style: imageStyle,
       "x-semi-prop": "image,darkModeImage"
     }, imageNode), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-content")
+      className: `${prefixCls}-content`
     }, title ? /*#__PURE__*/React.createElement(Typography.Title, Object.assign({}, titleProps, {
-      className: "".concat(prefixCls, "-title"),
+      className: `${prefixCls}-title`,
       "x-semi-prop": "title"
     }), title) : null, description ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-description"),
+      className: `${prefixCls}-description`,
       "x-semi-prop": "description"
     }, description) : null, children ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-footer"),
+      className: `${prefixCls}-footer`,
       "x-semi-prop": "children"
     }, children) : null));
   }

package/lib/es/form/arrayField.js

@@ -195,7 +195,7 @@ class ArrayFieldComponent extends Component {
     const arrayFields = keys.map((key, i) => ({
       // key: i,
       key,
-      field: "".concat(field, "[").concat(i, "]"),
+      field: `${field}[${i}]`,
       remove: () => this.remove(i)
     }));
     const {

package/lib/es/form/baseForm.d.ts

@@ -135,7 +135,7 @@ declare class Form<Values extends Record<string, any> = any> extends BaseCompone
         preventScroll?: boolean;
         showRestTagsPopover?: boolean;
         restTagsPopoverProps?: import("../popover").PopoverProps;
-    } & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "motion" | "getPopupContainer" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay"> & React.RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
+    } & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "getPopupContainer" | "motion" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay"> & React.RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
     static Checkbox: React.ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../checkbox").CheckboxProps & import("./interface").RCIncludeType>;
     static CheckboxGroup: React.ComponentType<import("utility-types").Subtract<import("../checkbox").CheckboxGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & React.RefAttributes<any>>;
     static Radio: React.ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../radio").RadioProps & import("./interface").RCIncludeType>;

package/lib/es/form/baseForm.js

@@ -105,9 +105,9 @@ class Form extends BaseComponent {
         const {
           formId
         } = this.state;
-        return document.querySelectorAll("form[x-form-id=\"".concat(formId, "\"] .").concat(cssClasses.PREFIX, "-field-error-message"));
+        return document.querySelectorAll(`form[x-form-id="${formId}"] .${cssClasses.PREFIX}-field-error-message`);
       },
-      getFieldDOM: field => document.querySelector(".".concat(cssClasses.PREFIX, "-field[x-field-id=\"").concat(field, "\"]"))
+      getFieldDOM: field => document.querySelector(`.${cssClasses.PREFIX}-field[x-field-id="${field}"]`)
     });
   }
 

package/lib/es/form/errorMessage.js

@@ -58,7 +58,7 @@ export default class ErrorMessage extends PureComponent {
       error: /*#__PURE__*/React.createElement(IconAlertCircle, null)
     };
     const text = error ? this.generatorText(error) : this.generatorText(helpText);
-    const iconCls = "".concat(prefix, "-field-validate-status-icon");
+    const iconCls = `${prefix}-field-validate-status-icon`;
     let icon = null;
 
     if (isInInputGroup) {

package/lib/es/form/field.d.ts

@@ -83,7 +83,7 @@ declare const FormSelect: import("react").ComponentType<import("utility-types").
     preventScroll?: boolean;
     showRestTagsPopover?: boolean;
     restTagsPopoverProps?: import("../popover").PopoverProps;
-} & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "motion" | "getPopupContainer" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay"> & import("react").RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
+} & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "getPopupContainer" | "motion" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay"> & import("react").RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
 declare const FormCheckboxGroup: import("react").ComponentType<import("utility-types").Subtract<import("../checkbox/checkboxGroup").CheckboxGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & import("react").RefAttributes<any>>;
 declare const FormCheckbox: import("react").ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../checkbox/checkbox").CheckboxProps & import("./interface").RCIncludeType>;
 declare const FormRadioGroup: import("react").ComponentType<import("utility-types").Subtract<import("../radio/radioGroup").RadioGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & import("react").RefAttributes<any>>;

package/lib/es/form/group.js

@@ -89,13 +89,13 @@ class FormInputGroup extends Component {
       return null;
     });
     const groupCls = classNames({
-      ["".concat(prefix, "-field-group")]: true
+      [`${prefix}-field-group`]: true
     });
     const labelCol = formProps.labelCol;
     const wrapperCol = formProps.wrapperCol;
     const labelAlign = formProps.labelAlign;
     const appendCol = labelCol && wrapperCol;
-    const labelColCls = labelCol ? "".concat(prefix, "-col-").concat(labelAlign) : '';
+    const labelColCls = labelCol ? `${prefix}-col-${labelAlign}` : '';
     const labelContent = this.renderLabel(label, formProps);
     const inputGroupContent = /*#__PURE__*/React.createElement(InputGroup, Object.assign({}, rest), inner);
     const groupErrorContent = /*#__PURE__*/React.createElement(GroupError, {

package/lib/es/form/hoc/withField.js

@@ -402,18 +402,18 @@ function withField(Component, opts) {
     let mergeExtraPos = extraTextPosition || formProps.extraTextPosition || 'bottom'; // id attribute to improve a11y
 
     const a11yId = id ? id : field;
-    const labelId = "".concat(a11yId, "-label");
-    const helpTextId = "".concat(a11yId, "-helpText");
-    const extraTextId = "".concat(a11yId, "-extraText");
-    const errorMessageId = "".concat(a11yId, "-errormessage");
+    const labelId = `${a11yId}-label`;
+    const helpTextId = `${a11yId}-helpText`;
+    const extraTextId = `${a11yId}-extraText`;
+    const errorMessageId = `${a11yId}-errormessage`;
 
     const FieldComponent = () => {
       // prefer to use validateStatus which pass by user throught props
       let blockStatus = validateStatus ? validateStatus : status;
-      const extraCls = classNames("".concat(prefix, "-field-extra"), {
-        ["".concat(prefix, "-field-extra-string")]: typeof extraText === 'string',
-        ["".concat(prefix, "-field-extra-middle")]: mergeExtraPos === 'middle',
-        ["".concat(prefix, "-field-extra-bottom")]: mergeExtraPos === 'bottom'
+      const extraCls = classNames(`${prefix}-field-extra`, {
+        [`${prefix}-field-extra-string`]: typeof extraText === 'string',
+        [`${prefix}-field-extra-middle`]: mergeExtraPos === 'middle',
+        [`${prefix}-field-extra-bottom`]: mergeExtraPos === 'bottom'
       });
       const extraContent = extraText ? /*#__PURE__*/React.createElement("div", {
         className: extraCls,
@@ -438,11 +438,11 @@ function withField(Component, opts) {
       }
 
       if (helpText) {
-        newProps['aria-describedby'] = extraText ? "".concat(helpTextId, " ").concat(extraTextId) : helpTextId;
+        newProps['aria-describedby'] = extraText ? `${helpTextId} ${extraTextId}` : helpTextId;
       }
 
       if (extraText) {
-        newProps['aria-describedby'] = helpText ? "".concat(helpTextId, " ").concat(extraTextId) : extraTextId;
+        newProps['aria-describedby'] = helpText ? `${helpTextId} ${extraTextId}` : extraTextId;
       }
 
       if (status === 'error') {
@@ -451,12 +451,12 @@ function withField(Component, opts) {
       }
 
       const fieldCls = classNames({
-        ["".concat(prefix, "-field")]: true,
-        ["".concat(prefix, "-field-").concat(name)]: Boolean(name),
+        [`${prefix}-field`]: true,
+        [`${prefix}-field-${name}`]: Boolean(name),
         [fieldClassName]: Boolean(fieldClassName)
       });
       const fieldMaincls = classNames({
-        ["".concat(prefix, "-field-main")]: true
+        [`${prefix}-field-main`]: true
       });
 
       if (mergeLabelPos === 'inset' && !noLabel) {
@@ -477,8 +477,8 @@ function withField(Component, opts) {
 
       if (pure) {
         let pureCls = classNames(rest.className, {
-          ["".concat(prefix, "-field-pure")]: true,
-          ["".concat(prefix, "-field-").concat(name)]: Boolean(name),
+          [`${prefix}-field-pure`]: true,
+          [`${prefix}-field-${name}`]: Boolean(name),
           [fieldClassName]: Boolean(fieldClassName)
         });
         newProps.className = pureCls;
@@ -486,7 +486,7 @@ function withField(Component, opts) {
       }
 
       let withCol = mergeLabelCol && mergeWrapperCol;
-      const labelColCls = mergeLabelAlign ? "".concat(prefix, "-col-").concat(mergeLabelAlign) : ''; // get label
+      const labelColCls = mergeLabelAlign ? `${prefix}-col-${mergeLabelAlign}` : ''; // get label
 
       let labelContent = null;
 

package/lib/es/form/label.js

@@ -21,26 +21,26 @@ export default class Label extends PureComponent {
       optional
     } = this.props;
     const labelCls = classNames(className, {
-      ["".concat(prefixCls, "-field-label")]: true,
-      ["".concat(prefixCls, "-field-label-left")]: align === 'left',
-      ["".concat(prefixCls, "-field-label-right")]: align === 'right',
-      ["".concat(prefixCls, "-field-label-required")]: required,
-      ["".concat(prefixCls, "-field-label-disabled")]: disabled,
-      ["".concat(prefixCls, "-field-label-with-extra")]: extra
+      [`${prefixCls}-field-label`]: true,
+      [`${prefixCls}-field-label-left`]: align === 'left',
+      [`${prefixCls}-field-label-right`]: align === 'right',
+      [`${prefixCls}-field-label-required`]: required,
+      [`${prefixCls}-field-label-disabled`]: disabled,
+      [`${prefixCls}-field-label-with-extra`]: extra
     });
     const labelStyle = style ? style : {};
     width ? labelStyle.width = width : null;
     const optionalText = /*#__PURE__*/React.createElement(LocaleConsumer, {
       componentName: "Form"
     }, locale => /*#__PURE__*/React.createElement("span", {
-      className: "".concat(prefixCls, "-field-label-optional-text")
+      className: `${prefixCls}-field-label-optional-text`
     }, locale.optional));
     const textContent = /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-field-label-text"),
+      className: `${prefixCls}-field-label-text`,
       "x-semi-prop": "label"
     }, typeof text !== 'undefined' ? text : children, optional ? optionalText : null);
     const contentWithExtra = /*#__PURE__*/React.createElement(React.Fragment, null, textContent, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-field-label-extra")
+      className: `${prefixCls}-field-label-extra`
     }, extra));
     return /*#__PURE__*/React.createElement("label", {
       className: labelCls,

package/lib/es/form/slot.js

@@ -53,11 +53,11 @@ const FormSlot = props => {
 
   const appendCol = labelCol && wrapperCol;
   const slotCls = classNames({
-    ["".concat(prefix, "-field")]: true,
-    ["".concat(prefix, "-slot")]: true
+    [`${prefix}-field`]: true,
+    [`${prefix}-slot`]: true
   }, className);
   const labelColCls = classNames({
-    ["".concat(prefix, "-col-").concat(labelAlign)]: true
+    [`${prefix}-col-${labelAlign}`]: true
   });
 
   switch (true) {
@@ -118,8 +118,8 @@ const FormSlot = props => {
     width: labelWidth
   }, label);
   let mainCls = classNames({
-    ["".concat(prefix, "-field-main")]: true,
-    ["".concat(prefix, "-slot-main")]: true
+    [`${prefix}-field-main`]: true,
+    [`${prefix}-slot-main`]: true
   });
 
   switch (true) {

package/lib/es/grid/col.js

@@ -39,7 +39,7 @@ class Col extends React.Component {
           others = __rest(props, ["prefixCls", "span", "order", "offset", "push", "pull", "className", "children"]);
 
     let sizeClassObj = {};
-    const prefix = "".concat(prefixCls, "-col");
+    const prefix = `${prefixCls}-col`;
     ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].forEach(size => {
       let sizeProps = {};
 
@@ -51,19 +51,19 @@ class Col extends React.Component {
 
       delete others[size];
       sizeClassObj = Object.assign(Object.assign({}, sizeClassObj), {
-        ["".concat(prefix, "-").concat(size, "-").concat(sizeProps.span)]: sizeProps.span !== undefined,
-        ["".concat(prefix, "-").concat(size, "-order-").concat(sizeProps.order)]: sizeProps.order || sizeProps.order === 0,
-        ["".concat(prefix, "-").concat(size, "-offset-").concat(sizeProps.offset)]: sizeProps.offset || sizeProps.offset === 0,
-        ["".concat(prefix, "-").concat(size, "-push-").concat(sizeProps.push)]: sizeProps.push || sizeProps.push === 0,
-        ["".concat(prefix, "-").concat(size, "-pull-").concat(sizeProps.pull)]: sizeProps.pull || sizeProps.pull === 0
+        [`${prefix}-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
+        [`${prefix}-${size}-order-${sizeProps.order}`]: sizeProps.order || sizeProps.order === 0,
+        [`${prefix}-${size}-offset-${sizeProps.offset}`]: sizeProps.offset || sizeProps.offset === 0,
+        [`${prefix}-${size}-push-${sizeProps.push}`]: sizeProps.push || sizeProps.push === 0,
+        [`${prefix}-${size}-pull-${sizeProps.pull}`]: sizeProps.pull || sizeProps.pull === 0
       });
     });
     const classes = classnames(prefix, {
-      ["".concat(prefix, "-").concat(span)]: span !== undefined,
-      ["".concat(prefix, "-order-").concat(order)]: order,
-      ["".concat(prefix, "-offset-").concat(offset)]: offset,
-      ["".concat(prefix, "-push-").concat(push)]: push,
-      ["".concat(prefix, "-pull-").concat(pull)]: pull
+      [`${prefix}-${span}`]: span !== undefined,
+      [`${prefix}-order-${order}`]: order,
+      [`${prefix}-offset-${offset}`]: offset,
+      [`${prefix}-push-${push}`]: push,
+      [`${prefix}-pull-${pull}`]: pull
     }, className, sizeClassObj);
     let {
       style

package/lib/es/grid/row.js

@@ -114,12 +114,12 @@ class Row extends React.Component {
           others = __rest(_a, ["prefixCls", "type", "justify", "align", "className", "style", "children"]);
 
     const gutters = this.getGutter();
-    const prefix = "".concat(prefixCls, "-row");
+    const prefix = `${prefixCls}-row`;
     const classes = classnames({
       [prefix]: type !== 'flex',
-      ["".concat(prefix, "-").concat(type)]: type,
-      ["".concat(prefix, "-").concat(type, "-").concat(justify)]: type && justify,
-      ["".concat(prefix, "-").concat(type, "-").concat(align)]: type && align
+      [`${prefix}-${type}`]: type,
+      [`${prefix}-${type}-${justify}`]: type && justify,
+      [`${prefix}-${type}-${align}`]: type && align
     }, className);
     const rowStyle = Object.assign(Object.assign(Object.assign({}, gutters[0] > 0 ? {
       marginLeft: gutters[0] / -2,

package/lib/es/highlight/index.js

@@ -18,7 +18,7 @@ class Highlight extends PureComponent {
       autoEscape
     } = this.props;
     const tagCls = cls({
-      ["".concat(prefixCls, "-tag")]: true
+      [`${prefixCls}-tag`]: true
     }, highlightClassName);
     const option = {
       highlightTag: component,

package/lib/es/iconButton/index.js

@@ -65,8 +65,8 @@ class IconButton extends PureComponent {
     }
 
     const btnTextCls = classNames({
-      ["".concat(prefixCls, "-content-left")]: iconPosition === 'right',
-      ["".concat(prefixCls, "-content-right")]: iconPosition === 'left'
+      [`${prefixCls}-content-left`]: iconPosition === 'right',
+      [`${prefixCls}-content-right`]: iconPosition === 'left'
     });
     const xSemiProp = this.props['x-semi-children-alias'] || 'children';
     const children = originChildren != null ? /*#__PURE__*/React.createElement("span", {
@@ -80,9 +80,9 @@ class IconButton extends PureComponent {
       finalChildren = /*#__PURE__*/React.createElement(React.Fragment, null, children, IconElem);
     }
 
-    const iconBtnCls = classNames(className, "".concat(prefixCls, "-with-icon"), {
-      ["".concat(prefixCls, "-with-icon-only")]: children == null || children === '',
-      ["".concat(prefixCls, "-loading")]: loading
+    const iconBtnCls = classNames(className, `${prefixCls}-with-icon`, {
+      [`${prefixCls}-with-icon-only`]: children == null || children === '',
+      [`${prefixCls}-loading`]: loading
     });
     return /*#__PURE__*/React.createElement(Button, Object.assign({}, otherProps, {
       className: iconBtnCls,

package/lib/es/image/image.js

@@ -64,7 +64,7 @@ export default class Image extends BaseComponent {
     };
 
     this.renderDefaultError = () => {
-      const prefixClsName = "".concat(prefixCls, "-status");
+      const prefixClsName = `${prefixCls}-status`;
       return /*#__PURE__*/React.createElement("div", {
         className: prefixClsName
       }, /*#__PURE__*/React.createElement(IconUploadError, {
@@ -73,7 +73,7 @@ export default class Image extends BaseComponent {
     };
 
     this.renderLoad = () => {
-      const prefixClsName = "".concat(prefixCls, "-status");
+      const prefixClsName = `${prefixCls}-status`;
       const {
         placeholder
       } = this.props;
@@ -86,7 +86,7 @@ export default class Image extends BaseComponent {
       const {
         fallback
       } = this.props;
-      const prefixClsName = "".concat(prefixCls, "-status");
+      const prefixClsName = `${prefixCls}-status`;
       const fallbackNode = typeof fallback === "string" ? /*#__PURE__*/React.createElement("img", {
         style: {
           width: "100%",
@@ -105,7 +105,7 @@ export default class Image extends BaseComponent {
         loadStatus
       } = this.state;
       return /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-overlay")
+        className: `${prefixCls}-overlay`
       }, loadStatus === "error" && this.renderError(), loadStatus === "loading" && this.renderLoad());
     };
 
@@ -114,13 +114,13 @@ export default class Image extends BaseComponent {
     }, locale => locale[key]);
 
     this.renderMask = () => /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-mask")
+      className: `${prefixCls}-mask`
     }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-mask-info")
+      className: `${prefixCls}-mask-info`
     }, /*#__PURE__*/React.createElement(IconEyeOpened, {
       size: "extra-large"
     }), /*#__PURE__*/React.createElement("span", {
-      className: "".concat(prefixCls, "-mask-info-text")
+      className: `${prefixCls}-mask-info-text`
     }, this.getLocalTextByKey("preview"))));
 
     this.state = {
@@ -216,9 +216,9 @@ export default class Image extends BaseComponent {
         src: this.isInGroup() && this.isLazyLoad() ? undefined : src,
         "data-src": src,
         alt: alt,
-        className: cls("".concat(prefixCls, "-img"), {
-          ["".concat(prefixCls, "-img-preview")]: showPreviewCursor,
-          ["".concat(prefixCls, "-img-error")]: loadStatus === "error"
+        className: cls(`${prefixCls}-img`, {
+          [`${prefixCls}-img-preview`]: showPreviewCursor,
+          [`${prefixCls}-img-error`]: loadStatus === "error"
         }),
         width: width,
         height: height,

package/lib/es/image/preview.js

@@ -103,7 +103,7 @@ export default class Preview extends BaseComponent {
     const {
       lazyLoadMargin
     } = this.props;
-    const allElement = document.querySelectorAll(".".concat(prefixCls, "-img")); // use IntersectionObserver to lazy load image
+    const allElement = document.querySelectorAll(`.${prefixCls}-img`); // use IntersectionObserver to lazy load image
 
     const observer = new IntersectionObserver(entries => {
       entries.forEach(item => {
@@ -117,7 +117,7 @@ export default class Preview extends BaseComponent {
         }
       });
     }, {
-      root: document.querySelector("#".concat(this.previewGroupId)),
+      root: document.querySelector(`#${this.previewGroupId}`),
       rootMargin: lazyLoadMargin
     });
     allElement.forEach(item => observer.observe(item));
@@ -171,7 +171,7 @@ export default class Preview extends BaseComponent {
     }, /*#__PURE__*/React.createElement("div", {
       id: this.previewGroupId,
       style: style,
-      className: "".concat(prefixCls, "-preview-group")
+      className: `${prefixCls}-preview-group`
     }, newChildren), /*#__PURE__*/React.createElement(PreviewInner, Object.assign({}, restProps, {
       ref: this.previewRef,
       src: finalSrcList,

package/lib/es/image/previewFooter.js

@@ -11,7 +11,7 @@ import cls from "classnames";
 import PreviewFooterFoundation from '@douyinfe/semi-foundation/lib/es/image/previewFooterFoundation';
 import LocaleConsumer from "../locale/localeConsumer";
 const prefixCls = cssClasses.PREFIX;
-const footerPrefixCls = "".concat(cssClasses.PREFIX, "-preview-footer");
+const footerPrefixCls = `${cssClasses.PREFIX}-preview-footer`;
 let mouseActiveTime = 0;
 export default class Footer extends BaseComponent {
   constructor(props) {
@@ -110,7 +110,7 @@ export default class Footer extends BaseComponent {
       } = this.props;
       const icon = /*#__PURE__*/React.createElement(IconChevronLeft, {
         size: "large",
-        className: disabledPrev ? "".concat(footerPrefixCls, "-disabled") : "",
+        className: disabledPrev ? `${footerPrefixCls}-disabled` : "",
         onClick: !disabledPrev ? onPrev : undefined
       });
       const content = prevTip !== null && prevTip !== void 0 ? prevTip : this.getLocalTextByKey("prevTip");
@@ -125,7 +125,7 @@ export default class Footer extends BaseComponent {
       } = this.props;
       const icon = /*#__PURE__*/React.createElement(IconChevronRight, {
         size: "large",
-        className: disabledNext ? "".concat(footerPrefixCls, "-disabled") : "",
+        className: disabledNext ? `${footerPrefixCls}-disabled` : "",
         onClick: !disabledNext ? onNext : undefined
       });
       const content = nextTip !== null && nextTip !== void 0 ? nextTip : this.getLocalTextByKey("nextTip");
@@ -142,7 +142,7 @@ export default class Footer extends BaseComponent {
       const icon = /*#__PURE__*/React.createElement(IconMinus, {
         size: "large",
         onClick: !disabledZoomOut ? this.handleMinusClick : undefined,
-        className: disabledZoomOut ? "".concat(footerPrefixCls, "-disabled") : ""
+        className: disabledZoomOut ? `${footerPrefixCls}-disabled` : ""
       });
       const content = zoomOutTip !== null && zoomOutTip !== void 0 ? zoomOutTip : this.getLocalTextByKey("zoomOutTip");
       return this.getFinalIconElement(icon, content);
@@ -158,7 +158,7 @@ export default class Footer extends BaseComponent {
       const icon = /*#__PURE__*/React.createElement(IconPlus, {
         size: "large",
         onClick: !disabledZoomIn ? this.handlePlusClick : undefined,
-        className: disabledZoomIn ? "".concat(footerPrefixCls, "-disabled") : ""
+        className: disabledZoomIn ? `${footerPrefixCls}-disabled` : ""
       });
       const content = zoomInTip !== null && zoomInTip !== void 0 ? zoomInTip : this.getLocalTextByKey("zoomInTip");
       return this.getFinalIconElement(icon, content);
@@ -172,7 +172,7 @@ export default class Footer extends BaseComponent {
       } = this.props;
       const props = {
         size: "large",
-        className: cls("".concat(footerPrefixCls, "-gap")),
+        className: cls(`${footerPrefixCls}-gap`),
         onClick: this.handleRatioClick
       };
       const icon = ratio === "adaptation" ? /*#__PURE__*/React.createElement(IconRealSizeStroked, Object.assign({}, props)) : /*#__PURE__*/React.createElement(IconWindowAdaptionStroked, Object.assign({}, props));
@@ -208,8 +208,8 @@ export default class Footer extends BaseComponent {
       const icon = /*#__PURE__*/React.createElement(IconDownload, {
         size: "large",
         onClick: !disableDownload ? onDownload : undefined,
-        className: cls("".concat(footerPrefixCls, "-gap"), {
-          ["".concat(footerPrefixCls, "-disabled")]: disableDownload
+        className: cls(`${footerPrefixCls}-gap`, {
+          [`${footerPrefixCls}-disabled`]: disableDownload
         })
       });
       const content = downloadTip !== null && downloadTip !== void 0 ? downloadTip : this.getLocalTextByKey("downloadTip");
@@ -242,14 +242,14 @@ export default class Footer extends BaseComponent {
 
     if (renderPreviewMenu) {
       return /*#__PURE__*/React.createElement("div", {
-        className: "".concat(footerPrefixCls, "-wrapper")
+        className: `${footerPrefixCls}-wrapper`
       }, this.customRenderViewMenu());
     }
 
     return /*#__PURE__*/React.createElement("section", {
-      className: cls(footerPrefixCls, "".concat(footerPrefixCls, "-wrapper"), className)
+      className: cls(footerPrefixCls, `${footerPrefixCls}-wrapper`, className)
     }, this.getIconChevronLeft(), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(footerPrefixCls, "-page")
+      className: `${footerPrefixCls}-page`
     }, /*#__PURE__*/React.createElement("span", null, curPage), /*#__PURE__*/React.createElement("span", null, "/"), /*#__PURE__*/React.createElement("span", null, totalNum)), this.getIconChevronRight(), /*#__PURE__*/React.createElement(Divider, {
       layout: "vertical"
     }), this.getIconMinus(), /*#__PURE__*/React.createElement(Slider, {
@@ -257,7 +257,7 @@ export default class Footer extends BaseComponent {
       min: min,
       max: max,
       step: step,
-      tipFormatter: v => "".concat(v, "%"),
+      tipFormatter: v => `${v}%`,
       tooltipVisible: showTooltip ? undefined : false,
       onChange: this.handleSlideChange
     }), this.getIconPlus(), this.getIconRatio(), /*#__PURE__*/React.createElement(Divider, {

package/lib/es/image/previewHeader.js

@@ -3,7 +3,7 @@ import { IconClose } from "@douyinfe/semi-icons";
 import { cssClasses } from '@douyinfe/semi-foundation/lib/es/image/constants';
 import cls from "classnames";
 import { PreviewContext } from "./previewContext";
-const prefixCls = "".concat(cssClasses.PREFIX, "-preview-header");
+const prefixCls = `${cssClasses.PREFIX}-preview-header`;
 
 const Header = _ref => {
   let {
@@ -26,10 +26,10 @@ const Header = _ref => {
     return /*#__PURE__*/React.createElement("section", {
       className: cls(prefixCls, className)
     }, /*#__PURE__*/React.createElement("section", {
-      className: "".concat(prefixCls, "-title"),
+      className: `${prefixCls}-title`,
       style: titleStyle
     }, renderHeader ? renderHeader(title) : title), /*#__PURE__*/React.createElement("section", {
-      className: "".concat(prefixCls, "-close"),
+      className: `${prefixCls}-close`,
       onMouseUp: onClose
     }, /*#__PURE__*/React.createElement(IconClose, null)));
   });

package/lib/es/image/previewImage.js

@@ -5,7 +5,7 @@ import PropTypes from "prop-types";
 import Spin from "../spin";
 import PreviewImageFoundation from '@douyinfe/semi-foundation/lib/es/image/previewImageFoundation';
 const prefixCls = cssClasses.PREFIX;
-const preViewImgPrefixCls = "".concat(prefixCls, "-preview-image");
+const preViewImgPrefixCls = `${prefixCls}-preview-image`;
 let originImageWidth = null;
 let originImageHeight = null;
 let startMouseMove = false; // startMouseOffset：The offset of the mouse relative to the left and top of the picture
@@ -185,20 +185,20 @@ export default class PreviewImage extends BaseComponent {
     const imgStyle = {
       position: "absolute",
       visibility: loading ? "hidden" : "visible",
-      transform: "rotate(".concat(-rotation, "deg)"),
+      transform: `rotate(${-rotation}deg)`,
       top,
       left,
-      width: loading ? "auto" : "".concat(width, "px"),
-      height: loading ? "auto" : "".concat(height, "px")
+      width: loading ? "auto" : `${width}px`,
+      height: loading ? "auto" : `${height}px`
     };
     return /*#__PURE__*/React.createElement("div", {
-      className: "".concat(preViewImgPrefixCls),
+      className: `${preViewImgPrefixCls}`,
       ref: this.containerRef
     }, /*#__PURE__*/React.createElement("img", {
       ref: this.registryImageRef,
       src: src,
       alt: "previewImag",
-      className: "".concat(preViewImgPrefixCls, "-img"),
+      className: `${preViewImgPrefixCls}-img`,
       key: src,
       onMouseMove: this.handleMoveImage,
       onMouseDown: this.onImageMouseDown,
@@ -211,7 +211,7 @@ export default class PreviewImage extends BaseComponent {
       crossOrigin: crossOrigin
     }), loading && /*#__PURE__*/React.createElement(Spin, {
       size: "large",
-      wrapperClassName: "".concat(preViewImgPrefixCls, "-spin")
+      wrapperClassName: `${preViewImgPrefixCls}-spin`
     }));
   }