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

package/dist/esm/radio.taro-3a54f4c8.js

@@ -0,0 +1,152 @@
+import React, { useState, useEffect, useCallback, useContext } from "react";
+import { CheckChecked, CheckNormal } from "@nutui/icons-react-taro";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+import { c as cn } from "./bem-cdccae08.js";
+const radioContext = {
+  onChange: (val) => {
+  }
+};
+const RadioContext = React.createContext(radioContext);
+const defaultProps$1 = {
+  value: null,
+  textPosition: "right",
+  onChange: (value) => {
+  },
+  direction: "vertical",
+  options: []
+};
+const RadioGroup = React.forwardRef((props, ref) => {
+  const { children } = { ...defaultProps$1, ...props };
+  cn("RadioGroup");
+  const { className, value, onChange, textPosition, direction, options, ...rest } = props;
+  const [val2State, setVal2State] = useState(value);
+  useEffect(() => {
+    setVal2State(value);
+  }, [value]);
+  function validateChildChecked(child) {
+    if (val2State === null)
+      return false;
+    return val2State === child.props.value;
+  }
+  function validateChecked(value2) {
+    if (val2State === null)
+      return false;
+    return val2State === value2;
+  }
+  function cloneChildren() {
+    return React.Children.map(children, (child, index) => {
+      const childChecked = validateChildChecked(child);
+      if (child.type.displayName !== "NutRadio") {
+        return React.cloneElement(child);
+      }
+      return React.cloneElement(child, {
+        textPosition,
+        checked: childChecked
+        // onChange: handleChildChange,
+      });
+    });
+  }
+  const renderOptionsChildren = useCallback(() => {
+    return options == null ? void 0 : options.map(({ label, value: value2, disabled, onChange: onChange2, ...rest2 }) => {
+      const childChecked = validateChecked(value2);
+      return React.createElement(Radio, { key: value2 == null ? void 0 : value2.toString(), children: label, value: value2, disabled, onChange: onChange2, ...rest2, textPosition, checked: childChecked });
+    });
+  }, [val2State, options]);
+  return React.createElement(
+    RadioContext.Provider,
+    { value: {
+      onChange: (val) => {
+        setVal2State(val);
+        onChange && onChange(val);
+      }
+    } },
+    React.createElement("div", { className: `nut-radiogroup nut-radiogroup--${props.direction} ${className || ""}`, ...rest }, (options == null ? void 0 : options.length) ? renderOptionsChildren() : cloneChildren())
+  );
+});
+RadioGroup.defaultProps = defaultProps$1;
+RadioGroup.displayName = "NutRadioGroup";
+const defaultProps = {
+  ...ComponentDefaults,
+  className: "",
+  style: {},
+  disabled: false,
+  checked: false,
+  shape: "round",
+  value: "",
+  textPosition: "right",
+  icon: null,
+  checkedIcon: null,
+  iconSize: 18,
+  onChange: (e) => {
+  }
+};
+const Radio = (props) => {
+  const { children } = {
+    ...defaultProps,
+    ...props
+  };
+  const { className, disabled, checked, shape, textPosition, value, icon, checkedIcon, iconSize, onChange, ...rest } = props;
+  const componentName = "nut-radio";
+  const [checkedStatement, setCheckedStatement] = useState(checked);
+  const [valueStatement, setValueStatement] = useState(value);
+  const [disabledStatement, setDisabledStatement] = useState(disabled);
+  const context = useContext(RadioContext);
+  useEffect(() => {
+    setDisabledStatement(disabled);
+    setValueStatement(value);
+    setCheckedStatement(checked);
+  }, [disabled, value, checked]);
+  const renderLabel = () => {
+    return React.createElement("div", { className: `${componentName}__label ${disabledStatement ? `${componentName}__label--disabled` : ""}` }, children);
+  };
+  const renderButton = () => {
+    return React.createElement("div", { className: `${componentName}__button ${!disabledStatement && checkedStatement && `${componentName}__button--active`} ${disabledStatement ? `${componentName}__button--disabled` : ""}` }, children);
+  };
+  const color = () => {
+    if (disabledStatement) {
+      return "nut-radio__icon--disable";
+    }
+    if (checkedStatement) {
+      return "nut-radio__icon";
+    }
+    return "nut-radio__icon--unchecked";
+  };
+  const renderIcon = () => {
+    const { icon: icon2, iconSize: iconSize2, checkedIcon: checkedIcon2 } = props;
+    if (!disabledStatement && checkedStatement) {
+      return React.isValidElement(checkedIcon2) ? React.cloneElement(checkedIcon2, {
+        ...checkedIcon2.props,
+        className: color()
+      }) : React.createElement(CheckChecked, { size: iconSize2, className: color() });
+    }
+    return React.isValidElement(icon2) ? React.cloneElement(icon2, {
+      ...icon2.props,
+      className: color()
+    }) : React.createElement(CheckNormal, { size: iconSize2, className: color() });
+  };
+  const reverseState = textPosition === "left";
+  const renderRadioItem = () => {
+    if (shape === "button") {
+      return renderButton();
+    }
+    if (reverseState) {
+      return [renderLabel(), renderIcon()];
+    }
+    return [renderIcon(), renderLabel()];
+  };
+  const handleClick = (e) => {
+    if (disabledStatement || checkedStatement)
+      return;
+    setCheckedStatement(!checkedStatement);
+    onChange && onChange(e);
+    context && context.onChange(valueStatement);
+  };
+  return React.createElement("div", { className: `nut-radio ${className} ${reverseState ? `${componentName}--reverse` : ""}`, onClick: handleClick, ...rest }, renderRadioItem());
+};
+Radio.defaultProps = defaultProps;
+Radio.displayName = "NutRadio";
+Radio.RadioGroup = RadioGroup;
+export {
+  Radio as R,
+  RadioGroup as a
+};

package/dist/esm/range.taro-52cda918.js

@@ -0,0 +1,325 @@
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import { u as useTouch } from "./use-touch-ff43512c.js";
+import { g as getRectByTaro } from "./use-client-rect-f317804e.js";
+import { T as Toast } from "./toast.taro-92c10e1d.js";
+import { u as useConfig } from "./configprovider.taro-25758d9f.js";
+const defaultProps = {
+  range: false,
+  hiddenRange: false,
+  hiddenTag: false,
+  min: 0,
+  max: 100,
+  step: 1,
+  modelValue: 0,
+  vertical: false,
+  marks: {}
+};
+let startValue;
+let currentValue;
+const Range = (props) => {
+  const { locale } = useConfig();
+  const { className, range, disabled, activeColor, inactiveColor, buttonColor, hiddenRange, hiddenTag, modelValue, button, vertical, marks, dragStart, dragEnd, onChange, onDragStart, onDragEnd, minDesc, maxDesc, curValueDesc } = { ...defaultProps, ...props };
+  let { min, max, step } = { ...defaultProps, ...props };
+  min = Number(min);
+  max = Number(max);
+  step = Number(step);
+  const [buttonIndex, SetButtonIndex] = useState(0);
+  const [initValue, SetInitValue] = useState();
+  const [dragStatus, SetDragStatus] = useState("start");
+  const touch = useTouch();
+  const root = useRef(null);
+  const [marksList, SetMarksList] = useState([]);
+  const [show, SetShow] = useState(false);
+  const [toastMsg, SetToastMsg] = useState("");
+  const toastShow = (msg) => {
+    SetToastMsg(msg);
+    SetShow(true);
+  };
+  useEffect(() => {
+    if (typeof modelValue === "number") {
+      if (!range && (modelValue < min || modelValue > max)) {
+        SetInitValue(0);
+        toastShow(`${modelValue} ${locale.range.rangeText}`);
+        return;
+      }
+      SetInitValue(modelValue);
+    }
+  }, [modelValue]);
+  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 Number(max) - Number(min);
+  };
+  const classes = useCallback(() => {
+    const prefixCls = "nut-range";
+    return [
+      prefixCls,
+      `${disabled ? `${prefixCls}-disabled` : ""}`,
+      `${vertical ? `${prefixCls}-vertical` : ""}`,
+      `${!hiddenRange ? `${prefixCls}-show-number` : ""}`
+    ].filter(Boolean).join(" ");
+  }, [disabled, vertical, hiddenRange]);
+  const containerClasses = useCallback(() => {
+    const prefixCls = "nut-range-container";
+    return [prefixCls, `${vertical ? `${prefixCls}-vertical` : ""}`, className].filter(Boolean).join(" ");
+  }, [vertical, className]);
+  const markClassName = useCallback((mark) => {
+    const classPrefix = "nut-range-mark";
+    let lowerBound = Number(min);
+    let upperBound = Number(max);
+    if (range) {
+      const [left, right] = modelValue;
+      lowerBound = left;
+      upperBound = right;
+    } else {
+      upperBound = modelValue;
+    }
+    const isActive = mark <= upperBound && mark >= lowerBound;
+    return [
+      `${classPrefix}-text`,
+      `${isActive ? `${classPrefix}-text-active` : ""}`
+    ].filter(Boolean).join(" ");
+  }, [range, modelValue, min, max]);
+  const [rangeName, setRangeName] = useState(classes());
+  const [containerName, setContainerName] = useState(containerClasses());
+  useEffect(() => {
+    setRangeName(classes());
+    setContainerName(containerClasses());
+  }, [classes, containerClasses]);
+  const wrapperStyle = () => {
+    return {
+      background: inactiveColor
+    };
+  };
+  const buttonStyle = () => {
+    return {
+      borderColor: buttonColor
+    };
+  };
+  const isRange = (val) => {
+    return !!range && Array.isArray(val);
+  };
+  const calcMainAxis = () => {
+    const modelVal = initValue || initValue === 0 ? initValue : modelValue;
+    if (isRange(modelVal)) {
+      return `${(modelVal[1] - modelVal[0]) * 100 / scope()}%`;
+    }
+    return `${(modelVal - Number(min)) * 100 / scope()}%`;
+  };
+  const calcOffset = () => {
+    const modelVal = initValue || initValue === 0 ? initValue : modelValue;
+    if (isRange(modelVal)) {
+      return `${(modelVal[0] - Number(min)) * 100 / scope()}%`;
+    }
+    return `0%`;
+  };
+  const barStyle = () => {
+    if (vertical) {
+      return {
+        height: calcMainAxis(),
+        top: calcOffset(),
+        background: activeColor,
+        transition: dragStatus ? "none" : void 0
+      };
+    }
+    return {
+      width: calcMainAxis(),
+      left: calcOffset(),
+      background: activeColor,
+      transition: dragStatus ? "none" : void 0
+    };
+  };
+  const marksStyle = (mark) => {
+    let style = {
+      left: `${(mark - Number(min)) / scope() * 100}%`
+    };
+    if (vertical) {
+      style = {
+        top: `${(mark - Number(min)) / scope() * 100}%`
+      };
+    }
+    return style;
+  };
+  const tickStyle = (mark) => {
+    let lowerBound = Number(min);
+    let upperBound = Number(max);
+    if (range) {
+      const [left, right] = modelValue;
+      lowerBound = left;
+      upperBound = right;
+    }
+    const isActive = mark <= upperBound && mark >= lowerBound;
+    const style = {
+      background: !isActive ? inactiveColor : activeColor
+    };
+    return style;
+  };
+  const format = (value) => {
+    value = Math.max(+min, Math.min(value, +max));
+    return Math.round(value / +step) * +step;
+  };
+  const isSameValue = (newValue, oldValue) => {
+    return JSON.stringify(newValue) === JSON.stringify(oldValue);
+  };
+  const handleOverlap = (value) => {
+    if (value[0] > value[1]) {
+      return value.slice(0).reverse();
+    }
+    return value;
+  };
+  const updateValue = (value, end) => {
+    if (isRange(value)) {
+      value = handleOverlap(value).map(format);
+    } else {
+      value = format(value);
+    }
+    const modelVal = initValue || initValue === 0 ? initValue : modelValue;
+    if (!isSameValue(value, modelVal)) {
+      SetInitValue(value);
+    }
+    if ((marks || end) && !isSameValue(value, startValue)) {
+      onChange && onChange(value);
+    }
+  };
+  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 value = Number(min) + delta / total * scope();
+    currentValue = initValue || initValue === 0 ? initValue : modelValue;
+    if (isRange(currentValue)) {
+      const [left, right] = currentValue;
+      const middle = (left + right) / 2;
+      if (value <= middle) {
+        updateValue([value, right], true);
+      } else {
+        updateValue([left, value], true);
+      }
+    } else {
+      updateValue(value, true);
+    }
+  };
+  const onTouchStart = (event) => {
+    if (disabled) {
+      return;
+    }
+    touch.start(event);
+    currentValue = initValue || initValue === 0 ? initValue : modelValue;
+    if (isRange(currentValue)) {
+      startValue = currentValue.map(format);
+    } else {
+      startValue = format(currentValue);
+    }
+    SetDragStatus("start");
+  };
+  const onTouchMove = async (event) => {
+    if (disabled || !root.current) {
+      return;
+    }
+    if (dragStatus === "start") {
+      dragStart && dragStart();
+      onDragStart && onDragStart();
+    }
+    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();
+    }
+    if (isRange(startValue)) {
+      currentValue[buttonIndex] = startValue[buttonIndex] + diff;
+    } else {
+      currentValue = startValue + diff;
+    }
+    updateValue(currentValue);
+  };
+  const onTouchEnd = (event) => {
+    if (disabled) {
+      return;
+    }
+    if (dragStatus === "draging") {
+      updateValue(currentValue, true);
+      dragEnd && dragEnd();
+      onDragEnd && onDragEnd();
+    }
+    SetDragStatus("");
+  };
+  const curValue = (idx) => {
+    const modelVal = initValue || initValue === 0 ? initValue : modelValue;
+    const value = typeof idx === "number" ? modelVal[idx] : modelVal;
+    return value;
+  };
+  return React.createElement(
+    "div",
+    { className: `${containerName}` },
+    !hiddenRange ? React.createElement("div", { className: "min" }, minDesc || +min) : null,
+    React.createElement(
+      "div",
+      { ref: root, style: wrapperStyle(), className: `${rangeName}`, 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: "nut-range-tick", style: tickStyle(marks2) })
+        );
+      })) : null,
+      React.createElement("div", { className: "nut-range-bar", style: barStyle() }, range ? [0, 1].map((item, index) => {
+        return React.createElement("div", { role: "slider", key: index, className: `${index === 0 ? "nut-range-button-wrapper-left" : ""}
+                  ${index === 1 ? "nut-range-button-wrapper-right" : ""}`, tabIndex: disabled ? -1 : 0, "aria-valuemin": +min, "aria-valuenow": curValue(index), "aria-valuemax": +max, "aria-orientation": vertical ? "vertical" : "horizontal", onTouchStart: (e) => {
+          if (typeof index === "number") {
+            SetButtonIndex(index);
+          }
+          onTouchStart(e);
+        }, onTouchMove: (e) => {
+          onTouchMove(e);
+        }, onTouchEnd: (e) => {
+          onTouchEnd();
+        }, onTouchCancel: (e) => {
+          onTouchEnd();
+        }, onClick: (e) => {
+          e.stopPropagation();
+        } }, button || React.createElement("div", { className: "nut-range-button", style: buttonStyle() }, !hiddenTag ? React.createElement("div", { className: "number" }, curValueDesc || curValue(index)) : null));
+      }) : React.createElement("div", { role: "slider", className: "nut-range-button-wrapper", tabIndex: disabled ? -1 : 0, "aria-valuemin": +min, "aria-valuenow": curValue(), "aria-valuemax": +max, "aria-orientation": vertical ? "vertical" : "horizontal", onTouchStart: (e) => {
+        onTouchStart(e);
+      }, onTouchMove: (e) => {
+        onTouchMove(e);
+      }, onTouchEnd: (e) => {
+        onTouchEnd();
+      }, onTouchCancel: (e) => {
+        onTouchEnd();
+      }, onClick: (e) => {
+        e.stopPropagation();
+      } }, button || React.createElement("div", { className: "nut-range-button", style: buttonStyle() }, !hiddenTag ? React.createElement("div", { className: "number" }, curValueDesc || curValue()) : null)))
+    ),
+    !hiddenRange ? React.createElement("div", { className: "max" }, maxDesc || +max) : null,
+    React.createElement(Toast, { type: "text", visible: show, msg: toastMsg, onClose: () => {
+      SetShow(false);
+    } })
+  );
+};
+Range.defaultProps = defaultProps;
+Range.displayName = "NutRange";
+export {
+  Range as R
+};

package/dist/esm/rate.taro-78c66969.js

@@ -0,0 +1,77 @@
+import React, { useState, useEffect } from "react";
+import classNames from "classnames";
+import { StarFillN } from "@nutui/icons-react-taro";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+import { u as usePropsValue } from "./use-props-value-7ac1b1b5.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  count: 5,
+  min: 0,
+  checkedIcon: null,
+  uncheckedIcon: null,
+  disabled: false,
+  readOnly: false,
+  allowHalf: false
+};
+const Rate = (props) => {
+  const { className, style, count, value, defaultValue, min, checkedIcon, uncheckedIcon, disabled, readOnly, allowHalf, onChange } = {
+    ...defaultProps,
+    ...props
+  };
+  const classPrefix = "nut-rate";
+  const [countArray, setCountArray] = useState([1, 2, 3, 4, 5]);
+  const [score, setScore] = usePropsValue({
+    value,
+    defaultValue: Math.max(defaultValue || 0, min),
+    finalValue: 0,
+    onChange
+  });
+  useEffect(() => {
+    const tmp = [];
+    for (let i = 1; i <= Number(count); i++) {
+      tmp.push(i);
+    }
+    setCountArray(tmp);
+  }, [count]);
+  const renderIcon = (n) => {
+    return n <= score ? checkedIcon || React.createElement(StarFillN, null) : uncheckedIcon || (checkedIcon ? React.cloneElement(checkedIcon, {
+      color: void 0
+    }) : React.createElement(StarFillN, null));
+  };
+  const onClick = (e, index) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (disabled || readOnly)
+      return;
+    let value2 = 0;
+    if (!(index === 1 && score === index)) {
+      value2 = index;
+    }
+    value2 = Math.max(value2, min);
+    setScore(value2);
+  };
+  const onHalfClick = (event, n) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const value2 = Math.max(min, n - 0.5);
+    setScore(value2);
+  };
+  return React.createElement("div", { className: classNames(classPrefix, className, {
+    disabled,
+    readonly: readOnly
+  }), style }, countArray.map((n) => {
+    return React.createElement(
+      "div",
+      { className: `${classPrefix}-item`, key: n, onClick: (event) => onClick(event, n) },
+      React.createElement("div", { className: classNames(`${classPrefix}-item__icon`, {
+        [`${classPrefix}-item__icon--disabled`]: disabled || n > score
+      }) }, renderIcon(n)),
+      allowHalf && score > n - 1 && React.createElement("div", { className: classNames(`${classPrefix}-item__half`, `${classPrefix}-item__icon`, `${classPrefix}-item__icon--half`), onClick: (event) => onHalfClick(event, n) }, renderIcon(n))
+    );
+  }));
+};
+Rate.defaultProps = defaultProps;
+Rate.displayName = "NutRate";
+export {
+  Rate as R
+};

package/dist/esm/row.taro-8b7febd4.js

@@ -0,0 +1,48 @@
+import React from "react";
+import classNames from "classnames";
+import { D as DataContext } from "./UserContext-ab42ba7f.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const classPrefix = "nut-row";
+const defaultProps = {
+  ...ComponentDefaults,
+  type: "",
+  justify: "start",
+  align: "flex-start",
+  wrap: "nowrap",
+  gutter: "0"
+};
+const Row = (props) => {
+  const { className, style, children, type, justify, align, wrap, gutter, onClick } = {
+    ...defaultProps,
+    ...props
+  };
+  const getClass = (prefix, type2) => {
+    const classType = type2 ? `nut-row-${prefix}-${type2}` : "";
+    const className2 = prefix ? classType : `nut-row-${type2}`;
+    return className2;
+  };
+  const getClasses = () => {
+    return `
+    ${getClass("", type)}
+    ${getClass("justify", justify)}
+    ${getClass("align", align)}
+    ${getClass("flex", wrap)}
+    ${classPrefix}
+   `;
+  };
+  const parentRow = {
+    gutter
+  };
+  return React.createElement(DataContext.Provider, { value: parentRow }, React.createElement("div", {
+    className: classNames(getClasses(), className),
+    style,
+    onClick: (e) => {
+      onClick && onClick(e, "row");
+    }
+  }, children));
+};
+Row.defaultProps = defaultProps;
+Row.displayName = "NutRow";
+export {
+  Row as R
+};