@nutui/nutui-react-taro 2.0.0-alpha.0 → 2.0.0-alpha.10

package/dist/esm/audio.taro-bbd39f93.js

@@ -0,0 +1,185 @@
+import React, { useState, useRef } from "react";
+import { createInnerAudioContext } from "@tarojs/taro";
+import { Service } from "@nutui/icons-react-taro";
+import { R as Range } from "./range.taro-615e193a.js";
+import { B as Button } from "./button.taro-01eae688.js";
+import { c as cn } from "./bem-cdccae08.js";
+import { u as useConfig } from "./configprovider.taro-25758d9f.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const b = cn("audio");
+const warn = console.warn;
+const defaultProps = {
+  ...ComponentDefaults,
+  className: "",
+  url: "",
+  style: {},
+  autoplay: false,
+  loop: false,
+  type: "progress",
+  onFastBack: (ctx) => {
+  },
+  onForward: (ctx) => {
+  },
+  onPause: (ctx) => {
+  },
+  onPlay: (ctx) => {
+  },
+  onPlayEnd: (ctx) => {
+  },
+  onCanPlay: (ctx) => {
+  }
+};
+const Audio = (props) => {
+  const { locale } = useConfig();
+  const { className, url, style, autoplay, loop, type, onFastBack, onForward, onPause, onPlay, onPlayEnd, onCanPlay, children, iconClassPrefix, iconFontClassName, ...rest } = {
+    ...defaultProps,
+    ...props
+  };
+  const [playing, setPlaying] = useState(false);
+  const [totalSeconds, setTotalSeconds] = useState(0);
+  const [percent, setPercent] = useState(0);
+  const [isCanPlay, setIsCanPlay] = useState(false);
+  const [currentDuration, setCurrentDuration] = useState("00:00:00");
+  const statusRef = useRef({
+    currentTime: 0,
+    currentDuration: "00:00:00",
+    percent: 0
+  });
+  const audioRef = useRef(createInnerAudioContext());
+  const audioCtx = audioRef.current;
+  audioCtx.src = url;
+  audioCtx.autoplay = autoplay || false;
+  audioCtx.loop = loop || false;
+  audioCtx.onPause(() => {
+    props.onPause && props.onPause(audioCtx);
+  });
+  audioCtx.onEnded(() => {
+    if (props.loop) {
+      warn(locale.audio.tips || "onPlayEnd事件在loop=false时才会触发");
+    } else {
+      props.onPlayEnd && props.onPlayEnd(audioCtx);
+    }
+  });
+  audioCtx.onPlay(() => {
+    const { duration } = audioCtx;
+    setTotalSeconds(Math.floor(duration));
+    props.onPlay && props.onPlay(audioCtx);
+  });
+  audioCtx.onCanplay(() => {
+    const intervalID = setInterval(function() {
+      if (audioCtx.duration !== 0) {
+        setTotalSeconds(audioCtx.duration);
+        clearInterval(intervalID);
+      }
+    }, 500);
+    setIsCanPlay(true);
+    props.onCanPlay && props.onCanPlay(audioCtx);
+  });
+  audioCtx.onTimeUpdate(() => {
+    const time = parseInt(`${audioCtx.currentTime}`);
+    const formated = formatSeconds(`${time}`);
+    statusRef.current.currentDuration = formated;
+    setPercent(time / totalSeconds * 100);
+    setCurrentDuration(formatSeconds(audioCtx.currentTime.toString()));
+  });
+  audioCtx.onError((res) => {
+    console.log("code", res.errCode);
+    console.log("message", res.errMsg);
+  });
+  function formatSeconds(value) {
+    if (!value) {
+      return "00:00:00";
+    }
+    const time = parseInt(value);
+    const hours = Math.floor(time / 3600);
+    const minutes = Math.floor((time - hours * 3600) / 60);
+    const secondss = time - hours * 3600 - minutes * 60;
+    let result = "";
+    result += `${`0${hours.toString()}`.slice(-2)}:`;
+    result += `${`0${minutes.toString()}`.slice(-2)}:`;
+    result += `0${secondss.toString()}`.slice(-2);
+    return result;
+  }
+  const handleBack = () => {
+    const currentTime = Math.floor(audioCtx.currentTime);
+    statusRef.current.currentTime = Math.max(currentTime - 1, 0);
+    setCurrentDuration(formatSeconds(statusRef.current.currentTime.toString()));
+    audioCtx.seek(statusRef.current.currentTime);
+    props.onFastBack && props.onFastBack(audioCtx);
+  };
+  const handleForward = () => {
+    const currentTime = Math.floor(audioCtx.currentTime);
+    statusRef.current.currentTime = Math.min(currentTime + 1, audioCtx.duration);
+    setCurrentDuration(formatSeconds(statusRef.current.currentTime.toString()));
+    audioCtx.seek(statusRef.current.currentTime);
+    props.onForward && props.onForward(audioCtx);
+  };
+  const handleStatusChange = () => {
+    setPlaying(!playing);
+    if (!playing) {
+      audioCtx.play();
+    } else {
+      audioCtx.pause();
+    }
+  };
+  const renderIcon = () => {
+    return React.createElement(
+      React.Fragment,
+      null,
+      React.createElement(
+        "div",
+        { className: b("icon") },
+        React.createElement(
+          "div",
+          { className: `${b("icon-box")} ${playing ? b("icon-play") : b("icon-stop")}`, onClick: handleStatusChange },
+          React.createElement(Service, { className: playing ? "nut-icon-loading" : "" })
+        )
+      )
+    );
+  };
+  const renderProgerss = () => {
+    return React.createElement(
+      React.Fragment,
+      null,
+      React.createElement(
+        "div",
+        { className: b("progress") },
+        React.createElement("div", { className: "time" }, currentDuration),
+        React.createElement(
+          "div",
+          { className: b("progress-bar-wrapper") },
+          React.createElement(Range, { value: percent, onChange: (val) => setPercent(val), currentDescription: null, maxDescription: null, minDescription: null, "inactive-color": "#cccccc", "active-color": "#fa2c19" })
+        ),
+        React.createElement("div", { className: "time" }, formatSeconds(`${totalSeconds}`) || "00:00:00")
+      ),
+      React.createElement(
+        "div",
+        { className: isCanPlay ? "custom-button-group" : "custom-button-group-disable" },
+        React.createElement(Button, { type: "primary", size: "small", className: "back", onClick: handleBack }, locale.audio.back || "快退"),
+        React.createElement(Button, { type: "primary", size: "small", className: "start", onClick: handleStatusChange }, playing ? `${locale.audio.pause || "暂停"}` : `${locale.audio.start || "开始"}`),
+        React.createElement(Button, { type: "primary", size: "small", onClick: handleForward }, locale.audio.forward || "快进")
+      )
+    );
+  };
+  const renderNone = () => {
+    return React.createElement("div", { className: b("none-container"), onClick: handleStatusChange }, children);
+  };
+  const renderAudio = () => {
+    switch (type) {
+      case "icon":
+        return renderIcon();
+      case "progress":
+        return renderProgerss();
+      case "none":
+        return renderNone();
+      default:
+        return null;
+    }
+  };
+  return React.createElement("div", { className: `${b()} ${className}`, style, ...rest }, renderAudio());
+};
+Audio.defaultProps = defaultProps;
+Audio.displayName = "NutAudio";
+export {
+  Audio as A
+};

package/dist/esm/avatar.taro-01536aff.js

@@ -0,0 +1,100 @@
+import React, { useState, useRef, useContext, useEffect } from "react";
+import classNames from "classnames";
+import { I as Image } from "./image.taro-767aa000.js";
+import { A as AvatarContext } from "./context-d0fccf11.js";
+import { My } from "@nutui/icons-react-taro";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  size: "",
+  shape: "round",
+  icon: "",
+  fit: "cover",
+  background: "#eee",
+  color: "#666",
+  src: "",
+  alt: ""
+};
+const classPrefix = `nut-avatar`;
+const Avatar = (props) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+  const { children, size, shape, background, color, src, icon, fit, alt, className, style, onClick, onError, ...rest } = {
+    ...defaultProps,
+    ...props
+  };
+  const [maxSum, setMaxSum] = useState(0);
+  const [showMax, setShowMax] = useState(false);
+  const [avatarIndex, setAvatarIndex] = useState(1);
+  const avatarRef = useRef(null);
+  const parent = useContext(AvatarContext);
+  const sizeValue = ["large", "normal", "small"];
+  const classes = classNames({
+    [`nut-avatar-${((_a = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _a.size) || size || "normal"}`]: true,
+    [`nut-avatar-${((_b = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _b.shape) || shape}`]: true
+  });
+  const cls = classNames(classPrefix, classes, className);
+  const styles = {
+    width: sizeValue.indexOf(size) > -1 ? "" : `${size}px`,
+    height: sizeValue.indexOf(size) > -1 ? "" : `${size}px`,
+    backgroundColor: `${background}`,
+    color: `${color}`,
+    marginLeft: avatarIndex !== 1 && ((_c = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _c.gap) ? `${(_d = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _d.gap}px` : "",
+    zIndex: ((_e = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _e.level) === "right" ? `${Math.abs(maxSum - avatarIndex)}` : "",
+    ...style
+  };
+  const maxStyles = {
+    backgroundColor: `${(_f = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _f.maxBackground}`,
+    color: `${(_g = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _g.maxColor}`
+  };
+  useEffect(() => {
+    var _a2;
+    const avatarChildren = (_a2 = parent == null ? void 0 : parent.avatarGroupRef) == null ? void 0 : _a2.current.children;
+    if (avatarChildren) {
+      avatarLength(avatarChildren);
+    }
+  }, []);
+  const avatarLength = (children2) => {
+    var _a2, _b2, _c2;
+    for (let i = 0; i < children2.length; i++) {
+      if (children2[i] && children2[i].classList && (children2[i].classList[0] === "nut-avatar" || children2[i].classList.values().next().value === "nut-avatar")) {
+        children2[i].setAttribute("data-index", i + 1);
+      }
+    }
+    const index = (_b2 = (_a2 = avatarRef == null ? void 0 : avatarRef.current) == null ? void 0 : _a2.dataset) == null ? void 0 : _b2.index;
+    const maxCount = (_c2 = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _c2.max;
+    setMaxSum(children2.length);
+    setAvatarIndex(index);
+    if (index === children2.length && index !== maxCount && children2.length > maxCount) {
+      setShowMax(true);
+    }
+  };
+  const errorEvent = () => {
+    if (props.onError) {
+      props.onError();
+    }
+  };
+  const clickAvatar = (e) => {
+    onClick && onClick(e);
+  };
+  return React.createElement(React.Fragment, null, (showMax || !((_h = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _h.max) || avatarIndex <= ((_i = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _i.max)) && React.createElement(
+    "div",
+    { className: cls, ...rest, style: !showMax ? styles : maxStyles, onClick: clickAvatar, ref: avatarRef },
+    (!((_j = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _j.max) || avatarIndex <= ((_k = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _k.max)) && React.createElement(
+      React.Fragment,
+      null,
+      src && React.createElement(Image, { className: "avatar-img", src, style: { objectFit: fit }, alt, onError: errorEvent }),
+      React.isValidElement(icon) ? React.cloneElement(icon, {
+        ...icon.props,
+        className: `${icon.props.className || ""} icon`
+      }) : null,
+      children && React.createElement("span", { className: "text" }, children),
+      !src && !icon && !children && React.createElement(My, { className: "icon" })
+    ),
+    showMax && React.createElement("div", { className: "text" }, ((_l = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _l.maxContent) ? (_m = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _m.maxContent : `+ ${avatarIndex - ((_n = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _n.max)}`)
+  ));
+};
+Avatar.defaultProps = defaultProps;
+Avatar.displayName = "NutAvatar";
+export {
+  Avatar as A
+};

package/dist/esm/avatargroup-ad5ffb46.js

@@ -0,0 +1,34 @@
+import React, { useRef } from "react";
+import classNames from "classnames";
+import { A as AvatarContext } from "./context-d0fccf11.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  maxContent: "",
+  max: "",
+  maxBackground: "#eee",
+  maxColor: "#666",
+  gap: "-8",
+  level: "left"
+};
+const classPrefix = `nut-avatar-group`;
+const AvatarGroup = (props) => {
+  const propAvatarGroup = { ...defaultProps, ...props };
+  const { className, style, children } = propAvatarGroup;
+  const avatarGroupRef = useRef(null);
+  const cls = classNames(classPrefix, className);
+  const parentAvatar = {
+    propAvatarGroup,
+    avatarGroupRef
+  };
+  return React.createElement(
+    AvatarContext.Provider,
+    { value: parentAvatar },
+    React.createElement("div", { className: cls, style, ref: avatarGroupRef }, children)
+  );
+};
+AvatarGroup.defaultProps = defaultProps;
+AvatarGroup.displayName = "NutAvatarGroup";
+export {
+  AvatarGroup as A
+};

package/dist/esm/backtop.taro-7de36464.js

@@ -0,0 +1,48 @@
+import React, { useState } from "react";
+import { usePageScroll, pageScrollTo } from "@tarojs/taro";
+import { Top } from "@nutui/icons-react-taro";
+import classNames from "classnames";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  threshold: 200,
+  zIndex: 10,
+  duration: 1e3
+};
+const BackTop = (props) => {
+  const { children, threshold, zIndex, className, duration, style, onClick } = {
+    ...defaultProps,
+    ...props
+  };
+  const classPrefix = "nut-backtop";
+  const [backTop, SetBackTop] = useState(false);
+  usePageScroll((res) => {
+    const { scrollTop } = res;
+    scrollTop >= threshold ? SetBackTop(true) : SetBackTop(false);
+  });
+  const goTop = (e) => {
+    onClick && onClick(e);
+    pageScrollTo({
+      scrollTop: 0,
+      duration: duration > 0 ? duration : 0
+    });
+  };
+  const styles = style ? {
+    zIndex,
+    ...style
+  } : {
+    right: "10px",
+    bottom: "20px",
+    zIndex
+  };
+  return React.createElement("div", { className: classNames(classPrefix, className, {
+    show: backTop
+  }), style: styles, onClick: (e) => {
+    goTop(e);
+  } }, children || React.createElement(Top, { width: 19, height: 19, className: "nut-backtop-main" }));
+};
+BackTop.defaultProps = defaultProps;
+BackTop.displayName = "NutBackTop";
+export {
+  BackTop as B
+};

package/dist/esm/badge.taro-872605bf.js

@@ -0,0 +1,48 @@
+import React from "react";
+import classNames from "classnames";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  value: "",
+  dot: false,
+  max: 99,
+  top: "0",
+  right: "5",
+  color: ""
+};
+const Badge = (props) => {
+  const { className, style, value, max, children, dot, top, right, color } = {
+    ...defaultProps,
+    ...props
+  };
+  const classPrefix = "nut-badge";
+  const classes = classNames(classPrefix, className);
+  const contentClasses = classNames({ [`${classPrefix}__dot`]: dot }, `${classPrefix}__content`, `${classPrefix}__sup`);
+  function content() {
+    if (dot || typeof value === "object")
+      return null;
+    if (typeof value === "number" && typeof max === "number") {
+      return max < value ? `${max}+` : value;
+    }
+    return value;
+  }
+  const getStyle = () => {
+    const style2 = {};
+    style2.top = `${Number(top) || parseFloat(top) || 0}px`;
+    style2.right = `${Number(right) || parseFloat(right) || 0}px`;
+    style2.background = color;
+    return style2;
+  };
+  return React.createElement(
+    "div",
+    { className: classes, style },
+    typeof value === "object" && value && React.createElement("div", { className: `${classPrefix}__icon` }, value),
+    React.createElement("div", null, children),
+    React.createElement("div", { className: contentClasses, style: getStyle() }, content())
+  );
+};
+Badge.defaultProps = defaultProps;
+Badge.displayName = "NutBadge";
+export {
+  Badge as B
+};

package/dist/esm/barrage.taro-c8cb9864.js

@@ -0,0 +1,91 @@
+import React, { useState, useRef, useImperativeHandle, useEffect } from "react";
+import { createSelectorQuery } from "@tarojs/taro";
+import classNames from "classnames";
+import { c as cn } from "./bem-cdccae08.js";
+const defaultProps = {
+  barrageList: [],
+  frequency: 500,
+  loop: true,
+  speeds: 3e3,
+  rows: 3,
+  top: 10
+};
+const InternalBarrage = (props, ref) => {
+  const { className, frequency, loop, barrageList, speeds, rows, top, ...restProps } = {
+    ...defaultProps,
+    ...props
+  };
+  const [styleList, setStyleList] = useState([]);
+  const [baItemList, setBaItemList] = useState(barrageList);
+  const barrageListSet = useRef(barrageList);
+  const barrageBody = useRef(null);
+  const barrageContainer = useRef(null);
+  const timeId = useRef((/* @__PURE__ */ new Date()).getTime());
+  const timer = useRef(0);
+  useRef(0);
+  const b = cn("barrage");
+  const classes = classNames(className, b(""), {
+    [`nut-barrage__body${timeId.current}`]: true
+  });
+  useImperativeHandle(ref, () => ({
+    add: (word) => {
+      barrageListSet.current = [...barrageListSet.current, word];
+      run();
+    }
+  }));
+  useEffect(() => {
+    barrageListSet.current = [...barrageList];
+    run();
+    return () => {
+      clearInterval(timer.current);
+    };
+  }, [barrageList]);
+  const run = () => {
+    setBaItemList(barrageListSet.current);
+    barrageListSet.current.forEach((item, index2) => {
+      getNode(index2);
+    });
+  };
+  const getNode = (index2) => {
+    const query = createSelectorQuery();
+    setTimeout(() => {
+      let width = 100;
+      query.select(".nut-barrage__body" + timeId.current).boundingClientRect((rec) => {
+        width = rec.width || 300;
+      });
+      query.select(".nut-barrage__item" + index2).boundingClientRect((recs) => {
+        let height = recs.height;
+        let nodeTop = index2 % rows * (height + top) + 20 + "px";
+        styleInfo(index2, nodeTop, width);
+      }).exec();
+    }, 500);
+  };
+  const styleInfo = (index2, nodeTop, width) => {
+    let timeIndex = index2 - rows > 0 ? index2 - rows : 0;
+    let list = styleList;
+    let time = list[timeIndex] ? Number(list[timeIndex]["--time"]) : 0;
+    let obj = {
+      top: nodeTop,
+      "--time": `${frequency * index2 + time}`,
+      animationDuration: `${speeds}ms`,
+      animationIterationCount: `${loop ? "infinite" : 1}`,
+      animationDelay: `${frequency * index2 + time}ms`,
+      "--move-distance": `-${width}px`
+    };
+    list.push(obj);
+    setStyleList([...list]);
+  };
+  return React.createElement(
+    "div",
+    { className: classes, ref: barrageBody, ...restProps },
+    React.createElement("div", { ref: barrageContainer, className: "bContainer" }, baItemList.map((item, index2) => {
+      return React.createElement("div", { className: `barrage-item nut-barrage__item${index2} move`, style: styleList[index2] }, item.length > 8 ? item.substr(0, 8) + "..." : item);
+    }))
+  );
+};
+const Barrage = React.forwardRef(InternalBarrage);
+Barrage.defaultProps = defaultProps;
+Barrage.displayName = "NutBarrage";
+export {
+  Barrage as B
+};

package/dist/esm/bem-cdccae08.js

@@ -0,0 +1,5 @@
+import { withNaming } from "@bem-react/classname";
+const cn = withNaming({ n: "nut-", e: "__", m: "--", v: "-" });
+export {
+  cn as c
+};

package/dist/esm/button.taro-01eae688.js

@@ -0,0 +1,72 @@
+import React, { useCallback } from "react";
+import classNames from "classnames";
+import { Loading } from "@nutui/icons-react-taro";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const prefixCls = "nut-button";
+const defaultProps = {
+  ...ComponentDefaults,
+  color: "",
+  type: "default",
+  size: "normal",
+  shape: "round",
+  fill: "solid",
+  loading: false,
+  disabled: false,
+  block: false,
+  icon: null,
+  onClick: (e) => {
+  }
+};
+const Button = React.forwardRef((props, ref) => {
+  const { color, shape, fill, loading, disabled, type, size, block, icon, children, onClick, className, style, ...rest } = {
+    ...defaultProps,
+    ...props
+  };
+  const getStyle = useCallback(() => {
+    const style2 = {};
+    if (props.color) {
+      if (fill && fill === "outline") {
+        style2.color = color;
+        style2.background = "#fff";
+        if (!(color == null ? void 0 : color.includes("gradient"))) {
+          style2.borderColor = color;
+        }
+      } else {
+        style2.color = "#fff";
+        style2.background = color;
+      }
+    }
+    return style2;
+  }, [color]);
+  const handleClick = (e) => {
+    if (!loading && !disabled && onClick) {
+      onClick(e);
+    }
+  };
+  return (
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    // eslint-disable-next-line react/button-has-type
+    React.createElement(
+      "button",
+      { ...rest, ref, className: classNames(prefixCls, className, props.type ? `${prefixCls}--${type}` : null, props.fill ? `${prefixCls}--${fill}` : null, {
+        [`${prefixCls}--${size}`]: size,
+        [`${prefixCls}--${shape}`]: shape,
+        [`${prefixCls}--block`]: block,
+        [`${prefixCls}--disabled`]: disabled,
+        [`${prefixCls}--loading`]: loading
+      }), style: { ...getStyle(), ...style }, onClick: (e) => handleClick(e) },
+      React.createElement(
+        "div",
+        { className: "nut-button__warp" },
+        loading && React.createElement(Loading, { className: "nut-icon-loading" }),
+        !loading && icon ? icon : null,
+        children && React.createElement("div", { className: icon || loading ? "nut-button-text" : "" }, children)
+      )
+    )
+  );
+});
+Button.displayName = "NutButton";
+export {
+  Button as B
+};

package/dist/esm/calendar.taro-10a6cb11.js

@@ -0,0 +1,70 @@
+import React, { useRef } from "react";
+import { P as Popup } from "./popup.taro-e756f3fc.js";
+import { U as Utils, C as CalendarItem } from "./calendaritem.taro-3e5f114e.js";
+import { u as useConfig } from "./configprovider.taro-25758d9f.js";
+const defaultProps = {
+  type: "one",
+  isAutoBackFill: false,
+  poppable: true,
+  visible: false,
+  title: "",
+  defaultValue: "",
+  startDate: Utils.getDay(0),
+  endDate: Utils.getDay(365),
+  showToday: true,
+  startText: "",
+  endText: "",
+  confirmText: "",
+  showTitle: true,
+  showSubTitle: true,
+  toDateAnimation: true,
+  onBtn: void 0,
+  onDay: void 0,
+  onTopInfo: void 0,
+  onBottomInfo: void 0,
+  onClose: () => {
+  },
+  onChoose: (param) => {
+  },
+  onSelected: (data) => {
+  },
+  onYearMonthChange: (param) => {
+  }
+};
+const Calendar = React.forwardRef((props, ref) => {
+  const { locale } = useConfig();
+  const { children, poppable, visible, type, isAutoBackFill, title, defaultValue, startDate, endDate, showToday, startText, endText, confirmText, showTitle, showSubTitle, toDateAnimation, onBtn, onDay, onTopInfo, onBottomInfo, onClose, onChoose, onSelected, onYearMonthChange } = { ...defaultProps, ...props };
+  const calendarRef = useRef(null);
+  const close = () => {
+    onClose && onClose();
+  };
+  const choose = (param) => {
+    close();
+    onChoose && onChoose(param);
+  };
+  const closePopup = () => {
+    close();
+  };
+  const select = (param) => {
+    onSelected && onSelected(param);
+  };
+  const scrollToDate = (date) => {
+    var _a;
+    (_a = calendarRef.current) == null ? void 0 : _a.scrollToDate(date);
+  };
+  const yearMonthChange = (param) => {
+    onYearMonthChange && onYearMonthChange(param);
+  };
+  React.useImperativeHandle(ref, () => ({
+    scrollToDate
+  }));
+  const renderItem = () => {
+    return React.createElement(CalendarItem, { ref: calendarRef, type, isAutoBackFill, poppable, title: title || locale.calendaritem.title, defaultValue, startDate, endDate, showToday, startText: startText || locale.calendaritem.start, endText: endText || locale.calendaritem.end, confirmText: confirmText || locale.calendaritem.confirm, showTitle, showSubTitle, toDateAnimation, onBtn, onDay, onTopInfo, onBottomInfo, onChoose: choose, onSelected: select, onYearMonthChange: yearMonthChange });
+  };
+  return React.createElement(React.Fragment, null, poppable ? React.createElement(Popup, { visible, position: "bottom", round: true, duration: 0.5, closeable: true, destroyOnClose: true, onClickOverlay: closePopup, onClickCloseIcon: closePopup, style: { height: "85vh" } }, renderItem()) : renderItem());
+});
+Calendar.defaultProps = defaultProps;
+Calendar.displayName = "NutCalendar";
+export {
+  Calendar as C
+};