@douyinfe/semi-foundation 2.24.2 → 2.25.0-alpha.0

package/lib/es/upload/upload.css

@@ -214,6 +214,9 @@
   position: relative;
   top: -1px;
 }
+.semi-upload-file-card-icon-loading {
+  line-height: 0;
+}
 .semi-upload-file-card-icon-loading .semi-spin-wrapper svg {
   height: 11px;
   width: 11px;
@@ -351,6 +354,12 @@
   left: 50%;
   transform: translate3D(-50%, -50%, 0);
 }
+.semi-upload-picture-file-card-preview-fallback {
+  background-color: var(--semi-color-fill-0);
+  border: 2px var(--semi-color-border);
+  color: var(--semi-color-tertiary);
+  border-radius: var(--semi-border-radius-small);
+}
 .semi-upload-picture-file-card-pic-info {
   display: inline-flex;
   box-sizing: border-box;

package/lib/es/upload/upload.scss

@@ -258,6 +258,7 @@ $module: #{$prefix}-upload;
             }
 
             &-loading {
+                line-height: 0; // make the spin icon in the center
                 .#{$prefix}-spin-wrapper svg {
                     height: $width-upload_file_card-icon;
                     width: $width-upload_file_card-icon;
@@ -424,6 +425,13 @@ $module: #{$prefix}-upload;
                 transform: translate3D(-50%, -50%, 0);
             }
 
+            &-preview-fallback {
+                background-color: $color-upload_pic_add-bg;
+                border: $width-upload_picture_add-border $color-upload-border;
+                color: $color-upload-icon;
+                border-radius: $radius-upload_picture_add;
+            }
+
             &-pic-info {
                 display: inline-flex;
                 box-sizing: border-box;

package/lib/es/upload/utils.js

@@ -4,7 +4,6 @@ var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, gene
       resolve(value);
     });
   }
-
   return new (P || (P = Promise))(function (resolve, reject) {
     function fulfilled(value) {
       try {
@@ -13,7 +12,6 @@ var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, gene
         reject(e);
       }
     }
-
     function rejected(value) {
       try {
         step(generator["throw"](value));
@@ -21,26 +19,22 @@ var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, gene
         reject(e);
       }
     }
-
     function step(result) {
       result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
     }
-
     step((generator = generator.apply(thisArg, _arguments || [])).next());
   });
 };
-
 export const byteKB = 1024;
 export const byteMB = 1048576;
 export 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;
 }
 export function endsWith(str, suffix) {
@@ -51,14 +45,12 @@ export function loopFiles(item) {
     return new Promise((res, rej) => {
       const dirReader = item.createReader();
       let fileList = [];
-
       function sequence() {
         dirReader.readEntries(entries => {
           const entryList = Array.prototype.slice.apply(entries);
-          fileList = fileList.concat(entryList); // Check if all the file has been viewed
-
+          fileList = fileList.concat(entryList);
+          // Check if all the file has been viewed
           const isFinished = !entryList.length;
-
           if (isFinished) {
             res(fileList);
           } else {
@@ -66,7 +58,6 @@ export function loopFiles(item) {
           }
         }, rej);
       }
-
       sequence();
     });
   });
@@ -74,12 +65,10 @@ export function loopFiles(item) {
 export function mapFileTree(items) {
   return __awaiter(this, void 0, void 0, function* () {
     const promises = [];
-
     const _traverseFileTree = (item, path) => __awaiter(this, void 0, void 0, function* () {
-      path = path || ''; //@ts-ignore add path property into item
-
+      path = path || '';
+      //@ts-ignore add path property into item
       item.path = path;
-
       if (item.isFile) {
         promises.push(new Promise((res, rej) => {
           item.file(file => {
@@ -90,8 +79,8 @@ export function mapFileTree(items) {
                 webkitRelativePath: {
                   writable: true
                 }
-              }); //@ts-ignore add webkitRelativePath property into file
-
+              });
+              //@ts-ignore add webkitRelativePath property into file
               file.webkitRelativePath = item.fullPath.replace(/^\//, '');
               Object.defineProperties(file, {
                 webkitRelativePath: {
@@ -99,25 +88,22 @@ export function mapFileTree(items) {
                 }
               });
             }
-
             res(file);
           }, rej);
         }));
       } else if (item.isDirectory) {
         const entries = yield loopFiles(item);
-
         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}/`);
         }
       }
     });
-
     try {
-      const batches = items.map(i => _traverseFileTree(i.webkitGetAsEntry())); // Perform asynchronous operations to add the required promises to the queue
-
-      yield Promise.all(batches); // Execution queue
-
+      const batches = items.map(i => _traverseFileTree(i.webkitGetAsEntry()));
+      // Perform asynchronous operations to add the required promises to the queue
+      yield Promise.all(batches);
+      // Execution queue
       const result = yield Promise.all(promises);
       return result;
     } catch (error) {

package/lib/es/utils/Event.js

@@ -3,39 +3,29 @@ export default class Event {
   constructor() {
     this._eventMap = new Map();
   }
-
   on(event, callback) {
     if (event && typeof callback === 'function') {
       this._eventMap.has(event) || this._eventMap.set(event, []);
-
       this._eventMap.get(event).push(callback);
     }
-
     return this;
   }
-
   once(event, callback) {
     var _this = this;
-
     if (event && typeof callback === 'function') {
       const fn = function () {
         callback(...arguments);
-
         _this.off(event, fn);
       };
-
       this.on(event, fn);
     }
   }
-
   off(event, callback) {
     if (event) {
       if (typeof callback === 'function') {
         const callbacks = this._eventMap.get(event);
-
         if (Array.isArray(callbacks) && callbacks.length) {
-          let index = -1; // eslint-disable-next-line max-depth
-
+          let index = -1;
           while ((index = callbacks.findIndex(cb => cb === callback)) > -1) {
             callbacks.splice(index, 1);
           }
@@ -44,22 +34,16 @@ export default class Event {
         this._eventMap.delete(event);
       }
     }
-
     return this;
   }
-
   emit(event) {
     for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
       args[_key - 1] = arguments[_key];
     }
-
     if (!this._eventMap.has(event)) {
       return false;
     }
-
     this._eventMap.get(event).forEach(callback => callback(...args));
-
     return true;
   }
-
 }

package/lib/es/utils/FocusHandle.d.ts

@@ -1,4 +1,4 @@
-declare type FocusRedirectListener = (element: HTMLElement) => boolean;
+type FocusRedirectListener = (element: HTMLElement) => boolean;
 interface HandleOptions {
     enable?: boolean;
     onFocusRedirectListener?: FocusRedirectListener | FocusRedirectListener[];

package/lib/es/utils/FocusHandle.js

@@ -1,6 +1,5 @@
 import _without from "lodash/without";
 import { isHTMLElement } from "./dom";
-
 /*
 * Usage:
 *   // Eg1: Pass a dom as the tab tarp container.
@@ -21,39 +20,30 @@ import { isHTMLElement } from "./dom";
 class FocusTrapHandle {
   constructor(container, options) {
     var _a;
-
     this.addFocusRedirectListener = listener => {
       this.focusRedirectListenerList.push(listener);
       return () => this.removeFocusRedirectListener(listener);
     };
-
     this.removeFocusRedirectListener = listener => {
       this.focusRedirectListenerList = _without(this.focusRedirectListenerList, listener);
     };
-
     this.destroy = () => {
       var _a;
-
       (_a = this.container) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this.onKeyPress);
-    }; // ---- private func ----
-
-
+    };
+    // ---- private func ----
     this.shouldFocusRedirect = element => {
       if (!this.enable) {
         return false;
       }
-
       for (const listener of this.focusRedirectListenerList) {
         const should = listener(element);
-
         if (!should) {
           return false;
         }
       }
-
       return true;
     };
-
     this.focusElement = (element, event) => {
       const {
         preventScroll
@@ -68,7 +58,6 @@ class FocusTrapHandle {
       if (event && event.key === 'Tab') {
         const focusableElements = FocusTrapHandle.getFocusableElements(this.container);
         const focusableNum = focusableElements.length;
-
         if (focusableNum) {
           // Shift + Tab will move focus backward
           if (event.shiftKey) {
@@ -79,33 +68,26 @@ class FocusTrapHandle {
         }
       }
     };
-
     this.handleContainerTabKeyDown = (focusableElements, event) => {
       const activeElement = FocusTrapHandle.getActiveElement();
       const isLastCurrentFocus = focusableElements[focusableElements.length - 1] === activeElement;
       const redirectForcingElement = focusableElements[0];
-
       if (isLastCurrentFocus && this.shouldFocusRedirect(redirectForcingElement)) {
         this.focusElement(redirectForcingElement, event);
       }
     };
-
     this.handleContainerShiftTabKeyDown = (focusableElements, event) => {
       const activeElement = FocusTrapHandle.getActiveElement();
       const isFirstCurrentFocus = focusableElements[0] === activeElement;
       const redirectForcingElement = focusableElements[focusableElements.length - 1];
-
       if (isFirstCurrentFocus && this.shouldFocusRedirect(redirectForcingElement)) {
         this.focusElement(redirectForcingElement, event);
       }
     };
-
     Object.freeze(options); // prevent user to change options after init;
-
     this.container = container;
     this.options = options;
     this.enable = (_a = options === null || options === void 0 ? void 0 : options.enable) !== null && _a !== void 0 ? _a : true;
-
     this.focusRedirectListenerList = (() => {
       if (options === null || options === void 0 ? void 0 : options.onFocusRedirectListener) {
         return Array.isArray(options.onFocusRedirectListener) ? [...options.onFocusRedirectListener] : [options.onFocusRedirectListener];
@@ -113,34 +95,26 @@ class FocusTrapHandle {
         return [];
       }
     })();
-
     this.container.addEventListener('keydown', this.onKeyPress);
   }
-
   get enable() {
     return this._enable;
   }
-
   set enable(value) {
     this._enable = value;
-  } // ---- static func ----
-
-
+  }
+  // ---- static func ----
   static getFocusableElements(node) {
     if (!isHTMLElement(node)) {
       return [];
     }
-
     const focusableSelectorsList = ["input:not([disabled]):not([tabindex='-1'])", "textarea:not([disabled]):not([tabindex='-1'])", "button:not([disabled]):not([tabindex='-1'])", "a[href]:not([tabindex='-1'])", "select:not([disabled]):not([tabindex='-1'])", "area[href]:not([tabindex='-1'])", "iframe:not([tabindex='-1'])", "object:not([tabindex='-1'])", "*[tabindex]:not([tabindex='-1'])", "*[contenteditable]:not([tabindex='-1'])"];
-    const focusableSelectorsStr = focusableSelectorsList.join(','); // we are not filtered elements which are invisible
-
+    const focusableSelectorsStr = focusableSelectorsList.join(',');
+    // we are not filtered elements which are invisible
     return Array.from(node.querySelectorAll(focusableSelectorsStr));
   }
-
   static getActiveElement() {
     return document ? document.activeElement : null;
   }
-
 }
-
 export default FocusTrapHandle;

package/lib/es/utils/Logger.js

@@ -6,69 +6,49 @@ class Logger {
   constructor(prefix) {
     this._prefix = prefix;
   }
-
   _isEmpty(value) {
     return value === null || value === undefined || value === '';
   }
-
   _baseLog() {
     let method = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'log';
-
     if (typeof console[method] === 'function') {
       for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
         args[_key - 1] = arguments[_key];
       }
-
       const messages = [...args];
-
       if (!this._isEmpty(this._prefix)) {
         messages.unshift(this._prefix, ':');
       }
-
       console[method](...messages);
     }
   }
   /* istanbul ignore next */
-
-
   log() {
     for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
       args[_key2] = arguments[_key2];
     }
-
     this._baseLog('log', ...args);
   }
   /* istanbul ignore next */
-
-
   warn() {
     for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
       args[_key3] = arguments[_key3];
     }
-
     this._baseLog('warn', ...args);
   }
   /* istanbul ignore next */
-
-
   error() {
     for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
       args[_key4] = arguments[_key4];
     }
-
     this._baseLog('error', ...args);
   }
   /* istanbul ignore next */
-
-
   info() {
     for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
       args[_key5] = arguments[_key5];
     }
-
     this._baseLog('info', ...args);
   }
-
 }
-
 export default Logger;

package/lib/es/utils/Store.js

@@ -4,35 +4,26 @@ class Store {
     this._state = Object.assign({}, initialState);
     this._listeners = [];
   }
-
   subscribe(listener) {
     this._listeners.push(listener);
-
     const unsubscribe = () => {
       const index = this._listeners.indexOf(listener);
-
       if (index > -1) {
         this._listeners.splice(index, 1);
       }
     };
-
     return unsubscribe;
   }
-
   setState(state) {
     Object.assign(this._state, Object.assign({}, state));
-
     for (const listener of this._listeners) {
       if (typeof listener === 'function') {
         listener(this._state);
       }
     }
   }
-
   getState() {
     return this._state;
   }
-
 }
-
 export default Store;

package/lib/es/utils/a11y.js

@@ -5,8 +5,8 @@ export function handlePrevent(event) {
 }
 export function isPrintableCharacter(string) {
   return string.length === 1 && string.match(/\S/);
-} // set focus to the target item in item list
-
+}
+// set focus to the target item in item list
 export function setFocusToItem(itemNodes, targetItem) {
   for (let i = 0; i < itemNodes.length; i++) {
     if (itemNodes[i] === targetItem) {
@@ -16,19 +16,18 @@ export function setFocusToItem(itemNodes, targetItem) {
       itemNodes[i].tabIndex = -1;
     }
   }
-} // set focus to the first item in item list
-
+}
+// set focus to the first item in item list
 export function setFocusToFirstItem(itemNodes) {
   itemNodes.length > 0 && setFocusToItem(itemNodes, itemNodes[0]);
-} // set focus to the last item in item list
-
+}
+// set focus to the last item in item list
 export function setFocusToLastItem(itemNodes) {
   itemNodes.length > 0 && setFocusToItem(itemNodes, itemNodes[itemNodes.length - 1]);
-} // set focus to the previous item in item list
-
+}
+// set focus to the previous item in item list
 export function setFocusToPreviousMenuItem(itemNodes, currentItem) {
   let newMenuItem, index;
-
   if (itemNodes.length > 0) {
     if (currentItem === itemNodes[0]) {
       newMenuItem = itemNodes[itemNodes.length - 1];
@@ -36,14 +35,12 @@ export function setFocusToPreviousMenuItem(itemNodes, currentItem) {
       index = itemNodes.indexOf(currentItem);
       newMenuItem = itemNodes[index - 1];
     }
-
     setFocusToItem(itemNodes, newMenuItem);
   }
-} // set focus to the next item in item list
-
+}
+// set focus to the next item in item list
 export function setFocusToNextMenuitem(itemNodes, currentItem) {
   let newMenuItem, index;
-
   if (itemNodes.length > 0) {
     if (currentItem === itemNodes[itemNodes.length - 1]) {
       newMenuItem = itemNodes[0];
@@ -51,54 +48,44 @@ export function setFocusToNextMenuitem(itemNodes, currentItem) {
       index = itemNodes.indexOf(currentItem);
       newMenuItem = itemNodes[index + 1];
     }
-
     setFocusToItem(itemNodes, newMenuItem);
   }
 }
 export function findIndexByCharacter(itemList, curItem, firstCharList, char) {
   let start, index;
-
   if (!itemList || !firstCharList || !char || char.length > 1) {
     return -1;
   }
-
-  char = char.toLowerCase(); // Get start index for search based on position of currentItem
-
+  char = char.toLowerCase();
+  // Get start index for search based on position of currentItem
   start = itemList.indexOf(curItem) + 1;
-
   if (start >= itemList.length) {
     start = 0;
-  } // Check remaining menu items in the menu
-
-
-  index = firstCharList.indexOf(char, start); // If not found in remaining menu items, check from beginning
-
+  }
+  // Check remaining menu items in the menu
+  index = firstCharList.indexOf(char, start);
+  // If not found in remaining menu items, check from beginning
   if (index === -1) {
     index = firstCharList.indexOf(char, 0);
   }
-
   return index >= 0 ? index : -1;
 }
 export function getAncestorNodeByRole(curElement, role) {
   if (!curElement) {
     return null;
   }
-
   while (curElement.parentElement && _get(curElement.parentElement, 'attributes.role.value', '') !== role) {
     curElement = curElement.parentElement;
   }
-
   return curElement.parentElement;
-} // According to the Id, find the corresponding data-popupid element
-
+}
+// According to the Id, find the corresponding data-popupid element
 export function getMenuButton(focusableEle, Id) {
   for (let i = 0; i < focusableEle.length; i++) {
     const curAriDescribedby = focusableEle[i].attributes['data-popupid'];
-
     if (curAriDescribedby && curAriDescribedby.value === Id) {
       return focusableEle[i];
     }
   }
-
   return null;
 }

package/lib/es/utils/array.d.ts

@@ -11,12 +11,12 @@
  * => ['b', 'b']
  */
 export declare function pullAll(arrayA: any[], arrayB: any[]): any[];
-declare type CompareFn<T> = (a: T, b: T) => number;
+type CompareFn<T> = (a: T, b: T, sortOrder: 'ascend' | 'descend') => number;
 /**
  * Adapt the descending order
  * @param {Function} fn
  * @param {String} order
  * @returns
  */
-export declare function withOrderSort<T = any>(fn: CompareFn<T>, order?: string): CompareFn<T>;
+export declare function withOrderSort<T = any>(fn: CompareFn<T>, order?: 'ascend' | 'descend'): (a: T, b: T) => number;
 export {};

package/lib/es/utils/array.js

@@ -11,7 +11,6 @@ import { pullAll as setPullAll } from './set';
  * console.log(result);
  * => ['b', 'b']
  */
-
 export function pullAll(arrayA, arrayB) {
   if (arrayA !== null && arrayA.length && arrayB !== null && arrayB.length) {
     const setA = new Set(arrayA);
@@ -19,7 +18,6 @@ export function pullAll(arrayA, arrayB) {
     const resultSet = setPullAll(setA, setB);
     return Array.from(resultSet);
   }
-
   return arrayA;
 }
 /**
@@ -28,19 +26,16 @@ export function pullAll(arrayA, arrayB) {
  * @param {String} order
  * @returns
  */
-
 export function withOrderSort(fn) {
   let order = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'ascend';
-
   switch (order) {
     case 'descend':
       return (a, b) => {
-        const result = Number(fn(a, b));
+        const result = Number(fn(a, b, order));
         return result !== 0 ? -result : result;
       };
-
     case 'ascend':
     default:
-      return fn;
+      return (a, b) => fn(a, b, order);
   }
 }

package/lib/es/utils/classnames.js

@@ -2,35 +2,25 @@ import _map from "lodash/map";
 import _filter from "lodash/filter";
 import _split from "lodash/split";
 import classnames from 'classnames';
-
 function addClass(rawCls) {
   const clss = _split(rawCls, /\s+/);
-
   for (var _len = arguments.length, srcClss = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
     srcClss[_key - 1] = arguments[_key];
   }
-
   const validClss = _filter(srcClss, cls => !clss.includes(cls));
-
   return classnames(rawCls, ...validClss);
 }
-
 function removeClass(rawCls) {
   const clss = _split(rawCls, /\s+/);
-
   for (var _len2 = arguments.length, srcClss = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
     srcClss[_key2 - 1] = arguments[_key2];
   }
-
   _map(srcClss, cls => {
     const index = clss.indexOf(cls);
-
     if (index > -1) {
       clss.splice(index, 1);
     }
   });
-
   return classnames(...clss);
 }
-
 export { addClass, removeClass };