@vortex-ui/env-puzzle 2.0.0-beta.9 → 3.0.0-beta.2

package/lib/percent/line-percent.js

@@ -1,47 +1,37 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var LinePercenet = function LinePercenet(props) {
   var title = props.title,
-      value = props.value,
-      suffix = props.suffix,
-      lineWidth = props.lineWidth,
-      className = props.className,
-      style = props.style,
-      _props$all = props.all,
-      all = _props$all === void 0 ? 100 : _props$all;
+    value = props.value,
+    suffix = props.suffix,
+    lineWidth = props.lineWidth,
+    className = props.className,
+    style = props.style,
+    _props$all = props.all,
+    all = _props$all === void 0 ? 100 : _props$all;
   var wrapRef = (0, _react.useRef)(null);
   var canvasRef = (0, _react.useRef)(null);
-
   _react["default"].useEffect(function () {
     if (!wrapRef.current || !canvasRef.current) {
       return;
     }
-
     var canvasWidth = wrapRef.current.clientWidth;
     var canvasHeight = wrapRef.current.clientHeight;
     canvasRef.current.width = canvasWidth;
     canvasRef.current.height = canvasHeight;
-    var ctx = canvasRef.current.getContext('2d'); // 擦除
-
-    ctx.clearRect(0, 0, canvasWidth, canvasHeight); // render base line
-
+    var ctx = canvasRef.current.getContext('2d');
+    // 擦除
+    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+    // render base line
     var lineHeight = 10;
     var topLeftPointX = 5;
     var topLeftPointY = canvasHeight - lineHeight;
@@ -55,13 +45,11 @@ var LinePercenet = function LinePercenet(props) {
     ctx.fill();
     var itemColLength = 10;
     var itemColPadding = 5; // 每个小柱子的间距
-
     var totalCol = Math.floor(canvasWidth / (itemColLength + itemColPadding)) - 1;
     var perValue = all / totalCol;
     var activeValueCount = Math.floor(value / perValue);
     var i = 0;
-
-    var renderItemCol = function renderItemCol() {
+    var _renderItemCol = function renderItemCol() {
       if (i < activeValueCount) {
         ctx.beginPath();
         var tilt = 12;
@@ -75,25 +63,22 @@ var LinePercenet = function LinePercenet(props) {
         ctx.fillStyle = "rgba(70, 181, 192, ".concat(i / activeValueCount / 2 + 0.5, ")");
         ctx.fill();
         setTimeout(function () {
-          renderItemCol();
+          _renderItemCol();
         }, 100);
       }
-
       i += 1;
     };
-
-    renderItemCol();
+    _renderItemCol();
   }, [value]);
-
   return /*#__PURE__*/_react["default"].createElement("div", {
     style: style,
     className: (0, _classnames["default"])(className, 'env-percent-line')
-  }, title && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+  }, title && (/*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
     className: "env-percent-line__name"
   }, title), /*#__PURE__*/_react["default"].createElement("img", {
     className: "env-percent-line__arrow",
     src: require('./images/icon-arrow.png')
-  })), /*#__PURE__*/_react["default"].createElement("div", {
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
     ref: wrapRef,
     style: {
       width: lineWidth
@@ -105,10 +90,8 @@ var LinePercenet = function LinePercenet(props) {
     className: "env-percent-line__suffix"
   }, suffix));
 };
-
 LinePercenet.defaultProps = {
   lineWidth: 300
 };
-var _default = LinePercenet;
-exports["default"] = _default;
+var _default = exports["default"] = LinePercenet;
 //# sourceMappingURL=line-percent.js.map

package/lib/percent/line-percent.js.map

@@ -1 +1 @@
-{"version":3,"file":"line-percent.js","names":["LinePercenet","props","title","value","suffix","lineWidth","className","style","all","wrapRef","useRef","canvasRef","React","useEffect","current","canvasWidth","clientWidth","canvasHeight","clientHeight","width","height","ctx","getContext","clearRect","lineHeight","topLeftPointX","topLeftPointY","lineLength","moveTo","lineTo","closePath","fillStyle","fill","itemColLength","itemColPadding","totalCol","Math","floor","perValue","activeValueCount","i","renderItemCol","beginPath","tilt","itemTopLeftPointX","itemTopLeftPointY","setTimeout","createElement","classnames","Fragment","src","require","ref","defaultProps"],"sources":["percent/line-percent.js"],"sourcesContent":["import React, { useRef } from 'react';\nimport classnames from 'classnames';\nconst LinePercenet = (props) => {\n    const { title, value, suffix, lineWidth, className, style, all = 100, } = props;\n    const wrapRef = useRef(null);\n    const canvasRef = useRef(null);\n    React.useEffect(() => {\n        if (!wrapRef.current || !canvasRef.current) {\n            return;\n        }\n        const canvasWidth = wrapRef.current.clientWidth;\n        const canvasHeight = wrapRef.current.clientHeight;\n        canvasRef.current.width = canvasWidth;\n        canvasRef.current.height = canvasHeight;\n        const ctx = canvasRef.current.getContext('2d');\n        // 擦除\n        ctx.clearRect(0, 0, canvasWidth, canvasHeight);\n        // render base line\n        const lineHeight = 10;\n        const topLeftPointX = 5;\n        const topLeftPointY = canvasHeight - lineHeight;\n        const lineLength = canvasWidth - topLeftPointX - 20;\n        ctx.moveTo(topLeftPointX, topLeftPointY);\n        ctx.lineTo(topLeftPointX + lineLength, topLeftPointY);\n        ctx.lineTo(lineLength, topLeftPointY + lineHeight);\n        ctx.lineTo(0, topLeftPointY + lineHeight);\n        ctx.closePath();\n        ctx.fillStyle = 'rgba(22, 61, 92, 1)';\n        ctx.fill();\n        const itemColLength = 10;\n        const itemColPadding = 5; // 每个小柱子的间距\n        const totalCol = Math.floor(canvasWidth / (itemColLength + itemColPadding)) - 1;\n        const perValue = all / totalCol;\n        const activeValueCount = Math.floor(value / perValue);\n        let i = 0;\n        const renderItemCol = () => {\n            if (i < activeValueCount) {\n                ctx.beginPath();\n                const tilt = 12;\n                const itemTopLeftPointX = i * (itemColLength + itemColPadding) + tilt;\n                const itemTopLeftPointY = 0;\n                ctx.moveTo(itemTopLeftPointX, itemTopLeftPointY);\n                ctx.lineTo(itemTopLeftPointX + itemColLength, itemTopLeftPointY);\n                ctx.lineTo(itemTopLeftPointX + itemColLength - tilt, canvasHeight);\n                ctx.lineTo(itemTopLeftPointX - tilt, canvasHeight);\n                ctx.closePath();\n                ctx.fillStyle = `rgba(70, 181, 192, ${i / activeValueCount / 2 + 0.5})`;\n                ctx.fill();\n                setTimeout(() => {\n                    renderItemCol();\n                }, 100);\n            }\n            i += 1;\n        };\n        renderItemCol();\n    }, [value]);\n    return (React.createElement(\"div\", { style: style, className: classnames(className, 'env-percent-line') },\n        title && (React.createElement(React.Fragment, null,\n            React.createElement(\"div\", { className: \"env-percent-line__name\" }, title),\n            React.createElement(\"img\", { className: \"env-percent-line__arrow\", src: require('./images/icon-arrow.png') }))),\n        React.createElement(\"div\", { ref: wrapRef, style: { width: lineWidth }, className: \"env-percent-line__value\" },\n            React.createElement(\"canvas\", { ref: canvasRef })),\n        suffix && React.createElement(\"div\", { className: \"env-percent-line__suffix\" }, suffix)));\n};\nLinePercenet.defaultProps = {\n    lineWidth: 300,\n};\nexport default LinePercenet;\n"],"mappings":"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"}
+{"version":3,"file":"line-percent.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","e","__esModule","t","WeakMap","r","n","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","LinePercenet","props","title","value","suffix","lineWidth","className","style","_props$all","all","wrapRef","useRef","canvasRef","React","useEffect","current","canvasWidth","clientWidth","canvasHeight","clientHeight","width","height","ctx","getContext","clearRect","lineHeight","topLeftPointX","topLeftPointY","lineLength","moveTo","lineTo","closePath","fillStyle","fill","itemColLength","itemColPadding","totalCol","Math","floor","perValue","activeValueCount","renderItemCol","beginPath","tilt","itemTopLeftPointX","itemTopLeftPointY","concat","setTimeout","createElement","classnames","Fragment","src","ref","defaultProps","_default","exports"],"sources":["percent/line-percent.js"],"sourcesContent":["import React, { useRef } from 'react';\nimport classnames from 'classnames';\nconst LinePercenet = (props) => {\n    const { title, value, suffix, lineWidth, className, style, all = 100, } = props;\n    const wrapRef = useRef(null);\n    const canvasRef = useRef(null);\n    React.useEffect(() => {\n        if (!wrapRef.current || !canvasRef.current) {\n            return;\n        }\n        const canvasWidth = wrapRef.current.clientWidth;\n        const canvasHeight = wrapRef.current.clientHeight;\n        canvasRef.current.width = canvasWidth;\n        canvasRef.current.height = canvasHeight;\n        const ctx = canvasRef.current.getContext('2d');\n        // 擦除\n        ctx.clearRect(0, 0, canvasWidth, canvasHeight);\n        // render base line\n        const lineHeight = 10;\n        const topLeftPointX = 5;\n        const topLeftPointY = canvasHeight - lineHeight;\n        const lineLength = canvasWidth - topLeftPointX - 20;\n        ctx.moveTo(topLeftPointX, topLeftPointY);\n        ctx.lineTo(topLeftPointX + lineLength, topLeftPointY);\n        ctx.lineTo(lineLength, topLeftPointY + lineHeight);\n        ctx.lineTo(0, topLeftPointY + lineHeight);\n        ctx.closePath();\n        ctx.fillStyle = 'rgba(22, 61, 92, 1)';\n        ctx.fill();\n        const itemColLength = 10;\n        const itemColPadding = 5; // 每个小柱子的间距\n        const totalCol = Math.floor(canvasWidth / (itemColLength + itemColPadding)) - 1;\n        const perValue = all / totalCol;\n        const activeValueCount = Math.floor(value / perValue);\n        let i = 0;\n        const renderItemCol = () => {\n            if (i < activeValueCount) {\n                ctx.beginPath();\n                const tilt = 12;\n                const itemTopLeftPointX = i * (itemColLength + itemColPadding) + tilt;\n                const itemTopLeftPointY = 0;\n                ctx.moveTo(itemTopLeftPointX, itemTopLeftPointY);\n                ctx.lineTo(itemTopLeftPointX + itemColLength, itemTopLeftPointY);\n                ctx.lineTo(itemTopLeftPointX + itemColLength - tilt, canvasHeight);\n                ctx.lineTo(itemTopLeftPointX - tilt, canvasHeight);\n                ctx.closePath();\n                ctx.fillStyle = `rgba(70, 181, 192, ${i / activeValueCount / 2 + 0.5})`;\n                ctx.fill();\n                setTimeout(() => {\n                    renderItemCol();\n                }, 100);\n            }\n            i += 1;\n        };\n        renderItemCol();\n    }, [value]);\n    return (React.createElement(\"div\", { style: style, className: classnames(className, 'env-percent-line') },\n        title && (React.createElement(React.Fragment, null,\n            React.createElement(\"div\", { className: \"env-percent-line__name\" }, title),\n            React.createElement(\"img\", { className: \"env-percent-line__arrow\", src: require('./images/icon-arrow.png') }))),\n        React.createElement(\"div\", { ref: wrapRef, style: { width: lineWidth }, className: \"env-percent-line__value\" },\n            React.createElement(\"canvas\", { ref: canvasRef })),\n        suffix && React.createElement(\"div\", { className: \"env-percent-line__suffix\" }, suffix)));\n};\nLinePercenet.defaultProps = {\n    lineWidth: 300,\n};\nexport default LinePercenet;\n"],"mappings":"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","ignoreList":[]}

package/lib/percent/percent.js

@@ -1,35 +1,26 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var React = _interopRequireWildcard(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var THEME_COLOR = '#4EF6FC';
-
 var Percent = function Percent(props) {
   var wrapRef = React.useRef(null);
   var canvasRef = React.useRef(null);
   var realValue = props.value,
-      title = props.title,
-      style = props.style,
-      className = props.className,
-      _props$unit = props.unit,
-      unit = _props$unit === void 0 ? '%' : _props$unit,
-      _props$all = props.all,
-      all = _props$all === void 0 ? 100 : _props$all;
+    title = props.title,
+    style = props.style,
+    className = props.className,
+    _props$unit = props.unit,
+    unit = _props$unit === void 0 ? '%' : _props$unit,
+    _props$all = props.all,
+    all = _props$all === void 0 ? 100 : _props$all;
   var value = realValue;
   value < 0 && (value = 0);
   value > all && (value = all);
@@ -37,40 +28,34 @@ var Percent = function Percent(props) {
     if (!canvasRef) {
       return;
     }
-
     var canvasWidth = wrapRef.current.clientWidth;
     var canvasHeight = wrapRef.current.clientHeight;
     var current = canvasRef.current;
     var ctx = canvasRef.current.getContext('2d');
     current.width = canvasWidth;
-    current.height = canvasHeight; // 擦除
-
+    current.height = canvasHeight;
+    // 擦除
     ctx.clearRect(0, 0, canvasWidth, canvasHeight);
     var padding = canvasWidth * 0.05; // 距离上下左右的距离;
-
     var maxRadius = (canvasWidth - 2 * padding) / 2; // 最大可使用半径
-
     var pointLength = 10; // 圆弧边上柱子的长度
-
     var clearance = canvasWidth * 0.1; // 两个圆之间的间隙
-
     var innerRadius = maxRadius - pointLength - clearance;
     var circleCenterX = canvasWidth / 2;
-    var circleCenterY = maxRadius + padding; // 渲染内部圆弧
-
+    var circleCenterY = maxRadius + padding;
+    // 渲染内部圆弧
     ctx.arc(circleCenterX, circleCenterY, innerRadius, Math.PI, 0);
     ctx.lineWidth = 4;
     ctx.strokeStyle = THEME_COLOR;
     ctx.shadowColor = THEME_COLOR;
     ctx.shadowOffsetY = -3;
     ctx.shadowBlur = 8;
-    ctx.stroke(); // 渲染边上的柱子
-
+    ctx.stroke();
+    // 渲染边上的柱子
     var total = 30;
     var angle = Math.PI / total;
     var perValue = all / total;
     var activeCount = Math.floor(value / perValue);
-
     var renderColumn = function renderColumn(i, color) {
       ctx.beginPath();
       var currentAngle = angle * i;
@@ -83,35 +68,29 @@ var Percent = function Percent(props) {
       ctx.strokeStyle = color;
       ctx.stroke();
     };
-
     for (var i = 0; i <= total; i++) {
       renderColumn(i, '#ccc');
     }
-
     var timer = null;
     var currentActiveCount = 0;
-
-    var renderActiveColumn = function renderActiveColumn() {
+    var _renderActiveColumn = function renderActiveColumn() {
       if (currentActiveCount <= activeCount) {
         renderColumn(currentActiveCount, THEME_COLOR);
         currentActiveCount += 1;
         timer = setTimeout(function () {
-          renderActiveColumn();
+          _renderActiveColumn();
         }, 100);
       }
     };
-
     if (activeCount > 0) {
-      renderActiveColumn();
+      _renderActiveColumn();
     }
-
     if (title) {
       // 渲染文字
       ctx.font = "bold 18px Arial";
       ctx.fillStyle = THEME_COLOR;
       ctx.fillText(title, (ctx.canvas.width - ctx.measureText(title).width) / 2, circleCenterY + 40);
     }
-
     ctx.font = "12px Arial";
     ctx.fillStyle = '#ffffff';
     ctx.fillText('0', padding, circleCenterY + 14);
@@ -133,7 +112,5 @@ var Percent = function Percent(props) {
     className: "env-percent-semicircle__value"
   }, realValue, unit));
 };
-
-var _default = Percent;
-exports["default"] = _default;
+var _default = exports["default"] = Percent;
 //# sourceMappingURL=percent.js.map

package/lib/percent/percent.js.map

@@ -1 +1 @@
-{"version":3,"file":"percent.js","names":["THEME_COLOR","Percent","props","wrapRef","React","useRef","canvasRef","realValue","value","title","style","className","unit","all","useEffect","canvasWidth","current","clientWidth","canvasHeight","clientHeight","ctx","getContext","width","height","clearRect","padding","maxRadius","pointLength","clearance","innerRadius","circleCenterX","circleCenterY","arc","Math","PI","lineWidth","strokeStyle","shadowColor","shadowOffsetY","shadowBlur","stroke","total","angle","perValue","activeCount","floor","renderColumn","i","color","beginPath","currentAngle","moveTo","cos","sin","lineTo","lineCap","timer","currentActiveCount","renderActiveColumn","setTimeout","font","fillStyle","fillText","canvas","measureText","textAlign","clearTimeout","createElement","classnames","ref"],"sources":["percent/percent.js"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nconst THEME_COLOR = '#4EF6FC';\nconst Percent = (props) => {\n    const wrapRef = React.useRef(null);\n    const canvasRef = React.useRef(null);\n    const { value: realValue, title, style, className, unit = '%', all = 100, } = props;\n    let value = realValue;\n    value < 0 && (value = 0);\n    value > all && (value = all);\n    React.useEffect(() => {\n        if (!canvasRef) {\n            return;\n        }\n        const canvasWidth = wrapRef.current.clientWidth;\n        const canvasHeight = wrapRef.current.clientHeight;\n        const { current } = canvasRef;\n        const ctx = canvasRef.current.getContext('2d');\n        current.width = canvasWidth;\n        current.height = canvasHeight;\n        // 擦除\n        ctx.clearRect(0, 0, canvasWidth, canvasHeight);\n        const padding = canvasWidth * 0.05; // 距离上下左右的距离;\n        const maxRadius = (canvasWidth - 2 * padding) / 2; // 最大可使用半径\n        const pointLength = 10; // 圆弧边上柱子的长度\n        const clearance = canvasWidth * 0.1; // 两个圆之间的间隙\n        const innerRadius = maxRadius - pointLength - clearance;\n        const circleCenterX = canvasWidth / 2;\n        const circleCenterY = maxRadius + padding;\n        // 渲染内部圆弧\n        ctx.arc(circleCenterX, circleCenterY, innerRadius, Math.PI, 0);\n        ctx.lineWidth = 4;\n        ctx.strokeStyle = THEME_COLOR;\n        ctx.shadowColor = THEME_COLOR;\n        ctx.shadowOffsetY = -3;\n        ctx.shadowBlur = 8;\n        ctx.stroke();\n        // 渲染边上的柱子\n        const total = 30;\n        const angle = Math.PI / total;\n        const perValue = all / total;\n        const activeCount = Math.floor(value / perValue);\n        const renderColumn = (i, color) => {\n            ctx.beginPath();\n            const currentAngle = angle * i;\n            ctx.moveTo(circleCenterX - maxRadius * Math.cos(currentAngle), circleCenterY - maxRadius * Math.sin(currentAngle));\n            ctx.lineTo(circleCenterX\n                - (innerRadius + clearance) * Math.cos(currentAngle), circleCenterY\n                - (innerRadius + clearance) * Math.sin(currentAngle));\n            ctx.shadowOffsetY = 0;\n            ctx.shadowBlur = 0;\n            ctx.lineWidth = 3;\n            ctx.lineCap = 'round';\n            ctx.strokeStyle = color;\n            ctx.stroke();\n        };\n        for (let i = 0; i <= total; i++) {\n            renderColumn(i, '#ccc');\n        }\n        let timer = null;\n        let currentActiveCount = 0;\n        const renderActiveColumn = () => {\n            if (currentActiveCount <= activeCount) {\n                renderColumn(currentActiveCount, THEME_COLOR);\n                currentActiveCount += 1;\n                timer = setTimeout(() => {\n                    renderActiveColumn();\n                }, 100);\n            }\n        };\n        if (activeCount > 0) {\n            renderActiveColumn();\n        }\n        if (title) {\n            // 渲染文字\n            ctx.font = `bold 18px Arial`;\n            ctx.fillStyle = THEME_COLOR;\n            ctx.fillText(title, (ctx.canvas.width - ctx.measureText(title).width) / 2, circleCenterY + 40);\n        }\n        ctx.font = `12px Arial`;\n        ctx.fillStyle = '#ffffff';\n        ctx.fillText('0', padding, circleCenterY + 14);\n        ctx.textAlign = 'right';\n        ctx.fillText(`${all}${unit}`, canvasWidth - padding, circleCenterY + 14);\n        ctx.textAlign = 'start';\n        return () => {\n            clearTimeout(timer);\n            timer = null;\n        };\n    }, [value]);\n    return (React.createElement(\"div\", { className: classnames(className, 'env-percent-semicircle'), style: style, ref: wrapRef },\n        React.createElement(\"canvas\", { ref: canvasRef }),\n        React.createElement(\"div\", { className: \"env-percent-semicircle__value\" },\n            realValue,\n            unit)));\n};\nexport default Percent;\n"],"mappings":"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"}
+{"version":3,"file":"percent.js","names":["React","_interopRequireWildcard","require","_classnames","_interopRequireDefault","e","__esModule","t","WeakMap","r","n","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","THEME_COLOR","Percent","props","wrapRef","useRef","canvasRef","realValue","value","title","style","className","_props$unit","unit","_props$all","all","useEffect","canvasWidth","current","clientWidth","canvasHeight","clientHeight","ctx","getContext","width","height","clearRect","padding","maxRadius","pointLength","clearance","innerRadius","circleCenterX","circleCenterY","arc","Math","PI","lineWidth","strokeStyle","shadowColor","shadowOffsetY","shadowBlur","stroke","total","angle","perValue","activeCount","floor","renderColumn","color","beginPath","currentAngle","moveTo","cos","sin","lineTo","lineCap","timer","currentActiveCount","renderActiveColumn","setTimeout","font","fillStyle","fillText","canvas","measureText","textAlign","concat","clearTimeout","createElement","classnames","ref","_default","exports"],"sources":["percent/percent.js"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nconst THEME_COLOR = '#4EF6FC';\nconst Percent = (props) => {\n    const wrapRef = React.useRef(null);\n    const canvasRef = React.useRef(null);\n    const { value: realValue, title, style, className, unit = '%', all = 100, } = props;\n    let value = realValue;\n    value < 0 && (value = 0);\n    value > all && (value = all);\n    React.useEffect(() => {\n        if (!canvasRef) {\n            return;\n        }\n        const canvasWidth = wrapRef.current.clientWidth;\n        const canvasHeight = wrapRef.current.clientHeight;\n        const { current } = canvasRef;\n        const ctx = canvasRef.current.getContext('2d');\n        current.width = canvasWidth;\n        current.height = canvasHeight;\n        // 擦除\n        ctx.clearRect(0, 0, canvasWidth, canvasHeight);\n        const padding = canvasWidth * 0.05; // 距离上下左右的距离;\n        const maxRadius = (canvasWidth - 2 * padding) / 2; // 最大可使用半径\n        const pointLength = 10; // 圆弧边上柱子的长度\n        const clearance = canvasWidth * 0.1; // 两个圆之间的间隙\n        const innerRadius = maxRadius - pointLength - clearance;\n        const circleCenterX = canvasWidth / 2;\n        const circleCenterY = maxRadius + padding;\n        // 渲染内部圆弧\n        ctx.arc(circleCenterX, circleCenterY, innerRadius, Math.PI, 0);\n        ctx.lineWidth = 4;\n        ctx.strokeStyle = THEME_COLOR;\n        ctx.shadowColor = THEME_COLOR;\n        ctx.shadowOffsetY = -3;\n        ctx.shadowBlur = 8;\n        ctx.stroke();\n        // 渲染边上的柱子\n        const total = 30;\n        const angle = Math.PI / total;\n        const perValue = all / total;\n        const activeCount = Math.floor(value / perValue);\n        const renderColumn = (i, color) => {\n            ctx.beginPath();\n            const currentAngle = angle * i;\n            ctx.moveTo(circleCenterX - maxRadius * Math.cos(currentAngle), circleCenterY - maxRadius * Math.sin(currentAngle));\n            ctx.lineTo(circleCenterX\n                - (innerRadius + clearance) * Math.cos(currentAngle), circleCenterY\n                - (innerRadius + clearance) * Math.sin(currentAngle));\n            ctx.shadowOffsetY = 0;\n            ctx.shadowBlur = 0;\n            ctx.lineWidth = 3;\n            ctx.lineCap = 'round';\n            ctx.strokeStyle = color;\n            ctx.stroke();\n        };\n        for (let i = 0; i <= total; i++) {\n            renderColumn(i, '#ccc');\n        }\n        let timer = null;\n        let currentActiveCount = 0;\n        const renderActiveColumn = () => {\n            if (currentActiveCount <= activeCount) {\n                renderColumn(currentActiveCount, THEME_COLOR);\n                currentActiveCount += 1;\n                timer = setTimeout(() => {\n                    renderActiveColumn();\n                }, 100);\n            }\n        };\n        if (activeCount > 0) {\n            renderActiveColumn();\n        }\n        if (title) {\n            // 渲染文字\n            ctx.font = `bold 18px Arial`;\n            ctx.fillStyle = THEME_COLOR;\n            ctx.fillText(title, (ctx.canvas.width - ctx.measureText(title).width) / 2, circleCenterY + 40);\n        }\n        ctx.font = `12px Arial`;\n        ctx.fillStyle = '#ffffff';\n        ctx.fillText('0', padding, circleCenterY + 14);\n        ctx.textAlign = 'right';\n        ctx.fillText(`${all}${unit}`, canvasWidth - padding, circleCenterY + 14);\n        ctx.textAlign = 'start';\n        return () => {\n            clearTimeout(timer);\n            timer = null;\n        };\n    }, [value]);\n    return (React.createElement(\"div\", { className: classnames(className, 'env-percent-semicircle'), style: style, ref: wrapRef },\n        React.createElement(\"canvas\", { ref: canvasRef }),\n        React.createElement(\"div\", { className: \"env-percent-semicircle__value\" },\n            realValue,\n            unit)));\n};\nexport default Percent;\n"],"mappings":"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","ignoreList":[]}

package/lib/percent/style/css.js.map

@@ -1 +1 @@
-{"version":3,"file":"css.js","names":[],"sources":["percent/style/index.js"],"sourcesContent":["import './index.less';\n"],"mappings":";;AAAA"}
+{"version":3,"file":"css.js","names":["require"],"sources":["percent/style/index.js"],"sourcesContent":["import './index.less';\n"],"mappings":";;AAAAA,OAAA","ignoreList":[]}

package/lib/percent/style/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["percent/style/index.js"],"sourcesContent":["import './index.less';\n"],"mappings":";;AAAA"}
+{"version":3,"file":"index.js","names":["require"],"sources":["percent/style/index.js"],"sourcesContent":["import './index.less';\n"],"mappings":";;AAAAA,OAAA","ignoreList":[]}

package/lib/percent/style/index.less

@@ -1,41 +1,41 @@
-.env-percent-semicircle {
-    position: relative;
-    color: #fff;
-
-    &__value {
-        width: 30%;
-        border-radius: 4px;
-        border: 1px solid #4ef6fc;
-        position: absolute;
-        left: 0;
-        right: 0;
-        top: 45%;
-        margin: auto;
-        text-align: center;
-        box-shadow: 0 0 10px 2px #1890ff inset, 0 0 10px 2px #1890ff;
-    }
-}
-
-.env-percent-line {
-    width: 100%;
-    height: 28px;
-    display: flex;
-    align-items: center;
-    font-size: 18px;
-    font-family: Source Han Sans CN;
-    font-weight: 500;
-    color: #ffffff;
-    white-space: nowrap;
-
-    &__arrow {
-        margin: 0 20px;
-    }
-
-    &__value {
-        height: 100%;
-    }
-
-    &__suffix {
-        padding-left: 20px;
-    }
-}
+.env-percent-semicircle {
+    position: relative;
+    color: #fff;
+
+    &__value {
+        width: 30%;
+        border-radius: 4px;
+        border: 1px solid #4ef6fc;
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 45%;
+        margin: auto;
+        text-align: center;
+        box-shadow: 0 0 10px 2px #1890ff inset, 0 0 10px 2px #1890ff;
+    }
+}
+
+.env-percent-line {
+    width: 100%;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    font-size: 18px;
+    font-family: Source Han Sans CN;
+    font-weight: 500;
+    color: #ffffff;
+    white-space: nowrap;
+
+    &__arrow {
+        margin: 0 20px;
+    }
+
+    &__value {
+        height: 100%;
+    }
+
+    &__suffix {
+        padding-left: 20px;
+    }
+}

package/lib/scroll/index.js

@@ -4,11 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _scroll = _interopRequireDefault(require("./scroll"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-var _default = _scroll["default"];
-exports["default"] = _default;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = _scroll["default"];
 //# sourceMappingURL=index.js.map

package/lib/scroll/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Scroll"],"sources":["scroll/index.js"],"sourcesContent":["import Scroll from './scroll';\nexport default Scroll;\n"],"mappings":";;;;;;;AAAA;;;;eACeA,kB"}
+{"version":3,"file":"index.js","names":["_scroll","_interopRequireDefault","require","e","__esModule","_default","exports","Scroll"],"sources":["scroll/index.js"],"sourcesContent":["import Scroll from './scroll';\nexport default Scroll;\n"],"mappings":";;;;;;AAAA,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA8B,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,gBAAAA,CAAA;AAAA,IAAAE,QAAA,GAAAC,OAAA,cACfC,kBAAM","ignoreList":[]}

package/lib/scroll/scroll.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
-declare type ScrollProps = {} & React.HTMLAttributes<HTMLDivElement>;
+type ScrollProps = {} & React.HTMLAttributes<HTMLDivElement>;
 declare const Scroll: React.FC<ScrollProps>;
 export default Scroll;

package/lib/scroll/scroll.js

@@ -1,87 +1,61 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var React = _interopRequireWildcard(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
-
-  for (var p in s) {
-    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  }
-
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 };
-
 var Scroll = function Scroll(props) {
   var timer = null;
-
   var clearTimer = function clearTimer() {
     if (timer) {
       clearInterval(timer);
       timer = null;
     }
   };
-
   var children = props.children,
-      className = props.className,
-      rest = __rest(props, ["children", "className"]);
-
+    className = props.className,
+    rest = __rest(props, ["children", "className"]);
   var wrapperRef = React.useRef(null);
   var contentRef = React.useRef(null);
-
   var _React$useState = React.useState(true),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      hasCopy = _React$useState2[0],
-      setHasCopy = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    hasCopy = _React$useState2[0],
+    setHasCopy = _React$useState2[1];
   React.useEffect(function () {
     clearTimer();
     var wrapper = wrapperRef.current;
-    var content = contentRef.current; // 当内容不足的时候, 不需要拷贝的元素
-
+    var content = contentRef.current;
+    // 当内容不足的时候, 不需要拷贝的元素
     if (wrapper.clientHeight > content.clientHeight) {
       setHasCopy(false);
       return;
-    } // 重置滚动高度并拷贝元素
-
-
+    }
+    // 重置滚动高度并拷贝元素
     setHasCopy(true);
     wrapper.scrollTop = 0;
     timer = setInterval(function () {
       if (!wrapper || !content) {
         return;
       }
-
       if (wrapper.scrollTop >= content.scrollHeight) {
         wrapper.scrollTop = 0;
       } else {
@@ -99,7 +73,5 @@ var Scroll = function Scroll(props) {
     ref: contentRef
   }, children), hasCopy && /*#__PURE__*/React.createElement("div", null, children));
 };
-
-var _default = Scroll;
-exports["default"] = _default;
+var _default = exports["default"] = Scroll;
 //# sourceMappingURL=scroll.js.map