@nutui/nutui-react-taro 1.4.2 → 1.4.3

package/dist/nutui.react.umd.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react-taro v1.4.2-beta.0 Wed Jan 04 2023 15:06:14 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v1.4.3-beta.0 Wed Jan 11 2023 14:52:52 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -509,7 +509,7 @@
       if (closeOnClickOverlay) {
         props.onClick && props.onClick(e2);
         renderRef.current = false;
-        const id = setTimeout(() => {
+        const id = window.setTimeout(() => {
           setShow(!visible);
         }, duration * 1e3 * 0.8);
         intervalRef.current = id;
@@ -6795,7 +6795,7 @@
     showError: true,
     showLoading: true
   };
-  const Image = (props) => {
+  const Image$1 = (props) => {
     useConfig$1();
     const {
       children,
@@ -6874,8 +6874,8 @@
       name: "image-error"
     })) : null);
   };
-  Image.defaultProps = defaultProps$1p;
-  Image.displayName = "NutImage";
+  Image$1.defaultProps = defaultProps$1p;
+  Image$1.displayName = "NutImage";
   const defaultProps$1o = {};
   const Layout = (props) => {
     ({ ...defaultProps$1o, ...props });
@@ -8797,7 +8797,7 @@
     const show = () => {
       clearTimer();
       if (duration) {
-        timer = setTimeout(() => {
+        timer = window.setTimeout(() => {
           hide();
         }, duration * 1e3);
       }
@@ -9596,7 +9596,7 @@
         if (type2 === "end") {
           monthsPanel.current.style.webkitTransition = `transform ${time}ms cubic-bezier(0.19, 1, 0.22, 1)`;
           clearTimeout(state.timer);
-          state.timer = setTimeout(() => {
+          state.timer = window.setTimeout(() => {
             loadScroll();
           }, time);
         } else {
@@ -11000,6 +11000,7 @@
       name: "minus",
       onClick: reduceNumber
     }), /* @__PURE__ */ React__default["default"].createElement("input", {
+      className: "nut-number-input",
       type: "number",
       min,
       max,
@@ -13847,7 +13848,6 @@
       transformCache.current = { x: translateX.current, y: translateY.current };
     };
     const touchMove = (e2) => {
-      e2.preventDefault();
       if (e2.touches.length === 1 && dragRef.current) {
         const touch = e2.touches[0];
         const x = touch.clientX - axisCache.current.x;
@@ -13880,11 +13880,9 @@
       }
     };
     React.useEffect(() => {
-      Taro.eventCenter.once(Taro.getCurrentInstance().router.onReady, () => {
-        timer.current = setTimeout(() => {
-          getInfo();
-        }, 200);
-      });
+      timer.current = window.setTimeout(() => {
+        getInfo();
+      }, 300);
       return () => {
         clearTimeout(timer.current);
       };
@@ -14067,7 +14065,7 @@
         }),
         disabled: okBtnDisabled,
         onClick: (e2) => handleOk(e2)
-      }, okText));
+      }, okText || locale.confirm));
       return footerContent;
     };
     return /* @__PURE__ */ React__default["default"].createElement(DialogWrapper, {
@@ -14302,7 +14300,7 @@
     const show = () => {
       clearTimer();
       if (duration) {
-        timer = setTimeout(() => {
+        timer = window.setTimeout(() => {
           hide();
         }, duration);
       }
@@ -19305,7 +19303,6 @@
     const b2 = cn("circleprogress");
     const classes = classNames(className, b2(""));
     const refRandomId = Math.random().toString(36).slice(-8);
-    let lastTime = 0;
     const styles = {
       height: `${Number(radius) * 2}px`,
       width: `${Number(radius) * 2}px`,
@@ -19323,24 +19320,14 @@
         const rate = progress2 * (endRate - startRate) + startRate;
         setOldValue(Math.min(Math.max(+rate, 0), 100));
         if (endRate > startRate ? rate < endRate : rate > endRate) {
-          rafId = requestAnimationFrame2(animate);
+          rafId = window.requestAnimationFrame(animate);
         }
       };
       if (rafId) {
         cancelAnimationFrame2(rafId);
       }
-      rafId = requestAnimationFrame2(animate);
+      rafId = window.requestAnimationFrame(animate);
     }, [progress]);
-    const requestAnimationFrame2 = function(callback) {
-      const currTime = new Date().getTime();
-      const timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
-      lastTime = currTime + timeToCall;
-      const id = setTimeout(function() {
-        callback();
-      }, timeToCall);
-      lastTime = currTime + timeToCall;
-      return id;
-    };
     const cancelAnimationFrame2 = function(id) {
       clearTimeout(id);
     };
@@ -19557,7 +19544,10 @@
     const startRollEasy = () => {
       showhorseLamp();
       const time = height / speed / 4 < 1 ? Number((height / speed / 4).toFixed(1)) * 1e3 : ~~(height / speed / 4) * 1e3;
-      const timerCurr = setInterval(showhorseLamp, time + Number(standTime));
+      const timerCurr = window.setInterval(
+        showhorseLamp,
+        time + Number(standTime)
+      );
       SetTimer(timerCurr);
     };
     const showhorseLamp = () => {
@@ -19570,7 +19560,7 @@
       }, time);
     };
     const startRoll = () => {
-      const timerCurr = setInterval(() => {
+      const timerCurr = window.setInterval(() => {
         const chunk = 100;
         for (let i = 0; i < chunk; i++) {
           scroll(i, !(i < chunk - 1));
@@ -20590,7 +20580,7 @@
       style2.top = `${Number(top) || parseFloat(top) || 0}px`;
       style2.right = `${Number(right) || parseFloat(right) || 0}px`;
       style2.zIndex = zIndex;
-      style2.backgroundColor = color;
+      style2.background = color;
       return style2;
     };
     return /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -22611,55 +22601,67 @@
     }, []);
     const init = () => {
       let ratio = 1;
-      Taro__default["default"].getSystemInfo({
-        success(res) {
-          ratio = res.pixelRatio;
-        }
-      });
-      const canvasWidth = `${(gapX + width) * ratio}px`;
-      const canvasHeight = `${(gapY + height) * ratio}px`;
-      const markWidth = width * ratio;
-      const markHeight = height * ratio;
-      const canvas = Taro__default["default"].createOffscreenCanvas({
-        type: "2d",
-        width: Number(canvasWidth),
-        height: Number(canvasHeight)
-      });
-      const ctx2 = canvas.getContext("2d");
-      if (ctx2) {
-        if (image) {
-          ctx2.translate(markWidth / 2, markHeight / 2);
-          ctx2.rotate(Math.PI / 180 * Number(rotate));
-          const img = canvas.createImage();
-          img.crossOrigin = "anonymous";
-          img.referrerPolicy = "no-referrer";
-          img.src = image;
-          img.onload = () => {
-            ctx2.drawImage(
-              img,
-              -imageWidth * ratio / 2,
-              -imageHeight * ratio / 2,
-              imageWidth * ratio,
-              imageHeight * ratio
-            );
+      Taro__default["default"].getSystemInfo().then((res) => {
+        ratio = res.pixelRatio;
+        const canvasWidth = `${(gapX + width) * ratio}px`;
+        const canvasHeight = `${(gapY + height) * ratio}px`;
+        const markWidth = width * ratio;
+        const markHeight = height * ratio;
+        let ctx2;
+        let canvas;
+        if ({}.TARO_ENV === "h5") {
+          canvas = document.createElement("canvas");
+          ctx2 = canvas.getContext("2d");
+          canvas.setAttribute("width", canvasWidth);
+          canvas.setAttribute("height", canvasHeight);
+        } else {
+          canvas = Taro__default["default"].createOffscreenCanvas({
+            type: "2d",
+            width: Number(canvasWidth),
+            height: Number(canvasHeight)
+          });
+          ctx2 = canvas.getContext("2d");
+        }
+        if (ctx2) {
+          if (image) {
+            ctx2.translate(markWidth / 2, markHeight / 2);
+            ctx2.rotate(Math.PI / 180 * Number(rotate));
+            let img;
+            if ({}.TARO_ENV === "h5") {
+              img = new Image();
+            } else {
+              img = canvas.createImage();
+            }
+            img.crossOrigin = "anonymous";
+            img.referrerPolicy = "no-referrer";
+            img.src = image;
+            img.onload = () => {
+              ctx2.drawImage(
+                img,
+                -imageWidth * ratio / 2,
+                -imageHeight * ratio / 2,
+                imageWidth * ratio,
+                imageHeight * ratio
+              );
+              ctx2.restore();
+              setBase64Url(canvas.toDataURL());
+            };
+          } else if (content) {
+            ctx2.textBaseline = "middle";
+            ctx2.textAlign = "center";
+            ctx2.translate(markWidth / 2, markHeight / 2);
+            ctx2.rotate(Math.PI / 180 * Number(rotate));
+            const markSize = Number(fontSize) * ratio;
+            ctx2.font = `${fontStyle} normal ${fontWeight} ${markSize}px/${markHeight}px ${fontFamily}`;
+            ctx2.fillStyle = fontColor;
+            ctx2.fillText(content, 0, 0);
             ctx2.restore();
             setBase64Url(canvas.toDataURL());
-          };
-        } else if (content) {
-          ctx2.textBaseline = "middle";
-          ctx2.textAlign = "center";
-          ctx2.translate(markWidth / 2, markHeight / 2);
-          ctx2.rotate(Math.PI / 180 * Number(rotate));
-          const markSize = Number(fontSize) * ratio;
-          ctx2.font = `${fontStyle} normal ${fontWeight} ${markSize}px/${markHeight}px ${fontFamily}`;
-          ctx2.fillStyle = fontColor;
-          ctx2.fillText(content, 0, 0);
-          ctx2.restore();
-          setBase64Url(canvas.toDataURL());
+          }
+        } else {
+          throw new Error(locale.watermark.errorCanvasTips);
         }
-      } else {
-        throw new Error(locale.watermark.errorCanvasTips);
-      }
+      });
     };
     return /* @__PURE__ */ React__default["default"].createElement("div", {
       className: cls,
@@ -23560,7 +23562,7 @@
     }, [barrageList]);
     const run = () => {
       clearInterval(timer.current);
-      timer.current = setInterval(() => {
+      timer.current = window.setInterval(() => {
         play();
         run();
       }, frequency);
@@ -23597,7 +23599,7 @@
   Barrage.defaultProps = defaultProps$5;
   Barrage.displayName = "NutBarrage";
   const defaultProps$4 = {
-    canvasId: "weappCanvas",
+    canvasId: "spcanvas",
     type: "png",
     lineWidth: 2,
     strokeStyle: "#000",
@@ -23622,13 +23624,13 @@
       ...props
     };
     const b2 = cn("signature");
-    React.useRef(null);
+    const canvasRef = React.useRef(null);
     const wrapRef = React.useRef(null);
     const [canvasHeight, setCanvasHeight] = React.useState(0);
     const [canvasWidth, setCanvasWidth] = React.useState(0);
     const ctx2 = React.useRef(null);
+    const [disalbeScroll] = React.useState("true");
     const startEventHandler = (event) => {
-      event.preventDefault();
       if (ctx2.current) {
         ctx2.current.beginPath();
         ctx2.current.lineWidth = lineWidth;
@@ -23636,14 +23638,23 @@
       }
     };
     const moveEventHandler = (event) => {
-      event.preventDefault();
       if (ctx2.current) {
-        ctx2.current.lineTo(event.changedTouches[0].x, event.changedTouches[0].y);
-        ctx2.current.stroke();
+        const evt = event.changedTouches[0];
+        let mouseX = evt.x || evt.clientX;
+        let mouseY = evt.y || evt.clientY;
+        if (Taro__default["default"].getEnv() === "WEB" && canvasRef.current) {
+          const coverPos = canvasRef.current.getBoundingClientRect();
+          mouseX = evt.clientX - coverPos.left;
+          mouseY = evt.clientY - coverPos.top;
+        }
+        Taro__default["default"].nextTick(() => {
+          var _a, _b;
+          (_a = ctx2.current) == null ? void 0 : _a.lineTo(mouseX, mouseY);
+          (_b = ctx2.current) == null ? void 0 : _b.stroke();
+        });
       }
     };
     const endEventHandler = (event) => {
-      event.preventDefault();
     };
     const handleClearBtn = () => {
       if (ctx2.current) {
@@ -23664,6 +23675,7 @@
         Taro__default["default"].canvasToTempFilePath({
           canvas: res[0].node,
           fileType: props.type,
+          canvasId: `${canvasId}`,
           success: (res2) => {
             handleClearBtn();
             confirm && confirm(res2.tempFilePath);
@@ -23675,44 +23687,81 @@
         });
       });
     };
-    Taro.useReady(() => {
-      initCanvas();
-    });
+    const canvasSetting = (canvasDom, width, height) => {
+      const canvas = canvasDom;
+      canvas.current = canvas;
+      ctx2.current = canvas.getContext("2d");
+      setCanvasWidth(width);
+      setCanvasHeight(height);
+      canvas.width = width;
+      canvas.height = height;
+      if (ctx2.current) {
+        ctx2.current.clearRect(0, 0, width, height);
+        ctx2.current.beginPath();
+        ctx2.current.lineWidth = lineWidth;
+        ctx2.current.strokeStyle = strokeStyle;
+      }
+    };
     const initCanvas = () => {
-      Taro__default["default"].createSelectorQuery().select(`#${canvasId}`).fields(
-        {
-          node: true,
-          size: true
-        },
-        (res) => {
-          const canvas = res.node;
-          canvas.current = canvas;
-          ctx2.current = canvas.getContext("2d");
-          setCanvasWidth(res.width);
-          setCanvasHeight(res.height);
-          if (ctx2.current) {
-            ctx2.current.clearRect(0, 0, canvasWidth, canvasHeight);
-            ctx2.current.beginPath();
-            ctx2.current.lineWidth = lineWidth;
-            ctx2.current.strokeStyle = strokeStyle;
+      Taro__default["default"].nextTick(() => {
+        setTimeout(() => {
+          if (Taro__default["default"].getEnv() === "WEAPP" || Taro__default["default"].getEnv() === "JD") {
+            Taro__default["default"].createSelectorQuery().select(`#${canvasId}`).fields(
+              {
+                node: true,
+                size: true
+              },
+              (res) => {
+                const { node, width, height } = res;
+                canvasSetting(node, width, height);
+              }
+            ).exec();
+          } else {
+            const canvasDom = document.getElementById(
+              `${canvasId}`
+            );
+            let canvas = canvasDom;
+            if ((canvasDom == null ? void 0 : canvasDom.tagName) !== "CANVAS") {
+              canvas = canvasDom == null ? void 0 : canvasDom.getElementsByTagName(
+                "canvas"
+              )[0];
+            }
+            canvasSetting(
+              canvas,
+              canvasDom == null ? void 0 : canvasDom.offsetWidth,
+              canvasDom == null ? void 0 : canvasDom.offsetHeight
+            );
           }
-        }
-      ).exec();
+        }, 1e3);
+      });
     };
+    React.useEffect(() => {
+      initCanvas();
+    }, []);
     return /* @__PURE__ */ React__default["default"].createElement("div", {
       className: `${b2()} ${className}`,
       ...rest
     }, /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: `${b2("inner")}`,
+      className: `${b2("inner")} spcanvas_WEAPP`,
       ref: wrapRef
-    }, /* @__PURE__ */ React__default["default"].createElement("canvas", {
+    }, Taro__default["default"].getEnv() === "WEAPP" || Taro__default["default"].getEnv() === "JD" ? /* @__PURE__ */ React__default["default"].createElement("canvas", {
       id: canvasId,
+      ref: canvasRef,
       canvasId,
-      disableScroll: true,
+      disalbeScroll: true,
       type: "2d",
       onTouchStart: startEventHandler,
       onTouchMove: moveEventHandler,
       onTouchEnd: endEventHandler
+    }) : /* @__PURE__ */ React__default["default"].createElement("canvas", {
+      id: canvasId,
+      ref: canvasRef,
+      "canvas-id": canvasId,
+      "disalbe-scroll": disalbeScroll,
+      onTouchStart: startEventHandler,
+      onTouchMove: moveEventHandler,
+      onTouchEnd: endEventHandler,
+      onTouchCancel: endEventHandler
     })), /* @__PURE__ */ React__default["default"].createElement(Button, {
       className: `${b2("btn")}`,
       type: "default",
@@ -24037,7 +24086,7 @@
   exports2.Grid = Grid;
   exports2.GridItem = GridItem;
   exports2.Icon = Icon$1;
-  exports2.Image = Image;
+  exports2.Image = Image$1;
   exports2.ImagePreview = ImagePreview;
   exports2.Indicator = Indicator;
   exports2.Infiniteloading = Infiniteloading;

package/dist/packages/drag/drag.scss

@@ -6,4 +6,5 @@
   height: fit-content;
   touch-action: none;
   user-select: none;
+  font-size: 0;
 }

package/dist/packages/inputnumber/inputnumber.scss

@@ -41,6 +41,7 @@
   }
 
   input,
+  .nut-number-input,
   &__text--readonly {
     width: $inputnumber-input-width;
     height: 100%;
@@ -53,7 +54,9 @@
     border-radius: $inputnumber-input-border-radius;
   }
   input::-webkit-outer-spin-button,
-  input::-webkit-inner-spin-button {
+  input::-webkit-inner-spin-button,
+  .nut-number-input::-webkit-outer-spin-button,
+  .nut-number-input::-webkit-inner-spin-button {
     appearance: none;
   }
 }

package/dist/packages/signature/signature.scss

@@ -1,21 +1,28 @@
 .nut-theme-dark {
   .nut-signature {
     &__inner {
-      canvas {
+      Canvas {
         background-color: $dark3;
       }
     }
   }
   .demo-tips {
-    background-color: $dark3;
     color: $dark1;
   }
 }
 .nut-signature {
+  .spcanvas_WEAPP {
+    width: 100%;
+    height: 100%;
+    Canvas {
+      width: 100%;
+    }
+  }
   &__inner {
-    canvas {
+    Canvas {
       background-color: #fff;
     }
+
     height: $signature-height;
     margin-bottom: $signature-margin-bottom;
     border: $signature-border-width solid $signature-border-color;