@douyinfe/semi-foundation 2.1.1 → 2.1.5

package/lib/cjs/notification/notification.scss

@@ -0,0 +1,168 @@
+//@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

@@ -0,0 +1,48 @@
+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

@@ -0,0 +1,74 @@
+"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 _isNumber2 = _interopRequireDefault(require("lodash/isNumber"));
+
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+
+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, _isNumber2.default)(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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,61 @@
+"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

@@ -0,0 +1,23 @@
+$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

@@ -0,0 +1,43 @@
+// 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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,44 @@
+"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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,143 @@
+"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 _cloneDeep2 = _interopRequireDefault(require("lodash/cloneDeep"));
+
+var _get2 = _interopRequireDefault(require("lodash/get"));
+
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+
+var _constants = require("./constants");
+
+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, _cloneDeep2.default)(this.getState('visibleState'));
+    const res = {};
+    (0, _forEach.default)(entries).call(entries, entry => {
+      const itemKey = (0, _get2.default)(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;