upsetjs import React , { Ref } from 'react' ; export interface UpSetJSSkeletonProps extends React . SVGAttributes < SVGSVGElement > { background ? : string ; color ? : string ; secondaryColor ? : string ; } const defaults = { background : '#F4F4F4' , color : '#A6A8AB' , secondaryColor : '#E1E2E3' , } ; export function prepare ( props ) { const color = props . color ?? defaults . color ; const secondary = props . secondaryColor ?? defaults . secondaryColor ; const rest = Object . assign ( { } , props ) ; const background = props . background ?? defaults . background ; delete rest . color ; delete rest . secondaryColor ; delete rest . background ; if ( background ) { rest . style = Object . assign ( { background } , rest . style ?? { } ) ; } return { color , secondary , rest } ; } /**
 * UpSetJS Skeleton a simple UpSetJS skeleton
 *
 * with React.forwardRef support to specify a reference to the SVG element
 */ const UpSetJSSkeleton = React . memo ( React . forwardRef ( function UpSetJSSkeleton ( props , ref ) { const { color , secondary , rest } = prepare ( props ) ; const wi = 20 ; const padding = 10 ; const sWidth = 75 ; const sY = 110 ; const cHeight = 100 ; const csX = 85 ; const cOffsets = [ 10 , 20 , 35 , 60 , 65 , 80 , 90 ] ; const sOffsets = [ 50 , 30 , 15 ] ; return ( < svg viewBox = "0 0 300 200" ref = { ref } { ... rest } > { cOffsets . map ( ( offset , i ) => ( < rect key = { i } x = { csX + i * ( wi + padding ) } y = { offset } width = { wi } height = { cHeight - offset } fill = { color } / > ) ) } { sOffsets . map ( ( offset , i ) => ( < rect key = { i } x = { offset } y = { sY + i * ( wi + padding ) } width = { sWidth - offset } height = { wi } fill = { color } / > ) ) } { cOffsets . map ( ( _ , i ) => sOffsets . map ( ( _ , j ) => { const filled = j === 2 - i || ( i === 3 && j > 0 ) || ( i === 4 && j !== 1 ) || ( i === 5 && j < 2 ) || i === 6 ; return ( < circle key = { `${ i }x${ j }` } cx = { csX + i * ( wi + padding ) + wi / 2 } cy = { sY + j * ( wi + padding ) + wi / 2 } r = { wi / 2 } fill = { filled ? color : secondary } / > ) ; } ) ) } < rect x = "182" y = "150" width = "6" height = "30" fill = { color } / > < rect x = "212" y = "120" width = "6" height = "60" fill = { color } / > < rect x = "242" y = "120" width = "6" height = "30" fill = { color } / > < rect x = "272" y = "120" width = "6" height = "60" fill = { color } / > < /svg>); } ) ) as React . FC < UpSetJSSkeletonProps & React . RefAttributes < SVGSVGElement > > ; export { UpSetJSSkeleton } ;