@pointcloud/pcloud-components 0.1.24 → 0.1.26

package/dist/esm/ContextMenu/index.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import './index.less';
+export interface ContextMenuProps {
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 菜单内容 */
+    children: ReactNode;
+    /** 触发区域内容 */
+    trigger: ReactNode;
+    /** 点击外部是否关闭 */
+    closeOnOutside?: boolean;
+    /** 展示位置偏移量 */
+    offset?: {
+        x?: number;
+        y?: number;
+    };
+    /** 指定菜单挂载的父节点 */
+    getPopupContainer?: (props: any) => HTMLElement;
+    /** 菜单显示时的回调 */
+    onShow?: () => void;
+    /** 菜单隐藏时的回调 */
+    onHide?: () => void;
+}
+declare const ContextMenu: React.FC<ContextMenuProps>;
+export default ContextMenu;

package/dist/esm/ContextMenu/index.js

@@ -0,0 +1,146 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useMemo, useEffect, useCallback, useRef, useState, useContext } from 'react';
+import { createPortal } from 'react-dom';
+import classNames from 'classnames';
+import { ConfigContext } from "../ConfigProvider";
+import "./index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var ContextMenu = function ContextMenu(_ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    children = _ref.children,
+    trigger = _ref.trigger,
+    _ref$closeOnOutside = _ref.closeOnOutside,
+    closeOnOutside = _ref$closeOnOutside === void 0 ? true : _ref$closeOnOutside,
+    _ref$offset = _ref.offset,
+    offset = _ref$offset === void 0 ? {
+      x: 0,
+      y: 0
+    } : _ref$offset,
+    onShow = _ref.onShow,
+    onHide = _ref.onHide,
+    getPopupContainer = _ref.getPopupContainer;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var _useState3 = useState({
+      x: 0,
+      y: 0
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    position = _useState4[0],
+    setPosition = _useState4[1];
+  var _useContext = useContext(ConfigContext),
+    prefixCls = _useContext.prefixCls,
+    getPrefixCls = _useContext.getPrefixCls;
+  var triggerRef = useRef(null);
+  var menuRef = useRef(null);
+  var classname = getPrefixCls('context-menu');
+  var wrapperClass = classNames(_defineProperty({}, "".concat(prefixCls, "-context-menu"), !!prefixCls), classname, className);
+  var handleGetPopupContainer = useCallback(function (triggerNode) {
+    if (typeof getPopupContainer === 'function') {
+      var container = getPopupContainer(triggerNode);
+      return container instanceof HTMLElement ? container : document.body;
+    }
+    return document.body;
+  }, [getPopupContainer]);
+  var popContainer = useMemo(function () {
+    return triggerRef.current ? handleGetPopupContainer(triggerRef.current) : document.body;
+  }, [visible, handleGetPopupContainer]);
+
+  // 处理右键点击事件
+  var handleContextMenu = useCallback(function (e) {
+    var _menuRef$current, _menuRef$current2;
+    e.preventDefault();
+    var triggerElement = triggerRef.current;
+    if (!triggerElement) return;
+    var container = triggerElement ? handleGetPopupContainer(triggerElement) : document.body;
+    var x, y;
+    if (container === document.body) {
+      // 如果是body容器，使用相对于视窗的位置（fixed定位）
+      x = e.clientX + (offset.x || 0);
+      y = e.clientY + (offset.y || 0);
+    } else {
+      // 如果指定了容器，使用相对于该容器的位置（absolute定位）
+      var containerRect = container.getBoundingClientRect();
+      x = e.clientX - containerRect.left + container.scrollLeft + (offset.x || 0);
+      y = e.clientY - containerRect.top + container.scrollTop + (offset.y || 0);
+    }
+
+    // 确保菜单不超出容器边界
+    var menuWidth = ((_menuRef$current = menuRef.current) === null || _menuRef$current === void 0 ? void 0 : _menuRef$current.offsetWidth) || 0;
+    var menuHeight = ((_menuRef$current2 = menuRef.current) === null || _menuRef$current2 === void 0 ? void 0 : _menuRef$current2.offsetHeight) || 0;
+    var finalX, finalY;
+    if (container === document.body) {
+      // body容器情况，相对于视窗边界
+      finalX = Math.max(0, Math.min(x, window.innerWidth - menuWidth));
+      finalY = Math.max(0, Math.min(y, window.innerHeight - menuHeight));
+    } else {
+      // 自定义容器情况，相对于容器边界
+      var maxX = container.clientWidth - menuWidth;
+      var maxY = container.clientHeight - menuHeight;
+      finalX = Math.max(0, Math.min(x, maxX));
+      finalY = Math.max(0, Math.min(y, maxY));
+    }
+    setPosition({
+      x: finalX,
+      y: finalY
+    });
+    setVisible(true);
+    onShow === null || onShow === void 0 || onShow();
+  }, [offset, onShow, handleGetPopupContainer]);
+
+  // 处理点击事件
+  var handleMouseDown = useCallback(function (e) {
+    // 检查点击目标是否在菜单内部
+    if (menuRef.current && menuRef.current.contains(e.target)) {
+      // 如果点击在菜单内部，不关闭菜单，允许事件正常处理
+      return;
+    }
+    if (closeOnOutside && menuRef.current && !menuRef.current.contains(e.target) && triggerRef.current && !triggerRef.current.contains(e.target)) {
+      setVisible(false);
+      onHide === null || onHide === void 0 || onHide();
+    }
+  }, [closeOnOutside, onHide]);
+
+  // 处理 ESC 键盘事件
+  var handleKeyDown = useCallback(function (e) {
+    if (e.key === 'Escape' && visible) {
+      setVisible(false);
+      onHide === null || onHide === void 0 || onHide();
+    }
+  }, [visible, onHide]);
+  useEffect(function () {
+    if (visible) {
+      document.addEventListener('mousedown', handleMouseDown);
+      document.addEventListener('keydown', handleKeyDown);
+    }
+    return function () {
+      document.removeEventListener('mousedown', handleMouseDown);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [visible, handleMouseDown, handleKeyDown]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("div", {
+      ref: triggerRef,
+      onContextMenu: handleContextMenu,
+      children: trigger
+    }), visible && /*#__PURE__*/createPortal( /*#__PURE__*/_jsx("div", {
+      ref: menuRef,
+      className: wrapperClass,
+      style: _objectSpread(_objectSpread({}, style), {}, {
+        position: popContainer === document.body ? 'fixed' : 'absolute',
+        left: position.x,
+        top: position.y,
+        zIndex: 1050
+      }),
+      children: children
+    }), popContainer)]
+  });
+};
+export default ContextMenu;

package/dist/esm/ContextMenu/index.less

@@ -0,0 +1,73 @@
+@import '../commonStyle/index.less';
+
+@context-menu-bg: #ffffff;
+@context-menu-border-color: #f0f0f0;
+@context-menu-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+@border-radius-base: 1px;
+
+@keyframes contextmenu-show {
+  0% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.@{prefix}-context-menu {
+  background: @context-menu-bg;
+  border-radius: @border-radius-base;
+  border: 1px solid @context-menu-border-color;
+  box-shadow: @context-menu-shadow;
+  padding: 4px 0;
+  min-width: 120px;
+  opacity: 0;
+  transform: scale(0.8);
+  transform-origin: top left;
+  animation: contextMenuShow 0.2s ease-out forwards;
+
+  &-item {
+    padding: 5px 12px;
+    cursor: pointer;
+    user-select: none;
+    transition: all 0.3s;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: rgba(0, 0, 0, 88%);
+
+    &:hover {
+      background: rgba(0, 0, 0, 4%);
+    }
+
+    &-disabled {
+      color: rgba(0, 0, 0, 25%);
+      cursor: not-allowed;
+
+      &:hover {
+        background: none;
+      }
+    }
+
+    &-divider {
+      height: 1px;
+      margin: 4px 0;
+      background: #f0f0f0;
+    }
+  }
+}
+
+@keyframes contextmenu-show {
+  0% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

package/dist/esm/DSelect/index.d.ts

@@ -11,7 +11,7 @@ export declare type DSelectProps = Omit<SelectProps, 'options' | 'onSearch' | 'l
     /** 是否开启防抖： true表示800毫秒，true表示默认值，false或0表示不开启 */
     debounce?: boolean | number;
 };
-declare const DSelect: React.ForwardRefExoticComponent<Omit<SelectProps<any, DefaultOptionType>, "onSearch" | "options" | "loading"> & {
+declare const DSelect: React.ForwardRefExoticComponent<Omit<SelectProps<any, DefaultOptionType>, "options" | "onSearch" | "loading"> & {
     /** antd的onSearch属性，onSearch有效时showSearch自动为true */
     onSearch?: ((params?: any) => Promise<DefaultOptionType[] | any[]>) | undefined;
     /** antd的options属性，可以是一个options数组，或一个返回等价options数组的promise */

package/dist/esm/IPAddress/index.less

@@ -1,75 +1,75 @@
-@import '../commonStyle/index.less';
-
-.@{prefix}-ip-address {
-  border: 1px solid #d9d9d9;
-  border-radius: 2px;
-  transition: all 0.3s;
-  display: inline-block;
-
-  &.small {
-    height: 24px;
-  }
-
-  &.large {
-    padding: 6.5px 10px;
-  }
-
-  &.middle {
-    padding: 4px 10px;
-  }
-
-  &.disabled {
-    color: rgba(0, 0, 0, 25%);
-    background-color: #f5f5f5;
-    border-color: #d9d9d9;
-    box-shadow: none;
-    cursor: not-allowed;
-    opacity: 1;
-
-    &:hover {
-      border-color: #d9d9d9;
-    }
-  }
-
-  &:hover {
-    border-color: #4d90ff;
-  }
-
-  &:focus-within {
-    border-color: #40a9ff;
-    box-shadow: 0 0 0 2px rgba(24, 144, 255, 20%);
-  }
-
-  input {
-    border: none;
-    background: none;
-    text-align: center;
-    outline: 0;
-    padding: 0;
-    margin: 0;
-    box-sizing: border-box;
-    font-variant: tabular-nums;
-    font-feature-settings: 'tnum';
-    position: relative;
-    display: inline-block;
-    color: #000000d9;
-    font-size: 14px;
-    line-height: 1.5715;
-  }
-
-  input[disabled] {
-    cursor: not-allowed;
-    color: inherit;
-  }
-
-  input[type='number'] {
-    appearance: textfield; /* 移除Firefox的特殊样式 */
-  }
-
-  /* 移除上下箭头 */
-  input[type='number']::-webkit-outer-spin-button,
-  input[type='number']::-webkit-inner-spin-button {
-    appearance: none;
-    margin: 0;
-  }
-}
+@import '../commonStyle/index.less';
+
+.@{prefix}-ip-address {
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+  transition: all 0.3s;
+  display: inline-block;
+
+  &.small {
+    height: 24px;
+  }
+
+  &.large {
+    padding: 6.5px 10px;
+  }
+
+  &.middle {
+    padding: 4px 10px;
+  }
+
+  &.disabled {
+    color: rgba(0, 0, 0, 25%);
+    background-color: #f5f5f5;
+    border-color: #d9d9d9;
+    box-shadow: none;
+    cursor: not-allowed;
+    opacity: 1;
+
+    &:hover {
+      border-color: #d9d9d9;
+    }
+  }
+
+  &:hover {
+    border-color: #4d90ff;
+  }
+
+  &:focus-within {
+    border-color: #40a9ff;
+    box-shadow: 0 0 0 2px rgba(24, 144, 255, 20%);
+  }
+
+  input {
+    border: none;
+    background: none;
+    text-align: center;
+    outline: 0;
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    font-variant: tabular-nums;
+    font-feature-settings: 'tnum';
+    position: relative;
+    display: inline-block;
+    color: #000000d9;
+    font-size: 14px;
+    line-height: 1.5715;
+  }
+
+  input[disabled] {
+    cursor: not-allowed;
+    color: inherit;
+  }
+
+  input[type='number'] {
+    appearance: textfield; /* 移除Firefox的特殊样式 */
+  }
+
+  /* 移除上下箭头 */
+  input[type='number']::-webkit-outer-spin-button,
+  input[type='number']::-webkit-inner-spin-button {
+    appearance: none;
+    margin: 0;
+  }
+}

package/dist/esm/SignaturePad/index.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import './style/index.less';
+export interface SignaturePadHandle {
+    /** 清除画布 */
+    clear: () => void;
+    /** 获取签名图片的 base64 数据 */
+    getDataURL: () => string | undefined;
+}
+export interface SignaturePadProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 画布宽度 */
+    width?: number;
+    /** 画布高度 */
+    height?: number;
+    /** 线条颜色 */
+    penColor?: string;
+    /** 线条粗细 */
+    penWidth?: number;
+    /** 背景颜色 */
+    backgroundColor?: string;
+    /** 清除按钮文字 */
+    clearText?: string;
+    /** 完成按钮文字 */
+    doneText?: string;
+    /** 是否显示工具栏 */
+    showToolbar?: boolean;
+    /** 签名完成回调 */
+    onDone?: (_dataUrl: string) => void;
+    /** 默认的签名图片（base64或图片URL） */
+    defaultValue?: string;
+}
+declare const SignaturePad: import("react").ForwardRefExoticComponent<SignaturePadProps & import("react").RefAttributes<SignaturePadHandle>>;
+export default SignaturePad;

package/dist/esm/SignaturePad/index.js

@@ -0,0 +1,194 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { useCallback, useContext, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
+import classNames from 'classnames';
+import { ConfigContext } from "../ConfigProvider";
+import "./style/index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var SignaturePad = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 600 : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 200 : _ref$height,
+    _ref$penColor = _ref.penColor,
+    penColor = _ref$penColor === void 0 ? '#000000' : _ref$penColor,
+    _ref$penWidth = _ref.penWidth,
+    penWidth = _ref$penWidth === void 0 ? 2 : _ref$penWidth,
+    _ref$backgroundColor = _ref.backgroundColor,
+    backgroundColor = _ref$backgroundColor === void 0 ? '#ffffff' : _ref$backgroundColor,
+    _ref$clearText = _ref.clearText,
+    clearText = _ref$clearText === void 0 ? '清除' : _ref$clearText,
+    _ref$doneText = _ref.doneText,
+    doneText = _ref$doneText === void 0 ? '完成' : _ref$doneText,
+    _ref$showToolbar = _ref.showToolbar,
+    showToolbar = _ref$showToolbar === void 0 ? true : _ref$showToolbar,
+    onDone = _ref.onDone,
+    defaultValue = _ref.defaultValue;
+  var canvasRef = useRef(null);
+  var isDrawing = useRef(false);
+  var lastX = useRef(0);
+  var lastY = useRef(0);
+  var _useContext = useContext(ConfigContext),
+    prefixCls = _useContext.prefixCls,
+    getPrefixCls = _useContext.getPrefixCls;
+  var classname = getPrefixCls('signature-pad');
+  var wrapperClass = classNames(_defineProperty({}, "".concat(prefixCls, "-signature-pad"), !!prefixCls), classname, className);
+  var initCanvas = useCallback(function () {
+    var canvas = canvasRef.current;
+    if (!canvas) return;
+
+    // 设置画布大小和背景色
+    canvas.width = width;
+    canvas.height = height;
+    var ctx = canvas.getContext('2d');
+    if (ctx) {
+      ctx.fillStyle = backgroundColor;
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+    }
+  }, [width, height, backgroundColor]);
+  var loadImage = useCallback(function (src) {
+    var canvas = canvasRef.current;
+    if (!canvas) return;
+    var ctx = canvas.getContext('2d');
+    if (!ctx) return;
+    var image = new Image();
+    image.onload = function () {
+      // 先初始化画布
+      initCanvas();
+      // 在画布中心绘制图片
+      var scale = Math.min(canvas.width / image.width, canvas.height / image.height);
+      var x = (canvas.width - image.width * scale) / 2;
+      var y = (canvas.height - image.height * scale) / 2;
+      ctx.drawImage(image, x, y, image.width * scale, image.height * scale);
+    };
+    image.src = src;
+  }, [initCanvas]);
+  useEffect(function () {
+    initCanvas();
+  }, [initCanvas]);
+  useEffect(function () {
+    if (defaultValue) {
+      loadImage(defaultValue);
+    }
+  }, [defaultValue, loadImage]);
+  var startDrawing = useCallback(function (e) {
+    var canvas = canvasRef.current;
+    if (!canvas) return;
+    isDrawing.current = true;
+    var rect = canvas.getBoundingClientRect();
+    var x = ('touches' in e ? e.touches[0].clientX : e.clientX) - rect.left;
+    var y = ('touches' in e ? e.touches[0].clientY : e.clientY) - rect.top;
+    lastX.current = x;
+    lastY.current = y;
+  }, []);
+  var draw = useCallback(function (e) {
+    if (!isDrawing.current) return;
+    var canvas = canvasRef.current;
+    if (!canvas) return;
+    var rect = canvas.getBoundingClientRect();
+    var x = ('touches' in e ? e.touches[0].clientX : e.clientX) - rect.left;
+    var y = ('touches' in e ? e.touches[0].clientY : e.clientY) - rect.top;
+    var ctx = canvas.getContext('2d');
+    if (ctx) {
+      ctx.beginPath();
+      ctx.strokeStyle = penColor;
+      ctx.lineWidth = penWidth;
+      ctx.lineCap = 'round';
+      ctx.lineJoin = 'round';
+      ctx.moveTo(lastX.current, lastY.current);
+      ctx.lineTo(x, y);
+      ctx.stroke();
+    }
+    lastX.current = x;
+    lastY.current = y;
+  }, [penColor, penWidth]);
+  var stopDrawing = useCallback(function () {
+    isDrawing.current = false;
+  }, []);
+  useEffect(function () {
+    var canvas = canvasRef.current;
+    if (!canvas) return;
+    var handleEvent = function handleEvent(e) {
+      e.preventDefault();
+      var event = e;
+      switch (e.type) {
+        case 'mousedown':
+        case 'touchstart':
+          startDrawing(event);
+          break;
+        case 'mousemove':
+        case 'touchmove':
+          draw(event);
+          break;
+        case 'mouseup':
+        case 'mouseleave':
+        case 'touchend':
+          stopDrawing();
+          break;
+        default:
+          break;
+      }
+    };
+    var events = ['mousedown', 'mousemove', 'mouseup', 'mouseleave', 'touchstart', 'touchmove', 'touchend'];
+
+    // 添加事件监听
+    events.forEach(function (eventName) {
+      canvas.addEventListener(eventName, handleEvent);
+    });
+    return function () {
+      // 清除事件监听
+      events.forEach(function (eventName) {
+        canvas.removeEventListener(eventName, handleEvent);
+      });
+    };
+  }, [draw, startDrawing, stopDrawing]);
+  var handleClear = useCallback(function () {
+    var canvas = canvasRef.current;
+    if (!canvas) return;
+    var ctx = canvas.getContext('2d');
+    if (ctx) {
+      ctx.fillStyle = backgroundColor;
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+    }
+  }, [backgroundColor]);
+  var handleDone = useCallback(function () {
+    var canvas = canvasRef.current;
+    if (!canvas) return;
+    var dataUrl = canvas.toDataURL('image/png');
+    onDone === null || onDone === void 0 || onDone(dataUrl);
+  }, [onDone]);
+  useImperativeHandle(ref, function () {
+    return {
+      clear: handleClear,
+      getDataURL: function getDataURL() {
+        var _canvasRef$current;
+        return (_canvasRef$current = canvasRef.current) === null || _canvasRef$current === void 0 ? void 0 : _canvasRef$current.toDataURL('image/png');
+      }
+    };
+  });
+  return /*#__PURE__*/_jsxs("div", {
+    className: wrapperClass,
+    children: [/*#__PURE__*/_jsx("canvas", {
+      ref: canvasRef,
+      className: "".concat(classname, "-canvas"),
+      style: {
+        touchAction: 'none'
+      }
+    }), showToolbar && /*#__PURE__*/_jsxs("div", {
+      className: "".concat(classname, "-toolbar"),
+      children: [/*#__PURE__*/_jsx("button", {
+        type: "button",
+        className: "".concat(classname, "-button"),
+        onClick: handleClear,
+        children: clearText
+      }), /*#__PURE__*/_jsx("button", {
+        type: "button",
+        className: "".concat(classname, "-button"),
+        onClick: handleDone,
+        children: doneText
+      })]
+    })]
+  });
+});
+export default SignaturePad;

package/dist/esm/SignaturePad/style/index.less

@@ -0,0 +1,47 @@
+@import '../../commonStyle/index.less';
+
+.@{prefix}-signature-pad {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+
+  &-canvas {
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+  }
+
+  &-toolbar {
+    margin-top: 8px;
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    text-align: center;
+  }
+
+  &-button {
+    min-width: 64px;
+    height: 32px;
+    padding: 4px 16px;
+    border: 1px solid #1677ff;
+    border-radius: 4px;
+    background-color: #fff;
+    color: #1677ff;
+    cursor: pointer;
+    transition: all 0.3s;
+
+    &:hover {
+      background-color: #f0f5ff;
+    }
+
+    &:last-child {
+      background-color: #1677ff;
+      color: #fff;
+
+      &:hover {
+        background-color: #4096ff;
+      }
+    }
+  }
+}

package/dist/esm/index.d.ts

@@ -48,3 +48,7 @@ export { default as IconFont } from './IconFont';
 export type { IconFontProps } from './IconFont';
 export { default as AspectRatio } from './AspectRatio';
 export type { AspectRatioProps } from './AspectRatio';
+export { default as SignaturePad } from './SignaturePad';
+export type { SignaturePadProps } from './SignaturePad';
+export { default as ContextMenu } from './ContextMenu';
+export type { ContextMenuProps } from './ContextMenu';