Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Add types for props from .attrs and "as"#4291

Open
bjornsnoen wants to merge 3 commits intostyled-components:mainfrom
bjornsnoen:main
Open

Add types for props from .attrs and "as"#4291
bjornsnoen wants to merge 3 commits intostyled-components:mainfrom
bjornsnoen:main

Conversation

@bjornsnoen
Copy link

Fixes:

Noticed that someone else opened PR #4288 yesterday, I will assume that their fix for attrs is more correct than mine but I'll leave this until that PR is merged or other wise addressed.

@carloslibardo
Copy link

carloslibardo commented Apr 18, 2024

I use your branch locally to test the .attrs issue in my project, but the #4076 issue still happening to me:

export const Calendar = styled(Icon).attrs({
  type: 'TypeA',
  color: 'ColorA',
  size: 20,
})`
  margin: 12px 15px 12px 24px;
`;

<Calendar /> returning error

Type '{}' is missing the following properties from type 'FastOmit<FastOmit<Substitute<IconProps, IconProps>, never>, never>': type, color

<Calendar color='ColorA' type='TypeA'/> works well

@edit

My Icon component:

import Config from '@config/index';
import React from 'react';
import { ViewStyle, StyleProp } from 'react-native';

export type IconProps = {
 /** The default size value is 16px */
 size?: 8 | 12 | 14 | 16 | 20 | 22 | 24 | 28 | 36 | 40 | 48 | 64 | 128;
 type: 'TypeA' | 'TypeB'
 color: 'ColorA' | 'ColorB';
 style?: StyleProp<ViewStyle>;
};

const Icon = ({ size = 16, type, color, style }: IconProps) => {
 const RenderedIcon = Config.NEW_ICONS[type];

 return (
   <RenderedIcon
     width={size}
     height={size}
     style={style}
     color={getIconColor(color)}
   />
 );
};

export { Icon };

My Icon is a SVG.

It happens with my other component which is styled.text too.

export const PressBackAgainText = styled(Typography).attrs({
  color: 'WHITE',
})``;

What I find strange is that when instantiating the component with styled components, the .attrs is not correctly reading the component's typing, even if I determine that it is mandatory, autocomplete only shows it as optional, and does not report an error in the time to instantiate.

@bjornsnoen
Copy link
Author

@carloslibardo could you format your comment properly using github code markdown and give the definition for the Icon component and I can take a look?

@carloslibardo
Copy link

@bjornsnoen i updated the comment with more infos

@quantizor
Copy link
Contributor

I ended up taking the other PR, can you check to see if your issue is resolved with current main branch?

@joealden
Copy link
Contributor

Even if #4288 solves the .attrs problem, would we not still want the changes related to as? Maybe worth splitting out into it's own PR if possible?

Optional<
PrivateResolvedTarget extends KnownTarget
? Substitute<
Substitute<OuterProps, React.ComponentPropsWithRef<PrivateResolvedTarget>>,

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using ComponentPropsWithRef after importing it with import type { ComponentPropsWithRef } from 'react'; would improve readability, I think.

@btimo
Copy link

btimo commented Aug 19, 2024

Hey, any chances someone has knowledge and time to pick up this PR ? Especially since the #4288 has been reverted

@Stanzilla
Copy link

Would love to see this picked up as well

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants