@douyinfe/semi-ui 2.29.0 → 2.30.0-alpha.0

package/lib/es/dropdown/dropdownItem.js

@@ -27,12 +27,12 @@ class DropdownItem extends BaseComponent {
       showTick: contextShowTick
     } = this.context;
     const itemclass = cls(className, {
-      [`${prefixCls}-item`]: true,
-      [`${prefixCls}-item-disabled`]: disabled,
-      [`${prefixCls}-item-hover`]: hover,
-      [`${prefixCls}-item-withTick`]: contextShowTick !== null && contextShowTick !== void 0 ? contextShowTick : showTick,
-      [`${prefixCls}-item-${type}`]: type,
-      [`${prefixCls}-item-active`]: active
+      ["".concat(prefixCls, "-item")]: true,
+      ["".concat(prefixCls, "-item-disabled")]: disabled,
+      ["".concat(prefixCls, "-item-hover")]: hover,
+      ["".concat(prefixCls, "-item-withTick")]: contextShowTick !== null && contextShowTick !== void 0 ? contextShowTick : showTick,
+      ["".concat(prefixCls, "-item-").concat(type)]: type,
+      ["".concat(prefixCls, "-item-active")]: active
     });
     const events = {};
 
@@ -66,7 +66,7 @@ class DropdownItem extends BaseComponent {
 
     if (icon) {
       iconContent = /*#__PURE__*/React.createElement("div", {
-        className: `${prefixCls}-item-icon`
+        className: "".concat(prefixCls, "-item-icon")
       }, icon);
     }
 

package/lib/es/dropdown/dropdownMenu.js

@@ -41,7 +41,7 @@ class DropdownMenu extends BaseComponent {
       role: "menu",
       "aria-orientation": "vertical"
     }, rest, {
-      className: classnames(`${prefixCls}-menu`, className),
+      className: classnames("".concat(prefixCls, "-menu"), className),
       style: style,
       onKeyDown: e => this.foundation.onMenuKeydown(e)
     }), children);

package/lib/es/dropdown/dropdownTitle.js

@@ -16,8 +16,8 @@ class DropdownTitle extends PureComponent {
       showTick
     } = this.context;
     const titleCls = cls({
-      [`${prefixCls}-title`]: true,
-      [`${prefixCls}-title-withTick`]: showTick
+      ["".concat(prefixCls, "-title")]: true,
+      ["".concat(prefixCls, "-title-withTick")]: showTick
     }, className);
     return /*#__PURE__*/React.createElement("div", {
       className: titleCls,

package/lib/es/dropdown/index.d.ts

@@ -66,7 +66,7 @@ declare class Dropdown extends BaseComponent<DropdownProps, DropdownState> {
         motion: PropTypes.Requireable<NonNullable<boolean | object>>;
         onVisibleChange: PropTypes.Requireable<(...args: any[]) => any>;
         prefixCls: PropTypes.Requireable<string>;
-        position: PropTypes.Requireable<"left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">;
+        position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">;
         rePosKey: PropTypes.Requireable<NonNullable<string | number>>;
         render: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         spacing: PropTypes.Requireable<number>;

package/lib/es/dropdown/index.js

@@ -85,7 +85,7 @@ class Dropdown extends BaseComponent {
       className: className,
       style: style
     }, /*#__PURE__*/React.createElement("div", {
-      className: `${prefixCls}-content`,
+      className: "".concat(prefixCls, "-content"),
       "x-semi-prop": "render"
     }, content)));
   }
@@ -158,7 +158,7 @@ class Dropdown extends BaseComponent {
       className: className,
       style: style
     }, /*#__PURE__*/React.createElement("div", {
-      className: `${prefixCls}-content`
+      className: "".concat(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'), {
-        [`${prefixCls}-showing`]: popVisible
+        ["".concat(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: `#${imgSrc.id}`
+        xlinkHref: "#".concat(imgSrc.id)
       }));
     } else {
       imageNode = imgSrc;
     }
 
     const wrapperCls = cls(className, prefixCls, {
-      [`${prefixCls}-${layout}`]: layout
+      ["".concat(prefixCls, "-").concat(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: `${prefixCls}-image`,
+      className: "".concat(prefixCls, "-image"),
       style: imageStyle,
       "x-semi-prop": "image,darkModeImage"
     }, imageNode), /*#__PURE__*/React.createElement("div", {
-      className: `${prefixCls}-content`
+      className: "".concat(prefixCls, "-content")
     }, title ? /*#__PURE__*/React.createElement(Typography.Title, Object.assign({}, titleProps, {
-      className: `${prefixCls}-title`,
+      className: "".concat(prefixCls, "-title"),
       "x-semi-prop": "title"
     }), title) : null, description ? /*#__PURE__*/React.createElement("div", {
-      className: `${prefixCls}-description`,
+      className: "".concat(prefixCls, "-description"),
       "x-semi-prop": "description"
     }, description) : null, children ? /*#__PURE__*/React.createElement("div", {
-      className: `${prefixCls}-footer`,
+      className: "".concat(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: `${field}[${i}]`,
+      field: "".concat(field, "[").concat(i, "]"),
       remove: () => this.remove(i)
     }));
     const {

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

@@ -57,9 +57,9 @@ declare class Form<Values extends Record<string, any> = any> extends BaseCompone
     static Select: React.ComponentType<import("utility-types").Subtract<{
         'aria-describedby'?: string;
         'aria-errormessage'?: string;
-        'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling";
+        'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling";
         'aria-labelledby'?: string;
-        'aria-required'?: boolean | "false" | "true";
+        'aria-required'?: boolean | "true" | "false";
         id?: string;
         autoFocus?: boolean;
         autoClearSearchValue?: boolean;
@@ -82,7 +82,7 @@ declare class Form<Values extends Record<string, any> = any> extends BaseCompone
         expandRestTagsOnClick?: boolean;
         onDropdownVisibleChange?: (visible: boolean) => void;
         zIndex?: number;
-        position?: "left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver";
+        position?: "top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver";
         onSearch?: (value: string) => void;
         dropdownClassName?: string;
         dropdownStyle?: React.CSSProperties;
@@ -137,7 +137,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" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay" | "motion"> & 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="${formId}"] .${cssClasses.PREFIX}-field-error-message`);
+        return document.querySelectorAll("form[x-form-id=\"".concat(formId, "\"] .").concat(cssClasses.PREFIX, "-field-error-message"));
       },
-      getFieldDOM: field => document.querySelector(`.${cssClasses.PREFIX}-field[x-field-id="${field}"]`)
+      getFieldDOM: field => document.querySelector(".".concat(cssClasses.PREFIX, "-field[x-field-id=\"").concat(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 = `${prefix}-field-validate-status-icon`;
+    const iconCls = "".concat(prefix, "-field-validate-status-icon");
     let icon = null;
 
     if (isInInputGroup) {

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

@@ -5,9 +5,9 @@ declare const FormTextArea: import("react").ComponentType<import("utility-types"
 declare const FormSelect: import("react").ComponentType<import("utility-types").Subtract<{
     'aria-describedby'?: string;
     'aria-errormessage'?: string;
-    'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling";
+    'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling";
     'aria-labelledby'?: string;
-    'aria-required'?: boolean | "false" | "true";
+    'aria-required'?: boolean | "true" | "false";
     id?: string;
     autoFocus?: boolean;
     autoClearSearchValue?: boolean;
@@ -30,7 +30,7 @@ declare const FormSelect: import("react").ComponentType<import("utility-types").
     expandRestTagsOnClick?: boolean;
     onDropdownVisibleChange?: (visible: boolean) => void;
     zIndex?: number;
-    position?: "left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver";
+    position?: "top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver";
     onSearch?: (value: string) => void;
     dropdownClassName?: string;
     dropdownStyle?: import("react").CSSProperties;
@@ -85,7 +85,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" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay" | "motion"> & 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

@@ -91,13 +91,13 @@ class FormInputGroup extends Component {
       return null;
     });
     const groupCls = classNames({
-      [`${prefix}-field-group`]: true
+      ["".concat(prefix, "-field-group")]: true
     });
     const labelCol = formProps.labelCol;
     const wrapperCol = formProps.wrapperCol;
     const labelAlign = formProps.labelAlign;
     const appendCol = labelCol && wrapperCol;
-    const labelColCls = labelCol ? `${prefix}-col-${labelAlign}` : '';
+    const labelColCls = labelCol ? "".concat(prefix, "-col-").concat(labelAlign) : '';
     const labelContent = this.renderLabel(label, formProps);
     const inputGroupContent = /*#__PURE__*/React.createElement(InputGroup, Object.assign({}, rest), inner);
     const groupErrorContent = /*#__PURE__*/React.createElement(GroupError, {
@@ -105,10 +105,10 @@ class FormInputGroup extends Component {
       showValidateIcon: formProps.showValidateIcon,
       isInInputGroup: true
     });
-    const extraCls = classNames(`${prefix}-field-extra`, {
-      [`${prefix}-field-extra-string`]: typeof extraText === 'string',
-      [`${prefix}-field-extra-middle`]: extraTextPosition === 'middle',
-      [`${prefix}-field-extra-bottom`]: extraTextPosition === 'bottom'
+    const extraCls = classNames("".concat(prefix, "-field-extra"), {
+      ["".concat(prefix, "-field-extra-string")]: typeof extraText === 'string',
+      ["".concat(prefix, "-field-extra-middle")]: extraTextPosition === 'middle',
+      ["".concat(prefix, "-field-extra-bottom")]: extraTextPosition === 'bottom'
     });
     const extraContent = extraText ? /*#__PURE__*/React.createElement("div", {
       className: extraCls,

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

@@ -422,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 = `${a11yId}-label`;
-    const helpTextId = `${a11yId}-helpText`;
-    const extraTextId = `${a11yId}-extraText`;
-    const errorMessageId = `${a11yId}-errormessage`;
+    const labelId = "".concat(a11yId, "-label");
+    const helpTextId = "".concat(a11yId, "-helpText");
+    const extraTextId = "".concat(a11yId, "-extraText");
+    const errorMessageId = "".concat(a11yId, "-errormessage");
 
     const FieldComponent = () => {
       // prefer to use validateStatus which pass by user throught props
       let blockStatus = validateStatus ? validateStatus : status;
-      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 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 extraContent = extraText ? /*#__PURE__*/React.createElement("div", {
         className: extraCls,
@@ -458,11 +458,11 @@ function withField(Component, opts) {
       }
 
       if (helpText) {
-        newProps['aria-describedby'] = extraText ? `${helpTextId} ${extraTextId}` : helpTextId;
+        newProps['aria-describedby'] = extraText ? "".concat(helpTextId, " ").concat(extraTextId) : helpTextId;
       }
 
       if (extraText) {
-        newProps['aria-describedby'] = helpText ? `${helpTextId} ${extraTextId}` : extraTextId;
+        newProps['aria-describedby'] = helpText ? "".concat(helpTextId, " ").concat(extraTextId) : extraTextId;
       }
 
       if (status === 'error') {
@@ -471,12 +471,12 @@ function withField(Component, opts) {
       }
 
       const fieldCls = classNames({
-        [`${prefix}-field`]: true,
-        [`${prefix}-field-${name}`]: Boolean(name),
+        ["".concat(prefix, "-field")]: true,
+        ["".concat(prefix, "-field-").concat(name)]: Boolean(name),
         [fieldClassName]: Boolean(fieldClassName)
       });
       const fieldMaincls = classNames({
-        [`${prefix}-field-main`]: true
+        ["".concat(prefix, "-field-main")]: true
       });
 
       if (mergeLabelPos === 'inset' && !noLabel) {
@@ -497,8 +497,8 @@ function withField(Component, opts) {
 
       if (pure) {
         let pureCls = classNames(rest.className, {
-          [`${prefix}-field-pure`]: true,
-          [`${prefix}-field-${name}`]: Boolean(name),
+          ["".concat(prefix, "-field-pure")]: true,
+          ["".concat(prefix, "-field-").concat(name)]: Boolean(name),
           [fieldClassName]: Boolean(fieldClassName)
         });
         newProps.className = pureCls;
@@ -506,7 +506,7 @@ function withField(Component, opts) {
       }
 
       let withCol = mergeLabelCol && mergeWrapperCol;
-      const labelColCls = mergeLabelAlign ? `${prefix}-col-${mergeLabelAlign}` : ''; // get label
+      const labelColCls = mergeLabelAlign ? "".concat(prefix, "-col-").concat(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, {
-      [`${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
+      ["".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
     });
     const labelStyle = style ? style : {};
     width ? labelStyle.width = width : null;
     const optionalText = /*#__PURE__*/React.createElement(LocaleConsumer, {
       componentName: "Form"
     }, locale => /*#__PURE__*/React.createElement("span", {
-      className: `${prefixCls}-field-label-optional-text`
+      className: "".concat(prefixCls, "-field-label-optional-text")
     }, locale.optional));
     const textContent = /*#__PURE__*/React.createElement("div", {
-      className: `${prefixCls}-field-label-text`,
+      className: "".concat(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: `${prefixCls}-field-label-extra`
+      className: "".concat(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({
-    [`${prefix}-field`]: true,
-    [`${prefix}-slot`]: true
+    ["".concat(prefix, "-field")]: true,
+    ["".concat(prefix, "-slot")]: true
   }, className);
   const labelColCls = classNames({
-    [`${prefix}-col-${labelAlign}`]: true
+    ["".concat(prefix, "-col-").concat(labelAlign)]: true
   });
 
   switch (true) {
@@ -118,8 +118,8 @@ const FormSlot = props => {
     width: labelWidth
   }, label);
   let mainCls = classNames({
-    [`${prefix}-field-main`]: true,
-    [`${prefix}-slot-main`]: true
+    ["".concat(prefix, "-field-main")]: true,
+    ["".concat(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 = `${prefixCls}-col`;
+    const prefix = "".concat(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), {
-        [`${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
+        ["".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
       });
     });
     const classes = classnames(prefix, {
-      [`${prefix}-${span}`]: span !== undefined,
-      [`${prefix}-order-${order}`]: order,
-      [`${prefix}-offset-${offset}`]: offset,
-      [`${prefix}-push-${push}`]: push,
-      [`${prefix}-pull-${pull}`]: pull
+      ["".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
     }, 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 = `${prefixCls}-row`;
+    const prefix = "".concat(prefixCls, "-row");
     const classes = classnames({
       [prefix]: type !== 'flex',
-      [`${prefix}-${type}`]: type,
-      [`${prefix}-${type}-${justify}`]: type && justify,
-      [`${prefix}-${type}-${align}`]: type && align
+      ["".concat(prefix, "-").concat(type)]: type,
+      ["".concat(prefix, "-").concat(type, "-").concat(justify)]: type && justify,
+      ["".concat(prefix, "-").concat(type, "-").concat(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({
-      [`${prefixCls}-tag`]: true
+      ["".concat(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({
-      [`${prefixCls}-content-left`]: iconPosition === 'right',
-      [`${prefixCls}-content-right`]: iconPosition === 'left'
+      ["".concat(prefixCls, "-content-left")]: iconPosition === 'right',
+      ["".concat(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, `${prefixCls}-with-icon`, {
-      [`${prefixCls}-with-icon-only`]: children == null || children === '',
-      [`${prefixCls}-loading`]: loading
+    const iconBtnCls = classNames(className, "".concat(prefixCls, "-with-icon"), {
+      ["".concat(prefixCls, "-with-icon-only")]: children == null || children === '',
+      ["".concat(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 = `${prefixCls}-status`;
+      const prefixClsName = "".concat(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 = `${prefixCls}-status`;
+      const prefixClsName = "".concat(prefixCls, "-status");
       const {
         placeholder
       } = this.props;
@@ -86,7 +86,7 @@ export default class Image extends BaseComponent {
       const {
         fallback
       } = this.props;
-      const prefixClsName = `${prefixCls}-status`;
+      const prefixClsName = "".concat(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: `${prefixCls}-overlay`
+        className: "".concat(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: `${prefixCls}-mask`
+      className: "".concat(prefixCls, "-mask")
     }, /*#__PURE__*/React.createElement("div", {
-      className: `${prefixCls}-mask-info`
+      className: "".concat(prefixCls, "-mask-info")
     }, /*#__PURE__*/React.createElement(IconEyeOpened, {
       size: "extra-large"
     }), /*#__PURE__*/React.createElement("span", {
-      className: `${prefixCls}-mask-info-text`
+      className: "".concat(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(`${prefixCls}-img`, {
-          [`${prefixCls}-img-preview`]: showPreviewCursor,
-          [`${prefixCls}-img-error`]: loadStatus === "error"
+        className: cls("".concat(prefixCls, "-img"), {
+          ["".concat(prefixCls, "-img-preview")]: showPreviewCursor,
+          ["".concat(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(`.${prefixCls}-img`); // use IntersectionObserver to lazy load image
+    const allElement = document.querySelectorAll(".".concat(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(`#${this.previewGroupId}`),
+      root: document.querySelector("#".concat(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: `${prefixCls}-preview-group`
+      className: "".concat(prefixCls, "-preview-group")
     }, newChildren), /*#__PURE__*/React.createElement(PreviewInner, Object.assign({}, restProps, {
       ref: this.previewRef,
       src: finalSrcList,