Skip to content

Commit f00b01c

Browse files
ethansharethanshar
authored
migrate Button to typescript (#756)
* WIP - migrate Button to typescript * update generated types * make Button props optional, add modifiers types
1 parent 3b9cc7f commit f00b01c

File tree

16 files changed

+516
-157
lines changed

16 files changed

+516
-157
lines changed

‎demo/src/screens/componentScreens/ButtonsScreen.js renamed to ‎demo/src/screens/componentScreens/ButtonsScreen.tsx

File renamed without changes.

‎generatedTypes/commons/modifiers.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ export declare type BorderRadiusModifiers = Modifier<BorderRadiusLiterals>;
7474
export declare type ContainerModifiers = AlignmentModifiers & PaddingModifiers & MarginModifiers & FlexModifiers & BorderRadiusModifiers & BackgroundColorModifier;
7575
export declare function extractColorValue(props: Dictionary<any>): any;
7676
export declare function extractBackgroundColorValue(props: Dictionary<any>): any;
77-
export declare function extractTypographyValue(props: Dictionary<any>): undefined;
77+
export declare function extractTypographyValue(props: Dictionary<any>): object | undefined;
7878
export declare function extractPaddingValues(props: Dictionary<any>): Partial<Record<"padding" | "paddingLeft" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingHorizontal" | "paddingVertical", number>>;
7979
export declare function extractMarginValues(props: Dictionary<any>): Partial<Record<"margin" | "marginLeft" | "marginTop" | "marginRight" | "marginBottom" | "marginHorizontal" | "marginVertical", number>>;
8080
export declare function extractAlignmentsValues(props: Dictionary<any>): any;

‎generatedTypes/commons/new.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
export { default as UIComponent } from './UIComponent';
22
export { default as asBaseComponent, BaseComponentInjectedProps } from './asBaseComponent';
33
export { default as forwardRef, ForwardRefInjectedProps } from './forwardRef';
4-
export { ContainerModifiers, MarginModifiers, TypographyModifiers, ColorsModifiers } from './modifiers';
4+
export { ContainerModifiers, MarginModifiers, TypographyModifiers, ColorsModifiers, BackgroundColorModifier } from './modifiers';

‎generatedTypes/components/button/index.d.ts

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
import React, { PureComponent } from 'react';
2+
import { ImageStyle, LayoutChangeEvent } from 'react-native';
3+
import { BaseComponentInjectedProps, ForwardRefInjectedProps } from '../../commons/new';
4+
import { ButtonPropTypes, ButtonState } from './type';
5+
declare type Props = ButtonPropTypes & BaseComponentInjectedProps & ForwardRefInjectedProps;
6+
/**
7+
* @description: Basic button component
8+
* @extends: TouchableOpacity
9+
* @extendslink: docs/TouchableOpacity
10+
* @modifiers: margin, background
11+
* @gif: https://media.giphy.com/media/xULW8j5WzsuPytqklq/giphy.gif
12+
* @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ButtonsScreen.js
13+
*/
14+
declare class Button extends PureComponent<Props, ButtonState> {
15+
static displayName: string;
16+
static defaultProps: {
17+
iconOnRight: boolean;
18+
};
19+
static sizes: {
20+
xSmall: string;
21+
small: string;
22+
medium: string;
23+
large: string;
24+
};
25+
static animationDirection: {
26+
center: string;
27+
left: string;
28+
right: string;
29+
};
30+
constructor(props: Props);
31+
state: {
32+
size: undefined;
33+
};
34+
styles: {
35+
container: {
36+
backgroundColor: string;
37+
justifyContent: "center";
38+
alignItems: "center";
39+
};
40+
containerDisabled: {
41+
backgroundColor: string;
42+
};
43+
innerContainerLink: {
44+
minWidth: undefined;
45+
paddingHorizontal: undefined;
46+
paddingVertical: undefined;
47+
borderRadius: number;
48+
backgroundColor: undefined;
49+
};
50+
shadowStyle: {
51+
shadowColor: string;
52+
shadowOffset: {
53+
height: number;
54+
width: number;
55+
};
56+
shadowOpacity: number;
57+
shadowRadius: number;
58+
elevation: number;
59+
};
60+
text: {
61+
color?: string | undefined;
62+
fontFamily?: string | undefined;
63+
fontSize?: number | undefined;
64+
fontStyle?: "normal" | "italic" | undefined;
65+
fontWeight?: "200" | "300" | "400" | "600" | "500" | "700" | "800" | "900" | "normal" | "bold" | "100" | undefined;
66+
letterSpacing?: number | undefined;
67+
lineHeight?: number | undefined;
68+
textAlign?: "center" | "left" | "right" | "auto" | "justify" | undefined;
69+
textDecorationLine?: "none" | "underline" | "line-through" | "underline line-through" | undefined;
70+
textDecorationStyle?: "solid" | "double" | "dotted" | "dashed" | undefined;
71+
textDecorationColor?: string | undefined;
72+
textShadowColor?: string | undefined;
73+
textShadowOffset?: {
74+
width: number;
75+
height: number;
76+
} | undefined;
77+
textShadowRadius?: number | undefined;
78+
textTransform?: "none" | "uppercase" | "capitalize" | "lowercase" | undefined;
79+
testID?: string | undefined;
80+
fontVariant?: import("react-native").FontVariant[] | undefined;
81+
writingDirection?: "auto" | "ltr" | "rtl" | undefined;
82+
backfaceVisibility?: "visible" | "hidden" | undefined;
83+
backgroundColor: string;
84+
borderBottomColor?: string | undefined;
85+
borderBottomEndRadius?: number | undefined;
86+
borderBottomLeftRadius?: number | undefined;
87+
borderBottomRightRadius?: number | undefined;
88+
borderBottomStartRadius?: number | undefined;
89+
borderBottomWidth?: number | undefined;
90+
borderColor?: string | undefined;
91+
borderEndColor?: string | undefined;
92+
borderLeftColor?: string | undefined;
93+
borderLeftWidth?: number | undefined;
94+
borderRadius?: number | undefined;
95+
borderRightColor?: string | undefined;
96+
borderRightWidth?: number | undefined;
97+
borderStartColor?: string | undefined;
98+
borderStyle?: "solid" | "dotted" | "dashed" | undefined;
99+
borderTopColor?: string | undefined;
100+
borderTopEndRadius?: number | undefined;
101+
borderTopLeftRadius?: number | undefined;
102+
borderTopRightRadius?: number | undefined;
103+
borderTopStartRadius?: number | undefined;
104+
borderTopWidth?: number | undefined;
105+
borderWidth?: number | undefined;
106+
opacity?: number | undefined;
107+
elevation?: number | undefined;
108+
alignContent?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "stretch" | undefined;
109+
alignItems?: "center" | "flex-start" | "flex-end" | "stretch" | "baseline" | undefined;
110+
alignSelf?: "center" | "flex-start" | "flex-end" | "auto" | "stretch" | "baseline" | undefined;
111+
aspectRatio?: number | undefined;
112+
borderEndWidth?: string | number | undefined;
113+
borderStartWidth?: string | number | undefined;
114+
bottom?: string | number | undefined;
115+
display?: "flex" | "none" | undefined;
116+
end?: string | number | undefined;
117+
flex: number;
118+
flexBasis?: string | number | undefined;
119+
flexDirection: "row" | "column" | "row-reverse" | "column-reverse";
120+
flexGrow?: number | undefined;
121+
flexShrink?: number | undefined;
122+
flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
123+
height?: string | number | undefined;
124+
justifyContent?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | undefined;
125+
left?: string | number | undefined;
126+
margin?: string | number | undefined;
127+
marginBottom?: string | number | undefined;
128+
marginEnd?: string | number | undefined;
129+
marginHorizontal?: string | number | undefined;
130+
marginLeft?: string | number | undefined;
131+
marginRight?: string | number | undefined;
132+
marginStart?: string | number | undefined;
133+
marginTop?: string | number | undefined;
134+
marginVertical?: string | number | undefined;
135+
maxHeight?: string | number | undefined;
136+
maxWidth?: string | number | undefined;
137+
minHeight?: string | number | undefined;
138+
minWidth?: string | number | undefined;
139+
overflow?: "visible" | "hidden" | "scroll" | undefined;
140+
padding?: string | number | undefined;
141+
paddingBottom?: string | number | undefined;
142+
paddingEnd?: string | number | undefined;
143+
paddingHorizontal?: string | number | undefined;
144+
paddingLeft?: string | number | undefined;
145+
paddingRight?: string | number | undefined;
146+
paddingStart?: string | number | undefined;
147+
paddingTop?: string | number | undefined;
148+
paddingVertical?: string | number | undefined;
149+
position?: "absolute" | "relative" | undefined;
150+
right?: string | number | undefined;
151+
start?: string | number | undefined;
152+
top?: string | number | undefined;
153+
width?: string | number | undefined;
154+
zIndex?: number | undefined;
155+
direction?: "ltr" | "rtl" | "inherit" | undefined;
156+
shadowColor?: string | undefined;
157+
shadowOffset?: {
158+
width: number;
159+
height: number;
160+
} | undefined;
161+
shadowOpacity?: number | undefined;
162+
shadowRadius?: number | undefined;
163+
transform?: (import("react-native").PerpectiveTransform | import("react-native").RotateTransform | import("react-native").RotateXTransform | import("react-native").RotateYTransform | import("react-native").RotateZTransform | import("react-native").ScaleTransform | import("react-native").ScaleXTransform | import("react-native").ScaleYTransform | import("react-native").TranslateXTransform | import("react-native").TranslateYTransform | import("react-native").SkewXTransform | import("react-native").SkewYTransform)[] | undefined;
164+
transformMatrix?: number[] | undefined;
165+
rotation?: number | undefined;
166+
scaleX?: number | undefined;
167+
scaleY?: number | undefined;
168+
translateX?: number | undefined;
169+
translateY?: number | undefined;
170+
textAlignVertical?: "center" | "top" | "bottom" | "auto" | undefined;
171+
includeFontPadding?: boolean | undefined;
172+
};
173+
};
174+
componentDidUpdate(prevProps: Props): void;
175+
componentDidMount(): void;
176+
componentWillUnmount(): void;
177+
onOrientationChanged: () => void;
178+
onLayout: (event: LayoutChangeEvent) => void;
179+
get isOutline(): boolean;
180+
get isFilled(): boolean;
181+
get isIconButton(): boolean | 0 | undefined;
182+
getBackgroundColor(): any;
183+
getActiveBackgroundColor(): any;
184+
getLabelColor(): string | undefined;
185+
getLabelSizeStyle(): object;
186+
getContainerSizeStyle(): any;
187+
getOutlineStyle(): {
188+
borderWidth: number;
189+
borderColor: string;
190+
} | undefined;
191+
getBorderRadiusStyle(): {
192+
borderRadius: number;
193+
};
194+
getShadowStyle(): ({
195+
shadowColor: string;
196+
shadowOffset: {
197+
height: number;
198+
width: number;
199+
};
200+
shadowOpacity: number;
201+
shadowRadius: number;
202+
elevation: number;
203+
} | {
204+
shadowColor: any;
205+
})[] | undefined;
206+
getIconStyle(): (ImageStyle | undefined)[];
207+
getAnimationDirectionStyle(): {
208+
alignSelf: string;
209+
} | undefined;
210+
renderIcon(): any;
211+
renderLabel(): JSX.Element | null;
212+
render(): JSX.Element;
213+
}
214+
export { Button };
215+
declare const _default: React.ComponentType<ButtonPropTypes>;
216+
export default _default;

‎generatedTypes/components/button/type.d.ts

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import { ImageStyle, TextStyle } from 'react-native';
2+
import { TextPropTypes } from '../text';
3+
import { TypographyModifiers, ColorsModifiers, BackgroundColorModifier, MarginModifiers } from '../../commons/new';
4+
export declare type ButtonPropTypes = TextPropTypes & TypographyModifiers & ColorsModifiers & BackgroundColorModifier & MarginModifiers & {
5+
/**
6+
* Text to show inside the button
7+
*/
8+
label?: string;
9+
/**
10+
* The Button text color (inherited from Text component)
11+
*/
12+
color?: string;
13+
/**
14+
* Icon image source
15+
*/
16+
iconSource?: object | number | Function;
17+
/**
18+
* Icon image style
19+
*/
20+
iconStyle?: ImageStyle;
21+
/**
22+
* Should the icon be right to the label
23+
*/
24+
iconOnRight?: boolean;
25+
/**
26+
* Color of the button background
27+
*/
28+
backgroundColor?: string;
29+
/**
30+
* Size of the button [large, medium, small, xSmall]
31+
*/
32+
size?: 'xSmall' | 'small' | 'medium' | 'large';
33+
/**
34+
* Custom border radius.
35+
*/
36+
borderRadius?: number;
37+
/**
38+
* Actions handler
39+
*/
40+
onPress?: Function;
41+
/**
42+
* Disable interactions for the component
43+
*/
44+
disabled?: boolean;
45+
/**
46+
* Button will have outline style
47+
*/
48+
outline?: boolean;
49+
/**
50+
* The outline color
51+
*/
52+
outlineColor?: string;
53+
/**
54+
* The outline width
55+
*/
56+
outlineWidth?: number;
57+
/**
58+
* Button will look like a link
59+
*/
60+
link?: boolean;
61+
/**
62+
* label color for when it's displayed as link
63+
*/
64+
linkColor?: string;
65+
/**
66+
* Additional styles for label text
67+
*/
68+
labelStyle?: TextStyle;
69+
/**
70+
* Props that will be passed to the button's Text label.
71+
*/
72+
labelProps?: object;
73+
/**
74+
* should the button act as a coast to coast button (no border radius)
75+
*/
76+
fullWidth?: boolean;
77+
/**
78+
* should the button be a round button
79+
*/
80+
round?: boolean;
81+
/**
82+
* Control shadow visibility (iOS-only)
83+
*/
84+
enableShadow?: boolean;
85+
/**
86+
* avoid inner button padding
87+
*/
88+
avoidInnerPadding?: boolean;
89+
/**
90+
* avoid minimum width constraints
91+
*/
92+
avoidMinWidth?: boolean;
93+
/**
94+
* callback for getting activeBackgroundColor (e.g. (calculatedBackgroundColor, prop) => {...})
95+
* better set using ThemeManager
96+
*/
97+
getActiveBackgroundColor?: Function;
98+
/**
99+
* should animate layout change
100+
* Note?: For Android you must set 'setLayoutAnimationEnabledExperimental(true)' via RN's 'UIManager'
101+
*/
102+
animateLayout?: boolean;
103+
/**
104+
* the direction of the animation ('left' and 'right' will effect the button's own alignment)
105+
*/
106+
animateTo?: 'center' | 'left' | 'right';
107+
};
108+
export declare type ButtonState = {
109+
size?: number;
110+
borderRadius?: number;
111+
isLandscape?: boolean;
112+
};

‎generatedTypes/components/text/index.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { PureComponent } from 'react';
22
import { TextProps, TextStyle } from 'react-native';
33
import { BaseComponentInjectedProps, ForwardRefInjectedProps, MarginModifiers, TypographyModifiers, ColorsModifiers } from '../../commons/new';
4-
declare type TextPropTypes = TextProps & TypographyModifiers & ColorsModifiers & MarginModifiers & {
4+
export declare type TextPropTypes = TextProps & TypographyModifiers & ColorsModifiers & MarginModifiers & {
55
/**
66
* color of the text
77
*/

‎generatedTypes/components/touchableOpacity/index.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ declare type IProps = TouchableOpacityProps & ContainerModifiers & {
2525
* Should use a more native touchable opacity component
2626
*/
2727
useNative?: boolean;
28+
ref?: any;
2829
};
2930
declare const _default: React.ComponentType<IProps>;
3031
export default _default;

‎generatedTypes/index.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,14 @@ export * from './style';
77
export {default as View} from './components/view';
88
export {default as Text} from './components/text';
99
export {default as TouchableOpacity} from './components/touchableOpacity';
10+
export {default as Button} from './components/button';
1011

1112
/* All components with manual typings */
1213
export {
1314
ActionBar,
1415
ActionSheet,
1516
Avatar,
1617
Badge,
17-
Button,
1818
Card,
1919
Carousel,
2020
ConnectionStatusBar,

‎index.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
import lib from './generatedTypes';
2-
export = lib; //for backward compatibility with module.exports
2+
export = lib; //for backward compatibility with module.exports

‎src/commons/modifiers.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ export function extractBackgroundColorValue(props: Dictionary<any>) {
117117

118118
return backgroundColor;
119119
}
120-
export function extractTypographyValue(props: Dictionary<any>) {
120+
export function extractTypographyValue(props: Dictionary<any>): object | undefined {
121121
const typographyPropsKeys = _.chain(props)
122122
.keys()
123123
.filter(key => Typography.getKeysPattern().test(key))

0 commit comments

Comments
 (0)