@douyinfe/semi-ui 2.27.1 → 2.28.0-beta.1

package/lib/cjs/cascader/item.js

@@ -122,29 +122,29 @@ class Item extends _react.PureComponent {
       let haveMarginLeft = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
 
       const finalCls = style => {
-        return style + (haveMarginLeft ? " ".concat(prefixcls, "-icon-left") : '');
+        return style + (haveMarginLeft ? ` ${prefixcls}-icon-left` : '');
       };
 
       switch (type) {
         case 'child':
           return /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronRight, {
-            className: finalCls("".concat(prefixcls, "-icon ").concat(prefixcls, "-icon-expand"))
+            className: finalCls(`${prefixcls}-icon ${prefixcls}-icon-expand`)
           });
 
         case 'tick':
           return /*#__PURE__*/_react.default.createElement(_semiIcons.IconTick, {
-            className: finalCls("".concat(prefixcls, "-icon ").concat(prefixcls, "-icon-active"))
+            className: finalCls(`${prefixcls}-icon ${prefixcls}-icon-active`)
           });
 
         case 'loading':
           return /*#__PURE__*/_react.default.createElement(_spin.default, {
-            wrapperClassName: finalCls("".concat(prefixcls, "-spin-icon"))
+            wrapperClassName: finalCls(`${prefixcls}-spin-icon`)
           });
 
         case 'empty':
           return /*#__PURE__*/_react.default.createElement("span", {
             "aria-hidden": true,
-            className: finalCls("".concat(prefixcls, "-icon ").concat(prefixcls, "-icon-empty"))
+            className: finalCls(`${prefixcls}-icon ${prefixcls}-icon-empty`)
           });
 
         default:
@@ -163,8 +163,8 @@ class Item extends _react.PureComponent {
           item.split(keyword).forEach((node, index) => {
             if (index > 0) {
               content.push( /*#__PURE__*/_react.default.createElement("span", {
-                className: "".concat(prefixcls, "-label-highlight"),
-                key: "".concat(index, "-").concat(idx)
+                className: `${prefixcls}-label-highlight`,
+                key: `${index}-${idx}`
               }, keyword));
             }
 
@@ -184,39 +184,71 @@ class Item extends _react.PureComponent {
     this.renderFlattenOption = data => {
       const {
         multiple,
+        selectedKeys,
         checkedKeys,
-        halfCheckedKeys
+        halfCheckedKeys,
+        keyword,
+        filterRender
       } = this.props;
 
       const content = /*#__PURE__*/_react.default.createElement("ul", {
-        className: "".concat(prefixcls, "-list"),
+        className: `${prefixcls}-list`,
         key: 'flatten-list'
       }, data.map(item => {
         const {
           searchText,
           key,
-          disabled
+          disabled,
+          pathData
         } = item;
+        const selected = selectedKeys.has(key);
         const className = (0, _classnames.default)(prefixcls, {
-          ["".concat(prefixcls, "-flatten")]: true,
-          ["".concat(prefixcls, "-disabled")]: disabled
+          [`${prefixcls}-flatten`]: true && !filterRender,
+          [`${prefixcls}-disabled`]: disabled,
+          [`${prefixcls}-select`]: selected && !multiple
         });
+
+        const onClick = e => {
+          this.onClick(e, item);
+        };
+
+        const onKeyPress = e => this.handleItemEnterPress(e, item);
+
+        const onCheck = e => this.onCheckboxChange(e, item);
+
+        if (filterRender) {
+          const props = {
+            className,
+            inputValue: keyword,
+            disabled,
+            data: pathData,
+            checkStatus: {
+              checked: checkedKeys.has(item.key),
+              halfChecked: halfCheckedKeys.has(item.key)
+            },
+            selected,
+            onClick,
+            onCheck
+          };
+          return /*#__PURE__*/_react.default.cloneElement(filterRender(props), {
+            key
+          });
+        }
+
         return /*#__PURE__*/_react.default.createElement("li", {
           role: 'menuitem',
           className: className,
           key: key,
-          onClick: e => {
-            this.onClick(e, item);
-          },
-          onKeyPress: e => this.handleItemEnterPress(e, item)
+          onClick: onClick,
+          onKeyPress: onKeyPress
         }, /*#__PURE__*/_react.default.createElement("span", {
-          className: "".concat(prefixcls, "-label")
+          className: `${prefixcls}-label`
         }, !multiple && this.renderIcon('empty'), multiple && /*#__PURE__*/_react.default.createElement(_checkbox.default, {
-          onChange: e => this.onCheckboxChange(e, item),
+          onChange: onCheck,
           disabled: disabled,
           indeterminate: halfCheckedKeys.has(item.key),
           checked: checkedKeys.has(item.key),
-          className: "".concat(prefixcls, "-label-checkbox")
+          className: `${prefixcls}-label-checkbox`
         }), this.highlight(searchText)));
       }));
 
@@ -235,7 +267,7 @@ class Item extends _react.PureComponent {
     const ind = content.length;
     content.push( /*#__PURE__*/_react.default.createElement("ul", {
       role: 'menu',
-      className: "".concat(prefixcls, "-list"),
+      className: `${prefixcls}-list`,
       key: renderData[0].key,
       onScroll: e => this.props.onListScroll(e, ind)
     }, renderData.map(item => {
@@ -263,16 +295,16 @@ class Item extends _react.PureComponent {
       }
 
       const className = (0, _classnames.default)(prefixcls, {
-        ["".concat(prefixcls, "-active")]: active && !selected,
-        ["".concat(prefixcls, "-select")]: selected && !multiple,
-        ["".concat(prefixcls, "-disabled")]: disabled
+        [`${prefixcls}-active`]: active && !selected,
+        [`${prefixcls}-select`]: selected && !multiple,
+        [`${prefixcls}-disabled`]: disabled
       });
       const otherAriaProps = parentKey ? {
-        ['aria-owns']: "cascaderItem-".concat(parentKey)
+        ['aria-owns']: `cascaderItem-${parentKey}`
       } : {};
       return /*#__PURE__*/_react.default.createElement("li", Object.assign({
         role: 'menuitem',
-        id: "cascaderItem-".concat(key),
+        id: `cascaderItem-${key}`,
         "aria-expanded": active,
         "aria-haspopup": Boolean(showExpand),
         "aria-disabled": disabled
@@ -287,13 +319,13 @@ class Item extends _react.PureComponent {
           this.onHover(e, item);
         }
       }), /*#__PURE__*/_react.default.createElement("span", {
-        className: "".concat(prefixcls, "-label")
+        className: `${prefixcls}-label`
       }, selected && !multiple && this.renderIcon('tick'), !selected && !multiple && this.renderIcon('empty'), multiple && /*#__PURE__*/_react.default.createElement(_checkbox.default, {
         onChange: e => this.onCheckboxChange(e, item),
         disabled: disabled,
         indeterminate: halfCheckedKeys.has(item.key),
         checked: checkedKeys.has(item.key),
-        className: "".concat(prefixcls, "-label-checkbox")
+        className: `${prefixcls}-label-checkbox`
       }), /*#__PURE__*/_react.default.createElement("span", null, label)), showExpand ? this.renderIcon(loading ? 'loading' : 'child', true) : null);
     })));
 
@@ -311,10 +343,10 @@ class Item extends _react.PureComponent {
     return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
       componentName: "Cascader"
     }, locale => /*#__PURE__*/_react.default.createElement("ul", {
-      className: "".concat(prefixcls, " ").concat(prefixcls, "-empty"),
+      className: `${prefixcls} ${prefixcls}-empty`,
       key: 'empty-list'
     }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "".concat(prefixcls, "-label"),
+      className: `${prefixcls}-label`,
       "x-semi-prop": "emptyContent"
     }, emptyContent || locale.emptyText)));
   }
@@ -330,9 +362,9 @@ class Item extends _react.PureComponent {
     const isEmpty = !data || !data.length;
     let content;
     const listsCls = (0, _classnames.default)({
-      ["".concat(prefixcls, "-lists")]: true,
-      ["".concat(prefixcls, "-lists-rtl")]: direction === 'rtl',
-      ["".concat(prefixcls, "-lists-empty")]: isEmpty
+      [`${prefixcls}-lists`]: true,
+      [`${prefixcls}-lists-rtl`]: direction === 'rtl',
+      [`${prefixcls}-lists-empty`]: isEmpty
     });
 
     if (isEmpty) {

package/lib/cjs/checkbox/checkbox.js

@@ -208,20 +208,20 @@ class Checkbox extends _baseComponent.default {
     const prefix = prefixCls || _constants.checkboxClasses.PREFIX;
     const focusOuter = props.isCardType || props.isPureCardType;
     const wrapper = (0, _classnames.default)(prefix, {
-      ["".concat(prefix, "-disabled")]: props.disabled,
-      ["".concat(prefix, "-indeterminate")]: indeterminate,
-      ["".concat(prefix, "-checked")]: props.checked,
-      ["".concat(prefix, "-unChecked")]: !props.checked,
-      ["".concat(prefix, "-cardType")]: props.isCardType,
-      ["".concat(prefix, "-cardType_disabled")]: props.disabled && props.isCardType,
-      ["".concat(prefix, "-cardType_unDisabled")]: !(props.disabled && props.isCardType),
-      ["".concat(prefix, "-cardType_checked")]: props.isCardType && props.checked && !props.disabled,
-      ["".concat(prefix, "-cardType_checked_disabled")]: props.isCardType && props.checked && props.disabled,
+      [`${prefix}-disabled`]: props.disabled,
+      [`${prefix}-indeterminate`]: indeterminate,
+      [`${prefix}-checked`]: props.checked,
+      [`${prefix}-unChecked`]: !props.checked,
+      [`${prefix}-cardType`]: props.isCardType,
+      [`${prefix}-cardType_disabled`]: props.disabled && props.isCardType,
+      [`${prefix}-cardType_unDisabled`]: !(props.disabled && props.isCardType),
+      [`${prefix}-cardType_checked`]: props.isCardType && props.checked && !props.disabled,
+      [`${prefix}-cardType_checked_disabled`]: props.isCardType && props.checked && props.disabled,
       [className]: Boolean(className),
-      ["".concat(prefix, "-focus")]: focusVisible && focusOuter
+      [`${prefix}-focus`]: focusVisible && focusOuter
     });
-    const extraCls = (0, _classnames.default)("".concat(prefix, "-extra"), {
-      ["".concat(prefix, "-cardType_extra_noChildren")]: props.isCardType && !children
+    const extraCls = (0, _classnames.default)(`${prefix}-extra`, {
+      [`${prefix}-cardType_extra_noChildren`]: props.isCardType && !children
     });
     const name = inGroup && this.context.checkboxGroup.name;
     const xSemiPropChildren = this.props['x-semi-children-alias'] || 'children';
@@ -232,10 +232,10 @@ class Checkbox extends _baseComponent.default {
       }
 
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(prefix, "-content")
+        className: `${prefix}-content`
       }, children ? /*#__PURE__*/_react.default.createElement("span", {
         id: addonId,
-        className: "".concat(prefix, "-addon"),
+        className: `${prefix}-addon`,
         "x-semi-prop": xSemiPropChildren
       }, children) : null, extra ? /*#__PURE__*/_react.default.createElement("div", {
         id: extraId,

package/lib/cjs/checkbox/checkboxGroup.js

@@ -84,10 +84,10 @@ class CheckboxGroup extends _baseComponent.default {
     const prefix = prefixCls || _constants.checkboxGroupClasses.PREFIX;
     const prefixClsDisplay = (0, _classnames.default)({
       [prefix]: true,
-      ["".concat(prefix, "-wrapper")]: true,
-      ["".concat(prefix, "-").concat(direction)]: direction,
-      ["".concat(prefix, "-").concat(direction, "-cardType")]: direction && isCardType,
-      ["".concat(prefix, "-").concat(direction, "-pureCardType")]: direction && isPureCardType
+      [`${prefix}-wrapper`]: true,
+      [`${prefix}-${direction}`]: direction,
+      [`${prefix}-${direction}-cardType`]: direction && isCardType,
+      [`${prefix}-${direction}-pureCardType`]: direction && isPureCardType
     }, className);
     const realValue = this.state.value.slice();
     let inner;

package/lib/cjs/checkbox/checkboxInner.js

@@ -56,14 +56,14 @@ class CheckboxInner extends _react.PureComponent {
     } = this.props;
     const prefix = prefixCls || _constants.checkboxClasses.PREFIX;
     const wrapper = (0, _classnames.default)({
-      ["".concat(prefix, "-inner")]: true,
-      ["".concat(prefix, "-inner-checked")]: Boolean(checked),
-      ["".concat(prefix, "-inner-pureCardType")]: isPureCardType
+      [`${prefix}-inner`]: true,
+      [`${prefix}-inner-checked`]: Boolean(checked),
+      [`${prefix}-inner-pureCardType`]: isPureCardType
     }, _constants.checkboxClasses.WRAPPER);
     const inner = (0, _classnames.default)({
-      ["".concat(prefix, "-inner-display")]: true,
-      ["".concat(prefix, "-focus")]: focusInner,
-      ["".concat(prefix, "-focus-border")]: focusInner && !checked
+      [`${prefix}-inner-display`]: true,
+      [`${prefix}-focus`]: focusInner,
+      [`${prefix}-focus-border`]: focusInner && !checked
     });
     const icon = checked ? /*#__PURE__*/_react.default.createElement(_semiIcons.IconCheckboxTick, null) : indeterminate ? /*#__PURE__*/_react.default.createElement(_semiIcons.IconCheckboxIndeterminate, null) : null;
     const inputProps = {

package/lib/cjs/collapse/item.js

@@ -69,8 +69,8 @@ class CollapsePanel extends _react.PureComponent {
 
     const icon = /*#__PURE__*/_react.default.createElement("span", {
       "aria-hidden": 'true',
-      className: (0, _classnames.default)(["".concat(_constants.cssClasses.PREFIX, "-header-icon"), {
-        ["".concat(_constants.cssClasses.PREFIX, "-header-iconDisabled")]: !expandIconEnable
+      className: (0, _classnames.default)([`${_constants.cssClasses.PREFIX}-header-icon`, {
+        [`${_constants.cssClasses.PREFIX}-header-iconDisabled`]: !expandIconEnable
       }])
     }, expandIconEnable ? active ? collapseIcon : expandIcon : expandIcon);
 
@@ -78,7 +78,7 @@ class CollapsePanel extends _react.PureComponent {
 
     if (typeof header === 'string') {
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showArrow && (iconPosLeft ? icon : null), /*#__PURE__*/_react.default.createElement("span", null, header), /*#__PURE__*/_react.default.createElement("span", {
-        className: "".concat(_constants.cssClasses.PREFIX, "-header-right")
+        className: `${_constants.cssClasses.PREFIX}-header-right`
       }, /*#__PURE__*/_react.default.createElement("span", null, extra), showArrow && (iconPosLeft ? null : icon)));
     }
 
@@ -108,15 +108,15 @@ class CollapsePanel extends _react.PureComponent {
     } = this.context;
     const active = activeSet.has(itemKey);
     const itemCls = (0, _classnames.default)(className, {
-      ["".concat(_constants.cssClasses.PREFIX, "-item")]: true
+      [`${_constants.cssClasses.PREFIX}-item`]: true
     });
     const headerCls = (0, _classnames.default)({
-      ["".concat(_constants.cssClasses.PREFIX, "-header")]: true,
-      ["".concat(_constants.cssClasses.PREFIX, "-header-disabled")]: disabled,
-      ["".concat(_constants.cssClasses.PREFIX, "-header-iconLeft")]: expandIconPosition === 'left'
+      [`${_constants.cssClasses.PREFIX}-header`]: true,
+      [`${_constants.cssClasses.PREFIX}-header-disabled`]: disabled,
+      [`${_constants.cssClasses.PREFIX}-header-iconLeft`]: expandIconPosition === 'left'
     });
     const contentCls = (0, _classnames.default)({
-      ["".concat(_constants.cssClasses.PREFIX, "-content")]: true
+      [`${_constants.cssClasses.PREFIX}-content`]: true
     });
     return /*#__PURE__*/_react.default.createElement("div", Object.assign({
       className: itemCls
@@ -138,7 +138,7 @@ class CollapsePanel extends _react.PureComponent {
       "aria-hidden": !active,
       id: this.ariaID
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(_constants.cssClasses.PREFIX, "-content-wrapper")
+      className: `${_constants.cssClasses.PREFIX}-content-wrapper`
     }, children))));
   }
 

package/lib/cjs/collapsible/index.js

@@ -133,10 +133,10 @@ class Collapsible extends _baseComponent.default {
       overflow: 'hidden',
       height: this.props.isOpen ? this.state.domHeight : this.props.collapseHeight,
       opacity: this.props.isOpen || !this.props.fade || this.props.collapseHeight !== 0 ? 1 : 0,
-      transitionDuration: "".concat(this.props.motion && this.state.isTransitioning ? this.props.duration : 0, "ms")
+      transitionDuration: `${this.props.motion && this.state.isTransitioning ? this.props.duration : 0}ms`
     }, this.props.style);
-    const wrapperCls = (0, _classnames.default)("".concat(_constants.cssClasses.PREFIX, "-wrapper"), {
-      ["".concat(_constants.cssClasses.PREFIX, "-transition")]: this.props.motion && this.state.isTransitioning
+    const wrapperCls = (0, _classnames.default)(`${_constants.cssClasses.PREFIX}-wrapper`, {
+      [`${_constants.cssClasses.PREFIX}-transition`]: this.props.motion && this.state.isTransitioning
     }, this.props.className);
     return /*#__PURE__*/_react.default.createElement("div", {
       className: wrapperCls,

package/lib/cjs/configProvider/index.js

@@ -37,7 +37,7 @@ class ConfigProvider extends _react.default.Component {
 
     if (direction === 'rtl') {
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(_constants.BASE_CLASS_PREFIX, "-rtl")
+        className: `${_constants.BASE_CLASS_PREFIX}-rtl`
       }, children);
     }
 

package/lib/cjs/datePicker/dateInput.js

@@ -93,7 +93,7 @@ class DateInput extends _baseComponent.default {
       const {
         rangeSeparator
       } = this.props;
-      const rangeInputValue = "".concat(rangeStart).concat(rangeSeparator).concat(rangeEnd);
+      const rangeInputValue = `${rangeStart}${rangeSeparator}${rangeEnd}`;
       return rangeInputValue;
     };
 
@@ -161,7 +161,7 @@ class DateInput extends _baseComponent.default {
     } = this.props;
     const labelNode = prefix || insetLabel;
     return labelNode ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-range-input-prefix"),
+      className: `${prefixCls}-range-input-prefix`,
       onClick: e => !disabled && !rangeInputFocus && this.handleRangeStartFocus(e),
       "x-semi-prop": "prefix,insetLabel"
     }, labelNode) : null;
@@ -173,8 +173,8 @@ class DateInput extends _baseComponent.default {
       rangeSeparator
     } = this.props;
     const separatorCls = (0, _classnames.default)({
-      ["".concat(_constants.cssClasses.PREFIX, "-range-input-separator")]: true,
-      ["".concat(_constants.cssClasses.PREFIX, "-range-input-separator-active")]: (rangeStart || rangeEnd) && !disabled
+      [`${_constants.cssClasses.PREFIX}-range-input-separator`]: true,
+      [`${_constants.cssClasses.PREFIX}-range-input-separator-active`]: (rangeStart || rangeEnd) && !disabled
     });
     return /*#__PURE__*/_react.default.createElement("span", {
       onClick: e => !disabled && this.handleRangeStartFocus(e),
@@ -194,7 +194,7 @@ class DateInput extends _baseComponent.default {
       role: "button",
       tabIndex: 0,
       "aria-label": "Clear range input value",
-      className: "".concat(prefixCls, "-range-input-clearbtn"),
+      className: `${prefixCls}-range-input-clearbtn`,
       onMouseDown: e => !disabled && this.handleRangeInputClear(e)
     }, clearIcon ? clearIcon : /*#__PURE__*/_react.default.createElement(_semiIcons.IconClear, {
       "aria-hidden": true
@@ -208,7 +208,7 @@ class DateInput extends _baseComponent.default {
       rangeInputFocus
     } = this.props;
     const rangeSuffix = suffix ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-range-input-suffix"),
+      className: `${prefixCls}-range-input-suffix`,
       onClick: e => !disabled && !rangeInputFocus && this.handleRangeStartFocus(e)
     }, suffix) : null;
     return rangeSuffix;
@@ -238,16 +238,16 @@ class DateInput extends _baseComponent.default {
     const rangeSize = size === 'large' ? 'default' : 'small';
     const rangePlaceholder = Array.isArray(placeholder) ? placeholder : [placeholder, placeholder];
     const [rangeStartPlaceholder, rangeEndPlaceholder] = rangePlaceholder;
-    const inputLeftWrapperCls = (0, _classnames.default)("".concat(prefixCls, "-range-input-wrapper-start"), "".concat(prefixCls, "-range-input-wrapper"), {
-      ["".concat(prefixCls, "-range-input-wrapper-active")]: rangeInputFocus === 'rangeStart' && !disabled,
-      ["".concat(prefixCls, "-range-input-wrapper-start-with-prefix")]: this.props.prefix || this.props.insetLabel
+    const inputLeftWrapperCls = (0, _classnames.default)(`${prefixCls}-range-input-wrapper-start`, `${prefixCls}-range-input-wrapper`, {
+      [`${prefixCls}-range-input-wrapper-active`]: rangeInputFocus === 'rangeStart' && !disabled,
+      [`${prefixCls}-range-input-wrapper-start-with-prefix`]: this.props.prefix || this.props.insetLabel
     });
-    const inputRightWrapperCls = (0, _classnames.default)("".concat(prefixCls, "-range-input-wrapper-end"), "".concat(prefixCls, "-range-input-wrapper"), {
-      ["".concat(prefixCls, "-range-input-wrapper-active")]: rangeInputFocus === 'rangeEnd' && !disabled
+    const inputRightWrapperCls = (0, _classnames.default)(`${prefixCls}-range-input-wrapper-end`, `${prefixCls}-range-input-wrapper`, {
+      [`${prefixCls}-range-input-wrapper-active`]: rangeInputFocus === 'rangeEnd' && !disabled
     });
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.renderRangePrefix(), /*#__PURE__*/_react.default.createElement("div", {
       onClick: e => !disabled && this.handleRangeInputFocus(e, 'rangeStart'),
-      className: "".concat(inputCls, " ").concat(inputLeftWrapperCls)
+      className: `${inputCls} ${inputLeftWrapperCls}`
     }, /*#__PURE__*/_react.default.createElement(_index.default, {
       size: rangeSize,
       style: inputStyle,
@@ -263,7 +263,7 @@ class DateInput extends _baseComponent.default {
       autofocus: autofocus,
       ref: rangeInputStartRef
     })), this.renderRangeSeparator(rangeStart, rangeEnd), /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(inputCls, " ").concat(inputRightWrapperCls),
+      className: `${inputCls} ${inputRightWrapperCls}`,
       onClick: e => !disabled && this.handleRangeInputFocus(e, 'rangeEnd')
     }, /*#__PURE__*/_react.default.createElement(_index.default, {
       size: rangeSize,
@@ -305,8 +305,8 @@ class DateInput extends _baseComponent.default {
       datePlaceholder,
       timePlaceholder
     } = this.foundation.getInsetInputPlaceholder();
-    const insetInputWrapperCls = "".concat(prefixCls, "-inset-input-wrapper");
-    const separatorCls = "".concat(prefixCls, "-inset-input-separator");
+    const insetInputWrapperCls = `${prefixCls}-inset-input-wrapper`;
+    const separatorCls = `${prefixCls}-inset-input-separator`;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: insetInputWrapperCls,
       "x-type": type
@@ -402,7 +402,7 @@ class DateInput extends _baseComponent.default {
     }
 
     const inputCls = (0, _classnames.default)({
-      ["".concat(prefixCls, "-input-readonly")]: inputReadOnly
+      [`${prefixCls}-input-readonly`]: inputReadOnly
     });
     const isRangeType = /range/i.test(type);
     const rangeProps = Object.assign(Object.assign({}, this.props), {

package/lib/cjs/datePicker/datePicker.js

@@ -186,7 +186,7 @@ class DatePicker extends _baseComponent.default {
       } = this.state;
       const wrapCls = (0, _classnames.default)(_constants.cssClasses.PREFIX, {
         [_constants.cssClasses.PANEL_YAM]: this.adapter.typeIsYearOrMonth(),
-        ["".concat(_constants.cssClasses.PREFIX, "-compact")]: density === 'compact'
+        [`${_constants.cssClasses.PREFIX}-compact`]: density === 'compact'
       }, dropdownClassName);
       const insetInputProps = {
         dateFnsLocale,
@@ -208,10 +208,10 @@ class DatePicker extends _baseComponent.default {
         className: wrapCls,
         style: dropdownStyle
       }, topSlot && /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(_constants.cssClasses.PREFIX, "-topSlot"),
+        className: `${_constants.cssClasses.PREFIX}-topSlot`,
         "x-semi-prop": "topSlot"
       }, topSlot), presetPosition === "top" && this.renderQuickControls(), this.adapter.typeIsYearOrMonth() ? this.renderYearMonthPanel(locale, localeCode) : this.renderMonthGrid(locale, localeCode, dateFnsLocale), presetPosition === "bottom" && this.renderQuickControls(), bottomSlot && /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(_constants.cssClasses.PREFIX, "-bottomSlot"),
+        className: `${_constants.cssClasses.PREFIX}-bottomSlot`,
         "x-semi-prop": "bottomSlot"
       }, bottomSlot), this.renderFooter(locale, localeCode));
     };
@@ -705,12 +705,12 @@ class DatePicker extends _baseComponent.default {
 
     const isRangeType = this.isRangeType(type, triggerRender);
     const inputDisabled = disabled || insetInput && triggerDisabled;
-    const inputCls = (0, _classnames.default)("".concat(_constants.cssClasses.PREFIX, "-input"), {
-      ["".concat(_constants.cssClasses.PREFIX, "-range-input")]: isRangeType,
-      ["".concat(_constants.cssClasses.PREFIX, "-range-input-").concat(size)]: isRangeType && size,
-      ["".concat(_constants.cssClasses.PREFIX, "-range-input-active")]: isRangeType && rangeInputFocus && !inputDisabled,
-      ["".concat(_constants.cssClasses.PREFIX, "-range-input-disabled")]: isRangeType && inputDisabled,
-      ["".concat(_constants.cssClasses.PREFIX, "-range-input-").concat(validateStatus)]: isRangeType && validateStatus
+    const inputCls = (0, _classnames.default)(`${_constants.cssClasses.PREFIX}-input`, {
+      [`${_constants.cssClasses.PREFIX}-range-input`]: isRangeType,
+      [`${_constants.cssClasses.PREFIX}-range-input-${size}`]: isRangeType && size,
+      [`${_constants.cssClasses.PREFIX}-range-input-active`]: isRangeType && rangeInputFocus && !inputDisabled,
+      [`${_constants.cssClasses.PREFIX}-range-input-disabled`]: isRangeType && inputDisabled,
+      [`${_constants.cssClasses.PREFIX}-range-input-${validateStatus}`]: isRangeType && validateStatus
     });
     const phText = placeholder || locale.placeholder[type]; // i18n
     // These values should be passed to triggerRender, do not delete any key if it is not necessary

package/lib/cjs/datePicker/footer.js

@@ -23,7 +23,7 @@ function Footer() {
     onCancelClick,
     onConfirmClick
   } = props;
-  const wrapCls = (0, _classnames.default)("".concat(prefixCls, "-footer"));
+  const wrapCls = (0, _classnames.default)(`${prefixCls}-footer`);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: wrapCls
   }, /*#__PURE__*/_react.default.createElement(_button.default, {

package/lib/cjs/datePicker/index.js

@@ -39,7 +39,7 @@ var _default = (0, _object.forwardStatics)( /*#__PURE__*/_react.default.forwardR
 
 
   if (rangeSeparator && typeof rangeSeparator === 'string') {
-    propsObj.rangeSeparator = " ".concat(rangeSeparator.trim(), " ");
+    propsObj.rangeSeparator = ` ${rangeSeparator.trim()} `;
   }
 
   if (propsObj.insetInput) {

package/lib/cjs/datePicker/month.js

@@ -341,7 +341,7 @@ class Month extends _baseComponent.default {
       locale
     } = this.props;
     const weekdayCls = (0, _classnames.default)(_constants.cssClasses.WEEKDAY);
-    const weekdayItemCls = (0, _classnames.default)("".concat(prefixCls, "-weekday-item"));
+    const weekdayItemCls = (0, _classnames.default)(`${prefixCls}-weekday-item`);
     const {
       weekdays
     } = this.state; // i18n
@@ -439,7 +439,7 @@ class Month extends _baseComponent.default {
       [_constants.cssClasses.DAY_HOVER_DAY_AROUND_SINGLE_SELECTED]: dayStatus.isHoverDayAroundOneSelected
     });
     const dayMainCls = (0, _classnames.default)({
-      ["".concat(_constants.cssClasses.DAY, "-main")]: true
+      [`${_constants.cssClasses.DAY}-main`]: true
     });
     const fullDateArgs = [dayNumber, fullDate, dayStatus];
     const customRender = (0, _isFunction2.default)(renderFullDate);