@douyinfe/semi-foundation 2.63.1 → 2.64.0-beta.0

package/calendar/foundation.ts

@@ -248,7 +248,27 @@ export default class CalendarFoundation<P = Record<string, any>, S = Record<stri
         if (!parsed.day) {
             parsed.day = [];
         }
+
         parsed.day = parsed.day.map(item => renderDailyEvent(item));
+        // 将 startPos & endPos 完全相同的事件编为一组
+        const sameTimeRangeGroup = parsed.day.reduce((acc, item) => {
+            const key = `${item.startPos}-${item.endPos}`;
+            if (!acc[key]) {
+                acc[key] = [];
+            }
+            acc[key].push(item);
+            return acc;
+        }, {});
+
+        // 计算每个 item 的 left 值， 
+        const eventCountMap = {};
+        parsed.day = parsed.day.map(item => {
+            const key = `${item.startPos}-${item.endPos}`;
+            let curCount = eventCountMap[key];
+            eventCountMap[key] = curCount === undefined ? 0 : ++curCount;
+            item.left = curCount !== 0 ? `${(curCount / sameTimeRangeGroup[key].length * 100)}%` : 0;
+            return item;
+        });
         return parsed;
     }
 

package/chat/foundation.ts

@@ -5,14 +5,14 @@ import { debounce } from "lodash";
 import { getUuidv4 } from "../utils/uuid";
 import { handlePrevent } from "../utils/a11y";
 
-const { PIC_PREFIX, PIC_SUFFIX_ARRAY, ROLE, 
+const { PIC_PREFIX, PIC_SUFFIX_ARRAY, ROLE,
     SCROLL_ANIMATION_TIME, SHOW_SCROLL_GAP
 } = strings;
 
 export interface Content {
     type: 'text' | 'image_url' | 'file_url';
     text?: string;
-    image_url?: { 
+    image_url?: {
         url: string;
         [x: string]: any
     };
@@ -37,7 +37,7 @@ export interface Message {
 }
 
 export interface ChatAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
-    getContainerRef: () => React.RefObject<HTMLDivElement>;
+    getContainerRef: () => HTMLDivElement;
     setWheelScroll: (flag: boolean) => void;
     notifyChatsChange: (chats: Message[]) => void;
     notifyLikeMessage: (message: Message) => void;
@@ -80,17 +80,15 @@ export default class ChatFoundation <P = Record<string, any>, S = Record<string,
     }
 
     scrollToBottomImmediately = () => {
-        const containerRef = this._adapter.getContainerRef();
-        const element = containerRef?.current;
+        const element = this._adapter.getContainerRef();
         if (element) {
             element.scrollTop = element.scrollHeight;
-        } 
+        }
     }
 
     scrollToBottomWithAnimation = () => {
         const duration = SCROLL_ANIMATION_TIME;
-        const containerRef = this._adapter.getContainerRef();
-        const element = containerRef?.current;
+        const element = this._adapter.getContainerRef();
         if (!element) {
             return;
         }
@@ -106,18 +104,15 @@ export default class ChatFoundation <P = Record<string, any>, S = Record<string,
                 easing: 'easeInOutCubic'
             }
         );
-    
+
         this.animation.on('frame', ({ scrollTop }: { scrollTop: number }) => {
             element.scrollTop = scrollTop;
         });
-    
+
         this.animation.start();
     }
 
     containerScroll = (e: any) => {
-        if (e.target !== e.currentTarget) {
-            return;
-        }
         e.persist();
         const update = () => {
             this.getScroll(e.target);
@@ -155,7 +150,7 @@ export default class ChatFoundation <P = Record<string, any>, S = Record<string,
         const newChats = [...chats, dividerMessage];
         this._adapter.notifyChatsChange(newChats);
         this._adapter.notifyClearContext();
-    } 
+    }
 
     onMessageSend = (input: string, attachment: any[]) => {
         let content;
@@ -169,13 +164,13 @@ export default class ChatFoundation <P = Record<string, any>, S = Record<string,
                 const suffix = name.split('.').pop();
                 const isImg = fileInstance?.type?.startsWith(PIC_PREFIX) || PIC_SUFFIX_ARRAY.includes(suffix);
                 if (isImg) {
-                    content.push({ 
-                        type: 'image_url', 
-                        image_url: { url: url } 
+                    content.push({
+                        type: 'image_url',
+                        image_url: { url: url }
                     });
                 } else {
-                    content.push({ 
-                        type: 'file_url', 
+                    content.push({
+                        type: 'file_url',
                         file_url: {
                             url: url,
                             name: name,
@@ -238,7 +233,7 @@ export default class ChatFoundation <P = Record<string, any>, S = Record<string,
         newChats.splice(index, 1, newChat);
         this._adapter.notifyChatsChange(newChats);
     }
-  
+
     dislikeMessage = (message: Message) => {
         const { chats } = this.getStates();
         this._adapter.notifyDislikeMessage(message);
@@ -252,7 +247,7 @@ export default class ChatFoundation <P = Record<string, any>, S = Record<string,
         newChats.splice(index, 1, newChat);
         this._adapter.notifyChatsChange(newChats);
     }
-  
+
     resetMessage = (message: Message) => {
         const { chats } = this.getStates();
         const lastMessage = chats[chats.length - 1];
@@ -284,7 +279,7 @@ export default class ChatFoundation <P = Record<string, any>, S = Record<string,
         //Disable the default implementation, preventing files from being opened
         handlePrevent(e);
     }
-    
+
     handleContainerDragLeave = (e: any) => {
         handlePrevent(e);
         // 鼠标移动至 container 的子元素，则不做任何操作
@@ -295,7 +290,7 @@ export default class ChatFoundation <P = Record<string, any>, S = Record<string,
         }
         /**
          * 延迟隐藏 container ，防止父元素的 mouseOver 被触发，导致 container 无法隐藏
-         * Delay hiding of the container to prevent the parent element's mouseOver from being triggered, 
+         * Delay hiding of the container to prevent the parent element's mouseOver from being triggered,
          * causing the container to be unable to be hidden.
         */
         setTimeout(() => {

package/colorPicker/AlphaSliderFoundation.ts

@@ -0,0 +1,62 @@
+import BaseFoundation, { DefaultAdapter } from "../base/foundation";
+import ColorPickerFoundation, { ColorPickerAdapter, ColorPickerProps, ColorPickerState } from "./foundation";
+import { HsvaColor } from "./interface";
+
+export interface AlphaSliderBaseProps {
+    width: number;
+    height: number;
+    hsva: HsvaColor;
+    handleSize: number;
+    foundation: ColorPickerFoundation
+}
+
+export interface AlphaSliderBaseState {
+    handlePosition: number;
+    isHandleGrabbing: boolean
+}
+
+
+export interface AlphaSliderAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    handleMouseDown: (e: any) => void;
+    handleMouseUp: (e: any) => void;
+    getColorPickerFoundation: () => ColorPickerFoundation;
+    getDOM: () => HTMLDivElement
+}
+
+
+class AlphaSliderFoundation extends BaseFoundation<AlphaSliderAdapter<AlphaSliderBaseProps, AlphaSliderBaseState>, AlphaSliderBaseProps, AlphaSliderBaseState> {
+
+    constructor(adapter: AlphaSliderAdapter<AlphaSliderBaseProps, AlphaSliderBaseState>) {
+        super({
+            ...adapter
+        });
+    }
+
+    handleMouseDown = (e: any) => {
+        this._adapter.handleMouseDown(e);
+    }
+
+
+    handleMouseUp = (e: any) => {
+        this._adapter.handleMouseUp(e);
+    }
+
+
+    setHandlePositionByMousePosition = (e: MouseEvent) => {
+        const rect = this._adapter.getDOM()?.getBoundingClientRect();
+        if (!rect) {
+            return;
+        }
+        const { width, handleSize } = this._adapter.getProps();
+        const colorPickerFoundation = this._adapter.getColorPickerFoundation();
+        const mousePosition = e.clientX - rect.x;
+        const handlePosition = colorPickerFoundation.getAlphaHandlePositionByMousePosition(mousePosition, width, handleSize);
+        colorPickerFoundation.handleAlphaChangeByHandle({ a: Number((Math.min(Math.max(mousePosition / width, 0), 1)).toFixed(2)) });
+        this.setState({ handlePosition });
+    }
+
+
+}
+
+
+export default AlphaSliderFoundation;

package/colorPicker/ColorChooseAreaFoundation.ts

@@ -0,0 +1,86 @@
+import BaseFoundation, { DefaultAdapter } from "../base/foundation";
+import ColorPickerFoundation from "./foundation";
+import { HsvaColor } from "./interface";
+
+
+export interface ColorChooseAreaBaseProps {
+    hsva: HsvaColor;
+    onChange: (newColor: { s: number; v: number }) => void;
+    handleSize: number;
+    width: number;
+    height: number;
+    foundation: ColorPickerFoundation
+}
+
+export interface ColorChooseAreaBaseState {
+    handlePosition: { x: number; y: number };
+    isHandleGrabbing: boolean
+}
+
+
+export interface ColorChooseAreaAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    getColorPickerFoundation: () => ColorPickerFoundation;
+    handleMouseDown: (e: any) => void;
+    handleMouseUp: (e: any) => void;
+    getDOM: () => HTMLDivElement;
+    notifyChange: (newColor: { s: number; v: number }) => void
+}
+
+
+class ColorChooseAreaFoundation extends BaseFoundation<ColorChooseAreaAdapter<ColorChooseAreaBaseProps, ColorChooseAreaBaseState>, ColorChooseAreaBaseProps, ColorChooseAreaBaseState> {
+
+    constructor(adapter: ColorChooseAreaAdapter<ColorChooseAreaBaseProps, ColorChooseAreaBaseState>) {
+        super({
+            ...adapter
+        });
+    }
+
+    getHandlePositionByHSVA = () => {
+        const { hsva, width, height, handleSize } = this.getProps();
+
+        return this._adapter.getColorPickerFoundation().getHandlePositionByHSVA(hsva, {
+            width: width,
+            height: height
+        }, handleSize);
+
+    }
+
+    handleMouseDown = (e: any) => {
+        this._adapter.handleMouseDown(e);
+    }
+
+    handleMouseUp = (e: any) => {
+        this._adapter.handleMouseUp(e);
+    }
+
+
+    setHandlePositionByMousePosition = (e: globalThis.MouseEvent) => {
+        const rect = this._adapter.getDOM()?.getBoundingClientRect();
+        if (!rect) {
+            return;
+        }
+        const mousePosition = {
+            x: e.clientX - rect.x,
+            y: e.clientY - rect.y
+        };
+        const { width, height, handleSize } = this.getProps();
+        const colorPickerFoundation = this._adapter.getColorPickerFoundation();
+        const handlePosition = colorPickerFoundation.getHandlePositionByMousePosition(mousePosition, {
+            width,
+            height
+        }, handleSize);
+        if (handlePosition) {
+            this.setState({ handlePosition });
+            this._adapter.notifyChange({
+                s: Math.round(mousePosition.x / width * 100),
+                v: Math.round(100 - (Math.min(Math.max(mousePosition.y / height, 0), 1)) * 100),
+            });
+        }
+
+    }
+
+
+}
+
+
+export default ColorChooseAreaFoundation;

package/colorPicker/ColorSliderFoundation.ts

@@ -0,0 +1,61 @@
+import BaseFoundation, { DefaultAdapter } from "../base/foundation";
+import ColorPickerFoundation from "./foundation";
+
+export interface ColorSliderBaseProps {
+    width: number;
+    height: number;
+    hue: number;
+    handleSize: number;
+    foundation: ColorPickerFoundation
+}
+
+export interface ColorSliderBaseState {
+    handlePosition: number;
+    isHandleGrabbing: boolean
+}
+
+
+export interface ColorSliderAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    handleMouseDown: (e: any) => void;
+    handleMouseUp: (e: any) => void;
+    getColorPickerFoundation: () => ColorPickerFoundation;
+    getDOM: () => HTMLDivElement
+}
+
+
+class ColorSliderFoundation extends BaseFoundation<ColorSliderAdapter<ColorSliderBaseProps, ColorSliderBaseState>, ColorSliderBaseProps, ColorSliderBaseState> {
+
+    constructor(adapter: ColorSliderAdapter<ColorSliderBaseProps, ColorSliderBaseState>) {
+        super({
+            ...adapter
+        });
+    }
+
+    handleMouseDown = (e: any) => {
+        this._adapter.handleMouseDown(e);
+    }
+
+
+    handleMouseUp = (e: any) => {
+        this._adapter.handleMouseUp(e);
+    }
+
+
+    setHandlePositionByMousePosition = (e: MouseEvent) => {
+        const rect = this._adapter.getDOM()?.getBoundingClientRect();
+        if (!rect) {
+            return;
+        }
+        const { width, handleSize } = this._adapter.getProps();
+        const colorPickerFoundation = this._adapter.getColorPickerFoundation();
+        const mousePosition = e.clientX - rect.x;
+        colorPickerFoundation.handleColorChangeByHandle({ h: Math.round(Math.min(Math.max(mousePosition / width, 0), 1) * 360) });
+        const handlePosition = colorPickerFoundation.getColorHandlePositionByMousePosition(mousePosition, width, handleSize);
+        this.setState({ handlePosition });
+    }
+
+
+}
+
+
+export default ColorSliderFoundation;

package/colorPicker/DataPartFoundation.ts

@@ -0,0 +1,113 @@
+import BaseFoundation, { DefaultAdapter } from "../base/foundation";
+import ColorPickerFoundation, { ColorPickerProps } from "./foundation";
+import split from "./utils/split";
+import { HsvaColor, RgbaColor } from "./interface";
+
+
+type Value = ColorPickerProps['value']
+
+export interface DataPartBaseProps {
+    currentColor: Value;
+    defaultFormat: 'hex' | 'rgba' | 'hsva';
+    width: number;
+    alpha?: boolean;
+    foundation: ColorPickerFoundation;
+    eyeDropper: boolean
+}
+
+export interface DataPartBaseState {
+    format: 'hex' | 'rgba' | 'hsva';
+    inputValue: string
+}
+
+
+export interface DataPartAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    getColorPickerFoundation: () => ColorPickerFoundation
+}
+
+
+class DataPartFoundation extends BaseFoundation<DataPartAdapter<DataPartBaseProps, DataPartBaseState>, DataPartBaseProps, DataPartBaseState> {
+
+    constructor(adapter: DataPartAdapter<DataPartBaseProps, DataPartBaseState>) {
+        super({
+            ...adapter
+        });
+    }
+
+    getInputValue = () => {
+        const { currentColor } = this._adapter.getProps();
+        const { format } = this._adapter.getStates();
+        const rgba = currentColor.rgba;
+        const hsva = currentColor.hsva;
+        const hex = currentColor.hex;
+        if (format === 'rgba') {
+            return `${rgba.r},${rgba.g},${rgba.b}`;
+        } else if (format === 'hsva') {
+            return `${hsva.h},${hsva.s},${hsva.v}`;
+        } else {
+            return hex.slice(0, 7);
+        }
+    }
+
+    getValueByInputValue = (value: string) => {
+        const { format } = this.getStates();
+        if (format === 'rgba') {
+            const result = split(value, format);
+            if (result) {
+                return result as RgbaColor;
+            }
+
+        } else if (format === 'hsva') {
+            const result = split(value, format);
+            if (result) {
+                return result as HsvaColor;
+            }
+        } else if (format === 'hex') {
+            // hack chrome bug, format mismatch with w3c.
+            if (!value.startsWith('#')) {
+                value = '#' + value;
+            }
+            if (/#[\d\w]{6,8}/.test(value)) {
+                return value;
+            }
+        }
+        return false;
+    }
+
+    handlePickValueWithStraw = async () => {
+        const colorPickerFoundation = this._adapter.getColorPickerFoundation();
+        if (!window['EyeDropper']) {
+            return;
+        }
+        //@ts-ignore
+        const eyeDropper = new EyeDropper();
+
+        try {
+            const result = await eyeDropper.open();
+            const color = result['sRGBHex'];
+            if (color.startsWith("#")) {
+                colorPickerFoundation.handleChange(color, 'hex');
+            } else if (color.startsWith('rgba')) {
+                const rgba = ColorPickerFoundation.rgbaStringToRgba(color);
+                rgba.a = 1;
+                colorPickerFoundation.handleChange(rgba, 'rgba');
+            }
+        } catch (e) {
+
+        }
+    }
+
+
+    handleInputValueChange = (value: string) => {
+        this._adapter.setState({ inputValue: value });
+    }
+
+    handleFormatChange = (format: DataPartBaseState['format']) => {
+        this._adapter.setState({ format });
+    }
+
+
+}
+
+
+export default DataPartFoundation;

package/colorPicker/colorPicker.scss

@@ -0,0 +1,113 @@
+@import "./variables.scss";
+
+
+$module: #{$prefix}-colorPicker;
+
+
+.#{$module} {
+
+    &-colorChooseArea{
+
+        /**
+         *  Referrer from https://github.com/web-padawan/vanilla-colorful/blob/5d219ee360ae2f29534864b28ca9e6074233b9ce/src/lib/styles/saturation.css
+         */
+        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
+        position: relative;
+        flex-grow: 1;
+        border-color: transparent;
+        border-radius: $radius-colorPicker-topLeft $radius-colorPicker-topRight $radius-colorPicker-bottomLeft $radius-colorPicker-bottomRight;
+        background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+    }
+
+
+    &-handle{
+        border-radius: $radius-colorPicker-handle;
+        border: $width-colorPicker_handle-border solid $color-colorPicker_handle-border;
+        position: absolute;
+        box-sizing: border-box;
+        cursor: grab;
+    }
+
+
+
+
+    &-alphaSlider{
+        position: relative;
+        cursor: pointer;
+        margin-top: $spacing-colorPicker_slider-marginTop;
+        border-radius: $radius-colorPicker-handle;
+        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><rect x="8" width="8" height="8"/><rect y="8" width="8" height="8"/></svg>');
+
+
+        .#{$module}-alphaSliderInner{
+            width: 100%;
+            height: 100%;
+            border-radius: $radius-colorPicker-alphaSliderInner;
+        }
+
+        .#{$module}-alphaHandle{
+            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><rect x="8" width="8" height="8"/><rect y="8" width="8" height="8"/></svg>');
+            border-radius: $radius-colorPicker-handle;
+            border: $width-colorPicker_handle-border solid $color-colorPicker_handle-border;
+            position: absolute;
+            box-sizing: border-box;
+            cursor: grab;
+
+        }
+
+    }
+
+    &-colorSlider{
+        position: relative;
+        cursor: pointer;
+        margin-top: $spacing-colorPicker_slider-marginTop;
+        border-radius: $radius-colorPicker-handle;
+        background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+    }
+
+
+
+    &-dataPart{
+        margin-top: $spacing-colorPicker_dataPart-marginTop;
+        display: flex;
+        align-items: center;
+        .#{$module}-colorDemoBlock{
+            border-radius: $radius-colorPicker-demoBlock;
+        }
+        .#{$module}-inputGroup{
+            margin-left: $spacing-colorPicker_inputGroup-marginLeft;
+            width: 100%;
+            flex:1;
+            flex-wrap: nowrap;
+            .#{$module}-colorPickerInput{
+                flex: 1;
+            }
+            .#{$module}-colorPickerInputNumber{
+                width: $width-colorPicker-colorPickerInputNumber;
+                .#{$module}-inputNumberSuffix{
+                    font-size: $font-colorPicker_inputNumberSuffix-fontSize;
+                    padding: $spacing-colorPicker_inputNumberSuffix-vertical $spacing-colorPicker_inputNumberSuffix-horizontal;
+                }
+            }
+        }
+        .#{$module}-formatSelect{
+            width: $width-colorPicker-formatSelect;
+        }
+    }
+
+
+    &-popover{
+        padding: $spacing-colorPicker_popover-padding;
+
+        &-defaultChildren{
+            width:$width-colorPicker-defaultTrigger;
+            height: $width-colorPicker-defaultTrigger;
+            border-radius: $radius-colorPicker-defaultTrigger;
+            cursor: pointer;
+        }
+
+    }
+
+
+
+}

package/colorPicker/constants.ts

@@ -0,0 +1,11 @@
+import { BASE_CLASS_PREFIX } from '../base/constants';
+
+const cssClasses = {
+    PREFIX: `${BASE_CLASS_PREFIX}-colorPicker`,
+};
+
+const strings = {
+
+};
+
+export { cssClasses };