@douyinfe/semi-foundation 2.9.1 → 2.10.0-beta.0

package/lib/cjs/carousel/foundation.js

@@ -0,0 +1,219 @@
+"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 _setInterval2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-interval"));
+
+var _throttle2 = _interopRequireDefault(require("lodash/throttle"));
+
+var _get2 = _interopRequireDefault(require("lodash/get"));
+
+var _isObject2 = _interopRequireDefault(require("lodash/isObject"));
+
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+
+var _constants = require("./constants");
+
+class CarouselFoundation extends _foundation.default {
+  constructor(adapter) {
+    super((0, _assign.default)({}, adapter));
+    this._interval = null;
+    this.throttleChange = (0, _throttle2.default)(this.onIndicatorChange, this.getSwitchingTime());
+  }
+
+  play(interval) {
+    if (this._interval) {
+      clearInterval(this._interval);
+    }
+
+    this._interval = (0, _setInterval2.default)(() => {
+      this.next();
+    }, interval);
+  }
+
+  stop() {
+    if (this._interval) {
+      clearInterval(this._interval);
+    }
+  }
+
+  goTo(activeIndex) {
+    const {
+      activeIndex: stateActiveIndex
+    } = this.getStates();
+    const targetIndex = this.getValidIndex(activeIndex);
+
+    this._adapter.setIsReverse(stateActiveIndex > targetIndex);
+
+    if (this.getIsControledComponent()) {
+      this._notifyChange(targetIndex);
+    } else {
+      this._notifyChange(targetIndex);
+
+      this.handleNewActiveIndex(targetIndex);
+    }
+  }
+
+  next() {
+    const {
+      activeIndex: stateActiveIndex
+    } = this.getStates();
+    const targetIndex = this.getValidIndex(stateActiveIndex + 1);
+
+    this._adapter.setIsReverse(false);
+
+    if (this.getIsControledComponent()) {
+      this._notifyChange(targetIndex);
+    } else {
+      this._notifyChange(targetIndex);
+
+      this.handleNewActiveIndex(targetIndex);
+    }
+  }
+
+  prev() {
+    const {
+      activeIndex: stateActiveIndex
+    } = this.getStates();
+    const targetIndex = this.getValidIndex(stateActiveIndex - 1);
+
+    this._adapter.setIsReverse(true);
+
+    if (this.getIsControledComponent()) {
+      this._notifyChange(targetIndex);
+    } else {
+      this._notifyChange(targetIndex);
+
+      this.handleNewActiveIndex(targetIndex);
+    }
+  }
+
+  destroy() {
+    this._unregisterInterval();
+  }
+
+  _unregisterInterval() {
+    if (this._interval) {
+      clearInterval(this._interval);
+      this._interval = null;
+    }
+  }
+
+  _notifyChange(activeIndex) {
+    const {
+      activeIndex: stateActiveIndex,
+      isInit
+    } = this.getStates();
+
+    if (isInit) {
+      this._adapter.setIsInit(false);
+    }
+
+    if (stateActiveIndex !== activeIndex) {
+      this._adapter.setPreActiveIndex(stateActiveIndex);
+
+      this._adapter.notifyChange(activeIndex, stateActiveIndex);
+    }
+  }
+
+  getValidIndex(index) {
+    const {
+      children
+    } = this.getStates();
+    return (index + children.length) % children.length;
+  }
+
+  getSwitchingTime() {
+    const {
+      autoPlay,
+      speed
+    } = this.getProps();
+    const autoPlayType = typeof autoPlay;
+
+    if (autoPlayType === 'boolean' && autoPlay) {
+      return _constants.numbers.DEFAULT_INTERVAL + speed;
+    }
+
+    if ((0, _isObject2.default)(autoPlay)) {
+      return (0, _get2.default)(autoPlay, 'interval', _constants.numbers.DEFAULT_INTERVAL) + speed;
+    }
+
+    return speed;
+  }
+
+  getIsControledComponent() {
+    return this._isInProps('activeIndex');
+  }
+
+  handleAutoPlay() {
+    const {
+      autoPlay
+    } = this.getProps();
+    const autoPlayType = typeof autoPlay;
+
+    if (autoPlayType === 'boolean' && autoPlay || (0, _isObject2.default)(autoPlay)) {
+      this.play(this.getSwitchingTime());
+    }
+  }
+
+  handleKeyDown(event) {
+    if (event.key === 'ArrowLeft') {
+      this.prev();
+    }
+
+    if (event.key === 'ArrowRight') {
+      this.next();
+    }
+  }
+
+  onIndicatorChange(activeIndex) {
+    const {
+      activeIndex: stateActiveIndex
+    } = this.getStates();
+
+    this._adapter.setIsReverse(stateActiveIndex > activeIndex);
+
+    this._notifyChange(activeIndex);
+
+    if (!this.getIsControledComponent()) {
+      this.handleNewActiveIndex(activeIndex);
+    }
+  }
+
+  handleNewActiveIndex(activeIndex) {
+    const {
+      activeIndex: stateActiveIndex
+    } = this.getStates();
+
+    if (stateActiveIndex !== activeIndex) {
+      this._adapter.setNewActiveIndex(activeIndex);
+    }
+  }
+
+  getDefaultActiveIndex() {
+    let activeIndex;
+    const props = this.getProps();
+
+    if ('activeIndex' in props) {
+      activeIndex = props.activeIndex;
+    } else if ('defaultActiveIndex' in props) {
+      activeIndex = props.defaultActiveIndex;
+    }
+
+    return activeIndex;
+  }
+
+}
+
+var _default = CarouselFoundation;
+exports.default = _default;

package/lib/cjs/carousel/rtl.scss

@@ -0,0 +1,47 @@
+$module: #{$prefix}-carousel;
+.#{$prefix}-rtl,
+.#{$prefix}-portal-rtl {
+    .#{$module} {
+        direction: rtl;
+        
+        &-indicator {
+            display: flex;
+
+            &-dot {
+                .#{$module}-indicator-item {
+                    &:not(:last-child) {
+                        margin-right: 0;
+                        margin-left: $spacing-carousel_indicator_dot-marginX;
+                    }
+                }
+            }
+
+            &-columnar {
+                .#{$module}-indicator-item {
+                    &:not(:last-child) {
+                        margin-right: 0;
+                        margin-left: $spacing-carousel_indicator_columnar-marginX;
+                    }
+                }
+            }
+        }
+
+        &-arrow {
+            flex-direction: row-reverse;
+
+            &-prev {
+                left: auto;
+                right: $spacing-carousel_arrow-right;
+                transform: scaleX(-1) translateY(-50%);
+                z-index: 2;
+            }
+            
+            &-next {
+                left: $spacing-carousel_arrow-left;
+                transform: scaleX(-1) translateY(-50%);
+                right: auto;
+                z-index: 2;
+            }
+        }
+    }
+}

package/lib/cjs/carousel/variables.scss

@@ -0,0 +1,46 @@
+$color-carousel_indicator_theme_dark-bg-default: rgba(var(--semi-black), .5); // 深色主题指示器背景颜色 - 默认
+$color-carousel_indicator_theme_dark-bg-hover: rgba(var(--semi-black), .7); // 深色主题指示器背景颜色 - 悬浮
+$color-carousel_indicator_theme_dark-bg-active: rgba(var(--semi-black), 1); // 深色主题指示器背景颜色 - 选中
+
+$color-carousel_indicator_theme_primary-bg-default: rgba(var(--semi-blue-6), .4); // 主要主题指示器背景颜色 - 默认
+$color-carousel_indicator_theme_primary-bg-hover: rgba(var(--semi-blue-6), .7); // 主要主题指示器背景颜色 - 悬浮
+$color-carousel_indicator_theme_primary-bg-active: rgba(var(--semi-blue-6), 1); // 主要主题指示器背景颜色 - 选中
+
+$color-carousel_indicator_theme_light-bg-default: rgba(var(--semi-white), .4); // 浅色主题指示器背景颜色 - 默认
+$color-carousel_indicator_theme_light-bg-hover: rgba(var(--semi-white), .7); // 浅色主题指示器背景颜色 - 悬浮
+$color-carousel_indicator_theme_light-bg-active: rgba(var(--semi-white), 1); // 浅色主题指示器背景颜色 - 选中
+
+$color-carousel_arrow_theme_dark-bg-default: rgba(var(--semi-black), .5); // 深色主题箭头背景颜色 - 默认
+$color-carousel_arrow_theme_dark-bg-hover: rgba(var(--semi-black), 1); // 深色主题箭头背景颜色 - 悬浮
+
+$color-carousel_arrow_theme_primary-bg-default:  rgba(var(--semi-blue-6), .4); // 主要主题箭头背景颜色 - 默认
+$color-carousel_arrow_theme_primary-bg-hover:  rgba(var(--semi-blue-6), 1); // 主要主题箭头背景颜色 - 悬浮
+
+$color-carousel_arrow_theme_light-bg-default: rgba(var(--semi-white), .4); // 浅色主题箭头背景颜色 - 默认
+$color-carousel_arrow_theme_light-bg-hover: rgba(var(--semi-white), 1); // 浅色主题箭头背景颜色 - 悬浮
+
+$width-carousel_indicator_line: 240px; // 条状指示器最大宽度
+$width-carousel_indicator_columnar_small: 4px; // 小尺寸柱状指示器宽度
+$width-carousel_indicator_columnar_medium: 6px; // 中等尺寸柱状指示器宽度
+$width-carousel_indicator_dot_small:8px; // 小尺寸点状指示器宽度
+$width-carousel_indicator_dot_medium: 12px; // 中等尺寸点状指示器宽度
+$width-carousel_arrow: 32px; // 箭头宽度
+
+$height-carousel_indicator_columnar_small_default: 12px; // 小尺寸柱状指示器高度 - 默认
+$height-carousel_indicator_columnar_small_active: 20px; // 小尺寸柱状指示器高度 - 选中
+$height-carousel_indicator_columnar_medium_default: 20px; // 中等尺寸柱状指示器高度 - 默认
+$height-carousel_indicator_columnar_medium_active: 28px; // 中等尺寸柱状指示器高度 - 选中
+
+$height-carousel_indicator_line_small: 4px; // 小尺寸条状指示器高度
+$height-carousel_indicator_line_medium: 6px; // 中等尺寸条状指示器高度
+
+$radius-carousel_indicator_dot: 50%; // 点状指示器圆角
+
+$spacing-carousel_indicator-padding: 32px; // 指示器内边距
+
+$spacing-carousel_indicator_columnar-marginX: 4px; // 柱状指示器水平外边距
+$spacing-carousel_indicator_line-marginX: 4px; // 条状指示器水平外边距
+$spacing-carousel_indicator_dot-marginX: 8px; // 点状指示器水平外边距
+
+$spacing-carousel_arrow-left: 20px; // 左侧箭头绝对定位 - left
+$spacing-carousel_arrow-right: 20px; // 右侧箭头绝对定位 - right

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

@@ -1,5 +1,6 @@
 declare const cssClasses: {
     PREFIX: string;
+    FOCUS: string;
     LARGE: string;
     SMALL: string;
     CHECKED: string;

package/lib/cjs/switch/constants.js

@@ -12,6 +12,7 @@ var _constants = require("../base/constants");
 
 const cssClasses = {
   PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-switch"),
+  FOCUS: "".concat(_constants.BASE_CLASS_PREFIX, "-switch-focus"),
   LARGE: "".concat(_constants.BASE_CLASS_PREFIX, "-switch-large"),
   SMALL: "".concat(_constants.BASE_CLASS_PREFIX, "-switch-small"),
   CHECKED: "".concat(_constants.BASE_CLASS_PREFIX, "-switch-checked"),

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

@@ -2,6 +2,7 @@ import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 export interface SwitchAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     setNativeControlChecked: (nativeControlChecked: boolean | undefined) => void;
     setNativeControlDisabled: (nativeControlDisabled: boolean | undefined) => void;
+    setFocusVisible: (focusVisible: boolean) => void;
     notifyChange: (checked: boolean, e: any) => void;
 }
 export default class SwitchFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<SwitchAdapter<P, S>, P, S> {
@@ -10,5 +11,7 @@ export default class SwitchFoundation<P = Record<string, any>, S = Record<string
     setChecked(checked: boolean | undefined): void;
     setDisabled(disabled: boolean | undefined): void;
     handleChange(checked: boolean, e: any): void;
+    handleFocusVisible: (event: any) => void;
+    handleBlur: () => void;
     destroy(): void;
 }

package/lib/cjs/switch/foundation.js

@@ -17,6 +17,24 @@ var _foundation = _interopRequireDefault(require("../base/foundation"));
 class SwitchFoundation extends _foundation.default {
   constructor(adapter) {
     super((0, _assign.default)({}, adapter));
+
+    this.handleFocusVisible = event => {
+      const {
+        target
+      } = event;
+
+      try {
+        if (target.matches(':focus-visible')) {
+          this._adapter.setFocusVisible(true);
+        }
+      } catch (error) {
+        console.warn('The current browser does not support the focus-visible');
+      }
+    };
+
+    this.handleBlur = () => {
+      this._adapter.setFocusVisible(false);
+    };
   }
 
   init() {

package/lib/cjs/switch/switch.css

@@ -22,6 +22,9 @@
 .semi-switch:active .semi-switch-knob {
   width: 24px;
 }
+.semi-switch-focus {
+  outline: 2px solid var(--semi-color-primary-light-active);
+}
 .semi-switch-checked {
   background-color: var(--semi-color-success);
 }

package/lib/cjs/switch/switch.scss

@@ -28,6 +28,10 @@ $module: #{$prefix}-switch;
         }
     }
 
+    &-focus {
+        outline: $width-switch-outline solid $color-switch_primary-outline-focus;
+    }
+
     &-checked {
         background-color: $color-switch_checked-bg-default;
 

package/lib/cjs/switch/variables.scss

@@ -37,6 +37,7 @@ $color-switch_unchecked-text-default: var(--semi-color-text-2); // 关闭态开
 $color-switch_loading_spin-default: var(--semi-color-white); // 加载态开关loading图标颜色
 $color-switch_spin_checked-bg-default: var(--semi-color-success-hover); // 已开启开关加载态loading背景颜色
 $color-switch_spin_unchecked-bg-default: var(--semi-color-fill-1); // 已关闭开关加载态loading背景颜色
+$color-switch_primary-outline-focus: var(--semi-color-primary-light-active); // 开关轮廓 - 聚焦
 
 // Width/Height
 $width-switch: 40px; // 开关宽度
@@ -57,6 +58,7 @@ $width-switch_checked_unchecked_text: 26px; // 开关按钮文字宽度
 $width-switch_spin-small: 10px; // 小尺寸开关加载 spin 宽度
 $width-switch_spin-default: 18px; // 默认尺寸开关加载 spin 宽度
 $width-switch_spin-large: 28px; // 大尺寸开关加载 spin 宽度
+$width-switch-outline: 2px; // 开关轮廓宽度
 
 
 // Spacing