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

package/lib/cjs/upload/foundation.js

@@ -50,6 +50,7 @@ const {
 class UploadFoundation extends _foundation.default {
   constructor(adapter) {
     super(Object.assign({}, adapter));
+    this.destroyState = false;
   }
   init() {
     const {
@@ -69,6 +70,7 @@ class UploadFoundation extends _foundation.default {
     if (!disabled) {
       this.unbindPastingHandler();
     }
+    this.destroyState = true;
   }
   getError(_ref) {
     let {
@@ -577,22 +579,36 @@ class UploadFoundation extends _foundation.default {
       xhr.withCredentials = true;
     }
     if (xhr.upload) {
-      xhr.upload.onprogress = e => this.handleProgress({
-        e,
-        fileInstance
-      });
+      xhr.upload.onprogress = e => {
+        if (!this.destroyState) {
+          this.handleProgress({
+            e,
+            fileInstance
+          });
+        } else {
+          xhr.abort();
+        }
+      };
     }
     // Callback function after upload is completed
-    xhr.onload = e => this.handleOnLoad({
-      e,
-      xhr,
-      fileInstance
-    });
-    xhr.onerror = e => this.handleError({
-      e,
-      xhr,
-      fileInstance
-    });
+    xhr.onload = e => {
+      if (!this.destroyState) {
+        this.handleOnLoad({
+          e,
+          xhr,
+          fileInstance
+        });
+      }
+    };
+    xhr.onerror = e => {
+      if (!this.destroyState) {
+        this.handleError({
+          e,
+          xhr,
+          fileInstance
+        });
+      }
+    };
     // add headers
     let headers = option.headers || {};
     if (typeof headers === 'function') {

package/lib/es/calendar/foundation.js

@@ -146,6 +146,24 @@ export default class CalendarFoundation extends BaseFoundation {
       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;
   }
   parseDailyEvents() {

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /// <reference types="lodash" />
 import BaseFoundation, { DefaultAdapter } from "../base/foundation";
 export interface Content {
@@ -27,7 +26,7 @@ export interface Message {
     [x: string]: any;
 }
 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;

package/lib/es/chat/foundation.js

@@ -26,16 +26,14 @@ export default class ChatFoundation extends BaseFoundation {
       this._adapter.notifyStopGenerate(e);
     };
     this.scrollToBottomImmediately = () => {
-      const containerRef = this._adapter.getContainerRef();
-      const element = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
+      const element = this._adapter.getContainerRef();
       if (element) {
         element.scrollTop = element.scrollHeight;
       }
     };
     this.scrollToBottomWithAnimation = () => {
       const duration = SCROLL_ANIMATION_TIME;
-      const containerRef = this._adapter.getContainerRef();
-      const element = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
+      const element = this._adapter.getContainerRef();
       if (!element) {
         return;
       }
@@ -61,9 +59,6 @@ export default class ChatFoundation extends BaseFoundation {
       this.animation.start();
     };
     this.containerScroll = e => {
-      if (e.target !== e.currentTarget) {
-        return;
-      }
       e.persist();
       const update = () => {
         this.getScroll(e.target);

package/lib/es/colorPicker/AlphaSliderFoundation.d.ts

@@ -0,0 +1,27 @@
+import BaseFoundation, { DefaultAdapter } from "../base/foundation";
+import ColorPickerFoundation 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;
+}
+declare class AlphaSliderFoundation extends BaseFoundation<AlphaSliderAdapter<AlphaSliderBaseProps, AlphaSliderBaseState>, AlphaSliderBaseProps, AlphaSliderBaseState> {
+    constructor(adapter: AlphaSliderAdapter<AlphaSliderBaseProps, AlphaSliderBaseState>);
+    handleMouseDown: (e: any) => void;
+    handleMouseUp: (e: any) => void;
+    setHandlePositionByMousePosition: (e: MouseEvent) => void;
+}
+export default AlphaSliderFoundation;

package/lib/es/colorPicker/AlphaSliderFoundation.js

@@ -0,0 +1,33 @@
+import BaseFoundation from "../base/foundation";
+class AlphaSliderFoundation extends BaseFoundation {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+    this.handleMouseDown = e => {
+      this._adapter.handleMouseDown(e);
+    };
+    this.handleMouseUp = e => {
+      this._adapter.handleMouseUp(e);
+    };
+    this.setHandlePositionByMousePosition = e => {
+      var _a;
+      const rect = (_a = this._adapter.getDOM()) === null || _a === void 0 ? void 0 : _a.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/lib/es/colorPicker/ColorChooseAreaFoundation.d.ts

@@ -0,0 +1,42 @@
+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;
+}
+declare class ColorChooseAreaFoundation extends BaseFoundation<ColorChooseAreaAdapter<ColorChooseAreaBaseProps, ColorChooseAreaBaseState>, ColorChooseAreaBaseProps, ColorChooseAreaBaseState> {
+    constructor(adapter: ColorChooseAreaAdapter<ColorChooseAreaBaseProps, ColorChooseAreaBaseState>);
+    getHandlePositionByHSVA: () => {
+        x: number;
+        y: number;
+    };
+    handleMouseDown: (e: any) => void;
+    handleMouseUp: (e: any) => void;
+    setHandlePositionByMousePosition: (e: globalThis.MouseEvent) => void;
+}
+export default ColorChooseAreaFoundation;

package/lib/es/colorPicker/ColorChooseAreaFoundation.js

@@ -0,0 +1,55 @@
+import BaseFoundation from "../base/foundation";
+class ColorChooseAreaFoundation extends BaseFoundation {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+    this.getHandlePositionByHSVA = () => {
+      const {
+        hsva,
+        width,
+        height,
+        handleSize
+      } = this.getProps();
+      return this._adapter.getColorPickerFoundation().getHandlePositionByHSVA(hsva, {
+        width: width,
+        height: height
+      }, handleSize);
+    };
+    this.handleMouseDown = e => {
+      this._adapter.handleMouseDown(e);
+    };
+    this.handleMouseUp = e => {
+      this._adapter.handleMouseUp(e);
+    };
+    this.setHandlePositionByMousePosition = e => {
+      var _a;
+      const rect = (_a = this._adapter.getDOM()) === null || _a === void 0 ? void 0 : _a.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/lib/es/colorPicker/ColorSliderFoundation.d.ts

@@ -0,0 +1,26 @@
+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;
+}
+declare class ColorSliderFoundation extends BaseFoundation<ColorSliderAdapter<ColorSliderBaseProps, ColorSliderBaseState>, ColorSliderBaseProps, ColorSliderBaseState> {
+    constructor(adapter: ColorSliderAdapter<ColorSliderBaseProps, ColorSliderBaseState>);
+    handleMouseDown: (e: any) => void;
+    handleMouseUp: (e: any) => void;
+    setHandlePositionByMousePosition: (e: MouseEvent) => void;
+}
+export default ColorSliderFoundation;

package/lib/es/colorPicker/ColorSliderFoundation.js

@@ -0,0 +1,33 @@
+import BaseFoundation from "../base/foundation";
+class ColorSliderFoundation extends BaseFoundation {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+    this.handleMouseDown = e => {
+      this._adapter.handleMouseDown(e);
+    };
+    this.handleMouseUp = e => {
+      this._adapter.handleMouseUp(e);
+    };
+    this.setHandlePositionByMousePosition = e => {
+      var _a;
+      const rect = (_a = this._adapter.getDOM()) === null || _a === void 0 ? void 0 : _a.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/lib/es/colorPicker/DataPartFoundation.d.ts

@@ -0,0 +1,28 @@
+import BaseFoundation, { DefaultAdapter } from "../base/foundation";
+import ColorPickerFoundation, { ColorPickerProps } from "./foundation";
+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;
+}
+declare class DataPartFoundation extends BaseFoundation<DataPartAdapter<DataPartBaseProps, DataPartBaseState>, DataPartBaseProps, DataPartBaseState> {
+    constructor(adapter: DataPartAdapter<DataPartBaseProps, DataPartBaseState>);
+    getInputValue: () => string;
+    getValueByInputValue: (value: string) => string | false | HsvaColor | RgbaColor;
+    handlePickValueWithStraw: () => Promise<void>;
+    handleInputValueChange: (value: string) => void;
+    handleFormatChange: (format: DataPartBaseState['format']) => void;
+}
+export default DataPartFoundation;

package/lib/es/colorPicker/DataPartFoundation.js

@@ -0,0 +1,108 @@
+var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+import BaseFoundation from "../base/foundation";
+import ColorPickerFoundation from "./foundation";
+import split from "./utils/split";
+class DataPartFoundation extends BaseFoundation {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+    this.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);
+      }
+    };
+    this.getValueByInputValue = value => {
+      const {
+        format
+      } = this.getStates();
+      if (format === 'rgba') {
+        const result = split(value, format);
+        if (result) {
+          return result;
+        }
+      } else if (format === 'hsva') {
+        const result = split(value, format);
+        if (result) {
+          return result;
+        }
+      } 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;
+    };
+    this.handlePickValueWithStraw = () => __awaiter(this, void 0, void 0, function* () {
+      const colorPickerFoundation = this._adapter.getColorPickerFoundation();
+      if (!window['EyeDropper']) {
+        return;
+      }
+      //@ts-ignore
+      const eyeDropper = new EyeDropper();
+      try {
+        const result = yield 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) {}
+    });
+    this.handleInputValueChange = value => {
+      this._adapter.setState({
+        inputValue: value
+      });
+    };
+    this.handleFormatChange = format => {
+      this._adapter.setState({
+        format
+      });
+    };
+  }
+}
+export default DataPartFoundation;

package/lib/es/colorPicker/colorPicker.css

@@ -0,0 +1,84 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-colorPicker-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: 8px 8px 0px 0px;
+  background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+}
+.semi-colorPicker-handle {
+  border-radius: var(--semi-border-radius-full);
+  border: 2px solid var(--semi-color-white);
+  position: absolute;
+  box-sizing: border-box;
+  cursor: grab;
+}
+.semi-colorPicker-alphaSlider {
+  position: relative;
+  cursor: pointer;
+  margin-top: 6px;
+  border-radius: var(--semi-border-radius-full);
+  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>');
+}
+.semi-colorPicker-alphaSlider .semi-colorPicker-alphaSliderInner {
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+}
+.semi-colorPicker-alphaSlider .semi-colorPicker-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: var(--semi-border-radius-full);
+  border: 2px solid var(--semi-color-white);
+  position: absolute;
+  box-sizing: border-box;
+  cursor: grab;
+}
+.semi-colorPicker-colorSlider {
+  position: relative;
+  cursor: pointer;
+  margin-top: 6px;
+  border-radius: var(--semi-border-radius-full);
+  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+}
+.semi-colorPicker-dataPart {
+  margin-top: 8px;
+  display: flex;
+  align-items: center;
+}
+.semi-colorPicker-dataPart .semi-colorPicker-colorDemoBlock {
+  border-radius: 4px;
+}
+.semi-colorPicker-dataPart .semi-colorPicker-inputGroup {
+  margin-left: 4px;
+  width: 100%;
+  flex: 1;
+  flex-wrap: nowrap;
+}
+.semi-colorPicker-dataPart .semi-colorPicker-inputGroup .semi-colorPicker-colorPickerInput {
+  flex: 1;
+}
+.semi-colorPicker-dataPart .semi-colorPicker-inputGroup .semi-colorPicker-colorPickerInputNumber {
+  width: 58px;
+}
+.semi-colorPicker-dataPart .semi-colorPicker-inputGroup .semi-colorPicker-colorPickerInputNumber .semi-colorPicker-inputNumberSuffix {
+  font-size: 14px;
+  padding: 4px 4px;
+}
+.semi-colorPicker-dataPart .semi-colorPicker-formatSelect {
+  width: 80px;
+}
+.semi-colorPicker-popover {
+  padding: 8px;
+}
+.semi-colorPicker-popover-defaultChildren {
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  cursor: pointer;
+}