@nutui/nutui-react-taro 2.0.0-alpha.5 → 2.0.0-alpha.6

package/dist/esm/numberkeyboard.taro-0a0e866a.js

@@ -0,0 +1,183 @@
+import React, { useState, useEffect } from "react";
+import classNames from "classnames";
+import { c as cn } from "./bem-cdccae08.js";
+import { P as Popup } from "./popup.taro-e756f3fc.js";
+import { u as useConfig } from "./configprovider.taro-25758d9f.js";
+const defaultProps = {
+  confirmText: "",
+  title: "",
+  visible: false,
+  overlay: false,
+  type: "default",
+  customKey: [],
+  className: "",
+  randomKeys: false,
+  popClass: "",
+  onClose: () => {
+  }
+};
+const NumberKeyboard = (props) => {
+  const { locale } = useConfig();
+  const { title, confirmText, visible, overlay, type, customKey, randomKeys, popClass, style, className, onChange, onDelete, onClose } = props;
+  const b = cn("numberkeyboard");
+  const [show, setShow] = useState(visible);
+  const [clickKeyIndex, setClickKeyIndex] = useState(void 0);
+  const [keysList, setKeysList] = useState([]);
+  useEffect(() => {
+    setShow(visible);
+  }, [visible]);
+  const defaultKey = () => {
+    let leftBottomKey = {
+      id: "lock",
+      type: "lock"
+    };
+    if (customKey) {
+      const customKeys = Array.isArray(customKey) ? customKey : [customKey];
+      if (customKeys.length > 0) {
+        const newCustomKey = customKeys[0];
+        leftBottomKey = {
+          id: newCustomKey,
+          type: "custom"
+        };
+      }
+    }
+    return [
+      ...getBasicKeys(),
+      leftBottomKey,
+      { id: 0, type: "number" },
+      { id: "delete", type: "delete" }
+    ];
+  };
+  const getBasicKeys = () => {
+    const keys = [];
+    for (let i = 1; i <= 9; i++) {
+      keys.push({ id: i, type: "number" });
+    }
+    if (randomKeys) {
+      return keys.sort(() => Math.random() > 0.5 ? 1 : -1);
+    }
+    return keys;
+  };
+  const genCustomKeys = () => {
+    const keys = getBasicKeys();
+    if (!customKey)
+      return [];
+    let customKeys = Array.isArray(customKey) ? customKey : [customKey];
+    if (customKeys.length > 2) {
+      customKeys = [customKeys[0], customKeys[1]];
+    }
+    if (customKeys.length === 2 && props.title && props.type !== "rightColumn") {
+      customKeys = [customKeys[0]];
+    }
+    if (customKeys.length === 1) {
+      if (props.title && props.type !== "rightColumn") {
+        keys.push({ id: customKeys[0], type: "custom" }, { id: 0, type: "number" }, { id: "delete", type: "delete" });
+      } else {
+        keys.push({ id: 0, type: "number" }, { id: customKeys[0], type: "custom" });
+      }
+    } else if (customKeys.length === 2) {
+      keys.push({ id: customKeys[0], type: "custom" }, { id: 0, type: "number" }, { id: customKeys[1], type: "custom" });
+    }
+    return keys;
+  };
+  useEffect(() => {
+    if (props.type === "rightColumn" || props.title !== "") {
+      setKeysList(genCustomKeys());
+    } else {
+      setKeysList(defaultKey());
+    }
+  }, []);
+  const onTouchstart = (item, event) => {
+    event.stopPropagation();
+    setClickKeyIndex(item.id);
+    if (item.type === "number" || item.type === "custom") {
+      onChange && onChange(item.id);
+    }
+    if (item.type === "lock") {
+      onClose && onClose();
+    }
+    if (item.type === "delete") {
+      onDelete && onDelete();
+    }
+  };
+  const onTouchMove = (event) => {
+    event.stopPropagation();
+  };
+  const onTouchEnd = (event) => {
+    event.preventDefault();
+    setClickKeyIndex(void 0);
+  };
+  return React.createElement(
+    "div",
+    null,
+    React.createElement(
+      Popup,
+      { visible: show, overlay, position: "bottom", className: popClass, onClickOverlay: onClose, onClickCloseIcon: onClose, overlayStyle: { backgroundColor: "rgba(0, 0, 0, 0)" } },
+      React.createElement(
+        "div",
+        { className: `${b()} ${className}`, style: { ...style } },
+        title ? React.createElement(
+          "div",
+          { className: b("header") },
+          React.createElement("h3", { className: b("header__tit") }, title),
+          type === "default" ? React.createElement("span", { className: b("header__close"), onClick: onClose }, locale.done) : null
+        ) : null,
+        React.createElement(
+          "div",
+          { className: b("body") },
+          React.createElement("div", { className: b("body__keys") }, keysList == null ? void 0 : keysList.map((item, index) => {
+            return React.createElement(
+              "div",
+              { key: index, className: classNames({
+                "key-board-wrapper": true,
+                "key-board-wrapper-large": item.id === 0 && type === "rightColumn" && Array.isArray(customKey) && customKey.length === 1
+              }) },
+              React.createElement(
+                "div",
+                { className: classNames({
+                  key: true,
+                  active: item.id === clickKeyIndex,
+                  lock: item.type === "lock",
+                  delete: item.type === "delete"
+                }), onTouchStart: (event) => onTouchstart(item, event), onTouchMove, onTouchEnd },
+                item.type === "number" || item.type === "custom" ? React.createElement("div", null, item.id) : null,
+                item.type === "lock" ? React.createElement("img", { src: "https://img11.360buyimg.com/imagetools/jfs/t1/146371/38/8485/738/5f606425Eca239740/14f4b4f5f20d8a68.png", alt: "" }) : null,
+                item.type === "delete" ? React.createElement("img", { src: "https://img11.360buyimg.com/imagetools/jfs/t1/129395/8/12735/2030/5f61ac37E70cab338/fb477dc11f46056c.png", alt: "" }) : null
+              )
+            );
+          })),
+          type === "rightColumn" ? React.createElement(
+            "div",
+            { className: b("sidebar") },
+            React.createElement(
+              "div",
+              { className: "key-board-wrapper" },
+              React.createElement(
+                "div",
+                { className: classNames({
+                  key: true,
+                  active: clickKeyIndex === "delete"
+                }), onTouchStart: (event) => onTouchstart({ id: "delete", type: "delete" }, event), onTouchMove, onTouchEnd },
+                React.createElement("img", { src: "https://img11.360buyimg.com/imagetools/jfs/t1/129395/8/12735/2030/5f61ac37E70cab338/fb477dc11f46056c.png", alt: "" })
+              )
+            ),
+            React.createElement(
+              "div",
+              { className: "key-board-wrapper key-board-finish", onClick: onClose },
+              React.createElement("div", { className: classNames({
+                key: true,
+                finish: true,
+                activeFinsh: clickKeyIndex === "finish"
+              }) }, confirmText || locale.done)
+            )
+          ) : null
+        )
+      )
+    )
+  );
+};
+NumberKeyboard.defaultProps = defaultProps;
+NumberKeyboard.displayName = "NutNumberKeyboard";
+export {
+  NumberKeyboard as N
+};

package/dist/esm/nutui-react.es.js

@@ -1,116 +1,211 @@
-export { B as Button } from './button.taro-b50bc217.js';
-export { C as Cell } from './cell.taro-ea725a95.js';
-export { C as CellGroup } from './cellgroup.taro-e05ea802.js';
-export { C as ConfigProvider } from './configprovider.taro-ce34d482.js';
-export { I as Image } from './image.taro-3025e659.js';
-export { O as Overlay } from './overlay.taro-067b7202.js';
-export { C as Col } from './col.taro-4477c9f7.js';
-export { D as Divider } from './divider.taro-3993d7d5.js';
-export { G as Grid } from './grid.taro-883a9c35.js';
-export { G as GridItem } from './griditem.taro-16c7055b.js';
-export { L as Layout } from './layout.taro-e4bf83cb.js';
-export { R as Row } from './row.taro-e929ec5c.js';
-export { S as Sticky } from './sticky.taro-a142a5f2.js';
-export { B as BackTop } from './backtop.taro-8ec80d02.js';
-export { E as Elevator } from './elevator.taro-1a4e3356.js';
-export { F as FixedNav } from './fixednav.taro-ddb21e87.js';
-export { N as NavBar } from './navbar.taro-92bab9c4.js';
-export { S as SideNavBar } from './sidenavbar.taro-f8ffb7dc.js';
-export { S as SideNavBarItem } from './sidenavbaritem.taro-6cb0821e.js';
-export { S as SubSideNavBar } from './subsidenavbar.taro-85c03291.js';
-export { T as Tabbar } from './tabbar.taro-48413fb8.js';
-export { T as TabbarItem } from './tabbaritem.taro-5afa3562.js';
-export { T as TabPane } from './tabpane.taro-406cc0d3.js';
-export { T as Tabs } from './tabs.taro-d47ccfc5.js';
-export { A as Address } from './address.taro-cab0ea22.js';
-export { C as Calendar } from './calendar.taro-2fc9b899.js';
-export { C as CalendarItem } from './calendaritem.taro-2d4a8c34.js';
-export { C as Cascader } from './cascader.taro-467910b2.js';
-export { C as Checkbox, a as CheckboxGroup } from './checkbox.taro-9d02f86c.js';
-export { D as DatePicker } from './datepicker.taro-2e3e955b.js';
-export { F as Form } from './form.taro-423b0f0a.js';
-export { F as FormItem } from './formitem.taro-b550d29c.js';
-export { I as Input } from './input.taro-06c1e4d5.js';
-export { I as InputNumber } from './inputnumber.taro-1f893d42.js';
-export { M as Menu } from './menu.taro-e5c68cb8.js';
-export { M as MenuItem } from './menuitem.taro-37c18382.js';
-export { N as NumberKeyboard } from './numberkeyboard.taro-d9b1721b.js';
-export { P as Picker } from './picker.taro-e16b4312.js';
-export { R as Radio, a as RadioGroup } from './radio.taro-36438449.js';
-export { R as Range } from './range.taro-8953e8c3.js';
-export { R as Rate } from './rate.taro-895bb41c.js';
-export { S as SearchBar } from './searchbar.taro-4467040f.js';
-export { S as ShortPassword } from './shortpassword.taro-433b86a4.js';
-export { S as Signature } from './signature.taro-a4d9b5c9.js';
-export { S as Switch } from './switch.taro-e82809f6.js';
-export { T as TextArea } from './textarea.taro-add72cf3.js';
-export { U as Uploader } from './uploader.taro-c70d00de.js';
-export { A as ActionSheet } from './actionsheet.taro-12cf5a3e.js';
-export { B as Badge } from './badge.taro-e2169fbe.js';
-export { B as Dialog } from './dialog.taro-eab19eab.js';
-export { D as Drag } from './drag.taro-347dfb84.js';
-export { E as Empty } from './empty.taro-26363c66.js';
-export { I as Infiniteloading } from './infiniteloading.taro-721bca1f.js';
-export { N as NoticeBar } from './noticebar.taro-cbe93c9e.js';
-export { N as Notify } from './notify.taro-f1079218.js';
-export { P as Popover } from './popover.taro-84a55ff9.js';
-export { P as PullToRefresh } from './pulltorefresh.taro-016d0079.js';
-export { S as Skeleton } from './skeleton.taro-8ec11af9.js';
-export { S as Swipe } from './swipe.taro-0b8cc872.js';
-export { P as Popup } from './popup.taro-89cc342a.js';
-export { T as Toast } from './toast.taro-c509a870.js';
-export { A as Animate } from './animate.taro-485331bb.js';
-export { A as AnimatingNumbers } from './animatingnumbers.taro-f6eaffef.js';
-export { A as Audio } from './audio.taro-ff280f5e.js';
-export { A as Avatar } from './avatar.taro-6e8f1f5c.js';
-export { A as AvatarGroup } from './avatargroup-f4375806.js';
-export { C as CircleProgress } from './circleprogress.taro-d4943109.js';
-export { C as Collapse } from './collapse.taro-89bcadf2.js';
-export { C as CollapseItem } from './collapseitem-0e228cec.js';
-export { C as CountDown } from './countdown.taro-3118ba23.js';
-export { E as Ellipsis } from './ellipsis.taro-e1ac99a1.js';
-export { I as ImagePreview } from './imagepreview.taro-d511342c.js';
-export { I as Indicator } from './indicator.taro-bfb21d45.js';
-export { V as VirtualList } from './virtuallist.taro-ba8e1f21.js';
-export { P as Pagination } from './pagination.taro-94f9be5e.js';
-export { P as Price } from './price.taro-959d82f2.js';
-export { P as Progress } from './progress.taro-1a7ac8a4.js';
-export { S as Step } from './step.taro-7ea33a76.js';
-export { S as Steps } from './steps.taro-86753d36.js';
-export { S as Swiper } from './swiper.taro-c0e9a56b.js';
-export { S as SwiperItem } from './swiperitem-abab7606.js';
-export { T as Table } from './table.taro-327b4248.js';
-export { T as Tag } from './tag.taro-846ee805.js';
-export { V as Video } from './video-1c6405b4.js';
-export { B as Barrage } from './barrage.taro-aa08da6c.js';
-export { C as Card } from './card.taro-0e849e94.js';
-export { T as TimeDetail } from './timedetail.taro-82a2900b.js';
-export { T as TimePannel } from './timepannel.taro-0573bb65.js';
-export { T as TimeSelect } from './timeselect.taro-29124a34.js';
-export { T as TrendArrow } from './trendarrow.taro-dd83ec94.js';
-export { W as WaterMark } from './watermark.taro-168cdac5.js';
-import 'react';
-import 'classnames';
-import '@nutui/icons-react-taro';
-import './typings-d8491423.js';
-import 'lodash.kebabcase';
-import '@tarojs/components';
-import './UserContext-0aac9a82.js';
-import '@tarojs/taro';
-import './use-client-rect-1f8ed1fe.js';
-import './get-scroll-parent-b4a07e65.js';
-import './can-use-dom-3eeb5af4.js';
-import './offsetContext-c2a746fa.js';
-import './use-props-value-ae7ee726.js';
-import './bem-350c1702.js';
-import '@bem-react/classname';
-import 'react-transition-group';
-import './use-touch-db24bb5c.js';
-import './supports-passive-c85ef996.js';
-import './index-5bcb0ff8.js';
-import '@use-gesture/react';
-import '@react-spring/web';
-import 'react-dom';
-import './context-c96afdcc.js';
-import './UserContext-e402e1a6.js';
-import './UserContext-e8176108.js';
+import { B } from "./button.taro-01eae688.js";
+import { C } from "./cell.taro-4e31d1fa.js";
+import { C as C2 } from "./cellgroup.taro-a790d91b.js";
+import { C as C3 } from "./configprovider.taro-25758d9f.js";
+import { I } from "./image.taro-767aa000.js";
+import { O } from "./overlay.taro-75012bd3.js";
+import { C as C4 } from "./col.taro-d6a46a7d.js";
+import { D } from "./divider.taro-0cb5f894.js";
+import { G } from "./grid.taro-fbbd8618.js";
+import { G as G2 } from "./griditem.taro-b0c37077.js";
+import { L } from "./layout.taro-9659a928.js";
+import { R } from "./row.taro-8b7febd4.js";
+import { S } from "./sticky.taro-3c03eb0a.js";
+import { B as B2 } from "./backtop.taro-7de36464.js";
+import { E } from "./elevator.taro-bc162e4f.js";
+import { F } from "./fixednav.taro-28e5f776.js";
+import { N } from "./navbar.taro-5e1a0835.js";
+import { S as S2 } from "./sidenavbar.taro-9f210df4.js";
+import { S as S3 } from "./sidenavbaritem.taro-32a45ce6.js";
+import { S as S4 } from "./subsidenavbar.taro-abe07673.js";
+import { T } from "./tabbar.taro-18eee41f.js";
+import { T as T2 } from "./tabbaritem.taro-89646ca1.js";
+import { T as T3 } from "./tabpane.taro-f8d92ece.js";
+import { T as T4 } from "./tabs.taro-56e46dd3.js";
+import { A } from "./address.taro-1c534feb.js";
+import { C as C5 } from "./calendar.taro-10a6cb11.js";
+import { C as C6 } from "./calendaritem.taro-3e5f114e.js";
+import { C as C7 } from "./cascader.taro-a8d2148e.js";
+import { C as C8, a } from "./checkbox.taro-016074da.js";
+import { D as D2 } from "./datepicker.taro-3f718964.js";
+import { F as F2 } from "./form.taro-b06754e8.js";
+import { F as F3 } from "./formitem.taro-b326809d.js";
+import { I as I2 } from "./input.taro-27d686c9.js";
+import { I as I3 } from "./inputnumber.taro-877dc947.js";
+import { M } from "./menu.taro-cd0fef41.js";
+import { M as M2 } from "./menuitem.taro-6076bffa.js";
+import { N as N2 } from "./numberkeyboard.taro-0a0e866a.js";
+import { P } from "./picker.taro-a5603921.js";
+import { R as R2, a as a2 } from "./radio.taro-3a54f4c8.js";
+import { R as R3 } from "./range.taro-52cda918.js";
+import { R as R4 } from "./rate.taro-78c66969.js";
+import { S as S5 } from "./searchbar.taro-37ade36e.js";
+import { S as S6 } from "./shortpassword.taro-f7292032.js";
+import { S as S7 } from "./signature.taro-c57469aa.js";
+import { S as S8 } from "./switch.taro-f0da73a3.js";
+import { T as T5 } from "./textarea.taro-c110565e.js";
+import { U } from "./uploader.taro-92977813.js";
+import { A as A2 } from "./actionsheet.taro-d2217152.js";
+import { B as B3 } from "./badge.taro-872605bf.js";
+import { B as B4 } from "./dialog.taro-290eb9a6.js";
+import { D as D3 } from "./drag.taro-48e1ff38.js";
+import { E as E2 } from "./empty.taro-ca792f57.js";
+import { I as I4 } from "./infiniteloading.taro-f8f23ac6.js";
+import { N as N3 } from "./noticebar.taro-b3bfd4fe.js";
+import { N as N4 } from "./notify.taro-6b6eb6bf.js";
+import { P as P2 } from "./popover.taro-ad483372.js";
+import { P as P3 } from "./pulltorefresh.taro-c611fd92.js";
+import { S as S9 } from "./skeleton.taro-9ff9baf4.js";
+import { S as S10 } from "./swipe.taro-de80fcd8.js";
+import { P as P4 } from "./popup.taro-e756f3fc.js";
+import { T as T6 } from "./toast.taro-92c10e1d.js";
+import { A as A3 } from "./animate.taro-c8b29242.js";
+import { A as A4 } from "./animatingnumbers.taro-c2a52dbd.js";
+import { A as A5 } from "./audio.taro-ec96ef80.js";
+import { A as A6 } from "./avatar.taro-01536aff.js";
+import { A as A7 } from "./avatargroup-ad5ffb46.js";
+import { C as C9 } from "./circleprogress.taro-7149e09d.js";
+import { C as C10 } from "./collapse.taro-3d997680.js";
+import { C as C11 } from "./collapseitem-f4571575.js";
+import { C as C12 } from "./countdown.taro-22200811.js";
+import { E as E3 } from "./ellipsis.taro-f9688dd7.js";
+import { I as I5 } from "./imagepreview.taro-8832dc01.js";
+import { I as I6 } from "./indicator.taro-f2bd212f.js";
+import { V } from "./virtuallist.taro-99f03769.js";
+import { P as P5 } from "./pagination.taro-63607c3b.js";
+import { P as P6 } from "./price.taro-c4f45310.js";
+import { P as P7 } from "./progress.taro-ff63be75.js";
+import { S as S11 } from "./step.taro-3bc01c0c.js";
+import { S as S12 } from "./steps.taro-77e301ab.js";
+import { S as S13 } from "./swiper.taro-74cf9306.js";
+import { S as S14 } from "./swiperitem-80df464a.js";
+import { T as T7 } from "./table.taro-15a55c5d.js";
+import { T as T8 } from "./tag.taro-1b4134a5.js";
+import { V as V2 } from "./video-5d106e33.js";
+import { B as B5 } from "./barrage.taro-c8cb9864.js";
+import { C as C13 } from "./card.taro-a46fdf25.js";
+import { T as T9 } from "./timedetail.taro-8d2acbbf.js";
+import { T as T10 } from "./timepannel.taro-ee4c5dfa.js";
+import { T as T11 } from "./timeselect.taro-069deedd.js";
+import { T as T12 } from "./trendarrow.taro-0cf43935.js";
+import { W } from "./watermark.taro-cef29c03.js";
+import "react";
+import "classnames";
+import "@nutui/icons-react-taro";
+import "./typings-11d83a22.js";
+import "@tarojs/components";
+import "./UserContext-ab42ba7f.js";
+import "@tarojs/taro";
+import "./use-client-rect-f317804e.js";
+import "./get-scroll-parent-8da04f2e.js";
+import "./can-use-dom-0e539bd3.js";
+import "./offsetContext-f32a9246.js";
+import "./use-props-value-7ac1b1b5.js";
+import "./bem-cdccae08.js";
+import "@bem-react/classname";
+import "./ConfigProvider.js";
+import "react-transition-group";
+import "./use-touch-ff43512c.js";
+import "./supports-passive-aaaf0eff.js";
+import "./index-e3184f19.js";
+import "@use-gesture/react";
+import "@react-spring/web";
+import "react-dom";
+import "./context-d0fccf11.js";
+import "./UserContext-fde5badc.js";
+import "./UserContext-735db09f.js";
+export {
+  A2 as ActionSheet,
+  A as Address,
+  A3 as Animate,
+  A4 as AnimatingNumbers,
+  A5 as Audio,
+  A6 as Avatar,
+  A7 as AvatarGroup,
+  B2 as BackTop,
+  B3 as Badge,
+  B5 as Barrage,
+  B as Button,
+  C5 as Calendar,
+  C6 as CalendarItem,
+  C13 as Card,
+  C7 as Cascader,
+  C as Cell,
+  C2 as CellGroup,
+  C8 as Checkbox,
+  a as CheckboxGroup,
+  C9 as CircleProgress,
+  C4 as Col,
+  C10 as Collapse,
+  C11 as CollapseItem,
+  C3 as ConfigProvider,
+  C12 as CountDown,
+  D2 as DatePicker,
+  B4 as Dialog,
+  D as Divider,
+  D3 as Drag,
+  E as Elevator,
+  E3 as Ellipsis,
+  E2 as Empty,
+  F as FixedNav,
+  F2 as Form,
+  F3 as FormItem,
+  G as Grid,
+  G2 as GridItem,
+  I as Image,
+  I5 as ImagePreview,
+  I6 as Indicator,
+  I4 as Infiniteloading,
+  I2 as Input,
+  I3 as InputNumber,
+  L as Layout,
+  M as Menu,
+  M2 as MenuItem,
+  N as NavBar,
+  N3 as NoticeBar,
+  N4 as Notify,
+  N2 as NumberKeyboard,
+  O as Overlay,
+  P5 as Pagination,
+  P as Picker,
+  P2 as Popover,
+  P4 as Popup,
+  P6 as Price,
+  P7 as Progress,
+  P3 as PullToRefresh,
+  R2 as Radio,
+  a2 as RadioGroup,
+  R3 as Range,
+  R4 as Rate,
+  R as Row,
+  S5 as SearchBar,
+  S6 as ShortPassword,
+  S2 as SideNavBar,
+  S3 as SideNavBarItem,
+  S7 as Signature,
+  S9 as Skeleton,
+  S11 as Step,
+  S12 as Steps,
+  S as Sticky,
+  S4 as SubSideNavBar,
+  S10 as Swipe,
+  S13 as Swiper,
+  S14 as SwiperItem,
+  S8 as Switch,
+  T3 as TabPane,
+  T as Tabbar,
+  T2 as TabbarItem,
+  T7 as Table,
+  T4 as Tabs,
+  T8 as Tag,
+  T5 as TextArea,
+  T9 as TimeDetail,
+  T10 as TimePannel,
+  T11 as TimeSelect,
+  T6 as Toast,
+  T12 as TrendArrow,
+  U as Uploader,
+  V2 as Video,
+  V as VirtualList,
+  W as WaterMark
+};

package/dist/esm/offsetContext-f32a9246.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+const OffsetContext = createContext(20);
+export {
+  OffsetContext as O
+};

package/dist/esm/overlay.taro-75012bd3.js

@@ -0,0 +1,77 @@
+import React, { useRef, useEffect } from "react";
+import classNames from "classnames";
+import { View } from "@tarojs/components";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const defaultOverlayProps = {
+  ...ComponentDefaults,
+  zIndex: 1e3,
+  duration: 0.3,
+  closeOnOverlayClick: true,
+  visible: false,
+  lockScroll: true,
+  onClick: (event) => {
+  }
+};
+const Overlay = (props) => {
+  const { children, zIndex, duration, className, closeOnOverlayClick, visible, lockScroll, style, afterShow, afterClose, onClick, ...rest } = {
+    ...defaultOverlayProps,
+    ...props
+  };
+  const classPrefix = `nut-overlay`;
+  const renderRef = useRef(true);
+  const intervalCloseRef = useRef(0);
+  const intervalShowRef = useRef(0);
+  useEffect(() => {
+    if (visible) {
+      intervalShowRef.current = window.setTimeout(() => {
+        afterShow && afterShow();
+      }, duration * 1e3 * 0.8);
+    }
+    lock();
+  }, [visible]);
+  useEffect(() => {
+    return () => {
+      clearTimeout(intervalCloseRef.current);
+      clearTimeout(intervalShowRef.current);
+      document.body.classList.remove("nut-overflow-hidden");
+    };
+  }, []);
+  const classes = classNames({
+    "nut-overlay-fade-leave-active": !renderRef.current && !visible,
+    "nut-overlay-fade-enter-active": visible,
+    "nut-overlay-first-render": renderRef.current && !visible,
+    "nut-overlay-hidden-render": !visible
+  }, className, classPrefix);
+  const styles = {
+    zIndex,
+    animationDuration: `${props.duration}s`,
+    ...style
+  };
+  const lock = () => {
+    if (lockScroll && visible) {
+      document.body.classList.add("nut-overflow-hidden");
+    } else {
+      document.body.classList.remove("nut-overflow-hidden");
+    }
+  };
+  const handleClick = (e) => {
+    if (closeOnOverlayClick) {
+      onClick && onClick(e);
+      renderRef.current = false;
+      intervalCloseRef.current = window.setTimeout(() => {
+        afterClose && afterClose();
+      }, duration * 1e3 * 0.8);
+    }
+  };
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(View, { className: classes, style: styles, ...rest, catchMove: lockScroll, onClick: handleClick }, children)
+  );
+};
+Overlay.defaultProps = defaultOverlayProps;
+Overlay.displayName = "NutOverlay";
+export {
+  Overlay as O,
+  defaultOverlayProps as d
+};