@vtx/components 2.3.4 → 2.4.0

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+# [2.4.0](https://git.cloudhw.cn:3443/front-end/react-components/compare/2.3.4...2.4.0) (2021-09-18)
+
+
+### ✨ Features
+
+* 新增VtxSignature签名组件 ([9019271](https://git.cloudhw.cn:3443/front-end/react-components/commit/9019271)) by: **gongjinhua**
+
+
+
 ## [2.3.4](https://git.cloudhw.cn:3443/front-end/react-components/compare/2.3.3...2.3.4) (2021-09-16)
 
 
@@ -6,6 +15,11 @@
 * 数据表格下拉框VtxCombogrid支持主动触发刷新接口数据 ([3c48177](https://git.cloudhw.cn:3443/front-end/react-components/commit/3c48177)) by: **gongjinhua**
 
 
+### 🎫 Chores
+
+* release v2.3.4 ([8822b97](https://git.cloudhw.cn:3443/front-end/react-components/commit/8822b97)) by: **gongjinhua**
+
+
 ### 🐛 Bug Fixes
 
 * 文本域VtxInput.TextArea修复设置默认值为null或undefined时已输入数显示错误的问题 ([4b5d294](https://git.cloudhw.cn:3443/front-end/react-components/commit/4b5d294)) by: **gongjinhua**

package/lib/vtx-signature/index.js

@@ -0,0 +1,124 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _signature_pad = _interopRequireDefault(require("signature_pad"));
+
+var _button = _interopRequireDefault(require("antd/es/button"));
+
+var _lodash = _interopRequireDefault(require("lodash.debounce"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var VtxSignature = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var canvasRef = (0, _react.useRef)();
+  var signaturePad = (0, _react.useRef)();
+  var dotSize = props.dotSize,
+      minWidth = props.minWidth,
+      maxWidth = props.maxWidth,
+      throttle = props.throttle,
+      minDistance = props.minDistance,
+      backgroundColor = props.backgroundColor,
+      penColor = props.penColor,
+      velocityFilterWeight = props.velocityFilterWeight,
+      onBegin = props.onBegin,
+      _onEnd = props.onEnd,
+      onChange = props.onChange;
+  (0, _react.useEffect)(function () {
+    signaturePad.current = new _signature_pad["default"](canvasRef.current, {
+      dotSize: dotSize,
+      minWidth: minWidth,
+      maxWidth: maxWidth,
+      throttle: throttle,
+      minDistance: minDistance,
+      backgroundColor: backgroundColor,
+      penColor: penColor,
+      velocityFilterWeight: velocityFilterWeight,
+      onBegin: onBegin,
+      onEnd: function onEnd() {
+        var dataUri = signaturePad.current.toDataURL();
+        var encodedImage = dataUri.split(',')[1];
+        onChange && onChange(encodedImage);
+        _onEnd && _onEnd();
+      }
+    });
+    resizeCanvas();
+    window.addEventListener('resize', (0, _lodash["default"])(resizeCanvas, 150));
+    return function () {
+      window.removeEventListener('resize', (0, _lodash["default"])(resizeCanvas, 150));
+    };
+  }, []);
+
+  function resizeCanvas() {
+    var ratio = Math.max(window.devicePixelRatio || 1, 1);
+    var canvas = canvasRef.current;
+
+    if (canvas) {
+      canvas.width = canvas.offsetWidth * ratio;
+      canvas.height = canvas.offsetHeight * ratio;
+      canvas.getContext('2d').scale(ratio, ratio);
+      clear();
+    }
+  } // 清空
+
+
+  var clear = function clear() {
+    signaturePad.current.clear();
+  }; // 撤销
+
+
+  var undo = function undo() {
+    var data = signaturePad.current.toData();
+
+    if (data) {
+      data.pop();
+      signaturePad.current.fromData(data);
+    }
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "vtx-signature",
+    ref: ref
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "vtx-signature--body"
+  }, /*#__PURE__*/_react["default"].createElement("canvas", {
+    ref: canvasRef
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "vtx-signature--footer"
+  }, /*#__PURE__*/_react["default"].createElement(_button["default"], {
+    size: "small",
+    onClick: clear
+  }, "\u6E05\u7A7A"), /*#__PURE__*/_react["default"].createElement(_button["default"], {
+    size: "small",
+    onClick: undo
+  }, "\u64A4\u9500")));
+});
+var _default = VtxSignature;
+exports["default"] = _default;
+VtxSignature.propTypes = {
+  dotSize: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].number]),
+  minWidth: _propTypes["default"].number,
+  maxWidth: _propTypes["default"].number,
+  throttle: _propTypes["default"].number,
+  minDistance: _propTypes["default"].number,
+  backgroundColor: _propTypes["default"].string,
+  penColor: _propTypes["default"].string,
+  velocityFilterWeight: _propTypes["default"].number,
+  onBegin: _propTypes["default"].func,
+  onEnd: _propTypes["default"].func,
+  onChange: _propTypes["default"].func
+};
+//# sourceMappingURL=index.js.map

package/lib/vtx-signature/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["vtx-signature/index.jsx"],"names":["VtxSignature","props","ref","canvasRef","signaturePad","dotSize","minWidth","maxWidth","throttle","minDistance","backgroundColor","penColor","velocityFilterWeight","onBegin","onEnd","onChange","current","SignaturePad","dataUri","toDataURL","encodedImage","split","resizeCanvas","window","addEventListener","removeEventListener","ratio","Math","max","devicePixelRatio","canvas","width","offsetWidth","height","offsetHeight","getContext","scale","clear","undo","data","toData","pop","fromData","propTypes","PropTypes","oneOfType","func","number","string"],"mappings":"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","sourcesContent":["import React, { forwardRef, useRef, useEffect } from 'react';\nimport SignaturePad from 'signature_pad';\nimport Button from 'antd/es/button';\nimport debounce from 'lodash.debounce';\nimport PropTypes from 'prop-types';\n\nconst VtxSignature = forwardRef((props, ref) => {\n    const canvasRef = useRef();\n    const signaturePad = useRef();\n    const {\n        dotSize,\n        minWidth,\n        maxWidth,\n        throttle,\n        minDistance,\n        backgroundColor,\n        penColor,\n        velocityFilterWeight,\n        onBegin,\n        onEnd,\n        onChange,\n    } = props;\n\n    useEffect(() => {\n        signaturePad.current = new SignaturePad(canvasRef.current, {\n            dotSize,\n            minWidth,\n            maxWidth,\n            throttle,\n            minDistance,\n            backgroundColor,\n            penColor,\n            velocityFilterWeight,\n            onBegin,\n            onEnd() {\n                const dataUri = signaturePad.current.toDataURL();\n                const encodedImage = dataUri.split(',')[1];\n\n                onChange && onChange(encodedImage);\n                onEnd && onEnd();\n            },\n        });\n        resizeCanvas();\n        window.addEventListener('resize', debounce(resizeCanvas, 150));\n        return () => {\n            window.removeEventListener('resize', debounce(resizeCanvas, 150));\n        };\n    }, []);\n\n    function resizeCanvas() {\n        const ratio = Math.max(window.devicePixelRatio || 1, 1);\n        const canvas = canvasRef.current;\n        if (canvas) {\n            canvas.width = canvas.offsetWidth * ratio;\n            canvas.height = canvas.offsetHeight * ratio;\n            canvas.getContext('2d').scale(ratio, ratio);\n            clear();\n        }\n    }\n\n    // 清空\n    const clear = () => {\n        signaturePad.current.clear();\n    };\n\n    // 撤销\n    const undo = () => {\n        const data = signaturePad.current.toData();\n        if (data) {\n            data.pop();\n            signaturePad.current.fromData(data);\n        }\n    };\n\n    return (\n        <div className=\"vtx-signature\" ref={ref}>\n            <div className=\"vtx-signature--body\">\n                <canvas ref={canvasRef} />\n            </div>\n            <div className=\"vtx-signature--footer\">\n                <Button size=\"small\" onClick={clear}>\n                    清空\n                </Button>\n                <Button size=\"small\" onClick={undo}>\n                    撤销\n                </Button>\n            </div>\n        </div>\n    );\n});\n\nexport default VtxSignature;\n\nVtxSignature.propTypes = {\n    dotSize: PropTypes.oneOfType([PropTypes.func, PropTypes.number]),\n    minWidth: PropTypes.number,\n    maxWidth: PropTypes.number,\n    throttle: PropTypes.number,\n    minDistance: PropTypes.number,\n    backgroundColor: PropTypes.string,\n    penColor: PropTypes.string,\n    velocityFilterWeight: PropTypes.number,\n    onBegin: PropTypes.func,\n    onEnd: PropTypes.func,\n    onChange: PropTypes.func,\n};\n"],"file":"index.js"}

package/lib/vtx-signature/style/css.js

@@ -0,0 +1,8 @@
+"use strict";
+
+require("antd/es/button/style/css");
+
+require("antd/es/message/style/css");
+
+require("./index.css");
+//# sourceMappingURL=css.js.map

package/lib/vtx-signature/style/css.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["vtx-signature/style/index.js"],"names":[],"mappings":";;AAAA;;AACA;;AACA","sourcesContent":["import 'antd/es/button/style/css';\nimport 'antd/es/message/style/css';\nimport './index.less';\n"],"file":"css.js"}

package/lib/vtx-signature/style/index.css

@@ -0,0 +1,35 @@
+.vtx-signature {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  height: 300px;
+  padding: 16px;
+  background-color: #fff;
+  border: 1px solid #f4f4f4;
+  border-radius: 4px;
+}
+.vtx-signature--body {
+  position: relative;
+  height: 100%;
+  border: 2px dotted #c1c1c1;
+}
+.vtx-signature--body canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+}
+.vtx-signature--footer {
+  margin-top: 8px;
+  line-height: 1;
+}
+.vtx-signature--footer button + button {
+  margin-left: 8px;
+}

package/lib/vtx-signature/style/index.js

@@ -0,0 +1,8 @@
+"use strict";
+
+require("antd/es/button/style/css");
+
+require("antd/es/message/style/css");
+
+require("./index.less");
+//# sourceMappingURL=index.js.map

package/lib/vtx-signature/style/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["vtx-signature/style/index.js"],"names":[],"mappings":";;AAAA;;AACA;;AACA","sourcesContent":["import 'antd/es/button/style/css';\nimport 'antd/es/message/style/css';\nimport './index.less';\n"],"file":"index.js"}

package/lib/vtx-signature/style/index.less

@@ -0,0 +1,32 @@
+@prefix-cls: vtx-signature;
+
+.@{prefix-cls} {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: 300px;
+    padding: 16px;
+    background-color: #fff;
+    border: 1px solid #f4f4f4;
+    border-radius: 4px;
+    &--body {
+        position: relative;
+        height: 100%;
+        border: 2px dotted #c1c1c1;
+        canvas {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border-radius: 4px;
+        }
+    }
+    &--footer {
+        margin-top: 8px;
+        line-height: 1;
+        button + button {
+            margin-left: 8px;
+        }
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtx/components",
-  "version": "2.3.4",
+  "version": "2.4.0",
   "description": "React components for Vortex",
   "keywords": [
     "react",
@@ -67,6 +67,7 @@
     "moment": "^2.29.1",
     "rc-color-picker": "^1.2.6",
     "react-resizable": "^1.11.1",
+    "signature_pad": "3.0.0-beta.4",
     "viewerjs": "1.3.3",
     "xgplayer": "2.18.3"
   },