@nutui/nutui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
80 lines (79 loc) • 3.7 kB
JavaScript
"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 _components = require("@tarojs/components");
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 _$_object_spread = (0, _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 = (0, _object_without_properties._)(_$_object_spread, [
"color",
"type",
"total",
"current",
"children",
"className",
"direction",
"placement"
]);
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'), (0, _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.default.createElement(_components.View, {
key: item,
className: "".concat(classPrefix, "-dot ").concat(classPrefix, "-dot-").concat(item, " ").concat(classPrefix, "-dot-active")
}) : /*#__PURE__*/ _react.default.createElement(_components.View, {
key: item,
className: "".concat(classPrefix, "-dot ").concat(classPrefix, "-dot-").concat(item)
}));
}
return childs;
};
var renderLineElement = function renderLineElement() {
return /*#__PURE__*/ _react.default.createElement(_components.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.default.createElement(_components.View, (0, _object_spread._)({
className: (0, _classnames.default)(classPrefix, classes, maybeFixedWidth(), className)
}, rest), renderByType(type));
};
Indicator.displayName = 'NutIndicator';