diff --git a/lib/index.js b/lib/index.js index 997f5a4..19a5a8c 100644 --- a/lib/index.js +++ b/lib/index.js @@ -1 +1 @@ -!function(n,e){for(var t in e)n[t]=e[t]}(exports,function(n){var e={};function t(i){if(e[i])return e[i].exports;var r=e[i]={i:i,l:!1,exports:{}};return n[i].call(r.exports,r,r.exports,t),r.l=!0,r.exports}return t.m=n,t.c=e,t.d=function(n,e,i){t.o(n,e)||Object.defineProperty(n,e,{enumerable:!0,get:i})},t.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},t.t=function(n,e){if(1&e&&(n=t(n)),8&e)return n;if(4&e&&"object"==typeof n&&n&&n.__esModule)return n;var i=Object.create(null);if(t.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:n}),2&e&&"string"!=typeof n)for(var r in n)t.d(i,r,function(e){return n[e]}.bind(null,r));return i},t.n=function(n){var e=n&&n.__esModule?function(){return n.default}:function(){return n};return t.d(e,"a",e),e},t.o=function(n,e){return Object.prototype.hasOwnProperty.call(n,e)},t.p="",t(t.s=3)}([function(n,e){n.exports=require("react")},function(n,e){n.exports=require("prop-types")},function(n,e){n.exports=require("styled-components")},function(n,e,t){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.MetroSpinner=e.WhisperSpinner=e.ClassicSpinner=e.TraceSpinner=e.JellyfishSpinner=e.MagicSpinner=e.FlapperSpinner=e.HoopSpinner=e.RingSpinner=e.RainbowSpinner=e.PongSpinner=e.CombSpinner=e.GooSpinner=e.SwishSpinner=e.RotateSpinner=e.ClapSpinner=e.FlagSpinner=e.SphereSpinner=e.FillSpinner=e.CubeSpinner=e.ImpulseSpinner=e.DominoSpinner=e.SequenceSpinner=e.PulseSpinner=e.SpiralSpinner=e.CircleSpinner=e.GuardSpinner=e.HeartSpinner=e.StageSpinner=e.FireworkSpinner=e.PushSpinner=e.WaveSpinner=e.BarsSpinner=e.SwapSpinner=e.GridSpinner=e.BallSpinner=void 0;var i=t(4),r=t(5),o=t(6),a=t(7),s=t(8),l=t(9),u=t(10),c=t(11),f=t(12),d=t(13),p=t(14),z=t(15),m=t(16),g=t(17),h=t(18),b=t(19),y=t(20),U=t(21),v=t(22),w=t(23),_=t(24),x=t(25),S=t(26),k=t(27),C=t(28),j=t(29),P=t(30),O=t(31),I=t(32),M=t(33),E=t(34),B=t(35),X=t(36),Y=t(37),N=t(38),W=t(39);e.BallSpinner=i.BallSpinner,e.GridSpinner=r.GridSpinner,e.SwapSpinner=o.SwapSpinner,e.BarsSpinner=a.BarsSpinner,e.WaveSpinner=s.WaveSpinner,e.PushSpinner=l.PushSpinner,e.FireworkSpinner=u.FireworkSpinner,e.StageSpinner=c.StageSpinner,e.HeartSpinner=f.HeartSpinner,e.GuardSpinner=d.GuardSpinner,e.CircleSpinner=p.CircleSpinner,e.SpiralSpinner=z.SpiralSpinner,e.PulseSpinner=m.PulseSpinner,e.SequenceSpinner=g.SequenceSpinner,e.DominoSpinner=h.DominoSpinner,e.ImpulseSpinner=b.ImpulseSpinner,e.CubeSpinner=y.CubeSpinner,e.FillSpinner=U.FillSpinner,e.SphereSpinner=v.SphereSpinner,e.FlagSpinner=w.FlagSpinner,e.ClapSpinner=_.ClapSpinner,e.RotateSpinner=x.RotateSpinner,e.SwishSpinner=S.SwishSpinner,e.GooSpinner=k.GooSpinner,e.CombSpinner=C.CombSpinner,e.PongSpinner=j.PongSpinner,e.RainbowSpinner=P.RainbowSpinner,e.RingSpinner=O.RingSpinner,e.HoopSpinner=I.HoopSpinner,e.FlapperSpinner=M.FlapperSpinner,e.MagicSpinner=E.MagicSpinner,e.JellyfishSpinner=B.JellyfishSpinner,e.TraceSpinner=X.TraceSpinner,e.ClassicSpinner=Y.ClassicSpinner,e.WhisperSpinner=N.WhisperSpinner,e.MetroSpinner=W.MetroSpinner},function(n,e,t){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.BallSpinner=void 0;var i=f(["\n 0% {\n transform: translateX(0) scale(1);\n }\n 25% {\n transform: translateX(","",") scale(0.25);\n }\n 50% {\n transform: translateX(0) scale(1);\n }\n 75% {\n transform: translateX(","",") scale(0.25);\n }\n 100% {\n transform: translateX(0) scale(1);\n\n }\n"],["\n 0% {\n transform: translateX(0) scale(1);\n }\n 25% {\n transform: translateX(","",") scale(0.25);\n }\n 50% {\n transform: translateX(0) scale(1);\n }\n 75% {\n transform: translateX(","",") scale(0.25);\n }\n 100% {\n transform: translateX(0) scale(1);\n\n }\n"]),r=f(["\n display: flex;\n justify-content: center;\n align-items: center;\n width: ",";\n height: ",";\n"],["\n display: flex;\n justify-content: center;\n align-items: center;\n width: ",";\n height: ",";\n"]),o=f(["\n width: ",";\n height: ",";\n border-radius: 50%;\n background-color: ",";\n animation: "," 3s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n"],["\n width: ",";\n height: ",";\n border-radius: 50%;\n background-color: ",";\n animation: "," 3s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n"]),a=c(t(0)),s=c(t(1)),l=t(2),u=c(l);function c(n){return n&&n.__esModule?n:{default:n}}function f(n,e){return Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}var d=e.BallSpinner=function(n){var e=n.size,t=n.color,i=n.loading,r=n.sizeUnit;return i&&a.default.createElement(p,{size:e},a.default.createElement(z,{color:t,size:e,sizeUnit:r})," ")},p=u.default.div.withConfig({displayName:"ball__Wrapper",componentId:"sc-1edcqkl-0"})(r,(function(n){return""+n.size+n.sizeUnit}),(function(n){return""+n.size/2+n.sizeUnit})),z=u.default.div.withConfig({displayName:"ball__Ball",componentId:"sc-1edcqkl-1"})(o,(function(n){return""+n.size/3+n.sizeUnit}),(function(n){return""+n.size/3+n.sizeUnit}),(function(n){return n.color}),(function(n){return function(n){return(0,l.keyframes)(i,n.size/2,n.sizeUnit,-n.size/2,n.sizeUnit)}(n)}));d.defaultProps={loading:!0,size:40,color:"#00ff89",sizeUnit:"px"},d.propTypes={loading:s.default.bool,size:s.default.number,color:s.default.string,sizeUnit:s.default.string}},function(n,e,t){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.GridSpinner=void 0;var i=f(["\n 0% {\n top: ","",";\n left: ","",";\n }\n 50% {\n width: ","",";\n height: ","",";\n top: ","",";\n left: ","",";\n }\n 100% {\n top: ","",";\n left: ","",";\n }\n"],["\n 0% {\n top: ","",";\n left: ","",";\n }\n 50% {\n width: ","",";\n height: ","",";\n top: ","",";\n left: ","",";\n }\n 100% {\n top: ","",";\n left: ","",";\n }\n"]),r=f(["\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n width: ",";\n height: ",";\n"],["\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n width: ",";\n height: ",";\n"]),o=f(["\n position: absolute;\n top: ",";\n left: ",";\n width: ",";\n height: ",";\n border-radius: 50%;\n background-color: ",";\n animation: "," 1.5s cubic-bezier(0.23, 1, 0.32, 1) infinite;\n"],["\n position: absolute;\n top: ",";\n left: ",";\n width: ",";\n height: ",";\n border-radius: 50%;\n background-color: ",";\n animation: "," 1.5s cubic-bezier(0.23, 1, 0.32, 1) infinite;\n"]),a=c(t(0)),s=c(t(1)),l=t(2),u=c(l);function c(n){return n&&n.__esModule?n:{default:n}}function f(n,e){return Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}var d=e.GridSpinner=function(n){var e=n.size,t=n.color,i=n.loading,r=n.sizeUnit;return i&&a.default.createElement(p,{size:e,sizeUnit:r},function(n){for(var e=n.countBallsInLine,t=n.color,i=n.size,r=n.sizeUnit,o=[],s=0,l=0;l keyframes` @@ -21,7 +21,7 @@ const motion = props => keyframes` } `; -export const BallSpinner = ({ size, color, loading, sizeUnit }) => { +export const BallSpinner = ({ size = 40, color = "#00ff89", loading = true, sizeUnit = "px" }) => { return ( loading && ( @@ -47,13 +47,6 @@ const Ball = styled.div` animation: ${props => motion(props)} 3s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; `; -BallSpinner.defaultProps = { - loading: true, - size: 40, - color: "#00ff89", - sizeUnit: "px", -}; - BallSpinner.propTypes = { loading: PropTypes.bool, size: PropTypes.number, diff --git a/src/components/bars/index.js b/src/components/bars/index.js index 5630aea..ff82574 100644 --- a/src/components/bars/index.js +++ b/src/components/bars/index.js @@ -1,5 +1,5 @@ -import React from "react"; import PropTypes from "prop-types"; +import React from "react"; import styled, { keyframes } from "styled-components"; const motion = props => keyframes` @@ -31,7 +31,7 @@ const getBars = (countBars, color, size, sizeUnit) => { return bars; }; -export const BarsSpinner = ({ size, color, loading, sizeUnit }) => { +export const BarsSpinner = ({ size = 40, color = "#00ff89", loading = true, sizeUnit = "px" }) => { const countBars = 5; return ( loading && ( @@ -62,13 +62,6 @@ const Bar = styled.div` animation-delay: ${props => props.index * 0.15}s; `; -BarsSpinner.defaultProps = { - loading: true, - size: 40, - color: "#00ff89", - sizeUnit: "px", -}; - BarsSpinner.propTypes = { loading: PropTypes.bool, size: PropTypes.number, diff --git a/src/components/circle/index.js b/src/components/circle/index.js index 6ba3966..d8966ad 100644 --- a/src/components/circle/index.js +++ b/src/components/circle/index.js @@ -1,5 +1,5 @@ -import React from "react"; import PropTypes from "prop-types"; +import React from "react"; import styled, { keyframes } from "styled-components"; const rotate = keyframes` @@ -11,7 +11,7 @@ const rotate = keyframes` } `; -export const CircleSpinner = ({ size, color, loading, sizeUnit }) => { +export const CircleSpinner = ({ size = 30, color = "#fff", loading = true, sizeUnit = "px" }) => { return loading && ; }; @@ -27,13 +27,6 @@ const Wrapper = styled.div` animation: ${rotate} 0.75s linear infinite; `; -CircleSpinner.defaultProps = { - loading: true, - size: 30, - color: "#fff", - sizeUnit: "px", -}; - CircleSpinner.propTypes = { loading: PropTypes.bool, size: PropTypes.number, diff --git a/src/components/clap/index.js b/src/components/clap/index.js index 9b75286..f6ef715 100644 --- a/src/components/clap/index.js +++ b/src/components/clap/index.js @@ -1,5 +1,5 @@ -import React from "react"; import PropTypes from "prop-types"; +import React from "react"; import styled, { keyframes } from "styled-components"; const rotate = keyframes` @@ -13,14 +13,10 @@ const rotate = keyframes` const move = props => keyframes` 0% { - transform: translateX(${props.x}${props.sizeUnit}) translateY(${props.y}${ - props.sizeUnit -}) scale(1.25) ; + transform: translateX(${props.x}${props.sizeUnit}) translateY(${props.y}${props.sizeUnit}) scale(1.25) ; } 5% { - transform: translateX(${props.x}${props.sizeUnit}) translateY(${props.y}${ - props.sizeUnit -}) scale(1.75); + transform: translateX(${props.x}${props.sizeUnit}) translateY(${props.y}${props.sizeUnit}) scale(1.75); } 50% { transform: translateX(${props.x}${props.sizeUnit}) translateY(${props.y}${props.sizeUnit}) scale(.25); @@ -54,7 +50,13 @@ const getBalls = ({ countBalls, radius, angle, frontColor, backColor, size, ball return balls; }; -export const ClapSpinner = ({ size, frontColor, backColor, loading, sizeUnit }) => { +export const ClapSpinner = ({ + size = 30, + frontColor = "#00ff89", + backColor = "#4b4c56", + loading = true, + sizeUnit = "px", +}) => { const radius = size / 2; const countBalls = 7; const ballSize = size / 5; @@ -101,14 +103,6 @@ const Ball = styled.div` animation-delay: ${props => props.index * 0.2}s; `; -ClapSpinner.defaultProps = { - loading: true, - size: 30, - frontColor: "#00ff89", - backColor: "#4b4c56", - sizeUnit: "px", -}; - ClapSpinner.propTypes = { loading: PropTypes.bool, size: PropTypes.number, diff --git a/src/components/classic/index.js b/src/components/classic/index.js index 97df544..6bb60e7 100644 --- a/src/components/classic/index.js +++ b/src/components/classic/index.js @@ -1,5 +1,5 @@ -import React from "react"; import PropTypes from "prop-types"; +import React from "react"; import styled, { keyframes } from "styled-components"; const fade = keyframes` @@ -33,7 +33,7 @@ const getBars = ({ countBars: countBars, color, size, barSize: barSize, sizeUnit return bars; }; -export const ClassicSpinner = ({ size, color, loading, sizeUnit }) => { +export const ClassicSpinner = ({ size = 30, color = "#fff", loading = true, sizeUnit = "px" }) => { const radius = size / 2; const countBars = 16; return ( @@ -72,13 +72,6 @@ const Bar = styled.div` animation-delay: ${props => props.index * 0.06}s; `; -ClassicSpinner.defaultProps = { - loading: true, - size: 30, - color: "#fff", - sizeUnit: "px", -}; - ClassicSpinner.propTypes = { loading: PropTypes.bool, size: PropTypes.number, diff --git a/src/components/comb/index.js b/src/components/comb/index.js index 8abe76c..118c89e 100644 --- a/src/components/comb/index.js +++ b/src/components/comb/index.js @@ -1,5 +1,5 @@ -import React from "react"; import PropTypes from "prop-types"; +import React from "react"; import styled, { keyframes } from "styled-components"; const rotate = () => keyframes` @@ -16,7 +16,7 @@ const getBars = ({ countBars, color, size, sizeUnit }) => { return bars; }; -export const CombSpinner = ({ size, color, loading, sizeUnit }) => { +export const CombSpinner = ({ size = 100, color = "#fff", loading = true, sizeUnit = "px" }) => { const countBars = size / 9; return ( loading && ( @@ -51,13 +51,6 @@ const Bar = styled.div` animation-delay: ${props => props.index * 0.05}s; `; -CombSpinner.defaultProps = { - loading: true, - size: 100, - color: "#fff", - sizeUnit: "px", -}; - CombSpinner.propTypes = { loading: PropTypes.bool, size: PropTypes.number, diff --git a/src/components/cube/index.js b/src/components/cube/index.js index 43f6d1b..5cae428 100644 --- a/src/components/cube/index.js +++ b/src/components/cube/index.js @@ -1,5 +1,5 @@ -import React from "react"; import PropTypes from "prop-types"; +import React from "react"; import styled, { keyframes } from "styled-components"; const rotate = keyframes` @@ -7,7 +7,13 @@ const rotate = keyframes` to { transform: rotateX(360deg) rotateY(360deg); } `; -export const CubeSpinner = ({ size, backColor, frontColor, loading, sizeUnit }) => { +export const CubeSpinner = ({ + size = 25, + backColor = "#4b4c56", + frontColor = "#00ff89", + loading = true, + sizeUnit = "px", +}) => { return ( loading && ( @@ -86,14 +92,6 @@ const Side = styled.div` translateZ(${props => `${props.size / 2}${props.sizeUnit}`}); `; -CubeSpinner.defaultProps = { - loading: true, - size: 25, - frontColor: "#00ff89", - backColor: "#4b4c56", - sizeUnit: "px", -}; - CubeSpinner.propTypes = { loading: PropTypes.bool, size: PropTypes.number, diff --git a/src/components/domino/index.js b/src/components/domino/index.js index d606883..b2b195c 100644 --- a/src/components/domino/index.js +++ b/src/components/domino/index.js @@ -1,5 +1,5 @@ -import React from "react"; import PropTypes from "prop-types"; +import React from "react"; import styled, { keyframes } from "styled-components"; const fall = props => keyframes` @@ -67,7 +67,7 @@ const getBars = ({ countBars, rotatesPoints, translatesPoints, color, size, size return bars; }; -export const DominoSpinner = ({ size, color, loading, sizeUnit }) => { +export const DominoSpinner = ({ size = 100, color = "#4b4c56", loading = true, sizeUnit = "px" }) => { const countBars = 7; const rotatesPoints = [0, 0, 0, 10, 40, 60, 70]; const translatesPoints = getTranslatePositions(countBars, size); @@ -109,13 +109,6 @@ const Bar = styled.div` } `; -DominoSpinner.defaultProps = { - loading: true, - size: 100, - color: "#4b4c56", - sizeUnit: "px", -}; - DominoSpinner.propTypes = { loading: PropTypes.bool, size: PropTypes.number, diff --git a/src/components/fill/index.js b/src/components/fill/index.js index bd09ef6..ab70a90 100644 --- a/src/components/fill/index.js +++ b/src/components/fill/index.js @@ -1,5 +1,5 @@ -import React from "react"; import PropTypes from "prop-types"; +import React from "react"; import styled, { keyframes } from "styled-components"; const rotate = keyframes` @@ -38,7 +38,7 @@ const fill = keyframes` } `; -export const FillSpinner = ({ size, color, loading, sizeUnit }) => { +export const FillSpinner = ({ size = 20, color = "#4b4c56", loading = true, sizeUnit = "px" }) => { return ( loading && ( @@ -64,13 +64,6 @@ const Plane = styled.div` animation: ${fill} 3s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; `; -FillSpinner.defaultProps = { - loading: true, - size: 20, - color: "#4b4c56", - sizeUnit: "px", -}; - FillSpinner.propTypes = { loading: PropTypes.bool, size: PropTypes.number, diff --git a/src/components/firework/index.js b/src/components/firework/index.js index 4d46763..750c8ee 100644 --- a/src/components/firework/index.js +++ b/src/components/firework/index.js @@ -1,5 +1,5 @@ -import React from "react"; import PropTypes from "prop-types"; +import React from "react"; import styled, { keyframes } from "styled-components"; const fire = keyframes` @@ -16,7 +16,7 @@ const fire = keyframes` } `; -export const FireworkSpinner = ({ size, color, loading, sizeUnit }) => { +export const FireworkSpinner = ({ size = 40, color = "#fff", loading = true, sizeUnit = "px" }) => { return loading && ; }; @@ -31,13 +31,6 @@ const Wrapper = styled.div` animation: ${fire} 1.25s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; `; -FireworkSpinner.defaultProps = { - loading: true, - size: 40, - color: "#fff", - sizeUnit: "px", -}; - FireworkSpinner.propTypes = { loading: PropTypes.bool, size: PropTypes.number, diff --git a/src/components/flag/index.js b/src/components/flag/index.js index e1082b4..9624a2c 100644 --- a/src/components/flag/index.js +++ b/src/components/flag/index.js @@ -1,5 +1,5 @@ -import React from "react"; import PropTypes from "prop-types"; +import React from "react"; import styled, { keyframes } from "styled-components"; const wave = props => keyframes` @@ -46,7 +46,7 @@ const getPlanes = ({ countPlaneInLine, color, size, sizeUnit }) => { return lines; }; -export const FlagSpinner = ({ size, color, loading, sizeUnit }) => { +export const FlagSpinner = ({ size = 40, color = "#fff", loading = true, sizeUnit = "px" }) => { const countPlaneInLine = 4; return ( loading && ( @@ -83,13 +83,6 @@ const Plane = styled.div` background-color: ${props => props.color}; `; -FlagSpinner.defaultProps = { - loading: true, - size: 40, - color: "#fff", - sizeUnit: "px", -}; - FlagSpinner.propTypes = { loading: PropTypes.bool, size: PropTypes.number, diff --git a/src/components/flapper/index.js b/src/components/flapper/index.js index ab7d7b7..d18b7aa 100644 --- a/src/components/flapper/index.js +++ b/src/components/flapper/index.js @@ -1,5 +1,5 @@ -import React from "react"; import PropTypes from "prop-types"; +import React from "react"; import styled, { keyframes } from "styled-components"; const move = props => keyframes` @@ -32,7 +32,7 @@ const getBalls = ({ countBalls, radius, angle, color, size, ballSize, sizeUnit } return balls; }; -export const FlapperSpinner = ({ size, color, loading, sizeUnit }) => { +export const FlapperSpinner = ({ size = 30, color = "#00ff89", loading = true, sizeUnit = "px" }) => { const radius = size / 2; const countBalls = 7; const ballSize = size / 1.5; @@ -77,13 +77,6 @@ const Ball = styled.div` animation-delay: ${props => props.index * 0.1}s; `; -FlapperSpinner.defaultProps = { - loading: true, - size: 30, - color: "#00ff89", - sizeUnit: "px", -}; - FlapperSpinner.propTypes = { loading: PropTypes.bool, size: PropTypes.number, diff --git a/src/components/goo/index.js b/src/components/goo/index.js index 2a1f849..f419886 100644 --- a/src/components/goo/index.js +++ b/src/components/goo/index.js @@ -1,5 +1,5 @@ -import React from "react"; import PropTypes from "prop-types"; +import React from "react"; import styled, { keyframes } from "styled-components"; const rotate = () => keyframes` @@ -44,7 +44,7 @@ const getBalls = ({ countBalls, color, size, sizeUnit }) => { return balls; }; -export const GooSpinner = ({ size, color, loading, sizeUnit }) => { +export const GooSpinner = ({ size = 55, color = "#fff", loading = true, sizeUnit = "px" }) => { const countBalls = 2; return ( loading && ( @@ -95,13 +95,6 @@ const Ball = styled.div` animation: ${move} 1.5s ease-in-out infinite; `; -GooSpinner.defaultProps = { - loading: true, - size: 55, - color: "#fff", - sizeUnit: "px", -}; - GooSpinner.propTypes = { loading: PropTypes.bool, size: PropTypes.number, diff --git a/src/components/grid/index.js b/src/components/grid/index.js index eb2446c..5fbed12 100644 --- a/src/components/grid/index.js +++ b/src/components/grid/index.js @@ -1,5 +1,5 @@ -import React from "react"; import PropTypes from "prop-types"; +import React from "react"; import styled, { keyframes } from "styled-components"; const motion = props => keyframes` @@ -40,7 +40,7 @@ const getBalls = ({ countBallsInLine, color, size, sizeUnit }) => { return balls; }; -export const GridSpinner = ({ size, color, loading, sizeUnit }) => { +export const GridSpinner = ({ size = 40, color = "#fff", loading = true, sizeUnit = "px" }) => { const countBallsInLine = 3; return ( loading && ( @@ -71,13 +71,6 @@ const Ball = styled.div` animation: ${motion} 1.5s cubic-bezier(0.23, 1, 0.32, 1) infinite; `; -GridSpinner.defaultProps = { - loading: true, - size: 40, - color: "#fff", - sizeUnit: "px", -}; - GridSpinner.propTypes = { loading: PropTypes.bool, size: PropTypes.number, diff --git a/src/components/guard/index.js b/src/components/guard/index.js index e67cf2c..aa81270 100644 --- a/src/components/guard/index.js +++ b/src/components/guard/index.js @@ -1,5 +1,5 @@ -import React from "react"; import PropTypes from "prop-types"; +import React from "react"; import styled, { keyframes } from "styled-components"; const rotate = keyframes` @@ -39,7 +39,13 @@ const getCubes = ({ countCubesInLine, backColor, frontColor, size, sizeUnit }) = return cubes; }; -export const GuardSpinner = ({ size, backColor, frontColor, loading, sizeUnit }) => { +export const GuardSpinner = ({ + size = 40, + backColor = "#373846", + frontColor = "#00ff89", + loading = true, + sizeUnit = "px", +}) => { const countCubesInLine = 3; return ( loading && ( @@ -93,14 +99,6 @@ const Side = styled.div` translateZ(${props => `${props.size / 8}${props.sizeUnit}`}); `; -GuardSpinner.defaultProps = { - loading: true, - size: 40, - frontColor: "#00ff89", - backColor: "#373846", - sizeUnit: "px", -}; - GuardSpinner.propTypes = { loading: PropTypes.bool, size: PropTypes.number, diff --git a/src/components/heart/index.js b/src/components/heart/index.js index b486845..7d069c6 100644 --- a/src/components/heart/index.js +++ b/src/components/heart/index.js @@ -1,5 +1,5 @@ -import React from "react"; import PropTypes from "prop-types"; +import React from "react"; import styled, { keyframes } from "styled-components"; const resize = keyframes` @@ -23,7 +23,7 @@ const resize = keyframes` } `; -export const HeartSpinner = ({ size, color, loading, sizeUnit }) => { +export const HeartSpinner = ({ size = 40, color = "#fff", loading = true, sizeUnit = "px" }) => { return loading && ; }; @@ -53,13 +53,6 @@ const Wrapper = styled.div` } `; -HeartSpinner.defaultProps = { - loading: true, - size: 40, - color: "#fff", - sizeUnit: "px", -}; - HeartSpinner.propTypes = { loading: PropTypes.bool, size: PropTypes.number, diff --git a/src/components/hoop/index.js b/src/components/hoop/index.js index 1dac382..e32494f 100644 --- a/src/components/hoop/index.js +++ b/src/components/hoop/index.js @@ -1,5 +1,5 @@ -import React from "react"; import PropTypes from "prop-types"; +import React from "react"; import styled, { keyframes } from "styled-components"; const motion = props => keyframes` @@ -34,7 +34,7 @@ const getBalls = ({ countBallsInLine, color, size, sizeUnit }) => { return balls; }; -export const HoopSpinner = ({ size, color, loading, sizeUnit }) => { +export const HoopSpinner = ({ size = 45, color = "#4b4c56", loading = true, sizeUnit = "px" }) => { const countBallsInLine = 6; return ( loading && ( @@ -70,13 +70,6 @@ const Ball = styled.div` animation-delay: ${props => props.index * 200}ms; `; -HoopSpinner.defaultProps = { - loading: true, - size: 45, - color: "#4b4c56", - sizeUnit: "px", -}; - HoopSpinner.propTypes = { loading: PropTypes.bool, size: PropTypes.number, diff --git a/src/components/impulse/index.js b/src/components/impulse/index.js index 6a1dfc1..0791f3f 100644 --- a/src/components/impulse/index.js +++ b/src/components/impulse/index.js @@ -1,5 +1,5 @@ -import React from "react"; import PropTypes from "prop-types"; +import React from "react"; import styled, { keyframes } from "styled-components"; const impulse = props => keyframes` @@ -43,7 +43,13 @@ const getBalls = ({ countBalls, frontColor, backColor, size, sizeUnit }) => { return balls; }; -export const ImpulseSpinner = ({ size, frontColor, backColor, loading, sizeUnit }) => { +export const ImpulseSpinner = ({ + size = 40, + frontColor = "#00ff89", + backColor = "#4b4c56", + loading = true, + sizeUnit = "px", +}) => { const countBalls = 3; return ( loading && ( @@ -81,14 +87,6 @@ const Ball = styled.div` animation-delay: ${props => props.index * 0.125}s; `; -ImpulseSpinner.defaultProps = { - loading: true, - size: 40, - frontColor: "#00ff89", - backColor: "#4b4c56", - sizeUnit: "px", -}; - ImpulseSpinner.propTypes = { loading: PropTypes.bool, size: PropTypes.number, diff --git a/src/components/jellyfish/index.js b/src/components/jellyfish/index.js index 2a612d9..82bcdf0 100644 --- a/src/components/jellyfish/index.js +++ b/src/components/jellyfish/index.js @@ -1,5 +1,5 @@ -import React from "react"; import PropTypes from "prop-types"; +import React from "react"; import styled, { keyframes } from "styled-components"; const motion = props => keyframes` @@ -33,7 +33,7 @@ const getRings = ({ countBalls: countRings, color, size, sizeUnit }) => { return rings; }; -export const JellyfishSpinner = ({ size, color, loading, sizeUnit }) => { +export const JellyfishSpinner = ({ size = 60, color = "#4b4c56", loading = true, sizeUnit = "px" }) => { const countRings = 6; return ( loading && ( @@ -64,13 +64,6 @@ const Ring = styled.div` animation-delay: ${props => props.index * 100}ms; `; -JellyfishSpinner.defaultProps = { - loading: true, - size: 60, - color: "#4b4c56", - sizeUnit: "px", -}; - JellyfishSpinner.propTypes = { loading: PropTypes.bool, size: PropTypes.number, diff --git a/src/components/magic/index.js b/src/components/magic/index.js index fd8a4e5..c0f95fc 100644 --- a/src/components/magic/index.js +++ b/src/components/magic/index.js @@ -1,5 +1,5 @@ -import React from "react"; import PropTypes from "prop-types"; +import React from "react"; import styled, { keyframes } from "styled-components"; const rotate = () => keyframes` @@ -25,7 +25,7 @@ const getBalls = ({ countBalls, color, size, sizeUnit }) => { return balls; }; -export const MagicSpinner = ({ size, color, loading, sizeUnit }) => { +export const MagicSpinner = ({ size = 70, color = "#fff", loading = true, sizeUnit = "px" }) => { const countBalls = size / 12; return ( loading && ( @@ -66,13 +66,6 @@ const Ball = styled.div` animation-delay: ${props => props.index * 0.05}s; `; -MagicSpinner.defaultProps = { - loading: true, - size: 70, - color: "#fff", - sizeUnit: "px", -}; - MagicSpinner.propTypes = { loading: PropTypes.bool, size: PropTypes.number, diff --git a/src/components/metro/index.js b/src/components/metro/index.js index 21bb5cc..e615210 100644 --- a/src/components/metro/index.js +++ b/src/components/metro/index.js @@ -1,5 +1,5 @@ -import React from "react"; import PropTypes from "prop-types"; +import React from "react"; import styled, { keyframes } from "styled-components"; const rotate = keyframes` @@ -54,7 +54,7 @@ const getBalls = ({ countBalls, radius, angle, color, size, ballSize, sizeUnit } return balls; }; -export const MetroSpinner = ({ size, color, loading, sizeUnit }) => { +export const MetroSpinner = ({ size = 40, color = "#fff", loading = true, sizeUnit = "px" }) => { const radius = size / 2; const countBalls = 9; const ballSize = size / 8; @@ -106,13 +106,6 @@ const Ball = styled.div` } `; -MetroSpinner.defaultProps = { - loading: true, - size: 40, - color: "#fff", - sizeUnit: "px", -}; - MetroSpinner.propTypes = { loading: PropTypes.bool, size: PropTypes.number, diff --git a/src/components/pong/index.js b/src/components/pong/index.js index 4d15f7c..b5fab99 100644 --- a/src/components/pong/index.js +++ b/src/components/pong/index.js @@ -1,5 +1,5 @@ -import React from "react"; import PropTypes from "prop-types"; +import React from "react"; import styled, { keyframes } from "styled-components"; const motionPlayer = props => keyframes` @@ -37,7 +37,7 @@ const motionBall = props => keyframes` } `; -export const PongSpinner = ({ size, color, loading, sizeUnit }) => { +export const PongSpinner = ({ size = 60, color = "#4b4c56", loading = true, sizeUnit = "px" }) => { return ( loading && ( @@ -75,13 +75,6 @@ const Player = styled.div` animation: ${props => motionPlayer(props)} 2s linear infinite; `; -PongSpinner.defaultProps = { - loading: true, - size: 60, - color: "#4b4c56", - sizeUnit: "px", -}; - PongSpinner.propTypes = { loading: PropTypes.bool, size: PropTypes.number, diff --git a/src/components/pulse/index.js b/src/components/pulse/index.js index db775f3..ff366ab 100644 --- a/src/components/pulse/index.js +++ b/src/components/pulse/index.js @@ -1,5 +1,5 @@ -import React from "react"; import PropTypes from "prop-types"; +import React from "react"; import styled, { keyframes } from "styled-components"; const motion = keyframes` @@ -34,7 +34,7 @@ const getCubes = ({ countCubeInLine, color, size, sizeUnit }) => { return cubes; }; -export const PulseSpinner = ({ size, color, loading, sizeUnit }) => { +export const PulseSpinner = ({ size = 40, color = "#fff", loading = true, sizeUnit = "px" }) => { const countCubeInLine = 3; return ( loading && ( @@ -65,13 +65,6 @@ const Cube = styled.div` animation-delay: ${props => props.index * 0.15}s; `; -PulseSpinner.defaultProps = { - loading: true, - size: 40, - color: "#fff", - sizeUnit: "px", -}; - PulseSpinner.propTypes = { loading: PropTypes.bool, size: PropTypes.number, diff --git a/src/components/push/index.js b/src/components/push/index.js index a823236..5caf425 100644 --- a/src/components/push/index.js +++ b/src/components/push/index.js @@ -1,5 +1,5 @@ -import React from "react"; import PropTypes from "prop-types"; +import React from "react"; import styled, { keyframes } from "styled-components"; const motion = props => keyframes` @@ -32,7 +32,7 @@ const getBars = ({ countBars, color, size, sizeUnit }) => { return bars; }; -export const PushSpinner = ({ size, color, loading, sizeUnit }) => { +export const PushSpinner = ({ size = 30, color = "#4b4c56", loading = true, sizeUnit = "px" }) => { const countBars = 10; return ( loading && ( @@ -65,13 +65,6 @@ const Bar = styled.div` animation-delay: ${props => props.index * 0.15}s; `; -PushSpinner.defaultProps = { - loading: true, - size: 30, - color: "#4b4c56", - sizeUnit: "px", -}; - PushSpinner.propTypes = { loading: PropTypes.bool, size: PropTypes.number, diff --git a/src/components/rainbow/index.js b/src/components/rainbow/index.js index 6e2c8bc..2e68068 100644 --- a/src/components/rainbow/index.js +++ b/src/components/rainbow/index.js @@ -1,5 +1,5 @@ -import React from "react"; import PropTypes from "prop-types"; +import React from "react"; import styled, { keyframes } from "styled-components"; const rotate = props => keyframes` @@ -20,7 +20,7 @@ const rotate = props => keyframes` border-width: 10${props.sizeUnit}; } `; -export const RainbowSpinner = ({ size, color, loading, sizeUnit }) => { +export const RainbowSpinner = ({ size = 50, color = "#fff", loading = true, sizeUnit = "px" }) => { return ( loading && ( @@ -50,13 +50,6 @@ const Line = styled.div` animation: ${rotate} 3s ease-in-out infinite; `; -RainbowSpinner.defaultProps = { - loading: true, - size: 50, - color: "#fff", - sizeUnit: "px", -}; - RainbowSpinner.propTypes = { loading: PropTypes.bool, size: PropTypes.number, diff --git a/src/components/ring/index.js b/src/components/ring/index.js index ee0a4be..9d151eb 100644 --- a/src/components/ring/index.js +++ b/src/components/ring/index.js @@ -1,5 +1,5 @@ -import React from "react"; import PropTypes from "prop-types"; +import React from "react"; import styled, { keyframes } from "styled-components"; const firstPulse = props => keyframes` @@ -24,7 +24,7 @@ const secondPulse = props => keyframes` } `; -export const RingSpinner = ({ size, color, loading, sizeUnit }) => { +export const RingSpinner = ({ size = 30, color = "#00ff89", loading = true, sizeUnit = "px" }) => { return ( loading && ( @@ -68,13 +68,6 @@ const Circle = styled.div` } `; -RingSpinner.defaultProps = { - loading: true, - size: 30, - color: "#00ff89", - sizeUnit: "px", -}; - RingSpinner.propTypes = { loading: PropTypes.bool, size: PropTypes.number, diff --git a/src/components/rotate/index.js b/src/components/rotate/index.js index 2a5dc8a..166472f 100644 --- a/src/components/rotate/index.js +++ b/src/components/rotate/index.js @@ -1,5 +1,5 @@ -import React from "react"; import PropTypes from "prop-types"; +import React from "react"; import styled, { keyframes } from "styled-components"; const rotate = keyframes` @@ -34,7 +34,7 @@ const getBalls = ({ countBalls, radius, angle, color, size, ballSize, sizeUnit } return balls; }; -export const RotateSpinner = ({ size, color, loading, sizeUnit }) => { +export const RotateSpinner = ({ size = 45, color = "#00ff89", loading = true, sizeUnit = "px" }) => { const radius = size / 2; const countBalls = 8; const ballSize = size / 5; @@ -79,13 +79,6 @@ const Ball = styled.div` animation-timing-function: cubic-bezier(0.5, ${props => props.index * 0.3}, 0.9, 0.9); `; -RotateSpinner.defaultProps = { - loading: true, - size: 45, - color: "#00ff89", - sizeUnit: "px", -}; - RotateSpinner.propTypes = { loading: PropTypes.bool, size: PropTypes.number, diff --git a/src/components/sequence/index.js b/src/components/sequence/index.js index 67b3412..368ef67 100644 --- a/src/components/sequence/index.js +++ b/src/components/sequence/index.js @@ -1,5 +1,5 @@ -import React from "react"; import PropTypes from "prop-types"; +import React from "react"; import styled, { keyframes } from "styled-components"; const rotate = props => keyframes` @@ -34,7 +34,13 @@ const getCubes = ({ countCubesInLine, backColor, frontColor, size, sizeUnit }) = return cubes; }; -export const SequenceSpinner = ({ size, backColor, frontColor, loading, sizeUnit }) => { +export const SequenceSpinner = ({ + size = 40, + backColor = "#00ff89", + frontColor = "#4b4c56", + loading = true, + sizeUnit = "px", +}) => { const countCubesInLine = 5; return ( loading && ( @@ -91,14 +97,6 @@ const Side = styled.div` translateZ(${props => `${props.size / 16}${props.sizeUnit}`}); `; -SequenceSpinner.defaultProps = { - loading: true, - size: 40, - frontColor: "#4b4c56", - backColor: "#00ff89", - sizeUnit: "px", -}; - SequenceSpinner.propTypes = { loading: PropTypes.bool, size: PropTypes.number, diff --git a/src/components/sphere/index.js b/src/components/sphere/index.js index f6b362d..c34823b 100644 --- a/src/components/sphere/index.js +++ b/src/components/sphere/index.js @@ -1,5 +1,5 @@ -import React from "react"; import PropTypes from "prop-types"; +import React from "react"; import styled, { keyframes } from "styled-components"; const rotate = keyframes` @@ -49,7 +49,7 @@ const getBalls = ({ countBalls, radius, angle, color, size, ballSize, sizeUnit } return balls; }; -export const SphereSpinner = ({ size, color, loading, sizeUnit }) => { +export const SphereSpinner = ({ size = 30, color = "#fff", loading = true, sizeUnit = "px" }) => { const radius = size / 2; const countBalls = 7; const ballSize = size / 5; @@ -95,13 +95,6 @@ const Ball = styled.div` animation-delay: ${props => props.index * 0.3}s; `; -SphereSpinner.defaultProps = { - loading: true, - size: 30, - color: "#fff", - sizeUnit: "px", -}; - SphereSpinner.propTypes = { loading: PropTypes.bool, size: PropTypes.number, diff --git a/src/components/spiral/index.js b/src/components/spiral/index.js index f145030..b5088e9 100644 --- a/src/components/spiral/index.js +++ b/src/components/spiral/index.js @@ -1,5 +1,5 @@ -import React from "react"; import PropTypes from "prop-types"; +import React from "react"; import styled, { keyframes } from "styled-components"; const rotate = keyframes` @@ -39,7 +39,13 @@ const getCubes = ({ countCubesInLine, backColor, frontColor, size, sizeUnit }) = return cubes; }; -export const SpiralSpinner = ({ size, backColor, frontColor, loading, sizeUnit }) => { +export const SpiralSpinner = ({ + size = 40, + backColor = "#4b4c56", + frontColor = "#00ff89", + loading = true, + sizeUnit = "px", +}) => { const countCubesInLine = 4; return ( loading && ( @@ -104,14 +110,6 @@ const Side = styled.div` translateZ(${props => `${props.size / 8}${props.sizeUnit}`}); `; -SpiralSpinner.defaultProps = { - loading: true, - size: 40, - frontColor: "#00ff89", - backColor: "#4b4c56", - sizeUnit: "px", -}; - SpiralSpinner.propTypes = { loading: PropTypes.bool, size: PropTypes.number, diff --git a/src/components/stage/index.js b/src/components/stage/index.js index 78505c6..b2199c2 100644 --- a/src/components/stage/index.js +++ b/src/components/stage/index.js @@ -1,5 +1,5 @@ -import React from "react"; import PropTypes from "prop-types"; +import React from "react"; import styled, { keyframes } from "styled-components"; const motion = props => keyframes` @@ -44,7 +44,7 @@ const getBalls = ({ countBalls, color, size, sizeUnit }) => { return balls; }; -export const StageSpinner = ({ size, color, loading, sizeUnit }) => { +export const StageSpinner = ({ size = 40, color = "#fff", loading = true, sizeUnit = "px" }) => { const countBalls = 3; return ( loading && ( @@ -76,13 +76,6 @@ const Ball = styled.div` animation-delay: ${props => props.index * 0.2}s; `; -StageSpinner.defaultProps = { - loading: true, - size: 40, - color: "#fff", - sizeUnit: "px", -}; - StageSpinner.propTypes = { loading: PropTypes.bool, size: PropTypes.number, diff --git a/src/components/swap/index.js b/src/components/swap/index.js index 2517f47..accb1e9 100644 --- a/src/components/swap/index.js +++ b/src/components/swap/index.js @@ -1,5 +1,5 @@ -import React from "react"; import PropTypes from "prop-types"; +import React from "react"; import styled, { keyframes } from "styled-components"; const animationLeftPostions = props => { @@ -55,7 +55,7 @@ const getBalls = ({ countBalls, color, size, sizeUnit }) => { return balls; }; -export const SwapSpinner = ({ size, color, loading, sizeUnit }) => { +export const SwapSpinner = ({ size = 40, color = "#4b4c56", loading = true, sizeUnit = "px" }) => { const countBalls = 3; return ( loading && ( @@ -90,13 +90,6 @@ const Ball = styled.div` } `; -SwapSpinner.defaultProps = { - loading: true, - size: 40, - color: "#4b4c56", - sizeUnit: "px", -}; - SwapSpinner.propTypes = { loading: PropTypes.bool, size: PropTypes.number, diff --git a/src/components/swish/index.js b/src/components/swish/index.js index 9545fce..47eb91e 100644 --- a/src/components/swish/index.js +++ b/src/components/swish/index.js @@ -1,5 +1,5 @@ -import React from "react"; import PropTypes from "prop-types"; +import React from "react"; import styled, { keyframes } from "styled-components"; const motion = props => keyframes` @@ -32,7 +32,13 @@ const getBalls = ({ countBallsInLine, frontColor, backColor, size, sizeUnit }) = return balls; }; -export const SwishSpinner = ({ size, frontColor, backColor, loading, sizeUnit }) => { +export const SwishSpinner = ({ + size = 40, + frontColor = "#4b4c56", + backColor = "#fff", + loading = true, + sizeUnit = "px", +}) => { const countBallsInLine = 3; return ( loading && ( @@ -71,14 +77,6 @@ const Ball = styled.div` animation-delay: ${props => props.index * 0.1}s; `; -SwishSpinner.defaultProps = { - loading: true, - size: 40, - frontColor: "#4b4c56", - backColor: "#fff", - sizeUnit: "px", -}; - SwishSpinner.propTypes = { loading: PropTypes.bool, size: PropTypes.number, diff --git a/src/components/trace/index.js b/src/components/trace/index.js index b82cb36..430d3a9 100644 --- a/src/components/trace/index.js +++ b/src/components/trace/index.js @@ -1,5 +1,5 @@ -import React from "react"; import PropTypes from "prop-types"; +import React from "react"; import styled, { keyframes } from "styled-components"; const trace = props => keyframes` @@ -57,7 +57,13 @@ const getBalls = ({ countBalls, frontColor, backColor, size, sizeUnit }) => { return balls; }; -export const TraceSpinner = ({ size, frontColor, backColor, loading, sizeUnit }) => { +export const TraceSpinner = ({ + size = 35, + frontColor = "#00ff89", + backColor = "#4b4c56", + loading = true, + sizeUnit = "px", +}) => { const countBalls = 4; return ( loading && ( @@ -107,14 +113,6 @@ const MovedBall = styled(Ball)` z-index: 10; `; -TraceSpinner.defaultProps = { - loading: true, - size: 35, - frontColor: "#00ff89", - backColor: "#4b4c56", - sizeUnit: "px", -}; - TraceSpinner.propTypes = { loading: PropTypes.bool, size: PropTypes.number, diff --git a/src/components/wave/index.js b/src/components/wave/index.js index 0b3fc03..3c6da69 100644 --- a/src/components/wave/index.js +++ b/src/components/wave/index.js @@ -1,5 +1,5 @@ -import React from "react"; import PropTypes from "prop-types"; +import React from "react"; import styled, { keyframes } from "styled-components"; const motion = keyframes` @@ -33,7 +33,7 @@ const getBars = ({ countBars, color, size, sizeUnit }) => { return bars; }; -export const WaveSpinner = ({ size, color, loading, sizeUnit }) => { +export const WaveSpinner = ({ size = 30, color = "#fff", loading = true, sizeUnit = "px" }) => { const countBars = 10; return ( loading && ( @@ -67,13 +67,6 @@ const Bar = styled.div` animation-delay: ${props => props.index * 0.15}s; `; -WaveSpinner.defaultProps = { - loading: true, - size: 30, - color: "#fff", - sizeUnit: "px", -}; - WaveSpinner.propTypes = { loading: PropTypes.bool, size: PropTypes.number, diff --git a/src/components/whisper/index.js b/src/components/whisper/index.js index f2166dc..50a0a87 100644 --- a/src/components/whisper/index.js +++ b/src/components/whisper/index.js @@ -1,5 +1,5 @@ -import React from "react"; import PropTypes from "prop-types"; +import React from "react"; import styled, { keyframes } from "styled-components"; const motion = props => keyframes` @@ -54,7 +54,13 @@ const getBalls = ({ countBallsInLine, frontColor, backColor, size, sizeUnit }) = return balls; }; -export const WhisperSpinner = ({ size, frontColor, backColor, loading, sizeUnit }) => { +export const WhisperSpinner = ({ + size = 50, + frontColor = "#4b4c56", + backColor = "#00ff89", + loading = true, + sizeUnit = "px", +}) => { const countBallsInLine = 3; return ( loading && ( @@ -119,14 +125,6 @@ const Ball = styled.div` } `; -WhisperSpinner.defaultProps = { - loading: true, - size: 50, - frontColor: "#4b4c56", - backColor: "#00ff89", - sizeUnit: "px", -}; - WhisperSpinner.propTypes = { loading: PropTypes.bool, size: PropTypes.number,