Skip to content

Commit 08bed58

Browse files
Inbal-TishInbal-Tish
authored
Avatar and Badge - props deprecation (#1540)
* Badge and Avatar - removing deprecated props and enum, and their usages * fix demo screens * removing Animatable refs * fix prop description
1 parent d72e9c9 commit 08bed58

File tree

14 files changed

+75
-277
lines changed

14 files changed

+75
-277
lines changed

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

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1+
import _ from 'lodash';
12
import React, {Component} from 'react';
23
import {ScrollView, View, Text, StyleSheet, Alert} from 'react-native';
3-
import _ from 'lodash';
44
import {Avatar, AvatarHelper, Colors, Typography} from 'react-native-ui-lib'; //eslint-disable-line
55

6-
const star = require('../../assets/icons/star.png');
76

7+
const star = require('../../assets/icons/star.png');
88
const onlineColor = Colors.green30;
9-
109
const examples = [
1110
{title: 'Custom Background', backgroundColor: Colors.violet60},
1211
{title: 'Empty Avatar with ribbon', ribbonLabel: 'New'},
@@ -25,7 +24,7 @@ const examples = [
2524
uri:
2625
'https://lh3.googleusercontent.com/-cw77lUnOvmI/AAAAAAAAAAI/AAAAAAAAAAA/WMNck32dKbc/s181-c/104220521160525129167.jpg'
2726
},
28-
badgeProps: {size: 'pimpleBig', backgroundColor: Colors.yellow30},
27+
badgeProps: {size: 10, backgroundColor: Colors.yellow30},
2928
badgePosition: 'BOTTOM_RIGHT'
3029
},
3130

@@ -36,7 +35,7 @@ const examples = [
3635
uri:
3736
'https://lh3.googleusercontent.com/-CMM0GmT5tiI/AAAAAAAAAAI/AAAAAAAAAAA/-o9gKbC6FVo/s181-c/111308920004613908895.jpg'
3837
},
39-
badgeProps: {size: 'pimpleBig', backgroundColor: Colors.dark50},
38+
badgeProps: {size: 10, backgroundColor: Colors.dark50},
4039
badgePosition: 'BOTTOM_LEFT'
4140
},
4241
{
@@ -53,7 +52,7 @@ const examples = [
5352
source: {
5453
uri: 'https://randomuser.me/api/portraits/women/24.jpg'
5554
},
56-
badgeProps: {size: 'pimpleHuge', borderWidth: 0, backgroundColor: onlineColor},
55+
badgeProps: {size: 14, borderWidth: 0, backgroundColor: onlineColor},
5756
badgePosition: 'TOP_LEFT'
5857
},
5958
{
@@ -64,7 +63,7 @@ const examples = [
6463
},
6564
badgeProps: {
6665
icon: star,
67-
size: 'pimpleHuge',
66+
size: 14,
6867
borderWidth: 1.5,
6968
borderColor: Colors.white,
7069
iconStyle: {backgroundColor: Colors.yellow20}
@@ -106,19 +105,16 @@ const examples = [
106105
badgePosition: 'BOTTOM_RIGHT',
107106
badgeProps: {
108107
label: '+2',
109-
size: 'large',
108+
size: 24,
110109
borderWidth: 1.5,
111-
borderColor: Colors.white,
110+
borderColor: Colors.white
112111
}
113112
}
114113
];
115114

116115
export default class AvatarsScreen extends Component {
117-
constructor(props) {
118-
super(props);
119-
}
120-
121-
onAvatarPress = (item) => {
116+
117+
onAvatarPress = (item: any) => {
122118
const {title, source, label} = item;
123119
const uri = _.get(source, 'uri');
124120
const isGravatar = !!uri && AvatarHelper.isGravatarUrl(uri);

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

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React, {Component} from 'react';
22
import {ScrollView, StyleSheet} from 'react-native';
33
import {Colors, View, Badge, Button, Text, Image} from 'react-native-ui-lib'; //eslint-disable-line
4+
5+
46
const BadgesSpace = 30;
57
const plusIcon = require('../../assets/icons/chevronUp.png');
68
const minusIcon = require('../../assets/icons/chevronDown.png');
@@ -45,15 +47,15 @@ export default class BadgesScreen extends Component {
4547
</Text>
4648
<View row center style={{alignItems: 'flex-start'}}>
4749
<View center paddingH-10>
48-
<Badge size={'default'} label={this.state.value.toString()} backgroundColor={Colors.red30}/>
50+
<Badge size={20} label={this.state.value.toString()} backgroundColor={Colors.red30}/>
4951
<Badge
5052
label={this.state.value.toString()}
5153
containerStyle={{marginTop: BadgesSpace}}
5254
backgroundColor={Colors.red30}
5355
borderWidth={1}
5456
/>
5557
<Badge
56-
size="small"
58+
size={16}
5759
label={this.state.value.toString()}
5860
containerStyle={{marginTop: BadgesSpace}}
5961
backgroundColor={Colors.red30}
@@ -69,7 +71,7 @@ export default class BadgesScreen extends Component {
6971
borderWidth={2}
7072
borderColor={Colors.white}
7173
/>
72-
<Badge labelFormatterLimit={1} size="small" label={'99999999'} containerStyle={{marginTop: BadgesSpace}}/>
74+
<Badge labelFormatterLimit={1} size={16} label={'99999999'} containerStyle={{marginTop: BadgesSpace}}/>
7375
</View>
7476
</View>
7577

@@ -102,26 +104,26 @@ export default class BadgesScreen extends Component {
102104
style={{justifyContent: 'space-around', alignItems: 'flex-start', width: 140, height: 140}}
103105
>
104106
<Text text80 row>
105-
size={'{\'pimpleSmall\'}'}
107+
size={'{6}'}
106108
</Text>
107-
<Text text80>size={'{\'pimpleBig\'}'}</Text>
109+
<Text text80>size={'{10}'}</Text>
108110
<Text text80 row>
109-
size={'{\'pimpleHuge\'}'}
111+
size={'{14}'}
110112
</Text>
111113
</View>
112114

113115
<View center style={{justifyContent: 'space-around', width: 40, height: 140}}>
114-
<Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.green30} size={'pimpleSmall'}/>
115-
<Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.red30} size={'pimpleBig'}/>
116-
<Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.blue30} size={'pimpleHuge'}/>
116+
<Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.green30} size={6}/>
117+
<Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.red30} size={10}/>
118+
<Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.blue30} size={14}/>
117119
</View>
118120
</View>
119121
<Text text50 marginB-10 row center marginT-25>
120122
Icon Badges
121123
</Text>
122124
<View row paddingH-15>
123125
<View style={styles.iconBadgeColumnContainer}>
124-
<Badge size={'small'} icon={star} borderWidth={1} borderColor={Colors.red30}/>
126+
<Badge size={16} icon={star} borderWidth={1} borderColor={Colors.red30}/>
125127
<Text text80 style={{marginTop: 10}}>
126128
small(16)
127129
</Text>
@@ -135,7 +137,7 @@ export default class BadgesScreen extends Component {
135137
</View>
136138

137139
<View style={styles.iconBadgeColumnContainer}>
138-
<Badge size={'large'} icon={star} iconStyle={{backgroundColor: Colors.red30}}/>
140+
<Badge size={24} icon={star} iconStyle={{backgroundColor: Colors.red30}}/>
139141
<Text text80 style={{marginTop: 10}}>
140142
large(24)
141143
</Text>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,7 @@ class DrawerScreen extends Component {
192192
style={{borderBottomWidth: 1, borderColor: Colors.grey60}}
193193
testID="drawer_item"
194194
>
195-
{this.state.unread && <Badge testID="drawer_item_badge" size={'pimpleSmall'} backgroundColor={Colors.red30} containerStyle={{marginRight: 8}}/>}
195+
{this.state.unread && <Badge testID="drawer_item_badge" size={6} backgroundColor={Colors.red30} containerStyle={{marginRight: 8}}/>}
196196
<Avatar source={{uri: data.thumbnail}}/>
197197
<View marginL-20>
198198
<Text text70R={!this.state.unread} text70BO={this.state.unread}>{data.name}</Text>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,7 @@ export default class TabBarScreen extends Component {
167167

168168
<TabBar style={styles.tabbar} selectedIndex={0} ref={r => (this.tabbar = r)} enableShadow>
169169
<TabBar.Item label="Scroll"/>
170-
<TabBar.Item label="View" badgeProps={{size: 'pimpleSmall'}}/>
170+
<TabBar.Item label="View" badgeProps={{size: 6}}/>
171171
<TabBar.Item label="tab"/>
172172
<TabBar.Item label="bar"/>
173173
<TabBar.Item label="Container"/>

‎generatedTypes/src/components/avatar/index.d.ts

Lines changed: 2 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,6 @@ import React, { PureComponent } from 'react';
22
import { ImageSourcePropType, StyleProp, ViewStyle, ImagePropsBase, ImageStyle, TextStyle, AccessibilityProps } from 'react-native';
33
import { BadgeProps } from '../badge';
44
import { ImageProps } from '../image';
5-
export declare enum StatusModes {
6-
ONLINE = "ONLINE",
7-
OFFLINE = "OFFLINE",
8-
AWAY = "AWAY",
9-
NONE = "NONE"
10-
}
115
export declare enum BadgePosition {
126
TOP_RIGHT = "TOP_RIGHT",
137
TOP_LEFT = "TOP_LEFT",
@@ -116,14 +110,6 @@ export declare type AvatarProps = Pick<AccessibilityProps, 'accessibilityLabel'>
116110
* Custom ribbon
117111
*/
118112
customRibbon?: JSX.Element;
119-
/**
120-
* Determine if to show online badge
121-
*/
122-
isOnline?: boolean;
123-
/**
124-
* AWAY, ONLINE, OFFLINE or NONE mode (if set to a value other then 'NONE' will override isOnline prop)
125-
*/
126-
status?: StatusModes;
127113
/**
128114
* Custom size for the Avatar
129115
*/
@@ -144,21 +130,19 @@ export declare type AvatarProps = Pick<AccessibilityProps, 'accessibilityLabel'>
144130
* @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/AvatarsScreen.tsx
145131
*/
146132
declare class Avatar extends PureComponent<AvatarProps> {
133+
static displayName: string;
147134
styles: ReturnType<typeof createStyles>;
148135
constructor(props: AvatarProps);
149-
static displayName: string;
150-
static modes: typeof StatusModes;
151-
static badgePosition: typeof BadgePosition;
152136
static defaultProps: {
153137
animate: boolean;
154138
size: number;
155139
labelColor: string;
156140
badgePosition: BadgePosition;
157141
};
142+
static badgePosition: typeof BadgePosition;
158143
getContainerStyle(): StyleProp<ViewStyle>;
159144
getInitialsContainer(): StyleProp<ViewStyle>;
160145
getRibbonStyle(): StyleProp<ViewStyle>;
161-
getStatusBadgeColor(status: StatusModes | undefined): string | null;
162146
getBadgeBorderWidth: () => any;
163147
getBadgeColor(): any;
164148
getBadgeSize: () => number;
@@ -279,14 +263,6 @@ declare const _default: React.ComponentClass<Pick<AccessibilityProps, "accessibi
279263
* Custom ribbon
280264
*/
281265
customRibbon?: JSX.Element | undefined;
282-
/**
283-
* Determine if to show online badge
284-
*/
285-
isOnline?: boolean | undefined;
286-
/**
287-
* AWAY, ONLINE, OFFLINE or NONE mode (if set to a value other then 'NONE' will override isOnline prop)
288-
*/
289-
status?: StatusModes | undefined;
290266
/**
291267
* Custom size for the Avatar
292268
*/

‎generatedTypes/src/components/badge/index.d.ts

Lines changed: 6 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,7 @@
11
import React, { PureComponent } from 'react';
22
import { ImageSourcePropType, ImageStyle, StyleProp, TextStyle, TouchableOpacityProps, ViewStyle, ViewProps } from 'react-native';
33
declare const LABEL_FORMATTER_VALUES: readonly [1, 2, 3, 4];
4-
export declare enum BADGE_SIZES {
5-
pimpleSmall = 6,
6-
pimpleBig = 10,
7-
pimpleHuge = 14,
8-
small = 16,
9-
default = 20,
10-
large = 24
11-
}
124
declare type LabelFormatterValues = typeof LABEL_FORMATTER_VALUES[number];
13-
export declare type BadgeSizes = keyof typeof BADGE_SIZES;
145
export declare type BadgeProps = ViewProps & TouchableOpacityProps & {
156
/**
167
* Text to show inside the badge.
@@ -24,7 +15,7 @@ export declare type BadgeProps = ViewProps & TouchableOpacityProps & {
2415
/**
2516
* the badge size (default, small)
2617
*/
27-
size?: BadgeSizes | number;
18+
size?: number;
2819
/**
2920
* Press handler
3021
*/
@@ -76,28 +67,23 @@ export declare type BadgeProps = ViewProps & TouchableOpacityProps & {
7667
* Custom element to render instead of an icon
7768
*/
7869
customElement?: JSX.Element;
79-
/**
80-
* Use to identify the badge in tests
81-
*/
82-
testId?: string;
8370
};
8471
/**
8572
* @description: Round colored badge, typically used to show a number
86-
* @extends: Animatable.View
87-
* @extendsLink: https://github.com/oblador/react-native-animatable
73+
* @extends: View
8874
* @image: https://user-images.githubusercontent.com/33805983/34480753-df7a868a-efb6-11e7-9072-80f5c110a4f3.png
8975
* @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/BadgesScreen.tsx
9076
*/
9177
declare class Badge extends PureComponent<BadgeProps> {
92-
styles: ReturnType<typeof createStyles>;
9378
static displayName: string;
79+
styles: ReturnType<typeof createStyles>;
9480
constructor(props: BadgeProps);
95-
get size(): number | "default" | "small" | "pimpleSmall" | "pimpleBig" | "pimpleHuge" | "large";
9681
getAccessibilityProps(): {
9782
accessible: boolean;
9883
accessibilityRole: string;
9984
accessibilityLabel: string;
10085
};
86+
get size(): number;
10187
isSmallBadge(): boolean;
10288
getBadgeSizeStyle(): any;
10389
getFormattedLabel(): any;
@@ -355,9 +341,9 @@ declare const _default: React.ComponentClass<ViewProps & TouchableOpacityProps &
355341
*/
356342
backgroundColor?: string | undefined;
357343
/**
358-
* the badge size (default, small)
344+
* the badge size
359345
*/
360-
size?: number | "default" | "small" | "pimpleSmall" | "pimpleBig" | "pimpleHuge" | "large" | undefined;
346+
size?: number | undefined;
361347
/**
362348
* Press handler
363349
*/
@@ -409,10 +395,6 @@ declare const _default: React.ComponentClass<ViewProps & TouchableOpacityProps &
409395
* Custom element to render instead of an icon
410396
*/
411397
customElement?: JSX.Element | undefined;
412-
/**
413-
* Use to identify the badge in tests
414-
*/
415-
testId?: string | undefined;
416398
} & {
417399
useCustomTheme?: boolean | undefined;
418400
}, any> & typeof Badge;

0 commit comments

Comments
 (0)