Skip to content

Commit 1c75dc1

Browse files
vishalnarkhedevishalnarkhede
authored
Merge pull request #260 from GetStream/vishal/RN-2.0
Merge RN2.0 branch to master
2 parents d581ef6 + dcb41a4 commit 1c75dc1

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

60 files changed

+2803
-373
lines changed

‎.eslintrc.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,8 @@
2525
"react/prop-types": 0,
2626
"no-var": 2,
2727
"linebreak-style": [2, "unix"],
28-
"semi": [1, "always"]
28+
"semi": [1, "always"],
29+
"jsx-quotes": ["error", "prefer-single"]
2930
},
3031
"env": {
3132
"es6": true,

‎.prettierrc‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
2-
"singleQuote": true,
3-
"trailingComma": "all",
42
"arrowParens": "always",
5-
"tabWidth": 2
3+
"jsxSingleQuote": true,
4+
"singleQuote": true,
5+
"tabWidth": 2,
6+
"trailingComma": "all"
67
}

‎babel.config.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
module.exports = {
2+
presets: ['@babel/env', '@babel/react', '@babel/preset-flow'],
3+
plugins: [
4+
'macros',
5+
'@babel/proposal-class-properties',
6+
'@babel/transform-runtime',
7+
'babel-plugin-styled-components',
8+
],
9+
env: {
10+
production: {
11+
presets: [
12+
[
13+
'@babel/env',
14+
{
15+
modules: false,
16+
},
17+
],
18+
],
19+
},
20+
},
21+
overrides: [
22+
{
23+
compact: false,
24+
},
25+
],
26+
};

‎jest-setup.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { registerNativeHandlers } from './src/native';
2+
3+
registerNativeHandlers({
4+
NetInfo: {
5+
addEventListener: () => {},
6+
fetch: () =>
7+
new Promise((resolve) => {
8+
resolve();
9+
}),
10+
},
11+
pickImage: () => null,
12+
pickDocument: () => null,
13+
});

‎jest.config.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
const jestPreset = require('@testing-library/react-native/jest-preset');
2+
3+
module.exports = Object.assign(jestPreset, {
4+
testRegex: [
5+
/**
6+
* If you want to test single file, mention it here
7+
* e.g.,
8+
* "src/components/ChannelList/__tests__/ChannelList.test.js",
9+
* "src/components/MessageList/__tests__/MessageList.test.js"
10+
*/
11+
],
12+
testPathIgnorePatterns: ['/node_modules/', '/examples/', '__snapshots__'],
13+
moduleNameMapper: {
14+
'mock-builders(.*)$': '<rootDir>/src/mock-builders$1',
15+
'@stream-io/styled-components':
16+
'<rootDir>/node_modules/@stream-io/styled-components/native/dist/styled-components.native.cjs.js',
17+
},
18+
setupFiles: [...jestPreset.setupFiles, require.resolve('./jest-setup.js')],
19+
});

‎package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,9 @@
101101
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
102102
"@babel/polyfill": "^7.4.4",
103103
"@babel/preset-env": "^7.4.3",
104+
"@babel/preset-flow": "^7.10.4",
104105
"@babel/preset-react": "^7.0.0",
106+
"@testing-library/react-native": "^5.0.3",
105107
"@types/react": "^16.8.23",
106108
"@types/react-native": "^0.57.0",
107109
"ast-pretty-print": "^2.0.1",
@@ -121,8 +123,10 @@
121123
"prettier": "^1.16.4",
122124
"react": "^16.5.0",
123125
"react-dom": "^16.8.6",
126+
"react-native": "0.61.5",
124127
"react-native-web": "^0.11.4",
125128
"react-styleguidist": "^8.0.6",
129+
"react-test-renderer": "^16.13.1",
126130
"rollup": "^0.68.2",
127131
"rollup-plugin-babel": "^4.0.3",
128132
"rollup-plugin-commonjs": "^9.1.8",

‎src/components/Attachment/Card.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ class Card extends React.Component {
133133
>
134134
{Header && <Header {...this.props} />}
135135
{Cover && <Cover {...this.props} />}
136-
{uri && !Cover && <CardCover source={{ uri }} resizeMode="cover" />}
136+
{uri && !Cover && <CardCover source={{ uri }} resizeMode='cover' />}
137137
{Footer ? (
138138
<Footer {...this.props} />
139139
) : (

‎src/components/Attachment/FileAttachment.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ const FileAttachment = ({
7979
mimeType={attachment.mime_type}
8080
/>
8181
<FileDetails>
82-
<FileTitle ellipsizeMode="tail" numberOfLines={2}>
82+
<FileTitle ellipsizeMode='tail' numberOfLines={2}>
8383
{attachment.title}
8484
</FileTitle>
8585
<FileSize>{attachment.file_size} KB</FileSize>
@@ -100,7 +100,7 @@ FileAttachment.propTypes = {
100100
attachment: PropTypes.object.isRequired,
101101
/**
102102
* Position of message. 'right' | 'left'
103-
* 'right' message belongs with current user while 'left' message belonds to other users.
103+
* 'right' message belongs with current user while 'left' message belongs to other users.
104104
* */
105105
alignment: PropTypes.string,
106106
/** Handler for actions. Actions in combination with attachments can be used to build [commands](https://getstream.io/chat/docs/#channel_commands). */

‎src/components/Attachment/Gallery.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ class Gallery extends React.PureComponent {
115115
width: 100 + '%',
116116
height: 100 + '%',
117117
}}
118-
resizeMode="cover"
118+
resizeMode='cover'
119119
source={{ uri: images[0].url }}
120120
/>
121121
</Single>
@@ -183,7 +183,7 @@ class Gallery extends React.PureComponent {
183183
width: 100 + '%',
184184
height: 100 + '%',
185185
}}
186-
resizeMode="cover"
186+
resizeMode='cover'
187187
source={{ uri: images[3].url }}
188188
/>
189189
<View
@@ -218,7 +218,7 @@ class Gallery extends React.PureComponent {
218218
width: 100 + '%',
219219
height: 100 + '%',
220220
}}
221-
resizeMode="cover"
221+
resizeMode='cover'
222222
source={{ uri: image.url }}
223223
/>
224224
)}

‎src/components/Avatar/Avatar.js‎

Lines changed: 56 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { useMemo, useState } from 'react';
22
import PropTypes from 'prop-types';
33

44
import styled from '@stream-io/styled-components';
@@ -8,100 +8,89 @@ const BASE_AVATAR_FALLBACK_TEXT_SIZE = 14;
88
const BASE_AVATAR_SIZE = 32;
99

1010
const AvatarContainer = styled.View`
11-
display: flex;
1211
align-items: center;
1312
${({ theme }) => theme.avatar.container.css}
1413
`;
1514

1615
const AvatarImage = styled.Image`
17-
border-radius: ${({ size }) => size / 2};
18-
width: ${({ size }) => size};
19-
height: ${({ size }) => size};
16+
border-radius: ${({ size }) => size / 2}px;
17+
height: ${({ size }) => size}px;
18+
width: ${({ size }) => size}px;
2019
${({ theme }) => theme.avatar.image.css}
2120
`;
2221

2322
const AvatarFallback = styled.View`
24-
border-radius: ${({ size }) => size / 2};
25-
width: ${({ size }) => size};
26-
height: ${({ size }) => size};
23+
align-items: center;
2724
background-color: ${({ theme }) => theme.colors.primary};
25+
border-radius: ${({ size }) => size / 2}px;
26+
height: ${({ size }) => size}px;
2827
justify-content: center;
29-
align-items: center;
28+
width: ${({ size }) => size}px;
3029
${({ theme }) => theme.avatar.fallback.css}
3130
`;
3231

3332
const AvatarText = styled.Text`
3433
color: ${({ theme }) => theme.colors.textLight};
35-
text-transform: uppercase;
36-
font-size: ${({ fontSize }) => fontSize};
34+
font-size: ${({ fontSize }) => fontSize}px;
3735
font-weight: bold;
36+
text-transform: uppercase;
3837
${({ theme }) => theme.avatar.text.css}
3938
`;
4039

40+
const getInitials = (fullName) =>
41+
fullName
42+
? fullName
43+
.split(' ')
44+
.slice(0, 2)
45+
.map((name) => name.charAt(0))
46+
: null;
47+
4148
/**
4249
* Avatar - A round avatar image with fallback to user's initials
4350
*
4451
* @example ../docs/Avatar.md
45-
* @extends PureComponent
4652
*/
47-
class Avatar extends React.PureComponent {
48-
static themePath = 'avatar';
49-
static propTypes = {
50-
/** image url */
51-
image: PropTypes.string,
52-
/** name of the picture, used for title tag fallback */
53-
name: PropTypes.string,
54-
/** size in pixels */
55-
size: PropTypes.number,
56-
/** Style overrides */
57-
style: PropTypes.object,
58-
};
59-
60-
static defaultProps = {
61-
size: 32,
62-
};
63-
64-
state = {
65-
imageError: false,
66-
};
53+
const Avatar = ({ image, name, size = BASE_AVATAR_SIZE }) => {
54+
const [imageError, setImageError] = useState(false);
6755

68-
setError = () => {
69-
this.setState({
70-
imageError: true,
71-
});
72-
};
56+
const fontSize = useMemo(
57+
() => BASE_AVATAR_FALLBACK_TEXT_SIZE * (size / BASE_AVATAR_SIZE),
58+
[size],
59+
);
60+
const initials = useMemo(() => getInitials(name), [name]);
7361

74-
getInitials = (name) =>
75-
name
76-
? name
77-
.split(' ')
78-
.slice(0, 2)
79-
.map((name) => name.charAt(0))
80-
: null;
62+
return (
63+
<AvatarContainer>
64+
{image && !imageError ? (
65+
<AvatarImage
66+
accessibilityLabel='initials'
67+
onError={() => setImageError(true)}
68+
resizeMethod='resize'
69+
size={size}
70+
source={{ uri: image }}
71+
testID='avatar-image'
72+
/>
73+
) : (
74+
<AvatarFallback size={size}>
75+
<AvatarText fontSize={fontSize} testID='avatar-text'>
76+
{initials}
77+
</AvatarText>
78+
</AvatarFallback>
79+
)}
80+
</AvatarContainer>
81+
);
82+
};
8183

82-
render() {
83-
const { size, name, image } = this.props;
84-
const initials = this.getInitials(name);
85-
const fontSize = BASE_AVATAR_FALLBACK_TEXT_SIZE * (size / BASE_AVATAR_SIZE);
84+
Avatar.propTypes = {
85+
/** image url */
86+
image: PropTypes.string,
87+
/** name of the picture, used for title tag fallback */
88+
name: PropTypes.string,
89+
/** size in pixels */
90+
size: PropTypes.number,
91+
};
8692

87-
return (
88-
<AvatarContainer>
89-
{image && !this.state.imageError ? (
90-
<AvatarImage
91-
size={size}
92-
source={{ uri: image }}
93-
accessibilityLabel="initials"
94-
resizeMethod="resize"
95-
onError={this.setError}
96-
/>
97-
) : (
98-
<AvatarFallback size={size}>
99-
<AvatarText fontSize={fontSize}>{initials}</AvatarText>
100-
</AvatarFallback>
101-
)}
102-
</AvatarContainer>
103-
);
104-
}
105-
}
93+
Avatar.themePath = 'avatar';
10694

95+
// TODO: remove HOC and use a theme context provider
10796
export default themed(Avatar);

0 commit comments

Comments
 (0)