@nutui/nutui-react-taro 2.0.0-alpha.8 → 2.0.0-beta.1

package/dist/esm/{noticebar.taro-b3bfd4fe.js → noticebar.taro-dc895cc5.js}

@@ -1,44 +1,39 @@
 import React, { useRef, useState, useMemo, useEffect } from "react";
+import { Notice, Close } from "@nutui/icons-react-taro";
 import classNames from "classnames";
-import { c as cn } from "./bem-cdccae08.js";
-import { g as getRectByTaro } from "./use-client-rect-f317804e.js";
+import { g as getRectByTaro } from "./use-client-rect-2bb6c562.js";
 import { C as ComponentDefaults } from "./typings-11d83a22.js";
-import { Notice, Close } from "@nutui/icons-react-taro";
 const defaultProps = {
   ...ComponentDefaults,
-  // 滚动方向  across 横向 vertical 纵向
-  direction: "across",
+  direction: "horizontal",
   list: [],
-  standTime: 1e3,
-  complexAm: false,
+  duration: 1e3,
   height: 40,
-  text: "",
-  closeMode: false,
-  wrapable: false,
+  content: "",
+  closeable: false,
+  wrap: false,
   leftIcon: null,
   rightIcon: null,
-  color: "",
-  background: "",
   delay: 1,
   scrollable: null,
   speed: 50
 };
 const NoticeBar = (props) => {
-  const { children, className, style, direction, list, standTime, complexAm, height, text, closeMode, wrapable, leftIcon, rightIcon, color, background, delay, scrollable, speed, close, click, onClose, onClick, onClickItem } = {
+  const { children, className, style, direction, list, duration, height, content, closeable, wrap, leftIcon, rightIcon, delay, scrollable, speed, close, click, onClose, onClick, onClickItem } = {
     ...defaultProps,
     ...props
   };
-  const wrap = useRef(null);
-  const content = useRef(null);
+  const classPrefix = "nut-noticebar";
+  const wrapRef = useRef(null);
+  const contentRef = useRef(null);
   const [showNoticeBar, SetShowNoticeBar] = useState(true);
   const scrollList = useRef([]);
   const [wrapWidth, SetWrapWidth] = useState(0);
   const [firstRound, SetFirstRound] = useState(true);
-  const [duration, SetDuration] = useState(0);
+  const [animationDuration, SetAnimationDuration] = useState(0);
   const [offsetWidth, SetOffsetW] = useState(0);
   const [animationClass, SetAnimationClass] = useState("");
   const [animate, SetAnimate] = useState(false);
-  const [distance, SetDistance] = useState(0);
   const [timer, SetTimer] = useState(0);
   const [isCanScroll, SetIsCanScroll] = useState(null);
   const isVertical = direction === "vertical";
@@ -47,7 +42,7 @@ const NoticeBar = (props) => {
   const [ready, setReady] = useState(false);
   const container = useRef(null);
   const innerRef = useRef(null);
-  const _swiper = useRef({
+  const swiperRef = useRef({
     moving: false,
     autoplayTimer: null,
     width: 0,
@@ -86,11 +81,8 @@ const NoticeBar = (props) => {
         scrollList.current = [].concat(list);
         setTimeout(() => {
           startRollEasy();
-        }, Number(standTime));
+        }, Number(duration));
       }
-      setTimeout(() => {
-        complexAm && startRoll();
-      }, Number(standTime));
     } else {
       initScrollWrap();
     }
@@ -100,7 +92,7 @@ const NoticeBar = (props) => {
   }, []);
   useEffect(() => {
     initScrollWrap();
-  }, [text]);
+  }, [content]);
   useEffect(() => {
     if (list && list.length) {
       scrollList.current = [].concat(list);
@@ -111,11 +103,11 @@ const NoticeBar = (props) => {
       return;
     }
     setTimeout(async () => {
-      if (!wrap.current || !content.current) {
+      if (!wrapRef.current || !contentRef.current) {
         return;
       }
-      const warpRes = await getRectByTaro(wrap.current);
-      const contentRes = await getRectByTaro(content.current);
+      const warpRes = await getRectByTaro(wrapRef.current);
+      const contentRes = await getRectByTaro(contentRef.current);
       const wrapW = warpRes.width;
       const offsetW = contentRes.width;
       const canScroll = scrollable == null ? offsetW > wrapW : scrollable;
@@ -123,7 +115,7 @@ const NoticeBar = (props) => {
       if (canScroll) {
         SetWrapWidth(wrapW);
         SetOffsetW(offsetW);
-        SetDuration(offsetW / speed);
+        SetAnimationDuration(offsetW / speed);
         SetAnimationClass("play");
       } else {
         SetAnimationClass("");
@@ -136,21 +128,21 @@ const NoticeBar = (props) => {
   };
   const onClickIcon = (event) => {
     event.stopPropagation();
-    SetShowNoticeBar(!closeMode);
+    SetShowNoticeBar(!closeable);
     close && close(event);
     onClose && onClose(event);
   };
   const onAnimationEnd = () => {
     SetFirstRound(false);
     setTimeout(() => {
-      SetDuration((offsetWidth + wrapWidth) / speed);
+      SetAnimationDuration((offsetWidth + wrapWidth) / speed);
       SetAnimationClass("play-infinite");
     }, 0);
   };
   const startRollEasy = () => {
     showhorseLamp();
     const time = height / speed / 4 < 1 ? Number((height / speed / 4).toFixed(1)) * 1e3 : ~~(height / speed / 4) * 1e3;
-    const timerCurr = window.setInterval(showhorseLamp, time + Number(standTime));
+    const timerCurr = window.setInterval(showhorseLamp, time + Number(duration));
     SetTimer(timerCurr);
   };
   const showhorseLamp = () => {
@@ -162,77 +154,44 @@ const NoticeBar = (props) => {
       SetAnimate(false);
     }, time);
   };
-  const startRoll = () => {
-    const timerCurr = window.setInterval(() => {
-      const chunk = 100;
-      for (let i = 0; i < chunk; i++) {
-        scroll(i, !(i < chunk - 1));
-      }
-    }, Number(standTime) + 100 * speed);
-    SetTimer(timerCurr);
-  };
-  const scroll = (n, last) => {
-    SetAnimate(true);
-    setTimeout(() => {
-      let long = distance;
-      long -= height / 100;
-      SetDistance(long);
-      if (last) {
-        scrollList.current.push(scrollList.current[0]);
-        scrollList.current.shift();
-        SetDistance(0);
-        SetAnimate(false);
-      }
-    }, n * speed);
-  };
   const handleClickIcon = (event) => {
     event.stopPropagation();
-    SetShowNoticeBar(!closeMode);
+    SetShowNoticeBar(!closeable);
     close && close(event);
     onClose && onClose(event);
   };
   const isEllipsis = () => {
     if (isCanScroll == null) {
-      return wrapable;
+      return wrap;
     }
-    return !isCanScroll && !wrapable;
+    return !isCanScroll && !wrap;
   };
   const contentStyle = {
     animationDelay: `${firstRound ? delay : 0}s`,
-    animationDuration: `${duration}s`,
+    animationDuration: `${animationDuration}s`,
     transform: `translateX(${firstRound ? 0 : `${wrapWidth}px`})`
   };
   const barStyle = {
-    color,
-    background,
     height: isVertical ? `${height}px` : ""
   };
   const duringTime = height / speed / 4 < 1 ? Number((height / speed / 4).toFixed(1)) : ~~(height / speed / 4);
   const noDuring = height / speed < 1 ? (height / speed).toFixed(1) : ~~(height / speed);
   const horseLampStyle = {
-    transform: complexAm ? `translateY(${distance}px)` : "",
     transition: animate ? `all ${duringTime === 0 ? noDuring : duringTime}s` : "",
     marginTop: animate ? `-${height}px` : ""
   };
-  const b = cn("noticebar");
-  const noticebarClass = classNames({
-    "nut-noticebar-page": true,
-    withicon: closeMode,
-    close: closeMode,
-    wrapable
-  });
   const init = (active2 = 0) => {
     if (!(container == null ? void 0 : container.current))
       return;
     setTimeout(async () => {
       const rects = await getRectByTaro(container == null ? void 0 : container.current);
       const _active = Math.max(Math.min(childCount - 1, active2), 0);
-      const _height = rects.height;
+      const _height = rects == null ? void 0 : rects.height;
       trackSize = childCount * Number(_height);
       const targetOffset = getOffset(_active);
-      _swiper.current.moving = true;
+      swiperRef.current.moving = true;
       if (ready) {
-        _swiper.current.moving = false;
+        swiperRef.current.moving = false;
       }
       active2 = _active;
       setRect(rects);
@@ -259,17 +218,17 @@ const NoticeBar = (props) => {
     }
   }, [children, container == null ? void 0 : container.current]);
   const stopAutoPlay = () => {
-    clearTimeout(_swiper.current.autoplayTimer);
-    _swiper.current.autoplayTimer = null;
+    clearTimeout(swiperRef.current.autoplayTimer);
+    swiperRef.current.autoplayTimer = null;
   };
   const autoplay = () => {
     if (childCount <= 1)
       return;
     stopAutoPlay();
-    _swiper.current.autoplayTimer = setTimeout(() => {
+    swiperRef.current.autoplayTimer = setTimeout(() => {
       next();
       autoplay();
-    }, Number(standTime) + 100 * speed);
+    }, Number(duration) + 100 * speed);
   };
   const move = ({ pace = 0, offset: offset2 = 0 }) => {
     if (childCount <= 1)
@@ -293,7 +252,7 @@ const NoticeBar = (props) => {
     resettPosition();
     requestFrame(() => {
       requestFrame(() => {
-        _swiper.current.moving = false;
+        swiperRef.current.moving = false;
         move({
           pace: 1
         });
@@ -306,9 +265,9 @@ const NoticeBar = (props) => {
   const getStyle = (moveOffset = offset) => {
     const target = innerRef.current;
     let _offset = 0;
-    const val = rect.height - height;
+    const val = (rect == null ? void 0 : rect.height) - height;
     _offset = moveOffset + Number(active === childCount - 1 && val / 2);
-    target.style.transitionDuration = `${_swiper.current.moving ? 0 : standTime}ms`;
+    target.style.transitionDuration = `${swiperRef.current.moving ? 0 : duration}ms`;
     target.style.height = `${Number(height) * childCount}px`;
     target.style.transform = `translate3D(0,${_offset}px,0)`;
   };
@@ -343,7 +302,7 @@ const NoticeBar = (props) => {
     return Math.min(Math.max(num, min), max);
   };
   const resettPosition = () => {
-    _swiper.current.moving = true;
+    swiperRef.current.moving = true;
     if (active <= -1) {
       move({ pace: childCount });
     }
@@ -351,6 +310,12 @@ const NoticeBar = (props) => {
       move({ pace: -childCount });
     }
   };
+  const noticebarClass = classNames({
+    "nut-noticebar-page": true,
+    withicon: closeable,
+    close: closeable,
+    wrapable: wrap
+  });
   useEffect(() => {
     return () => {
       stopAutoPlay();
@@ -358,36 +323,32 @@ const NoticeBar = (props) => {
   }, []);
   return React.createElement(
     "div",
-    { className: `${b()} ${className || ""}`, style },
-    showNoticeBar && direction === "across" ? React.createElement(
+    { className: `${classPrefix} ${className || ""}`, style },
+    showNoticeBar && direction === "horizontal" ? React.createElement(
       "div",
       { className: noticebarClass, style: barStyle, onClick: handleClick },
-      React.createElement("div", { className: "left-icon" }, leftIcon || React.createElement(Notice, { size: 16, color })),
+      React.createElement("div", { className: "left-icon" }, leftIcon || React.createElement(Notice, { size: 16 })),
       React.createElement(
         "div",
-        { ref: wrap, className: "wrap" },
+        { ref: wrapRef, className: "wrap" },
         React.createElement(
           "div",
-          { ref: content, className: `content ${animationClass} ${isEllipsis() ? "nut-ellipsis" : ""}`, style: contentStyle, onAnimationEnd },
+          { ref: contentRef, className: `content ${animationClass} ${isEllipsis() ? "nut-ellipsis" : ""}`, style: contentStyle, onAnimationEnd },
           children,
-          text
+          content
         )
       ),
-      closeMode || rightIcon ? React.createElement("div", { className: "right-icon", onClick: onClickIcon }, rightIcon || React.createElement(Close, { size: 12, color })) : null
+      closeable || rightIcon ? React.createElement("div", { className: "right-icon", onClick: onClickIcon }, rightIcon || React.createElement(Close, { size: 12 })) : null
     ) : null,
     showNoticeBar && scrollList.current.length > 0 && isVertical ? React.createElement(
       "div",
       { className: "nut-noticebar-vertical", style: barStyle, ref: container, onClick: handleClick },
       leftIcon ? React.createElement("div", { className: "left-icon" }, leftIcon) : null,
-      children ? React.createElement(
-        React.Fragment,
-        null,
-        React.createElement("div", { className: "nut-noticebar__inner", ref: innerRef }, scrollList.current.map((item, index) => {
-          return React.createElement("div", { className: "scroll-inner ", style: itemStyle(index), key: index, onClick: (e) => {
-            handleItemClick(e, item);
-          } }, item);
-        }))
-      ) : React.createElement("div", { className: "horseLamp_list", style: horseLampStyle }, scrollList.current.map((item, index) => {
+      children ? React.createElement("div", { className: "nut-noticebar__inner", ref: innerRef }, scrollList.current.map((item, index) => {
+        return React.createElement("div", { className: "scroll-inner ", style: itemStyle(index), key: index, onClick: (e) => {
+          handleItemClick(e, item);
+        } }, item);
+      })) : React.createElement("div", { className: "horseLamp_list", style: horseLampStyle }, scrollList.current.map((item, index) => {
         return (
           // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
           React.createElement("div", { className: "horseLamp_list_item", style: { height }, key: index, onClick: (e) => {
@@ -397,7 +358,7 @@ const NoticeBar = (props) => {
       })),
       React.createElement("div", { className: "go", onClick: (e) => {
         handleClickIcon(e);
-      } }, rightIcon || (closeMode ? React.createElement(Close, { size: 12, color }) : null))
+      } }, rightIcon || (closeable ? React.createElement(Close, { size: 12 }) : null))
     ) : null
   );
 };

package/dist/esm/{notify.taro-6b6eb6bf.js → notify.taro-5768403d.js}

@@ -1,25 +1,22 @@
 import React, { useState, useEffect } from "react";
 import classNames from "classnames";
 import { CSSTransition } from "react-transition-group";
-import { c as cn } from "./bem-cdccae08.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
 const defaultProps = {
+  ...ComponentDefaults,
   id: "",
-  msg: "",
-  color: "",
   duration: 3e3,
   type: "danger",
-  className: "",
-  background: "",
   position: "top",
-  isWrapTeleport: true,
   visible: false,
-  onClosed: () => {
+  onClose: () => {
   },
   onClick: () => {
   }
 };
+const classPrefix = "nut-notify";
 const Notify = (props) => {
-  const { id, children, style, msg, color, background, type, className, position, isWrapTeleport, visible, duration, onClosed, onClick, ...rest } = { ...defaultProps, ...props };
+  const { id, children, style, type, className, position, visible, duration, onClose, onClick, ...rest } = { ...defaultProps, ...props };
   let timer;
   const [showNotify, SetShow] = useState(false);
   useEffect(() => {
@@ -53,14 +50,13 @@ const Notify = (props) => {
       const element = document.getElementById(id);
       element && element.parentNode && element.parentNode.removeChild(element);
     }
-    onClosed();
+    onClose();
   };
-  cn("notify");
   const classes = classNames({
-    "nut-notify--popup-top": position === "top",
-    "nut-notify--popup-bottom": position === "bottom",
-    "nut-notify": true,
-    [`nut-notify--${type}`]: true
+    [`${classPrefix}--popup-top`]: position === "top",
+    [`${classPrefix}--popup-bottom`]: position === "bottom",
+    [`${classPrefix}`]: true,
+    [`${classPrefix}--${type}`]: true
   });
   return React.createElement(
     React.Fragment,
@@ -68,10 +64,7 @@ const Notify = (props) => {
     React.createElement(
       CSSTransition,
       { in: showNotify, timeout: 300, classNames: "fade", unmountOnExit: true, appear: true, position, id },
-      React.createElement("div", { className: `${classes} ${className}`, style: {
-        color: `${color || ""}`,
-        background: `${background || ""}`
-      }, onClick: clickHandle }, children || msg)
+      React.createElement("div", { className: `${classes} ${className}`, style, onClick: clickHandle }, children)
     )
   );
 };

package/dist/esm/numberkeyboard.taro-f245cb85.js

@@ -0,0 +1,136 @@
+import React, { useMemo, useState } from "react";
+import classNames from "classnames";
+import { RectDown } from "@nutui/icons-react-taro";
+import { View } from "@tarojs/components";
+import { P as Popup } from "./popup.taro-23f882b0.js";
+import { u as useConfig } from "./configprovider.taro-a7f3bcfd.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  visible: false,
+  type: "default",
+  custom: [],
+  random: false,
+  onClose: () => {
+  }
+};
+const NumberKeyboard = (props) => {
+  const { locale } = useConfig();
+  const { title, confirmText, visible, type, custom, random, style, className, onChange, onDelete, onClose, onConfirm, ...rest } = props;
+  const classPrefix = "nut-numberkeyboard";
+  const getBasicKeys = () => {
+    const keys = new Array(9).fill(0).map((_, index) => {
+      return {
+        id: String(index + 1),
+        type: "num"
+      };
+    });
+    return random ? keys.sort(() => Math.random() > 0.5 ? 1 : -1) : keys;
+  };
+  const getCustomKeys = () => {
+    const customKeys = [
+      { id: "close", type: "close" },
+      { id: "0", type: "num" },
+      { id: "delete", type: "delete" }
+    ];
+    if (!custom)
+      return customKeys;
+    if (custom.length > 0) {
+      customKeys[0] = { id: custom[0], type: "custom" };
+    }
+    if (custom.length > 1) {
+      customKeys[2] = { id: custom[1], type: "custom" };
+    }
+    return customKeys;
+  };
+  const keysList = useMemo(() => {
+    return [...getBasicKeys(), ...getCustomKeys()];
+  }, [type, random, custom]);
+  const DeleteIcon = () => {
+    const style2 = {
+      background: `url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAnCAYAAABJ0cukAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozOUNBQTQ0MkY3RTMxMUVBQjIzNEJCQkYxNDZGQjg5OCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozOUNBQTQ0M0Y3RTMxMUVBQjIzNEJCQkYxNDZGQjg5OCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjM5Q0FBNDQwRjdFMzExRUFCMjM0QkJCRjE0NkZCODk4IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjM5Q0FBNDQxRjdFMzExRUFCMjM0QkJCRjE0NkZCODk4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+T12ahwAABClJREFUeNrUWVtIFFEY3pkdrbaCiAINK81VW3d2102pjKLtoXoJrNAswoeEXoyilx7sJXvIh6CHAoMg6yEfSpdECIqE0jCMbMm9qCVYUmR5S8huXmZO39nWOI7mzsy6uzqgM/vvzNnv+y/n/84ZjhBiWMwHF+kA+fn5y0ZHRzNwuTomgDnui9/vfzMvBJxWa7bE87W4tMbY8S8MhNz0BQLVugnY7fZdGORZPNNHJmSPUSf47QD/PN75z3NcpqD1IVEU8wC+dZojDIajyMu6WAG322zBmQf/7LzGnHeAdRtjmuAIKYoleMWxQnUEHA6HVZLldsb0m3oehdQQzzQSVILPJLIcYEw/4HkK/kG86yAsAZvNtgng3059hte/Gf56/uFCaGR8mIJdj3m2hzGNGAkpRM4vCPBzErBYLMko2A//DIQMoQ0WtgcCjWFnCVGswEzxCecqLc0y9Nyww2ariYhAbm7umgRB6GNM/QTgfT7fEzWD4t7dOK0D4TKAcrtcLkENeNx/gUoSpOnx4Gc9BHJyclZNjI8PMqY+judp2jSr1iuENDPi5fDX4WG32WxeogL81NGRIEk3NBNAh10uS9IIY/oIbxR6vd4WLXmJAq9Ayl1kTAUmk8mNyJrUgDfK8hFPV9dnTQSCHiLkO/Ndb8jzrXqKawYJQg4gsu6srKyV4cC/7ujo1CqneRSPxNh74PligPdE3PYVIDHuY6PRWCxPTp7VC35KSvwjwBpwdPP4gXYc86ZdZnr6Pf7S9HqexUs9z0qBLprz8wn+PzWRFknaKGsgjwlvCdLGH42GQ0lg+dqkMP+Enj+lF/yMWYgnJD1qEhhphOWgS2E2yQZDJWa/lEgIvGIa0D2HKJZGA7yiBgaZqO9AermdFstGXQR8fn+BootW4wfPRBE8zXmXoia2SYLgpsJRVwqBBJ2N+pnueRVhPR8l8MGCnaWw8wDCDSWQoasGQCKJnpjGcwkkKqMBfo7ZyQklQCOxWVcRg4QDXmhkSJRjsGvRAD8HCTuNhNPpXKtLzHn9/n0orBqm052GvL2lcfepTMs8PwsJqyRJRbrlNFpBCUBcYWaKE2h4tampqUtV6pP60HNtapuUksTY2NidiLcWUQPnMOhlxvQoITGxxOPxDIVdR2dnb/V2dr7Umn50/Q31261JC4UhUQYSVUxdtPCCUAK10RuvZeQ0LRQ2tD7fddxdyuT3TijJehATF/yinqmJ2wB+jCGRA11TH9xiXAwEQpG4i0gcZHLPjHSqF0Vx76IgEIpEA9a7+3H5K2RK4jnuPvTToXgR0LW9Htpap71iAzPVNsUIMH0XMdXkfLrfD9BdanifksiKW/5w3Emj3mcHBgb6kpKTn6KYzfBCehzg10H6lHPzMdIWq9U8znEpsXE6N4rTO9TjSGgPanG/pfwjwABn1PZcM5XI0AAAAABJRU5ErkJggg0KLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLTkwMjA5MzIyMjIxMzkzMzc2NzAwNjg0MC0tDQo=') no-repeat center`,
+      backgroundSize: "100% 100%",
+      width: "30px",
+      height: "24px"
+    };
+    return React.createElement(View, { style: style2 });
+  };
+  const NumberKeyboardKey = (props2) => {
+    const { item } = props2;
+    const [active, setActive] = useState(false);
+    const onTouchStart = () => {
+      setActive(true);
+    };
+    const onTouchEnd = (item2) => {
+      setActive(false);
+      if (item2.type === "num" || item2.type === "custom") {
+        onChange && onChange(item2.id);
+      }
+      if (item2.type === "close") {
+        onClose && onClose();
+      }
+      if (item2.type === "delete") {
+        onDelete && onDelete();
+      }
+      if (item2.type === "confirm") {
+        onConfirm && onConfirm();
+      }
+    };
+    return React.createElement(
+      "div",
+      { key: item.id, className: `${classPrefix}__body__wrapper` },
+      React.createElement(
+        "div",
+        { className: classNames({
+          key: true,
+          active,
+          close: item.type === "close",
+          delete: item.type === "delete",
+          confirm: item.type === "confirm"
+        }), onTouchStart: () => onTouchStart(), onTouchEnd: () => onTouchEnd(item), onTouchCancel: () => onTouchEnd(item) },
+        (item.type === "num" || item.type === "custom") && React.createElement("div", null, item.id),
+        item.type === "delete" && React.createElement(DeleteIcon, null),
+        item.type === "close" && React.createElement(RectDown, { size: 25 }),
+        item.type === "confirm" && React.createElement(React.Fragment, null, confirmText || locale.done)
+      )
+    );
+  };
+  return React.createElement(
+    Popup,
+    { visible, position: "bottom", onClickOverlay: onClose, onClickCloseIcon: onClose, overlayStyle: { backgroundColor: "rgba(0, 0, 0, 0)" }, ...rest },
+    React.createElement(
+      "div",
+      { className: classNames(classPrefix, className), style },
+      title && React.createElement(
+        "div",
+        { className: `${classPrefix}__header` },
+        React.createElement("h3", { className: `${classPrefix}__header__title` }, title),
+        type === "default" && React.createElement("span", { className: `${classPrefix}__header__close`, onClick: onClose }, locale.done)
+      ),
+      React.createElement(
+        "div",
+        { className: `${classPrefix}__body` },
+        React.createElement("div", { className: `${classPrefix}__body__keys` }, keysList == null ? void 0 : keysList.map((item) => {
+          return React.createElement(NumberKeyboardKey, { key: item.id, item });
+        })),
+        type === "rightColumn" && React.createElement(
+          "div",
+          { className: `${classPrefix}__sidebar` },
+          React.createElement(NumberKeyboardKey, { key: "delete", item: {
+            id: "delete",
+            type: "delete"
+          } }),
+          React.createElement(NumberKeyboardKey, { key: "confirm", item: {
+            id: "confirm",
+            type: "confirm"
+          } })
+        )
+      )
+    )
+  );
+};
+NumberKeyboard.defaultProps = defaultProps;
+NumberKeyboard.displayName = "NutNumberKeyboard";
+export {
+  NumberKeyboard as N
+};