Open dohooo opened 3 years ago
import { BorderRadiuses } from "react-native-ui-lib";
BorderRadiuses.loadBorders({
br500: 50,
});
---------------
// type error
<View br500/>
in modifiers.d.ts
declare module "react-native-ui-lib" {
import type { IViewCustomProps, ITextCustomProps } from "@/utils/initUiLibModifiers";
export * from "react-native-ui-lib/generatedTypes";
import type { default as View, ViewProps } from "react-native-ui-lib/generatedTypes/components/view";
export declare const View: React.ComponentClass<
ViewProps & {
useCustomTheme?: boolean | undefined;
} & IViewCustomProps,
any
>;
import type { default as Text, TextProps } from "react-native-ui-lib/generatedTypes/components/text";
export declare const Text: React.ComponentClass<
TextProps & {
useCustomTheme?: boolean | undefined;
} & ITextCustomProps,
any
>;
}
in modifiers.d.ts
declare module "react-native-ui-lib" { import type { IViewCustomProps, ITextCustomProps } from "@/utils/initUiLibModifiers"; export * from "react-native-ui-lib/generatedTypes"; import type { default as View, ViewProps } from "react-native-ui-lib/generatedTypes/components/view"; export declare const View: React.ComponentClass< ViewProps & { useCustomTheme?: boolean | undefined; } & IViewCustomProps, any >; import type { default as Text, TextProps } from "react-native-ui-lib/generatedTypes/components/text"; export declare const Text: React.ComponentClass< TextProps & { useCustomTheme?: boolean | undefined; } & ITextCustomProps, any >; }
Is there a better way?
@zwh1666258377 I believe that with the new typescript template literal feature we can now define dynamic types, including the one you want. Would you consider submitting a PR with a fix?
@ethanshar okay, I can try
@ethanshar Can you tell me briefly about your thoughts?
@zwh1666258377 I believe that with the new typescript template literal feature we can now define dynamic types, including the one you want. Would you consider submitting a PR with a fix?
Oh, I think I see what you mean. Like this we can
type BorderRadiuses = `br${number}`;
But that's not what I meant. When I set other props
// In a situation like this, This is how I handle it
const customTypography = {
// fontSize
"fs-10": { fontSize: 10 },
"fs-12": { fontSize: 12 },
// lineHeight
"lh-10": { lineHeight: 10 },
"lh-12": { lineHeight: 12 },
// fontWeight
"fw-400": { fontWeight: "400" },
"fw-500": { fontWeight: "500" },
};
type GetCustomType<T> = Partial<{ [k in keyof T]: boolean }>;
type TCustomTypography = GetCustomType<typeof customTypography>;
export interface ITextCustomProps extends TCustomTypography {}
// In modifiers.d.ts
declare module "react-native-ui-lib" {
import type { ITextCustomProps } from "@/utils/initUiLibModifiers";
export * from "react-native-ui-lib/generatedTypes";
import type { default as Text, TextProps } from "react-native-ui-lib/generatedTypes/components/text";
export declare const Text: React.ComponentClass<
TextProps & {
useCustomTheme?: boolean | undefined;
} & ITextCustomProps,
any
>;
}
// When I use
...
render(){
// There will be type hints
return <Text fs-10 fw-10 fw-400> ... </Text>
}
...
I'm a junior programmer and would love to be able to commit changes, but I think I need some guidance. Thank you very much
hey, this is my PR #1463
Hi @ethanshar
So for the typography we have a generic type as part of the Typography typings, we just allow this {[key: string]: boolean}
If I understand correctly, you decided on adding a dynamic typing for BorderRadius right?
Hi @ethanshar So for the typography we have a generic type as part of the Typography typings, we just allow this
{[key: string]: boolean}
If I understand correctly, you decided on adding a dynamic typing for BorderRadius right?
Yes
Hi @zwh1666258377 I recently merged your PR but unfortunately had to revert. Our internal consumers as for for our open source user still don't use TS v4.4.0 necessarily. And therefor this is a breaking change. We'll have to wait a little more for this change.
@ethanshar oh… ok
how can I define prop type when set a custom props?