@douyinfe/semi-foundation 2.20.0-beta.0 → 2.20.0

package/lib/cjs/image/previewInnerFoundation.js

@@ -0,0 +1,341 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+
+var _keyCode = _interopRequireDefault(require("../utils/keyCode"));
+
+var _utils = require("./utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const NOT_CLOSE_TARGETS = ["icon", "footer"];
+const STOP_CLOSE_TARGET = ["icon", "footer", "header"];
+
+class PreviewInnerFoundation extends _foundation.default {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+
+    this.handleViewVisibleChange = () => {
+      const nowTime = new Date().getTime();
+
+      const mouseActiveTime = this._adapter.getMouseActiveTime();
+
+      const stopTiming = this._adapter.getStopTiming();
+
+      const {
+        viewerVisibleDelay
+      } = this.getProps();
+      const {
+        viewerVisible
+      } = this.getStates();
+
+      if (nowTime - mouseActiveTime > viewerVisibleDelay && !stopTiming) {
+        viewerVisible && this.setState({
+          viewerVisible: false
+        });
+      }
+    };
+
+    this.handleMouseMoveEvent = (e, event) => {
+      const isTarget = (0, _utils.isTargetEmit)(e.nativeEvent, STOP_CLOSE_TARGET);
+
+      if (isTarget && event === "over") {
+        this._adapter.setStopTiming(true);
+      } else if (isTarget && event === "out") {
+        this._adapter.setStopTiming(false);
+      }
+    };
+
+    this.handleMouseMove = e => {
+      this._adapter.setMouseActiveTime(new Date().getTime());
+
+      this.setState({
+        viewerVisible: true
+      });
+    };
+
+    this.handleMouseUp = e => {
+      const {
+        maskClosable
+      } = this.getProps();
+      let couldClose = !(0, _utils.isTargetEmit)(e.nativeEvent, NOT_CLOSE_TARGETS);
+      const {
+        clientX,
+        clientY
+      } = e;
+
+      const {
+        x,
+        y
+      } = this._adapter.getStartMouseDown(); // 对鼠标移动做容错处理，当 x 和 y 方向在 mouseUp 的时候移动距离都小于等于 5px 时候就可以关闭预览
+      // Error-tolerant processing of mouse movement, when the movement distance in the x and y directions is less than or equal to 5px in mouseUp, the preview can be closed
+      // 不做容错处理的话，直接用 clientX !== x || y !== clientY 做判断，鼠标在用户点击时候无意识的轻微移动无法关闭预览，不符合用户预期
+      // If you do not do fault-tolerant processing, but directly use clientX !== x || y !== clientY to make judgments, the slight movement of the mouse when the user clicks will not be able to close the preview, which does not meet the user's expectations.
+
+
+      if (Math.abs(clientX - x) > 5 || Math.abs(y - clientY) > 5) {
+        couldClose = false;
+      }
+
+      if (couldClose && maskClosable) {
+        this.handlePreviewClose();
+      }
+    };
+
+    this.handleMouseDown = e => {
+      const {
+        clientX,
+        clientY
+      } = e;
+
+      this._adapter.setStartMouseDown(clientX, clientY);
+    };
+
+    this.handleKeyDown = e => {
+      const {
+        closeOnEsc
+      } = this.getProps();
+
+      if (closeOnEsc && e.keyCode === _keyCode.default.ESC) {
+        e.stopPropagation();
+
+        this._adapter.notifyVisibleChange(false);
+
+        this._adapter.notifyClose();
+
+        return;
+      }
+    };
+
+    this.handleSwitchImage = direction => {
+      const step = direction === "prev" ? -1 : 1;
+      const {
+        imgSrc,
+        currentIndex: currentIndexInState
+      } = this.getStates();
+      const srcLength = imgSrc.length;
+      const newIndex = (currentIndexInState + step + srcLength) % srcLength;
+
+      if ("currentIndex" in this.getProps()) {
+        if (this._adapter.getIsInGroup()) {
+          const setCurrentIndex = this._adapter.getContext("setCurrentIndex");
+
+          setCurrentIndex(newIndex);
+        }
+      } else {
+        this.setState({
+          currentIndex: newIndex
+        });
+      }
+
+      this._adapter.notifyChange(newIndex);
+
+      this.setState({
+        direction,
+        rotation: 0
+      });
+
+      this._adapter.notifyRotateChange(0);
+    };
+
+    this.handleDownload = () => {
+      const {
+        currentIndex,
+        imgSrc
+      } = this.getStates();
+      const downloadSrc = imgSrc[currentIndex];
+      const downloadName = downloadSrc.slice(downloadSrc.lastIndexOf("/") + 1);
+      (0, _utils.downloadImage)(downloadSrc, downloadName);
+
+      this._adapter.notifyDownload(downloadSrc, currentIndex);
+    };
+
+    this.handlePreviewClose = () => {
+      this._adapter.notifyVisibleChange(false);
+
+      this._adapter.notifyClose();
+    };
+
+    this.handleAdjustRatio = type => {
+      this.setState({
+        ratio: type
+      });
+
+      this._adapter.notifyRatioChange(type);
+    };
+
+    this.handleRotateImage = direction => {
+      const {
+        rotation
+      } = this.getStates();
+      const newRotation = rotation + (direction === "left" ? 90 : -90);
+      this.setState({
+        rotation: newRotation
+      });
+
+      this._adapter.notifyRotateChange(newRotation);
+    };
+
+    this.handleZoomImage = newZoom => {
+      const {
+        zoom
+      } = this.getStates();
+
+      this._adapter.notifyZoom(newZoom, newZoom > zoom);
+
+      this.setState({
+        zoom: newZoom
+      });
+    }; // 当 visible 改变之后，预览组件完成首张图片加载后，启动预加载
+    // 如： 1，2，3，4，5，6，7，8张图片， 点击第 4 张图片，preLoadGap 为 2
+    // 当 visible 从 false 变为 true ，首先加载第 4 张图片，当第 4 张图片加载完成后，
+    // 再按照 5，3，6，2的顺序预先加载这几张图片
+    // When visible changes, the preview component finishes loading the first image and starts preloading
+    // Such as: 1, 2, 3, 4, 5, 6, 7, 8 pictures, click the 4th picture, preLoadGap is 2
+    // When visible changes from false to true , load the 4th image first, when the 4th image is loaded,
+    // Preload these pictures in the order of 5, 3, 6, 2
+
+
+    this.preloadGapImage = () => {
+      const {
+        preLoad,
+        preLoadGap,
+        infinite,
+        currentIndex
+      } = this.getProps();
+      const {
+        imgSrc
+      } = this.getStates();
+
+      if (!preLoad || typeof preLoadGap !== "number" || preLoadGap < 1) {
+        return;
+      }
+
+      const preloadImages = (0, _utils.getPreloadImagArr)(imgSrc, currentIndex, preLoadGap, infinite);
+      const Img = new Image();
+      let index = 0;
+
+      function callback(e) {
+        index++;
+
+        if (index < preloadImages.length) {
+          Img.src = preloadImages[index];
+        }
+      }
+
+      Img.onload = e => {
+        this.setLoadSuccessStatus(Img.src);
+        callback(e);
+      };
+
+      Img.onerror = callback;
+      Img.src = preloadImages[0];
+    }; // 在切换左右图片时，当被切换图片完成加载后，根据方向决定下一个预加载的图片
+    // 如： 1，2，3，4，5，6，7，8张图片
+    // 当 preLoadGap 为 2， 从第 5 张图片进行切换
+    // - 如果向 右 切换到第 6 张，则第 6 张图片加载动作结束后（无论加载成功 or 失败），会预先加载第 8 张；
+    // - 如果向 左 切换到第 4 张，则第 4 张图片加载动作结束后（无论加载成功 or 失败），会预先加载第 2 张；
+    // When switching the left and right pictures, when the switched picture is loaded, the next preloaded picture is determined according to the direction
+    // Such as: 1, 2, 3, 4, 5, 6, 7, 8 pictures
+    // When preLoadGap is 2, switch from the 5th picture
+    // - If you switch to the 6th image(direction is next), the 8th image will be preloaded after the 6th image is loaded (whether it succeeds or fails to load);
+    // - If you switch to the 4th image(direction is prev), the second image will be preloaded after the 4th image is loaded (whether it succeeds or fails to load);
+
+
+    this.preloadSingleImage = () => {
+      const {
+        preLoad,
+        preLoadGap,
+        infinite
+      } = this.getProps();
+      const {
+        imgSrc,
+        currentIndex,
+        direction,
+        imgLoadStatus
+      } = this.getStates();
+
+      if (!preLoad || typeof preLoadGap !== "number" || preLoadGap < 1) {
+        return;
+      } // 根据方向决定preload那个index
+      // Determine the index of preload according to the direction
+
+
+      let preloadIndex = currentIndex + (direction === "prev" ? -1 : 1) * preLoadGap;
+
+      if (preloadIndex < 0 || preloadIndex >= imgSrc.length) {
+        if (infinite) {
+          preloadIndex = (preloadIndex + imgSrc.length) % imgSrc.length;
+        } else {
+          return;
+        }
+      } // 如果图片没有加载成功过，则进行预加载
+      // If the image has not been loaded successfully, preload it
+
+
+      if (!imgLoadStatus[preloadIndex]) {
+        const Img = new Image();
+
+        Img.onload = e => {
+          this.setLoadSuccessStatus(imgSrc[preloadIndex]);
+        };
+
+        Img.src = imgSrc[preloadIndex];
+      }
+    };
+
+    this.setLoadSuccessStatus = src => {
+      const {
+        imgLoadStatus
+      } = this.getStates();
+      const status = Object.assign({}, imgLoadStatus);
+      status[src] = true;
+      this.setState({
+        imgLoadStatus: status
+      });
+    };
+
+    this.onImageLoad = src => {
+      const {
+        preloadAfterVisibleChange
+      } = this.getStates();
+      this.setLoadSuccessStatus(src); // 当 preview 中当前加载的图片加载完成后，
+      // 如果是在visible change之后的第一次加载，则启动加载该currentIndex左右preloadGap范围的图片
+      // 如果是非第一次加载，是在左右切换图片，则根据方向预先加载单张图片
+      // When the currently loaded image in Preview is loaded,
+      // - It is the first load after visible change, start loading the images in the preloadGap range around the currentIndex
+      // - It is not the first load, the image is switched left and right, and a single image is preloaded according to the direction
+
+      if (preloadAfterVisibleChange) {
+        this.preloadGapImage();
+        this.setState({
+          preloadAfterVisibleChange: false
+        });
+      } else {
+        this.preloadSingleImage();
+      }
+    };
+  }
+
+  beforeShow() {
+    this._adapter.registerKeyDownListener();
+  }
+
+  afterHide() {
+    this._adapter.unregisterKeyDownListener();
+  }
+
+  handleRatio(type) {
+    this.setState({
+      ratio: type
+    });
+  }
+
+}
+
+exports.default = PreviewInnerFoundation;

package/lib/cjs/image/utils.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.isTargetEmit = exports.getPreloadImagArr = exports.downloadImage = exports.crossMerge = void 0;
 
 const isTargetEmit = (event, targetClasses) => {
-  var _a; // e.path is the event-triggered bubbling path, which stores each node through which bubbling passes.
-  // e.path.length-4 is to remove elements above the root node, such as body, html, document, window
-
-
-  const isTarget = (_a = event === null || event === void 0 ? void 0 : event.path) === null || _a === void 0 ? void 0 : _a.slice(0, event.path.length - 4).some(node => {
+  // event.path usage is discouraged, use event.composedPath() as it's standard and is more future-proof
+  // path is the event-triggered bubbling path, which stores each node through which bubbling passes.
+  // path.length-4 is to remove elements above the root node, such as body, html, document, window
+  const path = event === null || event === void 0 ? void 0 : event.composedPath();
+  const isTarget = path === null || path === void 0 ? void 0 : path.slice(0, path.length - 4).some(node => {
     if (node.className && typeof node.className === "string") {
       return targetClasses.some(c => node.className.includes(c));
     }

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

@@ -74,7 +74,6 @@ export default class NavigationFoundation<P = Record<string, any>, S = Record<st
      * @param {*} itemKeysMap
      */
     getWillOpenKeys(itemKeysMap: ItemKey2ParentKeysMap): any[];
-    getItemKey(item: string | number, keyPropName?: string): string | number;
     getShouldOpenKeys(itemKeysMap?: ItemKey2ParentKeysMap, selectedKeys?: string | number[]): unknown[];
     destroy(): void;
     selectLevelZeroParentKeys(itemKeysMap: ItemKey2ParentKeysMap, ...itemKeys: (string | number)[]): any[];

package/lib/cjs/navigation/foundation.js

@@ -186,16 +186,6 @@ class NavigationFoundation extends _foundation.default {
     return [...willOpenKeys];
   }
 
-  getItemKey(item) {
-    let keyPropName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'itemKey';
-
-    if (item && typeof item === 'object') {
-      return item[keyPropName];
-    }
-
-    return item;
-  }
-
   getShouldOpenKeys() {
     let itemKeysMap = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     let selectedKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
@@ -204,7 +194,7 @@ class NavigationFoundation extends _foundation.default {
     if (Array.isArray(selectedKeys) && selectedKeys.length) {
       selectedKeys.forEach(item => {
         if (item) {
-          const parentKeys = (0, _get2.default)(itemKeysMap, this.getItemKey(item));
+          const parentKeys = (0, _get2.default)(itemKeysMap, item);
 
           if (Array.isArray(parentKeys)) {
             parentKeys.forEach(k => willOpenKeySet.add(k));

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

@@ -1,6 +1,7 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { Locale } from 'date-fns';
-import { DateObj, weeekStartsOnEnum } from './eventUtil';
+import { DateObj } from './eventUtil';
+import type { weeekStartsOnEnum } from './eventUtil';
 export { weeekStartsOnEnum };
 export interface EventObject {
     [x: string]: any;

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

@@ -1,9 +1,9 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { strings } from './constants';
-import { Type, DateInputFoundationProps, InsetInputValue } from './inputFoundation';
-import { MonthsGridFoundationProps } from './monthsGridFoundation';
-import { WeekStartNumber } from './_utils/getMonthTable';
-import { ArrayElement, Motion } from '../utils/type';
+import type { ArrayElement, Motion } from '../utils/type';
+import type { Type, DateInputFoundationProps, InsetInputValue } from './inputFoundation';
+import type { MonthsGridFoundationProps } from './monthsGridFoundation';
+import type { WeekStartNumber } from './_utils/getMonthTable';
 export declare type ValidateStatus = ArrayElement<typeof strings.STATUS>;
 export declare type InputSize = ArrayElement<typeof strings.SIZE_SET>;
 export declare type Position = ArrayElement<typeof strings.POSITION_SET>;

package/lib/es/datePicker/monthsGridFoundation.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { strings } from './constants';
 import { WeekStartNumber } from './_utils/getMonthTable';
@@ -56,8 +55,8 @@ export interface MonthsGridFoundationProps extends MonthsGridElementProps {
     triggerRender?: (props: Record<string, any>) => any;
     insetInput: boolean;
     presetPosition?: PresetPosition;
-    renderQuickControls?: React.ReactNode;
-    renderDateInput?: React.ReactNode;
+    renderQuickControls?: any;
+    renderDateInput?: any;
 }
 export interface MonthInfo {
     pickerDate: Date;

package/lib/es/datePicker/yearAndMonthFoundation.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { PresetPosition } from './foundation';
 export interface YearAndMonthFoundationProps {
@@ -17,8 +16,8 @@ export interface YearAndMonthFoundationProps {
     disabledDate?: (date: Date) => boolean;
     density?: string;
     presetPosition?: PresetPosition;
-    renderQuickControls?: React.ReactNode;
-    renderDateInput?: React.ReactNode;
+    renderQuickControls?: any;
+    renderDateInput?: any;
 }
 export interface YearAndMonthFoundationState {
     years: Array<{

package/lib/es/form/form.css

@@ -35,6 +35,14 @@
   display: flex;
   justify-content: flex-start;
 }
+.semi-form-vertical .semi-form-field-group .semi-form-col-right {
+  display: flex;
+  justify-content: flex-end;
+}
+.semi-form-vertical .semi-form-field-group .semi-form-col-left {
+  display: flex;
+  justify-content: flex-start;
+}
 .semi-form-field-label {
   box-sizing: border-box;
   padding-right: 16px;

package/lib/es/form/form.scss

@@ -66,6 +66,20 @@ $rating: #{$prefix}-rating;
                 }
             }
         }
+
+        .#{$field}-group {
+            .#{$col} {
+                &-right {
+                    display: flex;
+                    justify-content: flex-end;
+                }
+                &-left {
+                    display: flex;
+                    justify-content: flex-start;
+                }
+            }
+        }
+
         .#{$field}-pure {
             // padding-top: 0;
             // padding-bottom: 0;

package/lib/es/image/image.css

@@ -10,6 +10,7 @@
 .semi-image-img {
   vertical-align: middle;
   border-radius: inherit;
+  user-select: none;
 }
 .semi-image-img-preview {
   cursor: zoom-in;
@@ -120,6 +121,7 @@
   transform: translateX(-50%);
 }
 .semi-image-preview-footer-page {
+  user-select: none;
   color: var(--semi-color-white);
   font-size: 16px;
   line-height: 22px;
@@ -168,6 +170,7 @@
   transform: scale3d(1, 1, 1) var(--semi-transform-rotate-none);
   transition: transform 0.3s 0s;
   z-index: 0;
+  user-select: none;
 }
 .semi-image-preview-image-spin {
   position: absolute;

package/lib/es/image/image.scss

@@ -13,6 +13,7 @@ $module: #{$prefix}-image;
     &-img {
         vertical-align: middle;
         border-radius: inherit;
+        user-select: none;
 
         &-preview {
             cursor: zoom-in;
@@ -135,6 +136,7 @@ $module: #{$prefix}-image;
         }
 
         &-page {
+            user-select: none;
             color: $color-image_preview_footer_icon;
             @include font-size-header-6;
             margin: $spacing-image_preview_footer_page-marginY $spacing-image_preview_footer_page-marginX;
@@ -192,6 +194,7 @@ $module: #{$prefix}-image;
             transform: scale3d($transform_scale3d-image_preview_image_img) $transform_rotate-image_preview_image_img;
             transition: transform $transition_duration-image_preview_image_img  $transition_delay-image_preview_image_img;
             z-index: 0;
+            user-select: none;
         }
 
         &-spin {

package/lib/es/image/imageFoundation.d.ts

@@ -0,0 +1,11 @@
+import BaseFoundation, { DefaultAdapter } from "../base/foundation";
+export interface ImageAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    getIsInGroup: () => boolean;
+}
+export default class ImageFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<ImageAdapter<P, S>, P, S> {
+    constructor(adapter: ImageAdapter<P, S>);
+    handleClick: (e: any) => void;
+    handleLoaded: (e: any) => void;
+    handleError: (e: any) => void;
+    handlePreviewVisibleChange: (newVisible: boolean) => void;
+}

package/lib/es/image/imageFoundation.js

@@ -0,0 +1,76 @@
+import _isObject from "lodash/isObject";
+import BaseFoundation from "../base/foundation";
+export default class ImageFoundation extends BaseFoundation {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+
+    this.handleClick = e => {
+      const {
+        imageID,
+        preview
+      } = this.getProps(); // if preview = false, then it cannot preview
+
+      if (!preview) {
+        return;
+      } // if image in group, then use group's Preview components
+
+
+      if (this._adapter.getIsInGroup()) {
+        const {
+          setCurrentIndex,
+          handleVisibleChange
+        } = this._adapter.getContexts();
+
+        setCurrentIndex(imageID);
+        handleVisibleChange(true);
+      } else {
+        // image isn't in group, then use it's own Preview components
+        this.handlePreviewVisibleChange(true);
+      }
+    };
+
+    this.handleLoaded = e => {
+      const {
+        onLoad
+      } = this.getProps();
+      onLoad && onLoad(e);
+      this.setState({
+        loadStatus: "success"
+      });
+    };
+
+    this.handleError = e => {
+      const {
+        onError
+      } = this.getProps();
+      onError && onError(e);
+      this.setState({
+        loadStatus: "error"
+      });
+    };
+
+    this.handlePreviewVisibleChange = newVisible => {
+      const {
+        preview
+      } = this.getProps();
+
+      if (_isObject(preview)) {
+        const {
+          onVisibleChange
+        } = preview;
+        onVisibleChange && onVisibleChange(newVisible);
+
+        if (!("visible" in this.getProps())) {
+          this.setState({
+            previewVisible: newVisible
+          });
+        }
+      } else {
+        this.setState({
+          previewVisible: newVisible
+        });
+      }
+    };
+  }
+
+}

package/lib/es/image/previewFooterFoundation.d.ts

@@ -0,0 +1,10 @@
+import BaseFoundation, { DefaultAdapter } from "../base/foundation";
+export interface PreviewFooterAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    setStartMouseOffset: (time: number) => void;
+}
+export default class PreviewFooterFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<PreviewFooterAdapter<P, S>, P, S> {
+    changeSliderValue: (type: string) => void;
+    handleValueChange: (value: number) => void;
+    handleRatioClick: () => void;
+    handleRotate: (direction: string) => void;
+}