@nutui/nutui-react/dist/es/packages/signature/signature.js

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

import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import React, { useRef, useState, useEffect, useImperativeHandle } from "react";
import { useConfig } from "../configprovider";
import { ComponentDefaults } from "../../utils/typings";
import { canUseDom } from "../../utils/can-use-dom";
var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
    type: 'png',
    lineWidth: 2,
    strokeStyle: '#1A1A1A',
    unsupported: ''
});
var InternalSignature = function(props, ref) {
    var locale = useConfig().locale;
    var _ref = _object_spread({}, defaultProps, props), type = _ref.type, lineWidth = _ref.lineWidth, strokeStyle = _ref.strokeStyle, unsupported = _ref.unsupported, className = _ref.className, style = _ref.style, onConfirm = _ref.onConfirm, onClear = _ref.onClear, rest = _object_without_properties(_ref, [
        "type",
        "lineWidth",
        "strokeStyle",
        "unsupported",
        "className",
        "style",
        "onConfirm",
        "onClear"
    ]);
    var classPrefix = "nut-signature";
    var canvasRef = useRef(null);
    var wrapRef = useRef(null);
    var _useState = _sliced_to_array(useState(0), 2), canvasHeight = _useState[0], setCanvasHeight = _useState[1];
    var _useState1 = _sliced_to_array(useState(0), 2), canvasWidth = _useState1[0], setCanvasWidth = _useState1[1];
    var ctx = useRef(null);
    var checkCanvas = function() {
        var elem = document.createElement('canvas');
        return !!(elem.getContext && elem.getContext('2d'));
    };
    var _useState2 = _sliced_to_array(useState(false), 2), isCanvasSupported = _useState2[0], setIsCanvasSupported = _useState2[1];
    var isSignedRef = useRef(false);
    var isSupportTouch = canUseDom ? 'ontouchstart' in window : false;
    var events = isSupportTouch ? [
        'touchstart',
        'touchmove',
        'touchend',
        'touchleave'
    ] : [
        'mousedown',
        'mousemove',
        'mouseup',
        'mouseleave'
    ];
    useEffect(function() {
        setIsCanvasSupported(checkCanvas);
    }, []);
    useEffect(function() {
        if (isCanvasSupported && canvasRef.current && wrapRef.current) {
            ctx.current = canvasRef.current.getContext('2d');
            setCanvasWidth(wrapRef.current.offsetWidth);
            setCanvasHeight(wrapRef.current.offsetHeight);
            addEvent();
        }
    }, [
        isCanvasSupported
    ]);
    var startEventHandler = function(event) {
        event.preventDefault();
        isSignedRef.current = true;
        if (ctx.current && canvasRef.current) {
            ctx.current.beginPath();
            ctx.current.lineWidth = lineWidth;
            ctx.current.strokeStyle = strokeStyle;
            canvasRef.current.addEventListener(events[1], moveEventHandler, false);
            canvasRef.current.addEventListener(events[2], endEventHandler, false);
            canvasRef.current.addEventListener(events[3], leaveEventHandler, false);
        }
    };
    var addEvent = function() {
        if (canvasRef.current) {
            canvasRef.current.addEventListener(events[0], startEventHandler, false);
        }
    };
    var moveEventHandler = function(event) {
        event.preventDefault();
        var evt = isSupportTouch ? event.touches[0] : event;
        if (canvasRef.current && ctx.current) {
            var coverPos = canvasRef.current.getBoundingClientRect();
            var mouseX = evt.clientX - coverPos.left;
            var mouseY = evt.clientY - coverPos.top;
            ctx.current.lineTo(mouseX, mouseY);
            ctx.current.stroke();
        }
    };
    var endEventHandler = function(event) {
        event.preventDefault();
        if (canvasRef.current) {
            canvasRef.current.removeEventListener(events[1], moveEventHandler, false);
            canvasRef.current.removeEventListener(events[2], endEventHandler, false);
        }
    };
    var leaveEventHandler = function(event) {
        event.preventDefault();
        if (canvasRef.current) {
            canvasRef.current.removeEventListener(events[1], moveEventHandler, false);
            canvasRef.current.removeEventListener(events[2], endEventHandler, false);
        }
    };
    var handleClearBtn = function() {
        isSignedRef.current = false;
        if (canvasRef.current && ctx.current) {
            canvasRef.current.addEventListener(events[2], endEventHandler, false);
            ctx.current.clearRect(0, 0, canvasWidth, canvasHeight);
            ctx.current.closePath();
        }
        onClear && onClear();
    };
    var onSave = function(canvas) {
        var dataurl = '';
        if (!isSignedRef.current) {
            onConfirm && onConfirm(canvas, dataurl, isSignedRef.current);
            return;
        }
        switch(type){
            case 'png':
                dataurl = canvas.toDataURL('image/png');
                break;
            case 'jpg':
                dataurl = canvas.toDataURL('image/jpeg', 0.8);
                break;
            default:
                dataurl = canvas.toDataURL('image/png');
        }
        onConfirm && onConfirm(canvas, dataurl, isSignedRef.current);
    };
    useImperativeHandle(ref, function() {
        return {
            confirm: function() {
                onSave(canvasRef.current);
            },
            clear: function() {
                handleClearBtn();
            }
        };
    });
    return /*#__PURE__*/ React.createElement("div", _object_spread({
        className: "".concat(classPrefix, " ").concat(className),
        style: style
    }, rest), /*#__PURE__*/ React.createElement("div", {
        className: "".concat(classPrefix, "-inner"),
        ref: wrapRef
    }, /*#__PURE__*/ React.createElement(React.Fragment, null, isCanvasSupported ? /*#__PURE__*/ React.createElement("canvas", {
        ref: canvasRef,
        height: canvasHeight,
        width: canvasWidth
    }) : unsupported ? /*#__PURE__*/ React.createElement(React.Fragment, null, unsupported) : /*#__PURE__*/ React.createElement("p", {
        className: "".concat(classPrefix, "-unsupport")
    }, locale.signature.unsupported))));
};
export var Signature = /*#__PURE__*/ React.forwardRef(InternalSignature);
Signature.displayName = 'NutSignature';