Types for blockStyles in SkeletonLoader only includes height, however it do supports all the styles too

[Murtaza Nathani]

Describe the bug
types for blockStyles in SkeletonLoader only includes height , however it do supports all the styles too.

To Reproduce
The following code in Typescript 4.* is giving the error

        <SkeletonLoader.Blocks
          className={styles.languageSkeletonLoader}
          blockStyles={{
            height: '40px',
            width: '48px',
            marginRight: '10px',
            borderRadius: '15px',
          }}
          numBlocks={3}
          lines={['70%']}
        />

Error:

index.d.ts(2, 5): The expected type comes from property 'blockStyles' which is declared here on type 'IntrinsicAttributes & 
Pick<{ blockStyles?: { height: string; } | undefined; circle?: boolean | undefined; numBlocks?: number | undefined; lines?: string[] 
| undefined; className: any; }, "circle" | ... 2 more ... | "lines"> & Pick<...> & Pick<...>'

Actual Behavior
The actual behaviour is to supprt all the CSSProperties in block style as its working right now as shown in above code.

export function Blocks({ blockStyles, circle, numBlocks, lines, className, }: {
    blockStyles?: {
        height: string;
    } | undefined;
    circle?: boolean | undefined;
    numBlocks?: number | undefined;
    lines?: string[] | undefined;
    className: any;
}): JSX.Element;

Expected Behavior

Types should be updated to not only support all css properties

export function Blocks({ blockStyles, circle, numBlocks, lines, className, }: {
    blockStyles?: CSSProperties | undefined;
    circle?: boolean | undefined;
    numBlocks?: number | undefined;
    lines?: string[] | undefined;
    className: any;
}): JSX.Element;

Versions

• react-loading-skeleton version: 2.2.0
• Browser version: -

[Murtaza Nathani]

right now i have to make a workaround i am disabling the type errors

        <SkeletonLoader.Blocks
          className={styles.languageSkeletonLoader}
          blockStyles={{
            height: '40px',
            // @ts-expect-error
            width: '48px',
            marginRight: '10px',
            borderRadius: '15px',
          }}
          numBlocks={3}
          lines={['70%']}
        />

[Sam Magura]

Where is SkeletonLoader imported from? I just looked at version 2.2.0 of react-loading-skeleton and there is nothing called SkeletonLoader.

[Murtaza Nathani]

Where is SkeletonLoader imported from? I just looked at version 2.2.0 of react-loading-skeleton and there is nothing called SkeletonLoader.

Ah, i completely overlooked it.. its because of the wrapper we have created with a generating auto types... thanks for pointing it out.. we can close this issue..

here i need to fix the types.

import React from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import Skeleton from 'react-loading-skeleton';
import './Blocks.styles.scss';

export const Blocks = ({
  blockStyles = { height: '65px' },
  circle = false,
  numBlocks = 21,
  lines = ['45%', '75%', '60%'],
  className,
}) => (
  <div
    className={classnames('webrms-skeleton-loader-wrapper--blocks', className, {
      'has-circle': circle,
    })}
  >
    {[...Array(numBlocks)].map((_, index) => (
      // eslint-disable-next-line react/no-array-index-key
      <div className="skeleton-loader" style={blockStyles} key={`loader-${index}`}>
        {circle ? (
          <Skeleton
            className="skeleton-circle"
            circle
            style={{ display: 'flex' }}
            height="50px"
            width="50px"
          />
        ) : null}
        <div className="skeleton-bars">
          {lines.map((width, i) => (
            // eslint-disable-next-line react/no-array-index-key
            <Skeleton width={width} key={`${width}-${i}`} />
          ))}
        </div>
      </div>
    ))}
  </div>
);

Blocks.propTypes = {
  blockStyles: PropTypes.object,
  circle: PropTypes.bool,
  numBlocks: PropTypes.number,
  lines: PropTypes.arrayOf(PropTypes.string),
  className: PropTypes.string,
};

export default Blocks;