diff --git a/__tests__/styled/props.tsx b/__tests__/styled/props.tsx index d434463..55f00fb 100644 --- a/__tests__/styled/props.tsx +++ b/__tests__/styled/props.tsx @@ -56,10 +56,7 @@ describe("Styled - Values Props", () => { }); describe("Styled - Base Class Name", () => { - const StyledView = styled(View); - StyledView.defaultProps = { - baseClassName: "flex-row", - }; + const StyledView = styled(View, "flex-row"); test("can set base classNames", () => { const tree = render( @@ -83,10 +80,9 @@ describe("Styled - Base Class Name", () => { }); describe("Styled - Default props", () => { - const StyledText = styled(Text); + const StyledText = styled(Text, "p-4"); StyledText.defaultProps = { accessibilityRole: "header", - baseClassName: "p-4", }; test("can render with default props", () => { diff --git a/src/styled.tsx b/src/styled.tsx index a67e25e..b321c35 100644 --- a/src/styled.tsx +++ b/src/styled.tsx @@ -24,7 +24,7 @@ export interface StyledOptions

{ props?: Array; spreadProps?: Array; classProps?: Array; - supportsClassName?: boolean; + baseClassName?: string; } type ForwardRef = ForwardRefExoticComponent< @@ -36,15 +36,35 @@ type InferRef = T extends RefAttributes | ClassAttributes : unknown; /** - * Normal usage + * Default */ export function styled( - Component: ComponentType, - options?: StyledOptions & { props?: undefined; spreadProps?: undefined } + Component: ComponentType ): ForwardRef, StyledProps>; /** - * With either props or valueProps + * Base className + */ +export function styled( + Component: ComponentType, + baseClassName: string +): ForwardRef, StyledProps>; + +/** + * Base className w/ options + */ +export function styled( + Component: ComponentType, + baseClassName: string, + options: StyledOptions & { + props?: Array; + spreadProps?: Array; + classProps?: Array; + } +): ForwardRef, StyledPropsWithKeys>; + +/** + * Only options */ export function styled( Component: ComponentType, @@ -62,18 +82,26 @@ export function styled< T extends { style?: StyleProp; children?: ReactNode | undefined } >( Component: ComponentType, - { + styledBaseClassNameOrOptions?: string | StyledOptions, + maybeOptions: StyledOptions = {} +) { + const { props: propsToTransform, spreadProps, classProps, - supportsClassName = false, - }: StyledOptions = {} -) { + } = typeof styledBaseClassNameOrOptions === "object" + ? styledBaseClassNameOrOptions + : maybeOptions; + + const baseClassName = + typeof styledBaseClassNameOrOptions === "string" + ? styledBaseClassNameOrOptions + : maybeOptions?.baseClassName; + function Styled( { className, tw: twClassName, - baseClassName, baseTw, style: styleProp, children: componentChildren, @@ -117,7 +145,6 @@ export function styled< spreadProps, classProps, preview, - supportsClassName, }); const children = childStyles diff --git a/src/with-styled-props.ts b/src/with-styled-props.ts index 21b7a90..79a1a03 100644 --- a/src/with-styled-props.ts +++ b/src/with-styled-props.ts @@ -13,7 +13,6 @@ export interface WithStyledPropsOptions { spreadProps?: T[]; classProps?: T[]; preview: boolean; - supportsClassName: boolean; } export type WithStyledProps = Record & {