@nutui/nutui-react-taro 1.4.2 → 1.4.3

package/dist/nutui.react.es.js

@@ -1,11 +1,11 @@
 /*!
-* @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.
 */
 import * as React from "react";
 import React__default, { useCallback, useState, useEffect, useRef, createContext, useContext, useMemo, forwardRef, useImperativeHandle, useLayoutEffect, memo, Component } from "react";
-import Taro, { usePageScroll, eventCenter, getCurrentInstance, nextTick, useReady, createSelectorQuery } from "@tarojs/taro";
+import Taro, { usePageScroll, nextTick, useReady, createSelectorQuery } from "@tarojs/taro";
 import ReactDOM, { createPortal, unstable_batchedUpdates } from "react-dom";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getAugmentedNamespace(n) {
@@ -482,7 +482,7 @@ const Overlay = (props) => {
     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;
@@ -6768,7 +6768,7 @@ const defaultProps$1p = {
   showError: true,
   showLoading: true
 };
-const Image = (props) => {
+const Image$1 = (props) => {
   useConfig$1();
   const {
     children,
@@ -6847,8 +6847,8 @@ const Image = (props) => {
     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 });
@@ -8770,7 +8770,7 @@ const Toast = (props) => {
   const show = () => {
     clearTimer();
     if (duration) {
-      timer = setTimeout(() => {
+      timer = window.setTimeout(() => {
         hide();
       }, duration * 1e3);
     }
@@ -9569,7 +9569,7 @@ const CalendarItem = (props) => {
       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 {
@@ -10973,6 +10973,7 @@ const InputNumber = (props) => {
     name: "minus",
     onClick: reduceNumber
   }), /* @__PURE__ */ React__default.createElement("input", {
+    className: "nut-number-input",
     type: "number",
     min,
     max,
@@ -13820,7 +13821,6 @@ const Drag = (props) => {
     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;
@@ -13853,11 +13853,9 @@ const Drag = (props) => {
     }
   };
   useEffect(() => {
-    eventCenter.once(getCurrentInstance().router.onReady, () => {
-      timer.current = setTimeout(() => {
-        getInfo();
-      }, 200);
-    });
+    timer.current = window.setTimeout(() => {
+      getInfo();
+    }, 300);
     return () => {
       clearTimeout(timer.current);
     };
@@ -14040,7 +14038,7 @@ const BaseDialog = (props, ref) => {
       }),
       disabled: okBtnDisabled,
       onClick: (e2) => handleOk(e2)
-    }, okText));
+    }, okText || locale.confirm));
     return footerContent;
   };
   return /* @__PURE__ */ React__default.createElement(DialogWrapper, {
@@ -14275,7 +14273,7 @@ const Notify = (props) => {
   const show = () => {
     clearTimer();
     if (duration) {
-      timer = setTimeout(() => {
+      timer = window.setTimeout(() => {
         hide();
       }, duration);
     }
@@ -19278,7 +19276,6 @@ const CircleProgress = (props) => {
   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`,
@@ -19296,24 +19293,14 @@ const CircleProgress = (props) => {
       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);
   };
@@ -19530,7 +19517,10 @@ const NoticeBar = (props) => {
   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 = () => {
@@ -19543,7 +19533,7 @@ const NoticeBar = (props) => {
     }, 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));
@@ -20563,7 +20553,7 @@ const Badge = (props) => {
     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.createElement("div", {
@@ -22584,55 +22574,67 @@ const WaterMark = (props) => {
   }, []);
   const init = () => {
     let ratio = 1;
-    Taro.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.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.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.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.createElement("div", {
     className: cls,
@@ -23533,7 +23535,7 @@ const InternalBarrage = (props, ref) => {
   }, [barrageList]);
   const run = () => {
     clearInterval(timer.current);
-    timer.current = setInterval(() => {
+    timer.current = window.setInterval(() => {
       play();
       run();
     }, frequency);
@@ -23570,7 +23572,7 @@ const Barrage = React__default.forwardRef(InternalBarrage);
 Barrage.defaultProps = defaultProps$5;
 Barrage.displayName = "NutBarrage";
 const defaultProps$4 = {
-  canvasId: "weappCanvas",
+  canvasId: "spcanvas",
   type: "png",
   lineWidth: 2,
   strokeStyle: "#000",
@@ -23595,13 +23597,13 @@ const Signature = (props) => {
     ...props
   };
   const b2 = cn("signature");
-  useRef(null);
+  const canvasRef = useRef(null);
   const wrapRef = useRef(null);
   const [canvasHeight, setCanvasHeight] = useState(0);
   const [canvasWidth, setCanvasWidth] = useState(0);
   const ctx2 = useRef(null);
+  const [disalbeScroll] = useState("true");
   const startEventHandler = (event) => {
-    event.preventDefault();
     if (ctx2.current) {
       ctx2.current.beginPath();
       ctx2.current.lineWidth = lineWidth;
@@ -23609,14 +23611,23 @@ const Signature = (props) => {
     }
   };
   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.getEnv() === "WEB" && canvasRef.current) {
+        const coverPos = canvasRef.current.getBoundingClientRect();
+        mouseX = evt.clientX - coverPos.left;
+        mouseY = evt.clientY - coverPos.top;
+      }
+      Taro.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) {
@@ -23637,6 +23648,7 @@ const Signature = (props) => {
       Taro.canvasToTempFilePath({
         canvas: res[0].node,
         fileType: props.type,
+        canvasId: `${canvasId}`,
         success: (res2) => {
           handleClearBtn();
           confirm && confirm(res2.tempFilePath);
@@ -23648,44 +23660,81 @@ const Signature = (props) => {
       });
     });
   };
-  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.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.nextTick(() => {
+      setTimeout(() => {
+        if (Taro.getEnv() === "WEAPP" || Taro.getEnv() === "JD") {
+          Taro.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);
+    });
   };
+  useEffect(() => {
+    initCanvas();
+  }, []);
   return /* @__PURE__ */ React__default.createElement("div", {
     className: `${b2()} ${className}`,
     ...rest
   }, /* @__PURE__ */ React__default.createElement("div", {
-    className: `${b2("inner")}`,
+    className: `${b2("inner")} spcanvas_WEAPP`,
     ref: wrapRef
-  }, /* @__PURE__ */ React__default.createElement("canvas", {
+  }, Taro.getEnv() === "WEAPP" || Taro.getEnv() === "JD" ? /* @__PURE__ */ React__default.createElement("canvas", {
     id: canvasId,
+    ref: canvasRef,
     canvasId,
-    disableScroll: true,
+    disalbeScroll: true,
     type: "2d",
     onTouchStart: startEventHandler,
     onTouchMove: moveEventHandler,
     onTouchEnd: endEventHandler
+  }) : /* @__PURE__ */ React__default.createElement("canvas", {
+    id: canvasId,
+    ref: canvasRef,
+    "canvas-id": canvasId,
+    "disalbe-scroll": disalbeScroll,
+    onTouchStart: startEventHandler,
+    onTouchMove: moveEventHandler,
+    onTouchEnd: endEventHandler,
+    onTouchCancel: endEventHandler
   })), /* @__PURE__ */ React__default.createElement(Button, {
     className: `${b2("btn")}`,
     type: "default",
@@ -23972,4 +24021,4 @@ const TimeSelect = (props) => {
 };
 TimeSelect.defaultProps = defaultProps;
 TimeSelect.displayName = "NutTimeSelect";
-export { ActionSheet, Address, Animate, AnimatingNumbers, Audio, Avatar, AvatarGroup, BackTop, Badge, Barrage, Button, Calendar, CalendarItem, Card, Cascader, Cell, CellGroup, Checkbox, CheckboxGroup, CircleProgress, Col, Collapse, CollapseItem, ConfigProvider, CountDown, DatePicker, Dialog, Divider, Drag, Elevator, Ellipsis, Empty, FixedNav, Form, FormItem, Grid, GridItem, Icon$1 as Icon, Image, ImagePreview, Indicator, Infiniteloading, Input, InputNumber, Layout, Menu, MenuItem, NavBar, NoticeBar, Notify, NumberKeyboard, Overlay, Pagination, Picker, Popover, Popup, Price, Progress, PullToRefresh, Radio, RadioGroup, Range, Rate, Row, SearchBar, ShortPassword, SideNavBar, SideNavBarItem, Signature, Skeleton, Step, Steps, Sticky, SubSideNavBar, Swipe, Swiper, SwiperItem, Switch, TabPane, Tabbar, TabbarItem, Table, Tabs, Tag, TextArea, TimeDetail, TimePannel, TimeSelect, Toast, TrendArrow, Uploader, Video, VirtualList, WaterMark };
+export { ActionSheet, Address, Animate, AnimatingNumbers, Audio, Avatar, AvatarGroup, BackTop, Badge, Barrage, Button, Calendar, CalendarItem, Card, Cascader, Cell, CellGroup, Checkbox, CheckboxGroup, CircleProgress, Col, Collapse, CollapseItem, ConfigProvider, CountDown, DatePicker, Dialog, Divider, Drag, Elevator, Ellipsis, Empty, FixedNav, Form, FormItem, Grid, GridItem, Icon$1 as Icon, Image$1 as Image, ImagePreview, Indicator, Infiniteloading, Input, InputNumber, Layout, Menu, MenuItem, NavBar, NoticeBar, Notify, NumberKeyboard, Overlay, Pagination, Picker, Popover, Popup, Price, Progress, PullToRefresh, Radio, RadioGroup, Range, Rate, Row, SearchBar, ShortPassword, SideNavBar, SideNavBarItem, Signature, Skeleton, Step, Steps, Sticky, SubSideNavBar, Swipe, Swiper, SwiperItem, Switch, TabPane, Tabbar, TabbarItem, Table, Tabs, Tag, TextArea, TimeDetail, TimePannel, TimeSelect, Toast, TrendArrow, Uploader, Video, VirtualList, WaterMark };