@nutui/nutui-react-taro 2.0.0-alpha.4 → 2.0.0-alpha.6

package/dist/esm/swiper.taro-74cf9306.js

@@ -0,0 +1,430 @@
+import React, { useRef, useState, useMemo, useEffect } from "react";
+import classNames from "classnames";
+import { nextTick, useReady, createSelectorQuery } from "@tarojs/taro";
+import { D as DataContext } from "./UserContext-735db09f.js";
+import { c as cn } from "./bem-cdccae08.js";
+const defaultProps = {
+  width: typeof window === "object" ? window.innerWidth : 375,
+  height: 0,
+  duration: 500,
+  initPage: 0,
+  autoPlay: 0,
+  direction: "horizontal",
+  paginationColor: "#fff",
+  paginationBgColor: "#ddd",
+  paginationVisible: false,
+  loop: true,
+  touchable: true,
+  isPreventDefault: true,
+  isStopPropagation: true,
+  isCenter: false,
+  className: ""
+};
+const DISTANCE = 5;
+const Swiper = React.forwardRef((props, ref) => {
+  const propSwiper = { ...defaultProps, ...props };
+  const { children, direction, className, pageContent, onChange, initPage, paginationColor, paginationVisible, touchable, isPreventDefault, isStopPropagation, autoPlay, isCenter, ...rest } = propSwiper;
+  const container = useRef(null);
+  const innerRef = useRef(null);
+  const _swiper = useRef({
+    moving: false,
+    autoplayTimer: null,
+    width: 0,
+    height: 0,
+    offset: 0,
+    size: 0
+  });
+  const [refRandomId] = useState(Math.random().toString(36).slice(-8));
+  const isVertical = direction === "vertical";
+  const [rect, setRect] = useState(null);
+  let [active, setActive] = useState(0);
+  const [width, setWidth] = useState(0);
+  const [height, setHeight] = useState(0);
+  const [offset, setOffset] = useState(0);
+  const [childOffset, setChildOffset] = useState([]);
+  const [ready, setReady] = useState(false);
+  let size = isVertical ? height : width;
+  const [touch, setTouch] = useState({
+    startX: 0,
+    startY: 0,
+    deltaX: 0,
+    deltaY: 0,
+    offsetX: 0,
+    offsetY: 0,
+    stateDirection: "",
+    delta: 0,
+    touchTime: 0
+  });
+  const { childs, childCount } = useMemo(() => {
+    let childCount2 = 0;
+    const childs2 = React.Children.map(props.children, (child) => {
+      if (!React.isValidElement(child))
+        return null;
+      childCount2++;
+      return child;
+    });
+    return {
+      childs: childs2,
+      childCount: childCount2
+    };
+  }, [props.children]);
+  let trackSize = childCount * Number(size);
+  const parent = {
+    propSwiper,
+    size
+  };
+  const minOffset = (() => {
+    if (rect) {
+      const base = isVertical ? rect == null ? void 0 : rect.height : rect == null ? void 0 : rect.width;
+      return base - Number(size) * childCount;
+    }
+    return 0;
+  })();
+  const stopAutoPlay = () => {
+    clearTimeout(_swiper.current.autoplayTimer);
+    _swiper.current.autoplayTimer = null;
+  };
+  const autoplay = () => {
+    if (propSwiper.autoPlay <= 0 || childCount <= 1)
+      return;
+    stopAutoPlay();
+    _swiper.current.autoplayTimer = setTimeout(() => {
+      next();
+      autoplay();
+    }, Number(propSwiper.autoPlay));
+  };
+  const resettPosition = () => {
+    _swiper.current.moving = true;
+    if (active <= -1) {
+      move({ pace: childCount });
+    }
+    if (active >= childCount) {
+      move({ pace: -childCount });
+    }
+  };
+  const prev = () => {
+    resettPosition();
+    touchReset();
+    requestFrame(() => {
+      requestFrame(() => {
+        _swiper.current.moving = false;
+        move({
+          pace: -1,
+          isEmit: true
+        });
+      });
+    });
+  };
+  const next = () => {
+    resettPosition();
+    touchReset();
+    requestFrame(() => {
+      requestFrame(() => {
+        _swiper.current.moving = false;
+        move({
+          pace: 1,
+          isEmit: true
+        });
+      });
+    });
+  };
+  const to = (index) => {
+    resettPosition();
+    touchReset();
+    requestFrame(() => {
+      requestFrame(() => {
+        _swiper.current.moving = false;
+        let targetIndex;
+        if (props.loop && childCount === index) {
+          targetIndex = active === 0 ? 0 : index;
+        } else {
+          targetIndex = index % childCount;
+        }
+        move({
+          pace: targetIndex - active,
+          isEmit: true
+        });
+      });
+    });
+  };
+  const resize = () => {
+    init(active);
+  };
+  const move = ({ pace = 0, offset: offset2 = 0, isEmit = false, movingStatus = false }) => {
+    if (childCount <= 1)
+      return;
+    const targetActive = getActive(pace);
+    const targetOffset = getOffset(targetActive, offset2);
+    if (props.loop) {
+      if (Array.isArray(children) && children[0] && targetOffset !== minOffset) {
+        const rightBound = targetOffset < minOffset;
+        childOffset[0] = rightBound ? trackSize : 0;
+      }
+      if (Array.isArray(children) && children[childCount - 1] && targetOffset !== 0) {
+        const leftBound = targetOffset > 0;
+        childOffset[childCount - 1] = leftBound ? -trackSize : 0;
+      }
+      setChildOffset(childOffset);
+    }
+    if (isEmit && active !== targetActive) {
+      props.onChange && props.onChange((targetActive + childCount) % childCount);
+    }
+    active = targetActive;
+    setActive(targetActive);
+    setOffset(targetOffset);
+    getStyle(targetOffset);
+  };
+  const getActive = (pace) => {
+    if (pace) {
+      const _active = active + pace;
+      if (props.loop) {
+        return range(_active, -1, childCount);
+      }
+      return range(_active, 0, childCount - 1);
+    }
+    return active;
+  };
+  const getOffset = (active2, offset2 = 0) => {
+    let currentPosition = active2 * Number(size);
+    if (!props.loop) {
+      currentPosition = Math.min(currentPosition, -minOffset);
+    }
+    let targetOffset = offset2 - currentPosition;
+    if (!props.loop) {
+      targetOffset = range(targetOffset, minOffset, 0);
+    }
+    return targetOffset;
+  };
+  const requestFrame = (fn) => {
+    window.requestAnimationFrame.call(window, fn);
+  };
+  const range = (num, min, max) => {
+    return Math.min(Math.max(num, min), max);
+  };
+  const getDirection = (x, y) => {
+    if (x > y && x > DISTANCE)
+      return "horizontal";
+    if (y > x && y > DISTANCE)
+      return "vertical";
+    return "";
+  };
+  const touchReset = () => {
+    touch.startX = 0;
+    touch.startY = 0;
+    touch.deltaX = 0;
+    touch.deltaY = 0;
+    touch.offsetX = 0;
+    touch.offsetY = 0;
+    touch.delta = 0;
+    touch.stateDirection = "";
+    touch.touchTime = 0;
+  };
+  const touchStart = (e) => {
+    touchReset();
+    touch.startX = e.touches[0].clientX;
+    touch.startY = e.touches[0].clientY;
+  };
+  const touchMove = (e) => {
+    touch.deltaX = e.touches[0].clientX - touch.startX;
+    touch.deltaY = e.touches[0].clientY - touch.startY;
+    touch.offsetX = Math.abs(touch.deltaX);
+    touch.offsetY = Math.abs(touch.deltaY);
+    touch.delta = isVertical ? touch.deltaY : touch.deltaX;
+    if (!touch.stateDirection) {
+      touch.stateDirection = getDirection(touch.offsetX, touch.offsetY);
+    }
+  };
+  const b = cn("swiper");
+  const classes = classNames(b(""));
+  const contentClass = classNames({
+    [`${b("inner")}`]: true,
+    [`${b("vertical")}`]: isVertical
+  });
+  const getStyle = (moveOffset = offset) => {
+    const target = innerRef.current;
+    let _offset = 0;
+    if (!isCenter) {
+      _offset = moveOffset;
+    } else {
+      const _size = isVertical ? height : width;
+      const val = isVertical ? (rect == null ? void 0 : rect.height) - _size : (rect == null ? void 0 : rect.width) - _size;
+      _offset = moveOffset + (active === childCount - 1 && !props.loop ? -val / 2 : val / 2);
+    }
+    target.style.transitionDuration = `${_swiper.current.moving ? 0 : props.duration}ms`;
+    target.style[isVertical ? "height" : "width"] = `${Number(size) * childCount}px`;
+    target.style[isVertical ? "width" : "height"] = `${isVertical ? width : height}px`;
+    target.style.transform = `translate3D${!isVertical ? `(${_offset}px,0,0)` : `(0,${_offset}px,0)`}`;
+  };
+  const onTouchStart = (e) => {
+    if (props.isPreventDefault)
+      e.preventDefault();
+    if (props.isStopPropagation)
+      e.stopPropagation();
+    if (!props.touchable)
+      return;
+    touchStart(e);
+    touch.touchTime = Date.now();
+    stopAutoPlay();
+    resettPosition();
+  };
+  const onTouchMove = (e) => {
+    if (props.touchable && _swiper.current.moving) {
+      touchMove(e);
+      if (touch.stateDirection === props.direction) {
+        move({
+          offset: touch.delta
+        });
+      }
+    }
+  };
+  const onTouchEnd = (e) => {
+    if (!props.touchable || !_swiper.current.moving)
+      return;
+    const speed = touch.delta / (Date.now() - touch.touchTime);
+    const isShouldMove = Math.abs(speed) > 0.3 || Math.abs(touch.delta) > +(size / 2).toFixed(2);
+    let pace = 0;
+    _swiper.current.moving = false;
+    if (isShouldMove && touch.stateDirection === props.direction) {
+      const offset2 = isVertical ? touch.offsetY : touch.offsetX;
+      if (props.loop) {
+        if (offset2 > 0) {
+          pace = touch.delta > 0 ? -1 : 1;
+        } else {
+          pace = 0;
+        }
+      } else {
+        pace = -Math[touch.delta > 0 ? "ceil" : "floor"](touch.delta / size);
+      }
+      move({
+        pace,
+        isEmit: true
+      });
+    } else if (touch.delta) {
+      move({ pace: 0 });
+    } else {
+      getStyle();
+    }
+    autoplay();
+  };
+  useEffect(() => {
+    _swiper.current.activePagination = (active + childCount) % childCount;
+  }, [active]);
+  const queryRect = (element) => {
+    return new Promise((resolve) => {
+      const query = createSelectorQuery();
+      query.select(`#${element.id}`) && query.select(`#${element.id}`).boundingClientRect();
+      query.exec((res) => {
+        resolve(res[0]);
+      });
+    });
+  };
+  const init = async (active2 = +propSwiper.initPage) => {
+    const rect2 = await queryRect(container.current);
+    const _active = Math.max(Math.min(childCount - 1, active2), 0);
+    const _width = propSwiper.width ? +propSwiper.width : rect2 == null ? void 0 : rect2.width;
+    const _height = propSwiper.height ? +propSwiper.height : rect2 == null ? void 0 : rect2.height;
+    size = isVertical ? _height : _width;
+    trackSize = childCount * Number(size);
+    const targetOffset = getOffset(_active);
+    _swiper.current.moving = true;
+    if (ready) {
+      _swiper.current.moving = false;
+    }
+    setRect(rect2);
+    setActive(_active);
+    setWidth(_width);
+    setHeight(_height);
+    setOffset(targetOffset);
+    setReady(true);
+  };
+  useEffect(() => {
+    if (ready) {
+      getStyle();
+    }
+  }, [isVertical, width, height, offset, ready]);
+  useEffect(() => {
+    if (ready) {
+      stopAutoPlay();
+      autoplay();
+    }
+    return () => {
+      setReady(false);
+    };
+  }, [ready]);
+  useEffect(() => {
+    stopAutoPlay();
+    autoplay();
+  }, [children]);
+  useEffect(() => {
+    nextTick(() => {
+      init();
+    });
+  }, [propSwiper.initPage]);
+  useEffect(() => {
+    return () => {
+      stopAutoPlay();
+    };
+  }, []);
+  useReady(() => {
+    nextTick(() => {
+      init();
+    });
+  });
+  const itemStyle = (index) => {
+    const style = {};
+    const _direction = propSwiper.direction || direction;
+    const _size = size;
+    if (_size) {
+      style[_direction === "horizontal" ? "width" : "height"] = `${_size}px`;
+    }
+    const offset2 = childOffset[index];
+    if (offset2) {
+      style.transform = `translate3D${_direction === "horizontal" ? `(${offset2}px,0,0)` : `(0,${offset2}px,0)`}`;
+    }
+    return style;
+  };
+  React.useImperativeHandle(ref, () => ({
+    to,
+    next,
+    prev,
+    resize
+  }));
+  return React.createElement(
+    DataContext.Provider,
+    { value: parent },
+    React.createElement(
+      "div",
+      {
+        className: `${classes} ${className}`,
+        ref: container,
+        ...rest,
+        id: `container-${refRandomId}`,
+        onTouchStart,
+        onTouchMove,
+        onTouchEnd,
+        // @ts-ignore
+        catchMove: isVertical
+      },
+      React.createElement("div", { className: contentClass, ref: innerRef }, React.Children.map(childs, (child, index) => {
+        return React.createElement("div", { className: b("item-wrapper"), style: itemStyle(index), key: index }, child);
+      })),
+      propSwiper.paginationVisible && !("pageContent" in propSwiper) ? React.createElement("div", { className: classNames({
+        [`${b("pagination")}`]: true,
+        [`${b("pagination-vertical")}`]: isVertical
+      }) }, React.Children.map(childs, (item, index) => {
+        return React.createElement("i", { style: (active + childCount) % childCount === index ? {
+          backgroundColor: propSwiper.paginationColor
+        } : {
+          backgroundColor: propSwiper.paginationBgColor
+        }, className: classNames({
+          active: (active + childCount) % childCount === index
+        }), key: index });
+      })) : React.createElement("div", null, pageContent)
+    )
+  );
+});
+Swiper.defaultProps = defaultProps;
+Swiper.displayName = "NutSwiper";
+export {
+  Swiper as S
+};

package/dist/esm/swiperitem-80df464a.js

@@ -0,0 +1,29 @@
+import React, { useContext } from "react";
+import classNames from "classnames";
+import { D as DataContext } from "./UserContext-735db09f.js";
+import { c as cn } from "./bem-cdccae08.js";
+const defaultProps = {
+  direction: "horizontal"
+};
+const SwiperItem = React.forwardRef((props, ref) => {
+  const _props = { ...defaultProps, ...props };
+  const { className, style, children, direction, size } = _props;
+  const parent = useContext(DataContext);
+  const b = cn("swiper-item");
+  const classes = classNames(b(""), className);
+  const getStyle = () => {
+    const style2 = {};
+    const _direction = (parent == null ? void 0 : parent.propSwiper.direction) || direction;
+    const _size = (parent == null ? void 0 : parent.size) || size;
+    if (_size) {
+      style2[_direction === "horizontal" ? "width" : "height"] = `${_size}px`;
+    }
+    return style2;
+  };
+  return React.createElement("div", { className: classes, style: { ...style, ...getStyle() } }, 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
+};