@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
170 lines (169 loc) • 7.24 kB
JavaScript
;
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 _configprovider = require("../configprovider");
var _typings = require("../../utils/typings");
var _canusedom = require("../../utils/can-use-dom");
var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
type: 'png',
lineWidth: 2,
strokeStyle: '#1A1A1A',
unsupported: ''
});
var InternalSignature = function InternalSignature(props, ref) {
var locale = (0, _configprovider.useConfig)().locale;
var _ref = (0, _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 = (0, _object_without_properties._)(_ref, [
"type",
"lineWidth",
"strokeStyle",
"unsupported",
"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 checkCanvas = function checkCanvas() {
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
};
var _useState2 = (0, _sliced_to_array._)((0, _react.useState)(false), 2), isCanvasSupported = _useState2[0], setIsCanvasSupported = _useState2[1];
var isSignedRef = (0, _react.useRef)(false);
var isSupportTouch = _canusedom.canUseDom ? 'ontouchstart' in window : false;
var events = isSupportTouch ? [
'touchstart',
'touchmove',
'touchend',
'touchleave'
] : [
'mousedown',
'mousemove',
'mouseup',
'mouseleave'
];
(0, _react.useEffect)(function() {
setIsCanvasSupported(checkCanvas);
}, []);
(0, _react.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 startEventHandler(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 addEvent() {
if (canvasRef.current) {
canvasRef.current.addEventListener(events[0], startEventHandler, false);
}
};
var moveEventHandler = function moveEventHandler(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 endEventHandler1(event) {
event.preventDefault();
if (canvasRef.current) {
canvasRef.current.removeEventListener(events[1], moveEventHandler, false);
canvasRef.current.removeEventListener(events[2], endEventHandler, false);
}
};
var leaveEventHandler = function leaveEventHandler(event) {
event.preventDefault();
if (canvasRef.current) {
canvasRef.current.removeEventListener(events[1], moveEventHandler, false);
canvasRef.current.removeEventListener(events[2], endEventHandler, false);
}
};
var handleClearBtn = function handleClearBtn() {
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 onSave(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);
};
(0, _react.useImperativeHandle)(ref, function() {
return {
confirm: function confirm() {
onSave(canvasRef.current);
},
clear: function clear() {
handleClearBtn();
}
};
});
return /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread._)({
className: "".concat(classPrefix, " ").concat(className),
style: style
}, rest), /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-inner"),
ref: wrapRef
}, /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, isCanvasSupported ? /*#__PURE__*/ _react.default.createElement("canvas", {
ref: canvasRef,
height: canvasHeight,
width: canvasWidth
}) : unsupported ? /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, unsupported) : /*#__PURE__*/ _react.default.createElement("p", {
className: "".concat(classPrefix, "-unsupport")
}, locale.signature.unsupported))));
};
var Signature = /*#__PURE__*/ _react.default.forwardRef(InternalSignature);
Signature.displayName = 'NutSignature';