@douyinfe/semi-foundation 2.1.0-next.0 → 2.1.0

package/lib/cjs/toast/toastFoundation.js

@@ -1,72 +0,0 @@
-"use strict";
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-
-exports.default = void 0;
-
-var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
-
-var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
-
-var _foundation = _interopRequireDefault(require("../base/foundation"));
-
-var _lodashEs = require("lodash-es");
-
-class ToastFoundation extends _foundation.default {
-  constructor(adapter) {
-    super((0, _assign.default)((0, _assign.default)({}, ToastFoundation.defaultAdapter), adapter));
-    this._timer = null;
-    this._id = null; // cache id
-  }
-
-  init() {
-    this.startCloseTimer_();
-    this._id = this._adapter.getProp('id');
-  }
-
-  destroy() {
-    this.clearCloseTimer_();
-  }
-
-  startCloseTimer_() {
-    // unit: s
-    const duration = this._adapter.getProp('duration');
-
-    if (duration && (0, _lodashEs.isNumber)(duration)) {
-      this._timer = (0, _setTimeout2.default)(() => {
-        this.close(); // call parent to remove itself
-      }, duration * 1000);
-    }
-  }
-
-  close(e) {
-    if (e) {
-      e.stopPropagation();
-    }
-
-    this._adapter.notifyWrapperToRemove(this._id);
-
-    this._adapter.notifyClose();
-  }
-
-  clearCloseTimer_() {
-    if (this._timer) {
-      clearTimeout(this._timer);
-      this._timer = null;
-    }
-  }
-
-  restartCloseTimer() {
-    this.clearCloseTimer_();
-    this.startCloseTimer_();
-  }
-
-}
-
-exports.default = ToastFoundation;

package/lib/cjs/toast/toastListFoundation.d.ts

@@ -1,17 +0,0 @@
-import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-import { ToastInstance, ToastProps } from '../toast/toastFoundation';
-export interface ToastListProps {
-}
-export interface ToastListState {
-    list: ToastInstance[];
-    removedItems: ToastInstance[];
-}
-export interface ToastListAdapter extends DefaultAdapter<ToastListProps, ToastListState> {
-    updateToast: (list: ToastListState['list'], removedItems: ToastListState['removedItems']) => void;
-}
-export default class ToastListFoundation extends BaseFoundation<ToastListAdapter> {
-    constructor(adapter: ToastListAdapter);
-    addToast(toastOpts: ToastProps): void;
-    removeToast(id: string): void;
-    destroyAll(): void;
-}

package/lib/cjs/toast/toastListFoundation.js

@@ -1,62 +0,0 @@
-"use strict";
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-
-exports.default = void 0;
-
-var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
-
-var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
-
-var _foundation = _interopRequireDefault(require("../base/foundation"));
-
-class ToastListFoundation extends _foundation.default {
-  constructor(adapter) {
-    super((0, _assign.default)((0, _assign.default)({}, ToastListFoundation.defaultAdapter), adapter));
-  }
-
-  addToast(toastOpts) {
-    const toastList = this._adapter.getState('list'); // const id = getUuid('toast');
-    // let toastOpts = { ...opts, id };
-    // console.log(toastOpts);
-
-
-    toastList.push(toastOpts);
-
-    this._adapter.updateToast(toastList, []); // return id;
-
-  }
-
-  removeToast(id) {
-    let toastList = this._adapter.getState('list');
-
-    const removedItems = [];
-    toastList = (0, _filter.default)(toastList).call(toastList, toastOpts => {
-      if (toastOpts.id === id) {
-        removedItems.push(toastOpts);
-        return false;
-      }
-
-      return true;
-    });
-
-    this._adapter.updateToast(toastList, removedItems);
-  }
-
-  destroyAll() {
-    const toastList = this._adapter.getState('list');
-
-    if (toastList.length > 0) {
-      this._adapter.updateToast([], toastList);
-    }
-  }
-
-}
-
-exports.default = ToastListFoundation;

package/lib/cjs/toast/variables.scss

@@ -1,34 +0,0 @@
-// Color
-$color-toast-bg-default: var(--semi-color-bg-3); // 提示背景颜色 - 默认
-$color-toast-text-default: var(--semi-color-text-0); // 提示文字颜色 - 默认
-$color-toast_warning-icon: var(--semi-color-warning); // 警告提示图标颜色
-$color-toast_success-icon: var(--semi-color-success); // 成功提示图标颜色
-$color-toast_info-icon: var(--semi-color-info); // 通知提示图标颜色
-$color-toast_danger-icon: var(--semi-color-danger); // 错误提示图标颜色
-$color-toast_warning_light-bg: var(--semi-color-warning-light-default); // 多色样式 警告提示背景颜色
-$color-toast_warning_light-border: var(--semi-color-warning); // 多色样式 警告提示描边颜色
-$color-toast_success_light-bg: var(--semi-color-success-light-default); // 多色样式 成功提示背景颜色
-$color-toast_success_light-border: var(--semi-color-success); // 多色样式 成功提示描边颜色
-$color-toast_info_light-bg: var(--semi-color-info-light-default); // 多色样式 通知提示背景颜色
-$color-toast_info_light-border: var(--semi-color-info); // 多色样式 通知提示描边颜色
-$color-toast_danger_light-bg: var(--semi-color-danger-light-default); // 多色样式 错误提示背景颜色
-$color-toast_danger_light-border: var(--semi-color-danger); // 多色样式 错误提示描边颜色
-
-// Spacing
-$spacing-toast_wrapper-top: 0; // 通知容器顶部位置
-$spacing-toast_content-paddingY: $spacing-base-tight; // 通知内容垂直内边距
-$spacing-toast_content-paddingX: $spacing-tight; // 通知内容水平内边距
-$spacing-toast_content-margin: $spacing-base-tight; // 通知内容外边距
-$spacing-toast_content_close_btn-marginTop: -2px; // 通知关闭按钮顶部外边距
-$spacing-toast_content_text-marginLeft: $spacing-base-tight; // 通知文本左侧外边距
-$spacing-toast_content_text-marginRight: $spacing-base-tight; // 通知文本右侧外边距
-
-// Width/Height
-$width-toast_wrapper: 100%; // 通知容器整体宽度
-$width-toast_light-border: 1px; // 多色样式 通知描边宽度
-
-// Radius
-$radius-toast_content: var(--semi-border-radius-medium); // 通知圆角
-
-// Font
-$font-toast_content-fontWeight: $font-weight-bold; // 通知文本字重

package/lib/cjs/tooltip/arrow.scss

@@ -1,141 +0,0 @@
-@mixin minWidth() {
-    &.#{$module}-with-arrow,
-    .#{$module}-with-arrow {
-        min-width: $spacing-tooltip_arrow_adjusted_offset-x * 2 + $width-tooltip_arrow;
-    }
-}
-
-@mixin minHeight() {
-    &.#{$module}-with-arrow,
-    .#{$module}-with-arrow {
-        min-height: $height-tooltip_arrow_vertical + $spacing-tooltip_arrow_adjusted_offset-y * 2;
-    }
-}
-
-.#{$module} {
-    &-wrapper {
-        .#{$module-icon} {
-            height: $height-tooltip_arrow;
-            width: $width-tooltip_arrow;
-            position: absolute;
-            color:$color-tooltip_arrow-icon-default;
-        }
-
-        &[x-placement='top'] {
-            .#{$module-icon} {
-                left: 50%;
-                transform: translateX(-50%);
-                bottom: (-$height-tooltip_arrow + $spacing-tooltip_arrow_offset-y);
-            }
-
-            @include minWidth();
-        }
-        &[x-placement='topLeft'] {
-            .#{$module-icon} {
-                bottom: (-$height-tooltip_arrow + $spacing-tooltip_arrow_offset-y);
-                left: $spacing-tooltip_arrow_adjusted_offset-x;
-            }
-
-            @include minWidth();
-        }
-        &[x-placement='topRight'] {
-            .#{$module-icon} {
-                bottom: (-$height-tooltip_arrow + $spacing-tooltip_arrow_offset-y);
-                right: $spacing-tooltip_arrow_adjusted_offset-x;
-            }
-
-            @include minWidth();
-        }
-        &[x-placement='leftTop'] {
-            .#{$module-icon} {
-                width: $width-tooltip_arrow_vertical;
-                height: $height-tooltip_arrow_vertical;
-                right: (-$width-tooltip_arrow_vertical + $spacing-tooltip_arrow_offset-x);
-                top: $vertical-rate * $height-tooltip_arrow_vertical + $spacing-tooltip_arrow_adjusted_offset-y;
-            }
-
-            @include minHeight();
-        }
-        &[x-placement='left'] {
-            .#{$module-icon} {
-                width: $width-tooltip_arrow_vertical;
-                height: $height-tooltip_arrow_vertical;
-                right: (-$width-tooltip_arrow_vertical + $spacing-tooltip_arrow_offset-x);
-                top: 50%;
-                transform: translateY(-50%);
-            }
-
-            @include minHeight();
-        }
-        &[x-placement='leftBottom'] {
-            .#{$module-icon} {
-                width: $width-tooltip_arrow_vertical;
-                height: $height-tooltip_arrow_vertical;
-                right: (-$width-tooltip_arrow_vertical + $spacing-tooltip_arrow_offset-x);
-                bottom: $vertical-rate * $height-tooltip_arrow_vertical + $spacing-tooltip_arrow_adjusted_offset-y;
-            }
-
-            @include minHeight();
-        }
-        &[x-placement='rightTop'] {
-            .#{$module-icon} {
-                width: $width-tooltip_arrow_vertical;
-                height: $height-tooltip_arrow_vertical;
-                left: -$width-tooltip_arrow_vertical + $spacing-tooltip_arrow_offset-x;
-                top: $vertical-rate * $height-tooltip_arrow_vertical + $spacing-tooltip_arrow_adjusted_offset-y;
-                transform: rotate(180deg);
-            }
-
-            @include minHeight();
-        }
-        &[x-placement='right'] {
-            .#{$module-icon} {
-                width: $width-tooltip_arrow_vertical;
-                height: $height-tooltip_arrow_vertical;
-                left: -$width-tooltip_arrow_vertical + $spacing-tooltip_arrow_offset-x;
-                top: 50%;
-                transform: translateY(-50%) rotate(180deg);
-            }
-
-            @include minHeight();
-        }
-        &[x-placement='rightBottom'] {
-            .#{$module-icon} {
-                width: $width-tooltip_arrow_vertical;
-                height: $height-tooltip_arrow_vertical;
-                left: -$width-tooltip_arrow_vertical + $spacing-tooltip_arrow_offset-x;
-                bottom: $vertical-rate * $height-tooltip_arrow_vertical + $spacing-tooltip_arrow_adjusted_offset-y;
-                transform: rotate(180deg);
-            }
-
-            @include minHeight();
-        }
-        &[x-placement='bottomLeft'] {
-            .#{$module-icon} {
-                top: (-$height-tooltip_arrow + $spacing-tooltip_arrow_offset-y);
-                left: $spacing-tooltip_arrow_adjusted_offset-x;
-                transform: rotate(180deg);
-            }
-
-            @include minWidth();
-        }
-        &[x-placement='bottom'] {
-            .#{$module-icon} {
-                top: (-$height-tooltip_arrow + $spacing-tooltip_arrow_offset-y);
-                left: 50%;
-                transform: translateX(-50%) rotate(180deg);
-            }
-
-            @include minWidth();
-        }
-        &[x-placement='bottomRight'] {
-            .#{$module-icon} {
-                right: $spacing-tooltip_arrow_adjusted_offset-x;
-                top: (-$height-tooltip_arrow + $spacing-tooltip_arrow_offset-y);
-                transform: rotate(180deg);
-            }
-
-            @include minWidth();
-        }
-    }
-}

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

@@ -1,22 +0,0 @@
-declare const cssClasses: {
-    readonly PREFIX: "semi-tooltip";
-};
-declare const strings: {
-    readonly POSITION_SET: readonly ["top", "topLeft", "topRight", "left", "leftTop", "leftBottom", "right", "rightTop", "rightBottom", "bottom", "bottomLeft", "bottomRight", "leftTopOver", "rightTopOver"];
-    readonly TRIGGER_SET: readonly ["hover", "focus", "click", "custom"];
-    readonly STATUS_DISABLED: "disabled";
-    readonly STATUS_LOADING: "loading";
-};
-declare const numbers: {
-    readonly ARROW_BOUNDING: {
-        readonly offsetX: 0;
-        readonly offsetY: 2;
-        readonly width: 24;
-        readonly height: 7;
-    };
-    readonly DEFAULT_Z_INDEX: 1060;
-    readonly MOUSE_ENTER_DELAY: 50;
-    readonly MOUSE_LEAVE_DELAY: 50;
-    readonly SPACING: 8;
-};
-export { cssClasses, strings, numbers };

package/lib/cjs/tooltip/constants.js

@@ -1,37 +0,0 @@
-"use strict";
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-
-exports.strings = exports.numbers = exports.cssClasses = void 0;
-
-var _constants = require("../base/constants");
-
-const cssClasses = {
-  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-tooltip")
-};
-exports.cssClasses = cssClasses;
-const strings = {
-  POSITION_SET: ['top', 'topLeft', 'topRight', 'left', 'leftTop', 'leftBottom', 'right', 'rightTop', 'rightBottom', 'bottom', 'bottomLeft', 'bottomRight', 'leftTopOver', 'rightTopOver'],
-  TRIGGER_SET: ['hover', 'focus', 'click', 'custom'],
-  STATUS_DISABLED: 'disabled',
-  STATUS_LOADING: 'loading'
-};
-exports.strings = strings;
-const numbers = {
-  ARROW_BOUNDING: {
-    offsetX: 0,
-    offsetY: 2,
-    width: 24,
-    height: 7
-  },
-  DEFAULT_Z_INDEX: 1060,
-  MOUSE_ENTER_DELAY: 50,
-  MOUSE_LEAVE_DELAY: 50,
-  SPACING: 8 // Values are consistent with spacing-tight in scss
-
-};
-exports.numbers = numbers;

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

@@ -1,99 +0,0 @@
-import { DOMRectLikeType } from '../utils/dom';
-import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-import { ArrayElement } from '../utils/type';
-import { strings } from './constants';
-export interface TooltipAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
-    registerPortalEvent(portalEventSet: any): void;
-    unregisterPortalEvent(): void;
-    registerResizeHandler(onResize: () => void): void;
-    unregisterResizeHandler(onResize?: () => void): void;
-    on(arg0: string, arg1: () => void): void;
-    notifyVisibleChange(isVisible: any): void;
-    getPopupContainerRect(): PopupContainerDOMRect;
-    containerIsBody(): boolean;
-    off(arg0: string): void;
-    canMotion(): boolean;
-    registerScrollHandler(arg: () => Record<string, any>): void;
-    unregisterScrollHandler(): void;
-    insertPortal(...args: any[]): void;
-    removePortal(...args: any[]): void;
-    getEventName(): {
-        mouseEnter: string;
-        mouseLeave: string;
-        mouseOut: string;
-        mouseOver: string;
-        click: string;
-        focus: string;
-        blur: string;
-    };
-    registerTriggerEvent(...args: any[]): void;
-    getTriggerBounding(...args: any[]): DOMRect;
-    getWrapperBounding(...args: any[]): DOMRect;
-    setPosition(...args: any[]): void;
-    togglePortalVisible(...args: any[]): void;
-    registerClickOutsideHandler(...args: any[]): void;
-    unregisterClickOutsideHandler(...args: any[]): void;
-    unregisterTriggerEvent(): void;
-    containerIsRelative(): boolean;
-    containerIsRelativeOrAbsolute(): boolean;
-    getDocumentElementBounding(): DOMRect;
-    updateContainerPosition(): void;
-    updatePlacementAttr(placement: Position): void;
-    getContainerPosition(): string;
-}
-export declare type Position = ArrayElement<typeof strings.POSITION_SET>;
-export interface PopupContainerDOMRect extends DOMRectLikeType {
-    scrollLeft?: number;
-    scrollTop?: number;
-}
-export default class Tooltip<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<TooltipAdapter<P, S>, P, S> {
-    _timer: ReturnType<typeof setTimeout>;
-    _mounted: boolean;
-    constructor(adapter: TooltipAdapter<P, S>);
-    init(): void;
-    destroy(): void;
-    _bindEvent(): void;
-    _unBindEvent(): void;
-    _bindTriggerEvent(triggerEventSet: Record<string, any>): void;
-    _unBindTriggerEvent(): void;
-    _bindPortalEvent(portalEventSet: Record<string, any>): void;
-    _unBindPortalEvent(): void;
-    _bindResizeEvent(): void;
-    _unBindResizeEvent(): void;
-    _reversePos(position?: string, isVertical?: boolean): string;
-    clearDelayTimer(): void;
-    _generateEvent(types: ArrayElement<typeof strings.TRIGGER_SET>): {
-        triggerEventSet: {};
-        portalEventSet: {};
-    };
-    onResize: () => void;
-    _shouldShow(): void;
-    delayShow: () => void;
-    show: () => void;
-    _togglePortalVisible(isVisible: boolean): void;
-    _roundPixel(pixel: number): number;
-    calcTransformOrigin(position: Position, triggerRect: DOMRect, translateX: number, translateY: number): string;
-    calcPosStyle(triggerRect: DOMRect, wrapperRect: DOMRect, containerRect: PopupContainerDOMRect, position?: Position, spacing?: number): Record<string, string | number>;
-    /**
-     * 耦合的东西比较多，稍微罗列一下：
-     *
-     * - 根据 trigger 和 wrapper 的 boundingClient 计算当前的 left、top、transform-origin
-     * - 根据当前的 position 和 wrapper 的 boundingClient 决定是否需要自动调整位置
-     * - 根据当前的 position、trigger 的 boundingClient 以及 motion.handleStyle 调整当前的 style
-     *
-     * There are many coupling things, a little list:
-     *
-     * - calculate the current left, top, and transfer-origin according to the boundingClient of trigger and wrapper
-     * - decide whether to automatically adjust the position according to the current position and the boundingClient of wrapper
-     * - adjust the current style according to the current position, the boundingClient of trigger and motion.handle Style
-     */
-    calcPosition: (triggerRect?: DOMRect, wrapperRect?: DOMRect, containerRect?: PopupContainerDOMRect, shouldUpdatePos?: boolean) => Record<string, string | number>;
-    isLR(position?: string): boolean;
-    isTB(position?: string): boolean;
-    adjustPosIfNeed(position: Position | string, style: Record<string, any>, triggerRect: DOMRect, wrapperRect: DOMRect, containerRect: PopupContainerDOMRect): string;
-    delayHide: () => void;
-    hide: () => void;
-    _bindScrollEvent(): void;
-    _unBindScrollEvent(): void;
-    _initContainerPosition(): void;
-}