"use strict";
/**
 * @desc 加载中-点
 * @author denghuan
 */
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Dots = void 0;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const color_tool_1 = require("../_utils/color-tool");
const StyledDots = styled_components_1.default.div.attrs((props) => props) `
  width: ${props => props.dotSize + props.radius * 2}px;
  height: ${props => props.dotSize + props.radius * 2}px;
  position: relative;
  animation: loadingCircle 1.75s infinite linear;
`;
function Dots(props) {
    const { repeat = 12, dotSize = 4, radius = 12 } = props;
    return (react_1.default.createElement(StyledDots, { ...{ repeat, dotSize, radius, ...props } }, new Array(repeat).fill(0).map((_, idx) => (react_1.default.createElement(Dot, { key: idx, ...{ repeat, dotSize, radius }, index: idx })))));
}
exports.Dots = Dots;
const Dot = styled_components_1.default.div.attrs((props) => props) `
  width: ${props => props.dotSize}px;
  height: ${props => props.dotSize}px;
  background-color: ${({ repeat, index, theme }) => color_tool_1.rgba(theme.main, (1 / repeat) * (repeat - index))};
  border-radius: 50%;
  position: absolute;
  top: calc(50% - ${({ dotSize }) => dotSize / 2}px);
  left: calc(50% - ${({ dotSize }) => dotSize / 2}px);
  transform: rotate(${({ repeat, index }) => -(index / repeat) * 360}deg)
    translateY(${props => -props.radius}px);
`;
