Skip to content

Commit 728c223

Browse files
ArnonZArnonZ
authored
TS/Avatar (#843)
* Converting Avatar to TS * Creating Avatar generated types * Fixing Chip AvatarPropTypes import * Migrate Avatar to TS * Migrate Avatar to TS * Update Chip AvatarPropTypes * Remove old Avatar typings * Fix extractAccessibilityProps getter * Migrate AvatarScreen to TS * Updated Avatar generatd types * Add Avatar export for test * TS fixes * Solve TS size defaultProp issue
1 parent 5d69a78 commit 728c223

File tree

7 files changed

+310
-179
lines changed

7 files changed

+310
-179
lines changed

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -104,11 +104,9 @@ const examples = [
104104
export default class AvatarsScreen extends Component {
105105
constructor(props) {
106106
super(props);
107-
108-
this.onAvatarPress = this.onAvatarPress.bind(this);
109107
}
110108

111-
onAvatarPress(item) {
109+
onAvatarPress = (item) => {
112110
const {title, source, label} = item;
113111
const uri = _.get(source, 'uri');
114112
const isGravatar = !!uri && AvatarHelper.isGravatarUrl(uri);

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

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
import React, { PureComponent } from 'react';
2+
import { ImageSourcePropType, StyleProp, ViewStyle, ImagePropsBase, ImageStyle, TextStyle } from 'react-native';
3+
import { ImageProps } from '../image';
4+
export declare enum StatusModes {
5+
ONLINE = "ONLINE",
6+
OFFLINE = "OFFLINE",
7+
AWAY = "AWAY",
8+
NONE = "NONE"
9+
}
10+
export declare enum BadgePosition {
11+
TOP_RIGHT = "TOP_RIGHT",
12+
TOP_LEFT = "TOP_LEFT",
13+
BOTTOM_RIGHT = "BOTTOM_RIGHT",
14+
BOTTOM_LEFT = "BOTTOM_LEFT"
15+
}
16+
export declare type AvatarPropTypes = {
17+
/**
18+
* Adds fade in animation when Avatar image loads
19+
*/
20+
animate?: boolean;
21+
/**
22+
* Background color for Avatar
23+
*/
24+
backgroundColor?: string;
25+
/**
26+
* Badge location on Avatar
27+
*/
28+
badgePosition?: BadgePosition;
29+
/**
30+
* Badge props passed down to Badge component
31+
*/
32+
badgeProps?: object;
33+
/**
34+
* Additional spacing styles for the container
35+
*/
36+
containerStyle?: StyleProp<ViewStyle>;
37+
/**
38+
* The image source (external or assets)
39+
*/
40+
source?: ImageSourcePropType;
41+
/**
42+
* Image props object
43+
*/
44+
imageProps?: ImageProps;
45+
/**
46+
* Image style object used to pass additional style props
47+
* by components which render image
48+
*/
49+
imageStyle?: ImageStyle;
50+
/**
51+
* Listener-callback for when an image's (uri) loading
52+
* starts (equiv. to Image.onLoadStart()).
53+
*/
54+
onImageLoadStart?: ImagePropsBase["onLoadStart"];
55+
/**
56+
* Listener-callback for when an image's (uri) loading
57+
* either succeeds or fails (equiv. to Image.onLoadEnd()).
58+
*/
59+
onImageLoadEnd?: ImagePropsBase["onLoadEnd"];
60+
/**
61+
* Listener-callback for when an image's (uri) loading
62+
* fails (equiv. to Image.onError()).
63+
*/
64+
onImageLoadError?: ImagePropsBase["onError"];
65+
/**
66+
* Label that can represent initials
67+
*/
68+
label?: string;
69+
/**
70+
* The label color
71+
*/
72+
labelColor?: string;
73+
/**
74+
* ribbon label to display on the avatar
75+
*/
76+
ribbonLabel?: string;
77+
/**
78+
* ribbon custom style
79+
*/
80+
ribbonStyle?: StyleProp<ViewStyle>;
81+
/**
82+
* ribbon label custom style
83+
*/
84+
ribbonLabelStyle?: StyleProp<TextStyle>;
85+
/**
86+
* Custom ribbon
87+
*/
88+
customRibbon?: JSX.Element;
89+
/**
90+
* Determine if to show online badge
91+
*/
92+
isOnline?: boolean;
93+
/**
94+
* AWAY, ONLINE, OFFLINE or NONE mode (if set to a value other then 'NONE' will override isOnline prop)
95+
*/
96+
status?: StatusModes;
97+
/**
98+
* Custom size for the Avatar
99+
*/
100+
size: number;
101+
/**
102+
* Press handler
103+
*/
104+
onPress?: (props: any) => void;
105+
/**
106+
* Used as a testing identifier
107+
*/
108+
testID?: string;
109+
};
110+
/**
111+
* @description: Avatar component for displaying user profile images
112+
* @extends: TouchableOpacity
113+
* @extendsnotes: (when passing onPress)
114+
* @extendslink: docs/TouchableOpacity
115+
* @image: https://user-images.githubusercontent.com/33805983/34480603-197d7f64-efb6-11e7-9feb-db8ba756f055.png
116+
* @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/AvatarsScreen.js
117+
*/
118+
declare class Avatar extends PureComponent<AvatarPropTypes> {
119+
styles: ReturnType<typeof createStyles>;
120+
constructor(props: AvatarPropTypes);
121+
static displayName: string;
122+
static modes: typeof StatusModes;
123+
static badgePosition: typeof BadgePosition;
124+
static defaultProps: {
125+
animate: boolean;
126+
backgroundColor: string;
127+
size: number;
128+
labelColor: string;
129+
badgePosition: BadgePosition;
130+
};
131+
getContainerStyle(): StyleProp<ViewStyle>;
132+
getInitialsContainer(): StyleProp<ViewStyle>;
133+
getRibbonStyle(): StyleProp<ViewStyle>;
134+
getStatusBadgeColor(status: StatusModes | undefined): string | null;
135+
getBadgeBorderWidth: () => any;
136+
getBadgeColor(): any;
137+
getBadgeSize: () => any;
138+
getBadgePosition(): {
139+
[x: string]: string | number;
140+
position: string;
141+
};
142+
renderBadge(): JSX.Element | undefined;
143+
renderRibbon(): JSX.Element | undefined;
144+
renderImage(): JSX.Element | undefined;
145+
render(): JSX.Element;
146+
}
147+
declare function createStyles(props: AvatarPropTypes): {
148+
initialsContainerWithInset: {
149+
top: number;
150+
right: number;
151+
bottom: number;
152+
left: number;
153+
};
154+
initials: {
155+
color: string | undefined;
156+
backgroundColor: string;
157+
};
158+
ribbon: {
159+
backgroundColor: string;
160+
paddingHorizontal: number;
161+
paddingVertical: number;
162+
};
163+
};
164+
export { Avatar };
165+
declare const _default: React.ComponentClass<AvatarPropTypes, any>;
166+
export default _default;

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import { StyleProp, ViewStyle, ViewProps, TouchableOpacityProps, ImageStyle, TextStyle, ImageSourcePropType } from 'react-native';
3-
import { AvatarProps, BadgeProps } from 'typings';
3+
import { BadgeProps } from 'typings';
4+
import { AvatarPropTypes } from '../avatar';
45
export declare type ChipPropTypes = ViewProps & TouchableOpacityProps & {
56
/**
67
* Chip's size. Number or a width and height object.
@@ -56,7 +57,7 @@ export declare type ChipPropTypes = ViewProps & TouchableOpacityProps & {
5657
/**
5758
* Avatar props object
5859
*/
59-
avatarProps?: AvatarProps;
60+
avatarProps?: AvatarPropTypes;
6061
/**
6162
* Icon's source
6263
*/

0 commit comments

Comments
 (0)