/**
 * @desc 加载中-点
 * @author denghuan
 */
import React from 'react';
import styled from 'styled-components';
import { rgba } from '../_utils/color-tool';
const StyledDots = styled.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;
`;
export function Dots(props) {
    const { repeat = 12, dotSize = 4, radius = 12 } = props;
    return (React.createElement(StyledDots, { ...{ repeat, dotSize, radius, ...props } }, new Array(repeat).fill(0).map((_, idx) => (React.createElement(Dot, { key: idx, ...{ repeat, dotSize, radius }, index: idx })))));
}
const Dot = styled.div.attrs((props) => props) `
  width: ${props => props.dotSize}px;
  height: ${props => props.dotSize}px;
  background-color: ${({ repeat, index, theme }) => 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);
`;
