@nutui/nutui-react-taro/dist/cjs/packages/signature/signature.js

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

/* eslint-disable react/no-unknown-property */ "use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "Signature", {
    enumerable: true,
    get: function() {
        return Signature;
    }
});
var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
var _taro = require("@tarojs/taro");
var _components = require("@tarojs/components");
var _typings = require("../../utils/typings");
var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
    canvasId: 'spcanvas',
    type: 'png',
    lineWidth: 2,
    strokeStyle: '#1A1A1A'
});
var InternalSignature = function InternalSignature(props, ref) {
    var _ref = (0, _object_spread._)({}, defaultProps, props), canvasId = _ref.canvasId, type = _ref.type, lineWidth = _ref.lineWidth, strokeStyle = _ref.strokeStyle, className = _ref.className, style = _ref.style, onConfirm = _ref.onConfirm, onClear = _ref.onClear, rest = (0, _object_without_properties._)(_ref, [
        "canvasId",
        "type",
        "lineWidth",
        "strokeStyle",
        "className",
        "style",
        "onConfirm",
        "onClear"
    ]);
    var classPrefix = "nut-signature";
    var canvasRef = (0, _react.useRef)(null);
    var wrapRef = (0, _react.useRef)(null);
    var _useState = (0, _sliced_to_array._)((0, _react.useState)(0), 2), canvasHeight = _useState[0], setCanvasHeight = _useState[1];
    var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), canvasWidth = _useState1[0], setCanvasWidth = _useState1[1];
    var ctx = (0, _react.useRef)(null);
    var _useState2 = (0, _sliced_to_array._)((0, _react.useState)('true'), 1), disalbeScroll = _useState2[0];
    var isSignedRef = (0, _react.useRef)(false);
    var startEventHandler = function startEventHandler(event) {
        isSignedRef.current = true;
        if (ctx.current) {
            ctx.current.beginPath();
            ctx.current.lineWidth = lineWidth;
            ctx.current.strokeStyle = strokeStyle;
        }
    };
    var moveEventHandler = function moveEventHandler(event) {
        if (ctx.current) {
            var evt = event.changedTouches[0];
            var mouseX = evt.x || evt.clientX;
            var mouseY = evt.y || evt.clientY;
            if ((0, _taro.getEnv)() === 'WEB' && canvasRef.current) {
                var coverPos = canvasRef.current.getBoundingClientRect();
                mouseX = evt.clientX - coverPos.left;
                mouseY = evt.clientY - coverPos.top;
            }
            (0, _taro.nextTick)(function() {
                var _ctx_current, _ctx_current1;
                (_ctx_current = ctx.current) === null || _ctx_current === void 0 ? void 0 : _ctx_current.lineTo(mouseX, mouseY);
                (_ctx_current1 = ctx.current) === null || _ctx_current1 === void 0 ? void 0 : _ctx_current1.stroke();
            });
        }
    };
    var endEventHandler = function endEventHandler(event) {};
    var handleClearBtn = function handleClearBtn() {
        isSignedRef.current = false;
        if (ctx.current) {
            ctx.current.clearRect(0, 0, canvasWidth, canvasHeight);
            ctx.current.closePath();
        }
        onClear && onClear();
    };
    var onSave = function onSave() {
        if (!isSignedRef.current) {
            onConfirm && onConfirm('', isSignedRef.current);
            return;
        }
        (0, _taro.createSelectorQuery)().select("#".concat(canvasId)).fields({
            node: true,
            size: true
        }).exec(function(res) {
            (0, _taro.canvasToTempFilePath)({
                canvas: res[0].node,
                fileType: type,
                canvasId: "".concat(canvasId),
                success: function success(res) {
                    onConfirm && onConfirm(res.tempFilePath, isSignedRef.current);
                },
                fail: function fail(res) {
                    console.warn('保存失败', res);
                }
            });
        });
    };
    var canvasSetting = function canvasSetting(canvasDom, width, height) {
        var 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;
        }
    };
    (0, _react.useImperativeHandle)(ref, function() {
        return {
            confirm: function confirm() {
                onSave();
            },
            clear: function clear() {
                handleClearBtn();
            }
        };
    });
    var initCanvas = function initCanvas() {
        (0, _taro.nextTick)(function() {
            setTimeout(function() {
                if ((0, _taro.getEnv)() === 'WEAPP' || (0, _taro.getEnv)() === 'JD') {
                    (0, _taro.createSelectorQuery)().select("#".concat(canvasId)).fields({
                        node: true,
                        size: true
                    }, function(res) {
                        var node = res.node, width = res.width, height = res.height;
                        canvasSetting(node, width, height);
                    }).exec();
                } else {
                    var canvasDom = document.getElementById("".concat(canvasId));
                    var 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);
                }
            }, 1000);
        });
    };
    (0, _react.useEffect)(function() {
        initCanvas();
    }, []);
    return /*#__PURE__*/ _react.default.createElement(_components.View, (0, _object_spread._)({
        className: "".concat(classPrefix, " ").concat(className)
    }, rest), /*#__PURE__*/ _react.default.createElement(_components.View, {
        className: "".concat(classPrefix, "-inner spcanvas_WEAPP"),
        ref: wrapRef
    }, (0, _taro.getEnv)() === 'WEAPP' || (0, _taro.getEnv)() === 'JD' ? /*#__PURE__*/ _react.default.createElement("canvas", {
        id: canvasId,
        ref: canvasRef,
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        canvasId: canvasId,
        disalbeScroll: true,
        type: "2d",
        onTouchStart: startEventHandler,
        onTouchMove: moveEventHandler,
        onTouchEnd: endEventHandler
    }) : /*#__PURE__*/ _react.default.createElement(_components.Canvas, {
        id: canvasId,
        ref: canvasRef,
        "canvas-id": canvasId,
        "disalbe-scroll": disalbeScroll,
        onTouchStart: startEventHandler,
        onTouchMove: moveEventHandler,
        onTouchEnd: endEventHandler,
        onTouchCancel: endEventHandler
    })));
};
var Signature = /*#__PURE__*/ _react.default.forwardRef(InternalSignature);
Signature.displayName = 'NutSignature';