@nutui/nutui-react-taro/dist/esm/Swiper.js

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

import { _ as __rest } from "./tslib.es6-iWu3F_1J.js";
import React__default, { forwardRef, useState, useMemo, useEffect, useImperativeHandle, Children } from "react";
import { View, Swiper as Swiper$1, SwiperItem } from "@tarojs/components";
import classNames from "classnames";
import { I as Indicator } from "./indicator.taro-k8bxJf86.js";
import { p as pxCheck } from "./px-check-D1Xbd9pj.js";
import { S as SwiperItem$1 } from "./swiperitem.taro-BleF1EOs.js";
const defaultProps = {
  direction: "horizontal",
  indicator: false,
  autoPlay: false,
  loop: false,
  defaultValue: 0,
  style: {}
};
const classPrefix = "nut-swiper";
const Swiper = forwardRef((props, ref) => {
  const _a = Object.assign(Object.assign({}, defaultProps), props), { width, height, className, children, indicator, loop, autoPlay, direction, defaultValue, onChange, style } = _a, rest = __rest(_a, ["width", "height", "className", "children", "indicator", "loop", "autoPlay", "direction", "defaultValue", "onChange", "style"]);
  const [current, setCurrent] = useState(defaultValue);
  const childrenCount = useMemo(() => {
    let c = 0;
    React__default.Children.map(children, (child, index) => {
      c += 1;
    });
    return c;
  }, [children]);
  useEffect(() => {
    setCurrent(defaultValue);
  }, [defaultValue]);
  const renderIndicator = () => {
    if (React__default.isValidElement(indicator))
      return indicator;
    if (indicator) {
      return React__default.createElement(
        "div",
        { className: classNames({
          [`${classPrefix}-indicator`]: true,
          [`${classPrefix}-indicator-vertical`]: direction === "vertical"
        }) },
        React__default.createElement(Indicator, { current, total: childrenCount, direction })
      );
    }
    return null;
  };
  const handleOnChange = (value) => {
    setCurrent(value.detail.current);
  };
  useImperativeHandle(ref, () => ({
    to: (value) => {
      setCurrent(value);
    },
    next: () => {
      if (loop) {
        setCurrent((current + 1) % childrenCount);
      } else {
        setCurrent(current + 1 >= childrenCount ? current : current + 1);
      }
    },
    prev: () => {
      if (loop) {
        let next = current - 1;
        next = next < 0 ? childrenCount + next : next;
        setCurrent(next % childrenCount);
      } else {
        setCurrent(current - 1 <= 0 ? 0 : current - 1);
      }
    }
  }));
  return React__default.createElement(
    View,
    { className: classNames(classPrefix, className), style: Object.assign(Object.assign({}, style), { width: !width ? "100%" : pxCheck(width), height: !height ? "150px" : pxCheck(height) }) },
    React__default.createElement(
      View,
      { className: "nut-swiper-inner", style: {
        width: !width ? "100%" : pxCheck(width),
        height: !height ? "150px" : pxCheck(height)
      } },
      React__default.createElement(Swiper$1, Object.assign({ current, circular: loop, autoplay: autoPlay, vertical: direction === "vertical", indicatorDots: false, onChange: (e) => {
        var _a2;
        handleOnChange(e);
        (_a2 = props.onChange) === null || _a2 === void 0 ? void 0 : _a2.call(props, e);
      }, style: {
        width: !width ? "100%" : pxCheck(width),
        height: !height ? "150px" : pxCheck(height)
      } }, rest), Children.toArray(children).map((child, index) => {
        let className2;
        if (React__default.isValidElement(child)) {
          className2 = child.props.className;
        }
        return React__default.createElement(SwiperItem, { className: className2, key: index }, child);
      }))
    ),
    renderIndicator()
  );
});
Swiper.displayName = "NutSwiper";
const InnerSwiper = Swiper;
InnerSwiper.Item = SwiperItem$1;
export {
  InnerSwiper as default
};