@douyinfe/semi-foundation 2.1.0 → 2.1.4

package/lib/cjs/sideSheet/sideSheet.css

@@ -0,0 +1,143 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-sidesheet {
+  font-size: 14px;
+  line-height: 20px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  position: fixed;
+  margin: 0;
+  top: 0;
+  left: 0;
+  height: 100%;
+}
+.semi-sidesheet-inner:focus, .semi-sidesheet-content:focus {
+  outline: none;
+}
+.semi-sidesheet-inner-wrap {
+  position: absolute;
+}
+.semi-sidesheet-left, .semi-sidesheet-right {
+  top: 0;
+  width: 0%;
+  height: 100%;
+}
+.semi-sidesheet-left .semi-sidesheet-inner-wrap, .semi-sidesheet-right .semi-sidesheet-inner-wrap {
+  height: 100%;
+}
+.semi-sidesheet-left.semi-sidesheet, .semi-sidesheet-right.semi-sidesheet {
+  width: 100%;
+}
+.semi-sidesheet-right {
+  right: 0;
+}
+.semi-sidesheet-right .semi-sidesheet-inner-wrap {
+  right: 0;
+}
+.semi-sidesheet-top, .semi-sidesheet-bottom {
+  left: 0;
+  width: 100%;
+  height: 0%;
+}
+.semi-sidesheet-top .semi-sidesheet-inner-wrap, .semi-sidesheet-bottom .semi-sidesheet-inner-wrap {
+  width: 100%;
+}
+.semi-sidesheet-top.semi-sidesheet, .semi-sidesheet-bottom.semi-sidesheet {
+  height: 100%;
+}
+.semi-sidesheet-top {
+  top: 0;
+}
+.semi-sidesheet-bottom {
+  bottom: 0;
+}
+.semi-sidesheet-bottom .semi-sidesheet-inner-wrap {
+  bottom: 0;
+}
+.semi-sidesheet-title {
+  flex: 1 0 auto;
+  margin: 0;
+  font-size: 18px;
+  line-height: 24px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 600;
+  color: var(--semi-color-text-0);
+  text-align: left;
+}
+.semi-sidesheet-inner {
+  z-index: 1;
+  overflow: auto;
+  background-color: var(--semi-color-bg-2);
+  border: 0;
+}
+.semi-sidesheet-header {
+  display: flex;
+  align-items: flex-start;
+  padding: 24px;
+  padding-bottom: 20px;
+}
+.semi-sidesheet-body {
+  padding: 0 24px;
+  flex: 1;
+}
+.semi-sidesheet-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.semi-sidesheet-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--semi-overlay-bg);
+}
+.semi-sidesheet-mask-hidden {
+  display: none;
+}
+.semi-sidesheet-footer {
+  padding: 24px;
+}
+
+.semi-sidesheet-fixed .semi-sidesheet-inner {
+  box-shadow: var(--semi-shadow-elevated);
+}
+.semi-sidesheet-fixed.semi-sidesheet-left {
+  left: 0;
+}
+.semi-sidesheet-fixed.semi-sidesheet-left .semi-sidesheet-inner {
+  left: 0;
+}
+.semi-sidesheet-fixed.semi-sidesheet-right {
+  left: auto;
+}
+.semi-sidesheet-fixed.semi-sidesheet-right .semi-sidesheet-inner {
+  right: 0;
+}
+.semi-sidesheet-fixed.semi-sidesheet-top, .semi-sidesheet-fixed.semi-sidesheet-bottom {
+  height: auto;
+}
+.semi-sidesheet-fixed.semi-sidesheet-bottom {
+  top: auto;
+}
+.semi-sidesheet-fixed.semi-sidesheet-bottom .semi-sidesheet-inner {
+  bottom: 0;
+}
+
+.semi-sidesheet.semi-sidesheet-popup {
+  position: absolute;
+}
+
+.semi-sidesheet-hidden {
+  display: none;
+}
+
+.semi-sidesheet-rtl .semi-sidesheet-inner {
+  direction: rtl;
+}
+.semi-sidesheet-rtl .semi-sidesheet-title {
+  text-align: right;
+}

package/lib/cjs/sideSheet/sideSheet.scss

@@ -0,0 +1,171 @@
+@import "./variables.scss";
+
+$module: #{$prefix}-sidesheet;
+
+.#{$module} {
+    @include font-size-regular;
+    position: fixed;
+    margin: $spacing-sideSheet-margin;
+    top: 0;
+    left: 0;
+    height: 100%;
+
+    &-inner:focus,
+    &-content:focus {
+        outline: none;
+    }
+
+    &-inner-wrap {
+        position: absolute;
+    }
+
+    &-left,
+    &-right {
+        top: 0;
+        width: 0%;
+        height: 100%;
+
+        .#{$module}-inner-wrap {
+            height: 100%;
+        }
+
+        &.#{$module} {
+            width: 100%;
+        }
+    }
+
+    &-right {
+        right: 0;
+
+        .#{$module}-inner-wrap {
+            right: 0;
+        }
+    }
+
+    &-top,
+    &-bottom {
+        left: 0;
+        width: 100%;
+        height: 0%;
+
+        .#{$module}-inner-wrap {
+            width: 100%;
+        }
+
+        &.#{$module} {
+            height: 100%;
+        }
+    }
+
+    &-top {
+        top: 0;
+    }
+
+    &-bottom {
+        bottom: 0;
+
+        .#{$module}-inner-wrap {
+            bottom: 0;
+        }
+    }
+
+    &-title {
+        flex: 1 0 auto;
+        margin: $spacing-sideSheet_title-margin;
+        @include font-size-header-5;
+        font-weight: $font-sideSheet_title-fontWeight;
+        color: $color-sideSheet_main-text;
+        text-align: left;
+    }
+
+    &-inner {
+        // position: relative;
+        z-index: 1;
+        overflow: auto;
+        background-color: $color-sideSheet-bg;
+        // background-clip: padding-box;
+        border: 0;
+    }
+
+    &-header {
+        display: flex;
+        align-items: flex-start;
+        padding: $spacing-sideSheet_header-padding;
+        padding-bottom: $spacing-sideSheet_header-paddingBottom;
+    }
+
+    &-body {
+        padding: $spacing-sideSheet_body-paddingY $spacing-sideSheet_body-paddingX;
+        flex: 1;
+    }
+
+    &-content {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        box-sizing: border-box;
+        overflow: hidden;
+        // padding: 0 $spacing-loose;
+    }
+
+    &-mask {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: $color-sideSheet_mask-bg;
+
+        &-hidden {
+            display: none;
+        }
+    }
+
+    &-footer {
+        padding: $spacing-sideSheet_footer-padding;
+    }
+}
+
+.#{$module}-fixed {
+    .#{$module}-inner {
+        box-shadow: var(--semi-shadow-elevated);
+    }
+
+    &.#{$module}-left {
+        left: 0;
+        // width will inject by js
+        .#{$module}-inner {
+            left: 0;
+        }
+    }
+
+    &.#{$module}-right {
+        left: auto;
+        // width will inject by js
+        .#{$module}-inner {
+            right: 0;
+        }
+    }
+
+    &.#{$module}-top,
+    &.#{$module}-bottom {
+        height: auto;
+    }
+
+    &.#{$module}-bottom {
+        top: auto;
+
+        .#{$module}-inner {
+            bottom: 0;
+        }
+    }
+}
+
+.#{$module}.#{$module}-popup {
+    position: absolute;
+}
+.#{$module}-hidden {
+    display: none;
+}
+
+@import "./rtl.scss";

package/lib/cjs/sideSheet/sideSheetFoundation.d.ts

@@ -0,0 +1,55 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+import { Motion } from '../utils/type';
+export interface SideSheetProps {
+    afterVisibleChange?: (isVisible: boolean) => void;
+    bodyStyle?: Record<string, any>;
+    className?: string;
+    closable?: boolean;
+    closeOnEsc?: boolean;
+    disableScroll?: boolean;
+    footer?: any;
+    getPopupContainer?: () => HTMLElement;
+    headerStyle?: Record<string, any>;
+    height?: number | string;
+    keepDOM?: boolean;
+    mask?: boolean;
+    maskClosable?: boolean;
+    maskStyle?: Record<string, any>;
+    motion?: Motion;
+    onCancel?: (e: any) => void;
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    size?: 'small' | 'medium' | 'large';
+    style?: Record<string, any>;
+    title?: any;
+    visible?: boolean;
+    width?: number | string;
+    zIndex?: number;
+    children?: any;
+}
+export interface SideSheetState {
+    hidden: boolean;
+}
+export interface SideSheetAdapter extends DefaultAdapter<SideSheetProps, SideSheetState> {
+    disabledBodyScroll: () => void;
+    enabledBodyScroll: () => void;
+    notifyCancel: (e: any) => void;
+    notifyVisibleChange: (visible: boolean) => void;
+    setOnKeyDownListener: () => void;
+    removeKeyDownListener: () => void;
+    toggleHidden: (hidden: boolean) => void;
+}
+export default class SideSheetFoundation extends BaseFoundation<SideSheetAdapter> {
+    constructor(adapter: SideSheetAdapter);
+    get defaultAdapter(): {
+        handleCancel: (...args: any[]) => void;
+        beforeShow: (...args: any[]) => void;
+        afterHide: (...args: any[]) => void;
+    };
+    destroy(): void;
+    handleCancel(e: any): void;
+    beforeShow(): void;
+    afterHide(): void;
+    handleKeyDown(e: any): void;
+    mergeMotionProp: (motion: any, prop: string, cb: () => void) => any;
+    getMergedMotion: () => any;
+}

package/lib/cjs/sideSheet/sideSheetFoundation.js

@@ -0,0 +1,126 @@
+"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 _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
+
+var _noop2 = _interopRequireDefault(require("lodash/noop"));
+
+var _get2 = _interopRequireDefault(require("lodash/get"));
+
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+
+var _keyCode = _interopRequireDefault(require("../utils/keyCode"));
+
+class SideSheetFoundation extends _foundation.default {
+  constructor(adapter) {
+    var _this;
+
+    super((0, _assign.default)((0, _assign.default)({}, SideSheetFoundation.defaultAdapter), adapter));
+    _this = this;
+
+    this.mergeMotionProp = (motion, prop, cb) => {
+      const mergedMotion = typeof motion === 'undefined' || motion ? (0, _assign.default)((0, _assign.default)({}, motion), {
+        [prop]: function () {
+          const curr = (0, _get2.default)(motion, prop);
+
+          if (typeof curr === 'function') {
+            curr(...arguments);
+          }
+
+          cb();
+        }
+      }) : false;
+      return mergedMotion;
+    };
+
+    this.getMergedMotion = () => {
+      const {
+        motion,
+        visible,
+        keepDOM
+      } = this.getProps();
+      let mergedMotion = this.mergeMotionProp(motion, 'didEnter', function () {
+        const didEnter = (0, _get2.default)(motion, 'didEnter');
+
+        if (typeof didEnter === 'function') {
+          didEnter(...arguments);
+        }
+
+        _this._adapter.notifyVisibleChange(visible);
+      });
+      mergedMotion = this.mergeMotionProp(mergedMotion, 'didLeave', function () {
+        const didLeave = (0, _get2.default)(motion, 'didLeave');
+
+        if (typeof didLeave === 'function') {
+          didLeave(...arguments);
+        }
+
+        _this._adapter.notifyVisibleChange(visible);
+      });
+
+      if (keepDOM) {
+        var _context;
+
+        mergedMotion = this.mergeMotionProp(mergedMotion, 'didLeave', (0, _bind.default)(_context = this._adapter.toggleHidden).call(_context, this, true));
+      }
+
+      return mergedMotion;
+    };
+  }
+
+  get defaultAdapter() {
+    return {
+      handleCancel: _noop2.default,
+      beforeShow: _noop2.default,
+      afterHide: _noop2.default
+    };
+  }
+
+  destroy() {
+    this.afterHide();
+  }
+
+  handleCancel(e) {
+    this._adapter.notifyCancel(e);
+  }
+
+  beforeShow() {
+    const allowDisable = this.getProp('disableScroll');
+    allowDisable && this._adapter.disabledBodyScroll();
+
+    this._adapter.setOnKeyDownListener();
+  }
+
+  afterHide() {
+    const allowDisable = this.getProp('disableScroll');
+    allowDisable && this._adapter.enabledBodyScroll();
+
+    this._adapter.removeKeyDownListener();
+  }
+
+  handleKeyDown(e) {
+    const {
+      closeOnEsc
+    } = this.getProps();
+
+    if (closeOnEsc && e.keyCode === _keyCode.default.ESC) {
+      e.stopPropagation();
+      this.handleCancel(e);
+      return;
+    }
+  }
+
+}
+
+exports.default = SideSheetFoundation;

package/lib/cjs/sideSheet/variables.scss

@@ -0,0 +1,16 @@
+// Color
+$color-sideSheet_mask-bg: var(--semi-overlay-bg); // 侧边栏打开后蒙层颜色
+$color-sideSheet-bg: var(--semi-color-bg-2); // 侧边栏背景颜色
+$color-sideSheet_main-text: var(--semi-color-text-0); // 侧边栏默认文本颜色
+
+// Spacing
+$spacing-sideSheet-margin: 0; // 侧边栏整体外边距
+$spacing-sideSheet_title-margin: 0; // 侧边栏标题外边距
+$spacing-sideSheet_header-padding: $spacing-loose; // 侧边栏 header 内边距
+$spacing-sideSheet_header-paddingBottom: $spacing-base-loose; // 侧边栏 header 底部内边距
+$spacing-sideSheet_body-paddingY: 0; // 侧边栏 body 垂直内边距
+$spacing-sideSheet_body-paddingX: $spacing-loose; // 侧边栏 body 水平内边距
+$spacing-sideSheet_footer-padding: $spacing-loose; // 侧边栏 footer 内边距
+
+// Font
+$font-sideSheet_title-fontWeight: $font-weight-bold; // 侧边栏标题文本字重

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

@@ -0,0 +1,5 @@
+declare const cssClasses: {
+    PREFIX: string;
+};
+declare const strings: {};
+export { cssClasses, strings };

package/lib/cjs/skeleton/constants.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.strings = exports.cssClasses = void 0;
+
+var _constants = require("../base/constants");
+
+const cssClasses = {
+  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-skeleton")
+};
+exports.cssClasses = cssClasses;
+const strings = {};
+exports.strings = strings;

package/lib/cjs/skeleton/rtl.scss

@@ -0,0 +1,8 @@
+$module: #{$prefix}-skeleton;
+
+.#{$prefix}-rtl,
+.#{$prefix}-portal-rtl {
+    .#{$module} {
+        direction: rtl;
+    }
+}

package/lib/cjs/skeleton/skeleton.css

@@ -0,0 +1,87 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-skeleton-avatar, .semi-skeleton-image, .semi-skeleton-title, .semi-skeleton-button {
+  background: var(--semi-color-fill-0);
+  border-radius: 4px;
+}
+.semi-skeleton-avatar {
+  border-radius: 50%;
+}
+.semi-skeleton-avatar-extra-extra-small {
+  width: 20px;
+  height: 20px;
+}
+.semi-skeleton-avatar-extra-small {
+  width: 24px;
+  height: 24px;
+}
+.semi-skeleton-avatar-medium {
+  width: 48px;
+  height: 48px;
+}
+.semi-skeleton-avatar-small {
+  width: 32px;
+  height: 32px;
+}
+.semi-skeleton-avatar-large {
+  width: 72px;
+  height: 72px;
+}
+.semi-skeleton-avatar-extra-large {
+  width: 128px;
+  height: 128px;
+}
+.semi-skeleton-paragraph {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+.semi-skeleton-paragraph li {
+  background: var(--semi-color-fill-0);
+  border-radius: 4px;
+  width: 100%;
+  height: 16px;
+  margin-bottom: 10px;
+}
+.semi-skeleton-paragraph li:last-child {
+  width: 60%;
+  margin-bottom: 0;
+}
+.semi-skeleton-paragraph li:first-child {
+  width: 100%;
+}
+.semi-skeleton-title {
+  width: 100%;
+  height: 24px;
+}
+.semi-skeleton-button {
+  width: 115px;
+  height: 32px;
+}
+.semi-skeleton-image {
+  width: 100%;
+  height: 100%;
+}
+.semi-skeleton-active .semi-skeleton-avatar,
+.semi-skeleton-active .semi-skeleton-image,
+.semi-skeleton-active .semi-skeleton-title,
+.semi-skeleton-active .semi-skeleton-button,
+.semi-skeleton-active .semi-skeleton-paragraph li {
+  background: linear-gradient(90deg, var(--semi-color-fill-0) 25%, var(--semi-color-fill-1) 44%, var(--semi-color-fill-0) 88%);
+  background-size: 400% 100%;
+  animation: skeleton-loading 1.4s ease infinite;
+}
+@keyframes skeleton-loading {
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0 50%;
+  }
+}
+
+.semi-rtl .semi-skeleton,
+.semi-portal-rtl .semi-skeleton {
+  direction: rtl;
+}