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

package/lib/es/navigation/foundation.js

@@ -0,0 +1,277 @@
+import _get from "lodash/get";
+
+/* eslint-disable max-depth */
+
+/* eslint-disable max-len */
+import BaseFoundation from '../base/foundation';
+import NavItem from './NavItem';
+import { strings } from './constants';
+import isNullOrUndefined from '../utils/isNullOrUndefined';
+export default class NavigationFoundation extends BaseFoundation {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+  }
+  /* istanbul ignore next */
+
+
+  static getZeroParentKeys() {
+    let itemKeysMap = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const willAddKeys = [];
+
+    for (var _len = arguments.length, itemKeys = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      itemKeys[_key - 1] = arguments[_key];
+    }
+
+    if (itemKeys.length) {
+      for (const itemKey of itemKeys) {
+        if (Array.isArray(itemKeysMap[itemKey]) && itemKeysMap[itemKey].length) {
+          const levelZeroParentKey = itemKeysMap[itemKey][0];
+
+          if (!isNullOrUndefined(levelZeroParentKey)) {
+            willAddKeys.push(levelZeroParentKey);
+          }
+        }
+      }
+    }
+
+    return willAddKeys;
+  }
+
+  static buildItemKeysMap() {
+    let items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    let keysMap = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    let parentKeys = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+    let keyPropName = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'itemKey';
+
+    if (Array.isArray(items) && items.length) {
+      for (const item of items) {
+        if (Array.isArray(item)) {
+          NavigationFoundation.buildItemKeysMap(item, keysMap, [...parentKeys], keyPropName);
+        } else {
+          let itemKey;
+
+          if (item && typeof item === 'object') {
+            itemKey = item[keyPropName] || item.props && item.props[keyPropName];
+          }
+
+          if (itemKey) {
+            keysMap[itemKey] = [...parentKeys];
+
+            if (Array.isArray(item.items) && item.items.length) {
+              NavigationFoundation.buildItemKeysMap(item.items, keysMap, [...parentKeys, itemKey], keyPropName);
+            } else if (item.props && item.props.children) {
+              const children = Array.isArray(item.props.children) ? item.props.children : [item.props.children];
+              NavigationFoundation.buildItemKeysMap(children, keysMap, [...parentKeys, itemKey], keyPropName);
+            }
+          }
+        }
+      }
+    }
+
+    return keysMap;
+  }
+  /**
+   * init is called in constructor and componentDidMount.
+   * if you want to update state in constructor, please add it to return object;
+   * if you want to update state in componentDidMount, please call adapter in else logic.
+   * @param {*} lifecycle
+   * @returns
+   */
+
+
+  init(lifecycle) {
+    const {
+      defaultSelectedKeys,
+      selectedKeys
+    } = this.getProps();
+    let willSelectedKeys = selectedKeys || defaultSelectedKeys || [];
+    const {
+      itemKeysMap,
+      willOpenKeys,
+      formattedItems
+    } = this.getCalcState();
+    const parentSelectKeys = this.selectLevelZeroParentKeys(itemKeysMap, willSelectedKeys);
+    willSelectedKeys = willSelectedKeys.concat(parentSelectKeys);
+
+    if (lifecycle === 'constructor') {
+      return {
+        selectedKeys: willSelectedKeys,
+        itemKeysMap,
+        openKeys: willOpenKeys,
+        items: formattedItems
+      };
+    } else {
+      this._adapter.updateSelectedKeys(willSelectedKeys);
+
+      this._adapter.setItemKeysMap(itemKeysMap);
+
+      this._adapter.updateOpenKeys(willOpenKeys);
+
+      this._adapter.updateItems(formattedItems);
+
+      this._adapter.setItemsChanged(true);
+    }
+
+    return undefined;
+  }
+  /**
+   * Get the state to be calculated
+   */
+
+
+  getCalcState() {
+    const {
+      itemKeysMap,
+      formattedItems
+    } = this.getFormattedItems();
+    const willOpenKeys = this.getWillOpenKeys(itemKeysMap);
+    return {
+      itemKeysMap,
+      willOpenKeys,
+      formattedItems
+    };
+  }
+  /**
+   * Calculate formatted items and itemsKeyMap
+   */
+
+
+  getFormattedItems() {
+    const {
+      items,
+      children
+    } = this.getProps();
+    const formattedItems = this.formatItems(items);
+    const willHandleItems = Array.isArray(items) && items.length ? formattedItems : children;
+    const itemKeysMap = NavigationFoundation.buildItemKeysMap(willHandleItems);
+    return {
+      itemKeysMap,
+      formattedItems
+    };
+  }
+  /**
+   * Calculate the keys that will need to be opened soon
+   * @param {*} itemKeysMap
+   */
+
+
+  getWillOpenKeys(itemKeysMap) {
+    const {
+      defaultOpenKeys,
+      openKeys,
+      defaultSelectedKeys,
+      selectedKeys,
+      mode
+    } = this.getProps();
+    let willOpenKeys = openKeys || defaultOpenKeys || [];
+
+    if (!(Array.isArray(defaultOpenKeys) || Array.isArray(openKeys)) && mode === strings.MODE_VERTICAL && (Array.isArray(defaultSelectedKeys) || Array.isArray(selectedKeys))) {
+      const currentSelectedKeys = Array.isArray(selectedKeys) ? selectedKeys : defaultSelectedKeys;
+      willOpenKeys = this.getShouldOpenKeys(itemKeysMap, currentSelectedKeys);
+    }
+
+    return [...willOpenKeys];
+  }
+
+  getShouldOpenKeys() {
+    let itemKeysMap = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    let selectedKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    const willOpenKeySet = new Set();
+
+    if (Array.isArray(selectedKeys) && selectedKeys.length) {
+      selectedKeys.forEach(item => {
+        if (item) {
+          const parentKeys = _get(itemKeysMap, item);
+
+          if (Array.isArray(parentKeys)) {
+            parentKeys.forEach(k => willOpenKeySet.add(k));
+          }
+        }
+      });
+    }
+
+    return [...willOpenKeySet];
+  }
+
+  destroy() {} // eslint-disable-line
+
+
+  selectLevelZeroParentKeys(itemKeysMap) {
+    const _itemKeysMap = isNullOrUndefined(itemKeysMap) ? this.getState('itemKeysMap') : itemKeysMap; // console.log(itemKeysMap);
+
+
+    const willAddKeys = [];
+
+    for (var _len2 = arguments.length, itemKeys = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+      itemKeys[_key2 - 1] = arguments[_key2];
+    }
+
+    if (itemKeys.length) {
+      for (const itemKey of itemKeys) {
+        if (Array.isArray(_itemKeysMap[itemKey]) && _itemKeysMap[itemKey].length) {
+          const levelZeroParentKey = _itemKeysMap[itemKey][0];
+
+          if (!isNullOrUndefined(levelZeroParentKey)) {
+            willAddKeys.push(levelZeroParentKey);
+          }
+        }
+      }
+    }
+
+    if (willAddKeys.length) {
+      return willAddKeys;
+    }
+
+    return [];
+  }
+
+  formatItems() {
+    let items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    const formattedItems = [];
+
+    for (const item of items) {
+      formattedItems.push(new NavItem(item));
+    }
+
+    return formattedItems;
+  }
+
+  handleSelect(data) {
+    this._adapter.notifySelect(data);
+  }
+  /* istanbul ignore next */
+
+
+  judgeIfOpen(openKeys, items) {
+    let shouldBeOpen = false;
+
+    const _openKeys = Array.isArray(openKeys) ? openKeys : openKeys && [openKeys];
+
+    if (_openKeys && Array.isArray(items) && items.length) {
+      for (const item of items) {
+        shouldBeOpen = _openKeys.includes(item.itemKey) || this.judgeIfOpen(_openKeys, item.items);
+
+        if (shouldBeOpen) {
+          break;
+        }
+      }
+    }
+
+    return shouldBeOpen;
+  }
+
+  handleCollapseChange() {
+    const isCollapsed = !this.getState('isCollapsed');
+
+    if (!this._isControlledComponent('isCollapsed')) {
+      this._adapter.setIsCollapsed(isCollapsed);
+    }
+
+    this._adapter.notifyCollapseChange(isCollapsed);
+  }
+
+  handleItemsChange(isChanged) {
+    this._adapter.setItemsChanged(isChanged);
+  }
+
+}

package/lib/es/navigation/itemFoundation.d.ts

@@ -0,0 +1,50 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export interface ItemProps {
+    text?: any;
+    itemKey?: any;
+    icon?: any;
+    toggleIcon?: string;
+    indent?: boolean | number;
+    isCollapsed?: boolean;
+    isSubNav?: boolean;
+    link?: string;
+    linkOptions?: Record<string, any>;
+    disabled?: boolean;
+    children?: any;
+}
+export interface SelectedItemProps<Props = ItemProps> {
+    itemKey: string | number;
+    text?: any;
+    selectedKeys?: string | number[];
+    selectedItems?: Props[];
+    domEvent?: any;
+}
+export interface ItemAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    cloneDeep(value: any, customizer?: (value: any) => void): any;
+    updateTooltipShow(showTooltip: boolean): void;
+    updateSelected(selected: boolean): void;
+    updateGlobalSelectedKeys(keys: string[]): void;
+    getSelectedKeys(): string[];
+    getSelectedKeysIsControlled(): boolean;
+    notifyGlobalOnSelect(item: SelectedItemProps): void;
+    notifyGlobalOnClick(item: SelectedItemProps): void;
+    notifyClick(item: SelectedItemProps): void;
+    notifyMouseEnter(e: any): void;
+    notifyMouseLeave(e: any): void;
+    getIsCollapsed(): boolean;
+    getSelected(): boolean;
+    getIsOpen(): boolean;
+}
+export default class ItemFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<ItemAdapter<P, S>, P, S> {
+    _timer: number;
+    _mounted: boolean;
+    constructor(adapter: ItemAdapter<P, S>);
+    init(): void;
+    destroy(): void;
+    isValidKey(itemKey: string): boolean;
+    handleClick(e: any): void;
+    /**
+     * A11y: simulate item click
+     */
+    handleKeyPress(e: any): void;
+}

package/lib/es/navigation/itemFoundation.js

@@ -0,0 +1,89 @@
+import _get from "lodash/get";
+import BaseFoundation from '../base/foundation';
+import isEnterPress from '../utils/isEnterPress';
+export default class ItemFoundation extends BaseFoundation {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+  }
+
+  init() {
+    this._timer = null;
+    this._mounted = true;
+  }
+
+  destroy() {
+    this._mounted = false;
+  }
+
+  isValidKey(itemKey) {
+    // eslint-disable-next-line eqeqeq
+    return itemKey != null && (typeof itemKey === 'string' || typeof itemKey === 'number');
+  }
+
+  handleClick(e) {
+    const {
+      isSubNav,
+      itemKey,
+      text,
+      disabled
+    } = this.getProps();
+
+    if (disabled) {
+      return;
+    }
+
+    if (!isSubNav && this.isValidKey(itemKey) && !this._adapter.getSelectedKeysIsControlled() && !this._adapter.getSelected()) {
+      this._adapter.updateSelected(true);
+    }
+
+    const selectedKeys = [itemKey]; // If the current item is subNav, there is no need to trigger the global onSelect/onClick event, instead, the SubNav component will trigger the click event
+
+    if (!isSubNav) {
+      if (!this._adapter.getSelected()) {
+        // internal-issues:51
+        const selectedItems = [this._adapter.cloneDeep(this.getProps())];
+
+        this._adapter.notifyGlobalOnSelect({
+          itemKey,
+          selectedKeys,
+          selectedItems,
+          domEvent: e
+        });
+      }
+
+      this._adapter.notifyGlobalOnClick({
+        itemKey,
+        text,
+        domEvent: e
+      });
+    }
+
+    this._adapter.notifyClick({
+      itemKey,
+      text,
+      domEvent: e
+    });
+  }
+  /**
+   * A11y: simulate item click
+   */
+
+
+  handleKeyPress(e) {
+    if (isEnterPress(e)) {
+      const {
+        link,
+        linkOptions
+      } = this.getProps();
+
+      const target = _get(linkOptions, 'target', '_self');
+
+      this.handleClick(e);
+
+      if (typeof link === 'string') {
+        target === '_blank' ? window.open(link) : window.location.href = link;
+      }
+    }
+  }
+
+}

package/lib/es/navigation/subNavFoundation.d.ts

@@ -0,0 +1,45 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export interface OnOpenChangeData {
+    itemKey: string | number;
+    openKeys: (string | number)[];
+    isOpen: boolean;
+}
+export interface OnClickData extends OnOpenChangeData {
+    domEvent: any;
+}
+export interface OnSelectData extends OnOpenChangeData {
+    domEvent: any;
+}
+export interface SubNavAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    updateIsHovered(isHovered: boolean): void;
+    getOpenKeys(): (string | number)[];
+    getOpenKeysIsControlled(): boolean;
+    getCanUpdateOpenKeys(): boolean;
+    updateOpen(isOpen: boolean): void;
+    notifyGlobalOpenChange(data: OnOpenChangeData): void;
+    notifyGlobalOnSelect(data: OnSelectData): void;
+    notifyGlobalOnClick(data: OnClickData): void;
+    getIsSelected(itemKey: string | number): boolean;
+    getIsOpen(): boolean;
+}
+export default class SubNavFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<SubNavAdapter<P, S>, P, S> {
+    constructor(adapter: SubNavAdapter<P, S>);
+    _timer: number;
+    init(): void;
+    destroy(): void;
+    clearDelayTimer(): void;
+    isValidKey(itemKey: string | number): boolean;
+    handleDropdownVisibleChange(visible: boolean): void;
+    /**
+     *
+     * @param {Event} e
+     * @param {HTMLElement} titleRef
+     */
+    handleClick(e: any, titleRef: any): void;
+    /**
+     * A11y: simulate sub nav click
+     * @param e
+     * @param titleRef
+     */
+    handleKeyPress(e: any, titleRef: any): void;
+}

package/lib/es/navigation/subNavFoundation.js

@@ -0,0 +1,138 @@
+import BaseFoundation from '../base/foundation';
+import isEnterPress from '../utils/isEnterPress';
+
+const addKeys = function addKeys() {
+  let originKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  const keySet = new Set(originKeys);
+
+  for (var _len = arguments.length, willAddKeys = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    willAddKeys[_key - 1] = arguments[_key];
+  }
+
+  willAddKeys.forEach(key => key && keySet.add(key));
+  return Array.from(keySet);
+};
+
+const removeKeys = function removeKeys() {
+  let originKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  const keySet = new Set(originKeys);
+
+  for (var _len2 = arguments.length, willRemoveKeys = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+    willRemoveKeys[_key2 - 1] = arguments[_key2];
+  }
+
+  willRemoveKeys.forEach(key => key && keySet.delete(key));
+  return Array.from(keySet);
+};
+
+export default class SubNavFoundation extends BaseFoundation {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+  }
+
+  init() {
+    // this.log('invoke SubNavFoundation init()');
+    this._timer = null;
+  }
+
+  destroy() {} // eslint-disable-line
+
+
+  clearDelayTimer() {
+    if (this._timer) {
+      clearTimeout(this._timer);
+      this._timer = null;
+    }
+  }
+
+  isValidKey(itemKey) {
+    // eslint-disable-next-line eqeqeq
+    return itemKey != null && (typeof itemKey === 'number' || typeof itemKey === 'string');
+  }
+
+  handleDropdownVisibleChange(visible) {
+    const itemKey = this.getProp('itemKey');
+
+    const openKeysIsControlled = this._adapter.getOpenKeysIsControlled();
+
+    const canUpdateOpenKeys = this._adapter.getCanUpdateOpenKeys();
+
+    const rawOpenKeys = this._adapter.getOpenKeys();
+
+    const openKeys = visible ? addKeys(rawOpenKeys, itemKey) : removeKeys(rawOpenKeys, itemKey);
+    this.clearDelayTimer();
+
+    if (!openKeysIsControlled) {
+      if (canUpdateOpenKeys) {
+        this._adapter.updateOpen(visible);
+      } // this._adapter.updateIsHovered(visible);
+
+    }
+
+    this._adapter.notifyGlobalOpenChange({
+      itemKey,
+      openKeys,
+      isOpen: visible
+    });
+  }
+  /**
+   *
+   * @param {Event} e
+   * @param {HTMLElement} titleRef
+   */
+
+
+  handleClick(e, titleRef) {
+    const {
+      itemKey,
+      disabled
+    } = this.getProps();
+
+    if (disabled) {
+      return;
+    } // this.log(e, titleRef, titleRef.contains(e.target));
+
+
+    const clickedDomIsTitle = titleRef && titleRef.contains(e.target);
+    let isOpen = Boolean(this._adapter.getIsOpen());
+
+    if (!clickedDomIsTitle) {
+      isOpen = false;
+    } else {
+      isOpen = !isOpen;
+    }
+
+    const openKeys = isOpen ? addKeys(this._adapter.getOpenKeys(), itemKey) : removeKeys(this._adapter.getOpenKeys(), itemKey);
+    const cbVal = {
+      itemKey,
+      openKeys,
+      isOpen,
+      domEvent: e
+    };
+
+    const openKeysIsControlled = this._adapter.getOpenKeysIsControlled();
+
+    const canUpdateOpenKeys = this._adapter.getCanUpdateOpenKeys();
+
+    if (!openKeysIsControlled && canUpdateOpenKeys) {
+      this._adapter.updateOpen(isOpen);
+    }
+
+    this._adapter.notifyGlobalOpenChange(cbVal);
+
+    this._adapter.notifyGlobalOnClick(cbVal);
+  }
+  /**
+   * A11y: simulate sub nav click
+   * @param e
+   * @param titleRef
+   */
+
+
+  handleKeyPress(e, titleRef) {
+    if (isEnterPress(e)) {
+      this.handleClick(e, titleRef);
+    }
+  }
+
+}

package/lib/es/notification/constants.d.ts

@@ -0,0 +1,14 @@
+declare const cssClasses: {
+    WRAPPER: string;
+    LIST: string;
+    NOTICE: string;
+};
+declare const strings: {
+    types: string[];
+    themes: string[];
+    directions: readonly ["ltr", "rtl"];
+};
+declare const numbers: {
+    duration: number;
+};
+export { cssClasses, strings, numbers };

package/lib/es/notification/constants.js

@@ -0,0 +1,16 @@
+import { BASE_CLASS_PREFIX } from '../base/constants';
+const cssClasses = {
+  WRAPPER: `${BASE_CLASS_PREFIX}-notification-wrapper`,
+  LIST: `${BASE_CLASS_PREFIX}-notification-list`,
+  NOTICE: `${BASE_CLASS_PREFIX}-notification-notice`
+};
+const strings = {
+  types: ['warning', 'success', 'info', 'error', 'default'],
+  themes: ['normal', 'light'],
+  directions: ['ltr', 'rtl']
+};
+const numbers = {
+  duration: 3 // default close time, unit: s
+
+};
+export { cssClasses, strings, numbers };

package/lib/es/notification/notificationFoundation.d.ts

@@ -0,0 +1,47 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+import { strings } from '../notification/constants';
+export declare type NoticePosition = 'top' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+export declare type NoticeType = 'warning' | 'success' | 'info' | 'error' | 'default';
+export declare type NoticeTheme = 'light' | 'normal';
+export interface NoticeProps {
+    duration?: number;
+    id?: string | number;
+    title?: any;
+    content?: any;
+    position?: NoticePosition;
+    type?: NoticeType;
+    onClick?: (e: any) => void;
+    onClose?: () => void;
+    onCloseClick?: (id: string | number) => void;
+    showClose?: boolean;
+    close?: (id: string | number) => void;
+    zIndex?: number;
+    icon?: any;
+    getPopupContainer?: () => HTMLElement;
+    theme?: NoticeTheme;
+    onHookClose?: () => void;
+    direction?: typeof strings.directions[number];
+    className?: string;
+    style?: any;
+}
+export interface NoticeState {
+    visible: boolean;
+}
+export interface NoticeInstance extends NoticeProps {
+    motion?: boolean;
+}
+export interface NoticeAdapter extends DefaultAdapter<NoticeProps, NoticeState> {
+    notifyWrapperToRemove: (id: string) => void;
+    notifyClose: () => void;
+}
+export default class NotificationFoundation extends BaseFoundation<NoticeAdapter> {
+    _timer: ReturnType<typeof setTimeout> | null;
+    _id: string | null;
+    constructor(adapter: NoticeAdapter);
+    init(): void;
+    destroy(): void;
+    _startCloseTimer(): void;
+    close(e?: any): void;
+    _clearCloseTimer(): void;
+    restartCloseTimer(): void;
+}