@nutui/nutui-react-taro/dist/es/packages/swiper/swiper.js

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

import { _ as _define_property } from "@swc/helpers/_/_define_property";
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import React, { Children, useEffect, useImperativeHandle, useMemo, useState } from "react";
import { Swiper as TaroSwiper, SwiperItem as TSwiperItem, View } from "@tarojs/components";
import classNames from "classnames";
import Indicator from "../indicator/index";
import pxTransform from "../../utils/px-transform";
var defaultProps = {
    direction: 'horizontal',
    indicator: false,
    autoPlay: false,
    loop: false,
    defaultValue: 0,
    style: {}
};
var classPrefix = 'nut-swiper';
export var Swiper = /*#__PURE__*/ React.forwardRef(function(props, ref) {
    var _ref = _object_spread({}, defaultProps, props), width = _ref.width, height = _ref.height, className = _ref.className, children = _ref.children, indicator = _ref.indicator, loop = _ref.loop, autoPlay = _ref.autoPlay, duration = _ref.duration, direction = _ref.direction, defaultValue = _ref.defaultValue, onChange = _ref.onChange, style = _ref.style, rest = _object_without_properties(_ref, [
        "width",
        "height",
        "className",
        "children",
        "indicator",
        "loop",
        "autoPlay",
        "duration",
        "direction",
        "defaultValue",
        "onChange",
        "style"
    ]);
    var _useState = _sliced_to_array(useState(defaultValue), 2), current = _useState[0], setCurrent = _useState[1];
    var childrenCount = useMemo(function() {
        var c = 0;
        React.Children.map(children, function(child, index) {
            c += 1;
        });
        return c;
    }, [
        children
    ]);
    useEffect(function() {
        setCurrent(defaultValue);
    }, [
        defaultValue
    ]);
    var renderIndicator = function() {
        if (/*#__PURE__*/ React.isValidElement(indicator)) return indicator;
        if (indicator) {
            var _obj;
            return /*#__PURE__*/ React.createElement(View, {
                className: classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-indicator"), true), _define_property(_obj, "".concat(classPrefix, "-indicator-vertical"), direction === 'vertical'), _obj))
            }, /*#__PURE__*/ React.createElement(Indicator, {
                current: current,
                total: childrenCount,
                direction: direction
            }));
        }
        return null;
    };
    var handleOnChange = function(value) {
        setCurrent(value.detail.current);
    };
    useImperativeHandle(ref, function() {
        return {
            to: function(value) {
                setCurrent(value);
            },
            next: function() {
                if (loop) {
                    setCurrent((current + 1) % childrenCount);
                } else {
                    setCurrent(current + 1 >= childrenCount ? current : current + 1);
                }
            },
            prev: function() {
                if (loop) {
                    var next = current - 1;
                    next = next < 0 ? childrenCount + next : next;
                    setCurrent(next % childrenCount);
                } else {
                    setCurrent(current - 1 <= 0 ? 0 : current - 1);
                }
            }
        };
    });
    return /*#__PURE__*/ React.createElement(View, {
        className: classNames(classPrefix, className),
        style: _object_spread_props(_object_spread({}, style), {
            width: !width ? '100%' : width,
            height: !height ? pxTransform(150) : height
        })
    }, /*#__PURE__*/ React.createElement(View, {
        className: "nut-swiper-inner",
        style: {
            width: !width ? '100%' : width,
            height: !height ? pxTransform(150) : height
        }
    }, /*#__PURE__*/ React.createElement(TaroSwiper, _object_spread({
        current: current,
        circular: loop,
        autoplay: autoPlay,
        vertical: direction === 'vertical',
        indicatorDots: false,
        onChange: function(e) {
            var _props_onChange;
            handleOnChange(e);
            (_props_onChange = props.onChange) === null || _props_onChange === void 0 ? void 0 : _props_onChange.call(props, e);
        },
        style: {
            width: !width ? '100%' : width,
            height: !height ? pxTransform(150) : height
        }
    }, rest), Children.toArray(children).map(function(child, index) {
        var className;
        if (/*#__PURE__*/ React.isValidElement(child)) {
            className = child.props.className;
        }
        return /*#__PURE__*/ React.createElement(TSwiperItem, {
            className: className,
            key: index
        }, child);
    }))), renderIndicator());
});
Swiper.displayName = 'NutSwiper';