stream-chat-react-native-core 4.2.0 → 4.3.0-beta.1

package/lib/module/components/MessageInput/MessageInput.js

@@ -37,8 +37,6 @@ var _ThreadContext = require("../../contexts/threadContext/ThreadContext");
 
 var _TranslationContext = require("../../contexts/translationContext/TranslationContext");
 
-var _icons = require("../../icons");
-
 var _AttachmentSelectionBar = require("../AttachmentPicker/components/AttachmentSelectionBar");
 
 var _AutoCompleteInput = require("../AutoCompleteInput/AutoCompleteInput");
@@ -63,7 +61,9 @@ var styles = _reactNative.StyleSheet.create({
   },
   autoCompleteInputContainer: {
     alignItems: 'center',
-    flexDirection: 'row'
+    flexDirection: 'row',
+    paddingLeft: 16,
+    paddingRight: 16
   },
   composerContainer: {
     alignItems: 'flex-end',
@@ -73,28 +73,6 @@ var styles = _reactNative.StyleSheet.create({
     borderTopWidth: 1,
     padding: 10
   },
-  editingBoxHeader: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingBottom: 10
-  },
-  editingBoxHeaderTitle: {
-    fontSize: 14,
-    fontWeight: 'bold'
-  },
-  giphyContainer: {
-    alignItems: 'center',
-    borderRadius: 12,
-    flexDirection: 'row',
-    height: 24,
-    marginRight: 8,
-    paddingHorizontal: 8
-  },
-  giphyText: {
-    fontSize: 12,
-    fontWeight: 'bold'
-  },
   inputBoxContainer: {
     borderRadius: 20,
     borderWidth: 1,
@@ -132,8 +110,6 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
       asyncIds = props.asyncIds,
       asyncUploads = props.asyncUploads,
       AutoCompleteSuggestionList = props.AutoCompleteSuggestionList,
-      clearEditingState = props.clearEditingState,
-      clearQuotedMessageState = props.clearQuotedMessageState,
       closeAttachmentPicker = props.closeAttachmentPicker,
       cooldownEndsAt = props.cooldownEndsAt,
       CooldownTimer = props.CooldownTimer,
@@ -147,6 +123,9 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
       Input = props.Input,
       inputBoxRef = props.inputBoxRef,
       InputButtons = props.InputButtons,
+      InputEditingStateHeader = props.InputEditingStateHeader,
+      InputGiphySearch = props.InputGiphySearch,
+      InputReplyStateHeader = props.InputReplyStateHeader,
       isValidMessage = props.isValidMessage,
       maxNumberOfFiles = props.maxNumberOfFiles,
       members = props.members,
@@ -159,11 +138,8 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
       SendButton = props.SendButton,
       sending = props.sending,
       sendMessageAsync = props.sendMessageAsync,
-      setGiphyActive = props.setGiphyActive,
-      setShowMoreOptions = props.setShowMoreOptions,
       ShowThreadMessageInChannelButton = props.ShowThreadMessageInChannelButton,
       suggestions = props.suggestions,
-      t = props.t,
       thread = props.thread,
       threadList = props.threadList,
       triggerType = props.triggerType,
@@ -178,11 +154,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
   var _useTheme = (0, _ThemeContext.useTheme)(),
       _useTheme$theme = _useTheme.theme,
       _useTheme$theme$color = _useTheme$theme.colors,
-      accent_blue = _useTheme$theme$color.accent_blue,
-      black = _useTheme$theme$color.black,
       border = _useTheme$theme$color.border,
-      grey = _useTheme$theme$color.grey,
-      grey_gainsboro = _useTheme$theme$color.grey_gainsboro,
       grey_whisper = _useTheme$theme$color.grey_whisper,
       white = _useTheme$theme$color.white,
       white_smoke = _useTheme$theme$color.white_smoke,
@@ -191,10 +163,6 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
       autoCompleteInputContainer = _useTheme$theme$messa.autoCompleteInputContainer,
       composerContainer = _useTheme$theme$messa.composerContainer,
       container = _useTheme$theme$messa.container,
-      editingBoxHeader = _useTheme$theme$messa.editingBoxHeader,
-      editingBoxHeaderTitle = _useTheme$theme$messa.editingBoxHeaderTitle,
-      giphyContainer = _useTheme$theme$messa.giphyContainer,
-      giphyText = _useTheme$theme$messa.giphyText,
       inputBoxContainer = _useTheme$theme$messa.inputBoxContainer,
       optionsContainer = _useTheme$theme$messa.optionsContainer,
       replyContainer = _useTheme$theme$messa.replyContainer,
@@ -378,77 +346,29 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 429,
+      lineNumber: 396,
       columnNumber: 7
     }
-  }, (editing || quotedMessage) && _react["default"].createElement(_reactNative.View, {
-    style: [styles.editingBoxHeader, editingBoxHeader],
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 438,
-      columnNumber: 11
-    }
-  }, editing ? _react["default"].createElement(_icons.Edit, {
-    pathFill: grey_gainsboro,
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 440,
-      columnNumber: 15
-    }
-  }) : _react["default"].createElement(_icons.CurveLineLeftUp, {
-    pathFill: grey_gainsboro,
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 442,
-      columnNumber: 15
-    }
-  }), _react["default"].createElement(_reactNative.Text, {
-    style: [styles.editingBoxHeaderTitle, {
-      color: black
-    }, editingBoxHeaderTitle],
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 444,
-      columnNumber: 13
-    }
-  }, editing ? t('Editing Message') : t('Reply to Message')), _react["default"].createElement(_reactNative.TouchableOpacity, {
-    disabled: disabled,
-    onPress: function onPress() {
-      resetInput();
-
-      if (editing) {
-        clearEditingState();
-      }
-
-      if (quotedMessage) {
-        clearQuotedMessageState();
-      }
-    },
-    testID: "close-button",
+  }, editing && _react["default"].createElement(InputEditingStateHeader, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 447,
-      columnNumber: 13
+      lineNumber: 404,
+      columnNumber: 21
     }
-  }, _react["default"].createElement(_icons.CircleClose, {
-    pathFill: grey,
+  }), quotedMessage && _react["default"].createElement(InputReplyStateHeader, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 460,
-      columnNumber: 15
+      lineNumber: 405,
+      columnNumber: 27
     }
-  }))), _react["default"].createElement(_reactNative.View, {
+  }), _react["default"].createElement(_reactNative.View, {
     style: [styles.composerContainer, composerContainer],
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 464,
+      lineNumber: 406,
       columnNumber: 9
     }
   }, Input ? _react["default"].createElement(Input, {
@@ -457,7 +377,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 466,
+      lineNumber: 408,
       columnNumber: 13
     }
   }) : _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_reactNative.View, {
@@ -465,14 +385,14 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 472,
+      lineNumber: 414,
       columnNumber: 15
     }
   }, InputButtons && _react["default"].createElement(InputButtons, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 473,
+      lineNumber: 415,
       columnNumber: 34
     }
   })), _react["default"].createElement(_reactNative.View, {
@@ -483,7 +403,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 475,
+      lineNumber: 417,
       columnNumber: 15
     }
   }, (typeof editing !== 'boolean' && (editing == null ? void 0 : editing.quoted_message) || quotedMessage) && _react["default"].createElement(_reactNative.View, {
@@ -491,21 +411,21 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 486,
+      lineNumber: 428,
       columnNumber: 19
     }
   }, _react["default"].createElement(Reply, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 487,
+      lineNumber: 429,
       columnNumber: 21
     }
   })), imageUploads.length ? _react["default"].createElement(ImageUploadPreview, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 490,
+      lineNumber: 432,
       columnNumber: 40
     }
   }) : null, imageUploads.length && fileUploads.length ? _react["default"].createElement(_reactNative.View, {
@@ -516,95 +436,46 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 492,
+      lineNumber: 434,
       columnNumber: 19
     }
   }) : null, fileUploads.length ? _react["default"].createElement(FileUploadPreview, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 502,
+      lineNumber: 444,
       columnNumber: 39
     }
-  }) : null, _react["default"].createElement(_reactNative.View, {
-    style: [styles.autoCompleteInputContainer, {
-      paddingLeft: giphyActive ? 8 : 16,
-      paddingRight: giphyActive ? 10 : 16
-    }, autoCompleteInputContainer],
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 503,
-      columnNumber: 17
-    }
-  }, giphyActive && _react["default"].createElement(_reactNative.View, {
-    style: [styles.giphyContainer, {
-      backgroundColor: accent_blue
-    }, giphyContainer],
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 514,
-      columnNumber: 21
-    }
-  }, _react["default"].createElement(_icons.Lightning, {
-    height: 16,
-    pathFill: white,
-    width: 16,
+  }) : null, giphyActive ? _react["default"].createElement(InputGiphySearch, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 521,
-      columnNumber: 23
+      lineNumber: 446,
+      columnNumber: 19
     }
-  }), _react["default"].createElement(_reactNative.Text, {
-    style: [styles.giphyText, {
-      color: white
-    }, giphyText],
+  }) : _react["default"].createElement(_reactNative.View, {
+    style: [styles.autoCompleteInputContainer, autoCompleteInputContainer],
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 522,
-      columnNumber: 23
+      lineNumber: 448,
+      columnNumber: 19
     }
-  }, "GIPHY")), _react["default"].createElement(_AutoCompleteInput.AutoCompleteInput, {
+  }, _react["default"].createElement(_AutoCompleteInput.AutoCompleteInput, {
     additionalTextInputProps: additionalTextInputProps,
     cooldownActive: !!cooldownRemainingSeconds,
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 525,
-      columnNumber: 19
-    }
-  }), giphyActive && _react["default"].createElement(_reactNative.TouchableOpacity, {
-    disabled: disabled,
-    onPress: function onPress() {
-      setGiphyActive(false);
-      setShowMoreOptions(true);
-    },
-    testID: "close-button",
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 530,
+      lineNumber: 449,
       columnNumber: 21
     }
-  }, _react["default"].createElement(_icons.CircleClose, {
-    height: 20,
-    pathFill: grey,
-    width: 20,
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 538,
-      columnNumber: 23
-    }
-  })))), _react["default"].createElement(_reactNative.View, {
+  }))), _react["default"].createElement(_reactNative.View, {
     style: [styles.sendButtonContainer, sendButtonContainer],
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 543,
+      lineNumber: 456,
       columnNumber: 15
     }
   }, cooldownRemainingSeconds ? _react["default"].createElement(CooldownTimer, {
@@ -612,7 +483,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 545,
+      lineNumber: 458,
       columnNumber: 19
     }
   }) : _react["default"].createElement(SendButton, {
@@ -620,7 +491,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 547,
+      lineNumber: 460,
       columnNumber: 19
     }
   })))), _react["default"].createElement(ShowThreadMessageInChannelButton, {
@@ -628,7 +499,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 553,
+      lineNumber: 466,
       columnNumber: 9
     }
   })), triggerType && suggestions ? _react["default"].createElement(_reactNative.View, {
@@ -639,7 +510,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 557,
+      lineNumber: 470,
       columnNumber: 9
     }
   }, _react["default"].createElement(AutoCompleteSuggestionList, {
@@ -651,7 +522,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 564,
+      lineNumber: 477,
       columnNumber: 11
     }
   })) : null, selectedPicker && _react["default"].createElement(_reactNative.View, {
@@ -662,14 +533,14 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 574,
+      lineNumber: 487,
       columnNumber: 9
     }
   }, _react["default"].createElement(_AttachmentSelectionBar.AttachmentSelectionBar, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 586,
+      lineNumber: 499,
       columnNumber: 11
     }
   })));
@@ -777,6 +648,9 @@ var MessageInput = function MessageInput(props) {
       Input = _useMessageInputConte.Input,
       inputBoxRef = _useMessageInputConte.inputBoxRef,
       InputButtons = _useMessageInputConte.InputButtons,
+      InputEditingStateHeader = _useMessageInputConte.InputEditingStateHeader,
+      InputGiphySearch = _useMessageInputConte.InputGiphySearch,
+      InputReplyStateHeader = _useMessageInputConte.InputReplyStateHeader,
       isValidMessage = _useMessageInputConte.isValidMessage,
       maxNumberOfFiles = _useMessageInputConte.maxNumberOfFiles,
       mentionedUsers = _useMessageInputConte.mentionedUsers,
@@ -815,7 +689,7 @@ var MessageInput = function MessageInput(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 781,
+        lineNumber: 697,
         columnNumber: 12
       }
     });
@@ -843,6 +717,9 @@ var MessageInput = function MessageInput(props) {
     Input: Input,
     inputBoxRef: inputBoxRef,
     InputButtons: InputButtons,
+    InputEditingStateHeader: InputEditingStateHeader,
+    InputGiphySearch: InputGiphySearch,
+    InputReplyStateHeader: InputReplyStateHeader,
     isValidMessage: isValidMessage,
     maxNumberOfFiles: maxNumberOfFiles,
     members: members,
@@ -869,7 +746,7 @@ var MessageInput = function MessageInput(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 785,
+      lineNumber: 701,
       columnNumber: 5
     }
   }));