@nutui/nutui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
69 lines (68 loc) • 3.18 kB
JavaScript
import { _ as _define_property } from "@swc/helpers/_/_define_property";
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
import React from "react";
import classNames from "classnames";
import { View } from "@tarojs/components";
var defaultProps = {
total: 2,
current: 0,
direction: 'horizontal',
color: 'primary',
type: 'anchor'
};
var classPrefix = "nut-indicator";
export var Indicator = function Indicator(props) {
var maybeFixedWidth = function maybeFixedWidth() {
if (type === 'dualScreen' || type === 'slide') {
return "".concat(classPrefix, "-fixed-width");
}
return '';
};
var _$_object_spread = _object_spread({}, defaultProps, props), color = _$_object_spread.color, type = _$_object_spread.type, total = _$_object_spread.total, current = _$_object_spread.current, children = _$_object_spread.children, className = _$_object_spread.className, direction = _$_object_spread.direction, placement = _$_object_spread.placement, rest = _object_without_properties(_$_object_spread, [
"color",
"type",
"total",
"current",
"children",
"className",
"direction",
"placement"
]);
var _obj;
var classes = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-vertical"), direction === 'vertical'), _define_property(_obj, "".concat(classPrefix, "-white"), color === 'default'), _define_property(_obj, "".concat(classPrefix, "-track"), type === 'slide'), _define_property(_obj, "".concat(classPrefix, "-").concat(placement), !!placement), _obj));
var renderDotElement = function renderDotElement() {
var childs = [];
for(var item = 0; item < total; item++){
childs.push(item === current ? children || /*#__PURE__*/ React.createElement(View, {
key: item,
className: "".concat(classPrefix, "-dot ").concat(classPrefix, "-dot-").concat(item, " ").concat(classPrefix, "-dot-active")
}) : /*#__PURE__*/ React.createElement(View, {
key: item,
className: "".concat(classPrefix, "-dot ").concat(classPrefix, "-dot-").concat(item)
}));
}
return childs;
};
var renderLineElement = function renderLineElement() {
return /*#__PURE__*/ React.createElement(View, {
style: {
'--nutui-indicator-current': current,
'--nutui-indicator-total': total
},
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.createElement(View, _object_spread({
className: classNames(classPrefix, classes, maybeFixedWidth(), className)
}, rest), renderByType(type));
};
Indicator.displayName = 'NutIndicator';