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

package/dist/esm/subsidenavbar.taro-abe07673.js

@@ -0,0 +1,64 @@
+import React, { useState, useContext, useRef, useCallback, useEffect } from "react";
+import { O as OffsetContext } from "./offsetContext-f32a9246.js";
+const defaultProps = {
+  open: true
+};
+const SubSideNavBar = (props) => {
+  const { title, key, children, onClick, open, ...rest } = {
+    ...defaultProps,
+    ...props
+  };
+  const [subShow, setSubShow] = useState(open);
+  const offset = useContext(OffsetContext);
+  const listRef = useRef(null);
+  const setListLevel = useCallback((nodeList, level = 1) => {
+    const titleClass = nodeList[0].className;
+    if (titleClass.includes("nut-subsidenavbar__title")) {
+      const left = offset * (level + 1);
+      nodeList[0].style.paddingLeft = `${left}px`;
+    }
+    const childNodes = nodeList[1] && nodeList[1].children && Array.from(nodeList[1].children).filter((item) => item.nodeType !== 3 && item.nodeType !== 8);
+    childNodes.forEach((item) => {
+      const itemClass = item.className;
+      if (itemClass.includes("nut-subsidenavbar__item")) {
+        const left = offset * (level + 2);
+        item.style.paddingLeft = `${left}px`;
+      }
+      if (itemClass.includes("nut-subsidenavbar__list")) {
+        let level2 = item.getAttribute("level") ? Number(item.getAttribute("level")) : 1;
+        level2 += 1;
+        item.setAttribute("level", level2.toString());
+        item.children && setListLevel(item.children, level2);
+      }
+    });
+  }, [offset]);
+  const clickFn = (e) => {
+    e.stopPropagation();
+    setSubShow(!subShow);
+    const isShow = !subShow;
+    onClick && onClick({ title, key, isShow });
+  };
+  useEffect(() => {
+    var _a, _b;
+    const childNodes = (_a = listRef.current) == null ? void 0 : _a.children;
+    (_b = listRef.current) == null ? void 0 : _b.setAttribute("level", "1");
+    childNodes && setListLevel(childNodes);
+  }, [setListLevel]);
+  const divClass = subShow ? "nut-subsidenavbar__list  nutShow" : "nut-subsidenavbar__list  nutHide";
+  const iconClass = subShow ? "arrow-icon arrow-down" : "arrow-icon arrow-up";
+  return React.createElement(
+    "div",
+    { className: divClass, ref: listRef, onClick: clickFn, ...rest },
+    React.createElement(
+      "div",
+      { className: "nut-subsidenavbar__title border-bt" },
+      title,
+      " ",
+      React.createElement("i", { className: iconClass })
+    ),
+    React.createElement("div", { className: "nut-subsidenavbar__content" }, children)
+  );
+};
+export {
+  SubSideNavBar as S
+};

package/dist/esm/swipe.taro-de80fcd8.js

@@ -0,0 +1,180 @@
+import React, { forwardRef, useRef, useState, useImperativeHandle, useEffect } from "react";
+import classNames from "classnames";
+import { useReady, nextTick } from "@tarojs/taro";
+import { c as cn } from "./bem-cdccae08.js";
+import { u as useTouch } from "./use-touch-ff43512c.js";
+import { g as getRectByTaro } from "./use-client-rect-f317804e.js";
+function preventDefault(event, isStopPropagation) {
+  if (typeof event.cancelable !== "boolean" || event.cancelable) {
+    event.preventDefault();
+  }
+  if (isStopPropagation) {
+    event.stopPropagation();
+  }
+}
+const defaultProps = {
+  name: ""
+};
+const Swipe = forwardRef((props, instanceRef) => {
+  const swipeBem = cn("swipe");
+  const touch = useTouch();
+  useReady(() => {
+    const getWidth = async () => {
+      if (leftWrapper.current) {
+        const leftRect = await getRectByTaro(leftWrapper.current);
+        setActionWidth((v) => ({ ...v, left: leftRect.width }));
+      }
+      if (rightWrapper.current) {
+        const rightRect = await getRectByTaro(rightWrapper.current);
+        setActionWidth((v) => ({ ...v, right: rightRect.width }));
+      }
+    };
+    nextTick(() => getWidth());
+  });
+  const { children, className, style } = { ...defaultProps, ...props };
+  const root = useRef();
+  const opened = useRef(false);
+  const lockClick = useRef(false);
+  const startOffset = useRef(0);
+  const [state, setState] = useState({
+    offset: 0,
+    dragging: false
+  });
+  const [actionWidth, setActionWidth] = useState({
+    left: 0,
+    right: 0
+  });
+  const wrapperStyle = {
+    transform: `translate3d(${state.offset}px, 0, 0)`,
+    transitionDuration: state.dragging ? "0s" : ".6s"
+  };
+  const leftWidth = actionWidth.left;
+  const rightWidth = actionWidth.right;
+  const onTouchStart = async (event) => {
+    if (leftWrapper.current) {
+      const leftRect = await getRectByTaro(leftWrapper.current);
+      setActionWidth((v) => ({ ...v, left: leftRect.width }));
+    }
+    if (rightWrapper.current) {
+      const rightRect = await getRectByTaro(rightWrapper.current);
+      setActionWidth((v) => ({ ...v, right: rightRect.width }));
+    }
+    if (!props.disabled) {
+      startOffset.current = state.offset;
+      touch.start(event);
+      props.onTouchStart && props.onTouchStart(event);
+    }
+  };
+  const onTouchMove = (event) => {
+    if (props.disabled) {
+      return;
+    }
+    touch.move(event);
+    props.onTouchMove && props.onTouchMove(event);
+    if (touch.isHorizontal()) {
+      lockClick.current = true;
+      const newState = { ...state, dragging: true };
+      const isEdge = !opened || touch.deltaX * startOffset.current < 0;
+      if (isEdge) {
+        preventDefault(event, true);
+      }
+      newState.offset = rangeCalculation(touch.deltaX + startOffset.current, -rightWidth || 0, leftWidth || 0);
+      setState(newState);
+    }
+  };
+  const onTouchEnd = (event) => {
+    if (state.dragging) {
+      setState((v) => ({ ...v, dragging: false }));
+      toggle(state.offset > 0 ? "left" : "right");
+      setTimeout(() => {
+        lockClick.current = false;
+      }, 0);
+      props.onTouchEnd && props.onTouchEnd(event);
+    }
+  };
+  const toggle = (side) => {
+    const offset = Math.abs(state.offset);
+    const base = 0.3;
+    const baseNum = opened ? 1 - base : base;
+    const width = side === "left" ? leftWidth : rightWidth;
+    if (width && offset > Number(width) * baseNum) {
+      open(side);
+    } else {
+      close(side);
+    }
+  };
+  const open = (side) => {
+    var _a;
+    opened.current = true;
+    const offset = side === "left" ? leftWidth : -rightWidth;
+    const name = props.name;
+    (_a = props.onOpen) == null ? void 0 : _a.call(props, { name, position: side });
+    setState((v) => ({ ...v, offset: Number(offset) || 0 }));
+  };
+  const close = (position) => {
+    var _a;
+    if (opened.current) {
+      opened.current = false;
+      (_a = props.onClose) == null ? void 0 : _a.call(props, {
+        name: props.name,
+        position: position || "left"
+      });
+    }
+    setState((v) => ({ ...v, offset: 0 }));
+  };
+  const rangeCalculation = (num, min, max) => {
+    return Math.min(Math.max(Number(num), Number(min)), Number(max));
+  };
+  const leftWrapper = useRef(null);
+  const rightWrapper = useRef(null);
+  const renderActionContent = (side) => {
+    if (props[`${side}Action`]) {
+      return React.createElement("div", { id: "left", ref: side === "left" ? leftWrapper : rightWrapper, className: `${swipeBem(side)}`, onClick: (e) => handleOperate(e, side) }, props[`${side}Action`]);
+    }
+    return null;
+  };
+  const handleOperate = (event, position) => {
+    event.stopPropagation();
+    if (props.beforeClose) {
+      props.beforeClose(position);
+    } else {
+      props.onActionClick && props.onActionClick(event, position);
+    }
+  };
+  useImperativeHandle(instanceRef, () => ({
+    open,
+    close: () => close()
+  }));
+  useEffect(() => {
+    const handler = (event) => {
+      const targets = [root];
+      if (targets.some((targetItem) => {
+        const targetElement = targetItem.current || targetItem;
+        return !targetElement || (targetElement == null ? void 0 : targetElement.contains(event.target));
+      })) {
+        return;
+      }
+      close();
+    };
+    document.addEventListener("touchstart", handler);
+    return () => {
+      document.removeEventListener("touchstart", handler);
+    };
+  }, []);
+  return React.createElement(
+    "div",
+    { ref: root, className: classNames(swipeBem(), className), onTouchStart: (e) => onTouchStart(e), onTouchMove: (e) => onTouchMove(e), onTouchEnd: (e) => onTouchEnd(e), style },
+    React.createElement(
+      "div",
+      { className: `${swipeBem("wrapper")}`, style: wrapperStyle },
+      renderActionContent("left"),
+      children,
+      renderActionContent("right")
+    )
+  );
+});
+Swipe.defaultProps = defaultProps;
+Swipe.displayName = "NutSwipe";
+export {
+  Swipe as S
+};

package/dist/esm/swiper.taro-4aeb8526.js

@@ -0,0 +1,86 @@
+import React, { forwardRef, useState, useRef, Children, useEffect, 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);
+  useEffect(() => {
+    setCurrent(defaultValue);
+  }, [defaultValue]);
+  const renderIndicator = () => {
+    if (React.isValidElement(indicator))
+      return indicator;
+    if (indicator === true) {
+      return React.createElement(
+        "div",
+        { className: classNames({
+          [`${classPrefix}__indicator`]: true,
+          [`${classPrefix}__indicator-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/switch.taro-f0da73a3.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+import { u as usePropsValue } from "./use-props-value-7ac1b1b5.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  disabled: false,
+  activeText: "",
+  inactiveText: ""
+};
+const Switch = (props) => {
+  const { checked, defaultChecked, disabled, activeText, inactiveText, className, style, onChange } = {
+    ...defaultProps,
+    ...props
+  };
+  const classPrefix = "nut-switch";
+  const [value, setValue] = usePropsValue({
+    value: checked,
+    defaultValue: defaultChecked
+  });
+  const classes = () => {
+    return `${classPrefix} ${value ? "switch-open" : "switch-close"} ${disabled ? `${classPrefix}-disabled` : ""} ${`${classPrefix}-base`} ${className}`;
+  };
+  const onClick = (event) => {
+    if (disabled)
+      return;
+    onChange && onChange(!value, event);
+    setValue(!value);
+  };
+  return React.createElement(
+    "div",
+    { className: classes(), onClick: (e) => onClick(e), style },
+    React.createElement(
+      "div",
+      { className: "switch-button" },
+      !value && React.createElement("div", { className: "close-line" }),
+      activeText && React.createElement(React.Fragment, null, value ? React.createElement("div", { className: `${classPrefix}__label open` }, activeText) : React.createElement("div", { className: `${classPrefix}__label close` }, inactiveText))
+    )
+  );
+};
+Switch.defaultProps = defaultProps;
+Switch.displayName = "NutSwitch";
+export {
+  Switch as S
+};

package/dist/esm/tabbar.taro-18eee41f.js

@@ -0,0 +1,55 @@
+import React from "react";
+import classNames from "classnames";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+import { u as usePropsValue } from "./use-props-value-7ac1b1b5.js";
+import { T as TabbarItem } from "./tabbaritem.taro-89646ca1.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  defaultValue: 0,
+  fixed: false,
+  inactiveColor: "",
+  activeColor: "",
+  safeArea: false,
+  onSwitch: (value) => {
+  }
+};
+const Tabbar = (props) => {
+  const { children, defaultValue, value, fixed, activeColor, inactiveColor, safeArea, className, style, onSwitch } = {
+    ...defaultProps,
+    ...props
+  };
+  const classPrefix = "nut-tabbar";
+  const [selectIndex, setSelectIndex] = usePropsValue({
+    value,
+    defaultValue,
+    finalValue: 0,
+    onChange: onSwitch
+  });
+  return React.createElement(
+    "div",
+    { className: classNames(classPrefix, className, {
+      [`${classPrefix}__fixed`]: fixed
+    }), style },
+    React.createElement("div", { className: `${classPrefix}__wrap` }, React.Children.map(children, (child, idx) => {
+      if (!React.isValidElement(child)) {
+        return null;
+      }
+      const childProps = {
+        ...child.props,
+        active: idx === selectIndex,
+        index: idx,
+        inactiveColor,
+        activeColor,
+        handleClick: setSelectIndex
+      };
+      return React.cloneElement(child, childProps);
+    })),
+    (fixed || safeArea) && React.createElement("div", { className: `${classPrefix}__safe-area` })
+  );
+};
+Tabbar.defaultProps = defaultProps;
+Tabbar.displayName = "NutTabbar";
+Tabbar.Item = TabbarItem;
+export {
+  Tabbar as T
+};

package/dist/esm/tabbaritem.taro-89646ca1.js

@@ -0,0 +1,47 @@
+import React from "react";
+import classNames from "classnames";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+import { B as Badge } from "./badge.taro-872605bf.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  title: "",
+  icon: null,
+  active: false,
+  index: 0,
+  handleClick: (idx) => {
+  }
+};
+const TabbarItem = (props) => {
+  const { className, style, title, icon, active, activeColor, inactiveColor, index, handleClick, ...rest } = {
+    ...defaultProps,
+    ...props
+  };
+  const classPrefix = "nut-tabbar-item";
+  const tabbarItemClass = classNames(className, classPrefix, {
+    [`${classPrefix}-active`]: active
+  });
+  const boxPrefix = `${classPrefix}__icon-box`;
+  const titleClass = classNames(boxPrefix, `${boxPrefix}-nav`, {
+    [`${boxPrefix}-large`]: !icon
+  });
+  return React.createElement("div", { className: tabbarItemClass, style: {
+    color: active ? activeColor : inactiveColor,
+    ...style
+  }, onClick: () => handleClick(index) }, icon ? React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(
+      Badge,
+      { ...rest },
+      React.createElement("div", { className: boxPrefix }, icon)
+    ),
+    React.createElement("div", { className: titleClass }, title)
+  ) : React.createElement(
+    Badge,
+    { ...rest },
+    React.createElement("div", { className: titleClass }, title)
+  ));
+};
+export {
+  TabbarItem as T
+};

package/dist/esm/table.taro-15a55c5d.js

@@ -0,0 +1,100 @@
+import React, { useState, useEffect } from "react";
+import classNames from "classnames";
+import { DownArrow } from "@nutui/icons-react-taro";
+import { u as useConfig } from "./configprovider.taro-25758d9f.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  columns: [],
+  data: [],
+  bordered: true,
+  striped: false,
+  noData: "",
+  sorterIcon: null,
+  showHeader: true
+};
+const Table = (props) => {
+  const { locale } = useConfig();
+  defaultProps.noData = locale.noData;
+  const { children, className, style, columns, data, bordered, summary, striped, noData, sorterIcon, showHeader, onSort, ...rest } = {
+    ...defaultProps,
+    ...props
+  };
+  const [curData, setCurData] = useState(data);
+  useEffect(() => {
+    if (data && String(data) !== String(curData)) {
+      setCurData(data);
+    }
+  }, [data]);
+  const classPrefix = "nut-table";
+  const headerClassPrefix = `${classPrefix}__main__head__tr`;
+  const bodyClassPrefix = `${classPrefix}__main__body__tr`;
+  const cls = classNames(classPrefix, className);
+  const handleSorterClick = (item) => {
+    if (item.sorter) {
+      onSort && onSort(item, curData);
+      if (typeof item.sorter === "function") {
+        setCurData(curData.sort(item.sorter));
+      } else {
+        setCurData(item.sorter === "default" ? curData.sort() : curData);
+      }
+    }
+  };
+  const cellClasses = (item) => {
+    return {
+      [`${headerClassPrefix}--border`]: props.bordered,
+      [`${headerClassPrefix}--align${item.align ? item.align : ""}`]: true
+    };
+  };
+  const getColumnItem = (value) => {
+    return columns.filter((item) => item.key === value)[0];
+  };
+  const renderHeadCells = () => {
+    return columns.map((item, index) => {
+      return React.createElement(
+        "span",
+        { className: classNames(`${headerClassPrefix}__th`, cellClasses(item)), key: item.key, onClick: () => handleSorterClick(item) },
+        item.title,
+        " ",
+        item.sorter && (sorterIcon || React.createElement(DownArrow, { size: "12px" }))
+      );
+    });
+  };
+  const sortDataItem = () => {
+    return columns.map((columns2) => {
+      return [columns2.key, columns2.render];
+    });
+  };
+  const renderBodyTds = (item) => {
+    return sortDataItem().map(([value, render], index) => {
+      return React.createElement("span", { className: classNames(`${bodyClassPrefix}__td`, cellClasses(getColumnItem(value))), key: value }, typeof item[value] === "function" || typeof render === "function" ? React.createElement("div", null, render ? render(item) : item[value](item)) : item[value]);
+    });
+  };
+  const renderBoyTrs = () => {
+    return curData.map((item, index) => {
+      return React.createElement("div", { className: bodyClassPrefix, key: index }, renderBodyTds(item));
+    });
+  };
+  return React.createElement(
+    "div",
+    { className: cls, style, ...rest },
+    React.createElement(
+      "div",
+      { className: classNames(`${classPrefix}__main`, {
+        [`${classPrefix}__main--striped`]: striped
+      }) },
+      showHeader && React.createElement(
+        "div",
+        { className: `${classPrefix}__main__head` },
+        React.createElement("div", { className: headerClassPrefix }, renderHeadCells())
+      ),
+      React.createElement("div", { className: `${classPrefix}__main__body` }, renderBoyTrs())
+    ),
+    (summary || curData.length === 0) && React.createElement("div", { className: `${classPrefix}__summary` }, summary || noData)
+  );
+};
+Table.defaultProps = defaultProps;
+Table.displayName = "NutTable";
+export {
+  Table as T
+};

package/dist/esm/tabpane.taro-f8d92ece.js

@@ -0,0 +1,21 @@
+import React from "react";
+import classNames from "classnames";
+const defaultProps = {
+  title: "",
+  value: "",
+  disabled: false
+};
+const TabPane = (props) => {
+  const { children, autoHeightClassName, className, disabled } = {
+    ...defaultProps,
+    ...props
+  };
+  const classPrefix = "nut-tabpane";
+  const classes = classNames({
+    active: !disabled && props.active
+  }, classPrefix, autoHeightClassName, className);
+  return children ? React.createElement("div", { className: classes }, !disabled && children) : null;
+};
+export {
+  TabPane as T
+};