fa7dc0b247
* Adding blank components. * Adding Todo note for tree * Adding todo note for LighteningMenu * ads button component * Adding storybook support. * storybook integrated with button component * ads button component props completed * button component icon and loading logic implemented * button component completed * Added a text knob. * Adding default text for button. * Merging theme and other fixes. * Fixed info button. * Better types. * Adding background param to components. * Re-using vsariant for callount. * Added props for Text input. * Adding text component. * feedback changes added in button and icon component * type any removed in button component * Text component created with typography and story * Fixing spinner issues * Textinput component ads (#252) * text input component with story is implemented * Update README.md * Fixing spinner issues * Fixing hexToRGBA import * story error fixed and text component commented for now * props condition fixed and added error input story * unused import removed Co-authored-by: Rohit Kumawat <rohit.kumawat@primathon.in> Co-authored-by: Nikhil Nandagopal <nikhil.nandagopal@gmail.com> * story spacing added and component name fixed * feedback changes implemented * forward ref added * feedback changes implemented * text and textinput stories updated * pr comments resolved Co-authored-by: Rohit Kumawat <rohit.kumawat@primathon.in> Co-authored-by: Nikhil Nandagopal <nikhil.nandagopal@gmail.com>
71 lines
1.5 KiB
TypeScript
71 lines
1.5 KiB
TypeScript
import React from "react";
|
|
import styled, { keyframes } from "styled-components";
|
|
import { ThemeProp } from "./common";
|
|
import { Size } from "./Button";
|
|
|
|
export const sizeHandler = (props: ThemeProp & SpinnerProp) => {
|
|
let iconSize = 0;
|
|
switch (props.size) {
|
|
case Size.small:
|
|
iconSize = props.theme.iconSizes.small;
|
|
break;
|
|
case Size.medium:
|
|
iconSize = props.theme.iconSizes.medium;
|
|
break;
|
|
case Size.large:
|
|
iconSize = props.theme.iconSizes.large;
|
|
break;
|
|
}
|
|
return iconSize;
|
|
};
|
|
|
|
const rotate = keyframes`
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
`;
|
|
|
|
const dash = keyframes`
|
|
0% {
|
|
stroke-dasharray: 1, 150;
|
|
stroke-dashoffset: 0;
|
|
}
|
|
50% {
|
|
stroke-dasharray: 90, 150;
|
|
stroke-dashoffset: -35;
|
|
}
|
|
100% {
|
|
stroke-dasharray: 90, 150;
|
|
stroke-dashoffset: -124;
|
|
}
|
|
`;
|
|
|
|
const SvgContainer = styled("svg")<SpinnerProp>`
|
|
animation: ${rotate} 2s linear infinite;
|
|
width: ${props => sizeHandler(props)}px;
|
|
height: ${props => sizeHandler(props)}px;
|
|
`;
|
|
|
|
const SvgCircle = styled("circle")`
|
|
stroke: white;
|
|
stroke-linecap: round;
|
|
animation: ${dash} 1.5s ease-in-out infinite;
|
|
stroke-width: ${props => props.theme.spaces[1]}px;
|
|
`;
|
|
|
|
export type SpinnerProp = {
|
|
size?: Size;
|
|
};
|
|
|
|
Spinner.defaultProp = {
|
|
size: "small",
|
|
};
|
|
|
|
export default function Spinner(props: SpinnerProp) {
|
|
return (
|
|
<SvgContainer viewBox="0 0 50 50" className="new-spinner" size={props.size}>
|
|
<SvgCircle cx="25" cy="25" r="20" fill="none"></SvgCircle>
|
|
</SvgContainer>
|
|
);
|
|
}
|