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

package/lib/es/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/es/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;

package/lib/es/button/iconButton.scss

@@ -4,6 +4,14 @@
 $module: #{$prefix}-button;
 
 .#{$module} {
+    @keyframes #{$prefix}-animation-rotate {
+        from {
+            transform: rotate(0);
+        }
+        to {
+            transform: rotate(360deg);
+        }
+    }
     &.#{$module}-with-icon {
         display: inline-flex;
         align-items: center;

package/lib/es/cropper/constants.d.ts

@@ -0,0 +1,17 @@
+declare const cssClasses: {
+    PREFIX: string;
+    IMG: string;
+    IMG_WRAPPER: string;
+    CROPPER_BOX: string;
+    CROPPER_VIEW_BOX: string;
+    CROPPER_VIEW_BOX_ROUND: string;
+    CROPPER_IMG: string;
+    MASK: string;
+    CORNER: string;
+};
+declare const strings: {
+    shape: string[];
+    corner: string[];
+    roundCorner: string[];
+};
+export { cssClasses, strings };

package/lib/es/cropper/constants.js

@@ -0,0 +1,19 @@
+import { BASE_CLASS_PREFIX } from '../base/constants';
+const moduleName = `${BASE_CLASS_PREFIX}-cropper`;
+const cssClasses = {
+  PREFIX: `${moduleName}`,
+  IMG: `${moduleName}-img`,
+  IMG_WRAPPER: `${moduleName}-img-wrapper`,
+  CROPPER_BOX: `${moduleName}-box`,
+  CROPPER_VIEW_BOX: `${moduleName}-view-box`,
+  CROPPER_VIEW_BOX_ROUND: `${moduleName}-view-box-round`,
+  CROPPER_IMG: `${moduleName}-view-img`,
+  MASK: `${moduleName}-mask`,
+  CORNER: `${moduleName}-box-corner`
+};
+const strings = {
+  shape: ['rect', 'round', 'roundRect'],
+  corner: ['tl', 'tm', 'tr', 'ml', 'mr', 'bl', 'bm', 'br'],
+  roundCorner: ['tm', 'ml', 'mr', 'bm']
+};
+export { cssClasses, strings };

package/lib/es/cropper/cropper.css

@@ -0,0 +1,97 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-cropper {
+  position: relative;
+}
+.semi-cropper-img {
+  position: absolute;
+  user-select: none;
+}
+.semi-cropper-img-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+}
+.semi-cropper-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--semi-color-overlay-bg);
+  cursor: move;
+}
+.semi-cropper-box {
+  position: absolute;
+  outline: 1px solid var(--semi-color-primary);
+}
+.semi-cropper-box-corner {
+  position: absolute;
+  background: var(--semi-color-primary);
+  width: 10px;
+  height: 10px;
+  z-index: 1;
+}
+.semi-cropper-box-corner-tl {
+  top: -5px;
+  left: -5px;
+  cursor: nwse-resize;
+}
+.semi-cropper-box-corner-tr {
+  top: -5px;
+  right: -5px;
+  cursor: nesw-resize;
+}
+.semi-cropper-box-corner-tm {
+  top: -5px;
+  left: 50%;
+  margin-left: -5px;
+  cursor: ns-resize;
+}
+.semi-cropper-box-corner-ml {
+  top: 50%;
+  left: -5px;
+  margin-top: -5px;
+  cursor: ew-resize;
+}
+.semi-cropper-box-corner-mr {
+  top: 50%;
+  right: -5px;
+  margin-top: -5px;
+  cursor: ew-resize;
+}
+.semi-cropper-box-corner-bl {
+  bottom: -5px;
+  left: -5px;
+  cursor: nesw-resize;
+}
+.semi-cropper-box-corner-bm {
+  bottom: -5px;
+  left: 50%;
+  margin-left: -5px;
+  cursor: ns-resize;
+}
+.semi-cropper-box-corner-br {
+  bottom: -5px;
+  right: -5px;
+  cursor: nwse-resize;
+}
+.semi-cropper-view-box {
+  position: absolute;
+  overflow: hidden;
+  cursor: move;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.semi-cropper-view-box-round {
+  border-radius: 50%;
+}
+.semi-cropper-view-img {
+  user-select: none;
+}

package/lib/es/cropper/cropper.scss

@@ -0,0 +1,116 @@
+@import "./variables.scss";
+$module: #{$prefix}-cropper;
+
+$half_corner_width: calc($width-cropper_box_corner / 2);
+
+.#{$module} {
+    position: relative;
+
+    &-img {
+      position: absolute;
+      user-select: none;
+    }
+
+    &-img-wrapper {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      overflow: hidden;
+    }
+
+    &-mask {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: $color-cropper_mask-bg;
+      cursor: move;;
+    }
+
+    &-box {
+      position: absolute;
+      outline: $width-cropper_box-outline solid $color-cropper_box-outline;
+
+      &-corner {
+        position: absolute;
+        background: $color-cropper_box_corner-bg;
+        width: $width-cropper_box_corner;
+        height: $width-cropper_box_corner;
+        z-index: 1;
+
+        &-tl {
+          top: -$half_corner_width;
+          left: -$half_corner_width;
+          cursor: nwse-resize;
+        }
+
+        &-tr {
+          top: -$half_corner_width;
+          right: -$half_corner_width;
+          cursor: nesw-resize;
+        }
+
+        &-tm {
+          top: -$half_corner_width;
+          left: 50%;
+          margin-left: -$half_corner_width;
+          cursor: ns-resize;
+        }
+
+        &-ml {
+          top: 50%;
+          left: -$half_corner_width;
+          margin-top: -$half_corner_width;
+          cursor: ew-resize;
+        }
+
+        &-mr {
+          top: 50%;
+          right: -$half_corner_width;
+          margin-top: -$half_corner_width;
+          cursor: ew-resize;
+        }
+
+        &-bl {
+          bottom: -$half_corner_width;
+          left: -$half_corner_width;
+          cursor: nesw-resize;
+        }
+
+        &-bm {
+          bottom: -$half_corner_width;
+          left: 50%;
+          margin-left: -$half_corner_width; 
+          cursor: ns-resize;
+        }
+
+        &-br {
+          bottom: -$half_corner_width;
+          right: -$half_corner_width;
+          cursor: nwse-resize
+        }
+      }
+    }
+
+    &-view-box {
+      position: absolute;
+      overflow: hidden;
+      cursor: move;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+
+      &-round {
+        border-radius: 50%;
+      }
+    }
+
+    &-view-img {
+      // position: absolute;
+      user-select: none;
+    }
+}

package/lib/es/cropper/foundation.d.ts

@@ -0,0 +1,101 @@
+import BaseFoundation, { DefaultAdapter } from "../base/foundation";
+export interface CropperAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    getContainer: () => HTMLElement;
+    notifyZoomChange: (zoom: number) => void;
+    getImg: () => HTMLImageElement;
+}
+interface Point {
+    x: number;
+    y: number;
+}
+export interface ImageData {
+    originalWidth: number;
+    originalHeight: number;
+    scale: number;
+}
+export interface ImageDataState {
+    width: number;
+    height: number;
+    centerPoint: Point;
+}
+export interface CropperBox {
+    width: number;
+    height: number;
+    centerPoint: Point;
+}
+export interface ContainerData {
+    width: number;
+    height: number;
+}
+export interface CropperBoxBorder {
+    borderTop: number;
+    borderLeft: number;
+}
+export default class CropperFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<CropperAdapter<P, S>, P, S> {
+    imgData: ImageData;
+    containerData: ContainerData;
+    boxMoveDir: string;
+    cropperBoxMoveStart: Point;
+    imgMoveStart: Point;
+    moveRange: {
+        xMax: number;
+        xMin: number;
+        yMax: number;
+        yMin: number;
+    };
+    boxMoveParam: {
+        paramX: number;
+        paramY: number;
+    };
+    cropperBox: CropperBoxBorder;
+    rangeX: [number, number];
+    rangeY: [number, number];
+    initial: boolean;
+    constructor(adapter: CropperAdapter<P, S>);
+    init(): void;
+    destroy(): void;
+    getImgDataWhenResize: (ratio: number) => {
+        width: number;
+        height: number;
+        centerPoint: {
+            x: number;
+            y: number;
+        };
+    };
+    getCropperBoxWhenResize: (ratio: number, newContainerData: ContainerData) => {
+        width: number;
+        height: number;
+        centerPoint: {
+            x: number;
+            y: number;
+        };
+    };
+    handleResize: () => void;
+    handleImageLoad: (e: any) => void;
+    handleWheel: (e: any) => void;
+    getMoveParamByDir(dir: string): {
+        paramX: number;
+        paramY: number;
+    };
+    getRangeForAspectChange: () => void;
+    handleCornerMouseDown: (e: any) => void;
+    bindResizeEvent: () => void;
+    unBindResizeEvent: () => void;
+    viewIMGDragStart: (e: any) => void;
+    handleCornerAspectMouseMove: (e: any) => void;
+    changeDir: () => void;
+    handleCornerMouseMove: (e: any) => void;
+    handleCornerMouseUp: (e: any) => void;
+    handleCropperBoxMouseDown: (e: any) => void;
+    bindMoveEvent: () => void;
+    unBindMoveEvent: () => void;
+    handleCropperBoxMouseMove: (e: any) => void;
+    handleCropperBoxMouseUp: (e: any) => void;
+    handleMaskMouseDown: (e: any) => void;
+    bindImgMoveEvent: () => void;
+    unBindImgMoveEvent: () => void;
+    handleImgMove: (e: any) => void;
+    handleImgMoveUp: (e: any) => void;
+    getCropperCanvas: () => HTMLCanvasElement;
+}
+export {};