@nutui/nutui-react-taro 2.0.0-alpha.1 → 2.0.0-alpha.11

package/dist/esm/indicator.taro-edbc71df.js

@@ -0,0 +1,30 @@
+import React from "react";
+import classNames from "classnames";
+const defaultProps = {
+  total: 3,
+  current: 0,
+  direction: "horizontal"
+};
+const classPrefix = `nut-indicator`;
+const Indicator = (props) => {
+  const { total, current, children, className, direction, ...rest } = {
+    ...defaultProps,
+    ...props
+  };
+  const classes = classNames({
+    [`${classPrefix}__vertical`]: direction === "vertical"
+  });
+  const renderElement = () => {
+    const childs = [];
+    for (let item = 0; item < total; item++) {
+      childs.push(item === current ? children || React.createElement("div", { key: item, className: `${classPrefix}__dot ${classPrefix}__active` }) : React.createElement("div", { key: item, className: `${classPrefix}__dot` }));
+    }
+    return childs;
+  };
+  return React.createElement("div", { className: classNames(classes, className), ...rest }, renderElement());
+};
+Indicator.defaultProps = defaultProps;
+Indicator.displayName = "NutIndicator";
+export {
+  Indicator as I
+};

package/dist/esm/infiniteloading.taro-f8f23ac6.js

@@ -0,0 +1,143 @@
+import React, { useState, useRef, useEffect } from "react";
+import classNames from "classnames";
+import { ScrollView } from "@tarojs/components";
+import { createSelectorQuery } from "@tarojs/taro";
+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 defaultProps = {
+  ...ComponentDefaults,
+  hasMore: true,
+  upperThreshold: 40,
+  containerId: "",
+  isOpenRefresh: false,
+  pullIcon: "https://img10.360buyimg.com/imagetools/jfs/t1/169863/6/4565/6306/60125948E7e92774e/40b3a0cf42852bcb.png",
+  pullText: "松开刷新",
+  loadIcon: "https://img10.360buyimg.com/imagetools/jfs/t1/169863/6/4565/6306/60125948E7e92774e/40b3a0cf42852bcb.png",
+  loadingText: "加载中···",
+  loadMoreText: "哎呀，这里是底部了啦"
+};
+const Infiniteloading = (props) => {
+  const { locale } = useConfig();
+  const { children, hasMore, upperThreshold, containerId, isOpenRefresh, pullIcon, pullText, loadIcon, loadingText, loadMoreText, className, onRefresh, onLoadMore, onScrollChange } = {
+    ...defaultProps,
+    ...props
+  };
+  const [isInfiniting, setIsInfiniting] = useState(false);
+  const [topDisScoll, setTopDisScoll] = useState(0);
+  const refreshTop = useRef(null);
+  const scrollHeight = useRef(0);
+  const scrollTop = useRef(0);
+  const direction = useRef("down");
+  const isTouching = useRef(false);
+  const y = useRef(0);
+  const refreshMaxH = useRef(0);
+  const distance = useRef(0);
+  const b = cn("infiniteloading");
+  const classes = classNames(className, b());
+  useEffect(() => {
+    refreshMaxH.current = upperThreshold;
+    setTimeout(() => {
+      getScrollHeight();
+    }, 200);
+  }, [hasMore, isInfiniting]);
+  const getScrollHeight = () => {
+    const parentElement = getParentElement("scroller");
+    parentElement.boundingClientRect((rect) => {
+      scrollHeight.current = rect.height;
+    }).exec();
+  };
+  const getStyle = () => {
+    return {
+      height: topDisScoll < 0 ? `0px` : `${topDisScoll}px`,
+      transition: `height 0.2s cubic-bezier(0.25,0.1,0.25,1)`
+    };
+  };
+  const getParentElement = (el) => {
+    return createSelectorQuery().select(containerId ? `#${containerId} #${el}` : `#${el}`);
+  };
+  const infiniteDone = () => {
+    setIsInfiniting(false);
+  };
+  const refreshDone = () => {
+    distance.current = 0;
+    setTopDisScoll(0);
+    isTouching.current = false;
+  };
+  const scrollAction = (e) => {
+    if (e.detail.scrollTop <= 0) {
+      e.detail.scrollTop = 0;
+    } else if (e.detail.scrollTop >= scrollHeight.current) {
+      e.detail.scrollTop = scrollHeight.current;
+    }
+    if (e.detail.scrollTop > scrollTop.current || e.detail.scrollTop >= scrollHeight.current) {
+      direction.current = "down";
+    } else {
+      direction.current = "up";
+    }
+    scrollTop.current = e.detail.scrollTop;
+    onScrollChange && onScrollChange(e.detail.scrollTop);
+  };
+  const lower = () => {
+    if (direction.current == "up" || !hasMore || isInfiniting) {
+      return false;
+    }
+    setIsInfiniting(true);
+    onLoadMore && onLoadMore(infiniteDone);
+  };
+  const touchStart = (event) => {
+    if (scrollTop.current == 0 && !isTouching.current && isOpenRefresh) {
+      y.current = event.touches[0].pageY;
+      isTouching.current = true;
+    }
+  };
+  const touchMove = (event) => {
+    distance.current = event.touches[0].pageY - y.current;
+    if (distance.current > 0 && isTouching.current) {
+      event.preventDefault();
+      setTopDisScoll(distance.current);
+      if (distance.current >= refreshMaxH.current) {
+        distance.current = refreshMaxH.current;
+        setTopDisScoll(refreshMaxH.current);
+      }
+    } else {
+      distance.current = 0;
+      setTopDisScoll(0);
+      isTouching.current = false;
+    }
+  };
+  const touchEnd = () => {
+    if (distance.current < refreshMaxH.current) {
+      distance.current = 0;
+      setTopDisScoll(0);
+    } else {
+      onRefresh && onRefresh(refreshDone);
+    }
+  };
+  return React.createElement(
+    ScrollView,
+    { className: classes, scrollY: true, id: "scroller", type: "list", style: { height: "100%" }, onScroll: scrollAction, onScrollToLower: lower, onTouchStart: touchStart, onTouchMove: touchMove, onTouchEnd: touchEnd },
+    React.createElement(
+      "div",
+      { className: "nut-infinite-top", ref: refreshTop, style: getStyle() },
+      React.createElement(
+        "div",
+        { className: "top-box" },
+        pullIcon && React.createElement(React.Fragment, null, pullIcon),
+        React.createElement("span", { className: "top-text" }, pullText || locale.infiniteloading.pullRefreshText)
+      )
+    ),
+    React.createElement("div", { className: "nut-infinite-container" }, children),
+    React.createElement("div", { className: "nut-infinite-bottom" }, isInfiniting ? React.createElement(
+      "div",
+      { className: "bottom-box" },
+      loadIcon && React.createElement(React.Fragment, null, loadIcon),
+      React.createElement("div", { className: "bottom-text" }, loadingText || locale.infiniteloading.loadText)
+    ) : !hasMore && React.createElement("div", { className: "tips" }, loadMoreText || locale.infiniteloading.loadMoreText))
+  );
+};
+Infiniteloading.defaultProps = defaultProps;
+Infiniteloading.displayName = "NutInfiniteloading";
+export {
+  Infiniteloading as I
+};

package/dist/esm/input.taro-27d686c9.js

@@ -0,0 +1,164 @@
+import React, { forwardRef, useRef, useState, useImperativeHandle, useCallback } from "react";
+import { View, Input as Input$1 } from "@tarojs/components";
+import { MaskClose } from "@nutui/icons-react-taro";
+import { getEnv, ENV_TYPE } from "@tarojs/taro";
+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";
+function trimExtraChar(value, char, regExp) {
+  const index = value.indexOf(char);
+  if (index === -1) {
+    return value;
+  }
+  if (char === "-" && index !== 0) {
+    return value.slice(0, index);
+  }
+  return value.slice(0, index + 1) + value.slice(index).replace(regExp, "");
+}
+function formatNumber(value, allowDot = true, allowMinus = true) {
+  if (allowDot) {
+    value = trimExtraChar(value, ".", /\./g);
+  } else {
+    value = value.split(".")[0];
+  }
+  if (allowMinus) {
+    value = trimExtraChar(value, "-", /-/g);
+  } else {
+    value = value.replace(/-/, "");
+  }
+  const regExp = allowDot ? /[^-0-9.]/g : /[^-0-9]/g;
+  return value.replace(regExp, "");
+}
+const defaultProps = {
+  ...ComponentDefaults,
+  type: "text",
+  name: "",
+  placeholder: "",
+  confirmType: "done",
+  align: "left",
+  required: false,
+  disabled: false,
+  readOnly: false,
+  maxLength: 9999,
+  clearable: false,
+  clearIcon: null,
+  formatTrigger: "onChange",
+  autoFocus: false
+};
+const Input = forwardRef((props, ref) => {
+  const { locale } = useConfig();
+  const { type, name, placeholder, align, disabled, readOnly, maxLength, clearable, clearIcon, formatTrigger, autoFocus, style, className, onChange, onFocus, onBlur, onClear, formatter, onClick, confirmType, defaultValue, value: _value, ...rest } = {
+    ...defaultProps,
+    ...props
+  };
+  const [value, setValue] = usePropsValue({
+    value: props.value,
+    defaultValue: props.defaultValue,
+    finalValue: "",
+    onChange
+  });
+  const inputRef = useRef(null);
+  const [active, setActive] = useState(false);
+  useImperativeHandle(ref, () => {
+    return {
+      clear: () => {
+        setValue("");
+      },
+      focus: () => {
+        var _a;
+        (_a = inputRef.current) == null ? void 0 : _a.focus();
+      },
+      blur: () => {
+        var _a;
+        (_a = inputRef.current) == null ? void 0 : _a.blur();
+      },
+      get nativeElement() {
+        return inputRef.current;
+      }
+    };
+  });
+  const inputClass = useCallback(() => {
+    const classPrefix = "nut-input";
+    return [classPrefix, `${disabled ? `${classPrefix}-disabled` : ""}`].filter(Boolean).join(" ");
+  }, [disabled]);
+  const [, updateState] = React.useState();
+  const forceUpdate = React.useCallback(() => updateState({}), []);
+  const updateValue = (value2, trigger = "onChange") => {
+    let val = value2;
+    if (getEnv() === ENV_TYPE.WEB) {
+      if (type === "number") {
+        val = formatNumber(val, false, true);
+      }
+      if (type === "digit") {
+        val = formatNumber(val, true, true);
+      }
+    }
+    if (formatter && trigger === formatTrigger) {
+      val = formatter(val);
+    }
+    setValue(val);
+    const eventHandler = props[trigger];
+    if (eventHandler && typeof eventHandler === "function") {
+      eventHandler(val);
+    }
+    forceUpdate();
+  };
+  const handleFocus = (event) => {
+    const val = event.target.value;
+    onFocus && onFocus(val);
+    setActive(true);
+  };
+  const handleInput = (value2) => {
+    updateValue(value2, "onChange");
+  };
+  const handleBlur = (event) => {
+    const val = event.target.value;
+    updateValue(val, "onBlur");
+    setTimeout(() => {
+      setActive(false);
+    }, 50);
+  };
+  const inputType = (type2) => {
+    if (getEnv() === ENV_TYPE.WEB) {
+      if (type2 === "digit") {
+        return "text";
+      }
+      if (type2 === "number") {
+        return "tel";
+      }
+    } else if (type2 === "password") {
+      return "text";
+    }
+    return type2;
+  };
+  return React.createElement(
+    View,
+    { className: `${inputClass()}  ${className || ""}`, style, onClick: (e) => {
+      onClick && onClick(e);
+    } },
+    React.createElement(Input$1, { ...rest, name, className: "nut-input-native", ref: inputRef, style: { textAlign: align }, type: inputType(type), password: type === "password", maxlength: maxLength, placeholder: placeholder || locale.placeholder, disabled: disabled || readOnly, value, focus: autoFocus, confirmType, onBlur: (e) => {
+      handleBlur(e);
+    }, onFocus: (e) => {
+      handleFocus(e);
+    }, onInput: (e) => {
+      handleInput(e.currentTarget.value);
+    } }),
+    React.createElement(View, { style: {
+      display: clearable && !readOnly && active && value.length > 0 ? "flex" : "none",
+      alignItems: "center"
+    }, onClick: (e) => {
+      e.stopPropagation();
+      if (!disabled) {
+        setTimeout(() => {
+          setValue("");
+          onClear && onClear("");
+        }, 50);
+      }
+    } }, clearIcon || React.createElement(MaskClose, { className: "nut-input-clear" }))
+  );
+});
+Input.defaultProps = defaultProps;
+Input.displayName = "NutInput";
+export {
+  Input as I
+};

package/dist/esm/inputnumber.taro-6657d2c1.js

@@ -0,0 +1,197 @@
+import React, { useRef, useEffect } from "react";
+import { Minus, Plus } from "@nutui/icons-react-taro";
+import classNames from "classnames";
+import { u as usePropsValue } from "./use-props-value-7ac1b1b5.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  disabled: false,
+  min: 1,
+  max: 9999,
+  readonly: false,
+  allowEmpty: false,
+  defaultValue: 0,
+  step: 1,
+  digits: 0,
+  async: false
+};
+const classPrefix = `nut-inputnumber`;
+const InputNumber = (props) => {
+  const { children, disabled, min, max, readonly, value, defaultValue, allowEmpty, digits, step, async, className, style, formatter, onPlus, onMinus, onOverlimit, onBlur, onFocus, onChange, ...restProps } = {
+    ...defaultProps,
+    ...props
+  };
+  const inputRef = useRef("");
+  const [_checked, setChecked] = usePropsValue({
+    value,
+    defaultValue
+  });
+  useEffect(() => {
+    if (formatter) {
+      if (_checked || _checked === 0) {
+        inputRef.current = formatter(_checked);
+        setChecked(formatter(_checked));
+      }
+    }
+  }, []);
+  const classes = classNames({
+    [`${classPrefix}`]: true,
+    [`${classPrefix}--disabled`]: disabled
+  }, className);
+  const styles = {
+    ...style
+  };
+  const addAllow = (value2 = _checked) => {
+    if (formatter) {
+      const numValue = String(value2).replace(/[^0-9|\.]/gi, "");
+      return Number(numValue) < Number(max) && !disabled;
+    }
+    return Number(value2) < Number(max) && !disabled;
+  };
+  const reduceAllow = (value2 = _checked) => {
+    if (formatter) {
+      const numValue = String(value2).replace(/[^0-9|\.]/gi, "");
+      return Number(numValue) > Number(min) && !disabled;
+    }
+    return Number(value2) > Number(min) && !disabled;
+  };
+  const iconMinusClasses = classNames("nut-inputnumber__icon icon-minus", {
+    "nut-inputnumber__icon--disabled": !reduceAllow()
+  });
+  const iconAddClasses = classNames("nut-inputnumber__icon icon-plus", {
+    "nut-inputnumber__icon--disabled": !addAllow()
+  });
+  const fixedDecimalPlaces = (v) => {
+    return Number(v).toFixed(Number(digits));
+  };
+  const emitChange = (value2, e) => {
+    const outputValue = fixedDecimalPlaces(value2);
+    onChange && onChange(outputValue, e);
+    if (!async) {
+      if (Number(outputValue) < Number(min)) {
+        formatter ? setChecked(formatter(Number(min))) : setChecked(Number(min));
+      } else if (Number(outputValue) > Number(max)) {
+        formatter ? setChecked(formatter(Number(max))) : setChecked(Number(max));
+      } else {
+        formatter ? setChecked(formatter(outputValue)) : setChecked(outputValue);
+      }
+    }
+  };
+  const reduceNumber = (e) => {
+    onMinus && onMinus(e);
+    if (reduceAllow()) {
+      if (formatter) {
+        const numValue = String(_checked).replace(/[^0-9|\.]/gi, "");
+        const outputValue = Number(numValue) - Number(step);
+        inputRef.current = formatter(outputValue);
+        emitChange(outputValue, e);
+      } else {
+        const outputValue = Number(_checked) - Number(step);
+        emitChange(outputValue, e);
+      }
+    } else {
+      onOverlimit && onOverlimit(e);
+    }
+  };
+  const addNumber = (e) => {
+    onPlus && onPlus(e);
+    if (addAllow()) {
+      if (formatter) {
+        const numValue = String(_checked).replace(/[^0-9|\.]/gi, "");
+        const outputValue = Number(numValue) + Number(step);
+        inputRef.current = formatter(outputValue);
+        emitChange(outputValue, e);
+      } else {
+        const outputValue = Number(_checked) + Number(step);
+        emitChange(outputValue, e);
+      }
+    } else {
+      onOverlimit && onOverlimit(e);
+    }
+  };
+  const changeValue = (e) => {
+    const input = e.target;
+    onChange && onChange(input.value, e);
+    if (!async) {
+      setChecked(input.value);
+    }
+  };
+  const changeFormatValue = (e) => {
+    const input = e.target.value;
+    const numReg = new RegExp("^[0-9]*$");
+    const numValue = input.replace(/[^0-9|\.]/gi, "");
+    if (formatter) {
+      if (!numReg.test(input[0]) && numValue) {
+        setChecked(formatter(numValue));
+      } else if (!numReg.test(input[0]) && !numValue) {
+        setChecked(input);
+      } else if (numReg.test(input[0])) {
+        if (formatter(numValue) === inputRef.current) {
+          setChecked(numValue);
+        } else {
+          setChecked(formatter(numValue));
+          inputRef.current = formatter(numValue);
+        }
+      }
+    }
+  };
+  const burFormatValue = (e) => {
+    const input = e.target.value;
+    const numReg = new RegExp("^[0-9]*$");
+    const numValue = input.replace(/[^0-9|\.]/gi, "");
+    if (formatter) {
+      if (formatter(numValue) === input) {
+        emitChange(numValue, e);
+        return;
+      }
+      if (!numReg.test(input) || !input) {
+        setChecked(formatter(""));
+      }
+    }
+  };
+  const focusValue = (e) => {
+    if (disabled)
+      return;
+    if (readonly)
+      return;
+    onFocus && onFocus(e);
+  };
+  const burValue = (e) => {
+    if (disabled)
+      return;
+    if (readonly)
+      return;
+    const input = e.target;
+    let value2 = +input.value;
+    if (value2 === 0 && !allowEmpty) {
+      value2 = Number(defaultValue);
+    }
+    if (value2 < Number(min)) {
+      value2 = Number(min);
+    } else if (value2 > Number(max)) {
+      value2 = Number(max);
+    }
+    emitChange(value2, e);
+    onBlur && onBlur(e);
+  };
+  return React.createElement(
+    "div",
+    { className: classes, style: styles, ...restProps },
+    React.createElement(
+      "div",
+      { className: "nut-input-minus" },
+      React.createElement(Minus, { className: iconMinusClasses, onClick: reduceNumber })
+    ),
+    React.createElement(React.Fragment, null, formatter ? React.createElement("input", { type: "text", min, max, disabled, readOnly: readonly, value: _checked, onInput: changeFormatValue, onBlur: burFormatValue, onFocus: focusValue }) : React.createElement("input", { type: "digit", min, max, disabled, readOnly: readonly, value: _checked, onInput: changeValue, onBlur: burValue, onFocus: focusValue })),
+    React.createElement(
+      "div",
+      { className: "nut-input-add" },
+      React.createElement(Plus, { className: iconAddClasses, onClick: addNumber })
+    )
+  );
+};
+InputNumber.defaultProps = defaultProps;
+InputNumber.displayName = "NutInputNumber";
+export {
+  InputNumber as I
+};

package/dist/esm/layout.taro-9659a928.js

@@ -0,0 +1,11 @@
+import React from "react";
+const defaultProps = {};
+const Layout = (props) => {
+  ({ ...defaultProps, ...props });
+  return React.createElement("div", { className: "nut-layout" }, "Layout");
+};
+Layout.defaultProps = defaultProps;
+Layout.displayName = "NutLayout";
+export {
+  Layout as L
+};

package/dist/esm/menu.taro-cd0fef41.js

@@ -0,0 +1,122 @@
+import React, { useRef, useState, useEffect } from "react";
+import classNames from "classnames";
+import { ArrowUp2, ArrowDown2 } from "@nutui/icons-react-taro";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  activeColor: "",
+  closeOnClickOverlay: true,
+  scrollFixed: false,
+  lockScroll: true,
+  icon: null
+};
+const Menu = (props) => {
+  const { className, icon, scrollFixed, lockScroll, closeOnClickOverlay, children, activeColor, ...rest } = {
+    ...defaultProps,
+    ...props
+  };
+  const menuRef = useRef(null);
+  const [isScrollFixed, setIsScrollFixed] = useState(false);
+  const getScrollTop = (el) => {
+    return Math.max(0, "scrollTop" in el ? el.scrollTop : el.pageYOffset);
+  };
+  const onScroll = () => {
+    const { scrollFixed: scrollFixed2 } = props;
+    const scrollTop = getScrollTop(window);
+    const isFixed = scrollTop > (typeof scrollFixed2 === "boolean" ? 30 : Number(scrollFixed2));
+    setIsScrollFixed(isFixed);
+  };
+  useEffect(() => {
+    if (scrollFixed) {
+      window.addEventListener("scroll", onScroll);
+    }
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+  const [showMenuItem, setShowMenuItem] = useState([]);
+  const [menuItemTitle, setMenuItemTitle] = useState([]);
+  const toggleMenuItem = (index) => {
+    showMenuItem[index] = !showMenuItem[index];
+    const temp = showMenuItem.map((i, idx) => idx === index ? i : false);
+    setShowMenuItem([...temp]);
+  };
+  const hideMenuItem = (index) => {
+    showMenuItem[index] = false;
+    setShowMenuItem([...showMenuItem]);
+  };
+  const updateTitle = (text, index) => {
+    menuItemTitle[index] = text;
+    setMenuItemTitle([...menuItemTitle]);
+  };
+  const cloneChildren = () => {
+    return React.Children.map(children, (child, index) => {
+      return React.cloneElement(child, {
+        show: showMenuItem[index],
+        index,
+        activeColor,
+        parent: {
+          closeOnClickOverlay,
+          lockScroll,
+          toggleMenuItem,
+          updateTitle,
+          hideMenuItem,
+          menuRef
+        }
+      });
+    });
+  };
+  const menuTitle = () => {
+    return React.Children.map(children, (child, index) => {
+      if (React.isValidElement(child)) {
+        const { title, options, value, disabled, direction } = child.props;
+        const selected = options == null ? void 0 : options.filter((option) => option.value === value);
+        const finallyTitle = () => {
+          if (title)
+            return title;
+          if (menuItemTitle && menuItemTitle[index])
+            return menuItemTitle[index];
+          if (selected && selected.length && selected[0].text)
+            return selected[0].text;
+          return "";
+        };
+        return React.createElement(
+          "div",
+          { className: classNames("nut-menu__item ", className, {
+            active: showMenuItem[index],
+            disabled
+          }), style: { color: showMenuItem[index] ? activeColor : "" }, key: index, onClick: () => {
+            !disabled && toggleMenuItem(index);
+          } },
+          React.createElement(
+            "div",
+            { className: classNames("nut-menu__title ", {
+              active: showMenuItem[index],
+              disabled
+            }) },
+            React.createElement("div", { className: "nut-menu__title-text" }, finallyTitle()),
+            icon || (direction === "up" ? React.createElement(ArrowUp2, { className: "nut-menu__title-icon", size: 10 }) : React.createElement(ArrowDown2, { className: "nut-menu__title-icon", size: 10 }))
+          )
+        );
+      }
+      return null;
+    });
+  };
+  return React.createElement(
+    "div",
+    { ...rest, className: classNames(`nut-menu`, className, {
+      "scroll-fixed": isScrollFixed
+    }), ref: menuRef },
+    React.createElement(
+      "div",
+      { className: "nut-menu-relative" },
+      React.createElement("div", { className: classNames("nut-menu__bar", {
+        opened: showMenuItem.includes(true)
+      }) }, menuTitle()),
+      cloneChildren()
+    )
+  );
+};
+Menu.defaultProps = defaultProps;
+Menu.displayName = "NutMenu";
+export {
+  Menu as M
+};