Skip to content

Commit 9ad3665

Browse files
vishalnarkhedevishalnarkhede
committed
CRNS-49: Adding some examples to components
1 parent 3593dfb commit 9ad3665

File tree

8 files changed

+361
-150
lines changed

8 files changed

+361
-150
lines changed

‎src/components/CommandsItem.js‎

Lines changed: 29 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22
import { Text } from 'react-native';
33
import styled from '@stream-io/styled-components';
44
import PropTypes from 'prop-types';
5+
import { themed } from '../styles/theme';
56

67
const Container = styled.View`
78
flex-direction: column;
@@ -20,26 +21,33 @@ const Title = styled.Text`
2021
${({ theme }) => theme.messageInput.suggestions.command.title.css}
2122
`;
2223

23-
export class CommandsItem extends React.Component {
24-
static propTypes = {
25-
name: PropTypes.string,
26-
args: PropTypes.string,
27-
description: PropTypes.string,
28-
};
24+
/**
25+
* @example ./docs/CommandsItem.md
26+
* @extends PureComponent
27+
*/
28+
export const CommandsItem = themed(
29+
class CommandsItem extends React.Component {
30+
static themePath = 'messageInput.suggestions.command';
31+
static propTypes = {
32+
name: PropTypes.string,
33+
args: PropTypes.string,
34+
description: PropTypes.string,
35+
};
2936

30-
render() {
31-
const {
32-
item: { name, args, description },
33-
} = this.props;
37+
render() {
38+
const {
39+
item: { name, args, description },
40+
} = this.props;
3441

35-
return (
36-
<Container>
37-
<Top>
38-
<Title>/{name} </Title>
39-
<Text>{args}</Text>
40-
</Top>
41-
<Text>{description}</Text>
42-
</Container>
43-
);
44-
}
45-
}
42+
return (
43+
<Container>
44+
<Top>
45+
<Title>/{name} </Title>
46+
<Text>{args}</Text>
47+
</Top>
48+
<Text>{description}</Text>
49+
</Container>
50+
);
51+
}
52+
},
53+
);

‎src/components/MessageNotification.js‎

Lines changed: 54 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
22
import { Animated } from 'react-native';
33
import PropTypes from 'prop-types';
44
import styled from '@stream-io/styled-components';
5+
import { themed } from '../styles/theme';
56

67
const Container = styled.TouchableOpacity`
78
display: flex;
@@ -14,69 +15,74 @@ const Container = styled.TouchableOpacity`
1415
margin-bottom: 0;
1516
border-radius: 13px;
1617
background-color: ${({ theme }) => theme.colors.primary};
17-
color: white;
1818
transform: translateY(9px);
19-
${({ theme }) => theme.messageList.messageNotification.css}
19+
${({ theme }) => theme.messageList.messageNotification.container.css}
2020
`;
2121

2222
const MessageNotificationText = styled.Text`
2323
color: white;
2424
font-size: 12px;
2525
font-weight: 600;
26-
${({ theme }) => theme.messageList.messageNotificationText.css}
26+
${({ theme }) => theme.messageList.messageNotification.text.css}
2727
`;
28-
29-
export class MessageNotification extends PureComponent {
30-
constructor(props) {
31-
super(props);
32-
this.state = {
33-
notificationOpacity: new Animated.Value(0),
28+
/**
29+
* @example ./docs/MessageNotification.md
30+
* @extends PureComponent
31+
*/
32+
export const MessageNotification = themed(
33+
class MessageNotification extends PureComponent {
34+
static themePath = 'messageList.messageNotification';
35+
constructor(props) {
36+
super(props);
37+
this.state = {
38+
notificationOpacity: new Animated.Value(0),
39+
};
40+
}
41+
static propTypes = {
42+
/** If we should show the notification or not */
43+
showNotification: PropTypes.bool,
44+
/** Onclick handler */
45+
onPress: PropTypes.func.isRequired,
3446
};
35-
}
36-
static propTypes = {
37-
/** If we should show the notification or not */
38-
showNotification: PropTypes.bool,
39-
/** Onclick handler */
40-
onPress: PropTypes.func.isRequired,
41-
};
42-
43-
static defaultProps = {
44-
showNotification: true,
45-
};
4647

47-
componentDidMount() {
48-
Animated.timing(this.state.notificationOpacity, {
49-
toValue: this.props.showNotification ? 1 : 0,
50-
duration: 500,
51-
}).start();
52-
}
48+
static defaultProps = {
49+
showNotification: true,
50+
};
5351

54-
componentDidUpdate(prevProps) {
55-
if (prevProps.showNotification !== this.props.showNotification) {
52+
componentDidMount() {
5653
Animated.timing(this.state.notificationOpacity, {
5754
toValue: this.props.showNotification ? 1 : 0,
5855
duration: 500,
5956
}).start();
6057
}
61-
}
6258

63-
render() {
64-
if (!this.props.showNotification) {
65-
return null;
66-
} else {
67-
return (
68-
<Animated.View
69-
style={{
70-
position: 'absolute',
71-
bottom: 0,
72-
opacity: this.state.notificationOpacity,
73-
}}
74-
>
75-
<Container onPress={this.props.onPress}>
76-
<MessageNotificationText>New Messages</MessageNotificationText>
77-
</Container>
78-
</Animated.View>
79-
);
59+
componentDidUpdate(prevProps) {
60+
if (prevProps.showNotification !== this.props.showNotification) {
61+
Animated.timing(this.state.notificationOpacity, {
62+
toValue: this.props.showNotification ? 1 : 0,
63+
duration: 500,
64+
}).start();
65+
}
66+
}
67+
68+
render() {
69+
if (!this.props.showNotification) {
70+
return null;
71+
} else {
72+
return (
73+
<Animated.View
74+
style={{
75+
position: 'absolute',
76+
bottom: 0,
77+
opacity: this.state.notificationOpacity,
78+
}}
79+
>
80+
<Container onPress={this.props.onPress}>
81+
<MessageNotificationText>New Messages</MessageNotificationText>
82+
</Container>
83+
</Animated.View>
84+
);
85+
}
8086
}
81-
}
82-
}
87+
},
88+
);

‎src/components/ReactionList.js‎

Lines changed: 86 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Text } from 'react-native';
33
import styled from '@stream-io/styled-components';
44
import { emojiData } from '../utils';
55
import PropTypes from 'prop-types';
6+
import { themed } from '../styles/theme';
67

78
import leftTail from '../images/reactionlist/left-tail.png';
89
import leftCenter from '../images/reactionlist/left-center.png';
@@ -81,79 +82,88 @@ const Reactions = styled.View`
8182
flex-direction: row;
8283
`;
8384

84-
export class ReactionList extends React.PureComponent {
85-
constructor(props) {
86-
super(props);
87-
}
88-
89-
static propTypes = {
90-
latestReactions: PropTypes.array,
91-
openReactionSelector: PropTypes.func,
92-
getTotalReactionCount: PropTypes.func,
93-
visible: PropTypes.bool,
94-
position: PropTypes.string,
95-
};
96-
97-
_renderReactions = (reactions) => {
98-
const reactionsByType = {};
99-
reactions.map((item) => {
100-
if (reactions[item.type] === undefined) {
101-
return (reactionsByType[item.type] = [item]);
102-
} else {
103-
return (reactionsByType[item.type] = [
104-
...reactionsByType[item.type],
105-
item,
106-
]);
107-
}
108-
});
109-
110-
const emojiDataByType = {};
111-
emojiData.forEach((e) => (emojiDataByType[e.id] = e));
112-
113-
const reactionTypes = emojiData.map((e) => e.id);
114-
return Object.keys(reactionsByType).map((type) =>
115-
reactionTypes.indexOf(type) > -1 ? (
116-
<Text key={type}>{emojiDataByType[type].icon}</Text>
117-
) : null,
118-
);
119-
};
120-
121-
render() {
122-
const {
123-
latestReactions,
124-
openReactionSelector,
125-
getTotalReactionCount,
126-
visible,
127-
position,
128-
} = this.props;
129-
return (
130-
<TouchableWrapper
131-
position={position}
132-
onPress={openReactionSelector}
133-
activeOpacity={1}
134-
>
135-
<Container visible={visible}>
136-
<Reactions>{this._renderReactions(latestReactions)}</Reactions>
137-
<ReactionCount reactionCounts={getTotalReactionCount()}>
138-
{getTotalReactionCount()}
139-
</ReactionCount>
140-
</Container>
141-
<ImageWrapper visible={visible}>
142-
{position === 'left' ? (
143-
<React.Fragment>
144-
<LeftTail source={leftTail} />
145-
<LeftCenter source={leftCenter} resizeMode="stretch" />
146-
<LeftEnd source={leftEnd} />
147-
</React.Fragment>
148-
) : (
149-
<React.Fragment>
150-
<RightEnd source={rightEnd} />
151-
<RightCenter source={rightCenter} resizeMode="stretch" />
152-
<RightTail source={rightTail} />
153-
</React.Fragment>
154-
)}
155-
</ImageWrapper>
156-
</TouchableWrapper>
157-
);
158-
}
159-
}
85+
/**
86+
* @example ./docs/ReactionList.md
87+
* @extends PureComponent
88+
*/
89+
90+
export const ReactionList = themed(
91+
class ReactionList extends React.PureComponent {
92+
static themePath = 'message.reactionList';
93+
94+
constructor(props) {
95+
super(props);
96+
}
97+
98+
static propTypes = {
99+
latestReactions: PropTypes.array,
100+
openReactionSelector: PropTypes.func,
101+
getTotalReactionCount: PropTypes.func,
102+
visible: PropTypes.bool,
103+
position: PropTypes.string,
104+
};
105+
106+
_renderReactions = (reactions) => {
107+
const reactionsByType = {};
108+
reactions.map((item) => {
109+
if (reactions[item.type] === undefined) {
110+
return (reactionsByType[item.type] = [item]);
111+
} else {
112+
return (reactionsByType[item.type] = [
113+
...reactionsByType[item.type],
114+
item,
115+
]);
116+
}
117+
});
118+
119+
const emojiDataByType = {};
120+
emojiData.forEach((e) => (emojiDataByType[e.id] = e));
121+
122+
const reactionTypes = emojiData.map((e) => e.id);
123+
return Object.keys(reactionsByType).map((type) =>
124+
reactionTypes.indexOf(type) > -1 ? (
125+
<Text key={type}>{emojiDataByType[type].icon}</Text>
126+
) : null,
127+
);
128+
};
129+
130+
render() {
131+
const {
132+
latestReactions,
133+
openReactionSelector,
134+
getTotalReactionCount,
135+
visible,
136+
position,
137+
} = this.props;
138+
return (
139+
<TouchableWrapper
140+
position={position}
141+
onPress={openReactionSelector}
142+
activeOpacity={1}
143+
>
144+
<Container visible={visible}>
145+
<Reactions>{this._renderReactions(latestReactions)}</Reactions>
146+
<ReactionCount reactionCounts={getTotalReactionCount()}>
147+
{getTotalReactionCount()}
148+
</ReactionCount>
149+
</Container>
150+
<ImageWrapper visible={visible}>
151+
{position === 'left' ? (
152+
<React.Fragment>
153+
<LeftTail source={leftTail} />
154+
<LeftCenter source={leftCenter} resizeMode="stretch" />
155+
<LeftEnd source={leftEnd} />
156+
</React.Fragment>
157+
) : (
158+
<React.Fragment>
159+
<RightEnd source={rightEnd} />
160+
<RightCenter source={rightCenter} resizeMode="stretch" />
161+
<RightTail source={rightTail} />
162+
</React.Fragment>
163+
)}
164+
</ImageWrapper>
165+
</TouchableWrapper>
166+
);
167+
}
168+
},
169+
);

‎src/components/docs/CommandsItem.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
```js
2+
<CommandsItem
3+
item={{
4+
name: 'giphy',
5+
args: 'name',
6+
description: 'type a name',
7+
}}
8+
/>
9+
```

‎src/components/docs/MessageNotification.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
```js
2+
const View = require('react-native').View;
3+
<View style={{ width: 90 }}>
4+
<MessageNotification showNotification={true} onPress={() => {}} />
5+
</View>;
6+
```

0 commit comments

Comments
 (0)