@douyinfe/semi-ui 2.27.0 → 2.27.1-alpha.1

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

@@ -133,7 +133,8 @@ function withField(Component, opts) {
     const [status, setStatus] = (0, _react.useState)(validateStatus); // use props.validateStatus to init
 
     const rulesRef = (0, _react.useRef)(rules);
-    const validateRef = (0, _react.useRef)(validate); // notNotify is true means that the onChange of the Form does not need to be triggered
+    const validateRef = (0, _react.useRef)(validate);
+    const validatePromise = (0, _react.useRef)(null); // notNotify is true means that the onChange of the Form does not need to be triggered
     // notUpdate is true means that this operation does not need to trigger the forceUpdate
 
     const updateTouched = (isTouched, callOpts) => {
@@ -187,16 +188,24 @@ function withField(Component, opts) {
       const model = {
         [field]: val
       };
-      return new Promise((resolve, reject) => {
+      const rootPromise = new Promise((resolve, reject) => {
         validator.validate(model, {
           first: stopValidateWithError
         }, // eslint-disable-next-line @typescript-eslint/no-empty-function
         (errors, fields) => {}).then(res => {
-          // validation passed
+          if (validatePromise.current !== rootPromise) {
+            return;
+          } // validation passed
+
+
           setStatus('success');
           updateError(undefined, callOpts);
           resolve({});
         }).catch(err => {
+          if (validatePromise.current !== rootPromise) {
+            return;
+          }
+
           let {
             errors,
             fields
@@ -225,44 +234,55 @@ function withField(Component, opts) {
           }
         });
       });
+      validatePromise.current = rootPromise;
+      return rootPromise;
     }; // execute custom validate function
 
 
-    const _validate = (val, values, callOpts) => new Promise(resolve => {
-      let maybePromisedErrors; // let errorThrowSync;
+    const _validate = (val, values, callOpts) => {
+      const rootPromise = new Promise(resolve => {
+        let maybePromisedErrors; // let errorThrowSync;
 
-      try {
-        maybePromisedErrors = validateRef.current(val, values);
-      } catch (err) {
-        // error throw by syncValidate
-        maybePromisedErrors = err;
-      }
+        try {
+          maybePromisedErrors = validateRef.current(val, values);
+        } catch (err) {
+          // error throw by syncValidate
+          maybePromisedErrors = err;
+        }
+
+        if (maybePromisedErrors === undefined) {
+          resolve({});
+          updateError(undefined, callOpts);
+        } else if ((0, _isPromise.default)(maybePromisedErrors)) {
+          maybePromisedErrors.then(result => {
+            // If the async validate is outdated (a newer validate occurs), the result should be discarded
+            if (validatePromise.current !== rootPromise) {
+              return;
+            }
 
-      if (maybePromisedErrors === undefined) {
-        resolve({});
-        updateError(undefined, callOpts);
-      } else if ((0, _isPromise.default)(maybePromisedErrors)) {
-        maybePromisedErrors.then(result => {
-          if ((0, _utils.isValid)(result)) {
-            // validate success，no need to do anything with result
+            if ((0, _utils.isValid)(result)) {
+              // validate success，no need to do anything with result
+              updateError(undefined, callOpts);
+              resolve(null);
+            } else {
+              // validate failed
+              updateError(result, callOpts);
+              resolve(result);
+            }
+          });
+        } else {
+          if ((0, _utils.isValid)(maybePromisedErrors)) {
             updateError(undefined, callOpts);
             resolve(null);
           } else {
-            // validate failed
-            updateError(result, callOpts);
-            resolve(result);
+            updateError(maybePromisedErrors, callOpts);
+            resolve(maybePromisedErrors);
           }
-        });
-      } else {
-        if ((0, _utils.isValid)(maybePromisedErrors)) {
-          updateError(undefined, callOpts);
-          resolve(null);
-        } else {
-          updateError(maybePromisedErrors, callOpts);
-          resolve(maybePromisedErrors);
         }
-      }
-    });
+      });
+      validatePromise.current = rootPromise;
+      return rootPromise;
+    };
 
     const fieldValidate = (val, callOpts) => {
       let finalVal = val;
@@ -427,18 +447,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 = (0, _classnames.default)("".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 = (0, _classnames.default)(`${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.default.createElement("div", {
         className: extraCls,
@@ -463,11 +483,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') {
@@ -476,12 +496,12 @@ function withField(Component, opts) {
       }
 
       const fieldCls = (0, _classnames.default)({
-        ["".concat(prefix, "-field")]: true,
-        ["".concat(prefix, "-field-").concat(name)]: Boolean(name),
+        [`${prefix}-field`]: true,
+        [`${prefix}-field-${name}`]: Boolean(name),
         [fieldClassName]: Boolean(fieldClassName)
       });
       const fieldMaincls = (0, _classnames.default)({
-        ["".concat(prefix, "-field-main")]: true
+        [`${prefix}-field-main`]: true
       });
 
       if (mergeLabelPos === 'inset' && !noLabel) {
@@ -503,8 +523,8 @@ function withField(Component, opts) {
 
       if (pure) {
         let pureCls = (0, _classnames.default)(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;
@@ -512,7 +532,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/cjs/form/label.js

@@ -40,12 +40,12 @@ class Label extends _react.PureComponent {
       optional
     } = this.props;
     const labelCls = (0, _classnames.default)(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;
@@ -53,16 +53,16 @@ class Label extends _react.PureComponent {
     const optionalText = /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
       componentName: "Form"
     }, locale => /*#__PURE__*/_react.default.createElement("span", {
-      className: "".concat(prefixCls, "-field-label-optional-text")
+      className: `${prefixCls}-field-label-optional-text`
     }, locale.optional));
 
     const textContent = /*#__PURE__*/_react.default.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.default.createElement(_react.default.Fragment, null, textContent, /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-field-label-extra")
+      className: `${prefixCls}-field-label-extra`
     }, extra));
 
     return /*#__PURE__*/_react.default.createElement("label", {

package/lib/cjs/form/slot.js

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

package/lib/cjs/grid/col.js

@@ -53,7 +53,7 @@ class Col extends _react.default.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 = {};
 
@@ -65,19 +65,19 @@ class Col extends _react.default.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 = (0, _classnames.default)(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/cjs/grid/row.js

@@ -132,12 +132,12 @@ class Row extends _react.default.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 = (0, _classnames.default)({
       [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/cjs/highlight/index.js

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

package/lib/cjs/iconButton/index.js

@@ -86,8 +86,8 @@ class IconButton extends _react.PureComponent {
     }
 
     const btnTextCls = (0, _classnames.default)({
-      ["".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.default.createElement("span", {
@@ -101,9 +101,9 @@ class IconButton extends _react.PureComponent {
       finalChildren = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children, IconElem);
     }
 
-    const iconBtnCls = (0, _classnames.default)(className, "".concat(prefixCls, "-with-icon"), {
-      ["".concat(prefixCls, "-with-icon-only")]: children == null || children === '',
-      ["".concat(prefixCls, "-loading")]: loading
+    const iconBtnCls = (0, _classnames.default)(className, `${prefixCls}-with-icon`, {
+      [`${prefixCls}-with-icon-only`]: children == null || children === '',
+      [`${prefixCls}-loading`]: loading
     });
     return /*#__PURE__*/_react.default.createElement(_Button.default, Object.assign({}, otherProps, {
       className: iconBtnCls,

package/lib/cjs/image/image.js

@@ -88,7 +88,7 @@ class Image extends _baseComponent.default {
     };
 
     this.renderDefaultError = () => {
-      const prefixClsName = "".concat(prefixCls, "-status");
+      const prefixClsName = `${prefixCls}-status`;
       return /*#__PURE__*/_react.default.createElement("div", {
         className: prefixClsName
       }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconUploadError, {
@@ -97,7 +97,7 @@ class Image extends _baseComponent.default {
     };
 
     this.renderLoad = () => {
-      const prefixClsName = "".concat(prefixCls, "-status");
+      const prefixClsName = `${prefixCls}-status`;
       const {
         placeholder
       } = this.props;
@@ -110,7 +110,7 @@ class Image extends _baseComponent.default {
       const {
         fallback
       } = this.props;
-      const prefixClsName = "".concat(prefixCls, "-status");
+      const prefixClsName = `${prefixCls}-status`;
       const fallbackNode = typeof fallback === "string" ? /*#__PURE__*/_react.default.createElement("img", {
         style: {
           width: "100%",
@@ -129,7 +129,7 @@ class Image extends _baseComponent.default {
         loadStatus
       } = this.state;
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(prefixCls, "-overlay")
+        className: `${prefixCls}-overlay`
       }, loadStatus === "error" && this.renderError(), loadStatus === "loading" && this.renderLoad());
     };
 
@@ -138,13 +138,13 @@ class Image extends _baseComponent.default {
     }, locale => locale[key]);
 
     this.renderMask = () => /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-mask")
+      className: `${prefixCls}-mask`
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-mask-info")
+      className: `${prefixCls}-mask-info`
     }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconEyeOpened, {
       size: "extra-large"
     }), /*#__PURE__*/_react.default.createElement("span", {
-      className: "".concat(prefixCls, "-mask-info-text")
+      className: `${prefixCls}-mask-info-text`
     }, this.getLocalTextByKey("preview"))));
 
     this.state = {
@@ -240,9 +240,9 @@ class Image extends _baseComponent.default {
         src: this.isInGroup() && this.isLazyLoad() ? undefined : src,
         "data-src": src,
         alt: alt,
-        className: (0, _classnames.default)("".concat(prefixCls, "-img"), {
-          ["".concat(prefixCls, "-img-preview")]: showPreviewCursor,
-          ["".concat(prefixCls, "-img-error")]: loadStatus === "error"
+        className: (0, _classnames.default)(`${prefixCls}-img`, {
+          [`${prefixCls}-img-preview`]: showPreviewCursor,
+          [`${prefixCls}-img-error`]: loadStatus === "error"
         }),
         width: width,
         height: height,

package/lib/cjs/image/preview.js

@@ -122,7 +122,7 @@ class Preview extends _baseComponent.default {
     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 => {
@@ -136,7 +136,7 @@ class Preview extends _baseComponent.default {
         }
       });
     }, {
-      root: document.querySelector("#".concat(this.previewGroupId)),
+      root: document.querySelector(`#${this.previewGroupId}`),
       rootMargin: lazyLoadMargin
     });
     allElement.forEach(item => observer.observe(item));
@@ -190,7 +190,7 @@ class Preview extends _baseComponent.default {
     }, /*#__PURE__*/_react.default.createElement("div", {
       id: this.previewGroupId,
       style: style,
-      className: "".concat(prefixCls, "-preview-group")
+      className: `${prefixCls}-preview-group`
     }, newChildren), /*#__PURE__*/_react.default.createElement(_previewInner.default, Object.assign({}, restProps, {
       ref: this.previewRef,
       src: finalSrcList,

package/lib/cjs/image/previewFooter.js

@@ -32,7 +32,7 @@ var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer")
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const prefixCls = _constants.cssClasses.PREFIX;
-const footerPrefixCls = "".concat(_constants.cssClasses.PREFIX, "-preview-footer");
+const footerPrefixCls = `${_constants.cssClasses.PREFIX}-preview-footer`;
 let mouseActiveTime = 0;
 
 class Footer extends _baseComponent.default {
@@ -133,7 +133,7 @@ class Footer extends _baseComponent.default {
 
       const icon = /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronLeft, {
         size: "large",
-        className: disabledPrev ? "".concat(footerPrefixCls, "-disabled") : "",
+        className: disabledPrev ? `${footerPrefixCls}-disabled` : "",
         onClick: !disabledPrev ? onPrev : undefined
       });
 
@@ -150,7 +150,7 @@ class Footer extends _baseComponent.default {
 
       const icon = /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronRight, {
         size: "large",
-        className: disabledNext ? "".concat(footerPrefixCls, "-disabled") : "",
+        className: disabledNext ? `${footerPrefixCls}-disabled` : "",
         onClick: !disabledNext ? onNext : undefined
       });
 
@@ -169,7 +169,7 @@ class Footer extends _baseComponent.default {
       const icon = /*#__PURE__*/_react.default.createElement(_semiIcons.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");
@@ -187,7 +187,7 @@ class Footer extends _baseComponent.default {
       const icon = /*#__PURE__*/_react.default.createElement(_semiIcons.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");
@@ -202,7 +202,7 @@ class Footer extends _baseComponent.default {
       } = this.props;
       const props = {
         size: "large",
-        className: (0, _classnames.default)("".concat(footerPrefixCls, "-gap")),
+        className: (0, _classnames.default)(`${footerPrefixCls}-gap`),
         onClick: this.handleRatioClick
       };
       const icon = ratio === "adaptation" ? /*#__PURE__*/_react.default.createElement(_semiIcons.IconRealSizeStroked, Object.assign({}, props)) : /*#__PURE__*/_react.default.createElement(_semiIcons.IconWindowAdaptionStroked, Object.assign({}, props));
@@ -241,8 +241,8 @@ class Footer extends _baseComponent.default {
       const icon = /*#__PURE__*/_react.default.createElement(_semiIcons.IconDownload, {
         size: "large",
         onClick: !disableDownload ? onDownload : undefined,
-        className: (0, _classnames.default)("".concat(footerPrefixCls, "-gap"), {
-          ["".concat(footerPrefixCls, "-disabled")]: disableDownload
+        className: (0, _classnames.default)(`${footerPrefixCls}-gap`, {
+          [`${footerPrefixCls}-disabled`]: disableDownload
         })
       });
 
@@ -276,14 +276,14 @@ class Footer extends _baseComponent.default {
 
     if (renderPreviewMenu) {
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(footerPrefixCls, "-wrapper")
+        className: `${footerPrefixCls}-wrapper`
       }, this.customRenderViewMenu());
     }
 
     return /*#__PURE__*/_react.default.createElement("section", {
-      className: (0, _classnames.default)(footerPrefixCls, "".concat(footerPrefixCls, "-wrapper"), className)
+      className: (0, _classnames.default)(footerPrefixCls, `${footerPrefixCls}-wrapper`, className)
     }, this.getIconChevronLeft(), /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(footerPrefixCls, "-page")
+      className: `${footerPrefixCls}-page`
     }, /*#__PURE__*/_react.default.createElement("span", null, curPage), /*#__PURE__*/_react.default.createElement("span", null, "/"), /*#__PURE__*/_react.default.createElement("span", null, totalNum)), this.getIconChevronRight(), /*#__PURE__*/_react.default.createElement(_divider.default, {
       layout: "vertical"
     }), this.getIconMinus(), /*#__PURE__*/_react.default.createElement(_slider.default, {
@@ -291,7 +291,7 @@ class Footer extends _baseComponent.default {
       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.default.createElement(_divider.default, {

package/lib/cjs/image/previewHeader.js

@@ -21,7 +21,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const prefixCls = "".concat(_constants.cssClasses.PREFIX, "-preview-header");
+const prefixCls = `${_constants.cssClasses.PREFIX}-preview-header`;
 
 const Header = _ref => {
   let {
@@ -44,10 +44,10 @@ const Header = _ref => {
     return /*#__PURE__*/React.createElement("section", {
       className: (0, _classnames.default)(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(_semiIcons.IconClose, null)));
   });

package/lib/cjs/image/previewImage.js

@@ -20,7 +20,7 @@ var _previewImageFoundation = _interopRequireDefault(require("@douyinfe/semi-fou
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const prefixCls = _constants.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
@@ -201,20 +201,20 @@ class PreviewImage extends _baseComponent.default {
     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.default.createElement("div", {
-      className: "".concat(preViewImgPrefixCls),
+      className: `${preViewImgPrefixCls}`,
       ref: this.containerRef
     }, /*#__PURE__*/_react.default.createElement("img", {
       ref: this.registryImageRef,
       src: src,
       alt: "previewImag",
-      className: "".concat(preViewImgPrefixCls, "-img"),
+      className: `${preViewImgPrefixCls}-img`,
       key: src,
       onMouseMove: this.handleMoveImage,
       onMouseDown: this.onImageMouseDown,
@@ -227,7 +227,7 @@ class PreviewImage extends _baseComponent.default {
       crossOrigin: crossOrigin
     }), loading && /*#__PURE__*/_react.default.createElement(_spin.default, {
       size: "large",
-      wrapperClassName: "".concat(preViewImgPrefixCls, "-spin")
+      wrapperClassName: `${preViewImgPrefixCls}-spin`
     }));
   }