@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
69 lines (68 loc) • 2.88 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";
var defaultProps = {
total: 2,
current: 0,
direction: 'horizontal',
color: 'primary',
type: 'anchor'
};
var classPrefix = "nut-indicator";
export var Indicator = function(props) {
var maybeFixedWidth = function maybeFixedWidth() {
if (type === 'dualScreen' || type === 'slide') {
return "".concat(classPrefix, "-fixed-width");
}
return '';
};
var _ref = _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 = _object_without_properties(_ref, [
"color",
"type",
"total",
"current",
"children",
"className",
"direction"
]);
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'), _obj));
var renderDotElement = function() {
var childs = [];
for(var item = 0; item < total; item++){
childs.push(item === current ? children || /*#__PURE__*/ React.createElement("div", {
key: item,
className: "".concat(classPrefix, "-dot ").concat(classPrefix, "-dot-active")
}) : /*#__PURE__*/ React.createElement("div", {
key: item,
className: "".concat(classPrefix, "-dot")
}));
}
return childs;
};
var renderLineElement = function() {
var trackWidth = 21;
var sliderWidth = 6;
var stride = (trackWidth - sliderWidth) / (total - 1);
return /*#__PURE__*/ React.createElement("div", {
style: {
transform: "".concat(direction === 'vertical' ? 'translateY' : 'translateX', "(").concat(current * stride, "px)")
},
className: "".concat(classPrefix, "-line ").concat(classPrefix, "-line-active")
});
};
var renderByType = function(type) {
switch(type){
case 'slide':
return renderLineElement();
default:
return renderDotElement();
}
};
return /*#__PURE__*/ React.createElement("div", _object_spread({
className: classNames(classPrefix, classes, maybeFixedWidth(), className)
}, rest), renderByType(type));
};
Indicator.displayName = 'NutIndicator';