refactor: update component exports to use FunctionComponent type and simplify return types

Author: mhnpd

src/loader/circles-with-bar.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react'
+import { FunctionComponent } from 'react'
 import { DEFAULT_COLOR, DEFAULT_WAI_ARIA_ATTRIBUTE, Style } from '../type'
 import { SvgWrapper } from '../shared/svg-wrapper'
 import { SVG_NAMESPACE } from '../shared/constants'
@@ -49,7 +49,7 @@ interface CirclesWithBarProps {
  * and a wave bars. outer circle, inner circle and bar
  * color can be set from props.
  */
-export const CirclesWithBar: React.FunctionComponent<CirclesWithBarProps> = ({
+export const CirclesWithBar: FunctionComponent<CirclesWithBarProps> = ({
   wrapperStyle = {},
   visible = true,
   wrapperClass = '',
@@ -60,7 +60,7 @@ export const CirclesWithBar: React.FunctionComponent<CirclesWithBarProps> = ({
   innerCircleColor,
   barColor,
   ariaLabel = 'circles-with-bar-loading',
-}): React.ReactElement => {
+}) => {
   return (
     <SvgWrapper
       style={wrapperStyle}

src/loader/falling-lines.tsx

@@ -40,7 +40,7 @@ export const FallingLines: FunctionComponent<FallingLinesProps> = ({
   color = DEFAULT_COLOR,
   width = '100',
   visible = true,
-}): React.ReactElement | null => {
+}) => {
   return visible ? (
     <svg
       xmlns={SVG_NAMESPACE}

src/loader/infinity-spin.tsx

@@ -63,7 +63,7 @@ const Path = styled.path`
 export const InfinitySpin: FunctionComponent<InfinitySpinProps> = ({
   color = DEFAULT_COLOR,
   width = '200',
-}): React.ReactElement => {
+}) => {
   return (
    <svg
   xmlns={SVG_NAMESPACE}

src/loader/line-wave.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react'
+import { FunctionComponent, CSSProperties } from 'react'
 import { DEFAULT_COLOR, DEFAULT_WAI_ARIA_ATTRIBUTE } from '../type'
 import { SvgWrapper } from '../shared/svg-wrapper'
 import { SVG_NAMESPACE } from '../shared/constants'
@@ -46,7 +46,7 @@ interface LineWaveProps {
  * @description contains three lines in a wave motion
  * line colors are changeable
  */
-export const LineWave: React.FunctionComponent<LineWaveProps> = ({
+export const LineWave: FunctionComponent<LineWaveProps> = ({
   wrapperStyle = {},
   visible = true,
   wrapperClass = '',
@@ -57,7 +57,7 @@ export const LineWave: React.FunctionComponent<LineWaveProps> = ({
   firstLineColor,
   middleLineColor,
   lastLineColor,
-}): React.ReactElement => {
+}) => {
   return (
     <SvgWrapper
       style={wrapperStyle}

src/loader/rotating-lines.tsx

@@ -106,7 +106,7 @@ export const RotatingLines: FunctionComponent<RotatingLinesProps> = ({
   ariaLabel = 'rotating-lines-loading',
   wrapperStyle,
   wrapperClass,
-}): React.ReactElement | null => {
+}) => {
   const lines = useCallback(
     () =>
       POINTS.map(point => (

src/loader/rotating-square.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react'
+import { FunctionComponent } from 'react'
 import { DEFAULT_COLOR, DEFAULT_WAI_ARIA_ATTRIBUTE, Style } from '../type'
 import { SvgWrapper } from '../shared/svg-wrapper'
 import { SVG_NAMESPACE } from '../shared/constants'
@@ -38,7 +38,7 @@ interface RotatingSquareProps {
   gradientAngle?: number
 }
 
-export const RotatingSquare: React.FunctionComponent<RotatingSquareProps> = ({
+export const RotatingSquare: FunctionComponent<RotatingSquareProps> = ({
   wrapperClass = '',
   color = DEFAULT_COLOR,
   height = 100,
@@ -47,7 +47,7 @@ export const RotatingSquare: React.FunctionComponent<RotatingSquareProps> = ({
   ariaLabel = 'rotating-square-loading',
   wrapperStyle = {},
   visible = true,
-}): React.ReactElement => {
+}) => {
   return (
     <SvgWrapper
       style={wrapperStyle}

src/loader/three-circles.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react'
+import { FunctionComponent, CSSProperties } from 'react'
 import { DEFAULT_COLOR, DEFAULT_WAI_ARIA_ATTRIBUTE } from '../type'
 import { SvgWrapper } from '../shared/svg-wrapper'
 import { SVG_NAMESPACE } from '../shared/constants'
@@ -37,7 +37,7 @@ interface ThreeCirclesProps {
  * @description contains three circles rotating in opposite direction
  * outer circle, middle circle and inner circle color can be set from props.
  */
-export const ThreeCircles: React.FunctionComponent<ThreeCirclesProps> = ({
+export const ThreeCircles: FunctionComponent<ThreeCirclesProps> = ({
   wrapperStyle = {},
   visible = true,
   wrapperClass = '',
@@ -48,7 +48,7 @@ export const ThreeCircles: React.FunctionComponent<ThreeCirclesProps> = ({
   outerCircleColor,
   innerCircleColor,
   middleCircleColor,
-}): React.ReactElement => {
+}) => {
   return (
     <SvgWrapper
       style={wrapperStyle}

src/loader/triangle.tsx

@@ -63,7 +63,7 @@ export const Triangle: FunctionComponent<TriangleProps> = ({
   wrapperStyle,
   wrapperClass,
   visible = true,
-}: TriangleProps): React.ReactElement => {
+}: TriangleProps) => {
   return (
     <SvgWrapper
       style={wrapperStyle}