@douyinfe/semi-foundation 2.28.0-beta.0 → 2.28.0

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

@@ -0,0 +1,6 @@
+export declare const byteKB = 1024;
+export declare const byteMB = 1048576;
+export declare function getFileSize(number: number): string;
+export declare function endsWith(str: string, suffix: string): boolean;
+export declare function loopFiles(item: FileSystemDirectoryEntry): Promise<Array<FileSystemEntry>>;
+export declare function mapFileTree(items: Array<DataTransferItem>): Promise<Array<File>>;

package/lib/es/upload/utils.js

@@ -0,0 +1,129 @@
+var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        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 `${(number / byteKB).toFixed(2)}KB`;
+  } else if (number >= byteKB && number < byteMB) {
+    return `${(number / byteKB).toFixed(1)}KB`;
+  } else if (number >= byteMB) {
+    return `${(number / byteMB).toFixed(1)}MB`;
+  }
+
+  return undefined;
+}
+export function endsWith(str, suffix) {
+  return str.indexOf(suffix, str.length - suffix.length) !== -1;
+}
+export function loopFiles(item) {
+  return __awaiter(this, void 0, void 0, function* () {
+    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
+
+          const isFinished = !entryList.length;
+
+          if (isFinished) {
+            res(fileList);
+          } else {
+            sequence();
+          }
+        }, rej);
+      }
+
+      sequence();
+    });
+  });
+}
+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
+
+      item.path = path;
+
+      if (item.isFile) {
+        promises.push(new Promise((res, rej) => {
+          item.file(file => {
+            if (item.fullPath && !file.webkitRelativePath) {
+              // This file is provided to the user based on the relative path of the drag and drop folder
+              // If you drag the Upload folder, the path of the internal file may be Upload/File/a.png, etc
+              Object.defineProperties(file, {
+                webkitRelativePath: {
+                  writable: true
+                }
+              }); //@ts-ignore add webkitRelativePath property into file
+
+              file.webkitRelativePath = item.fullPath.replace(/^\//, '');
+              Object.defineProperties(file, {
+                webkitRelativePath: {
+                  writable: false
+                }
+              });
+            }
+
+            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, `${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 result = yield Promise.all(promises);
+      return result;
+    } catch (error) {
+      console.warn('Captured error while loop directory.');
+      console.error(error);
+      return [];
+    }
+  });
+}

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

@@ -0,0 +1,7 @@
+export default class Event {
+    _eventMap: Map<string, ((...arg: any) => void)[]>;
+    on(event: string, callback: (...arg: any) => void): this;
+    once(event: string, callback: (...arg: any) => void): void;
+    off(event: string, callback?: null | (() => void)): this;
+    emit(event: string, ...args: any[]): boolean;
+}

package/lib/es/utils/Event.js

@@ -0,0 +1,65 @@
+import isNullOrUndefined from "./isNullOrUndefined";
+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
+
+          while ((index = callbacks.findIndex(cb => cb === callback)) > -1) {
+            callbacks.splice(index, 1);
+          }
+        }
+      } else if (isNullOrUndefined(callback)) {
+        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

@@ -0,0 +1,26 @@
+declare type FocusRedirectListener = (element: HTMLElement) => boolean;
+interface HandleOptions {
+    enable?: boolean;
+    onFocusRedirectListener?: FocusRedirectListener | FocusRedirectListener[];
+    preventScroll?: boolean;
+}
+declare class FocusTrapHandle {
+    container: HTMLElement;
+    private options;
+    private focusRedirectListenerList;
+    private _enable;
+    constructor(container: HTMLElement, options?: HandleOptions);
+    addFocusRedirectListener: (listener: FocusRedirectListener) => () => void;
+    removeFocusRedirectListener: (listener: FocusRedirectListener) => void;
+    get enable(): boolean;
+    set enable(value: boolean);
+    destroy: () => void;
+    private shouldFocusRedirect;
+    private focusElement;
+    private onKeyPress;
+    private handleContainerTabKeyDown;
+    private handleContainerShiftTabKeyDown;
+    static getFocusableElements(node: HTMLElement): HTMLElement[];
+    static getActiveElement(): HTMLElement | null;
+}
+export default FocusTrapHandle;

package/lib/es/utils/FocusHandle.js

@@ -0,0 +1,146 @@
+import _without from "lodash/without";
+import { isHTMLElement } from "./dom";
+
+/*
+* Usage:
+*   // Eg1: Pass a dom as the tab tarp container.
+*  const handle = new FocusTrapHandle(container, { enable: true });
+*
+*   // Eg2: The focus redirect listener will be triggered when user pressed tab whiling last focusable dom is focusing in trap dom, return false to cancel redirect and use the browser normal tab focus index.
+*   handle.addFocusRedirectListener((e)=>{
+*       return true; // return false to prevent redirect on target DOM;
+*   });
+*
+*   // Eg3: Set it to false in order to disable tab tarp at any moment;
+*   handle.enable = true;
+*
+*   // Eg4: Destroy instance when component is unmounting for saving resource;
+*   handle.destroy();
+*
+* */
+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 ----
+
+
+    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
+      } = this.options;
+      element === null || element === void 0 ? void 0 : element.focus({
+        preventScroll
+      });
+      event.preventDefault(); // prevent browser default tab move behavior
+    };
+
+    this.onKeyPress = event => {
+      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) {
+            this.handleContainerShiftTabKeyDown(focusableElements, event);
+          } else {
+            this.handleContainerTabKeyDown(focusableElements, event);
+          }
+        }
+      }
+    };
+
+    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];
+      } else {
+        return [];
+      }
+    })();
+
+    this.container.addEventListener('keydown', this.onKeyPress);
+  }
+
+  get enable() {
+    return this._enable;
+  }
+
+  set enable(value) {
+    this._enable = value;
+  } // ---- 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
+
+    return Array.from(node.querySelectorAll(focusableSelectorsStr));
+  }
+
+  static getActiveElement() {
+    return document ? document.activeElement : null;
+  }
+
+}
+
+export default FocusTrapHandle;

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

@@ -0,0 +1,15 @@
+declare class Logger {
+    _prefix: string;
+    /**
+     * specify prefix
+     * @param {string} prefix
+     */
+    constructor(prefix: string);
+    _isEmpty(value: any): boolean;
+    _baseLog(method?: string, ...args: any[]): void;
+    log(...args: any[]): void;
+    warn(...args: any[]): void;
+    error(...args: any[]): void;
+    info(...args: any[]): void;
+}
+export default Logger;

package/lib/es/utils/Logger.js

@@ -0,0 +1,74 @@
+class Logger {
+  /**
+   * specify prefix
+   * @param {string} prefix
+   */
+  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.d.ts

@@ -0,0 +1,9 @@
+declare class Store<T = Record<string, any>> {
+    _state: T;
+    _listeners: any[];
+    constructor(initialState: T);
+    subscribe(listener: (state: T) => () => void): () => void;
+    setState(state: T): void;
+    getState(): T;
+}
+export default Store;

package/lib/es/utils/Store.js

@@ -0,0 +1,38 @@
+/* istanbul ignore next */
+class Store {
+  constructor(initialState) {
+    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.d.ts

@@ -0,0 +1,10 @@
+export declare function handlePrevent(event: any): void;
+export declare function isPrintableCharacter(string: string): RegExpMatchArray;
+export declare function setFocusToItem(itemNodes: HTMLElement[], targetItem: HTMLElement): void;
+export declare function setFocusToFirstItem(itemNodes: HTMLElement[]): void;
+export declare function setFocusToLastItem(itemNodes: HTMLElement[]): void;
+export declare function setFocusToPreviousMenuItem(itemNodes: HTMLElement[], currentItem: HTMLElement): void;
+export declare function setFocusToNextMenuitem(itemNodes: HTMLElement[], currentItem: HTMLElement): void;
+export declare function findIndexByCharacter(itemList: HTMLElement[], curItem: HTMLElement, firstCharList: string[], char: string): number;
+export declare function getAncestorNodeByRole(curElement: Element, role: string): Element;
+export declare function getMenuButton(focusableEle: NodeListOf<HTMLElement>, Id: string): HTMLElement;

package/lib/es/utils/a11y.js

@@ -0,0 +1,104 @@
+import _get from "lodash/get";
+export function handlePrevent(event) {
+  event.stopPropagation();
+  event.preventDefault();
+}
+export function isPrintableCharacter(string) {
+  return string.length === 1 && string.match(/\S/);
+} // 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) {
+      itemNodes[i].tabIndex = 0;
+      itemNodes[i].focus();
+    } else {
+      itemNodes[i].tabIndex = -1;
+    }
+  }
+} // 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
+
+export function setFocusToLastItem(itemNodes) {
+  itemNodes.length > 0 && setFocusToItem(itemNodes, itemNodes[itemNodes.length - 1]);
+} // 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];
+    } else {
+      index = itemNodes.indexOf(currentItem);
+      newMenuItem = itemNodes[index - 1];
+    }
+
+    setFocusToItem(itemNodes, newMenuItem);
+  }
+} // 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];
+    } else {
+      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
+
+  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
+
+  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
+
+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

@@ -0,0 +1,22 @@
+/**
+ * arrayA remove arrayB
+ * @param {array} arrayA
+ * @param {array} arrayB
+ * @returns {array}  new array
+ *
+ * const arrayA = ['a', 'b', 'c', 'a', 'b', 'c'];
+ *
+ * const result = pullAll(arrayA, ['a', 'c'])
+ * console.log(result);
+ * => ['b', 'b']
+ */
+export declare function pullAll(arrayA: any[], arrayB: any[]): any[];
+declare type CompareFn<T> = (a: T, b: T) => 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 {};