@nutui/nutui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
169 lines (168 loc) • 7.15 kB
JavaScript
/* eslint-disable react/no-unknown-property */ 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, { useEffect, useImperativeHandle, useRef, useState } from "react";
import { getEnv, nextTick, createSelectorQuery, canvasToTempFilePath } from "@tarojs/taro";
import { Canvas, View } from "@tarojs/components";
import { ComponentDefaults } from "../../utils/typings";
var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
canvasId: 'spcanvas',
type: 'png',
lineWidth: 2,
strokeStyle: '#1A1A1A'
});
var InternalSignature = function(props, ref) {
var _ref = _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 = _object_without_properties(_ref, [
"canvasId",
"type",
"lineWidth",
"strokeStyle",
"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 _useState2 = _sliced_to_array(useState('true'), 1), disalbeScroll = _useState2[0];
var isSignedRef = useRef(false);
var startEventHandler = function(event) {
isSignedRef.current = true;
if (ctx.current) {
ctx.current.beginPath();
ctx.current.lineWidth = lineWidth;
ctx.current.strokeStyle = strokeStyle;
}
};
var moveEventHandler = function(event) {
if (ctx.current) {
var evt = event.changedTouches[0];
var mouseX = evt.x || evt.clientX;
var mouseY = evt.y || evt.clientY;
if (getEnv() === 'WEB' && canvasRef.current) {
var coverPos = canvasRef.current.getBoundingClientRect();
mouseX = evt.clientX - coverPos.left;
mouseY = evt.clientY - coverPos.top;
}
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(event) {};
var handleClearBtn = function() {
isSignedRef.current = false;
if (ctx.current) {
ctx.current.clearRect(0, 0, canvasWidth, canvasHeight);
ctx.current.closePath();
}
onClear && onClear();
};
var onSave = function() {
if (!isSignedRef.current) {
onConfirm && onConfirm('', isSignedRef.current);
return;
}
createSelectorQuery().select("#".concat(canvasId)).fields({
node: true,
size: true
}).exec(function(res) {
canvasToTempFilePath({
canvas: res[0].node,
fileType: type,
canvasId: "".concat(canvasId),
success: function(res) {
onConfirm && onConfirm(res.tempFilePath, isSignedRef.current);
},
fail: function(res) {
console.warn('保存失败', res);
}
});
});
};
var canvasSetting = function(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;
}
};
useImperativeHandle(ref, function() {
return {
confirm: function() {
onSave();
},
clear: function() {
handleClearBtn();
}
};
});
var initCanvas = function() {
nextTick(function() {
setTimeout(function() {
if (getEnv() === 'WEAPP' || getEnv() === 'JD') {
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);
});
};
useEffect(function() {
initCanvas();
}, []);
return /*#__PURE__*/ React.createElement(View, _object_spread({
className: "".concat(classPrefix, " ").concat(className)
}, rest), /*#__PURE__*/ React.createElement(View, {
className: "".concat(classPrefix, "-inner spcanvas_WEAPP"),
ref: wrapRef
}, getEnv() === 'WEAPP' || getEnv() === 'JD' ? /*#__PURE__*/ React.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.createElement(Canvas, {
id: canvasId,
ref: canvasRef,
"canvas-id": canvasId,
"disalbe-scroll": disalbeScroll,
onTouchStart: startEventHandler,
onTouchMove: moveEventHandler,
onTouchEnd: endEventHandler,
onTouchCancel: endEventHandler
})));
};
export var Signature = /*#__PURE__*/ React.forwardRef(InternalSignature);
Signature.displayName = 'NutSignature';