@douyinfe/semi-foundation 2.30.0-alpha.0 → 2.30.0

package/lib/cjs/timePicker/utils/index.js

@@ -152,14 +152,14 @@ const isTimeFormatLike = (time, formatToken) => {
   let isLike = true;
   const dateFnsSupportFormatCh = 'BDEGHKLMOPQRSTXYabcehimopqstuwxyz'; // dateFns support format character
 
-  const formatSupportChReg = new RegExp("[".concat(dateFnsSupportFormatCh, "]"), 'g');
-  const formatNotSupportChReg = new RegExp("[^".concat(dateFnsSupportFormatCh, "]"), 'g');
+  const formatSupportChReg = new RegExp(`[${dateFnsSupportFormatCh}]`, 'g');
+  const formatNotSupportChReg = new RegExp(`[^${dateFnsSupportFormatCh}]`, 'g');
   const hmsReg = /[H|m|s]{1,2}/;
   const formatSplitted = formatToken.split(formatNotSupportChReg); // => ['HH', 'mm'];
 
   const timeSeparator = formatToken.replace(formatSupportChReg, ''); // => :
 
-  const timeReg = new RegExp("[".concat(timeSeparator, "]"), 'g'); // => /[:]/g
+  const timeReg = new RegExp(`[${timeSeparator}]`, 'g'); // => /[:]/g
 
   const timeSplitted = time.split(timeReg); // => ['12', '0]
 

package/lib/cjs/timeline/constants.js

@@ -8,8 +8,8 @@ exports.strings = exports.cssClasses = void 0;
 var _constants = require("../base/constants");
 
 const cssClasses = {
-  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-timeline"),
-  ITEM: "".concat(_constants.BASE_CLASS_PREFIX, "-timeline-item")
+  PREFIX: `${_constants.BASE_CLASS_PREFIX}-timeline`,
+  ITEM: `${_constants.BASE_CLASS_PREFIX}-timeline-item`
 };
 exports.cssClasses = cssClasses;
 const strings = {

package/lib/cjs/toast/constants.js

@@ -7,11 +7,11 @@ exports.strings = exports.numbers = exports.cssClasses = void 0;
 
 var _constants = require("../base/constants");
 
-const PREFIX = "".concat(_constants.BASE_CLASS_PREFIX, "-toast");
+const PREFIX = `${_constants.BASE_CLASS_PREFIX}-toast`;
 const cssClasses = {
   PREFIX,
-  WRAPPER: "".concat(PREFIX, "-wrapper"),
-  LIST: "".concat(PREFIX, "-list")
+  WRAPPER: `${PREFIX}-wrapper`,
+  LIST: `${PREFIX}-list`
 };
 exports.cssClasses = cssClasses;
 const strings = {

package/lib/cjs/tooltip/constants.js

@@ -8,7 +8,7 @@ exports.strings = exports.numbers = exports.cssClasses = void 0;
 var _constants = require("../base/constants");
 
 const cssClasses = {
-  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-tooltip")
+  PREFIX: `${_constants.BASE_CLASS_PREFIX}-tooltip`
 };
 exports.cssClasses = cssClasses;
 const strings = {

package/lib/cjs/tooltip/foundation.d.ts

@@ -133,7 +133,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
      * 如果 trigger 是 focus 或者 hover，则它绑定了 onFocus，这里我们如果重新 focus 的话，popup 会再次打开
      * 因此 returnFocusOnClose 只支持 click trigger
      */
-    _focusTrigger(): void;
+    focusTrigger(): void;
     _handleEscKeyDown(event: any): void;
     _handleContainerTabKeyDown(focusableElements: any[], event: any): void;
     _handleContainerShiftTabKeyDown(focusableElements: any[], event: any): void;

package/lib/cjs/tooltip/foundation.js

@@ -494,23 +494,23 @@ class Tooltip extends _foundation.default {
     if (position && triggerRect && translateX != null && translateY != null) {
       if (this.getProp('transformFromCenter')) {
         if (['topLeft', 'bottomLeft'].includes(position)) {
-          return "".concat(this._roundPixel(triggerRect.width / 2), "px ").concat(-translateY * 100, "%");
+          return `${this._roundPixel(triggerRect.width / 2)}px ${-translateY * 100}%`;
         }
 
         if (['topRight', 'bottomRight'].includes(position)) {
-          return "calc(100% - ".concat(this._roundPixel(triggerRect.width / 2), "px) ").concat(-translateY * 100, "%");
+          return `calc(100% - ${this._roundPixel(triggerRect.width / 2)}px) ${-translateY * 100}%`;
         }
 
         if (['leftTop', 'rightTop'].includes(position)) {
-          return "".concat(-translateX * 100, "% ").concat(this._roundPixel(triggerRect.height / 2), "px");
+          return `${-translateX * 100}% ${this._roundPixel(triggerRect.height / 2)}px`;
         }
 
         if (['leftBottom', 'rightBottom'].includes(position)) {
-          return "".concat(-translateX * 100, "% calc(100% - ").concat(this._roundPixel(triggerRect.height / 2), "px)");
+          return `${-translateX * 100}% calc(100% - ${this._roundPixel(triggerRect.height / 2)}px)`;
         }
       }
 
-      return "".concat(-translateX * 100, "% ").concat(-translateY * 100, "%");
+      return `${-translateX * 100}% ${-translateY * 100}%`;
     }
 
     return null;
@@ -521,6 +521,9 @@ class Tooltip extends _foundation.default {
       spacing,
       isOverFlow
     } = props;
+    const {
+      innerWidth
+    } = window;
     const triggerRect = ((0, _isEmpty2.default)(props.triggerRect) ? props.triggerRect : this._adapter.getTriggerBounding()) || Object.assign({}, defaultRect);
     const containerRect = ((0, _isEmpty2.default)(props.containerRect) ? props.containerRect : this._adapter.getPopupContainerRect()) || Object.assign({}, defaultRect);
     const wrapperRect = ((0, _isEmpty2.default)(props.wrapperRect) ? props.wrapperRect : this._adapter.getWrapperBounding()) || Object.assign({}, defaultRect); // eslint-disable-next-line
@@ -559,6 +562,7 @@ class Tooltip extends _foundation.default {
     const isWidthOverFlow = isOverFlow && isOverFlow[1];
     const isTriggerNearLeft = middleX - containerRect.left < containerRect.right - middleX;
     const isTriggerNearTop = middleY - containerRect.top < containerRect.bottom - middleY;
+    const isWrapperWidthOverflow = wrapperRect.width > innerWidth;
 
     switch (position) {
       case 'top':
@@ -573,7 +577,7 @@ class Tooltip extends _foundation.default {
       case 'topLeft':
         // left = pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left;
         // top = triggerRect.top - SPACING;
-        left = isWidthOverFlow ? containerRect.left : pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left;
+        left = isWidthOverFlow ? isWrapperWidthOverflow ? containerRect.left : containerRect.right - wrapperRect.width : pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left;
         top = isHeightOverFlow ? containerRect.bottom + offsetHeight : triggerRect.top - SPACING;
         translateY = -1;
         break;
@@ -625,7 +629,7 @@ class Tooltip extends _foundation.default {
       case 'bottomLeft':
         // left = pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left;
         // top = triggerRect.bottom + SPACING;
-        left = isWidthOverFlow ? containerRect.left : pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left;
+        left = isWidthOverFlow ? isWrapperWidthOverflow ? containerRect.left : containerRect.right - wrapperRect.width : pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left;
         top = isHeightOverFlow ? containerRect.top + offsetYWithArrow - SPACING : triggerRect.top + triggerRect.height + SPACING;
         break;
 
@@ -733,7 +737,7 @@ class Tooltip extends _foundation.default {
     let transform = ''; // eslint-disable-next-line
 
     if (translateX != null) {
-      transform += "translateX(".concat(translateX * 100, "%) ");
+      transform += `translateX(${translateX * 100}%) `;
       Object.defineProperty(style, 'translateX', {
         enumerable: false,
         value: translateX
@@ -742,7 +746,7 @@ class Tooltip extends _foundation.default {
 
 
     if (translateY != null) {
-      transform += "translateY(".concat(translateY * 100, "%) ");
+      transform += `translateY(${translateY * 100}%) `;
       Object.defineProperty(style, 'translateY', {
         enumerable: false,
         value: translateY
@@ -1229,7 +1233,7 @@ class Tooltip extends _foundation.default {
    */
 
 
-  _focusTrigger() {
+  focusTrigger() {
     const {
       trigger,
       returnFocusOnClose,
@@ -1255,8 +1259,7 @@ class Tooltip extends _foundation.default {
     if (trigger !== 'custom') {
       // Move the focus into the trigger first and then close the pop-up layer 
       // to avoid the problem of opening the pop-up layer again when the focus returns to the trigger in the case of hover and focus
-      this._focusTrigger();
-
+      this.focusTrigger();
       this.hide();
     }
 

package/lib/cjs/transfer/constants.js

@@ -8,7 +8,7 @@ exports.strings = exports.numbers = exports.cssClasses = void 0;
 var _constants = require("../base/constants");
 
 const cssClasses = {
-  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-transfer")
+  PREFIX: `${_constants.BASE_CLASS_PREFIX}-transfer`
 };
 exports.cssClasses = cssClasses;
 const strings = {

package/lib/cjs/tree/constants.js

@@ -8,8 +8,8 @@ exports.strings = exports.numbers = exports.cssClasses = void 0;
 var _constants = require("../base/constants");
 
 const cssClasses = {
-  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-tree"),
-  PREFIX_OPTION: "".concat(_constants.BASE_CLASS_PREFIX, "-tree-option")
+  PREFIX: `${_constants.BASE_CLASS_PREFIX}-tree`,
+  PREFIX_OPTION: `${_constants.BASE_CLASS_PREFIX}-tree-option`
 };
 exports.cssClasses = cssClasses;
 const strings = {

package/lib/cjs/tree/treeUtil.d.ts

@@ -75,6 +75,6 @@ export declare function getValueOrKey(data: any): any;
 export declare function normalizeValue(value: any, withObject: boolean): any;
 export declare function updateKeys(keySet: Set<string> | string[], keyEntities: KeyEntities): string[];
 export declare function calcDisabledKeys(keyEntities: KeyEntities): Set<string>;
-export declare function calcDropRelativePosition(event: any, treeNode: any): 0 | 1 | -1;
+export declare function calcDropRelativePosition(event: any, treeNode: any): 1 | -1 | 0;
 export declare function getDragNodesKeys(key: string, keyEntities: KeyEntities): string[];
 export declare function calcDropActualPosition(pos: string, relativeDropPos: any): any;

package/lib/cjs/tree/treeUtil.js

@@ -55,7 +55,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const DRAG_OFFSET = 0.45;
 
 function getPosition(level, index) {
-  return "".concat(level, "-").concat(index);
+  return `${level}-${index}`;
 }
 
 function isValid(val) {

package/lib/cjs/treeSelect/constants.js

@@ -8,9 +8,9 @@ exports.strings = exports.numbers = exports.cssClasses = void 0;
 var _constants = require("../base/constants");
 
 const cssClasses = {
-  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-tree-select"),
-  PREFIX_TREE: "".concat(_constants.BASE_CLASS_PREFIX, "-tree"),
-  PREFIX_OPTION: "".concat(_constants.BASE_CLASS_PREFIX, "-tree-select-option")
+  PREFIX: `${_constants.BASE_CLASS_PREFIX}-tree-select`,
+  PREFIX_TREE: `${_constants.BASE_CLASS_PREFIX}-tree`,
+  PREFIX_OPTION: `${_constants.BASE_CLASS_PREFIX}-tree-select-option`
 };
 exports.cssClasses = cssClasses;
 const strings = {

package/lib/cjs/treeSelect/foundation.d.ts

@@ -27,7 +27,7 @@ export interface BasicOnChange {
     (node: BasicTreeNodeData[] | BasicTreeNodeData, e: any): void;
     (value: BasicTreeNodeData['value'] | Array<BasicTreeNodeData['value']>, node: BasicTreeNodeData[] | BasicTreeNodeData, e: any): void;
 }
-export interface BasicTreeSelectProps extends Pick<BasicTreeProps, 'virtualize' | 'renderFullLabel' | 'renderLabel' | 'autoExpandParent' | 'className' | 'defaultExpandAll' | 'defaultExpandedKeys' | 'defaultValue' | 'disabled' | 'emptyContent' | 'expandAction' | 'expandedKeys' | 'filterTreeNode' | 'labelEllipsis' | 'leafOnly' | 'multiple' | 'onChangeWithObject' | 'showClear' | 'showFilteredOnly' | 'style' | 'treeData' | 'treeNodeFilterProp' | 'value' | 'onExpand' | 'expandAll' | 'disableStrictly' | 'aria-label' | 'checkRelation'> {
+export interface BasicTreeSelectProps extends Pick<BasicTreeProps, 'virtualize' | 'renderFullLabel' | 'renderLabel' | 'autoExpandParent' | 'className' | 'defaultExpandAll' | 'defaultExpandedKeys' | 'defaultValue' | 'disabled' | 'emptyContent' | 'expandAction' | 'expandedKeys' | 'filterTreeNode' | 'labelEllipsis' | 'leafOnly' | 'multiple' | 'onChangeWithObject' | 'showClear' | 'showFilteredOnly' | 'style' | 'treeData' | 'treeNodeFilterProp' | 'value' | 'onExpand' | 'expandAll' | 'disableStrictly' | 'aria-label' | 'checkRelation' | 'preventScroll'> {
     motion?: Motion;
     mouseEnterDelay?: number;
     mouseLeaveDelay?: number;
@@ -74,7 +74,6 @@ export interface BasicTreeSelectProps extends Pick<BasicTreeProps, 'virtualize'
 export interface BasicTreeSelectInnerData extends Pick<BasicTreeInnerData, 'keyEntities' | 'treeData' | 'flattenNodes' | 'selectedKeys' | 'checkedKeys' | 'halfCheckedKeys' | 'motionKeys' | 'motionType' | 'expandedKeys' | 'filteredKeys' | 'filteredExpandedKeys' | 'filteredShownKeys' | 'cachedKeyValuePairs' | 'inputValue' | 'disabledKeys' | 'loadedKeys' | 'loadingKeys' | 'realCheckedKeys'> {
     inputTriggerFocus: boolean;
     isOpen: boolean;
-    isInput: boolean;
     rePosKey: number;
     dropdownMinWidth: null | number;
     isHovering: boolean;
@@ -102,6 +101,7 @@ export interface TreeSelectAdapter<P = Record<string, any>, S = Record<string, a
     notifyLoad: (newLoadedKeys: Set<string>, data: BasicTreeNodeData) => void;
     updateInputFocus: (bool: boolean) => void;
     updateLoadKeys: (data: BasicTreeNodeData, resolve: (value?: any) => void) => void;
+    updateIsFocus: (bool: boolean) => void;
 }
 export default class TreeSelectFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<TreeSelectAdapter<P, S>, P, S> {
     constructor(adapter: TreeSelectAdapter<P, S>);
@@ -131,8 +131,11 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
     focusInput(bool: boolean): void;
     _notifyMultipleChange(key: string[], e: any): void;
     _notifyChange(key: any, e: any): void;
+    _registerClickOutsideHandler: (e: any) => void;
     _notifyFocus(e: any): void;
+    handleTriggerFocus(e: any): void;
     _notifyBlur(e: any): void;
+    handlerTriggerBlur(e: any): void;
     toggleHoverState(bool: boolean): void;
     open(): void;
     close(e: any): void;

package/lib/cjs/treeSelect/foundation.js

@@ -35,6 +35,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 class TreeSelectFoundation extends _foundation.default {
   constructor(adapter) {
     super(Object.assign({}, adapter));
+
+    this._registerClickOutsideHandler = e => {
+      this._adapter.registerClickOutsideHandler(e => {
+        this.handlerTriggerBlur(e);
+        this.close(e);
+      });
+    };
   }
 
   init() {
@@ -53,6 +60,10 @@ class TreeSelectFoundation extends _foundation.default {
     if (isOpen) {
       this.open();
     }
+
+    if (triggerSearchAutoFocus) {
+      this.handleTriggerFocus(null);
+    }
   }
 
   destroy() {
@@ -320,6 +331,14 @@ class TreeSelectFoundation extends _foundation.default {
 
   _notifyFocus(e) {
     this._adapter.notifyFocus(e);
+  }
+
+  handleTriggerFocus(e) {
+    this._adapter.updateIsFocus(true);
+
+    this._notifyFocus(e);
+
+    this._registerClickOutsideHandler(e);
   } // Scenes that may trigger blur
   //  1、clickOutSide
   //  2、click option / press enter, and then select complete（when multiple is false
@@ -330,6 +349,14 @@ class TreeSelectFoundation extends _foundation.default {
     this._adapter.notifyBlur(e);
   }
 
+  handlerTriggerBlur(e) {
+    this._adapter.updateIsFocus(false);
+
+    this._notifyBlur(e);
+
+    this._adapter.unregisterClickOutsideHandler();
+  }
+
   toggleHoverState(bool) {
     this._adapter.toggleHovering(bool);
   }
@@ -338,19 +365,11 @@ class TreeSelectFoundation extends _foundation.default {
     this._adapter.openMenu();
 
     this._setDropdownWidth();
-
-    this._adapter.registerClickOutsideHandler(e => {
-      this.close(e);
-    });
   }
 
   close(e) {
     this._adapter.closeMenu();
 
-    this._adapter.unregisterClickOutsideHandler();
-
-    this._notifyBlur(e);
-
     if (this.getProp('motionExpand')) {
       this._adapter.updateState({
         motionKeys: new Set([])
@@ -363,7 +382,8 @@ class TreeSelectFoundation extends _foundation.default {
 
     const {
       isOpen,
-      inputValue
+      inputValue,
+      isFocus
     } = this.getStates();
     const {
       searchPosition
@@ -371,16 +391,20 @@ class TreeSelectFoundation extends _foundation.default {
 
     if (isDisabled) {
       return;
-    } else if (!isOpen) {
-      this.open();
-
-      this._notifyFocus(e);
-    } else if (isOpen) {
-      if (searchPosition === 'trigger' && inputValue) {
-        return;
+    } else {
+      if (!isFocus) {
+        this.handleTriggerFocus(e);
       }
 
-      this.close(e);
+      if (isOpen) {
+        if (searchPosition === 'trigger' && inputValue) {
+          return;
+        }
+
+        this.close(e);
+      } else {
+        this.open();
+      }
     }
   }
   /**
@@ -626,6 +650,7 @@ class TreeSelectFoundation extends _foundation.default {
 
     if (clickToHide && (this._isSelectToClose() || !data.children)) {
       this.close(e);
+      this.handlerTriggerBlur(e);
     }
   }
 

package/lib/cjs/treeSelect/treeSelect.css

@@ -17,12 +17,16 @@
 }
 .semi-tree-select:hover {
   background-color: var(--semi-color-fill-1);
-  border: 1px solid inherit;
+  border: 1px solid transparent;
 }
 .semi-tree-select-focus {
   border: 1px solid var(--semi-color-focus-border);
   outline: 0;
 }
+.semi-tree-select-focus:hover {
+  border: 1px solid var(--semi-color-focus-border);
+  outline: 0;
+}
 .semi-tree-select-warning {
   background-color: var(--semi-color-warning-light-default);
   border-color: var(--semi-color-warning-light-default);

package/lib/cjs/treeSelect/treeSelect.scss

@@ -26,6 +26,12 @@ $module: #{$prefix}-tree-select;
         outline: 0;
     }
 
+    &-focus:hover {
+        border: $width-treeSelect_focus-border solid $color-treeSelect_default-border-focus;
+        outline: 0;
+    }
+
+
     &-warning {
         background-color: $color-treeSelect_warning-bg-default;
         border-color: $color-treeSelect_warning-border-default;

package/lib/cjs/treeSelect/variables.scss

@@ -6,7 +6,7 @@ $color-treeSelect_default-icon-hover: var(--semi-color-primary-hover); // 树选
 $color-treeSelect_default-icon-active: var(--semi-color-primary-active); // 树选择器选择框清空按钮颜色 - 按下
 $color-treeSelect_default-bg-hover: var(--semi-color-fill-1); // 树选择器选择框背景颜色 - 悬停
 
-$color-treeSelect_default-border-hover: inherit; // 树选择器选择框描边颜色 - 悬浮
+$color-treeSelect_default-border-hover: transparent; // 树选择器选择框描边颜色 - 悬浮
 $color-treeSelect_default-border-focus: var(--semi-color-focus-border);// 树选择器选择框描边颜色 - 选中
 
 $color-treeSelect_search-border-default: var(--semi-color-fill-0); // 树选择器菜单搜索框描边颜色 - 默认

package/lib/cjs/typography/constants.js

@@ -8,7 +8,7 @@ exports.strings = exports.cssClasses = void 0;
 var _constants = require("../base/constants");
 
 const cssClasses = {
-  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-typography")
+  PREFIX: `${_constants.BASE_CLASS_PREFIX}-typography`
 };
 exports.cssClasses = cssClasses;
 const strings = {

package/lib/cjs/typography/formatNumeral.js

@@ -18,7 +18,7 @@ class FormatNumeral {
           i++;
         }
 
-        return "".concat(this.truncatePrecision(value), " ").concat(units[i]);
+        return `${this.truncatePrecision(value)} ${units[i]}`;
       },
       'bytes-binary': value => {
         const units = ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
@@ -29,21 +29,16 @@ class FormatNumeral {
           i++;
         }
 
-        return "".concat(this.truncatePrecision(value), " ").concat(units[i]);
+        return `${this.truncatePrecision(value)} ${units[i]}`;
       },
       percentages: value => {
-        const cArr = value.toString().split('.');
-
-        if (Number(cArr[0]) === 0) {
-          return "".concat(this.truncatePrecision(value * 100), "%");
-        }
-
-        return "".concat(this.truncatePrecision(value), "%");
+        // The rules here have been modified in version v2.30.0
+        return `${this.truncatePrecision(value * 100)}%`;
       },
       exponential: value => {
         const vExponential = value.toExponential(this.precision + 2);
         const vArr = vExponential.split('e');
-        return "".concat(this.truncatePrecision(Number(vArr[0])), "e").concat(vArr[1]);
+        return `${this.truncatePrecision(Number(vArr[0]))}e${vArr[1]}`;
       }
     }; // A collection of methods for truncating numbers; Methods key: Truncate (strings.Truncate);
 
@@ -93,7 +88,7 @@ class FormatNumeral {
     const cTLength = cArr[1].length; // Fill in any missing `0` at the end.
 
     if (cTLength < this.precision) {
-      return "".concat(cArr[0], ".").concat(cArr[1]).concat('0'.repeat(this.precision - cTLength));
+      return `${cArr[0]}.${cArr[1]}${'0'.repeat(this.precision - cTLength)}`;
     }
 
     return cTruncated.toString();

package/lib/cjs/upload/constants.d.ts

@@ -18,7 +18,7 @@ declare const strings: {
     DRAG_AREA_ILLEGAL: string;
     TRIGGER_AUTO: "auto";
     TRIGGER_CUSTOM: "custom";
-    UPLOAD_TRIGGER: ("custom" | "auto")[];
+    UPLOAD_TRIGGER: ("auto" | "custom")[];
     VALIDATE_STATUS: readonly ["default", "error", "warning", "success"];
     PROMPT_POSITION: readonly ["left", "right", "bottom"];
 };

package/lib/cjs/upload/constants.js

@@ -7,14 +7,14 @@ exports.strings = exports.numbers = exports.cssClasses = void 0;
 
 var _constants = require("../base/constants");
 
-const PREFIX = "".concat(_constants.BASE_CLASS_PREFIX, "-upload");
+const PREFIX = `${_constants.BASE_CLASS_PREFIX}-upload`;
 const FILE_LIST_PIC = 'picture';
 const FILE_LIST_DEFAULT = 'list';
 const PROGRESS_COEFFICIENT = 0.95;
 const cssClasses = {
   PREFIX,
   // WRAPPER: `${PREFIX}-wrapper`,
-  LIST: "".concat(PREFIX, "-list")
+  LIST: `${PREFIX}-list`
 };
 exports.cssClasses = cssClasses;
 const TRIGGER_AUTO = 'auto';

package/lib/cjs/upload/foundation.js

@@ -77,7 +77,7 @@ class UploadFoundation extends _foundation.default {
       fileName
     } = _ref;
     const status = xhr ? xhr.status : 0;
-    const msg = message || "cannot post ".concat(fileName, " to ").concat(action, ", xhr status: ").concat(status, "'");
+    const msg = message || `cannot post ${fileName} to ${action}, xhr status: ${status}'`;
     const err = new Error(msg);
     err.status = status;
     err.method = 'post';

package/lib/cjs/upload/utils.js

@@ -48,11 +48,11 @@ exports.byteMB = byteMB;
 
 function getFileSize(number) {
   if (number < byteKB) {
-    return "".concat((number / byteKB).toFixed(2), "KB");
+    return `${(number / byteKB).toFixed(2)}KB`;
   } else if (number >= byteKB && number < byteMB) {
-    return "".concat((number / byteKB).toFixed(1), "KB");
+    return `${(number / byteKB).toFixed(1)}KB`;
   } else if (number >= byteMB) {
-    return "".concat((number / byteMB).toFixed(1), "MB");
+    return `${(number / byteMB).toFixed(1)}MB`;
   }
 
   return undefined;
@@ -125,7 +125,7 @@ function mapFileTree(items) {
 
         for (let index = 0; index < entries.length; index++) {
           const entry = entries[index];
-          yield _traverseFileTree(entry, "".concat(path).concat(item.name, "/"));
+          yield _traverseFileTree(entry, `${path}${item.name}/`);
         }
       }
     });

package/lib/cjs/utils/getMotionObjFromProps.js

@@ -28,7 +28,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  */
 function getMotionObjFromProps(props) {
   if (typeof props !== 'object' || props === null) {
-    throw new TypeError("props should be object type, got ".concat(typeof props));
+    throw new TypeError(`props should be object type, got ${typeof props}`);
   }
 
   const MOTION_PROPS = ['willEnter', 'didEnter', 'willLeave', 'didLeave', 'onStart', 'onRest', 'state'];
@@ -52,7 +52,7 @@ function getMotionObjFromProps(props) {
           };
         }
       } else {
-        (0, _warning.default)(true, "[Semi] duplicate motion key '".concat(key, "' from motion prop and props"));
+        (0, _warning.default)(true, `[Semi] duplicate motion key '${key}' from motion prop and props`);
       }
     }
   } else if (typeof motionProp === 'function') {

package/lib/cjs/utils/touchPolyfill.js

@@ -30,7 +30,7 @@ const touchEventPolyfill = (touch, touchEvent) => {
       }
 
       if (touch[key]) {
-        (0, _warning.default)(true, "\"The key ".concat(key, "\" exist in Touch."));
+        (0, _warning.default)(true, `"The key ${key}" exist in Touch.`);
       } else {
         touch[key] = value;
       }

package/lib/cjs/utils/uuid.js

@@ -8,7 +8,7 @@ exports.getUuidShort = getUuidShort;
 exports.getUuidv4 = getUuidv4;
 
 function getUuid(prefix) {
-  return "".concat(prefix, "-").concat(new Date().getTime(), "-").concat(Math.random());
+  return `${prefix}-${new Date().getTime()}-${Math.random()}`;
 } // https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript
 
 
@@ -49,5 +49,5 @@ function getUuidShort() {
     randomId += characters.charAt(random);
   }
 
-  return prefix ? "".concat(prefix, "-").concat(randomId) : randomId;
+  return prefix ? `${prefix}-${randomId}` : randomId;
 }

package/lib/cjs/utils/warning.js

@@ -7,6 +7,6 @@ exports.default = warning;
 
 function warning(flag, info) {
   if (flag) {
-    console.warn("Warning: ".concat(info));
+    console.warn(`Warning: ${info}`);
   }
 }

package/lib/es/anchor/constants.js

@@ -1,6 +1,6 @@
 import { BASE_CLASS_PREFIX } from '../base/constants';
 const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-anchor")
+  PREFIX: `${BASE_CLASS_PREFIX}-anchor`
 };
 const strings = {
   SIZE: ['small', 'default'],

package/lib/es/anchor/foundation.js

@@ -43,12 +43,12 @@ export default class AnchorFoundation extends BaseFoundation {
 
 
     this.setScrollHeight = () => {
-      const anchorWrapper = ".".concat(prefixCls, "-link-wrapper");
+      const anchorWrapper = `.${prefixCls}-link-wrapper`;
 
       const anchorNode = this._adapter.getAnchorNode(anchorWrapper);
 
       if (anchorNode) {
-        const scrollHeight = "".concat(anchorNode.scrollHeight, "px");
+        const scrollHeight = `${anchorNode.scrollHeight}px`;
 
         this._adapter.setScrollHeight(scrollHeight);
       }
@@ -233,7 +233,7 @@ export default class AnchorFoundation extends BaseFoundation {
     };
 
     this._setActiveSlide = () => {
-      const activeClass = ".".concat(cssClasses.PREFIX, "-link-title-active");
+      const activeClass = `.${cssClasses.PREFIX}-link-title-active`;
 
       const linkNode = this._adapter.getAnchorNode(activeClass);