@nutui/nutui-react-taro 2.0.0-alpha.7 → 2.0.0-alpha.9

package/dist/esm/radio.taro-5d6ca4ad.js

@@ -0,0 +1,153 @@
+import React, { useCallback, useContext } from "react";
+import { CheckChecked, CheckNormal } from "@nutui/icons-react-taro";
+import classNames from "classnames";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+import { u as usePropsValue } from "./use-props-value-7ac1b1b5.js";
+const RadioContext = React.createContext(null);
+const defaultProps$1 = {
+  labelPosition: "right",
+  onChange: (value) => {
+  },
+  direction: "vertical",
+  options: []
+};
+const classPrefix = "nut-radiogroup";
+const RadioGroup = React.forwardRef((props, ref) => {
+  const { children, className, value, defaultValue, onChange, labelPosition, direction, options, disabled, ...rest } = { ...defaultProps$1, ...props };
+  const [val2State, setVal2State] = usePropsValue({
+    defaultValue: props.defaultValue,
+    value: props.value,
+    finalValue: "",
+    onChange
+  });
+  const renderOptionsChildren = useCallback(() => {
+    return options == null ? void 0 : options.map(({ label, value: value2, disabled: disabled2, onChange: onChange2, ...rest2 }) => {
+      return React.createElement(Radio, { ...rest2, key: value2 == null ? void 0 : value2.toString(), children: label, value: value2, disabled: disabled2, onChange: onChange2, labelPosition, checked: value2 === val2State });
+    });
+  }, [options]);
+  return React.createElement(
+    RadioContext.Provider,
+    { value: {
+      labelPosition: labelPosition || "right",
+      disabled,
+      value: val2State,
+      check: (value2) => {
+        setVal2State(value2);
+      },
+      uncheck: () => {
+        setVal2State("");
+      }
+    } },
+    React.createElement("div", { className: classNames(classPrefix, className, {
+      [`${classPrefix}--${props.direction}`]: props.direction
+    }), ...rest }, (options == null ? void 0 : options.length) ? renderOptionsChildren() : children)
+  );
+});
+RadioGroup.defaultProps = defaultProps$1;
+RadioGroup.displayName = "NutRadioGroup";
+const defaultProps = {
+  ...ComponentDefaults,
+  disabled: false,
+  shape: "round",
+  value: "",
+  labelPosition: "right",
+  icon: null,
+  activeIcon: null,
+  onChange: (checked) => {
+  }
+};
+const Radio = (props) => {
+  const classPrefix2 = "nut-radio";
+  const { children, className, style, checked, defaultChecked, shape, value, icon, activeIcon, onChange, ...others } = {
+    ...defaultProps,
+    ...props
+  };
+  let { labelPosition, disabled, ...rest } = others;
+  let [checkedStatement, setCheckedStatement] = usePropsValue({
+    value: checked,
+    defaultValue: defaultChecked,
+    finalValue: false,
+    onChange
+  });
+  const context = useContext(RadioContext);
+  if (context) {
+    checkedStatement = context.value === value;
+    if (context.labelPosition !== void 0) {
+      labelPosition = context.labelPosition;
+    }
+    if (context.disabled !== void 0) {
+      disabled = context.disabled;
+    }
+    setCheckedStatement = (value2) => {
+      if (value2) {
+        context.check(props.value === void 0 ? "" : props.value);
+      } else {
+        context.uncheck();
+      }
+    };
+  }
+  const renderLabel = () => {
+    return React.createElement("div", { className: classNames(`${classPrefix2}__label`, {
+      [`${classPrefix2}__label--disabled`]: disabled
+    }) }, children);
+  };
+  const renderButton = () => {
+    return React.createElement("div", { className: classNames(`${classPrefix2}__button`, {
+      [`${classPrefix2}__button--active`]: checkedStatement,
+      [`${classPrefix2}__button--disabled`]: disabled
+    }) }, children);
+  };
+  const color = () => {
+    return {
+      [`${classPrefix2}__icon--disable`]: disabled,
+      [`${classPrefix2}__icon`]: checkedStatement,
+      [`${classPrefix2}__icon--unchecked`]: !checkedStatement
+    };
+  };
+  const renderIcon = () => {
+    const { icon: icon2, activeIcon: activeIcon2 } = props;
+    if (checkedStatement) {
+      return React.isValidElement(activeIcon2) ? React.cloneElement(activeIcon2, {
+        ...activeIcon2.props,
+        className: classNames(color())
+      }) : React.createElement(CheckChecked, { className: classNames(color()) });
+    }
+    return React.isValidElement(icon2) ? React.cloneElement(icon2, {
+      ...icon2.props,
+      className: classNames(color())
+    }) : React.createElement(CheckNormal, { className: classNames(color()) });
+  };
+  const reverse = labelPosition === "left";
+  const renderRadioItem = () => {
+    if (shape === "button") {
+      return renderButton();
+    }
+    if (reverse) {
+      return React.createElement(
+        React.Fragment,
+        null,
+        renderLabel(),
+        renderIcon()
+      );
+    }
+    return React.createElement(
+      React.Fragment,
+      null,
+      renderIcon(),
+      renderLabel()
+    );
+  };
+  const handleClick = (e) => {
+    if (disabled || checkedStatement)
+      return;
+    setCheckedStatement(!checkedStatement);
+  };
+  return React.createElement("div", { className: `${classPrefix2} ${className} ${reverse ? `${classPrefix2}--reverse` : ""}`, style, onClick: handleClick, ...rest }, renderRadioItem());
+};
+Radio.defaultProps = defaultProps;
+Radio.displayName = "NutRadio";
+Radio.Group = RadioGroup;
+export {
+  Radio as R,
+  RadioGroup as a
+};

package/dist/esm/range.taro-615e193a.js

@@ -0,0 +1,259 @@
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import classNames from "classnames";
+import { View } from "@tarojs/components";
+import { u as useTouch } from "./use-touch-ff43512c.js";
+import { g as getRectByTaro } from "./use-client-rect-f317804e.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+import { u as usePropsValue } from "./use-props-value-7ac1b1b5.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  range: false,
+  min: 0,
+  max: 100,
+  step: 1,
+  vertical: false,
+  marks: {}
+};
+const Range = (props) => {
+  const { className, range, disabled, button, vertical, marks, onChange, onStart, onEnd, minDescription, maxDescription, currentDescription, min, max, step, value, defaultValue } = { ...defaultProps, ...props };
+  const classPrefix = "nut-range";
+  const [buttonIndex, setButtonIndex] = useState(0);
+  const [dragStatus, setDragStatus] = useState("start");
+  const touch = useTouch();
+  const root = useRef(null);
+  const [marksList, setMarksList] = useState([]);
+  const [startValue, setStartValue] = useState(0);
+  const handleChange = (value2) => {
+    onChange && onChange(value2);
+  };
+  const [current, setCurrent] = usePropsValue({
+    value,
+    defaultValue,
+    finalValue: 0,
+    onChange: handleChange
+  });
+  const [exactValue, setEaxctValue] = useState(() => value || defaultValue || 0);
+  useEffect(() => {
+    if (marks) {
+      const marksKeys = Object.keys(marks);
+      const list = marksKeys.map(parseFloat).sort((a, b) => a - b).filter((point) => point >= min && point <= max);
+      setMarksList(list);
+    }
+  }, [marks]);
+  const scope = () => {
+    return max - min;
+  };
+  const classes = classNames(classPrefix, {
+    [`${classPrefix}-disabled`]: disabled,
+    [`${classPrefix}-vertical`]: vertical
+  });
+  const containerClasses = classNames(`${classPrefix}-container`, className, {
+    [`${classPrefix}-container-vertical`]: vertical
+  });
+  const markClassName = useCallback((mark) => {
+    const classPrefix2 = "nut-range-mark";
+    let lowerBound = min;
+    let upperBound = max;
+    if (range && Array.isArray(current)) {
+      lowerBound = current[0];
+      upperBound = current[1];
+    } else {
+      upperBound = current;
+    }
+    const isActive = mark <= upperBound && mark >= lowerBound;
+    return [
+      `${classPrefix2}-text`,
+      `${isActive ? `${classPrefix2}-text-active` : ""}`
+    ].join(" ");
+  }, [range, current, min, max]);
+  const isRange = (val) => {
+    return !!range && Array.isArray(val);
+  };
+  const calcMainAxis = () => {
+    const modelVal = current;
+    if (isRange(modelVal)) {
+      return `${(modelVal[1] - modelVal[0]) * 100 / scope()}%`;
+    }
+    return `${(modelVal - min) * 100 / scope()}%`;
+  };
+  const calcOffset = () => {
+    const modelVal = current;
+    if (isRange(modelVal)) {
+      return `${(modelVal[0] - min) * 100 / scope()}%`;
+    }
+    return `0%`;
+  };
+  const barStyle = () => {
+    if (vertical) {
+      return {
+        height: calcMainAxis(),
+        top: calcOffset(),
+        transition: dragStatus ? "none" : void 0
+      };
+    }
+    return {
+      width: calcMainAxis(),
+      left: calcOffset(),
+      transition: dragStatus ? "none" : void 0
+    };
+  };
+  const marksStyle = (mark) => {
+    let style = {
+      left: `${(mark - min) / scope() * 100}%`
+    };
+    if (vertical) {
+      style = {
+        top: `${(mark - min) / scope() * 100}%`
+      };
+    }
+    return style;
+  };
+  const tickClass = (mark) => {
+    if (range && Array.isArray(current)) {
+      return mark <= current[1] && mark >= current[0];
+    }
+    return mark <= current;
+  };
+  const format = (value2) => {
+    value2 = Math.max(+min, Math.min(value2, +max));
+    return Math.round(value2 / +step) * +step;
+  };
+  const isSameValue = (newValue, oldValue) => {
+    return JSON.stringify(newValue) === JSON.stringify(oldValue);
+  };
+  const handleOverlap = (value2) => {
+    if (value2[0] > value2[1]) {
+      return value2.slice(0).reverse();
+    }
+    return value2;
+  };
+  const updateValue = (value2, end) => {
+    if (isRange(value2)) {
+      value2 = handleOverlap(value2).map(format);
+    } else {
+      value2 = format(value2);
+    }
+    if (!isSameValue(value2, current)) {
+      setCurrent(value2);
+    }
+    end && onEnd && onEnd(value2);
+  };
+  const click = async (event) => {
+    if (disabled || !root.current) {
+      return;
+    }
+    setDragStatus("");
+    const rect = await getRectByTaro(root.current);
+    let delta = (event.detail.x ? event.detail.x : event.clientX) - rect.left;
+    let total = rect.width;
+    if (vertical) {
+      delta = (event.detail.y ? event.detail.y : event.clientY) - rect.top;
+      total = rect.height;
+    }
+    const value2 = min + delta / total * scope();
+    setEaxctValue(current);
+    if (isRange(current)) {
+      const [left, right] = current;
+      const middle = (left + right) / 2;
+      if (value2 <= middle) {
+        updateValue([value2, right], true);
+      } else {
+        updateValue([left, value2], true);
+      }
+    } else {
+      updateValue(value2, true);
+    }
+  };
+  const onTouchStart = (event) => {
+    if (disabled) {
+      return;
+    }
+    touch.start(event);
+    setEaxctValue(current);
+    if (isRange(current)) {
+      setStartValue(current.map(format));
+    } else {
+      setStartValue(format(current));
+    }
+    setDragStatus("start");
+  };
+  const onTouchMove = async (event) => {
+    if (disabled || !root.current) {
+      return;
+    }
+    if (dragStatus === "start") {
+      onStart && onStart();
+    }
+    touch.move(event);
+    setDragStatus("draging");
+    const rect = await getRectByTaro(root.current);
+    let delta = touch.deltaX;
+    let total = rect.width;
+    let diff = delta / total * scope();
+    if (vertical) {
+      delta = touch.deltaY;
+      total = rect.height;
+      diff = delta / total * scope();
+    }
+    let newValue;
+    if (isRange(startValue)) {
+      newValue = exactValue.slice();
+      newValue[buttonIndex] = startValue[buttonIndex] + diff;
+    } else {
+      newValue = startValue + diff;
+    }
+    setEaxctValue(newValue);
+    updateValue(newValue);
+  };
+  const onTouchEnd = (event) => {
+    if (disabled) {
+      return;
+    }
+    if (dragStatus === "draging") {
+      updateValue(current, true);
+    }
+    setDragStatus("");
+  };
+  const curValue = (idx) => {
+    const modelVal = current;
+    const value2 = typeof idx === "number" ? modelVal[idx] : modelVal;
+    return value2;
+  };
+  const renderButton = (index) => {
+    return React.createElement(React.Fragment, null, button || React.createElement("div", { className: "nut-range-button" }, currentDescription !== null && React.createElement("div", { className: "number" }, currentDescription ? currentDescription(curValue(index)) : curValue(index))));
+  };
+  return React.createElement(
+    "div",
+    { className: containerClasses },
+    minDescription !== null && React.createElement("div", { className: "min" }, minDescription || min),
+    React.createElement(
+      "div",
+      { ref: root, className: classes, onClick: (e) => click(e) },
+      marksList.length > 0 && React.createElement("div", { className: "nut-range-mark" }, marksList.map((marks2) => {
+        return React.createElement(
+          "span",
+          { key: marks2, className: markClassName(marks2), style: marksStyle(marks2) },
+          marks2,
+          React.createElement("span", { className: classNames("nut-range-tick", {
+            active: tickClass(marks2)
+          }) })
+        );
+      })),
+      React.createElement("div", { className: "nut-range-bar", style: barStyle() }, range ? [0, 1].map((item, index) => {
+        return React.createElement("div", { key: index, className: `${index === 0 ? "nut-range-button-wrapper-left" : ""}
+                  ${index === 1 ? "nut-range-button-wrapper-right" : ""}`, onTouchStart: (e) => {
+          if (typeof index === "number") {
+            setButtonIndex(index);
+          }
+          onTouchStart(e);
+        }, onTouchMove: (e) => onTouchMove(e), onTouchEnd: (e) => onTouchEnd(), onTouchCancel: (e) => onTouchEnd(), onClick: (e) => e.stopPropagation() }, renderButton(index));
+      }) : React.createElement(View, { catchMove: true, className: "nut-range-button-wrapper", onTouchStart: (e) => onTouchStart(e), onTouchMove: (e) => onTouchMove(e), onTouchEnd: (e) => onTouchEnd(), onTouchCancel: (e) => onTouchEnd(), onClick: (e) => e.stopPropagation() }, renderButton()))
+    ),
+    maxDescription !== null && React.createElement("div", { className: "max" }, maxDescription || max)
+  );
+};
+Range.defaultProps = defaultProps;
+Range.displayName = "NutRange";
+export {
+  Range as R
+};

package/dist/esm/{sticky.taro-3c03eb0a.js → sticky.taro-f8ae8d5e.js}

@@ -3,7 +3,7 @@ import classNames from "classnames";
 import { getEnv, usePageScroll, getSystemInfoSync } from "@tarojs/taro";
 import { C as ComponentDefaults } from "./typings-11d83a22.js";
 import { g as getRectByTaro } from "./use-client-rect-f317804e.js";
-import { g as getScrollParent } from "./get-scroll-parent-8da04f2e.js";
+import { c as canUseDom } from "./can-use-dom-0e539bd3.js";
 function useWatch(dep, callback, config = { immediate: false }) {
   const { immediate } = config;
   const prev = useRef();
@@ -27,6 +27,26 @@ function useWatch(dep, callback, config = { immediate: false }) {
     stop.current = true;
   };
 }
+const defaultRoot = canUseDom ? window : void 0;
+const overflowStylePatterns = ["scroll", "auto", "overlay"];
+function isElement(node) {
+  const ELEMENT_NODE_TYPE = 1;
+  return node.nodeType === ELEMENT_NODE_TYPE;
+}
+function getScrollParent(el, root = defaultRoot) {
+  let node = el;
+  while (node && node !== root && isElement(node)) {
+    if (node === document.body) {
+      return root;
+    }
+    const { overflowY } = window.getComputedStyle(node);
+    if (overflowStylePatterns.includes(overflowY) && node.scrollHeight > node.clientHeight) {
+      return node;
+    }
+    node = node.parentNode;
+  }
+  return root;
+}
 const defaultProps = {
   ...ComponentDefaults,
   position: "top",

package/dist/esm/swiper.taro-53a36427.js

@@ -0,0 +1,83 @@
+import React, { forwardRef, useState, useRef, Children, useImperativeHandle } from "react";
+import { View, Swiper as Swiper$1, SwiperItem } from "@tarojs/components";
+import classNames from "classnames";
+import { I as Indicator } from "./indicator.taro-edbc71df.js";
+const defaultProps = {
+  direction: "horizontal",
+  indicator: false,
+  autoPlay: false,
+  loop: false,
+  defaultValue: 0
+};
+const classPrefix = "nut-swiper";
+const Swiper = forwardRef((props, ref) => {
+  const { width, height, className, children, indicator, loop, autoPlay, duration, direction, defaultValue, ...rest } = {
+    ...defaultProps,
+    ...props
+  };
+  const [current, setCurrent] = useState(defaultValue);
+  const childrenCount = useRef(Children.toArray(children).length);
+  const renderIndicator = () => {
+    if (React.isValidElement(indicator))
+      return indicator;
+    if (indicator === true) {
+      return React.createElement(
+        "div",
+        { className: classNames({
+          [`${classPrefix}__pagination`]: true,
+          [`${classPrefix}__pagination-vertical`]: direction === "vertical"
+        }) },
+        React.createElement(Indicator, { current, total: childrenCount.current, direction })
+      );
+    }
+    return null;
+  };
+  const handleOnChange = (value) => {
+    setCurrent(value.detail.current);
+  };
+  useImperativeHandle(ref, () => ({
+    to: (value) => {
+      setCurrent(value);
+    },
+    next: () => {
+      if (loop) {
+        setCurrent((current + 1) % childrenCount.current);
+      } else {
+        setCurrent(current + 1 >= childrenCount.current ? current : current + 1);
+      }
+    },
+    prev: () => {
+      if (loop) {
+        let next = current - 1;
+        next = next < 0 ? childrenCount.current + next : next;
+        setCurrent(next % childrenCount.current);
+      } else {
+        setCurrent(current - 1 <= 0 ? 0 : current - 1);
+      }
+    }
+  }));
+  return React.createElement(
+    View,
+    { className: classNames(classPrefix, className), style: {
+      width: !width ? "100%" : `${width}px`,
+      height: !height ? "150px" : `${height}px`
+    } },
+    React.createElement(
+      View,
+      { className: "nut-swiper__inner", style: {
+        width: !width ? "100%" : `${width}px`,
+        height: !height ? "150px" : `${height}px`
+      } },
+      React.createElement(Swiper$1, { current, circular: loop, autoplay: autoPlay, vertical: direction === "vertical", indicatorDots: false, onChange: handleOnChange, style: {
+        width: !width ? "100%" : `${width}px`,
+        height: !height ? "150px" : `${height}px`
+      }, ...rest }, Children.toArray(children).map((child, index) => React.createElement(SwiperItem, { key: index }, child)))
+    ),
+    renderIndicator()
+  );
+});
+Swiper.defaultProps = defaultProps;
+Swiper.displayName = "NutSwiper";
+export {
+  Swiper as S
+};

package/dist/esm/swiperitem.taro-ef7342e8.js

@@ -0,0 +1,14 @@
+import React from "react";
+const defaultProps = {
+  itemId: "",
+  skipHiddenItemLayout: false
+};
+const SwiperItem = (props) => {
+  const { children, ...rest } = props;
+  return React.createElement(React.Fragment, null, children);
+};
+SwiperItem.defaultProps = defaultProps;
+SwiperItem.displayName = "NutSwiperItem";
+export {
+  SwiperItem as S
+};

package/dist/esm/{tabs.taro-b75f20ff.js → tabs.taro-66164782.js}

@@ -5,6 +5,10 @@ import { JoySmile } from "@nutui/icons-react-taro";
 import { C as ComponentDefaults } from "./typings-11d83a22.js";
 import { T as TabPane } from "./tabpane.taro-f8d92ece.js";
 import { u as usePropsValue } from "./use-props-value-7ac1b1b5.js";
+function useForceUpdate() {
+  const [, updateState] = React.useState();
+  return React.useCallback(() => updateState({}), []);
+}
 const defaultProps = {
   ...ComponentDefaults,
   tabStyle: {},
@@ -46,6 +50,7 @@ const Tabs = (props) => {
     return titles2;
   };
   const titles = useRef(getTitles());
+  const forceUpdate = useForceUpdate();
   useEffect(() => {
     titles.current = getTitles();
     let current = "";
@@ -54,8 +59,10 @@ const Tabs = (props) => {
         current = value;
       }
     });
-    if (current !== "") {
+    if (current !== "" && current !== value) {
       setValue(current);
+    } else {
+      forceUpdate();
     }
   }, [children]);
   const classes = classNames(classPrefix, `${classPrefix}--${direction}`, className);

package/dist/locales/base.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react-taro v2.0.0-alpha.7 Fri May 12 2023 15:37:20 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v2.0.0-alpha.9 Wed May 17 2023 18:43:26 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/en-US.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react-taro v2.0.0-alpha.7 Fri May 12 2023 15:37:20 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v2.0.0-alpha.9 Wed May 17 2023 18:43:26 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/id-ID.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react-taro v2.0.0-alpha.7 Fri May 12 2023 15:37:20 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v2.0.0-alpha.9 Wed May 17 2023 18:43:26 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-CN.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react-taro v2.0.0-alpha.7 Fri May 12 2023 15:37:20 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v2.0.0-alpha.9 Wed May 17 2023 18:43:26 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-TW.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react-taro v2.0.0-alpha.7 Fri May 12 2023 15:37:20 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v2.0.0-alpha.9 Wed May 17 2023 18:43:26 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-UG.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react-taro v2.0.0-alpha.7 Fri May 12 2023 15:37:20 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v2.0.0-alpha.9 Wed May 17 2023 18:43:26 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */