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

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

@@ -13,7 +13,7 @@ import { R } from "./row.taro-8b7febd4.js";
 import { S } from "./sticky.taro-f8ae8d5e.js";
 import { B as B2 } from "./backtop.taro-7de36464.js";
 import { E } from "./elevator.taro-df8fde9d.js";
-import { F } from "./fixednav.taro-28e5f776.js";
+import { F } from "./fixednav.taro-b9ecf0d5.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";
@@ -26,7 +26,7 @@ import { A } from "./address.taro-1a8ab3f1.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-fb7a0230.js";
-import { C as C8, a } from "./checkbox.taro-016074da.js";
+import { C as C8, a } from "./checkbox.taro-303276d7.js";
 import { D as D2 } from "./datepicker.taro-65dbeceb.js";
 import { F as F2 } from "./form.taro-b06754e8.js";
 import { F as F3 } from "./formitem.taro-b326809d.js";
@@ -39,13 +39,13 @@ import { P } from "./picker.taro-0570ec32.js";
 import { R as R2, a as a2 } from "./radio.taro-5d6ca4ad.js";
 import { R as R3 } from "./range.taro-615e193a.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 S5 } from "./searchbar.taro-09468fff.js";
+import { S as S6 } from "./shortpassword.taro-eabbde1b.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-7e38fc37.js";
-import { A as A2 } from "./actionsheet.taro-d2217152.js";
+import { A as A2 } from "./actionsheet.taro-697a594b.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";
@@ -54,24 +54,24 @@ import { I as I4 } from "./infiniteloading.taro-f8f23ac6.js";
 import { N as N3 } from "./noticebar.taro-2f02b2ad.js";
 import { N as N4 } from "./notify.taro-5768403d.js";
 import { P as P2 } from "./popover.taro-ad483372.js";
-import { P as P3 } from "./pulltorefresh.taro-6afe4805.js";
-import { S as S9 } from "./skeleton.taro-9ff9baf4.js";
+import { P as P3 } from "./pulltorefresh.taro-5b36a881.js";
+import { S as S9 } from "./skeleton.taro-0552c2ec.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 { T as T6 } from "./toast.taro-b2937e7c.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-bbd39f93.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 { C as C10 } from "./collapse.taro-98577a29.js";
+import { C as C11 } from "./collapseitem.taro-9451f40f.js";
+import { C as C12 } from "./countdown.taro-c399cc08.js";
+import { E as E3 } from "./ellipsis.taro-f423affa.js";
 import { I as I5 } from "./imagepreview.taro-daa5a84f.js";
 import { I as I6 } from "./indicator.taro-edbc71df.js";
-import { V } from "./virtuallist.taro-99f03769.js";
+import { V } from "./virtuallist.taro-97d3403a.js";
 import { P as P5 } from "./pagination.taro-63607c3b.js";
 import { P as P6 } from "./price.taro-479f1b82.js";
 import { P as P7 } from "./progress.taro-437b9f6a.js";

package/dist/esm/{pulltorefresh.taro-6afe4805.js → pulltorefresh.taro-5b36a881.js}

@@ -56,9 +56,9 @@ const PullToRefresh = (p) => {
   };
   const headHeight = props.headHeight;
   const threshold = props.threshold;
-  const heightRef = useRef(0);
   const pullingRef = useRef(false);
   const [status, setStatus] = useState("pulling");
+  const [height, setHeight] = useState(0);
   const renderStatusText = () => {
     var _a;
     if (props.renderText) {
@@ -86,25 +86,25 @@ const PullToRefresh = (p) => {
     touch.move(e);
     if (touch.isVertical()) {
       pullingRef.current = true;
-      heightRef.current = Math.max(rubberbandIfOutOfBounds(touch.deltaY, 0, 0, headHeight * 5, 0.5), 0);
-      setStatus(heightRef.current > threshold ? "canRelease" : "pulling");
+      setHeight(Math.max(rubberbandIfOutOfBounds(touch.deltaY, 0, 0, headHeight * 5, 0.5), 0));
+      setStatus(height > threshold ? "canRelease" : "pulling");
     }
   };
   async function doRefresh() {
-    heightRef.current = headHeight;
+    setHeight(headHeight);
     setStatus("refreshing");
     try {
       await props.onRefresh();
       setStatus("complete");
     } catch (e) {
-      heightRef.current = 0;
+      setHeight(0);
       setStatus("pulling");
       throw e;
     }
     if (props.completeDelay > 0) {
       await sleep(props.completeDelay);
     }
-    heightRef.current = 0;
+    setHeight(0);
     setStatus("pulling");
   }
   const handleTouchEnd = () => {
@@ -112,12 +112,12 @@ const PullToRefresh = (p) => {
     if (status === "canRelease") {
       doRefresh();
     } else {
-      heightRef.current = 0;
+      setHeight(0);
       setStatus("pulling");
     }
   };
   const springStyles = {
-    height: `${heightRef.current}px`,
+    height: `${height}px`,
     ...!pullingRef.current ? { transition: "height .3s ease" } : {}
   };
   return React.createElement(

package/dist/esm/searchbar.taro-09468fff.js

@@ -0,0 +1,122 @@
+import React, { useRef, useState, useEffect } from "react";
+import { Search, CircleClose } from "@nutui/icons-react-taro";
+import { u as useConfig } from "./configprovider.taro-25758d9f.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  placeholder: "",
+  shape: "square",
+  disabled: false,
+  maxLength: 9999,
+  clearable: true,
+  readOnly: false,
+  autoFocus: false,
+  left: "",
+  right: "",
+  rightIn: "",
+  leftIn: React.createElement(Search, { size: "12" })
+};
+const SearchBar = (props) => {
+  const classPrefix = "nut-searchbar";
+  const { locale } = useConfig();
+  const searchRef = useRef(null);
+  const [value, setValue] = useState(() => props.value);
+  const { placeholder, shape, className, disabled, maxLength, clearable, readOnly, autoFocus, right, left, leftIn, rightIn, onChange, onFocus, onBlur, onClear, onSearch, onClickInput } = {
+    ...defaultProps,
+    ...props
+  };
+  const forceFocus = () => {
+    const searchSelf = searchRef.current;
+    searchSelf && searchSelf.focus();
+  };
+  const change = (event) => {
+    const { value: value2 } = event.target;
+    onChange && (onChange == null ? void 0 : onChange(value2, event));
+    setValue(value2);
+    value2 === "" && forceFocus();
+  };
+  const focus = (event) => {
+    const { value: value2 } = event.target;
+    onFocus && (onFocus == null ? void 0 : onFocus(value2, event));
+  };
+  const blur = (event) => {
+    const searchSelf = searchRef.current;
+    searchSelf && searchSelf.blur();
+    const { value: value2 } = event.target;
+    onBlur && (onBlur == null ? void 0 : onBlur(value2, event));
+  };
+  useEffect(() => {
+    setValue(props.value);
+  }, [props.value]);
+  useEffect(() => {
+    autoFocus && forceFocus();
+  }, [autoFocus]);
+  const renderField = () => {
+    return React.createElement("input", { className: `${classPrefix}__input ${shape === "round" ? `${classPrefix}__round` : ""} ${clearable ? `${classPrefix}__input-clear` : ""}`, ref: searchRef, style: { ...props.style }, value: value || "", placeholder: placeholder || locale.placeholder, disabled, readOnly, maxLength, onKeyPress: onKeypress, onChange: (e) => change(e), onFocus: (e) => focus(e), onBlur: (e) => blur(e), onClick: (e) => clickInput(e) });
+  };
+  const clickInput = (e) => {
+    onClickInput && onClickInput(e);
+  };
+  const renderLeftIn = () => {
+    if (!leftIn)
+      return null;
+    return React.createElement("div", { className: `${classPrefix}__leftin ${classPrefix}__icon` }, leftIn);
+  };
+  const renderLeft = () => {
+    if (!left)
+      return null;
+    return React.createElement("div", { className: `${classPrefix}__left` }, left);
+  };
+  const renderRightIn = () => {
+    if (!rightIn)
+      return null;
+    return React.createElement("div", { className: `${classPrefix}__rightin ${classPrefix}__icon` }, rightIn);
+  };
+  const renderRight = () => {
+    if (!right)
+      return null;
+    return React.createElement("div", { className: `${classPrefix}__right` }, right);
+  };
+  const handleClear = () => {
+    return React.createElement(
+      "div",
+      { className: `${classPrefix}__clear ${rightIn ? "pos-right" : ""}`, onClick: (e) => clearaVal(e) },
+      React.createElement(CircleClose, { color: "#555", size: 12 })
+    );
+  };
+  const clearaVal = (event) => {
+    if (disabled || readOnly) {
+      return;
+    }
+    setValue("");
+    onClear && onClear(event);
+    forceFocus();
+  };
+  const onKeypress = (e) => {
+    if (e.keyCode === 13) {
+      if (typeof e.cancelable !== "boolean" || e.cancelable) {
+        e.preventDefault();
+      }
+      onSearch && onSearch(value);
+    }
+  };
+  return React.createElement(
+    "div",
+    { className: `${classPrefix} ${disabled ? `${classPrefix}__disabled` : ""}  ${className || ""}`, style: { ...props.style } },
+    renderLeft(),
+    React.createElement(
+      "div",
+      { className: `${classPrefix}__content` },
+      renderLeftIn(),
+      React.createElement("div", { className: "nut-searchbar__input-box" }, renderField()),
+      renderRightIn(),
+      clearable && value && handleClear()
+    ),
+    renderRight()
+  );
+};
+SearchBar.defaultProps = defaultProps;
+SearchBar.displayName = "NutSearchBar";
+export {
+  SearchBar as S
+};

package/dist/esm/shortpassword.taro-eabbde1b.js

@@ -0,0 +1,90 @@
+import React, { useMemo, useEffect } from "react";
+import { Tips } from "@nutui/icons-react-taro";
+import classNames from "classnames";
+import { P as Popup } from "./popup.taro-e756f3fc.js";
+import { u as useConfig } from "./configprovider.taro-25758d9f.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+import { u as usePropsValue } from "./use-props-value-7ac1b1b5.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  value: "",
+  visible: false,
+  plain: false,
+  hideFooter: true,
+  length: 6,
+  autoFocus: false
+};
+const ShortPassword = (props) => {
+  const { locale } = useConfig();
+  const { title, description, tips, visible, value, error, hideFooter, length, plain, style, className, closeable, autoFocus, onFocus, onChange, onConfirm, onTips, onCancel, onClose, onComplete, onClickOverlay, onClickCloseIcon, ...rest } = {
+    ...defaultProps,
+    ...props
+  };
+  const classPrefix = "nut-shortpassword";
+  const comLen = useMemo(() => {
+    return Math.min(Math.max(4, length || 4), 6);
+  }, [length]);
+  const format = (val) => {
+    return val.slice(0, comLen);
+  };
+  const [inputValue, setInputValue] = usePropsValue({ value, onChange });
+  useEffect(() => {
+    if (visible && autoFocus) {
+      onFocus && onFocus();
+    }
+  }, [visible]);
+  useEffect(() => {
+    const val = format(value);
+    if (val.length >= comLen) {
+      onComplete && onComplete(val);
+    }
+    setInputValue(format(value));
+  }, [value]);
+  const sure = () => {
+    onConfirm && onConfirm(inputValue);
+  };
+  return React.createElement(
+    Popup,
+    { style: {
+      padding: "32px 24px 28px 24px",
+      borderRadius: "12px",
+      textAlign: "center"
+    }, visible, closeable: true, onClickOverlay: onClose, onClickCloseIcon: onClose, ...rest },
+    React.createElement(
+      "div",
+      { className: classNames(className, classPrefix), style },
+      React.createElement("div", { className: `${classPrefix}__title` }, title || locale.shortpassword.title),
+      React.createElement("div", { className: `${classPrefix}__description` }, description || locale.shortpassword.description),
+      React.createElement(
+        "div",
+        { className: `${classPrefix}__input`, onClick: onFocus },
+        React.createElement("div", { className: `${classPrefix}__input-site` }),
+        React.createElement("div", { className: `${classPrefix}__input-fake` }, [...new Array(comLen).keys()].map((item, index) => {
+          return React.createElement("div", { className: `${classPrefix}__input-fake__li`, key: index }, inputValue.length > index && React.createElement(React.Fragment, null, plain ? inputValue[index] : React.createElement("div", { className: `${classPrefix}__input-fake__li__icon` })));
+        }))
+      ),
+      React.createElement(
+        "div",
+        { className: `${classPrefix}__message` },
+        React.createElement("div", { className: `${classPrefix}__message__error` }, error),
+        React.createElement("div", { className: `${classPrefix}__message__forget`, onClick: onTips }, tips || React.createElement(
+          React.Fragment,
+          null,
+          React.createElement(Tips, { width: 11, height: 11, style: { marginRight: "3px" } }),
+          locale.shortpassword.tips
+        ))
+      ),
+      !hideFooter && React.createElement(
+        "div",
+        { className: `${classPrefix}__footer` },
+        React.createElement("div", { className: `${classPrefix}__footer__cancel`, onClick: onCancel }, locale.cancel),
+        React.createElement("div", { className: `${classPrefix}__footer__sure`, onClick: sure }, locale.confirm)
+      )
+    )
+  );
+};
+ShortPassword.defaultProps = defaultProps;
+ShortPassword.displayName = "NutShortPassword";
+export {
+  ShortPassword as S
+};

package/dist/esm/skeleton.taro-0552c2ec.js

@@ -0,0 +1,64 @@
+import React from "react";
+import classNames from "classnames";
+import { A as Avatar } from "./avatar.taro-01536aff.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  rows: 1,
+  animated: false,
+  title: false,
+  avatar: false,
+  avatarSize: "50px",
+  visible: false,
+  avatarShape: "round"
+};
+const Skeleton = (props) => {
+  const { className, animated, rows, title, avatar, avatarSize, visible, children, avatarShape, ...rest } = {
+    ...defaultProps,
+    ...props
+  };
+  const classPrefix = "nut-skeleton";
+  const classes = classNames(className, classPrefix);
+  const avatarClass = classNames({
+    avatar: true,
+    [`avatar--${avatarShape}`]: avatarShape
+  });
+  const repeatLines = (num) => {
+    return Array.from({ length: num }, (v, i) => i);
+  };
+  const getStyle = () => {
+    if (avatarSize) {
+      return {
+        width: avatarSize,
+        height: avatarSize
+      };
+    }
+    return {
+      width: "50px",
+      height: "50px"
+    };
+  };
+  return React.createElement(React.Fragment, null, visible ? React.createElement("div", null, children) : React.createElement(
+    "div",
+    { className: classes, ...rest },
+    animated && React.createElement("div", { className: `${classPrefix}__animation` }),
+    React.createElement(
+      "div",
+      { className: `${classPrefix}__content` },
+      avatar && React.createElement(Avatar, { className: avatarClass, background: "rgb(239, 239, 239)", shape: avatarShape, style: getStyle(), icon: "null" }),
+      rows === 1 ? React.createElement("div", { className: `${classPrefix}__block` }) : React.createElement(
+        "div",
+        { className: `${classPrefix}__content-line` },
+        title && React.createElement("div", { className: `${classPrefix}__title` }),
+        repeatLines(rows).map((item, index) => {
+          return React.createElement("div", { className: `${classPrefix}__block`, key: index });
+        })
+      )
+    )
+  ));
+};
+Skeleton.defaultProps = defaultProps;
+Skeleton.displayName = "NutSkeleton";
+export {
+  Skeleton as S
+};

package/dist/esm/toast.taro-b2937e7c.js

@@ -0,0 +1,171 @@
+import React, { useRef, useEffect, useState } from "react";
+import classNames from "classnames";
+import { Success, Failure, Tips, Loading } from "@nutui/icons-react-taro";
+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 classPrefix2 = `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, classPrefix2);
+  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("div", { className: classes, style: styles, ...rest, onClick: handleClick }, children)
+  );
+};
+Overlay.defaultProps = defaultOverlayProps;
+Overlay.displayName = "NutOverlay";
+const defaultProps = {
+  ...ComponentDefaults,
+  id: "",
+  icon: null,
+  iconSize: "20",
+  msg: "",
+  duration: 2,
+  position: "center",
+  type: "text",
+  title: "",
+  closeOnOverlayClick: false,
+  contentClassName: "",
+  size: "base",
+  visible: false,
+  onClose: () => {
+  }
+  // 未实现
+};
+const classPrefix = "nut-toast";
+const Toast = (props) => {
+  const { children, id, position, contentStyle, icon, iconSize, msg, duration, type, title, closeOnOverlayClick, contentClassName, size, visible, className, style, onClose, ...rest } = { ...defaultProps, ...props };
+  let timer;
+  const [openState, SetOpenState] = useState(false);
+  useEffect(() => {
+    if (visible) {
+      SetOpenState(true);
+      show();
+    } else {
+      hide();
+    }
+  }, [visible]);
+  const clearTimer = () => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+  };
+  const hide = () => {
+    SetOpenState(false);
+    onClose();
+  };
+  const show = () => {
+    clearTimer();
+    if (duration) {
+      timer = window.setTimeout(() => {
+        hide();
+      }, duration * 1e3);
+    }
+  };
+  const clickCover = () => {
+    if (closeOnOverlayClick) {
+      hide();
+    }
+  };
+  const hasIcon = () => {
+    if (type !== "text") {
+      return true;
+    }
+    return !!icon;
+  };
+  const iconName = () => {
+    if (icon) {
+      return icon;
+    }
+    return {
+      success: React.createElement(Success, { color: "#ffffff", width: iconSize, height: iconSize }),
+      fail: React.createElement(Failure, { color: "#ffffff", width: iconSize, height: iconSize }),
+      warn: React.createElement(Tips, { color: "#ffffff", width: iconSize, height: iconSize }),
+      loading: React.createElement(Loading, { color: "#ffffff", width: iconSize, height: iconSize })
+    }[type];
+  };
+  const classes = classNames({
+    "nut-toast-has-icon": icon,
+    [`nut-toast-${size}`]: true
+  });
+  return React.createElement(React.Fragment, null, openState ? React.createElement(
+    Overlay,
+    { visible: openState, style, className: `${classPrefix}__overlay-default ${className}`, closeOnOverlayClick, onClick: () => {
+      clickCover();
+    } },
+    React.createElement(
+      "div",
+      { className: `${classPrefix} ${classes}`, id },
+      React.createElement(
+        "div",
+        { className: `${classPrefix}__inner ${classPrefix}-${position} ${contentClassName}`, style: contentStyle },
+        hasIcon() ? React.createElement("p", { className: `${classPrefix}__icon-wrapper` }, iconName()) : null,
+        title ? React.createElement("div", { className: `${classPrefix}-title` }, title) : null,
+        React.createElement("span", { className: `${classPrefix}-text` }, msg)
+      )
+    )
+  ) : null);
+};
+Toast.defaultProps = defaultProps;
+Toast.displayName = "NutToast";
+export {
+  Toast as T
+};