@douyinfe/semi-foundation 2.72.2 → 2.73.0-beta.0

package/cropper/utils.ts

@@ -0,0 +1,12 @@
+export function getMiddle(value: number, [min, max]) {
+    return Math.min(Math.max(value, min), max);
+}
+
+export function getAspectHW(width: number, height: number, aspect: number) {
+    if (width / height > aspect) {
+        width = height * aspect;
+    } else {
+        height = width / aspect;
+    }
+    return [width, height];
+}

package/cropper/variables.scss

@@ -0,0 +1,6 @@
+$color-cropper_mask-bg: var(--semi-color-overlay-bg); // 裁切框遮罩背景颜色
+$color-cropper_box-outline: var(--semi-color-primary); // 裁切框边框颜色
+$color-cropper_box_corner-bg: var(--semi-color-primary); // 裁切框调整块背景色
+
+$width-cropper_box-outline: 1px; // 裁切框边框宽度
+$width-cropper_box_corner: 10px; // 裁切框调整块宽高

package/dragMove/foundation.ts

@@ -46,9 +46,21 @@ export default class DragMoveFoundation<P = Record<string, any>, S = Record<stri
         this.element = element;
         this.element.style.position = 'absolute';
         this.handler.style.cursor = 'move';
+        this._registerStartEvent();
+    }
+
+    _registerStartEvent = () => {
+        this.handler.addEventListener('mousedown', this.onMouseDown);
+        this.handler.addEventListener('touchstart', this.onTouchStart);
+    }
+
+    _unRegisterStartEvent = () => {
+        this.handler.removeEventListener('mousedown', this.onMouseDown);
+        this.handler.removeEventListener('touchstart', this.onTouchStart);
     }
 
     destroy() {
+        this._unRegisterStartEvent();
         this._unRegisterEvent();
     }
 

package/jsonViewer/foundation.ts

@@ -53,10 +53,16 @@ class JsonViewerFoundation extends BaseFoundation<JsonViewerAdapter> {
     }
 
     replace(replaceText: string) {
+        if (this.getProps().options.readOnly) {
+            return;
+        }
         this.jsonViewer?.getSearchWidget().replace(replaceText);
     }
 
     replaceAll(replaceText: string) {
+        if (this.getProps().options.readOnly) {
+            return;
+        }
         this.jsonViewer?.getSearchWidget().replaceAll(replaceText);
     }
 

package/jsonViewer/jsonViewer.scss

@@ -68,8 +68,8 @@ $module: #{$prefix}-json-viewer;
         font-variation-settings: normal;
         letter-spacing: 0px;
         color: #237893;
-        word-wrap: break-word;
-        white-space: pre-wrap;
+        word-break: break-all !important;
+        white-space: pre-wrap !important;
     }
 
     &-line-number {
@@ -82,6 +82,7 @@ $module: #{$prefix}-json-viewer;
         color: $color-json-viewer-line-number;
         text-align: center;
         width: 50px;
+        user-select: none;
     }
 
     &-content-container {
@@ -196,5 +197,9 @@ $module: #{$prefix}-json-viewer;
         cursor: pointer;
     }
 
-
+    &-error {
+        text-decoration: underline wavy var(--semi-color-danger);
+        text-decoration-thickness: 1px;
+        text-underline-position: under;
+    }
 }

package/lib/cjs/audioPlayer/audioPlayer.css

@@ -0,0 +1,188 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-audio-player {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 24px;
+  max-width: 1440px;
+  height: 78px;
+  background: rgba(var(--semi-grey-9), 0.8);
+}
+.semi-audio-player-control {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+.semi-audio-player-control-button-icon {
+  color: var(--semi-color-bg-0);
+}
+.semi-audio-player-control-button-play {
+  background: var(--semi-color-bg-0) !important;
+  color: var(--semi-color-text-0) !important;
+}
+.semi-audio-player-control-button-play-disabled {
+  background: rgba(var(--semi-grey-0), 0.35) !important;
+  color: var(--semi-color-grey-7) !important;
+}
+.semi-audio-player-slider-container {
+  width: 323px;
+  height: 100%;
+}
+.semi-audio-player-info-container {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+.semi-audio-player-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.semi-audio-player-info-title {
+  font-size: 14px;
+  color: var(--semi-color-bg-0);
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+}
+.semi-audio-player-info-time {
+  width: 100%;
+  height: 22px;
+  font-size: 14px;
+  color: var(--semi-color-bg-0);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  user-select: none;
+}
+.semi-audio-player-control-speed {
+  width: 40px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  background: rgba(var(--semi-grey-8), 1);
+  border-radius: 3px;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--semi-color-default);
+  font-weight: 600;
+  user-select: none;
+}
+.semi-audio-player-control-speed-menu {
+  background: rgba(var(--semi-grey-8), 1);
+  width: 65px;
+}
+.semi-audio-player-control-speed-menu-item {
+  color: var(--semi-color-default);
+}
+.semi-audio-player-control-speed-menu-item:hover {
+  background: var(--semi-color-tertiary-active) !important;
+}
+.semi-audio-player-control-volume {
+  width: 43px;
+  height: 164px;
+  background: rgba(var(--semi-grey-8), 1);
+  border-radius: 4px;
+  padding: 4px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 8px;
+}
+.semi-audio-player-control-volume-title {
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--semi-color-default);
+  font-weight: 600;
+  user-select: none;
+}
+.semi-audio-player-error {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: 4px;
+  color: var(--semi-color-danger);
+}
+.semi-audio-player-light {
+  background: var(--semi-color-bg-0);
+  border: 1px solid var(--semi-color-border);
+}
+.semi-audio-player-light .semi-audio-player-control-button-icon {
+  color: rgba(var(--semi-grey-9), 1);
+}
+.semi-audio-player-light .semi-audio-player-control-button-play {
+  background: rgba(var(--semi-grey-9), 1) !important;
+  color: var(--semi-color-bg-0) !important;
+}
+.semi-audio-player-light .semi-audio-player-control-button-play-disabled {
+  background: var(--semi-color-disabled-text) !important;
+  color: rgba(var(--semi-white), 1) !important;
+}
+.semi-audio-player-light .semi-audio-player-info-title,
+.semi-audio-player-light .semi-audio-player-info-time {
+  color: rgba(var(--semi-grey-9), 1);
+}
+.semi-audio-player-light .semi-audio-player-control-speed-menu-item,
+.semi-audio-player-light .semi-audio-player-control-volume-title {
+  color: rgba(var(--semi-grey-9), 1);
+}
+.semi-audio-player-light .semi-audio-player-control-speed-menu-item:hover {
+  background: rgba(var(--semi-grey-1), 1) !important;
+}
+
+.semi-audio-player-slider {
+  background: rgba(var(--semi-grey-5), 1);
+  border-radius: 9999px;
+  position: relative;
+}
+.semi-audio-player-slider-light {
+  background: rgba(var(--semi-grey-2), 1);
+}
+.semi-audio-player-slider-wrapper {
+  position: relative;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.semi-audio-player-slider-wrapper-vertical {
+  width: 100%;
+}
+.semi-audio-player-slider-wrapper-horizontal {
+  height: 100%;
+}
+.semi-audio-player-slider-vertical {
+  width: 4px;
+  height: 100%;
+}
+.semi-audio-player-slider-horizontal {
+  width: 100%;
+  height: 4px;
+}
+.semi-audio-player-slider-progress {
+  position: absolute;
+  background: rgba(var(--semi-blue-4), 1);
+  border-radius: 9999px;
+}
+.semi-audio-player-slider-progress-vertical {
+  bottom: 0;
+}
+.semi-audio-player-slider-progress-horizontal {
+  left: 0;
+}
+.semi-audio-player-slider-dot {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  background: rgba(var(--semi-white), 1);
+  border: 1px solid var(--semi-color-primary);
+  box-shadow: 0px 0px 4px 0px var(--semi-color-shadow);
+  border-radius: 50%;
+  transition: opacity 0.2s;
+}

package/lib/cjs/audioPlayer/audioPlayer.scss

@@ -0,0 +1,217 @@
+@import './variables.scss';
+
+$module: #{$prefix}-audio-player;
+
+.#{$module} {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: $gap-audio-player-large;
+    max-width: $width-audio-player-max;
+    height: $height-audio-player;
+    background: $color-audio-player-background;
+    &-control {
+        display: flex;
+        align-items: center;
+        gap: $gap-audio-player-medium;
+    }
+
+    &-control-button-icon {
+        color: $color-audio-player-control-icon;
+    }
+
+    &-control-button-play {
+        background: $color-audio-player-control-icon !important;
+        color: $color-audio-player-control-icon-play !important;
+    }
+
+    &-control-button-play-disabled {
+        background: $color-audio-player-disabled-bg !important;
+        color: $color-audio-player-disabled-text !important;
+    }
+
+    &-slider-container {
+        width: $width-audio-player-slider;
+        height: 100%;
+    }
+
+    &-info-container {
+        display: flex;
+        align-items: center;
+        gap: $gap-audio-player-medium;
+    }
+
+    &-info {
+        display: flex;
+        flex-direction: column;
+        gap: $gap-audio-player-small;
+    }
+
+    &-info-title {
+        font-size: $font-size-audio-player-text;
+        color: $color-audio-player-font-color;
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+    }
+    &-info-time {
+        width: 100%;
+        height: $height-audio-player-time;
+        font-size: $font-size-audio-player-text;
+        color: $color-audio-player-font-color;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: $gap-audio-player-small;
+        user-select: none;
+    }
+    &-control-speed {
+        width: $width-audio-player-speed;
+        height: $height-audio-player-speed;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: $gap-audio-player-small;
+        background: $color-audio-player-font-color-speed;
+        border-radius: $border-radius-audio-player-speed;
+        font-size: $font-size-audio-player-small;
+        line-height: $line-height-audio-player-small;
+        color: var(--semi-color-default);
+        font-weight: 600;
+        user-select: none;
+    }
+
+    &-control-speed-menu {
+        background: $color-audio-player-font-color-speed;
+        width: $width-audio-player-speed-menu;
+    }
+
+    &-control-speed-menu-item {
+        color: $color-audio-player-text-default;
+    }
+
+    &-control-speed-menu-item:hover {
+        background: var(--semi-color-tertiary-active) !important;
+    }
+
+    &-control-volume {
+        width: $width-audio-player-volume;
+        height: $height-audio-player-volume;
+        background: $color-audio-player-font-color-speed;
+        border-radius: $border-radius-audio-player-volume;
+        padding: 4px 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        gap: $gap-audio-player-small * 2;
+    }
+
+    &-control-volume-title {
+        font-size: $font-size-audio-player-small;
+        line-height: $line-height-audio-player-small;
+        color: $color-audio-player-text-default;
+        font-weight: 600;
+        user-select: none;
+    }
+
+    &-error {
+        display: flex;
+        align-items: center;
+        gap: $gap-audio-player-small;
+        margin-left: 4px;
+        color: var(--semi-color-danger);
+    }
+
+    &-light {
+        background: $color-audio-player-background-light;
+        border: 1px solid var(--semi-color-border);
+
+        .#{$module}-control-button-icon {
+            color: $color-audio-player-control-icon-light;
+        }
+
+        .#{$module}-control-button-play {
+            background: $color-audio-player-control-icon-light !important;
+            color: $color-audio-player-control-icon-play-light !important;
+        }
+
+        .#{$module}-control-button-play-disabled {
+            background: $color-audio-player-light-disabled-bg !important;
+            color: $color-audio-player-light-disabled-text !important;
+        }
+
+        .#{$module}-info-title,
+        .#{$module}-info-time {
+            color: $color-audio-player-font-color-light;
+        }
+
+        .#{$module}-control-speed-menu-item,
+        .#{$module}-control-volume-title {
+            color: $color-audio-player-light-text;
+        }
+
+        .#{$module}-control-speed-menu-item:hover {
+            background: $color-audio-player-light-hover-bg !important;
+        }
+    }
+}
+
+.#{$module}-slider {
+    background: $color-audio-player-slider-bg;
+    border-radius: $border-radius-audio-player-slider;
+    position: relative;
+    
+    &-light {
+        background: $color-audio-player-slider-bg-light;
+    }
+
+    &-wrapper {
+        position: relative;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        &-vertical {
+            width: 100%;
+        }
+        &-horizontal {
+            height: 100%;
+        }
+    }
+
+    &-vertical {
+        width: $width-audio-player-slider-bar;
+        height: 100%;
+    }
+
+    &-horizontal {
+        width: 100%;
+        height: $width-audio-player-slider-bar;
+    }
+
+    &-progress {
+        position: absolute;
+        background: $color-audio-player-slider-progress;
+        border-radius: $border-radius-audio-player-slider;
+    }
+
+    &-progress-vertical {
+        bottom: 0;
+    }
+
+    &-progress-horizontal {
+        left: 0;
+    }
+
+    &-dot {
+        position: absolute;
+        width: $size-audio-player-slider-dot;
+        height: $size-audio-player-slider-dot;
+        background: $color-audio-player-slider-dot-bg;
+        border: 1px solid var(--semi-color-primary);
+        box-shadow: 0px 0px 4px 0px var(--semi-color-shadow);
+        border-radius: 50%;
+        transition: opacity 0.2s;
+    }
+}

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

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

package/lib/cjs/audioPlayer/constants.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cssClasses = void 0;
+var _constants = require("../base/constants");
+const cssClasses = exports.cssClasses = {
+  PREFIX: `${_constants.BASE_CLASS_PREFIX}-audio-player`
+};

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

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export interface AudioPlayerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    init: () => void;
+    resetAudioState: () => void;
+    handleStatusClick: () => void;
+    handleTimeUpdate: () => void;
+    handleTrackChange: (direction: 'next' | 'prev') => void;
+    getAudioRef: () => React.RefObject<HTMLAudioElement>;
+    handleTimeChange: (value: number) => void;
+    handleSpeedChange: (value: {
+        label: string;
+        value: number;
+    }) => void;
+    handleSeek: (direction: number) => void;
+    handleRefresh: () => void;
+    handleVolumeChange: (value: number) => void;
+    destroy: () => void;
+}
+declare class AudioPlayerFoundation extends BaseFoundation<AudioPlayerAdapter> {
+    constructor(adapter: AudioPlayerAdapter);
+    initAudioState(): void;
+    endHandler(): void;
+    errorHandler(): void;
+    init(): void;
+    destroy(): void;
+    resetAudioState(): void;
+    handleStatusClick(): void;
+    handleTimeUpdate(): void;
+    handleTrackChange(direction: 'next' | 'prev'): void;
+    getAudioRef(): import("react").RefObject<HTMLAudioElement>;
+    handleTimeChange(value: number): void;
+    handleSpeedChange(value: {
+        label: string;
+        value: number;
+    }): void;
+    handleSeek(direction: number): void;
+    handleRefresh(): void;
+    handleVolumeChange(value: number): void;
+}
+export default AudioPlayerFoundation;

package/lib/cjs/audioPlayer/foundation.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+class AudioPlayerFoundation extends _foundation.default {
+  constructor(adapter) {
+    super(Object.assign(Object.assign({}, AudioPlayerFoundation), adapter));
+  }
+  initAudioState() {
+    var _a, _b, _c;
+    const audioRef = this.getAudioRef();
+    const props = this.getProps();
+    this.setState({
+      totalTime: ((_a = audioRef.current) === null || _a === void 0 ? void 0 : _a.duration) || 0,
+      isPlaying: props.autoPlay,
+      volume: ((_b = audioRef.current) === null || _b === void 0 ? void 0 : _b.volume) * 100 || 100,
+      currentRate: {
+        label: '1.0x',
+        value: ((_c = audioRef.current) === null || _c === void 0 ? void 0 : _c.playbackRate) || 1
+      }
+    });
+  }
+  endHandler() {
+    const props = this.getProps();
+    if (Array.isArray(props.audioUrl)) {
+      this.handleTrackChange('next');
+    } else {
+      this.setState({
+        isPlaying: false
+      });
+    }
+  }
+  errorHandler() {
+    this.setState({
+      error: true
+    });
+  }
+  init() {
+    this._adapter.init();
+  }
+  destroy() {
+    this._adapter.destroy();
+  }
+  resetAudioState() {
+    this._adapter.resetAudioState();
+  }
+  handleStatusClick() {
+    this._adapter.handleStatusClick();
+  }
+  handleTimeUpdate() {
+    this._adapter.handleTimeUpdate();
+  }
+  handleTrackChange(direction) {
+    this._adapter.handleTrackChange(direction);
+  }
+  getAudioRef() {
+    return this._adapter.getAudioRef();
+  }
+  handleTimeChange(value) {
+    this._adapter.handleTimeChange(value);
+  }
+  handleSpeedChange(value) {
+    this._adapter.handleSpeedChange(value);
+  }
+  handleSeek(direction) {
+    this._adapter.handleSeek(direction);
+  }
+  handleRefresh() {
+    this._adapter.handleRefresh();
+  }
+  handleVolumeChange(value) {
+    this._adapter.handleVolumeChange(value);
+  }
+}
+var _default = exports.default = AudioPlayerFoundation;

package/lib/cjs/audioPlayer/variables.scss

@@ -0,0 +1,55 @@
+$color-audio-player-background: rgba(var(--semi-grey-9), .8);
+$color-audio-player-control-icon: var(--semi-color-bg-0);
+$color-audio-player-control-icon-play: var(--semi-color-text-0);
+$color-audio-player-font-color: var(--semi-color-bg-0);
+$color-audio-player-font-color-speed: rgba(var(--semi-grey-8), 1);
+
+
+$color-audio-player-background-light: var(--semi-color-bg-0);
+$color-audio-player-control-icon-light: rgba(var(--semi-grey-9), 1);
+$color-audio-player-control-icon-play-light: var(--semi-color-bg-0);
+$color-audio-player-font-color-light: rgba(var(--semi-grey-9), 1);
+
+$font-size-audio-player-text: 14px;
+
+$gap-audio-player-small: 4px;
+$gap-audio-player-medium: 16px;
+$gap-audio-player-large: 24px;
+
+// Size variables
+$width-audio-player-max: 1440px;
+$height-audio-player: 78px;
+$width-audio-player-slider: 323px;
+$width-audio-player-speed: 40px;
+$height-audio-player-speed: 24px;
+$width-audio-player-speed-menu: 65px;
+$width-audio-player-volume: 43px;
+$height-audio-player-volume: 164px;
+$height-audio-player-time: 22px;
+
+// Border radius
+$border-radius-audio-player-speed: 3px;
+$border-radius-audio-player-volume: 4px;
+$border-radius-audio-player-slider: 9999px;
+
+// Font sizes
+$font-size-audio-player-small: 12px;
+$line-height-audio-player-small: 16px;
+
+// Slider dimensions
+$width-audio-player-slider-bar: 4px;
+$size-audio-player-slider-dot: 16px;
+
+// Colors
+$color-audio-player-disabled-bg: rgba(var(--semi-grey-0), .35);
+$color-audio-player-slider-bg: rgba(var(--semi-grey-5), 1);
+$color-audio-player-slider-bg-light: rgba(var(--semi-grey-2), 1);
+$color-audio-player-slider-progress: rgba(var(--semi-blue-4), 1);
+$color-audio-player-slider-dot-bg: rgba(var(--semi-white), 1);
+
+$color-audio-player-disabled-text: var(--semi-color-grey-7);
+$color-audio-player-text-default: var(--semi-color-default);
+$color-audio-player-light-disabled-bg: var(--semi-color-disabled-text);
+$color-audio-player-light-disabled-text: rgba(var(--semi-white), 1);
+$color-audio-player-light-text: rgba(var(--semi-grey-9), 1);
+$color-audio-player-light-hover-bg: rgba(var(--semi-grey-1), 1);

package/lib/cjs/button/iconButton.css

@@ -1,6 +1,14 @@
 /* shadow */
 /* sizing */
 /* spacing */
+@keyframes semi-animation-rotate {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 .semi-button.semi-button-with-icon {
   display: inline-flex;
   align-items: center;