@nutui/nutui-react-taro/dist/esm/signature.taro-BW4eiGIR.js

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

import { _ as __rest } from "./tslib.es6-iWu3F_1J.js";
import React__default, { useRef, useState, useImperativeHandle, useEffect } from "react";
import { getEnv, nextTick, createSelectorQuery, canvasToTempFilePath } from "@tarojs/taro";
import { C as ComponentDefaults } from "./typings-DV9RBfhj.js";
const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { canvasId: "spcanvas", type: "png", lineWidth: 2, strokeStyle: "#1a1a1a" });
const InternalSignature = (props, ref) => {
  const _a = Object.assign(Object.assign({}, defaultProps), props), { canvasId, type, lineWidth, strokeStyle, className, style, onConfirm, onClear } = _a, rest = __rest(_a, ["canvasId", "type", "lineWidth", "strokeStyle", "className", "style", "onConfirm", "onClear"]);
  const classPrefix = `nut-signature`;
  const canvasRef = useRef(null);
  const wrapRef = useRef(null);
  const [canvasHeight, setCanvasHeight] = useState(0);
  const [canvasWidth, setCanvasWidth] = useState(0);
  const ctx = useRef(null);
  const [disalbeScroll] = useState("true");
  const isSignedRef = useRef(false);
  const startEventHandler = (event) => {
    isSignedRef.current = true;
    if (ctx.current) {
      ctx.current.beginPath();
      ctx.current.lineWidth = lineWidth;
      ctx.current.strokeStyle = strokeStyle;
    }
  };
  const moveEventHandler = (event) => {
    if (ctx.current) {
      const evt = event.changedTouches[0];
      let mouseX = evt.x || evt.clientX;
      let mouseY = evt.y || evt.clientY;
      if (getEnv() === "WEB" && canvasRef.current) {
        const coverPos = canvasRef.current.getBoundingClientRect();
        mouseX = evt.clientX - coverPos.left;
        mouseY = evt.clientY - coverPos.top;
      }
      nextTick(() => {
        var _a2, _b;
        (_a2 = ctx.current) === null || _a2 === void 0 ? void 0 : _a2.lineTo(mouseX, mouseY);
        (_b = ctx.current) === null || _b === void 0 ? void 0 : _b.stroke();
      });
    }
  };
  const endEventHandler = (event) => {
  };
  const handleClearBtn = () => {
    isSignedRef.current = false;
    if (ctx.current) {
      ctx.current.clearRect(0, 0, canvasWidth, canvasHeight);
      ctx.current.closePath();
    }
    onClear && onClear();
  };
  const onSave = () => {
    if (!isSignedRef.current) {
      onConfirm && onConfirm("", isSignedRef.current);
      return;
    }
    createSelectorQuery().select(`#${canvasId}`).fields({
      node: true,
      size: true
    }).exec((res) => {
      canvasToTempFilePath({
        canvas: res[0].node,
        fileType: type,
        canvasId: `${canvasId}`,
        success: (res2) => {
          onConfirm && onConfirm(res2.tempFilePath, isSignedRef.current);
        },
        fail: (res2) => {
          console.warn("保存失败", res2);
        }
      });
    });
  };
  const canvasSetting = (canvasDom, width, height) => {
    const canvas = canvasDom;
    canvas.current = canvas;
    ctx.current = canvas.getContext("2d");
    setCanvasWidth(width);
    setCanvasHeight(height);
    canvas.width = width;
    canvas.height = height;
    if (ctx.current) {
      ctx.current.clearRect(0, 0, width, height);
      ctx.current.beginPath();
      ctx.current.lineWidth = lineWidth;
      ctx.current.strokeStyle = strokeStyle;
    }
  };
  useImperativeHandle(ref, () => ({
    confirm: () => {
      onSave();
    },
    clear: () => {
      handleClearBtn();
    }
  }));
  const initCanvas = () => {
    nextTick(() => {
      setTimeout(() => {
        if (getEnv() === "WEAPP" || getEnv() === "JD") {
          createSelectorQuery().select(`#${canvasId}`).fields({
            node: true,
            size: true
          }, (res) => {
            const { node, width, height } = res;
            canvasSetting(node, width, height);
          }).exec();
        } else {
          const canvasDom = document.getElementById(`${canvasId}`);
          let canvas = canvasDom;
          if ((canvasDom === null || canvasDom === void 0 ? void 0 : canvasDom.tagName) !== "CANVAS") {
            canvas = canvasDom === null || canvasDom === void 0 ? void 0 : canvasDom.getElementsByTagName("canvas")[0];
          }
          canvasSetting(canvas, canvasDom === null || canvasDom === void 0 ? void 0 : canvasDom.offsetWidth, canvasDom === null || canvasDom === void 0 ? void 0 : canvasDom.offsetHeight);
        }
      }, 1e3);
    });
  };
  useEffect(() => {
    initCanvas();
  }, []);
  return React__default.createElement(
    "div",
    Object.assign({ className: `${classPrefix} ${className}` }, rest),
    React__default.createElement("div", { className: `${classPrefix}-inner spcanvas_WEAPP`, ref: wrapRef }, getEnv() === "WEAPP" || getEnv() === "JD" ? React__default.createElement("canvas", {
      id: canvasId,
      ref: canvasRef,
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      canvasId,
      disalbeScroll: true,
      type: "2d",
      onTouchStart: startEventHandler,
      onTouchMove: moveEventHandler,
      onTouchEnd: endEventHandler
    }) : React__default.createElement("canvas", { id: canvasId, ref: canvasRef, "canvas-id": canvasId, "disalbe-scroll": disalbeScroll, onTouchStart: startEventHandler, onTouchMove: moveEventHandler, onTouchEnd: endEventHandler, onTouchCancel: endEventHandler }))
  );
};
const Signature = React__default.forwardRef(InternalSignature);
Signature.displayName = "NutSignature";
export {
  Signature as S
};