test-nut-ui
Version:
<p align="center"> <img alt="logo" src="https://img11.360buyimg.com/imagetools/jfs/t1/211965/25/7152/22022/61b16785E433119bb/aa41d7a9f7e823f3.png" width="150" style="margin-bottom: 10px;"> </p>
246 lines (245 loc) • 9.56 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _excluded = ["children", "className", "fixed", "size", "type", "text", "textPosition", "showText", "loadingImage", "radius", "clockwise", "strokeWidth", "color", "background", "style", "strokeLinecap"];
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
enumerableOnly && (symbols = symbols.filter(function(sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
})), keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread(target) {
for (var i = 1; i < arguments.length; i++) {
var source = null != arguments[i] ? arguments[i] : {};
i % 2 ? ownKeys(Object(source), true).forEach(function(key) {
_defineProperty(target, key, source[key]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
return target;
}
import React__default, { useState, useRef, useEffect } from "react";
import classNames from "classnames";
import { a as isObject } from "./index2.js";
import { C as ComponentDefaults } from "./typings.js";
var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
fixed: false,
size: "middle",
type: "circle",
text: "加载中...",
textPosition: "vertical",
showText: false,
loadingImage: null,
strokeWidth: 8,
radius: 0,
strokeLinecap: "round",
color: "#2C68FF",
background: "#F5F5F5",
clockwise: true
});
var classPrefix = "nut-loading";
var Loading = function Loading2(props) {
var _classNames;
var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, className = _defaultProps$props.className, fixed = _defaultProps$props.fixed, size = _defaultProps$props.size, type = _defaultProps$props.type, text = _defaultProps$props.text, textPosition = _defaultProps$props.textPosition, showText = _defaultProps$props.showText, loadingImage = _defaultProps$props.loadingImage, radius = _defaultProps$props.radius, clockwise = _defaultProps$props.clockwise, strokeWidth = _defaultProps$props.strokeWidth, color = _defaultProps$props.color, background = _defaultProps$props.background, style = _defaultProps$props.style, strokeLinecap = _defaultProps$props.strokeLinecap, restProps = _objectWithoutProperties(_defaultProps$props, _excluded);
var _useState = useState([0.2, 0.6, 1]), _useState2 = _slicedToArray(_useState, 2), statusList = _useState2[0], setStatusList = _useState2[1];
var timerId = useRef(-1);
var duration = 1e3;
useEffect(function() {
if (type === "dot" && statusList.length) {
var interval = duration / statusList.length;
timerId.current = setInterval(function() {
var newList = _toConsumableArray(statusList);
var item = newList.pop();
item && newList.unshift(item);
setStatusList(newList);
}, interval);
}
return function() {
if (timerId.current >= 0) {
clearInterval(timerId.current);
}
};
}, [type, statusList, duration]);
var percent = type === "gradientCircle" ? 50 : 25;
var radiusMap = {
small: 8,
middle: 12,
large: 16
};
var classes = classNames(className, classPrefix, (_classNames = {}, _defineProperty(_classNames, "".concat(classPrefix, "--").concat(size), true), _defineProperty(_classNames, "".concat(classPrefix, "--").concat(textPosition), true), _defineProperty(_classNames, "".concat(classPrefix, "--fixed"), fixed), _classNames));
var refRandomId = Math.random().toString(36).slice(-8);
var r = radiusMap[size || "middle"];
var circleStyles = {
height: "".concat(Number(radius || r) * 2, "px"),
width: "".concat(Number(radius || r) * 2, "px")
};
var pathStyle = {
stroke: background
};
var hoverStyle = function hoverStyle2() {
var perimeter = 283;
var offset = perimeter * Number(percent) / 100;
var newColor = type === "gradientCircle" ? {
"0%": "#F5F5F5",
"100%": color
} : color;
return {
stroke: isObject(newColor) ? "url(#".concat(refRandomId, ")") : newColor,
strokeDasharray: "".concat(offset, "px ").concat(perimeter, "px")
};
};
var path = function path2() {
var isWise = clockwise ? 1 : 0;
return "M 50 50 m -45 0 a 45 45 0 1 ".concat(isWise, " 90 0 a 45 45 0 1 ").concat(isWise, " -90 0");
};
var stop = function stop2() {
var newColor = type === "gradientCircle" ? {
"0%": "#F5F5F5",
"100%": props.color
} : props.color;
if (!isObject(newColor)) {
return;
}
var color2 = newColor;
var colorArr = Object.keys(color2).sort(function(a, b) {
return parseFloat(a) - parseFloat(b);
});
var stopArr = [];
colorArr.map(function(item) {
var obj = {
key: "",
value: ""
};
obj.key = item;
obj.value = color2[item];
stopArr.push(obj);
});
return stopArr;
};
var renderLoading = function renderLoading2() {
if (loadingImage) {
return loadingImage;
}
if (type === "circle" || type === "gradientCircle") {
var _stop;
return React__default.createElement("div", {
className: "loading-rotate",
style: circleStyles
}, React__default.createElement("svg", {
viewBox: "0 0 100 100",
style: {
overflow: "visible"
}
}, React__default.createElement("defs", null, React__default.createElement("linearGradient", {
id: refRandomId,
x1: "100%",
y1: "0%",
x2: "0%",
y2: "0%"
}, (_stop = stop()) === null || _stop === void 0 ? void 0 : _stop.map(function(item, index) {
return React__default.createElement("stop", {
key: index,
offset: item.key,
stopColor: item.value
});
}))), React__default.createElement("path", {
className: "nut-loading-path",
d: path(),
style: pathStyle,
fill: "none",
strokeWidth
}), React__default.createElement("path", {
className: "nut-loading-hover",
style: hoverStyle(),
d: path(),
fill: "none",
strokeLinecap,
transform: "rotate(90,50,50)",
strokeWidth
})));
} else if (type === "normal") {
var count = 8;
var style2 = {
backgroundColor: props.color
};
var getStyle = function getStyle2(index) {
var style3 = {
opacity: (count - index) / count,
transform: "rotate(".concat(index / count, "turn)")
};
return style3;
};
return React__default.createElement("div", {
className: "loading-rotate"
}, new Array(count).fill(1).map(function(item, index) {
return React__default.createElement("span", {
key: index,
className: "".concat(classPrefix, "__normal--block ").concat(classPrefix, "__normal--block-").concat(index),
style: getStyle(index)
}, React__default.createElement("span", {
className: "".concat(classPrefix, "__normal--block-inner"),
style: style2
}));
}));
} else if (type === "point") {
var _count = 4;
var _style = {
backgroundColor: props.color
};
var _getStyle = function _getStyle2(index) {
var style3 = {
opacity: (_count - index) / _count,
transform: "rotate(".concat(index / _count, "turn)")
};
return style3;
};
return React__default.createElement("div", {
className: "loading-rotate"
}, new Array(_count).fill(1).map(function(item, index) {
return React__default.createElement("span", {
key: index,
className: "".concat(classPrefix, "__point--block ").concat(classPrefix, "__normal--block-").concat(index),
style: _getStyle(index)
}, React__default.createElement("span", {
className: "".concat(classPrefix, "__point--block-inner"),
style: _style
}));
}));
} else if (type === "dot") {
return React__default.createElement("div", {
className: "".concat(classPrefix, "__dot--block")
}, statusList.map(function(opacity, index) {
return (
// @ts-ignore
React__default.createElement("span", {
key: index,
className: "".concat(classPrefix, "__dot--block-inner ").concat(classPrefix, "__normal--block-").concat(index),
style: {
opacity,
backgroundColor: color
}
})
);
}));
}
};
return React__default.createElement("div", _objectSpread({
className: classes,
style
}, restProps), React__default.createElement("div", {
className: "".concat(classPrefix, "__").concat(type)
}, renderLoading()), showText ? React__default.createElement("div", {
className: "".concat(classPrefix, "__text")
}, text) : null);
};
Loading.defaultProps = defaultProps;
Loading.displayName = "NutLoading";
export {
Loading as L
};