@alifd/meet-react/es/slider/slider.js

Fusion Mobile React UI System Component

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import { __rest } from "tslib";
import classNames from 'classnames';
import React, { createElement, forwardRef, Children } from "react";
import { Slider as ReactSlider } from "@alifd/meet-react-component-one";
var DIRECTION_MAP = {
  ver: 'vertical',
  hoz: 'horizontal'
};
var Slider = function Slider(props, ref) {
  var _props$prefix = props.prefix,
    prefix = _props$prefix === void 0 ? 'mt-' : _props$prefix,
    _props$activeIndex = props.activeIndex,
    activeIndex = _props$activeIndex === void 0 ? 0 : _props$activeIndex,
    _props$showDots = props.showDots,
    showDots = _props$showDots === void 0 ? true : _props$showDots,
    _props$autoplay = props.autoplay,
    autoplay = _props$autoplay === void 0 ? false : _props$autoplay,
    _props$autoplaySpeed = props.autoplaySpeed,
    autoplaySpeed = _props$autoplaySpeed === void 0 ? 3000 : _props$autoplaySpeed,
    _props$dotStyle = props.dotStyle,
    dotStyle = _props$dotStyle === void 0 ? {} : _props$dotStyle,
    _props$onChange = props.onChange,
    onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
    _props$infinite = props.infinite,
    infinite = _props$infinite === void 0 ? true : _props$infinite,
    _props$width = props.width,
    width = _props$width === void 0 ? 750 : _props$width,
    _props$height = props.height,
    height = _props$height === void 0 ? 100 : _props$height,
    _props$slideDirection = props.slideDirection,
    slideDirection = _props$slideDirection === void 0 ? 'hoz' : _props$slideDirection,
    className = props.className,
    children = props.children,
    others = __rest(props, ["prefix", "activeIndex", "showDots", "autoplay", "autoplaySpeed", "dotStyle", "onChange", "infinite", "width", "height", "slideDirection", "className", "children"]);
  var handleChange = function handleChange(e) {
    if (onChange) {
      onChange(e.index || 0);
    }
  };
  return /*#__PURE__*/React.createElement(ReactSlider, _extends({}, others, {
    className: classNames(className, "".concat(prefix, "slider")),
    ref: ref,
    width: "".concat(width),
    height: "".concat(height),
    autoPlay: autoplay,
    showsPagination: showDots,
    index: activeIndex,
    paginationStyle: Object.assign({
      itemColor: 'rgba(245,245,245,0.5)',
      itemSelectedColor: '#666',
      itemSize: 16,
      width: '100%',
      bottom: 16
    }, dotStyle),
    autoplay: autoplay,
    direction: DIRECTION_MAP[slideDirection] || 'horizontal',
    loop: infinite,
    autoPlayInterval: autoplaySpeed,
    onChange: handleChange
  }), Children.toArray(children).filter(function (child) {
    if (!child) {
      return null;
    }
    return child;
  }));
};
Slider.displayName = 'Slider';
export default /*#__PURE__*/forwardRef(Slider);