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

package/lib/es/dropdown/index.js

@@ -85,7 +85,7 @@ class Dropdown extends BaseComponent {
       className: className,
       style: style
     }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-content"),
+      className: `${prefixCls}-content`,
       "x-semi-prop": "render"
     }, content)));
   }
@@ -158,7 +158,7 @@ class Dropdown extends BaseComponent {
       className: className,
       style: style
     }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-content")
+      className: `${prefixCls}-content`
     }, render)));
   }
 
@@ -212,7 +212,7 @@ class Dropdown extends BaseComponent {
     }, attr), /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, {
       //@ts-ignore
       className: classnames(_get(children, 'props.className'), {
-        ["".concat(prefixCls, "-showing")]: popVisible
+        [`${prefixCls}-showing`]: popVisible
       }),
       'aria-haspopup': true,
       'aria-expanded': popVisible,

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.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/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

@@ -108,7 +108,8 @@ function withField(Component, opts) {
     const [status, setStatus] = useState(validateStatus); // use props.validateStatus to init
 
     const rulesRef = useRef(rules);
-    const validateRef = useRef(validate); // notNotify is true means that the onChange of the Form does not need to be triggered
+    const validateRef = useRef(validate);
+    const validatePromise = 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) => {
@@ -162,16 +163,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
@@ -200,44 +209,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 (isPromise(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 (isPromise(maybePromisedErrors)) {
-        maybePromisedErrors.then(result => {
-          if (isValid(result)) {
-            // validate success，no need to do anything with result
+            if (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 (isValid(maybePromisedErrors)) {
             updateError(undefined, callOpts);
             resolve(null);
           } else {
-            // validate failed
-            updateError(result, callOpts);
-            resolve(result);
+            updateError(maybePromisedErrors, callOpts);
+            resolve(maybePromisedErrors);
           }
-        });
-      } else {
-        if (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;
@@ -402,18 +422,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 +458,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 +471,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 +497,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 +506,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,