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

package/dist/esm/checkbox.taro-016074da.js

@@ -0,0 +1,177 @@
+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, {
+      [`nut-checkboxgroup--${props.direction}`]: props.direction,
+      className
+    }), ...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-3d997680.js

@@ -0,0 +1,70 @@
+import React, { memo, useState, useEffect } from "react";
+import classNames from "classnames";
+import { c as cn } from "./bem-cdccae08.js";
+const defaultProps = {
+  activeName: ["0"],
+  accordion: false,
+  expandIcon: null,
+  rotate: 180
+};
+function areEqual(prevProps, nextProps) {
+  return prevProps.children === nextProps.children && JSON.stringify(prevProps.activeName) === JSON.stringify(nextProps.activeName);
+}
+const Collapse = memo((props) => {
+  const { className, style, children, activeName, accordion, expandIcon, rotate, onChange } = {
+    ...defaultProps,
+    ...props
+  };
+  const childrenDom = React.Children.toArray(children);
+  const [defaultOpenIndex, setDefaultOpenIndex] = useState([]);
+  const handleActiveName = () => {
+    let activeArr = [];
+    if (!Array.isArray(activeName)) {
+      activeArr.push(activeName.toString());
+    } else {
+      if (accordion && activeName.length > 1) {
+        console.warn("手风琴模式不支持传递多个打开页签");
+      }
+      const activeNameStr = activeName.map((item) => {
+        return item.toString();
+      });
+      activeArr = [...activeNameStr];
+    }
+    return activeArr;
+  };
+  const colBem = cn("collapse");
+  useEffect(() => {
+    const activeArr = handleActiveName();
+    setDefaultOpenIndex(activeArr);
+  }, [activeName]);
+  const onToggle = (isOpen, name) => {
+    let newOpenIndex = [...defaultOpenIndex];
+    if (isOpen) {
+      const removeIndex = newOpenIndex.findIndex((value) => {
+        return value === name;
+      });
+      newOpenIndex.splice(removeIndex, 1);
+    } else {
+      if (accordion) {
+        newOpenIndex = [name];
+      } else {
+        newOpenIndex.push(name);
+      }
+    }
+    setDefaultOpenIndex(newOpenIndex);
+    onChange && onChange(!isOpen, name);
+  };
+  return React.createElement("div", { className: classNames(colBem(), className), style }, childrenDom.map((item) => {
+    return React.cloneElement(item, {
+      isOpen: defaultOpenIndex.includes(item.props.name),
+      onToggle: (isOpen, name) => onToggle(isOpen, name),
+      expandIcon: item.props.expandIcon || expandIcon,
+      rotate
+    });
+  }));
+}, areEqual);
+Collapse.defaultProps = defaultProps;
+Collapse.displayName = "NutCollapse";
+export {
+  Collapse as C
+};

package/dist/esm/collapseitem-f4571575.js

@@ -0,0 +1,76 @@
+import React, { useState, useCallback, useEffect } from "react";
+import { c as cn } from "./bem-cdccae08.js";
+const defaultProps = {
+  title: null,
+  name: "",
+  isOpen: false,
+  expandIcon: null,
+  disabled: false,
+  rotate: 180,
+  subTitle: null,
+  childnull: true
+};
+const CollapseItem = (props) => {
+  const { children, title, isOpen, onToggle, name, disabled, expandIcon, rotate, subTitle, childnull, ...rest } = {
+    ...defaultProps,
+    ...props
+  };
+  const [domHeight, setDomHeight] = useState(-1);
+  const [currHeight, setCurrHeight] = useState("auto");
+  const [update, setUpdate] = useState(false);
+  const [iconStyle, setIconStyle] = useState({
+    transform: "translateY(-50%)"
+  });
+  const colBem = cn("collapse-item");
+  const measuredRef = useCallback((node) => {
+    if (node !== null) {
+      setDomHeight(node.getBoundingClientRect().height);
+    }
+  }, [update]);
+  useEffect(() => {
+    setTimeout(() => {
+      if (domHeight !== -1) {
+        isOpen ? setCurrHeight(`${domHeight}px`) : setCurrHeight("0px");
+      }
+      const newIconStyle = isOpen ? { transform: `translateY(-50%) rotate(${rotate}deg)` } : { transform: "translateY(-50%)" };
+      setIconStyle(newIconStyle);
+    }, 10);
+  }, [isOpen, domHeight, rotate]);
+  useEffect(() => {
+    if (!isOpen) {
+      setCurrHeight("0px");
+    } else {
+      setCurrHeight("auto");
+    }
+    setUpdate(!update);
+  }, [children, isOpen]);
+  return React.createElement(
+    "div",
+    { className: colBem(), ...rest },
+    React.createElement(
+      "div",
+      { className: colBem("header", { disabled }), onClick: () => {
+        if (disabled)
+          return;
+        onToggle && onToggle(isOpen, name);
+      } },
+      React.createElement("div", { className: colBem("title") }, title),
+      React.createElement("div", { className: colBem("sub-title") }, subTitle),
+      React.createElement(
+        "div",
+        { className: colBem("icon-box") },
+        React.createElement("div", { className: colBem("icon"), style: iconStyle }, expandIcon)
+      )
+    ),
+    childnull && React.createElement(
+      "div",
+      { className: colBem("content"), style: { height: currHeight }, ref: measuredRef },
+      React.createElement("div", { className: colBem("content-text") }, children)
+    )
+  );
+};
+CollapseItem.defaultProps = defaultProps;
+CollapseItem.displayName = "NutCollapseItem";
+export {
+  CollapseItem as C
+};