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

package/dist/esm/checkbox.taro-303276d7.js

@@ -0,0 +1,176 @@
+import React, { createContext, useImperativeHandle, useCallback, useContext, useState, useEffect } from "react";
+import { CheckNormal, CheckDisabled, Checked } 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 CheckboxGroupContext = createContext(null);
+const Context = CheckboxGroupContext;
+const defaultProps$1 = {
+  max: void 0,
+  labelPosition: "right",
+  direction: "vertical",
+  onChange: (value) => {
+  },
+  options: []
+};
+const classPrefix$1 = "nut-checkboxgroup";
+const CheckboxGroup = React.forwardRef((props, ref) => {
+  const { children } = { ...defaultProps$1, ...props };
+  const { className, disabled, onChange, value, defaultValue, max, labelPosition, direction, options, ...rest } = props;
+  useImperativeHandle(ref, () => ({
+    toggle(state) {
+      if (state === false) {
+        setValue([]);
+      } else {
+        const childrenLabel = [];
+        React.Children.map(children, (child) => {
+          const childProps = child.props;
+          childrenLabel.push(childProps.value);
+        });
+        setValue(childrenLabel);
+      }
+    },
+    reverse() {
+      const childrenLabel = [];
+      React.Children.map(children, (child) => {
+        const childProps = child.props;
+        childrenLabel.push(childProps.value);
+      });
+      const reverse = childrenLabel.filter((c) => (_value == null ? void 0 : _value.findIndex((v) => v === c)) === -1);
+      setValue(reverse);
+    }
+  }));
+  const [_value, setValue] = usePropsValue({
+    value: props.value,
+    defaultValue: props.defaultValue,
+    finalValue: [],
+    onChange
+  });
+  const renderOptions = useCallback(() => {
+    return options == null ? void 0 : options.map(({ label, value: value2, disabled: disabled2, onChange: onChange2, ...rest2 }) => {
+      return React.createElement(Checkbox, { key: value2 == null ? void 0 : value2.toString(), label, disabled: disabled2, value: value2, ...rest2 });
+    });
+  }, [options, max]);
+  return React.createElement(
+    Context.Provider,
+    { value: {
+      labelPosition: labelPosition || "right",
+      disabled,
+      max,
+      value: _value,
+      check: (value2) => {
+        const combined = [..._value, value2];
+        setValue(combined);
+      },
+      uncheck: (value2) => {
+        const reduced = _value.filter((item) => item !== value2);
+        setValue(reduced);
+      }
+    } },
+    React.createElement("div", { className: classNames(classPrefix$1, className, {
+      [`nut-checkboxgroup--${props.direction}`]: props.direction
+    }), ...rest }, (options == null ? void 0 : options.length) ? renderOptions() : children)
+  );
+});
+CheckboxGroup.defaultProps = defaultProps$1;
+CheckboxGroup.displayName = "NutCheckboxGroup";
+const defaultProps = {
+  ...ComponentDefaults,
+  disabled: false,
+  labelPosition: "right",
+  icon: null,
+  activeIcon: null,
+  indeterminateIcon: null,
+  onChange: (value) => {
+  }
+};
+const classPrefix = "nut-checkbox";
+const Checkbox = (props) => {
+  const { children } = {
+    ...defaultProps,
+    ...props
+  };
+  const { icon, label, className, activeIcon, checked, value, defaultChecked, disabled, onChange, indeterminate, indeterminateIcon, ...others } = props;
+  let { labelPosition, ...rest } = others;
+  const ctx = useContext(Context);
+  let [innerChecked, setChecked] = usePropsValue({
+    value: props.checked,
+    defaultValue: props.defaultChecked,
+    finalValue: defaultChecked,
+    onChange
+  });
+  let [innerDisabled, setDisabled] = useState(disabled);
+  const [innerIndeterminate, setIndeterminate] = useState(indeterminate);
+  useEffect(() => {
+    setDisabled(disabled);
+  }, [disabled]);
+  useEffect(() => {
+    setIndeterminate(indeterminate);
+  }, [indeterminate]);
+  if (ctx) {
+    if (ctx.labelPosition !== void 0) {
+      labelPosition = ctx.labelPosition;
+    }
+    innerDisabled = ctx.disabled !== void 0 ? ctx.disabled : innerDisabled;
+    innerChecked = ctx.value.includes(value);
+    setChecked = (checked2) => {
+      if (ctx.disabled)
+        return;
+      if (checked2)
+        ctx.check(value);
+      if (!checked2)
+        ctx.uncheck(value);
+    };
+  }
+  const renderIcon = () => {
+    if (!innerChecked) {
+      return React.isValidElement(icon) ? icon : React.createElement(CheckNormal, { className: color() });
+    }
+    if (innerIndeterminate) {
+      return React.isValidElement(indeterminateIcon) ? indeterminateIcon : React.createElement(CheckDisabled, { className: color() });
+    }
+    return React.isValidElement(activeIcon) ? activeIcon : React.createElement(Checked, { className: color() });
+  };
+  const color = () => {
+    if (innerDisabled) {
+      return `${classPrefix}__icon--disable`;
+    }
+    if (innerChecked) {
+      if (innerIndeterminate) {
+        return `${classPrefix}__icon--indeterminate`;
+      }
+      return `${classPrefix}__icon`;
+    }
+    return `${classPrefix}__icon--unchecked`;
+  };
+  const renderLabel = () => {
+    return React.createElement("span", { className: classNames(`${classPrefix}__label `, {
+      [`${classPrefix}__label--disabled`]: innerDisabled
+    }) }, children || label);
+  };
+  const handleClick = () => {
+    if (disabled)
+      return;
+    const latestChecked = !innerChecked;
+    if (ctx && ctx.max !== void 0) {
+      if (latestChecked && ctx.value.length >= ctx.max)
+        return;
+    }
+    setChecked(latestChecked);
+  };
+  return React.createElement(
+    "div",
+    { className: classNames(classPrefix, className, {
+      [`${classPrefix}--reverse`]: labelPosition === "left"
+    }), ...rest, onClick: handleClick },
+    renderIcon(),
+    renderLabel()
+  );
+};
+Checkbox.defaultProps = defaultProps;
+Checkbox.displayName = "NutCheckBox";
+Checkbox.Group = CheckboxGroup;
+export {
+  Checkbox as C,
+  CheckboxGroup as a
+};

package/dist/esm/circleprogress.taro-7149e09d.js

@@ -0,0 +1,104 @@
+import React, { useState, useRef, useEffect } from "react";
+import classNames from "classnames";
+import { a as isObject } from "./index-e3184f19.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  strokeWidth: 5,
+  radius: 50,
+  strokeLinecap: "round",
+  color: "#fa2c19",
+  background: "#e5e9f2",
+  clockwise: true
+};
+const classPrefix = `nut-circleprogress`;
+const CircleProgress = (props) => {
+  const { children, percent, className, radius, background, clockwise, color, strokeWidth, style, strokeLinecap, ...restProps } = {
+    ...defaultProps,
+    ...props
+  };
+  const [oldValue, setOldValue] = useState(percent);
+  const classes = classNames(className, classPrefix);
+  const refRandomId = Math.random().toString(36).slice(-8);
+  const animateIdRef = useRef(0);
+  const styles = {
+    height: `${Number(radius) * 2}px`,
+    width: `${Number(radius) * 2}px`,
+    ...style
+  };
+  useEffect(() => {
+    const startTime = Date.now();
+    const startRate = Number(oldValue);
+    const endRate = Number(percent);
+    const duration = Math.abs((startRate - endRate) * 1e3 / 100);
+    const animate = () => {
+      const now = Date.now();
+      const progress = Math.min((now - startTime) / duration, 1);
+      const rate = progress * (endRate - startRate) + startRate;
+      setOldValue(Math.min(Math.max(+rate, 0), 100));
+      if (endRate > startRate ? rate < endRate : rate > endRate) {
+        animateIdRef.current = window.requestAnimationFrame(animate);
+      }
+    };
+    animateIdRef.current = window.requestAnimationFrame(animate);
+    return () => window.cancelAnimationFrame(animateIdRef.current);
+  }, [percent]);
+  const stop = () => {
+    if (!isObject(props.color)) {
+      return [];
+    }
+    const color2 = props.color;
+    const colorArr = Object.keys(color2).sort((a, b) => parseFloat(a) - parseFloat(b));
+    const stopArr = [];
+    colorArr.map((item) => {
+      const obj = {
+        key: "",
+        value: ""
+      };
+      obj.key = item;
+      obj.value = color2[item];
+      stopArr.push(obj);
+    });
+    return stopArr;
+  };
+  const transColor = (color2) => {
+    return color2 && color2.replace("#", "%23");
+  };
+  const format = (progress) => Math.min(Math.max(+progress, 0), 100);
+  const circleStyle = () => {
+    const stopArr = stop();
+    const stopDom = [];
+    if (stopArr) {
+      stopArr.map((item) => {
+        let obj = "";
+        obj = `%3Cstop offset='${item.key}' stop-color='${transColor(item.value)}'/%3E`;
+        stopDom.push(obj);
+      });
+    }
+    const perimeter = 283;
+    const progress = +oldValue;
+    const offset = perimeter * Number(format(parseFloat(progress.toFixed(1)))) / 100;
+    const isWise = props.clockwise ? 1 : 0;
+    const color2 = isObject(props.color) ? `url(%23${refRandomId})` : transColor(props.color);
+    const d = `M 50 50 m 0 -45 a 45 45 0 1 ${isWise} 0 90 a 45 45 0 1, ${isWise} 0 -90`;
+    const pa = `%3Cdefs%3E%3ClinearGradient id='${refRandomId}' x1='100%25' y1='0%25' x2='0%25' y2='0%25'%3E${stopDom}%3C/linearGradient%3E%3C/defs%3E`;
+    const path = `%3Cpath d='${d}' stroke-width='${strokeWidth}' stroke='${transColor(props.background)}' fill='none'/%3E`;
+    const path1 = `%3Cpath d='${d}' stroke-width='${strokeWidth}' stroke-dasharray='${offset},${perimeter}' stroke-linecap='round' stroke='${transColor(color2)}' fill='none'/%3E`;
+    return {
+      background: `url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100'  xmlns='http://www.w3.org/2000/svg'%3E${pa}${path}${path1}%3C/svg%3E")`,
+      width: "100%",
+      height: "100%"
+    };
+  };
+  return React.createElement(
+    "div",
+    { className: classes, style: styles, ...restProps },
+    React.createElement("div", { style: circleStyle() }),
+    React.createElement("div", { className: "nut-circleprogress-text" }, children)
+  );
+};
+CircleProgress.defaultProps = defaultProps;
+CircleProgress.displayName = "NutCircleProgress";
+export {
+  CircleProgress as C
+};

package/dist/esm/col.taro-d6a46a7d.js

@@ -0,0 +1,41 @@
+import React, { useState, useContext, useEffect } from "react";
+import classNames from "classnames";
+import { D as DataContext } from "./UserContext-ab42ba7f.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  span: "24",
+  offset: "0",
+  gutter: "0"
+};
+const Col = (props) => {
+  const { className, style, span, offset, children, onClick } = {
+    ...defaultProps,
+    ...props
+  };
+  const [colName, setColName] = useState("");
+  const [colStyle, setColStyle] = useState({});
+  const { gutter } = useContext(DataContext);
+  const classs = () => {
+    const prefixCls = "nut-col";
+    return `${prefixCls} ${prefixCls}-${span} ${gutter ? `${prefixCls}-gutter` : ""} ${prefixCls}-${offset}`;
+  };
+  const getStyle = () => {
+    const style2 = {};
+    style2.paddingLeft = `${gutter / 2}px`;
+    style2.paddingRight = `${gutter / 2}px`;
+    return style2;
+  };
+  useEffect(() => {
+    setColName(classs);
+    setColStyle(getStyle);
+  }, [span, offset, gutter]);
+  return React.createElement("div", { className: classNames(colName, className), style: { ...style, ...colStyle }, onClick: (e) => {
+    onClick && onClick(e, "col");
+  } }, children);
+};
+Col.defaultProps = defaultProps;
+Col.displayName = "NutCol";
+export {
+  Col as C
+};

package/dist/esm/collapse.taro-98577a29.js

@@ -0,0 +1,72 @@
+import React, { useCallback } from "react";
+import classNames from "classnames";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+import { a as CollapseContext, C as CollapseItem } from "./collapseitem.taro-9451f40f.js";
+import { u as usePropsValue } from "./use-props-value-7ac1b1b5.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  defaultActiveName: [],
+  accordion: false,
+  expandIcon: null,
+  rotate: 180
+};
+const Collapse = (props) => {
+  const { className, style, children, activeName, defaultActiveName, accordion, expandIcon, rotate, onChange } = {
+    ...defaultProps,
+    ...props
+  };
+  const classPrefix = "nut-collapse";
+  const [value, setValue] = usePropsValue({
+    value: activeName,
+    defaultValue: defaultActiveName,
+    finalValue: []
+  });
+  const changeVal = (newValue, name, isOpen2) => {
+    setValue(newValue);
+    onChange && onChange(newValue, name, isOpen2);
+  };
+  const updateValue = (name) => {
+    if (accordion) {
+      if (value === name) {
+        changeVal("", name, false);
+      } else {
+        changeVal(name, name, true);
+      }
+    } else if (Array.isArray(value)) {
+      if (value.includes(name)) {
+        const newValue = value.filter((v) => v !== name);
+        changeVal(newValue, name, false);
+      } else {
+        const newValue = value.concat([name]);
+        changeVal(newValue, name, true);
+      }
+    } else {
+      console.warn("[NutUI] <Collapse> 未开启手风琴模式时 activeName 应为数组");
+    }
+  };
+  const isOpen = useCallback((name) => {
+    if (accordion) {
+      return value === name;
+    }
+    if (Array.isArray(value)) {
+      return value.includes(name);
+    }
+    return false;
+  }, [accordion, value]);
+  return React.createElement(
+    CollapseContext.Provider,
+    { value: {
+      isOpen,
+      updateValue,
+      expandIcon,
+      rotate
+    } },
+    React.createElement("div", { className: classNames(classPrefix, className), style }, children)
+  );
+};
+Collapse.defaultProps = defaultProps;
+Collapse.displayName = "NutCollapse";
+Collapse.Item = CollapseItem;
+export {
+  Collapse as C
+};

package/dist/esm/collapseitem.taro-9451f40f.js

@@ -0,0 +1,129 @@
+import React, { createContext, useContext, useRef, useState, useMemo, useEffect } from "react";
+import classNames from "classnames";
+import Taro from "@tarojs/taro";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const collapseContext = {
+  isOpen: (name) => {
+    return true;
+  },
+  updateValue: (name) => {
+  },
+  expandIcon: null,
+  rotate: 180
+};
+const CollapseContext = createContext(collapseContext);
+const defaultProps = {
+  ...ComponentDefaults,
+  title: null,
+  name: "",
+  isOpen: false,
+  expandIcon: null,
+  disabled: false,
+  rotate: 180,
+  extra: null
+};
+const CollapseItem = (props) => {
+  const { children, title, isOpen, name, disabled, expandIcon, rotate, extra, ...rest } = {
+    ...defaultProps,
+    ...props
+  };
+  const classPrefix = "nut-collapse-item";
+  const context = useContext(CollapseContext);
+  const wrapperRef = useRef(null);
+  const contentRef = useRef(null);
+  const [iconStyle, setIconStyle] = useState({
+    transform: "translateY(-50%)"
+  });
+  const [refRandomId] = useState(() => Math.random().toString(36).slice(-8));
+  const target = `#nut-collapse__content-${refRandomId}`;
+  const expanded = useMemo(() => {
+    if (context) {
+      return context.isOpen(name);
+    }
+    return false;
+  }, [name, context.isOpen]);
+  const handleClick = () => {
+    context.updateValue(name);
+  };
+  const [timer, setTimer] = useState(null);
+  const [currentHeight, setCurrentHeight] = useState("auto");
+  const inAnimation = useRef(false);
+  const [wrapperHeight, setWrapperHeight] = useState(() => expanded ? "auto" : "0px");
+  const getRect = (selector) => {
+    return new Promise((resolve) => {
+      Taro.createSelectorQuery().select(selector).boundingClientRect().exec((rect = []) => {
+        resolve(rect[0]);
+      });
+    });
+  };
+  useEffect(() => {
+    setTimeout(() => {
+      getRect(target).then((res) => {
+        if (res == null ? void 0 : res.height) {
+          setCurrentHeight(`${res.height}px`);
+        }
+      });
+    }, 200);
+  }, [children]);
+  useEffect(() => {
+    setTimeout(() => {
+      getRect(target).then((res) => {
+        if (res == null ? void 0 : res.height) {
+          setCurrentHeight(`${res.height}px`);
+        }
+      });
+    }, 100);
+  }, []);
+  const toggle = () => {
+    if (timer) {
+      clearTimeout(timer);
+      setTimer(timer);
+    }
+    const start = expanded ? "0px" : currentHeight;
+    const end = expanded ? currentHeight : "0px";
+    inAnimation.current = true;
+    setWrapperHeight(start);
+    const newIconStyle = expanded ? { transform: `translateY(-50%) rotate(${rotate}deg)` } : { transform: "translateY(-50%)" };
+    setIconStyle(newIconStyle);
+    setTimeout(() => {
+      setWrapperHeight(end);
+      inAnimation.current = false;
+      if (expanded) {
+        const timer2 = setTimeout(() => {
+          setWrapperHeight("auto");
+        }, 300);
+        setTimer(timer2);
+      }
+    }, 100);
+  };
+  useEffect(toggle, [expanded]);
+  return React.createElement(
+    "div",
+    { className: classPrefix, ...rest },
+    React.createElement(
+      "div",
+      { className: classNames(`${classPrefix}__header`, { disabled }), onClick: handleClick },
+      React.createElement("div", { className: `${classPrefix}__title` }, title),
+      React.createElement("div", { className: `${classPrefix}__extra` }, extra),
+      React.createElement(
+        "div",
+        { className: `${classPrefix}__icon-box` },
+        React.createElement("div", { className: `${classPrefix}__icon`, style: iconStyle }, expandIcon || context.expandIcon)
+      )
+    ),
+    React.createElement(
+      "div",
+      { className: `${classPrefix}__content`, ref: wrapperRef, style: {
+        willChange: "height",
+        height: wrapperHeight
+      } },
+      React.createElement("div", { ref: contentRef, className: `${classPrefix}__content-text`, id: `nut-collapse__content-${refRandomId}` }, children)
+    )
+  );
+};
+CollapseItem.defaultProps = defaultProps;
+CollapseItem.displayName = "NutCollapseItem";
+export {
+  CollapseItem as C,
+  CollapseContext as a
+};