Skip to content

Commit f2d4665

Browse files
vishalnarkhedevishalnarkhede
committed
Separating all input buttons to a different component - InputButtons
1 parent 704c31d commit f2d4665

File tree

6 files changed

+266
-74
lines changed

6 files changed

+266
-74
lines changed

‎src/components/Channel/Channel.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ import { AttachButton as AttachButtonDefault } from '../MessageInput/AttachButto
5858
import { CommandsButton as CommandsButtonDefault } from '../MessageInput/CommandsButton';
5959
import { FileUploadPreview as FileUploadPreviewDefault } from '../MessageInput/FileUploadPreview';
6060
import { ImageUploadPreview as ImageUploadPreviewDefault } from '../MessageInput/ImageUploadPreview';
61+
import { InputButtons as InputButtonsDefault } from '../MessageInput/InputButtons';
6162
import { MoreOptionsButton as MoreOptionsButtonDefault } from '../MessageInput/MoreOptionsButton';
6263
import { SendButton as SendButtonDefault } from '../MessageInput/SendButton';
6364
import { ShowThreadMessageInChannelButton as ShowThreadMessageInChannelButtonDefault } from '../MessageInput/ShowThreadMessageInChannelButton';
@@ -433,7 +434,7 @@ const ChannelWithContext = <
433434
initialValue,
434435
InlineUnreadIndicator = InlineUnreadIndicatorDefault,
435436
Input,
436-
InputOptions,
437+
InputButtons = InputButtonsDefault,
437438
keyboardBehavior,
438439
KeyboardCompatibleView = KeyboardCompatibleViewDefault,
439440
keyboardVerticalOffset,
@@ -1419,7 +1420,7 @@ const ChannelWithContext = <
14191420
ImageUploadPreview,
14201421
initialValue,
14211422
Input,
1422-
InputOptions,
1423+
InputButtons,
14231424
maxNumberOfFiles,
14241425
MoreOptionsButton,
14251426
numberOfLines,

‎src/components/Channel/hooks/useCreateInputMessageInputContext.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export const useCreateInputMessageInputContext = <
3939
ImageUploadPreview,
4040
initialValue,
4141
Input,
42-
InputOptions,
42+
InputButtons,
4343
maxMessageLength,
4444
maxNumberOfFiles,
4545
MoreOptionsButton,
@@ -89,7 +89,7 @@ export const useCreateInputMessageInputContext = <
8989
ImageUploadPreview,
9090
initialValue,
9191
Input,
92-
InputOptions,
92+
InputButtons,
9393
maxMessageLength,
9494
maxNumberOfFiles,
9595
MoreOptionsButton,

‎src/components/MessageInput/InputButtons.tsx‎

Lines changed: 215 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
import React from 'react';
2+
import { StyleSheet, View } from 'react-native';
3+
import {
4+
MessageInputContextValue,
5+
useMessageInputContext,
6+
} from '../../contexts';
7+
import { useTheme } from '../../contexts/themeContext/ThemeContext';
8+
9+
import type {
10+
DefaultAttachmentType,
11+
DefaultChannelType,
12+
DefaultCommandType,
13+
DefaultEventType,
14+
DefaultMessageType,
15+
DefaultReactionType,
16+
DefaultUserType,
17+
UnknownType,
18+
} from '../../types/types';
19+
20+
const styles = StyleSheet.create({
21+
attachButtonContainer: { paddingRight: 10 },
22+
});
23+
24+
export type InputButtonsProps<
25+
At extends DefaultAttachmentType = DefaultAttachmentType,
26+
Ch extends UnknownType = DefaultChannelType,
27+
Co extends string = DefaultCommandType,
28+
Ev extends UnknownType = DefaultEventType,
29+
Me extends UnknownType = DefaultMessageType,
30+
Re extends UnknownType = DefaultReactionType,
31+
Us extends UnknownType = DefaultUserType
32+
> = Partial<InputButtonsWithContextProps<At, Ch, Co, Ev, Me, Re, Us>>;
33+
34+
export type InputButtonsWithContextProps<
35+
At extends DefaultAttachmentType = DefaultAttachmentType,
36+
Ch extends UnknownType = DefaultChannelType,
37+
Co extends string = DefaultCommandType,
38+
Ev extends UnknownType = DefaultEventType,
39+
Me extends UnknownType = DefaultMessageType,
40+
Re extends UnknownType = DefaultReactionType,
41+
Us extends UnknownType = DefaultUserType
42+
> = Pick<
43+
MessageInputContextValue<At, Ch, Co, Ev, Me, Re, Us>,
44+
| 'AttachButton'
45+
| 'CommandsButton'
46+
| 'giphyActive'
47+
| 'hasCommands'
48+
| 'hasFilePicker'
49+
| 'hasImagePicker'
50+
| 'MoreOptionsButton'
51+
| 'setShowMoreOptions'
52+
| 'showMoreOptions'
53+
| 'text'
54+
| 'uploadsEnabled'
55+
> & {
56+
closeAttachmentPicker?: () => void;
57+
openAttachmentPicker?: () => void;
58+
openCommandsPicker?: () => void;
59+
toggleAttachmentPicker?: () => void;
60+
};
61+
62+
export const InputButtonsWithContext = <
63+
At extends DefaultAttachmentType = DefaultAttachmentType,
64+
Ch extends UnknownType = DefaultChannelType,
65+
Co extends string = DefaultCommandType,
66+
Ev extends UnknownType = DefaultEventType,
67+
Me extends UnknownType = DefaultMessageType,
68+
Re extends UnknownType = DefaultReactionType,
69+
Us extends UnknownType = DefaultUserType
70+
>(
71+
props: InputButtonsWithContextProps<At, Ch, Co, Ev, Me, Re, Us>,
72+
) => {
73+
const {
74+
AttachButton,
75+
CommandsButton,
76+
giphyActive,
77+
hasCommands,
78+
hasFilePicker,
79+
hasImagePicker,
80+
MoreOptionsButton,
81+
openCommandsPicker,
82+
setShowMoreOptions,
83+
showMoreOptions,
84+
text,
85+
toggleAttachmentPicker,
86+
uploadsEnabled,
87+
} = props;
88+
89+
const {
90+
theme: {
91+
messageInput: { attachButtonContainer, commandsButtonContainer },
92+
},
93+
} = useTheme();
94+
95+
if (giphyActive) {
96+
return null;
97+
}
98+
99+
return (
100+
<>
101+
{!showMoreOptions && (hasImagePicker || hasFilePicker) && hasCommands ? (
102+
<MoreOptionsButton handleOnPress={() => setShowMoreOptions(true)} />
103+
) : (
104+
<>
105+
{(hasImagePicker || hasFilePicker) && uploadsEnabled !== false && (
106+
<View
107+
style={[
108+
hasCommands ? styles.attachButtonContainer : undefined,
109+
attachButtonContainer,
110+
]}
111+
>
112+
<AttachButton handleOnPress={toggleAttachmentPicker} />
113+
</View>
114+
)}
115+
{hasCommands && !text && (
116+
<View style={commandsButtonContainer}>
117+
<CommandsButton handleOnPress={openCommandsPicker} />
118+
</View>
119+
)}
120+
</>
121+
)}
122+
</>
123+
);
124+
};
125+
const areEqual = <
126+
At extends UnknownType = DefaultAttachmentType,
127+
Ch extends UnknownType = DefaultChannelType,
128+
Co extends string = DefaultCommandType,
129+
Ev extends UnknownType = DefaultEventType,
130+
Me extends UnknownType = DefaultMessageType,
131+
Re extends UnknownType = DefaultReactionType,
132+
Us extends UnknownType = DefaultUserType
133+
>(
134+
prevProps: InputButtonsWithContextProps<At, Ch, Co, Ev, Me, Re, Us>,
135+
nextProps: InputButtonsWithContextProps<At, Ch, Co, Ev, Me, Re, Us>,
136+
) => {
137+
if (prevProps.hasImagePicker !== nextProps.hasImagePicker) {
138+
return false;
139+
}
140+
141+
if (prevProps.hasFilePicker !== nextProps.hasFilePicker) {
142+
return false;
143+
}
144+
145+
if (prevProps.hasCommands !== nextProps.hasCommands) {
146+
return false;
147+
}
148+
149+
if (prevProps.uploadsEnabled !== nextProps.uploadsEnabled) {
150+
return false;
151+
}
152+
153+
if (prevProps.showMoreOptions !== nextProps.showMoreOptions) {
154+
return false;
155+
}
156+
157+
if (
158+
(!prevProps.text && nextProps.text) ||
159+
(prevProps.text && !nextProps.text)
160+
) {
161+
return false;
162+
}
163+
164+
return true;
165+
};
166+
167+
const MemoizedInputButtonsWithContext = React.memo(
168+
InputButtonsWithContext,
169+
areEqual,
170+
) as typeof InputButtonsWithContext;
171+
172+
export const InputButtons = <
173+
At extends DefaultAttachmentType = DefaultAttachmentType,
174+
Ch extends UnknownType = DefaultChannelType,
175+
Co extends string = DefaultCommandType,
176+
Ev extends UnknownType = DefaultEventType,
177+
Me extends UnknownType = DefaultMessageType,
178+
Re extends UnknownType = DefaultReactionType,
179+
Us extends UnknownType = DefaultUserType
180+
>(
181+
props: InputButtonsProps<At, Ch, Co, Ev, Me, Re, Us>,
182+
) => {
183+
const {
184+
AttachButton,
185+
CommandsButton,
186+
giphyActive,
187+
hasCommands,
188+
hasFilePicker,
189+
hasImagePicker,
190+
MoreOptionsButton,
191+
setShowMoreOptions,
192+
showMoreOptions,
193+
text,
194+
uploadsEnabled,
195+
} = useMessageInputContext<At, Ch, Co, Ev, Me, Re, Us>();
196+
197+
return (
198+
<MemoizedInputButtonsWithContext
199+
{...{
200+
AttachButton,
201+
CommandsButton,
202+
giphyActive,
203+
hasCommands,
204+
hasFilePicker,
205+
hasImagePicker,
206+
MoreOptionsButton,
207+
setShowMoreOptions,
208+
showMoreOptions,
209+
text,
210+
uploadsEnabled,
211+
}}
212+
{...props}
213+
/>
214+
);
215+
};

0 commit comments

Comments
 (0)