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

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

@@ -0,0 +1,9 @@
+declare const cssClasses: {
+    PREFIX: string;
+};
+declare const strings: {
+    SIZE: string[];
+    LAYOUT: string[];
+    ALIGN: string[];
+};
+export { cssClasses, strings };

package/lib/es/list/constants.js

@@ -0,0 +1,10 @@
+import { BASE_CLASS_PREFIX } from '../base/constants';
+const cssClasses = {
+  PREFIX: `${BASE_CLASS_PREFIX}-list`
+};
+const strings = {
+  SIZE: ['large', 'small', 'default'],
+  LAYOUT: ['vertical', 'horizontal'],
+  ALIGN: ['flex-start', 'flex-end', 'center', 'baseline', 'stretch']
+};
+export { cssClasses, strings };

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

@@ -0,0 +1,10 @@
+declare const cssClasses: {
+    DIALOG: string;
+};
+declare const strings: {
+    cancelKey: string;
+    confirmKey: string;
+    SIZE: string[];
+    directions: string[];
+};
+export { cssClasses, strings };

package/lib/es/modal/constants.js

@@ -0,0 +1,11 @@
+import { BASE_CLASS_PREFIX } from '../base/constants';
+const cssClasses = {
+  DIALOG: `${BASE_CLASS_PREFIX}-modal`
+};
+const strings = {
+  cancelKey: 'cancel',
+  confirmKey: 'confirm',
+  SIZE: ['small', 'medium', 'large', 'full-width'],
+  directions: ['ltr', 'rtl']
+};
+export { cssClasses, strings };

package/lib/es/modal/modalContentFoundation.d.ts

@@ -0,0 +1,42 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+import { ModalProps } from '../modal/modalFoundation';
+export interface ModalContentProps extends ModalProps {
+    onClose: (e: any) => void;
+    getContainerContext: () => any;
+    isFullScreen?: boolean;
+    contentClassName?: string;
+    maskClassName?: string;
+    onAnimationEnd?: (e: any) => void;
+    maskExtraProps?: Record<string, any>;
+    contentExtraProps?: Record<string, any>;
+}
+export interface ModalContentState {
+    dialogMouseDown: boolean;
+    prevFocusElement: HTMLElement;
+}
+export interface ModalContentAdapter extends DefaultAdapter<ModalContentProps, ModalContentState> {
+    notifyClose: (e: any) => void;
+    notifyDialogMouseDown: () => void;
+    notifyDialogMouseUp: () => void;
+    addKeyDownEventListener: () => void;
+    removeKeyDownEventListener: () => void;
+    getMouseState: () => boolean;
+    modalDialogFocus: () => void;
+    modalDialogBlur: () => void;
+    prevFocusElementReFocus: () => void;
+}
+export default class ModalContentFoundation extends BaseFoundation<ModalContentAdapter> {
+    constructor(adapter: ModalContentAdapter);
+    destroy(): void;
+    handleDialogMouseDown(): void;
+    handleMaskMouseUp(): void;
+    handleKeyDown: (e: any) => void;
+    handleKeyDownEventListenerMount(): void;
+    handleKeyDownEventListenerUnmount(): void;
+    getMouseState(): void;
+    handleMaskClick(e: any): void;
+    close(e: any): void;
+    modalDialogFocus(): void;
+    modalDialogBlur(): void;
+    prevFocusElementReFocus(): void;
+}

package/lib/es/modal/modalContentFoundation.js

@@ -0,0 +1,72 @@
+import BaseFoundation from '../base/foundation';
+import KeyCode from '../utils/keyCode';
+export default class ModalContentFoundation extends BaseFoundation {
+  constructor(adapter) {
+    super(Object.assign(Object.assign({}, ModalContentFoundation.defaultAdapter), adapter));
+
+    this.handleKeyDown = e => {
+      const {
+        closeOnEsc
+      } = this.getProps();
+
+      if (closeOnEsc && e.keyCode === KeyCode.ESC) {
+        e.stopPropagation();
+        this.close(e);
+        return;
+      }
+    };
+  }
+
+  destroy() {
+    this.handleKeyDownEventListenerUnmount();
+    this.modalDialogBlur();
+    this.prevFocusElementReFocus();
+  }
+
+  handleDialogMouseDown() {
+    this._adapter.notifyDialogMouseDown();
+  }
+
+  handleMaskMouseUp() {
+    this._adapter.notifyDialogMouseUp();
+  }
+
+  handleKeyDownEventListenerMount() {
+    this._adapter.addKeyDownEventListener();
+  }
+
+  handleKeyDownEventListenerUnmount() {
+    this._adapter.removeKeyDownEventListener();
+  }
+
+  getMouseState() {
+    this._adapter.getMouseState();
+  }
+
+  handleMaskClick(e) {
+    const {
+      dialogMouseDown
+    } = this.getStates();
+
+    if (e.target === e.currentTarget && !dialogMouseDown) {
+      this.close(e);
+    }
+  }
+
+  close(e) {
+    this._adapter.notifyClose(e);
+  }
+
+  modalDialogFocus() {
+    this._adapter.modalDialogFocus();
+  }
+
+  modalDialogBlur() {
+    this._adapter.modalDialogBlur();
+  }
+
+  prevFocusElementReFocus() {
+    this._adapter.prevFocusElementReFocus();
+  }
+
+}

package/lib/es/modal/modalFoundation.d.ts

@@ -0,0 +1,69 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export declare type OKType = 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';
+export declare type Size = 'small' | 'medium' | 'large' | 'full-width';
+export interface ModalAdapter extends DefaultAdapter<ModalProps, ModalState> {
+    disabledBodyScroll: () => void;
+    enabledBodyScroll: () => void;
+    notifyCancel: (e: any) => void | Promise<any>;
+    notifyOk: (e: any) => void | Promise<any>;
+    notifyClose: () => void;
+    toggleDisplayNone: (displayNone: boolean, callback?: (displayNone: boolean) => void) => void;
+    notifyFullScreen: (isFullScreen: boolean) => void;
+    getProps: () => ModalProps;
+}
+export interface ModalProps {
+    afterClose?: () => void;
+    bodyStyle?: Record<string, any>;
+    cancelButtonProps?: any;
+    cancelText?: string;
+    centered?: boolean;
+    className?: string;
+    closable?: boolean;
+    confirmLoading?: boolean;
+    cancelLoading?: boolean;
+    content?: any;
+    footer?: any;
+    hasCancel?: boolean;
+    header?: any;
+    height?: string | number;
+    mask?: boolean;
+    maskClosable?: boolean;
+    maskStyle?: Record<string, any>;
+    maskFixed?: boolean;
+    motion?: boolean;
+    okButtonProps?: any;
+    okText?: string;
+    okType?: OKType;
+    onCancel?: (e: any) => void | Promise<any>;
+    onOk?: (e: any) => void | Promise<any>;
+    style?: Record<string, any>;
+    title?: any;
+    visible?: boolean;
+    width?: string | number;
+    zIndex?: number;
+    icon?: any;
+    getPopupContainer?: () => HTMLElement;
+    closeIcon?: any;
+    closeOnEsc?: boolean;
+    size?: Size;
+    lazyRender?: boolean;
+    keepDOM?: boolean;
+    direction?: any;
+    fullScreen?: boolean;
+    preventScroll?: boolean;
+}
+export interface ModalState {
+    displayNone: boolean;
+    isFullScreen: boolean;
+    onOKReturnPromiseStatus?: "pending" | "fulfilled" | "rejected";
+    onCancelReturnPromiseStatus?: "pending" | "fulfilled" | "rejected";
+}
+export default class ModalFoundation extends BaseFoundation<ModalAdapter> {
+    constructor(adapter: ModalAdapter);
+    destroy(): void;
+    handleCancel(e: any): void;
+    handleOk(e: any): void;
+    beforeShow(): void;
+    afterHide(): void;
+    toggleDisplayNone: (displayNone: boolean, callback?: (displayNone: boolean) => void) => void;
+}

package/lib/es/modal/modalFoundation.js

@@ -0,0 +1,76 @@
+import BaseFoundation from '../base/foundation';
+import isPromise from "../utils/isPromise";
+export default class ModalFoundation extends BaseFoundation {
+  constructor(adapter) {
+    super(Object.assign({}, adapter)); // afterClose() {
+    //     this._adapter.notifyClose();
+    // }
+
+    this.toggleDisplayNone = (displayNone, callback) => {
+      this._adapter.toggleDisplayNone(displayNone, callback);
+    };
+  }
+
+  destroy() {
+    this.afterHide();
+  }
+
+  handleCancel(e) {
+    var _a;
+
+    const result = this._adapter.notifyCancel(e);
+
+    if (isPromise(result)) {
+      this._adapter.setState({
+        onCancelReturnPromiseStatus: "pending"
+      });
+
+      (_a = result === null || result === void 0 ? void 0 : result.then(() => {
+        this._adapter.setState({
+          onCancelReturnPromiseStatus: "fulfilled"
+        });
+      })) === null || _a === void 0 ? void 0 : _a.catch(e => {
+        this._adapter.setState({
+          onCancelReturnPromiseStatus: "rejected"
+        });
+
+        throw e;
+      });
+    }
+  }
+
+  handleOk(e) {
+    var _a;
+
+    const result = this._adapter.notifyOk(e);
+
+    if (isPromise(result)) {
+      this._adapter.setState({
+        onOKReturnPromiseStatus: "pending"
+      });
+
+      (_a = result === null || result === void 0 ? void 0 : result.then(() => {
+        this._adapter.setState({
+          onOKReturnPromiseStatus: "fulfilled"
+        });
+      })) === null || _a === void 0 ? void 0 : _a.catch(e => {
+        this._adapter.setState({
+          onOKReturnPromiseStatus: "rejected"
+        });
+
+        throw e;
+      });
+    }
+  }
+
+  beforeShow() {
+    this._adapter.disabledBodyScroll();
+  }
+
+  afterHide() {
+    this._adapter.enabledBodyScroll();
+
+    this._adapter.notifyClose();
+  }
+
+}

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

@@ -0,0 +1,10 @@
+export declare const DEFAULT_TOGGLE_ICON: {
+    open: string;
+    closed: string;
+};
+export default class NavItem {
+    items: any[];
+    toggleIcon: any;
+    constructor(options?: any);
+    static isValidToggleIcon(toggleIcon: any): boolean;
+}

package/lib/es/navigation/NavItem.js

@@ -0,0 +1,47 @@
+import { numbers } from './constants';
+export const DEFAULT_TOGGLE_ICON = {
+  open: 'chevron_up',
+  closed: 'chevron_down'
+};
+export default class NavItem {
+  constructor() {
+    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+    // eslint-disable-next-line eqeqeq
+    if (options == null || typeof options !== 'object') {
+      // eslint-disable-next-line no-param-reassign
+      options = {
+        text: options,
+        itemKey: options,
+        maxHeight: numbers.DEFAULT_SUBNAV_MAX_HEIGHT,
+        // selected: false,
+        // isOpen: false,
+        link: null,
+        items: null,
+        icon: '',
+        indent: false
+      };
+    }
+
+    for (const key of Object.keys(options)) {
+      this[key] = options[key];
+    }
+
+    if (options.items && Array.isArray(options.items) && options.items.length) {
+      this.items = options.items.map(item => new NavItem(item));
+
+      if ('toggleIcon' in options) {
+        this.toggleIcon = NavItem.isValidToggleIcon(options.toggleIcon) ? Object.assign({}, options.toggleIcon) : Object.assign({}, DEFAULT_TOGGLE_ICON);
+      } else {
+        this.toggleIcon = Object.assign({}, DEFAULT_TOGGLE_ICON);
+      }
+    } else {
+      this.items = null;
+    }
+  }
+
+  static isValidToggleIcon(toggleIcon) {
+    return Boolean(toggleIcon && typeof toggleIcon === 'object' && typeof toggleIcon.open === 'string' && toggleIcon.open.length && typeof toggleIcon.closed === 'string' && toggleIcon.closed.length);
+  }
+
+}

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

@@ -0,0 +1,21 @@
+declare const cssClasses: {
+    PREFIX: string;
+};
+declare const strings: {
+    MODE: string[];
+    MODE_VERTICAL: string;
+    MODE_HORIZONTAL: string;
+    ICON_POS_LEFT: string;
+    ICON_POS_RIGHT: string;
+    DEFAULT_LOGO_ICON_SIZE: string;
+    TOGGLE_ICON_LEFT: string;
+    TOGGLE_ICON_RIGHT: string;
+};
+declare const numbers: {
+    DEFAULT_SUBNAV_MAX_HEIGHT: number;
+    DEFAULT_TOOLTIP_SHOW_DELAY: number;
+    DEFAULT_TOOLTIP_HIDE_DELAY: number;
+    DEFAULT_SUBNAV_OPEN_DELAY: number;
+    DEFAULT_SUBNAV_CLOSE_DELAY: number;
+};
+export { cssClasses, strings, numbers };

package/lib/es/navigation/constants.js

@@ -0,0 +1,25 @@
+import { BASE_CLASS_PREFIX } from '../base/constants';
+const MODE_HORIZONTAL = 'horizontal';
+const MODE_VERTICAL = 'vertical';
+const cssClasses = {
+  PREFIX: `${BASE_CLASS_PREFIX}-navigation`
+};
+const strings = {
+  MODE: [MODE_VERTICAL, MODE_HORIZONTAL],
+  MODE_VERTICAL,
+  MODE_HORIZONTAL,
+  ICON_POS_LEFT: 'left',
+  ICON_POS_RIGHT: 'right',
+  DEFAULT_LOGO_ICON_SIZE: 'extra-large',
+  TOGGLE_ICON_LEFT: 'left',
+  TOGGLE_ICON_RIGHT: 'right'
+};
+const numbers = {
+  DEFAULT_SUBNAV_MAX_HEIGHT: 999,
+  DEFAULT_TOOLTIP_SHOW_DELAY: 0,
+  DEFAULT_TOOLTIP_HIDE_DELAY: 100,
+  DEFAULT_SUBNAV_OPEN_DELAY: 0,
+  DEFAULT_SUBNAV_CLOSE_DELAY: 100 // ms
+
+};
+export { cssClasses, strings, numbers };

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

@@ -0,0 +1,85 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+import { ItemProps } from './itemFoundation';
+export interface ItemKey2ParentKeysMap {
+    [key: string]: (string | number)[];
+}
+export interface OnClickData {
+    itemKey: string | number;
+    domEvent: any;
+    isOpen: boolean;
+}
+export interface OnSelectData extends OnClickData {
+    selectedKeys: (string | number)[];
+    selectedItems: ItemProps[];
+}
+export interface OnOpenChangeData extends OnClickData {
+    openKeys: (string | number)[];
+}
+export interface NavItemType {
+    props?: ItemProps;
+    items?: NavItemType[];
+    [key: string]: any;
+}
+export interface NavigationAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    notifySelect(data: OnSelectData): void;
+    notifyOpenChange(data: OnOpenChangeData): void;
+    setIsCollapsed(isCollapsed: boolean): void;
+    notifyCollapseChange(isCollapsed: boolean): void;
+    updateItems(items: ItemProps[]): void;
+    setItemKeysMap(map: {
+        [key: string]: (string | number)[];
+    }): void;
+    addSelectedKeys(...keys: (string | number)[]): void;
+    removeSelectedKeys(...keys: (string | number)[]): void;
+    updateSelectedKeys(keys: (string | number)[]): void;
+    updateOpenKeys(keys: (string | number)[]): void;
+    addOpenKeys(...keys: (string | number)[]): void;
+    removeOpenKeys(...keys: (string | number)[]): void;
+    setItemsChanged(isChanged: boolean): void;
+}
+export default class NavigationFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<NavigationAdapter<P, S>, P, S> {
+    constructor(adapter: NavigationAdapter<P, S>);
+    static getZeroParentKeys(itemKeysMap?: {}, ...itemKeys: (string | number)[]): any[];
+    static buildItemKeysMap(items?: NavItemType[], keysMap?: {}, parentKeys?: (string | number)[], keyPropName?: string): {};
+    /**
+     * 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: string): {
+        selectedKeys: any;
+        itemKeysMap: {};
+        openKeys: any[];
+        items: any[];
+    };
+    /**
+     * Get the state to be calculated
+     */
+    getCalcState(): {
+        itemKeysMap: {};
+        willOpenKeys: any[];
+        formattedItems: any[];
+    };
+    /**
+     * Calculate formatted items and itemsKeyMap
+     */
+    getFormattedItems(): {
+        itemKeysMap: {};
+        formattedItems: any[];
+    };
+    /**
+     * Calculate the keys that will need to be opened soon
+     * @param {*} itemKeysMap
+     */
+    getWillOpenKeys(itemKeysMap: ItemKey2ParentKeysMap): any[];
+    getShouldOpenKeys(itemKeysMap?: ItemKey2ParentKeysMap, selectedKeys?: string | number[]): unknown[];
+    destroy(): void;
+    selectLevelZeroParentKeys(itemKeysMap: ItemKey2ParentKeysMap, ...itemKeys: (string | number)[]): any[];
+    formatItems(items?: ItemProps[]): any[];
+    handleSelect(data: OnSelectData): void;
+    judgeIfOpen(openKeys: (string | number)[], items: NavItemType[]): boolean;
+    handleCollapseChange(): void;
+    handleItemsChange(isChanged: boolean): void;
+}