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

package/lib/es/breadcrumb/item.js

@@ -21,7 +21,7 @@ export default class BreadcrumbItem extends BaseComponent {
         compact
       } = this.context;
       const iconSize = compact ? 'small' : 'default';
-      const className = "".concat(clsPrefix, "-item-icon");
+      const className = `${clsPrefix}-item-icon`;
 
       if ( /*#__PURE__*/React.isValidElement(iconType)) {
         //@ts-ignore
@@ -101,7 +101,7 @@ export default class BreadcrumbItem extends BaseComponent {
           width
         } = showTooltip;
         return /*#__PURE__*/React.createElement(Fragment, null, icon, /*#__PURE__*/React.createElement("span", {
-          className: "".concat(clsPrefix, "-item-title")
+          className: `${clsPrefix}-item-title`
         }, /*#__PURE__*/React.createElement(Typography.Text, {
           ellipsis: {
             showTooltip: opts ? {
@@ -118,7 +118,7 @@ export default class BreadcrumbItem extends BaseComponent {
       }
 
       return /*#__PURE__*/React.createElement(Fragment, null, icon, children ? /*#__PURE__*/React.createElement("span", {
-        className: "".concat(clsPrefix, "-item-title ").concat(clsPrefix, "-item-title-inline")
+        className: `${clsPrefix}-item-title ${clsPrefix}-item-title-inline`
       }, children) : null);
     };
 
@@ -130,9 +130,9 @@ export default class BreadcrumbItem extends BaseComponent {
       } = this.props;
       const hasHref = href !== null && typeof href !== 'undefined';
       const itemCls = cls({
-        ["".concat(clsPrefix, "-item")]: true,
-        ["".concat(clsPrefix, "-item-active")]: active,
-        ["".concat(clsPrefix, "-item-link")]: !noLink
+        [`${clsPrefix}-item`]: true,
+        [`${clsPrefix}-item-active`]: active,
+        [`${clsPrefix}-item-link`]: !noLink
       });
       const itemInner = this.renderBreadItem();
       const tag = active || !hasHref ? 'span' : 'a';
@@ -179,10 +179,10 @@ export default class BreadcrumbItem extends BaseComponent {
     } : {};
     const item = this.renderItem();
     const separator = !active ? this.props.separator || /*#__PURE__*/React.createElement("span", {
-      className: "".concat(clsPrefix, "-separator")
+      className: `${clsPrefix}-separator`
     }, this.context.separator) : null;
     const wrapperCLs = cls({
-      ["".concat(clsPrefix, "-item-wrap")]: true // [`${clsPrefix}-item-wrap-iconOnly`]: !!children && this.props.icon,
+      [`${clsPrefix}-item-wrap`]: true // [`${clsPrefix}-item-wrap-iconOnly`]: !!children && this.props.icon,
 
     });
     return /*#__PURE__*/React.createElement("span", Object.assign({

package/lib/es/button/Button.js

@@ -49,15 +49,15 @@ export default class Button extends PureComponent {
       disabled
     }, _omit(attr, ['x-semi-children-alias'])), {
       className: classNames(prefixCls, {
-        ["".concat(prefixCls, "-").concat(type)]: !disabled && type,
-        ["".concat(prefixCls, "-disabled")]: disabled,
-        ["".concat(prefixCls, "-size-large")]: size === 'large',
-        ["".concat(prefixCls, "-size-small")]: size === 'small',
+        [`${prefixCls}-${type}`]: !disabled && type,
+        [`${prefixCls}-disabled`]: disabled,
+        [`${prefixCls}-size-large`]: size === 'large',
+        [`${prefixCls}-size-small`]: size === 'small',
         // [`${prefixCls}-loading`]: loading,
-        ["".concat(prefixCls, "-light")]: theme === 'light',
-        ["".concat(prefixCls, "-block")]: block,
-        ["".concat(prefixCls, "-circle")]: circle,
-        ["".concat(prefixCls, "-borderless")]: theme === 'borderless'
+        [`${prefixCls}-light`]: theme === 'light',
+        [`${prefixCls}-block`]: block,
+        [`${prefixCls}-circle`]: circle,
+        [`${prefixCls}-borderless`]: theme === 'borderless'
       }, className),
       type: htmlType,
       'aria-disabled': disabled
@@ -76,7 +76,7 @@ export default class Button extends PureComponent {
         onMouseDown: this.props.onMouseDown,
         style: style
       }), /*#__PURE__*/React.createElement("span", Object.assign({
-        className: "".concat(prefixCls, "-content"),
+        className: `${prefixCls}-content`,
         onClick: e => disabled && e.stopPropagation()
       }, xSemiProps), children))
     );

package/lib/es/button/buttonGroup.js

@@ -22,7 +22,7 @@ const btnSizes = strings.sizes;
 export default class ButtonGroup extends BaseComponent {
   getInnerWithLine(inner) {
     const innerWithLine = [];
-    let lineCls = "".concat(prefixCls, "-group-line");
+    let lineCls = `${prefixCls}-group-line`;
 
     if (inner.length > 1) {
       inner.slice(0, -1).forEach((item, index) => {
@@ -36,15 +36,15 @@ export default class ButtonGroup extends BaseComponent {
             theme,
             disabled
           } = buttonProps;
-          lineCls = classNames("".concat(prefixCls, "-group-line"), "".concat(prefixCls, "-group-line-").concat(theme !== null && theme !== void 0 ? theme : 'light'), "".concat(prefixCls, "-group-line-").concat(type !== null && type !== void 0 ? type : 'primary'), {
-            ["".concat(prefixCls, "-group-line-disabled")]: disabled
+          lineCls = classNames(`${prefixCls}-group-line`, `${prefixCls}-group-line-${theme !== null && theme !== void 0 ? theme : 'light'}`, `${prefixCls}-group-line-${type !== null && type !== void 0 ? type : 'primary'}`, {
+            [`${prefixCls}-group-line-disabled`]: disabled
           });
         }
 
         if (isButtonType) {
           innerWithLine.push(item, /*#__PURE__*/React.createElement("span", {
             className: lineCls,
-            key: "line-".concat(index)
+            key: `line-${index}`
           }));
         } else {
           innerWithLine.push(item);
@@ -72,7 +72,7 @@ export default class ButtonGroup extends BaseComponent {
 
     let inner;
     let innerWithLine = [];
-    const cls = classNames("".concat(prefixCls, "-group"), className);
+    const cls = classNames(`${prefixCls}-group`, className);
 
     if (children) {
       inner = (Array.isArray(children) ? children : [children]).map((itm, index) => {

package/lib/es/button/splitButtonGroup.js

@@ -12,7 +12,7 @@ export default class SplitButtonGroup extends BaseComponent {
       style,
       className
     } = this.props;
-    const cls = classNames("".concat(prefixCls, "-split"), className);
+    const cls = classNames(`${prefixCls}-split`, className);
     return /*#__PURE__*/React.createElement("div", {
       className: cls,
       style: style,

package/lib/es/calendar/dayCalendar.js

@@ -10,7 +10,7 @@ import BaseComponent from '../_base/baseComponent';
 import LocaleConsumer from '../locale/localeConsumer';
 import localeContext from '../locale/context';
 import '@douyinfe/semi-foundation/lib/es/calendar/calendar.css';
-const prefixCls = "".concat(cssClasses.PREFIX, "-day");
+const prefixCls = `${cssClasses.PREFIX}-day`;
 export default class DayCalendar extends BaseComponent {
   constructor(props) {
     super(props);
@@ -27,8 +27,8 @@ export default class DayCalendar extends BaseComponent {
           /*#__PURE__*/
           // eslint-disable-next-line max-len
           React.createElement("li", {
-            className: "".concat(cssClasses.PREFIX, "-event-item ").concat(cssClasses.PREFIX, "-event-allday"),
-            key: key || "allDay-".concat(ind)
+            className: `${cssClasses.PREFIX}-event-item ${cssClasses.PREFIX}-event-allday`,
+            key: key || `allDay-${ind}`
           }, children)
         );
       });
@@ -44,21 +44,21 @@ export default class DayCalendar extends BaseComponent {
     };
 
     this.renderAllDay = events => {
-      const allDayCls = "".concat(cssClasses.PREFIX, "-all-day");
-      const contentCls = cls("".concat(allDayCls, "-content"), {
-        ["".concat(cssClasses.PREFIX, "-weekend")]: this.isWeekend
+      const allDayCls = `${cssClasses.PREFIX}-all-day`;
+      const contentCls = cls(`${allDayCls}-content`, {
+        [`${cssClasses.PREFIX}-weekend`]: this.isWeekend
       });
       return /*#__PURE__*/React.createElement(LocaleConsumer, {
         componentName: "Calendar"
       }, locale => /*#__PURE__*/React.createElement("div", {
-        className: "".concat(allDayCls)
+        className: `${allDayCls}`
       }, /*#__PURE__*/React.createElement("ul", {
-        className: "".concat(cssClasses.PREFIX, "-tag ").concat(allDayCls, "-tag ").concat(prefixCls, "-sticky-left")
+        className: `${cssClasses.PREFIX}-tag ${allDayCls}-tag ${prefixCls}-sticky-left`
       }, /*#__PURE__*/React.createElement("span", null, locale.allDay)), /*#__PURE__*/React.createElement("div", {
         role: "gridcell",
         className: contentCls
       }, /*#__PURE__*/React.createElement("ul", {
-        className: "".concat(cssClasses.PREFIX, "-event-items")
+        className: `${cssClasses.PREFIX}-event-items`
       }, this.renderAllDayEvents(events)))));
     };
 
@@ -148,14 +148,14 @@ export default class DayCalendar extends BaseComponent {
       style: dayStyle,
       ref: this.dom
     }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-sticky-top")
+      className: `${prefixCls}-sticky-top`
     }, header, this.renderAllDay(parsedEvents.allDay)), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-scroll-wrapper")
+      className: `${prefixCls}-scroll-wrapper`
     }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-scroll"),
+      className: `${prefixCls}-scroll`,
       ref: this.scrollDom
     }, /*#__PURE__*/React.createElement(TimeCol, {
-      className: "".concat(prefixCls, "-sticky-left"),
+      className: `${prefixCls}-sticky-left`,
       renderTimeDisplay: renderTimeDisplay
     }), /*#__PURE__*/React.createElement(DayCol, {
       events: parsedEvents.day,

package/lib/es/calendar/dayCol.js

@@ -7,10 +7,10 @@ import { cssClasses } from '@douyinfe/semi-foundation/lib/es/calendar/constants'
 import BaseComponent from '../_base/baseComponent';
 import localeContext from '../locale/context';
 import '@douyinfe/semi-foundation/lib/es/calendar/calendar.css';
-const prefixCls = "".concat(cssClasses.PREFIX, "-grid");
+const prefixCls = `${cssClasses.PREFIX}-grid`;
 
 function pad(d) {
-  return d < 10 ? "0".concat(d.toString()) : d.toString();
+  return d < 10 ? `0${d.toString()}` : d.toString();
 }
 
 export default class DayCol extends BaseComponent {
@@ -37,13 +37,13 @@ export default class DayCol extends BaseComponent {
         }
 
         const style = {
-          top: "".concat(top, "px"),
-          height: "".concat(height, "px")
+          top: `${top}px`,
+          height: `${height}px`
         };
         return /*#__PURE__*/React.createElement("li", {
-          className: "".concat(cssClasses.PREFIX, "-event-item ").concat(cssClasses.PREFIX, "-event-day"),
+          className: `${cssClasses.PREFIX}-event-item ${cssClasses.PREFIX}-event-day`,
           style: style,
-          key: key || "".concat(top, "-").concat(ind)
+          key: key || `${top}-${ind}`
         }, children);
       });
       return list;
@@ -62,11 +62,11 @@ export default class DayCol extends BaseComponent {
         top
       };
       const circle = /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-curr-circle"),
+        className: `${prefixCls}-curr-circle`,
         style: style
       });
       const line = /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-curr-line"),
+        className: `${prefixCls}-curr-line`,
         style: style
       });
       return /*#__PURE__*/React.createElement(React.Fragment, {
@@ -85,34 +85,34 @@ export default class DayCol extends BaseComponent {
         isWeekend,
         dateGridRender
       } = this.props;
-      const skCls = cls("".concat(prefixCls, "-skeleton"), {
-        ["".concat(cssClasses.PREFIX, "-weekend")]: isWeekend
+      const skCls = cls(`${prefixCls}-skeleton`, {
+        [`${cssClasses.PREFIX}-weekend`]: isWeekend
       });
       return /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls),
+        className: `${prefixCls}`,
         role: "presentation"
       }, /*#__PURE__*/React.createElement("div", {
         role: "gridcell",
-        className: "".concat(prefixCls, "-content")
+        className: `${prefixCls}-content`
       }, showCurrTime ? this.renderCurrTime() : null, /*#__PURE__*/React.createElement("ul", {
         role: "row",
         className: skCls
       }, [...Array(25).keys()].map(item => {
         const line = cls({
-          ["".concat(prefixCls, "-skeleton-row-line")]: true
+          [`${prefixCls}-skeleton-row-line`]: true
         });
         return /*#__PURE__*/React.createElement(React.Fragment, {
-          key: "".concat(item, "-daycol")
+          key: `${item}-daycol`
         }, /*#__PURE__*/React.createElement("li", {
-          "data-time": "".concat(pad(item), ":00:00"),
+          "data-time": `${pad(item)}:00:00`,
           className: line,
           onClick: e => this.handleClick(e, [displayValue, item, 0, 0])
         }), /*#__PURE__*/React.createElement("li", {
-          "data-time": "".concat(pad(item), ":30:00"),
+          "data-time": `${pad(item)}:30:00`,
           onClick: e => this.handleClick(e, [displayValue, item, 30, 0])
         }));
       })), dateGridRender && dateGridRender(displayValue.toString(), displayValue), /*#__PURE__*/React.createElement("ul", {
-        className: "".concat(cssClasses.PREFIX, "-event-items")
+        className: `${cssClasses.PREFIX}-event-items`
       }, this.renderEvents())));
     };
 

package/lib/es/calendar/monthCalendar.js

@@ -18,10 +18,10 @@ import '@douyinfe/semi-foundation/lib/es/calendar/calendar.css';
 
 const toPercent = num => {
   const res = num < 1 ? num * 100 : 100;
-  return "".concat(res, "%");
+  return `${res}%`;
 };
 
-const prefixCls = "".concat(cssClasses.PREFIX, "-month");
+const prefixCls = `${cssClasses.PREFIX}-month`;
 const contentPadding = 60;
 const contentHeight = 24;
 export default class monthCalendar extends BaseComponent {
@@ -55,25 +55,25 @@ export default class monthCalendar extends BaseComponent {
       } = this.props;
       this.monthlyData = this.foundation.getMonthlyData(displayValue, dateFnsLocale);
       return /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-header"),
+        className: `${prefixCls}-header`,
         role: "presentation"
       }, /*#__PURE__*/React.createElement("div", {
         role: "presentation",
-        className: "".concat(prefixCls, "-grid")
+        className: `${prefixCls}-grid`
       }, /*#__PURE__*/React.createElement("ul", {
         role: "row",
-        className: "".concat(prefixCls, "-grid-row")
+        className: `${prefixCls}-grid-row`
       }, this.monthlyData[0].map(day => {
         const {
           weekday
         } = day;
         const listCls = cls({
-          ["".concat(cssClasses.PREFIX, "-weekend")]: markWeekend && day.isWeekend
+          [`${cssClasses.PREFIX}-weekend`]: markWeekend && day.isWeekend
         });
         return /*#__PURE__*/React.createElement("li", {
           role: "columnheader",
           "aria-label": weekday,
-          key: "".concat(weekday, "-monthheader"),
+          key: `${weekday}-monthheader`,
           className: listCls
         }, /*#__PURE__*/React.createElement("span", null, weekday));
       }))));
@@ -95,11 +95,11 @@ export default class monthCalendar extends BaseComponent {
         const style = {
           left: toPercent(leftPos),
           width: toPercent(width),
-          top: "".concat(topInd, "em")
+          top: `${topInd}em`
         };
         return /*#__PURE__*/React.createElement("li", {
-          className: "".concat(cssClasses.PREFIX, "-event-item ").concat(cssClasses.PREFIX, "-event-month"),
-          key: key || "".concat(ind, "-monthevent"),
+          className: `${cssClasses.PREFIX}-event-item ${cssClasses.PREFIX}-event-month`,
+          key: key || `${ind}-monthevent`,
           style: style
         }, children);
       });
@@ -118,11 +118,11 @@ export default class monthCalendar extends BaseComponent {
       } = itemInfo;
       const key = date.toString();
       const remained = events.filter(i => Boolean(i)).length - itemLimit;
-      const cardCls = "".concat(prefixCls, "-event-card"); // const top = contentPadding / 2 + this.state.itemLimit * contentHeight;
+      const cardCls = `${prefixCls}-event-card`; // const top = contentPadding / 2 + this.state.itemLimit * contentHeight;
 
       const shouldRenderCard = remained > 0;
       const closer = /*#__PURE__*/React.createElement(Button, {
-        className: "".concat(cardCls, "-close"),
+        className: `${cardCls}-close`,
         onClick: e => this.closeCard(e, key),
         type: "tertiary",
         icon: /*#__PURE__*/React.createElement(IconClose, null),
@@ -130,24 +130,24 @@ export default class monthCalendar extends BaseComponent {
         size: "small"
       });
       const header = /*#__PURE__*/React.createElement("div", {
-        className: "".concat(cardCls, "-header-info")
+        className: `${cardCls}-header-info`
       }, /*#__PURE__*/React.createElement("div", {
-        className: "".concat(cardCls, "-header-info-weekday")
+        className: `${cardCls}-header-info-weekday`
       }, weekday), /*#__PURE__*/React.createElement("div", {
-        className: "".concat(cardCls, "-header-info-date")
+        className: `${cardCls}-header-info-date`
       }, dayString));
       const content = /*#__PURE__*/React.createElement("div", {
         className: cardCls
       }, /*#__PURE__*/React.createElement("div", {
-        className: "".concat(cardCls, "-content")
+        className: `${cardCls}-content`
       }, /*#__PURE__*/React.createElement("div", {
-        className: "".concat(cardCls, "-header")
+        className: `${cardCls}-header`
       }, header, closer), /*#__PURE__*/React.createElement("div", {
-        className: "".concat(cardCls, "-body")
+        className: `${cardCls}-body`
       }, /*#__PURE__*/React.createElement("ul", {
-        className: "".concat(cardCls, "-list")
+        className: `${cardCls}-list`
       }, events.map(item => /*#__PURE__*/React.createElement("li", {
-        key: item.key || "".concat(item.start.toString(), "-event")
+        key: item.key || `${item.start.toString()}-event`
       }, item.children))))));
       const pos = showCard && showCard[key] ? showCard[key][1] : 'leftTopOver';
       const text = /*#__PURE__*/React.createElement(LocaleConsumer, {
@@ -156,14 +156,14 @@ export default class monthCalendar extends BaseComponent {
       /*#__PURE__*/
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions
       React.createElement("div", {
-        className: "".concat(cardCls, "-wrapper"),
+        className: `${cardCls}-wrapper`,
         style: {
           bottom: 0
         },
         onClick: e => this.showCard(e, key)
       }, locale.remaining.replace('${remained}', String(remained))));
       return /*#__PURE__*/React.createElement(Popover, {
-        key: "".concat(date.valueOf()),
+        key: `${date.valueOf()}`,
         content: content,
         position: pos,
         trigger: "custom",
@@ -181,9 +181,9 @@ export default class monthCalendar extends BaseComponent {
         return /*#__PURE__*/React.createElement(LocaleConsumer, {
           componentName: "Calendar"
         }, (locale, localeCode) => /*#__PURE__*/React.createElement("span", {
-          className: "".concat(prefixCls, "-date")
+          className: `${prefixCls}-date`
         }, month, /*#__PURE__*/React.createElement("span", {
-          className: "".concat(cssClasses.PREFIX, "-today-date")
+          className: `${cssClasses.PREFIX}-today-date`
         }, "\u00A0", date), locale.datestring));
       }
 
@@ -191,9 +191,9 @@ export default class monthCalendar extends BaseComponent {
         /*#__PURE__*/
         // eslint-disable-next-line max-len
         React.createElement("span", {
-          className: "".concat(prefixCls, "-date")
+          className: `${prefixCls}-date`
         }, /*#__PURE__*/React.createElement("span", {
-          className: "".concat(cssClasses.PREFIX, "-today-date")
+          className: `${cssClasses.PREFIX}-today-date`
         }, date))
       );
     };
@@ -224,12 +224,12 @@ export default class monthCalendar extends BaseComponent {
       } = events;
       return /*#__PURE__*/React.createElement("div", {
         role: "presentation",
-        className: "".concat(prefixCls, "-weekrow"),
+        className: `${prefixCls}-weekrow`,
         ref: _this.cellDom,
-        key: "".concat(index, "-weekrow")
+        key: `${index}-weekrow`
       }, /*#__PURE__*/React.createElement("ul", {
         role: "row",
-        className: "".concat(prefixCls, "-skeleton")
+        className: `${prefixCls}-skeleton`
       }, weekDay.map(each => {
         const {
           date,
@@ -241,16 +241,16 @@ export default class monthCalendar extends BaseComponent {
           ind
         } = each;
         const listCls = cls({
-          ["".concat(cssClasses.PREFIX, "-today")]: isToday,
-          ["".concat(cssClasses.PREFIX, "-weekend")]: markWeekend && isWeekend,
-          ["".concat(prefixCls, "-same")]: isSameMonth
+          [`${cssClasses.PREFIX}-today`]: isToday,
+          [`${cssClasses.PREFIX}-weekend`]: markWeekend && isWeekend,
+          [`${prefixCls}-same`]: isSameMonth
         });
         const shouldRenderCollapsed = Boolean(day && day[ind] && day[ind].length > itemLimit);
         const inner = /*#__PURE__*/React.createElement("li", {
           role: "gridcell",
           "aria-label": date.toLocaleDateString(),
           "aria-current": isToday ? "date" : false,
-          key: "".concat(date, "-weeksk"),
+          key: `${date}-weeksk`,
           className: listCls,
           onClick: e => _this.handleClick(e, [date])
         }, _this.formatDayString(month, dayString), _this.renderCusDateGrid(date));
@@ -261,7 +261,7 @@ export default class monthCalendar extends BaseComponent {
 
         return _this.renderCollapsed(day[ind], each, listCls, month);
       })), /*#__PURE__*/React.createElement("ul", {
-        className: "".concat(cssClasses.PREFIX, "-event-items")
+        className: `${cssClasses.PREFIX}-event-items`
       }, display ? _this.renderEvents(display) : null));
     };
 
@@ -271,10 +271,10 @@ export default class monthCalendar extends BaseComponent {
       } = this.state;
       return /*#__PURE__*/React.createElement("div", {
         role: "presentation",
-        className: "".concat(prefixCls, "-week")
+        className: `${prefixCls}-week`
       }, /*#__PURE__*/React.createElement("ul", {
         role: "presentation",
-        className: "".concat(prefixCls, "-grid-col")
+        className: `${prefixCls}-grid-col`
       }, Object.keys(this.monthlyData).map(weekInd => this.renderWeekRow(weekInd, this.monthlyData[weekInd], parsedEvents[weekInd]))));
     };
 
@@ -404,10 +404,10 @@ export default class monthCalendar extends BaseComponent {
       style: monthStyle
     }, /*#__PURE__*/React.createElement("div", {
       role: "presentation",
-      className: "".concat(prefixCls, "-sticky-top")
+      className: `${prefixCls}-sticky-top`
     }, header, this.renderHeader(dateFnsLocale)), /*#__PURE__*/React.createElement("div", {
       role: "presentation",
-      className: "".concat(prefixCls, "-grid-wrapper")
+      className: `${prefixCls}-grid-wrapper`
     }, this.renderMonthGrid())));
   }