@nutui/nutui-react/dist/cjs/packages/indicator/indicator.js

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

"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "Indicator", {
    enumerable: true,
    get: function() {
        return Indicator;
    }
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _define_property = require("@swc/helpers/_/_define_property");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
var defaultProps = {
    total: 2,
    current: 0,
    direction: 'horizontal',
    color: 'primary',
    type: 'anchor'
};
var classPrefix = "nut-indicator";
var Indicator = function Indicator(props) {
    var maybeFixedWidth = function maybeFixedWidth() {
        if (type === 'dualScreen' || type === 'slide') {
            return "".concat(classPrefix, "-fixed-width");
        }
        return '';
    };
    var _ref = (0, _object_spread._)({}, defaultProps, props), color = _ref.color, type = _ref.type, total = _ref.total, current = _ref.current, children = _ref.children, className = _ref.className, direction = _ref.direction, rest = (0, _object_without_properties._)(_ref, [
        "color",
        "type",
        "total",
        "current",
        "children",
        "className",
        "direction"
    ]);
    var _obj;
    var classes = (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-vertical"), direction === 'vertical'), (0, _define_property._)(_obj, "".concat(classPrefix, "-white"), color === 'default'), (0, _define_property._)(_obj, "".concat(classPrefix, "-track"), type === 'slide'), _obj));
    var renderDotElement = function renderDotElement() {
        var childs = [];
        for(var item = 0; item < total; item++){
            childs.push(item === current ? children || /*#__PURE__*/ _react.default.createElement("div", {
                key: item,
                className: "".concat(classPrefix, "-dot ").concat(classPrefix, "-dot-active")
            }) : /*#__PURE__*/ _react.default.createElement("div", {
                key: item,
                className: "".concat(classPrefix, "-dot")
            }));
        }
        return childs;
    };
    var renderLineElement = function renderLineElement() {
        var trackWidth = 21;
        var sliderWidth = 6;
        var stride = (trackWidth - sliderWidth) / (total - 1);
        return /*#__PURE__*/ _react.default.createElement("div", {
            style: {
                transform: "".concat(direction === 'vertical' ? 'translateY' : 'translateX', "(").concat(current * stride, "px)")
            },
            className: "".concat(classPrefix, "-line ").concat(classPrefix, "-line-active")
        });
    };
    var renderByType = function renderByType(type) {
        switch(type){
            case 'slide':
                return renderLineElement();
            default:
                return renderDotElement();
        }
    };
    return /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread._)({
        className: (0, _classnames.default)(classPrefix, classes, maybeFixedWidth(), className)
    }, rest), renderByType(type));
};
Indicator.displayName = 'NutIndicator';