gui-one-nutui-react-taro/dist/esm/signature.taro-6589435b.js

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

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["canvasId", "type", "lineWidth", "strokeStyle", "unSupportTpl", "className", "confirm", "clear", "onConfirm", "onClear"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
import React__default, { useRef, useState } from 'react';
import Taro, { useReady } from '@tarojs/taro';
import { B as Button } from './button.taro-4ce133b9.js';
import { c as cn } from './bem-893ad28d.js';
import { u as useConfig } from './configprovider.taro-6c7b3056.js';
var defaultProps = {
  canvasId: 'weappCanvas',
  type: 'png',
  lineWidth: 2,
  strokeStyle: '#000',
  className: ''
};
var Signature = function Signature(props) {
  var _useConfig = useConfig(),
    locale = _useConfig.locale;
  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
    canvasId = _defaultProps$props.canvasId,
    type = _defaultProps$props.type,
    lineWidth = _defaultProps$props.lineWidth,
    strokeStyle = _defaultProps$props.strokeStyle,
    unSupportTpl = _defaultProps$props.unSupportTpl,
    className = _defaultProps$props.className,
    confirm = _defaultProps$props.confirm,
    clear = _defaultProps$props.clear,
    onConfirm = _defaultProps$props.onConfirm,
    onClear = _defaultProps$props.onClear,
    rest = _objectWithoutProperties(_defaultProps$props, _excluded);
  var b = cn('signature');
  useRef(null);
  var wrapRef = useRef(null);
  var _useState = useState(0),
    _useState2 = _slicedToArray(_useState, 2),
    canvasHeight = _useState2[0],
    setCanvasHeight = _useState2[1];
  var _useState3 = useState(0),
    _useState4 = _slicedToArray(_useState3, 2),
    canvasWidth = _useState4[0],
    setCanvasWidth = _useState4[1];
  var ctx = useRef(null);
  var startEventHandler = function startEventHandler(event) {
    event.preventDefault();
    if (ctx.current) {
      ctx.current.beginPath();
      ctx.current.lineWidth = lineWidth;
      ctx.current.strokeStyle = strokeStyle;
    }
  };
  var moveEventHandler = function moveEventHandler(event) {
    event.preventDefault();
    if (ctx.current) {
      ctx.current.lineTo(event.changedTouches[0].x, event.changedTouches[0].y);
      ctx.current.stroke();
    }
  };
  var endEventHandler = function endEventHandler(event) {
    event.preventDefault();
  };
  var handleClearBtn = function handleClearBtn() {
    if (ctx.current) {
      ctx.current.clearRect(0, 0, canvasWidth, canvasHeight);
      ctx.current.closePath();
    }
    clear && clear();
    onClear && onClear();
  };
  var handleConfirmBtn = function handleConfirmBtn() {
    onSave();
  };
  var onSave = function onSave() {
    Taro.createSelectorQuery().select("#".concat(canvasId)).fields({
      node: true,
      size: true
    }).exec(function (res) {
      Taro.canvasToTempFilePath({
        canvas: res[0].node,
        fileType: props.type,
        success: function success(res) {
          handleClearBtn();
          confirm && confirm(res.tempFilePath);
          onConfirm && onConfirm(res.tempFilePath);
        },
        fail: function fail(res) {
          console.log('保存失败');
        }
      });
    });
  };
  useReady(function () {
    initCanvas();
  });
  //   useEffect(() => {
  //     eventCenter.once((getCurrentInstanceTaro() as any).router.onReady, () => {
  var initCanvas = function initCanvas() {
    Taro.createSelectorQuery().select("#".concat(canvasId)).fields({
      node: true,
      size: true
    }, function (res) {
      var canvas = res.node;
      canvas.current = canvas;
      ctx.current = canvas.getContext('2d');
      setCanvasWidth(res.width);
      setCanvasHeight(res.height);
      if (ctx.current) {
        ctx.current.clearRect(0, 0, canvasWidth, canvasHeight);
        ctx.current.beginPath();
        ctx.current.lineWidth = lineWidth;
        ctx.current.strokeStyle = strokeStyle;
      }
    }).exec();
  };
  //     })
  //   }, [])
  return React__default.createElement("div", _objectSpread({
    className: "".concat(b(), " ").concat(className)
  }, rest), React__default.createElement("div", {
    className: "".concat(b('inner')),
    ref: wrapRef
  }, React__default.createElement("canvas", {
    id: canvasId,
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    // eslint-disable-next-line react/no-unknown-property
    canvasId: canvasId,
    // eslint-disable-next-line react/no-unknown-property
    disableScroll: true,
    type: "2d",
    onTouchStart: startEventHandler,
    onTouchMove: moveEventHandler,
    onTouchEnd: endEventHandler
  })), React__default.createElement(Button, {
    className: "".concat(b('btn')),
    type: "default",
    onClick: function onClick() {
      return handleClearBtn();
    }
  }, locale.signature.reSign), React__default.createElement(Button, {
    className: "".concat(b('btn')),
    type: "primary",
    onClick: function onClick() {
      return handleConfirmBtn();
    }
  }, locale.confirm));
};
Signature.defaultProps = defaultProps;
Signature.displayName = 'NutSignature';
export { Signature as S };