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

package/lib/cjs/notification/notification.scss

@@ -1,168 +0,0 @@
-//@import '../theme/variables.scss';
-@import "./variables.scss";
-
-$module: #{$prefix}-notification;
-
-.#{$module}-wrapper {
-    position: fixed;
-}
-
-.#{$module}-list {
-    position: fixed;
-    box-sizing: border-box;
-    margin: $spacing-notification_list-margin;
-    padding: $spacing-notification_list-padding;
-    z-index: $z-notification;
-    pointer-events: none;
-
-    &[placement="topRight"] {
-        right: 0;
-        top: 0;
-    }
-
-    &[placement="top"] {
-        top: 0;
-        left: 50%;
-        transform: translateX(-50%);
-    }
-
-    &[placement="topLeft"] {
-        left: 0;
-        top: 0;
-    }
-
-    &[placement="bottom"] {
-        bottom: 0;
-        left: 50%;
-        transform: translateX(-50%);
-    }
-
-    &[placement="bottomRight"] {
-        bottom: 0;
-        right: 0;
-    }
-
-    &[placement="bottomLeft"] {
-        bottom: 0;
-        left: 0;
-    }
-}
-
-.#{$module} {
-
-    &-notice {
-        @include shadow-elevated;
-        border-radius: $radius-notification_notice;
-        padding-top: $spacing-notification_notice-paddingTop;
-        padding-right: $spacing-notification_notice-paddingRight;
-        padding-bottom: $spacing-notification_notice-paddingBottom;
-        padding-left: $spacing-notification_notice-paddingLeft;
-        margin: $spacing-notification_notice-margin;
-        width: $width-notification_notice;
-        min-width: $width-notification_notice_minWidth;
-        background-color: $color-notification-bg-default;
-        position: relative;
-        display: flex;
-        pointer-events: auto;
-
-        &-icon {
-            width: $width-notification_notice-icon;
-            @include font-size-header-6;
-            display: flex;
-            align-items: flex-start;
-            justify-content: flex-start;
-            height: 100%;
-            margin-right: $spacing-notification_notice_icon-marginRight;
-        }
-
-        &-info {
-            color: $color-notification_info-icon;
-        }
-
-        &-warning {
-            color: $color-notification_warning-icon;
-        }
-
-        &-error {
-            color: $color-notification_danger-icon;
-        }
-
-        &-success {
-            color: $color-notification_success-icon;
-        }
-
-        &-light {
-            &.#{$module}-notice-warning {
-                background-color: $color-notification_warning_light-bg;
-                border: $width-notification_notice-border solid $color-notification_warning_light-border;
-            }
-
-            &.#{$module}-notice-success {
-                background-color: $color-notification_success_light-bg;
-                border: $width-notification_notice-border solid $color-notification_success_light-border;
-            }
-
-            &.#{$module}-notice-info,
-            &.#{$module}-notice-default {
-                background-color: $color-notification_info_light-bg;
-                border: $width-notification_notice-border solid $color-notification_info_light-border;
-            }
-
-            &.#{$module}-notice-error {
-                background-color: $color-notification_danger_light-bg;
-                border: $width-notification_notice-border solid $color-notification_danger_light-border;
-            }
-        }
-
-        &-title {
-            @include font-size-header-6;
-            font-weight: $font-notification_notice_title-fontWeight;
-            color: $color-notification_title-text;
-            margin-bottom: $spacing-notification_notice_title-marginBottom;
-        }
-
-        &-inner {
-            display: flex;
-            width: 100%;
-        }
-
-        &-content-wrapper {
-            flex: 1 1 auto;
-            margin-right: $spacing-notification_notice_content_wrapper-marginRight;
-        }
-
-        &-content {
-            @include font-size-regular;
-            font-weight: $font-notification_notice_content-fontWeight;
-            color: $color-notification_content-text;
-            // padding-top: $spacing-extra-tight;
-        }
-
-        &-icon-close {
-            height: $width-icon-extra-large;
-
-            .#{$prefix}-icon-close {
-                color: $color-notification_closeBtn-icon;
-            }
-        }
-
-        &-controls {
-            display: flex;
-
-            @include font-size-regular;
-            cursor: pointer;
-        }
-
-        &-detail {
-            text-align: center;
-            flex-grow: 1;
-        }
-
-        &-later {
-            text-align: center;
-            flex-grow: 1;
-        }
-    }
-}
-
-@import "./rtl.scss";

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

@@ -1,48 +0,0 @@
-import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-import { strings } from '../notification/constants';
-import { Motion } from '../utils/type';
-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?: Motion;
-}
-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;
-}

package/lib/cjs/notification/notificationFoundation.js

@@ -1,74 +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 NotificationFoundation extends _foundation.default {
-  constructor(adapter) {
-    super((0, _assign.default)((0, _assign.default)({}, NotificationFoundation.defaultAdapter), adapter));
-    this._timer = null;
-    this._id = null; // cache id
-  }
-
-  init() {
-    this._startCloseTimer();
-
-    this._id = this.getProp('id');
-  }
-
-  destroy() {
-    this._clearCloseTimer();
-  }
-
-  _startCloseTimer() {
-    // unit: s
-    const duration = this.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 = NotificationFoundation;

package/lib/cjs/notification/notificationListFoundation.d.ts

@@ -1,28 +0,0 @@
-import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-import { NoticeInstance, NoticePosition, NoticeProps } from '../notification/notificationFoundation';
-import { strings } from './constants';
-export interface NotificationListProps {
-}
-export interface NotificationListState {
-    notices: NoticeInstance[];
-    removedItems: NoticeInstance[];
-}
-export interface NotificationListAdapter extends DefaultAdapter<NotificationListProps, NotificationListState> {
-    updateNotices: (notices: NoticeInstance[], removedItems?: NoticeInstance[]) => void;
-    getNotices: () => NoticeInstance[];
-}
-export interface ConfigProps {
-    top?: number | string;
-    bottom?: number | string;
-    left?: number | string;
-    right?: number | string;
-    duration?: number;
-    position?: NoticePosition;
-    zIndex?: number;
-    direction?: typeof strings.directions[number];
-}
-export default class NotificationListFoundation extends BaseFoundation<NotificationListAdapter> {
-    addNotice(opts: NoticeProps): void;
-    removeNotice(id: string): void;
-    destroyAll(): void;
-}

package/lib/cjs/notification/notificationListFoundation.js

@@ -1,61 +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 _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
-
-var _foundation = _interopRequireDefault(require("../base/foundation"));
-
-/* eslint-disable no-useless-constructor */
-class NotificationListFoundation extends _foundation.default {
-  addNotice(opts) {
-    // let notices = this._adapter.getNotices();
-    const notices = this._adapter.getNotices(); // opts = { ...opts, id };
-    // if (opts.duration) {
-    //     setTimeout(() => {
-    //         this.removeNotice(opts.id);
-    //     }, opts.duration * 1000);
-    // }
-
-
-    this._adapter.updateNotices([...notices, opts]); // return id;
-
-  }
-
-  removeNotice(id) {
-    let notices = this._adapter.getNotices(); // let notices = this._adapter.getNotices();
-
-
-    const removedItems = [];
-    notices = (0, _filter.default)(notices).call(notices, notice => {
-      if (notice.id === id) {
-        removedItems.push(notice);
-        return false;
-      }
-
-      return true;
-    });
-
-    this._adapter.updateNotices(notices, removedItems); // This must be updated at the same time https://github.com/facebook/react/issues/12312
-
-  }
-
-  destroyAll() {
-    const notices = this._adapter.getNotices();
-
-    if (notices.length > 0) {
-      this._adapter.updateNotices([], notices);
-    }
-  }
-
-}
-
-exports.default = NotificationListFoundation;

package/lib/cjs/notification/rtl.scss

@@ -1,23 +0,0 @@
-$module: #{$prefix}-notification;
-
-.#{$module} {
-
-    &-notice {
-        &.#{$module}-notice-rtl {
-            padding-right: $spacing-notification_notice-paddingLeft;
-            padding-left: $spacing-notification_notice-paddingRight;
-        }
-
-        &-rtl {
-            direction: rtl;
-        }
-
-        .#{$module}-notice-rtl &-icon {
-            margin-right: $spacing-notification_notice_icon-marginRight;
-        }
-
-        .#{$module}-notice-rtl &-content-wrapper {
-            margin-right: $spacing-notification_notice_content_wrapper-marginRight;
-        }
-    }
-}

package/lib/cjs/notification/variables.scss

@@ -1,43 +0,0 @@
-// Color
-$color-notification-bg-default: var(--semi-color-bg-3); // 通知背景色
-$color-notification_info-icon: var(--semi-color-info); // 通知 信息 图标颜色
-$color-notification_warning-icon: var(--semi-color-warning); // 通知 警告 图标颜色
-$color-notification_danger-icon: var(--semi-color-danger); // 通知 危险 图标颜色
-$color-notification_success-icon: var(--semi-color-success); // 通知 成功 图标颜色
-$color-notification_title-text: var(--semi-color-text-0); // 通知 标题 文本颜色
-$color-notification_content-text: var(--semi-color-text-1); // 通知 内容 文本颜色
-$color-notification_closeBtn-icon: var(--semi-color-text-2); // 通知 关闭按钮 图标颜色
-$color-notification_warning_light-bg: var(--semi-color-warning-light-default); // 彩色通知警告背景色
-$color-notification_warning_light-border: var(--semi-color-warning); // 彩色通知警告描边色
-$color-notification_success_light-bg: var(--semi-color-success-light-default); // 彩色通知成功背景色
-$color-notification_success_light-border: var(--semi-color-success); // 彩色通知成功描边色
-$color-notification_info_light-bg: var(--semi-color-info-light-default); // 彩色通知信息背景色
-$color-notification_info_light-border: var(--semi-color-info); // 彩色通知信息描边色
-$color-notification_danger_light-bg: var(--semi-color-danger-light-default); // 彩色通知危险背景色
-$color-notification_danger_light-border: var(--semi-color-danger); // 彩色通知危险描边色
-
-// Width/Height
-$width-notification_notice: auto; // 通知宽度
-$width-notification_notice_minWidth: 320px; // 通知最小宽度
-$width-notification_notice-icon: $width-icon-extra-large; // 通知图标宽度
-$width-notification_notice-border: 1px; // 通知描边宽度
-
-// Spacing
-$spacing-notification_list-margin: 0; // 通知列表外边距
-$spacing-notification_list-padding: 0; // 通知列表内边距
-$spacing-notification_notice-paddingTop: $spacing-base; // 通知卡片顶部内边距
-$spacing-notification_notice-paddingRight: $spacing-base-tight; // 通知卡片右侧内边距
-$spacing-notification_notice-paddingBottom: $spacing-base; // 通知卡片底部内边距
-$spacing-notification_notice-paddingLeft: $spacing-base-loose; // 通知卡片左侧内边距
-$spacing-notification_notice-margin: $spacing-base-loose; // 通知卡片外边距
-$spacing-notification_notice-marginRight: $spacing-base-tight; // 通知卡片右侧外边距
-$spacing-notification_notice_title-marginBottom: $spacing-extra-tight; // 通知卡片标题底部外边距
-$spacing-notification_notice_content_wrapper-marginRight: 8px; // 通知卡片内容右侧外边距
-$spacing-notification_notice_icon-marginRight: $spacing-base-tight; // 通知卡片图标右侧外边距
-
-// Radius
-$radius-notification_notice: var(--semi-border-radius-medium); // 通知卡片圆角大小
-
-// Font
-$font-notification_notice_title-fontWeight: $font-weight-bold; // 通知卡片标题字重
-$font-notification_notice_content-fontWeight: $font-weight-regular; // 通知卡片内容字重

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

@@ -1,23 +0,0 @@
-declare const cssClasses: {
-    PREFIX: string;
-};
-declare const strings: {
-    BOUNDARY_SET: string[];
-    POSITION_SET: string[];
-    MODE_SET: string[];
-    MODE_MAP: {
-        COLLAPSE: string;
-        SCROLL: string;
-    };
-    BOUNDARY_MAP: {
-        START: string;
-        END: string;
-    };
-    OVERFLOW_DIR: {
-        NONE: number;
-        GROW: number;
-        SHRINK: number;
-    };
-};
-declare const numbers: {};
-export { cssClasses, strings, numbers };

package/lib/cjs/overflowList/constants.js

@@ -1,44 +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.strings = exports.numbers = exports.cssClasses = void 0;
-
-var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
-
-var _constants = require("../base/constants");
-
-const cssClasses = {
-  PREFIX: _constants.BASE_CLASS_PREFIX + '-overflow-list'
-};
-exports.cssClasses = cssClasses;
-const MODE_MAP = {
-  COLLAPSE: 'collapse',
-  SCROLL: 'scroll'
-};
-const BOUNDARY_MAP = {
-  START: 'start',
-  END: 'end'
-};
-const OVERFLOW_DIR = {
-  NONE: 0,
-  GROW: 1,
-  SHRINK: 2
-};
-const strings = {
-  BOUNDARY_SET: (0, _values.default)(BOUNDARY_MAP),
-  POSITION_SET: ['vertical', 'horizontal'],
-  MODE_SET: (0, _values.default)(MODE_MAP),
-  MODE_MAP,
-  BOUNDARY_MAP,
-  OVERFLOW_DIR
-};
-exports.strings = strings;
-const numbers = {};
-exports.numbers = numbers;

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

@@ -1,14 +0,0 @@
-import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-export interface OverflowListAdapter extends DefaultAdapter {
-    updateStates: (state: any) => void;
-    updateVisibleState: (visible: Map<string, boolean>) => void;
-    notifyIntersect: (res: any) => void;
-}
-declare class OverflowListFoundation extends BaseFoundation<OverflowListAdapter> {
-    constructor(adapter: OverflowListAdapter);
-    isScrollMode: () => boolean;
-    getOverflowItem(): Array<Array<Record<string, any>>>;
-    handleIntersect(entries: Array<IntersectionObserverEntry>): void;
-    handlePartition(growing: number): void;
-}
-export default OverflowListFoundation;

package/lib/cjs/overflowList/foundation.js

@@ -1,141 +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 _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
-
-var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
-
-var _lastIndexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/last-index-of"));
-
-var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
-
-var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
-
-var _foundation = _interopRequireDefault(require("../base/foundation"));
-
-var _constants = require("./constants");
-
-var _lodashEs = require("lodash-es");
-
-const Boundary = _constants.strings.BOUNDARY_MAP;
-const OverflowDirection = _constants.strings.OVERFLOW_DIR;
-
-class OverflowListFoundation extends _foundation.default {
-  constructor(adapter) {
-    super((0, _assign.default)({}, adapter));
-
-    this.isScrollMode = () => {
-      const {
-        renderMode
-      } = this.getProps();
-      return renderMode === 'scroll';
-    };
-  }
-
-  getOverflowItem() {
-    const {
-      items
-    } = this.getProps();
-    const {
-      visibleState,
-      overflow
-    } = this.getStates();
-
-    if (!this.isScrollMode()) {
-      return overflow;
-    }
-
-    const visibleStateArr = (0, _map.default)(items).call(items, _ref => {
-      let {
-        key
-      } = _ref;
-      return Boolean(visibleState.get(key));
-    });
-    const visibleStart = (0, _indexOf.default)(visibleStateArr).call(visibleStateArr, true);
-    const visibleEnd = (0, _lastIndexOf.default)(visibleStateArr).call(visibleStateArr, true);
-    const overflowList = [];
-    overflowList[0] = visibleStart >= 0 ? (0, _slice.default)(items).call(items, 0, visibleStart) : [];
-    overflowList[1] = visibleEnd >= 0 ? (0, _slice.default)(items).call(items, visibleEnd + 1, items.length) : items;
-    return overflowList;
-  }
-
-  handleIntersect(entries) {
-    const visibleState = (0, _lodashEs.cloneDeep)(this.getState('visibleState'));
-    const res = {};
-    (0, _forEach.default)(entries).call(entries, entry => {
-      const itemKey = (0, _lodashEs.get)(entry, 'target.dataset.scrollkey');
-      const visible = entry.isIntersecting;
-      res[itemKey] = entry;
-      visibleState.set(itemKey, visible);
-    });
-
-    this._adapter.updateVisibleState(visibleState);
-
-    this._adapter.notifyIntersect(res);
-  }
-
-  handlePartition(growing) {
-    const {
-      direction,
-      overflow,
-      lastOverflowCount,
-      visible
-    } = this.getStates();
-    const {
-      minVisibleItems,
-      collapseFrom,
-      items
-    } = this.getProps();
-    let updateState = {};
-
-    if (growing === OverflowDirection.NONE) {
-      updateState = {
-        direction: OverflowDirection.NONE
-      };
-    }
-
-    if (growing === OverflowDirection.GROW) {
-      const updatedOverflowCount = direction === OverflowDirection.NONE ? overflow.length : lastOverflowCount;
-      updateState = {
-        direction: OverflowDirection.GROW,
-        lastOverflowCount: updatedOverflowCount,
-        overflow: [],
-        visible: items
-      };
-    }
-
-    if (growing === OverflowDirection.SHRINK && visible.length > minVisibleItems) {
-      const collapseFromStart = collapseFrom === Boundary.START;
-      const newVisible = (0, _slice.default)(visible).call(visible);
-      const next = collapseFromStart ? newVisible.shift() : newVisible.pop();
-
-      if (next !== undefined) {
-        updateState = {
-          // set SHRINK mode unless a GROW is already in progress.
-          // GROW shows all items then shrinks until it settles, so we
-          // preserve the fact that the original trigger was a GROW.
-          direction: direction !== OverflowDirection.GROW ? OverflowDirection.SHRINK : direction,
-          overflow: collapseFromStart ? [...overflow, next] : [next, ...overflow],
-          visible: newVisible
-        };
-      }
-    }
-
-    this._adapter.updateStates(updateState);
-  }
-
-}
-
-var _default = OverflowListFoundation;
-exports.default = _default;