@douyinfe/semi-foundation 2.63.2-alpha.0 → 2.64.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/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 };

package/colorPicker/foundation.ts

@@ -0,0 +1,206 @@
+import { HsvaColor, RgbaColor } from './interface';
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+import {
+    hexToHsva,
+    hexToRgba,
+    hsvaToHex,
+    hsvaToHslaString,
+    hsvaToHslString,
+    hsvaToRgba, rgbaStringToHsva, rgbaStringToRgba,
+    rgbaToHex,
+    rgbaToHsva,
+} from './utils/convert';
+
+
+export type ColorValue = {
+    hsva: HsvaColor;
+    rgba: RgbaColor;
+    hex: string
+}
+export interface ColorPickerProps {
+    eyeDropper?: boolean;
+    defaultValue?: ColorValue;
+    value?: ColorValue;
+    onChange: (value: ColorValue) => void;
+    alpha: boolean;
+    width?: number;
+    height?: number;
+    defaultFormat: 'hex' | 'rgba' | 'hsva'
+}
+
+export interface ColorPickerState {
+    currentColor: ColorValue
+}
+
+
+export interface ColorPickerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    notifyChange: (value: ColorValue) => void
+}
+
+
+class ColorPickerFoundation extends BaseFoundation<ColorPickerAdapter<ColorPickerProps, ColorPickerState>, ColorPickerProps, ColorPickerState> {
+
+    constructor(adapter: ColorPickerAdapter<ColorPickerProps, ColorPickerState>) {
+        super({
+            ...adapter
+        });
+    }
+
+    static hsvaToRgba = hsvaToRgba
+    static rgbaToHsva = rgbaToHsva
+    static rgbaToHex = rgbaToHex
+    static hsvaToHex = hsvaToHex
+    static hexToRgba = hexToRgba
+    static hexToHsva = hexToHsva
+    static hsvaToHslaString = hsvaToHslaString
+    static hsvaToHslString = hsvaToHslString
+    static rgbaStringToHsva = rgbaStringToHsva
+    static rgbaStringToRgba = rgbaStringToRgba
+
+
+    handleChangeH = (currentColor: ColorValue, newH: number) => {
+
+        const hsva = {
+            ...currentColor.hsva,
+            h: newH
+        };
+        const rgba = hsvaToRgba(hsva);
+        const hex = hsvaToHex(hsva);
+
+        const newCurrentColor = {
+            rgba,
+            hsva,
+            hex
+        };
+
+        this._adapter.notifyChange(newCurrentColor);
+        if (!this.getProp("value")) {
+            this._adapter.setState({ currentColor: newCurrentColor });
+        }
+
+    }
+
+
+    handleChangeA = (currentColor: ColorValue, newAlpha: number) => {
+        let alpha = this._adapter.getProp('alpha');
+        if (!alpha) {
+            newAlpha = 1;
+        }
+        const rgba = {
+            ...currentColor.rgba,
+            a: newAlpha
+        };
+        const hex = rgbaToHex(rgba);
+        currentColor = {
+            rgba,
+            hex: alpha ? hex : hex.slice(0, 7),
+            hsva: {
+                ...currentColor.hsva,
+                a: newAlpha
+            }
+        };
+        this._adapter.notifyChange(currentColor);
+        if (!this.getProp("value")) {
+            this._adapter.setState({ currentColor: currentColor });
+        }
+
+    }
+
+    getCurrentColor = ()=>{
+
+        const value = this.getProp("value");
+        const currentColor = this.getState("currentColor");
+        return value || currentColor;
+    }
+
+    handleChange = (color: HsvaColor|RgbaColor|string, format: 'hex'|'rgba'|'hsva')=>{
+        let currentColor;
+
+        if (format === 'hsva') {
+            currentColor = {
+                hsva: color as HsvaColor,
+                rgba: ColorPickerFoundation.hsvaToRgba(color as HsvaColor),
+                hex: ColorPickerFoundation.hsvaToHex(color as HsvaColor)
+            };
+        } else if (format === 'rgba') {
+            currentColor = {
+                rgba: color as RgbaColor,
+                hsva: ColorPickerFoundation.rgbaToHsva(color as RgbaColor),
+                hex: ColorPickerFoundation.rgbaToHex(color as RgbaColor)
+            };
+        } else if (format === 'hex') {
+            currentColor = {
+                hex: color as string,
+                hsva: ColorPickerFoundation.hexToHsva(color as string),
+                rgba: ColorPickerFoundation.hexToRgba(color as string)
+            };
+        } else {
+            throw new Error('format error');
+        }
+
+        this._adapter.notifyChange(currentColor);
+        if (!this.getProp("value")) {
+            this._adapter.setState({ currentColor: currentColor });
+        }
+       
+    }
+
+
+    handleAlphaChangeByHandle = (newAlpha: {a: number})=>{
+        this.handleChangeA(this.getCurrentColor(), newAlpha.a);
+    }
+
+    handleColorChangeByHandle = (newHue: {h: number})=>{
+        this.handleChangeH(this.getCurrentColor(), newHue.h);
+    }
+
+
+    getHandlePositionByHSVA = (hsva: HsvaColor, { width, height }: {width: number;height: number}, handleSize: number)=>{
+
+        const defaultColorPosition = { x: hsva.s / 100 * width, y: (1 - hsva.v / 100) * height };
+        return { x: defaultColorPosition.x - handleSize / 2, y: defaultColorPosition.y - handleSize / 2 };
+    }
+
+    getHandlePositionByMousePosition = (mousePosition: {x: number;y: number}, { width, height }: {width: number;height: number}, handleSize: number)=>{
+        if (mousePosition.x > width || mousePosition.x < 0) {
+            return null;
+        }
+
+        if (mousePosition.y > height || mousePosition.y < 0) {
+            return null;
+        }
+
+        const handlePosition = {
+            x: mousePosition.x - handleSize / 2,
+            y: mousePosition.y - handleSize / 2
+        };
+
+        return handlePosition;
+    }
+
+
+    getAlphaHandlePositionByMousePosition = (mousePosition: number, width: number, handleSize: number)=>{
+        if (mousePosition < 0 || mousePosition > width) {
+            return null;
+        }
+        return mousePosition - handleSize / 2;
+    }
+
+    getColorHandlePositionByMousePosition = (mousePosition: number, width: number, handleSize: number)=>{
+        if (mousePosition < 0 || mousePosition > width) {
+            return null;
+        }
+
+        return mousePosition - handleSize / 2;
+    }
+
+
+    
+
+
+
+
+}
+
+export default ColorPickerFoundation;
+