Skip to content

Commit 26e7c46

Browse files
ykravvykravv
authored
Fix button static values and other small type fixes (#834)
* Fix Button statics `Button.sizes...` to work in TS * Add missing changes to generatedTypes * Commit missing changes to generatedTypes index * Add AvatarProps to export * Add common types to BaseComponent * Fix button prop * Fix props for button to extend TouchableOpacity instead of Text * Fix source prop for Card.Image * Fix implementation of Card.Image to actually accept 'source' prop
1 parent b013b81 commit 26e7c46

File tree

18 files changed

+99
-74
lines changed

18 files changed

+99
-74
lines changed

‎generatedTypes/commons/asBaseComponent.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,5 @@ export interface BaseComponentInjectedProps {
66
*/
77
modifiers: ReturnType<typeof Modifiers.generateModifiersStyle>;
88
}
9-
declare function asBaseComponent<PROPS, STATICS = {}>(WrappedComponent: React.ComponentType<any>): React.ComponentType<PROPS> & STATICS;
9+
declare function asBaseComponent<PROPS, STATICS = {}>(WrappedComponent: React.ComponentType<any>): React.ComponentClass<PROPS> & STATICS;
1010
export default asBaseComponent;

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

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,20 @@
11
import React, { PureComponent } from 'react';
2-
import { LayoutChangeEvent, ImageStyle, TextStyle } from 'react-native';
2+
import { LayoutChangeEvent, ImageStyle, TextStyle, StyleProp } from 'react-native';
33
import { BaseComponentInjectedProps, ForwardRefInjectedProps, TypographyModifiers, ColorsModifiers, BackgroundColorModifier, MarginModifiers } from '../../commons/new';
4+
import { TouchableOpacityProps } from '../touchableOpacity';
45
import { TextPropTypes } from '../text';
5-
export declare type ButtonPropTypes = TextPropTypes & TypographyModifiers & ColorsModifiers & BackgroundColorModifier & MarginModifiers & {
6+
declare enum ButtonSize {
7+
xSmall = "xSmall",
8+
small = "small",
9+
medium = "medium",
10+
large = "large"
11+
}
12+
declare enum AnimationDirection {
13+
center = "center",
14+
left = "left",
15+
right = "right"
16+
}
17+
export declare type ButtonPropTypes = TouchableOpacityProps & TypographyModifiers & ColorsModifiers & BackgroundColorModifier & MarginModifiers & {
618
/**
719
* Text to show inside the button
820
*/
@@ -18,7 +30,7 @@ export declare type ButtonPropTypes = TextPropTypes & TypographyModifiers & Colo
1830
/**
1931
* Icon image style
2032
*/
21-
iconStyle?: ImageStyle;
33+
iconStyle?: StyleProp<ImageStyle>;
2234
/**
2335
* Should the icon be right to the label
2436
*/
@@ -30,7 +42,7 @@ export declare type ButtonPropTypes = TextPropTypes & TypographyModifiers & Colo
3042
/**
3143
* Size of the button [large, medium, small, xSmall]
3244
*/
33-
size?: 'xSmall' | 'small' | 'medium' | 'large';
45+
size?: ButtonSize;
3446
/**
3547
* Custom border radius.
3648
*/
@@ -70,7 +82,7 @@ export declare type ButtonPropTypes = TextPropTypes & TypographyModifiers & Colo
7082
/**
7183
* Props that will be passed to the button's Text label.
7284
*/
73-
labelProps?: object;
85+
labelProps?: TextPropTypes;
7486
/**
7587
* should the button act as a coast to coast button (no border radius)
7688
*/
@@ -104,7 +116,7 @@ export declare type ButtonPropTypes = TextPropTypes & TypographyModifiers & Colo
104116
/**
105117
* the direction of the animation ('left' and 'right' will effect the button's own alignment)
106118
*/
107-
animateTo?: 'center' | 'left' | 'right';
119+
animateTo?: AnimationDirection;
108120
};
109121
export declare type ButtonState = {
110122
size?: number;
@@ -125,17 +137,8 @@ declare class Button extends PureComponent<Props, ButtonState> {
125137
static defaultProps: {
126138
iconOnRight: boolean;
127139
};
128-
static sizes: {
129-
xSmall: string;
130-
small: string;
131-
medium: string;
132-
large: string;
133-
};
134-
static animationDirection: {
135-
center: string;
136-
left: string;
137-
right: string;
138-
};
140+
static sizes: typeof ButtonSize;
141+
static animationDirection: typeof AnimationDirection;
139142
constructor(props: Props);
140143
state: {
141144
size: undefined;
@@ -316,7 +319,7 @@ declare class Button extends PureComponent<Props, ButtonState> {
316319
} | {
317320
shadowColor: any;
318321
})[] | undefined;
319-
getIconStyle(): (ImageStyle | undefined)[];
322+
getIconStyle(): StyleProp<ImageStyle>[];
320323
getAnimationDirectionStyle(): {
321324
alignSelf: string;
322325
} | undefined;
@@ -325,5 +328,5 @@ declare class Button extends PureComponent<Props, ButtonState> {
325328
render(): JSX.Element;
326329
}
327330
export { Button };
328-
declare const _default: React.ComponentClass<ButtonPropTypes, any> | React.FunctionComponent<ButtonPropTypes>;
331+
declare const _default: React.ComponentClass<ButtonPropTypes, any> & typeof Button;
329332
export default _default;

‎generatedTypes/components/card/CardImage.d.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { ImageSourcePropType } from 'react-native';
33
import { ImageProps } from '../image';
4-
export declare type CardImageProps = ImageProps & {
4+
export declare type CardImageProps = Omit<ImageProps, 'source'> & {
55
/**
66
* Image source, either remote source or local. Note: for remote pass object {uri: <remote_uri_string>}
77
*/
@@ -24,6 +24,11 @@ export declare type CardImageProps = ImageProps & {
2424
* border radius, basically for Android since overflow doesn't work well (deprecated)
2525
*/
2626
borderRadius?: number;
27+
/**
28+
* Image source, either remote source or local. Note: for remote pass object {uri: <remote_uri_string>}
29+
* TODO: Remove after imageSource deprecation - should take it from Image props
30+
*/
31+
source?: ImageSourcePropType;
2732
};
2833
declare const _default: React.ComponentType<CardImageProps>;
2934
export default _default;

‎generatedTypes/components/card/CardSection.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,5 +37,5 @@ export declare type CardSectionProps = ViewPropTypes & {
3737
*/
3838
imageProps?: ImageProps;
3939
};
40-
declare const _default: React.ComponentClass<CardSectionProps, any> | React.FunctionComponent<CardSectionProps>;
40+
declare const _default: React.ComponentClass<CardSectionProps, any>;
4141
export default _default;

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

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -61,11 +61,8 @@ export declare type CardPropTypes = ViewPropTypes & TouchableOpacityProps & {
6161
hideIndicator?: boolean;
6262
};
6363
};
64-
declare const _default: (React.ComponentClass<CardPropTypes, any> & {
64+
declare const _default: React.ComponentClass<CardPropTypes, any> & {
6565
Image: React.ComponentType<import("./CardImage").CardImageProps>;
66-
Section: React.ComponentClass<CardSectionProps, any> | React.FunctionComponent<CardSectionProps>;
67-
}) | (React.FunctionComponent<CardPropTypes> & {
68-
Image: React.ComponentType<import("./CardImage").CardImageProps>;
69-
Section: React.ComponentClass<CardSectionProps, any> | React.FunctionComponent<CardSectionProps>;
70-
});
66+
Section: React.ComponentClass<CardSectionProps, any>;
67+
};
7168
export default _default;

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { StyleProp, TouchableOpacityProps, ViewStyle } from 'react-native';
3-
interface CheckboxProps {
3+
export interface CheckboxPropTypes extends TouchableOpacityProps {
44
/**
55
* The value of the Checkbox. If true the switch will be turned on. Default value is false.
66
*/
@@ -38,6 +38,5 @@ interface CheckboxProps {
3838
*/
3939
style?: StyleProp<ViewStyle>;
4040
}
41-
declare type Props = CheckboxProps & TouchableOpacityProps;
42-
declare const _default: React.ComponentClass<Props, any> | React.FunctionComponent<Props>;
41+
declare const _default: React.ComponentClass<CheckboxPropTypes, any>;
4342
export default _default;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,5 +70,5 @@ declare class Image extends PureComponent<Props> {
7070
render(): JSX.Element;
7171
}
7272
export { Image };
73-
declare const _default: React.ComponentClass<ImageProps, any> | React.FunctionComponent<ImageProps>;
73+
declare const _default: React.ComponentClass<ImageProps, any>;
7474
export default _default;

‎generatedTypes/components/radioButton/RadioButton.d.ts

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React from 'react';
2-
import { TextStyle, ImageSourcePropType, ImageStyle } from 'react-native';
3-
interface RadioButtonPropTypes {
2+
import { TextStyle, ImageSourcePropType, ImageStyle, ViewProps } from 'react-native';
3+
import { BaseComponentInjectedProps, ForwardRefInjectedProps } from '../../commons/new';
4+
import { RadioGroupContextPropTypes } from './RadioGroupContext';
5+
export declare type RadioButtonPropTypes = RadioGroupContextPropTypes & BaseComponentInjectedProps & ForwardRefInjectedProps & ViewProps & {
46
/**
57
* The identifier value of the radio button. must be different than other RadioButtons in the same group
68
*/
@@ -49,6 +51,6 @@ interface RadioButtonPropTypes {
4951
* Should the icon be on the right side of the label
5052
*/
5153
iconOnRight?: boolean;
52-
}
53-
declare const _default: React.ComponentClass<RadioButtonPropTypes, any> | React.FunctionComponent<RadioButtonPropTypes>;
54+
};
55+
declare const _default: React.ComponentClass<RadioButtonPropTypes, any>;
5456
export default _default;

‎generatedTypes/components/radioButton/RadioGroup.d.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
2-
interface RadioGroupPropTypes {
2+
import { BaseComponentInjectedProps, ForwardRefInjectedProps } from '../../commons/new';
3+
export declare type RadioGroupPropTypes = BaseComponentInjectedProps & ForwardRefInjectedProps & {
34
/**
45
* The initial value of the selected radio button
56
*/
@@ -8,6 +9,6 @@ interface RadioGroupPropTypes {
89
* Invoked once when value changes, by selecting one of the radio buttons in the group
910
*/
1011
onValueChange?: (value: string | number | boolean) => void;
11-
}
12-
declare const _default: React.ComponentClass<RadioGroupPropTypes, any> | React.FunctionComponent<RadioGroupPropTypes>;
12+
};
13+
declare const _default: React.ComponentClass<RadioGroupPropTypes, any>;
1314
export default _default;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,5 +43,5 @@ declare class Text extends PureComponent<PropsTypes> {
4343
render(): JSX.Element;
4444
}
4545
export { Text };
46-
declare const _default: React.ComponentClass<TextPropTypes, any> | React.FunctionComponent<TextPropTypes>;
46+
declare const _default: React.ComponentClass<TextPropTypes, any>;
4747
export default _default;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,5 +27,5 @@ export declare type TouchableOpacityProps = RNTouchableOpacityProps & ContainerM
2727
useNative?: boolean;
2828
ref?: any;
2929
};
30-
declare const _default: React.ComponentClass<TouchableOpacityProps, any> | React.FunctionComponent<TouchableOpacityProps>;
30+
declare const _default: React.ComponentClass<TouchableOpacityProps, any>;
3131
export default _default;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,5 +27,5 @@ export interface ViewPropTypes extends ViewProps, ContainerModifiers {
2727
*/
2828
renderDelay?: number;
2929
}
30-
declare const _default: React.ComponentClass<ViewPropTypes, any> | React.FunctionComponent<ViewPropTypes>;
30+
declare const _default: React.ComponentClass<ViewPropTypes, any>;
3131
export default _default;

‎generatedTypes/incubator/TouchableOpacity.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,5 +38,5 @@ declare type TouchableOpacityPropTypes = {
3838
*/
3939
style: ViewStyle;
4040
};
41-
declare const _default: React.ComponentClass<TouchableOpacityPropTypes, any> | React.FunctionComponent<TouchableOpacityPropTypes>;
41+
declare const _default: React.ComponentClass<TouchableOpacityPropTypes, any>;
4242
export default _default;

‎generatedTypes/index.d.ts

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,21 @@ export * from './style';
77
export {withScrollEnabler} from './commons/new';
88
export {default as Card, CardPropTypes, CardSectionProps} from './components/card';
99
export {default as View, ViewPropTypes} from './components/view';
10-
export {default as Text} from './components/text';
10+
export {default as Text, TextPropTypes} from './components/text';
1111
export {default as TouchableOpacity, TouchableOpacityProps} from './components/touchableOpacity';
12-
export {default as Button} from './components/button';
13-
export {default as Checkbox} from './components/checkbox';
14-
export {default as Image} from './components/image';
15-
export {default as Overlay} from './components/overlay';
16-
export {default as RadioButton} from './components/radioButton/RadioButton';
17-
export {default as RadioGroup} from './components/radioButton/RadioGroup';
12+
export {default as Button, ButtonPropTypes} from './components/button';
13+
export {default as Checkbox, CheckboxPropTypes} from './components/checkbox';
14+
export {default as Image, ImageProps} from './components/image';
15+
export {default as Overlay, OverlayTypes} from './components/overlay';
16+
export {default as RadioButton, RadioButtonPropTypes} from './components/radioButton/RadioButton';
17+
export {default as RadioGroup, RadioGroupPropTypes} from './components/radioButton/RadioGroup';
1818

1919
/* All components with manual typings */
2020
export {
2121
ActionBar,
2222
ActionSheet,
2323
Avatar,
24+
AvatarProps,
2425
Badge,
2526
Card,
2627
Carousel,

‎src/components/button/index.tsx

Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, {PureComponent} from 'react';
2-
import {Platform, StyleSheet, LayoutAnimation, Image, LayoutChangeEvent, ImageStyle, TextStyle} from 'react-native';
2+
import {Platform, StyleSheet, LayoutAnimation, Image, LayoutChangeEvent, ImageStyle, TextStyle, StyleProp} from 'react-native';
33
import _ from 'lodash';
44
import {
55
asBaseComponent,
@@ -15,10 +15,23 @@ import {
1515
import {Constants} from '../../helpers';
1616
import {Colors, Typography, ThemeManager, BorderRadiuses} from '../../style';
1717
import {extractColorValue, extractTypographyValue} from '../../commons/modifiers';
18-
import TouchableOpacity from '../touchableOpacity';
18+
import TouchableOpacity, {TouchableOpacityProps} from '../touchableOpacity';
1919
import Text, {TextPropTypes} from '../text';
2020

21-
export type ButtonPropTypes = TextPropTypes &
21+
enum ButtonSize {
22+
xSmall = 'xSmall',
23+
small = 'small',
24+
medium = 'medium',
25+
large = 'large',
26+
}
27+
28+
enum AnimationDirection {
29+
center = 'center',
30+
left = 'left',
31+
right = 'right',
32+
}
33+
34+
export type ButtonPropTypes = TouchableOpacityProps &
2235
TypographyModifiers &
2336
ColorsModifiers &
2437
BackgroundColorModifier &
@@ -38,7 +51,7 @@ export type ButtonPropTypes = TextPropTypes &
3851
/**
3952
* Icon image style
4053
*/
41-
iconStyle?: ImageStyle;
54+
iconStyle?: StyleProp<ImageStyle>;
4255
/**
4356
* Should the icon be right to the label
4457
*/
@@ -50,7 +63,7 @@ export type ButtonPropTypes = TextPropTypes &
5063
/**
5164
* Size of the button [large, medium, small, xSmall]
5265
*/
53-
size?: 'xSmall' | 'small' | 'medium' | 'large';
66+
size?: ButtonSize;
5467
/**
5568
* Custom border radius.
5669
*/
@@ -90,7 +103,7 @@ export type ButtonPropTypes = TextPropTypes &
90103
/**
91104
* Props that will be passed to the button's Text label.
92105
*/
93-
labelProps?: object;
106+
labelProps?: TextPropTypes;
94107
/**
95108
* should the button act as a coast to coast button (no border radius)
96109
*/
@@ -124,7 +137,7 @@ export type ButtonPropTypes = TextPropTypes &
124137
/**
125138
* the direction of the animation ('left' and 'right' will effect the button's own alignment)
126139
*/
127-
animateTo?: 'center' | 'left' | 'right';
140+
animateTo?: AnimationDirection;
128141
};
129142

130143
export type ButtonState = {
@@ -151,7 +164,7 @@ const MIN_WIDTH = {
151164
MEDIUM: 77,
152165
LARGE: 90
153166
};
154-
const DEFAULT_SIZE = 'large';
167+
const DEFAULT_SIZE = ButtonSize.large;
155168

156169
type Props = ButtonPropTypes & BaseComponentInjectedProps & ForwardRefInjectedProps;
157170

@@ -170,18 +183,9 @@ class Button extends PureComponent<Props, ButtonState> {
170183
iconOnRight: false
171184
};
172185

173-
static sizes = {
174-
xSmall: 'xSmall',
175-
small: 'small',
176-
medium: 'medium',
177-
large: 'large'
178-
};
186+
static sizes = ButtonSize;
179187

180-
static animationDirection = {
181-
center: 'center',
182-
left: 'left',
183-
right: 'right'
184-
};
188+
static animationDirection = AnimationDirection;
185189

186190
// This redundant constructor for some reason fix tests :/
187191
// eslint-disable-next-line
@@ -553,4 +557,4 @@ function createStyles() {
553557

554558
export {Button}; // For tests
555559

556-
export default asBaseComponent<ButtonPropTypes>(forwardRef(Button));
560+
export default asBaseComponent<ButtonPropTypes, typeof Button>(forwardRef(Button));

0 commit comments

Comments
 (0)