Skip to content

Commit 32f56d7

Browse files
Inbal-TishInbal-Tish
authored
Infra/component prop types migration (#1030)
* renaming * restoring old exports * remove redundant export * Adding old export to incubator-touchableOpacity * Exporting new ComponentProps; Removing unnecessary old exports * Remove usage of old CardPropTypes; renaming RadioGroupContextPropTypes * fix for master merge
1 parent 50eb031 commit 32f56d7

File tree

23 files changed

+140
-123
lines changed

23 files changed

+140
-123
lines changed

‎demo/src/screens/componentScreens/CardsScreen.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
Colors,
77
View,
88
Card,
9-
CardPropTypes,
9+
CardProps,
1010
Button,
1111
Text,
1212
Image
@@ -152,7 +152,7 @@ export default class CardsScreen extends Component<
152152
);
153153
};
154154

155-
renderCoupon = (cardProps: CardPropTypes) => {
155+
renderCoupon = (cardProps: CardProps) => {
156156
return (
157157
<Card
158158
{...cardProps}
@@ -192,7 +192,7 @@ export default class CardsScreen extends Component<
192192
);
193193
};
194194

195-
renderComplexImage = (cardProps: CardPropTypes, image: React.ReactNode) => {
195+
renderComplexImage = (cardProps: CardProps, image: React.ReactNode) => {
196196
return (
197197
<Card
198198
{...cardProps}
@@ -282,7 +282,7 @@ export default class CardsScreen extends Component<
282282
);
283283
};
284284

285-
renderBackgroundCard = (cardProps: CardPropTypes, body: React.ReactNode) => {
285+
renderBackgroundCard = (cardProps: CardProps, body: React.ReactNode) => {
286286
return (
287287
<Card flex center height={80} {...cardProps}>
288288
{body}

‎src/components/actionBar/index.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1+
import _ from 'lodash';
12
import React, { Component } from 'react';
23
import {StyleSheet, ViewStyle} from 'react-native';
3-
import _ from 'lodash';
4+
import {Colors, Shadows} from '../../style';
45
import {asBaseComponent} from '../../commons/new';
56
import View from '../view';
6-
import Button, {ButtonPropTypes} from '../button';
7-
import {Colors, Shadows} from '../../style';
7+
import Button, {ButtonProps} from '../button';
8+
89

910
/**
1011
* @description: Quick actions bar, each action support Button component props
@@ -25,7 +26,7 @@ export type ActionBarProps = {
2526
/**
2627
* actions for the action bar
2728
*/
28-
actions: ButtonPropTypes[];
29+
actions: ButtonProps[];
2930
/**
3031
* should action be equally centered
3132
*/
@@ -58,7 +59,7 @@ class ActionBar extends Component<ActionBarProps> {
5859
}
5960

6061
styles = createStyles(this.props);
61-
62+
6263
getAlignment(actionIndex: number) {
6364
const {actions, centered} = this.props;
6465
const first = actionIndex === 0;

‎src/components/avatar/index.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export enum BadgePosition {
3434

3535
const DEFAULT_BADGE_SIZE = 'pimpleBig';
3636

37-
export type AvatarPropTypes = {
37+
export type AvatarProps = {
3838
/**
3939
* Adds fade in animation when Avatar image loads
4040
*/
@@ -128,6 +128,7 @@ export type AvatarPropTypes = {
128128
*/
129129
testID?: string;
130130
};
131+
export type AvatarPropTypes = AvatarProps; //TODO: remove after ComponentPropTypes deprecation;
131132

132133
/**
133134
* @description: Avatar component for displaying user profile images
@@ -137,11 +138,11 @@ export type AvatarPropTypes = {
137138
* @image: https://user-images.githubusercontent.com/33805983/34480603-197d7f64-efb6-11e7-9feb-db8ba756f055.png
138139
* @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/AvatarsScreen.js
139140
*/
140-
class Avatar extends PureComponent<AvatarPropTypes> {
141+
class Avatar extends PureComponent<AvatarProps> {
141142

142143
styles: ReturnType<typeof createStyles>;
143144

144-
constructor(props: AvatarPropTypes) {
145+
constructor(props: AvatarProps) {
145146
super(props);
146147

147148
this.styles = createStyles(props);
@@ -356,7 +357,7 @@ class Avatar extends PureComponent<AvatarPropTypes> {
356357
}
357358
}
358359

359-
function createStyles(props: AvatarPropTypes) {
360+
function createStyles(props: AvatarProps) {
360361
const {labelColor} = props;
361362
const styles = StyleSheet.create({
362363
initialsContainerWithInset: {
@@ -381,4 +382,4 @@ function createStyles(props: AvatarPropTypes) {
381382

382383
export {Avatar}; // For tests
383384

384-
export default asBaseComponent<AvatarPropTypes, typeof Avatar>(forwardRef(Avatar))
385+
export default asBaseComponent<AvatarProps, typeof Avatar>(forwardRef(Avatar))

‎src/components/button/index.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {Constants} from '../../helpers';
1616
import {Colors, Typography, BorderRadiuses} from '../../style';
1717
import {extractColorValue, extractTypographyValue} from '../../commons/modifiers';
1818
import TouchableOpacity, {TouchableOpacityProps} from '../touchableOpacity';
19-
import Text, {TextPropTypes} from '../text';
19+
import Text, {TextProps} from '../text';
2020
import Image from '../image';
2121

2222
export enum ButtonSize {
@@ -32,7 +32,7 @@ export enum AnimationDirection {
3232
right = 'right'
3333
}
3434

35-
export type ButtonPropTypes = TouchableOpacityProps &
35+
export type ButtonProps = TouchableOpacityProps &
3636
TypographyModifiers &
3737
ColorsModifiers &
3838
BackgroundColorModifier &
@@ -112,7 +112,7 @@ export type ButtonPropTypes = TouchableOpacityProps &
112112
/**
113113
* Props that will be passed to the button's Text label.
114114
*/
115-
labelProps?: TextPropTypes;
115+
labelProps?: TextProps;
116116
/**
117117
* should the button act as a coast to coast button (no border radius)
118118
*/
@@ -148,6 +148,7 @@ export type ButtonPropTypes = TouchableOpacityProps &
148148
*/
149149
animateTo?: AnimationDirection;
150150
};
151+
export type ButtonPropTypes = ButtonProps; //TODO: remove after ComponentPropTypes deprecation;
151152

152153
export type ButtonState = {
153154
size?: number;
@@ -176,7 +177,7 @@ const MIN_WIDTH = {
176177
const DEFAULT_SIZE = ButtonSize.large;
177178
const DISABLED_COLOR = Colors.dark60;
178179

179-
type Props = ButtonPropTypes & BaseComponentInjectedProps & ForwardRefInjectedProps;
180+
type Props = ButtonProps & BaseComponentInjectedProps & ForwardRefInjectedProps;
180181

181182
/**
182183
* @description: Basic button component
@@ -572,4 +573,4 @@ function createStyles() {
572573

573574
export {Button}; // For tests
574575

575-
export default asBaseComponent<ButtonPropTypes, typeof Button>(forwardRef<Props>(Button));
576+
export default asBaseComponent<ButtonProps, typeof Button>(forwardRef<Props>(Button));

‎src/components/card/CardSection.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@ import React, {PureComponent} from 'react';
33
import {StyleSheet, ViewStyle, ImageStyle, ImageSourcePropType, StyleProp} from 'react-native';
44
import {LogService} from '../../services';
55
import {asBaseComponent} from '../../commons/new';
6-
import View, {ViewPropTypes} from '../view';
7-
import Text, {TextPropTypes} from '../text';
6+
import View, {ViewProps} from '../view';
7+
import Text, {TextProps} from '../text';
88
import Image, {ImageProps} from '../image';
99
import asCardChild, {asCardChildProps} from './asCardChild';
1010

1111

12-
type ContentType = TextPropTypes & {text?: string};
12+
type ContentType = TextProps & {text?: string};
1313

14-
export type CardSectionProps = ViewPropTypes & {
14+
export type CardSectionProps = ViewProps & {
1515
/**
1616
* Text content for the CardSection.
1717
* Example: content={[{text: 'You’re Invited!', text70: true, dark10: true}]}

‎src/components/card/index.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
BaseComponentInjectedProps,
1212
ForwardRefInjectedProps
1313
} from '../../commons/new';
14-
import View, {ViewPropTypes} from '../view';
14+
import View, {ViewProps} from '../view';
1515
import TouchableOpacity, {TouchableOpacityProps} from '../touchableOpacity';
1616
import Image from '../image';
1717
import CardImage from './CardImage';
@@ -32,7 +32,7 @@ const DEFAULT_SELECTION_PROPS = {
3232
};
3333

3434
export {CardSectionProps};
35-
export type CardPropTypes = ViewPropTypes &
35+
export type CardProps = ViewProps &
3636
TouchableOpacityProps & {
3737
/**
3838
* card custom width
@@ -90,10 +90,11 @@ export type CardPropTypes = ViewPropTypes &
9090
hideIndicator?: boolean;
9191
};
9292
};
93+
export type CardPropTypes = CardProps; //TODO: remove after ComponentPropTypes deprecation;
9394

9495
type PropTypes = BaseComponentInjectedProps &
9596
ForwardRefInjectedProps &
96-
CardPropTypes;
97+
CardProps;
9798

9899
type State = {
99100
animatedSelected: Animated.Value;
@@ -322,7 +323,7 @@ function createStyles({
322323
height,
323324
borderRadius,
324325
selectionOptions
325-
}: CardPropTypes) {
326+
}: CardProps) {
326327
const selectionOptionsWithDefaults = {
327328
...DEFAULT_SELECTION_PROPS,
328329
...selectionOptions
@@ -375,7 +376,7 @@ Card.Image = CardImage;
375376
Card.Section = CardSection;
376377

377378
export default asBaseComponent<
378-
CardPropTypes,
379+
CardProps,
379380
{
380381
Image: typeof CardImage;
381382
Section: typeof CardSection;

‎src/components/checkbox/index.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const DEFAULT_COLOR = Colors.blue30;
2323
const DEFAULT_ICON_COLOR = Colors.white;
2424
const DEFAULT_DISABLED_COLOR = Colors.grey50;
2525

26-
export interface CheckboxPropTypes extends TouchableOpacityProps {
26+
export interface CheckboxProps extends TouchableOpacityProps {
2727
/**
2828
* The value of the Checkbox. If true the switch will be turned on. Default value is false.
2929
*/
@@ -72,8 +72,8 @@ export interface CheckboxPropTypes extends TouchableOpacityProps {
7272
* Additional styling for checkbox and label container
7373
*/
7474
containerStyle?: StyleProp<ViewStyle>;
75-
7675
}
76+
export type CheckboxPropTypes = CheckboxProps; //TODO: remove after ComponentPropTypes deprecation;
7777

7878
interface CheckboxState {
7979
isChecked: Animated.Value;
@@ -86,7 +86,7 @@ interface CheckboxState {
8686
* @gif: https://media.giphy.com/media/xULW8j5WzsuPytqklq/giphy.gif
8787
* @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CheckboxScreen.tsx
8888
*/
89-
class Checkbox extends Component<CheckboxPropTypes, CheckboxState> {
89+
class Checkbox extends Component<CheckboxProps, CheckboxState> {
9090
static displayName = 'Checkbox';
9191

9292
styles: {
@@ -107,7 +107,7 @@ class Checkbox extends Component<CheckboxPropTypes, CheckboxState> {
107107
];
108108
};
109109

110-
constructor(props: CheckboxPropTypes) {
110+
constructor(props: CheckboxProps) {
111111
super(props);
112112

113113
this.state = {
@@ -129,7 +129,7 @@ class Checkbox extends Component<CheckboxPropTypes, CheckboxState> {
129129
};
130130
}
131131

132-
componentDidUpdate(prevProps: CheckboxPropTypes) {
132+
componentDidUpdate(prevProps: CheckboxProps) {
133133
const {value} = this.props;
134134
if (prevProps.value !== value) {
135135
this.animateCheckbox(value);
@@ -148,7 +148,7 @@ class Checkbox extends Component<CheckboxPropTypes, CheckboxState> {
148148
};
149149
}
150150

151-
animateCheckbox(value: CheckboxPropTypes['value']) {
151+
animateCheckbox(value: CheckboxProps['value']) {
152152
const {isChecked} = this.state;
153153

154154
Animated.timing(isChecked, {
@@ -223,7 +223,7 @@ class Checkbox extends Component<CheckboxPropTypes, CheckboxState> {
223223
}
224224
}
225225

226-
function createStyles(props: CheckboxPropTypes) {
226+
function createStyles(props: CheckboxProps) {
227227
const {color = DEFAULT_COLOR, iconColor = DEFAULT_ICON_COLOR, size = DEFAULT_SIZE, borderRadius} = props;
228228

229229
return StyleSheet.create({
@@ -247,4 +247,4 @@ function createStyles(props: CheckboxPropTypes) {
247247
});
248248
}
249249

250-
export default asBaseComponent<CheckboxPropTypes>(Checkbox);
250+
export default asBaseComponent<CheckboxProps>(Checkbox);

‎src/components/chip/index.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,16 @@ import Assets from '../../assets';
66
import {asBaseComponent} from '../../commons/new';
77
import {BorderRadiuses, Spacings} from '../../style';
88
// @ts-ignore
9-
import Avatar, {AvatarPropTypes} from '../avatar';
9+
import Avatar, {AvatarProps} from '../avatar';
1010
// @ts-ignore
1111
import Badge, {BadgeProps, BADGE_SIZES} from '../badge';
1212
import Image from '../image';
1313
import Text from '../text';
1414
import TouchableOpacity from '../touchableOpacity';
1515
import View from '../view';
1616

17-
export type ChipPropTypes = ViewProps & TouchableOpacityProps & {
17+
18+
export type ChipProps = ViewProps & TouchableOpacityProps & {
1819
//GENERAL
1920
/**
2021
* Chip's size. Number or a width and height object.
@@ -69,7 +70,7 @@ export type ChipPropTypes = ViewProps & TouchableOpacityProps & {
6970
/**
7071
* Avatar props object
7172
*/
72-
avatarProps?: AvatarPropTypes;
73+
avatarProps?: AvatarProps;
7374

7475
//ICON GENERAL
7576
/**
@@ -115,6 +116,7 @@ export type ChipPropTypes = ViewProps & TouchableOpacityProps & {
115116
*/
116117
dismissContainerStyle?: StyleProp<ImageStyle>;
117118
}
119+
export type ChipPropTypes = ChipProps; //TODO: remove after ComponentPropTypes deprecation;
118120

119121
/**
120122
* @description: Chip component
@@ -145,7 +147,7 @@ const Chip = ({
145147
useSizeAsMinimum,
146148
testID,
147149
...others
148-
}: ChipPropTypes) => {
150+
}: ChipProps) => {
149151

150152
const renderIcon = useCallback((iconPosition) => {
151153
const isLeftIcon = iconPosition === 'left';
@@ -329,4 +331,4 @@ const styles = StyleSheet.create({
329331
}
330332
});
331333

332-
export default asBaseComponent<ChipPropTypes>(Chip);
334+
export default asBaseComponent<ChipProps>(Chip);

‎src/components/floatingButton/index.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {Constants} from '../../helpers';
55
import {asBaseComponent} from '../../commons/new';
66
import {Colors, Spacings} from '../../style';
77
import View from '../view';
8-
import Button, {ButtonPropTypes} from '../button';
8+
import Button, {ButtonProps} from '../button';
99
import Image from '../image';
1010

1111
export interface FloatingButtonProps {
@@ -16,11 +16,11 @@ export interface FloatingButtonProps {
1616
/**
1717
* Button element (all Button's component's props)
1818
*/
19-
button?: PropsWithChildren<ButtonPropTypes>;
19+
button?: PropsWithChildren<ButtonProps>;
2020
/**
2121
* Secondary button element (all Button's component's props)
2222
*/
23-
secondaryButton?: PropsWithChildren<ButtonPropTypes>;
23+
secondaryButton?: PropsWithChildren<ButtonProps>;
2424
/**
2525
* The bottom margin of the button, or secondary button if passed
2626
*/
@@ -56,7 +56,7 @@ class FloatingButton extends PureComponent<FloatingButtonProps> {
5656

5757
initialVisibility?: boolean;
5858
firstLoad: boolean;
59-
59+
6060
constructor(props: FloatingButtonProps) {
6161
super(props);
6262

0 commit comments

Comments
 (0)