@bigbinary/neetoui-rn 0.0.252 → 0.0.254

package/index.d.ts

@@ -334,7 +334,13 @@ type ChatInputProps = {
   attachmentsCount?: number;
   Attachments?:  React.FC;
   showCannedResponsesFor?: Array<"REPLY" | "NOTE" | "FORWARD">;
+  showSuggestionsFor?: Array<"REPLY" | "NOTE" | "FORWARD">;
   disabled?: boolean;
+  suggestions: Array<{
+    name: string
+    imageUrl: string
+    id: string
+  }>;
 };
 
 type LineLoaderProps = {

package/lib/components/AnimatedImage.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.AnimatedImage=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeFastImage=_interopRequireDefault(require("react-native-fast-image"));var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _reactNativeSizeMatters=require("react-native-size-matters");var _native=_interopRequireDefault(require("styled-components/native"));var _styledSystem=require("styled-system");var _imagePlaceholder=_interopRequireDefault(require("../../assets/images/image-placeholder.svg"));var _=require("./");var _theme=require("../theme");var _excluded=["imageHeight","imageWidth","imageUrl"];var _templateObject,_this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/AnimatedImage.jsx";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var StyledImage=(0,_native.default)(_reactNativeFastImage.default)(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.color,_styledSystem.layout);var borderRadius=(0,_reactNativeSizeMatters.moderateScale)(10);var AnimatedImage=function AnimatedImage(_ref){var _ref$imageHeight=_ref.imageHeight,imageHeight=_ref$imageHeight===void 0?139:_ref$imageHeight,_ref$imageWidth=_ref.imageWidth,imageWidth=_ref$imageWidth===void 0?255:_ref$imageWidth,imageUrl=_ref.imageUrl,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var opacity=(0,_reactNativeReanimated.useSharedValue)(0);var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isImageLoaded=_useState2[0],setIsImageLoaded=_useState2[1];var profileImageStyle=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){return{opacity:(0,_reactNativeReanimated.withTiming)(opacity.value,{duration:300,easing:_reactNativeReanimated.Easing.bezier(0.25,0.1,0.25,1)}),height:imageHeight,width:imageWidth,alignSelf:"center",borderRadius:borderRadius};};_f._closure={withTiming:_reactNativeReanimated.withTiming,opacity:opacity,Easing:{bezier:_reactNativeReanimated.Easing.bezier},imageHeight:imageHeight,imageWidth:imageWidth,borderRadius:borderRadius};_f.asString="function _f(){const{withTiming,opacity,Easing,imageHeight,imageWidth,borderRadius}=jsThis._closure;{return{opacity:withTiming(opacity.value,{duration:300,easing:Easing.bezier(0.25,0.1,0.25,1)}),height:imageHeight,width:imageWidth,alignSelf:\"center\",borderRadius:borderRadius};}}";_f.__workletHash=11133486617518;_f.__location="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/AnimatedImage.jsx (65:45)";_f.__optimalization=2;return _f;}());return _react.default.createElement(_.Container,{alignItems:"center",borderRadius:(0,_reactNativeSizeMatters.moderateScale)(10),justifyContent:"center",overflow:"hidden",__self:_this,__source:{fileName:_jsxFileName,lineNumber:77,columnNumber:5}},_react.default.createElement(_reactNativeReanimated.default.View,{style:profileImageStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:83,columnNumber:7}},_react.default.createElement(StyledImage,(0,_extends2.default)({height:imageHeight,width:imageWidth,source:{uri:imageUrl,headers:{Accept:"*/*","Content-Type":"application/json",Pragma:"no-cache"}},onLoad:function onLoad(){setIsImageLoaded(true);opacity.value=1;},onLoadStart:function onLoadStart(){setIsImageLoaded(false);opacity.value=0;}},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:84,columnNumber:9}}))),!isImageLoaded&&_react.default.createElement(_.Container,{position:"absolute",__self:_this,__source:{fileName:_jsxFileName,lineNumber:107,columnNumber:9}},_react.default.createElement(_imagePlaceholder.default,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:108,columnNumber:11}}),_react.default.createElement(_.Container,{bottom:(0,_reactNativeSizeMatters.moderateScale)(15),position:"absolute",right:(0,_reactNativeSizeMatters.moderateScale)(15),__self:_this,__source:{fileName:_jsxFileName,lineNumber:109,columnNumber:11}},_react.default.createElement(_.Loader,{color:_theme.theme.colors.font.grey600,__self:_this,__source:{fileName:_jsxFileName,lineNumber:114,columnNumber:13}}))));};exports.AnimatedImage=AnimatedImage;AnimatedImage.defaultProps={alignItems:"center",justifyContent:"center"};AnimatedImage.propTypes={imageHeight:_propTypes.default.number,imageWidth:_propTypes.default.number,imageUrl:_propTypes.default.string.isRequired};
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.AnimatedImage=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeFastImage=_interopRequireDefault(require("react-native-fast-image"));var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _reactNativeSizeMatters=require("react-native-size-matters");var _native=_interopRequireDefault(require("styled-components/native"));var _styledSystem=require("styled-system");var _imagePlaceholder=_interopRequireDefault(require("../../assets/images/image-placeholder.svg"));var _=require("./");var _theme=require("../theme");var _excluded=["imageHeight","imageWidth","imageUrl"];var _templateObject,_this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/AnimatedImage.jsx";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var StyledImage=(0,_native.default)(_reactNativeFastImage.default)(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.color,_styledSystem.layout);var borderRadius=(0,_reactNativeSizeMatters.moderateScale)(10);var AnimatedImage=function AnimatedImage(_ref){var _ref$imageHeight=_ref.imageHeight,imageHeight=_ref$imageHeight===void 0?139:_ref$imageHeight,_ref$imageWidth=_ref.imageWidth,imageWidth=_ref$imageWidth===void 0?255:_ref$imageWidth,imageUrl=_ref.imageUrl,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var opacity=(0,_reactNativeReanimated.useSharedValue)(0);var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isImageLoaded=_useState2[0],setIsImageLoaded=_useState2[1];var profileImageStyle=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){return{opacity:(0,_reactNativeReanimated.withTiming)(opacity.value,{duration:300,easing:_reactNativeReanimated.Easing.bezier(0.25,0.1,0.25,1)}),height:imageHeight,width:imageWidth,alignSelf:"center",borderRadius:borderRadius};};_f._closure={withTiming:_reactNativeReanimated.withTiming,opacity:opacity,Easing:{bezier:_reactNativeReanimated.Easing.bezier},imageHeight:imageHeight,imageWidth:imageWidth,borderRadius:borderRadius};_f.asString="function _f(){const{withTiming,opacity,Easing,imageHeight,imageWidth,borderRadius}=jsThis._closure;{return{opacity:withTiming(opacity.value,{duration:300,easing:Easing.bezier(0.25,0.1,0.25,1)}),height:imageHeight,width:imageWidth,alignSelf:\"center\",borderRadius:borderRadius};}}";_f.__workletHash=11133486617518;_f.__location="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/AnimatedImage.jsx (65:45)";_f.__optimalization=2;return _f;}());return _react.default.createElement(_.Container,{alignItems:"center",borderRadius:(0,_reactNativeSizeMatters.moderateScale)(10),justifyContent:"center",overflow:"hidden",__self:_this,__source:{fileName:_jsxFileName,lineNumber:77,columnNumber:5}},_react.default.createElement(_reactNativeReanimated.default.View,{style:profileImageStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:83,columnNumber:7}},_react.default.createElement(StyledImage,(0,_extends2.default)({height:imageHeight,width:imageWidth,source:{uri:imageUrl,headers:{Accept:"*/*","Content-Type":"application/json",Pragma:"no-cache"}},onLoad:function onLoad(){setIsImageLoaded(true);opacity.value=1;},onLoadStart:function onLoadStart(){setIsImageLoaded(false);opacity.value=0;}},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:84,columnNumber:9}}))),!isImageLoaded&&_react.default.createElement(_.Container,{position:"absolute",__self:_this,__source:{fileName:_jsxFileName,lineNumber:107,columnNumber:9}},_react.default.createElement(_imagePlaceholder.default,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:108,columnNumber:11}}),_react.default.createElement(_.Container,{bottom:(0,_reactNativeSizeMatters.moderateScale)(15),position:"absolute",right:(0,_reactNativeSizeMatters.moderateScale)(15),__self:_this,__source:{fileName:_jsxFileName,lineNumber:109,columnNumber:11}},_react.default.createElement(_.Loader,{color:_theme.theme.colors.font.grey600,__self:_this,__source:{fileName:_jsxFileName,lineNumber:114,columnNumber:13}}))));};exports.AnimatedImage=AnimatedImage;AnimatedImage.defaultProps={alignItems:"center",justifyContent:"center"};AnimatedImage.propTypes={imageHeight:_propTypes.default.number|_propTypes.default.string,imageWidth:_propTypes.default.number,imageUrl:_propTypes.default.string};

package/lib/components/ChatInput/ChatInput.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.ChatInput=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _reactNativeSizeMatters=require("react-native-size-matters");var _native=_interopRequireDefault(require("styled-components/native"));var _styledSystem=require("styled-system");var _attachment=_interopRequireDefault(require("../../../assets/icons/attachment.svg"));var _cannedResponse=_interopRequireDefault(require("../../../assets/icons/canned-response.svg"));var _expand=_interopRequireDefault(require("../../../assets/icons/expand.svg"));var _forward=_interopRequireDefault(require("../../../assets/icons/forward.svg"));var _minimize=_interopRequireDefault(require("../../../assets/icons/minimize.svg"));var _note=_interopRequireDefault(require("../../../assets/icons/note.svg"));var _reply=_interopRequireDefault(require("../../../assets/icons/reply.svg"));var _=require("./..");var _AttachmentsView=require("./AttachmentsView");var _EmailFields=require("./EmailFields");var _IconButton=require("./IconButton");var _theme=require("../../theme");var _excluded=["shouldShowEmailFields","showReplyMenuOptions","value","onChangeText","onForward","onCannedResponse","toEmails","onReply","onAddNote","onAttachment","attachmentsCount","Attachments","showCannedResponsesFor","disabled","isLoading","onOptionChange","initialSelectedOption"];var _labels,_templateObject,_this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/ChatInput/ChatInput.jsx";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var placeholders={reply:"Type here to reply...",note:"Add note here...",forward:"Type here to forward..."};var OPTION_TYPES={REPLY:"REPLY",NOTE:"NOTE",FORWARD:"FORWARD"};var labels=(_labels={},(0,_defineProperty2.default)(_labels,OPTION_TYPES.REPLY,"Reply"),(0,_defineProperty2.default)(_labels,OPTION_TYPES.NOTE,"Add note"),(0,_defineProperty2.default)(_labels,OPTION_TYPES.FORWARD,"Forward"),_labels);var TextInput=_native.default.TextInput(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.buttonStyle,_styledSystem.typography,_styledSystem.color);var ChatInput=(0,_react.forwardRef)(function(_ref,ref){var shouldShowEmailFields=_ref.shouldShowEmailFields,showReplyMenuOptions=_ref.showReplyMenuOptions,_ref$value=_ref.value,value=_ref$value===void 0?"":_ref$value,_ref$onChangeText=_ref.onChangeText,onChangeText=_ref$onChangeText===void 0?function(){}:_ref$onChangeText,onForward=_ref.onForward,onCannedResponse=_ref.onCannedResponse,initialToEmails=_ref.toEmails,_ref$onReply=_ref.onReply,onReply=_ref$onReply===void 0?function(){}:_ref$onReply,_ref$onAddNote=_ref.onAddNote,onAddNote=_ref$onAddNote===void 0?function(){}:_ref$onAddNote,_ref$onAttachment=_ref.onAttachment,onAttachment=_ref$onAttachment===void 0?function(){}:_ref$onAttachment,attachmentsCount=_ref.attachmentsCount,Attachments=_ref.Attachments,_ref$showCannedRespon=_ref.showCannedResponsesFor,showCannedResponsesFor=_ref$showCannedRespon===void 0?[OPTION_TYPES.REPLY]:_ref$showCannedRespon,disabled=_ref.disabled,_ref$isLoading=_ref.isLoading,isLoading=_ref$isLoading===void 0?true:_ref$isLoading,_ref$onOptionChange=_ref.onOptionChange,onOptionChange=_ref$onOptionChange===void 0?function(){}:_ref$onOptionChange,_ref$initialSelectedO=_ref.initialSelectedOption,initialSelectedOption=_ref$initialSelectedO===void 0?OPTION_TYPES.REPLY:_ref$initialSelectedO,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var inputRef=(0,_react.useRef)();var _useState=(0,_react.useState)(initialSelectedOption),_useState2=(0,_slicedToArray2.default)(_useState,2),selectedOption=_useState2[0],setSelectedOption=_useState2[1];var _useState3=(0,_react.useState)(false),_useState4=(0,_slicedToArray2.default)(_useState3,2),isEmailFieldsVisible=_useState4[0],setIsEmailFieldsVisible=_useState4[1];var _useState5=(0,_react.useState)(false),_useState6=(0,_slicedToArray2.default)(_useState5,2),isAttachmentsVisible=_useState6[0],setIsAttachmentsVisible=_useState6[1];var isReplyOptionSelected=selectedOption===OPTION_TYPES.REPLY;var isNoteOptionSelected=selectedOption===OPTION_TYPES.NOTE;var isForwardOptionSelected=selectedOption===OPTION_TYPES.FORWARD;var _useState7=(0,_react.useState)(initialToEmails!=null?initialToEmails:[]),_useState8=(0,_slicedToArray2.default)(_useState7,2),toEmails=_useState8[0],setToEmails=_useState8[1];var _useState9=(0,_react.useState)([]),_useState10=(0,_slicedToArray2.default)(_useState9,2),toEmailsForForward=_useState10[0],setToEmailsForForward=_useState10[1];var _useState11=(0,_react.useState)([]),_useState12=(0,_slicedToArray2.default)(_useState11,2),ccEmails=_useState12[0],setCcEmails=_useState12[1];var _useState13=(0,_react.useState)([]),_useState14=(0,_slicedToArray2.default)(_useState13,2),bccEmails=_useState14[0],setBccEmails=_useState14[1];var moreReplyOptions=[{label:"Send and set as closed",Icon:function Icon(){return null;},onPress:function onPress(){onReply({toEmails:toEmails,ccEmails:ccEmails,bccEmails:bccEmails,status:"closed"});}}];(0,_react.useImperativeHandle)(ref,function(){return{clearEmailFields:function clearEmailFields(){setToEmails(initialToEmails!=null?initialToEmails:[]);setToEmailsForForward([]);setCcEmails([]);setBccEmails([]);inputRef.current.blur();}};},[initialToEmails,isReplyOptionSelected]);(0,_react.useEffect)(function(){onOptionChange(selectedOption);},[selectedOption]);(0,_react.useEffect)(function(){setSelectedOption(initialSelectedOption);},[initialSelectedOption]);(0,_react.useEffect)(function(){setToEmails(initialToEmails!=null?initialToEmails:[]);},[initialToEmails]);var showEmailFieldsAndAttachments=function showEmailFieldsAndAttachments(){setIsAttachmentsVisible(true);setIsEmailFieldsVisible(true);};var hideEmailFieldsAndAttachments=function hideEmailFieldsAndAttachments(){setIsAttachmentsVisible(false);setIsEmailFieldsVisible(false);};var onReplyClickHandler=function onReplyClickHandler(){hideEmailFieldsAndAttachments();inputRef.current.focus();setSelectedOption(OPTION_TYPES.REPLY);};var onAddNoteClickHandler=function onAddNoteClickHandler(){hideEmailFieldsAndAttachments();inputRef.current.focus();setIsEmailFieldsVisible(false);setSelectedOption(OPTION_TYPES.NOTE);};var onAddForwardClickHandler=function onAddForwardClickHandler(){inputRef.current.focus();setIsEmailFieldsVisible(true);setIsAttachmentsVisible(false);setSelectedOption(OPTION_TYPES.FORWARD);};var onAddAttachmentsClickHandler=function onAddAttachmentsClickHandler(){if(!isAttachmentsVisible&&attachmentsCount>0){}else{onAttachment();}setIsEmailFieldsVisible(false);setIsAttachmentsVisible(true);};var onActionHandler=(0,_react.useCallback)(function(){var _OPTION_TYPES$REPLY$O;(_OPTION_TYPES$REPLY$O={},(0,_defineProperty2.default)(_OPTION_TYPES$REPLY$O,OPTION_TYPES.REPLY,function(){onReply({toEmails:toEmails,ccEmails:ccEmails,bccEmails:bccEmails});}),(0,_defineProperty2.default)(_OPTION_TYPES$REPLY$O,OPTION_TYPES.NOTE,function(){onAddNote({toEmails:toEmails,ccEmails:ccEmails,bccEmails:bccEmails});}),(0,_defineProperty2.default)(_OPTION_TYPES$REPLY$O,OPTION_TYPES.FORWARD,function(){onForward({toEmails:toEmails,ccEmails:ccEmails,bccEmails:bccEmails});}),_OPTION_TYPES$REPLY$O)[selectedOption]();},[bccEmails,ccEmails,onAddNote,onForward,onReply,selectedOption,toEmails]);var shouldShowExpandAndMinimizeButton=attachmentsCount>0||toEmails.length>0;var shouldDisableWhenForwardAndToFieldMissing=isForwardOptionSelected&&toEmailsForForward.length===0;return _react.default.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:270,columnNumber:7}},_react.default.createElement(_.LineLoader,{backgroundColor:_theme.theme.colors.background.grey400,isLoading:isLoading,__self:_this,__source:{fileName:_jsxFileName,lineNumber:271,columnNumber:9}}),_react.default.createElement(_.Container,{bg:isNoteOptionSelected?"background.oldLace":"transparent",p:(0,_reactNativeSizeMatters.moderateScale)(5),pt:0,px:(0,_reactNativeSizeMatters.moderateScale)(16),__self:_this,__source:{fileName:_jsxFileName,lineNumber:275,columnNumber:9}},_react.default.createElement(_.Container,{pt:(0,_reactNativeSizeMatters.moderateScale)(8),__self:_this,__source:{fileName:_jsxFileName,lineNumber:281,columnNumber:11}},_react.default.createElement(_EmailFields.EmailFields,{bccEmails:bccEmails,ccEmails:ccEmails,isEmailFieldsVisible:isEmailFieldsVisible,isForwardOptionSelected:isForwardOptionSelected,isNoteOptionSelected:isNoteOptionSelected,isReplyOptionSelected:isReplyOptionSelected,setBccEmails:setBccEmails,setCcEmails:setCcEmails,setIsEmailFieldsVisible:setIsEmailFieldsVisible,setToEmails:setToEmails,setToEmailsForForward:setToEmailsForForward,shouldShowEmailFields:shouldShowEmailFields,toEmails:toEmails,toEmailsForForward:toEmailsForForward,__self:_this,__source:{fileName:_jsxFileName,lineNumber:282,columnNumber:13}}),_react.default.createElement(_.Container,{flexDirection:"row",justifyContent:"space-between",__self:_this,__source:{fileName:_jsxFileName,lineNumber:298,columnNumber:13}},_react.default.createElement(TextInput,(0,_extends2.default)({multiline:true,flex:1,maxHeight:(0,_reactNativeSizeMatters.moderateScale)(150),my:(0,_reactNativeSizeMatters.moderateScale)(12),overflow:"hidden",placeholder:placeholders[selectedOption],ref:inputRef,value:value,onChangeText:onChangeText,onTouchStart:hideEmailFieldsAndAttachments},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:299,columnNumber:15}})),_react.default.createElement(_.Container,{alignSelf:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:312,columnNumber:15}},shouldShowExpandAndMinimizeButton&&(isEmailFieldsVisible||isAttachmentsVisible?_react.default.createElement(_IconButton.IconButton,{Icon:_minimize.default,height:(0,_reactNativeSizeMatters.moderateScale)(30),pt:(0,_reactNativeSizeMatters.moderateScale)(8),width:(0,_reactNativeSizeMatters.moderateScale)(30),onPress:hideEmailFieldsAndAttachments,__self:_this,__source:{fileName:_jsxFileName,lineNumber:315,columnNumber:21}}):_react.default.createElement(_IconButton.IconButton,{Icon:_expand.default,height:(0,_reactNativeSizeMatters.moderateScale)(30),pt:(0,_reactNativeSizeMatters.moderateScale)(8),width:(0,_reactNativeSizeMatters.moderateScale)(30),onPress:showEmailFieldsAndAttachments,__self:_this,__source:{fileName:_jsxFileName,lineNumber:323,columnNumber:21}})))),_react.default.createElement(_AttachmentsView.AttachmentsView,{Attachments:Attachments,attachmentsCount:attachmentsCount,isAttachmentsVisible:isAttachmentsVisible,isNoteOptionSelected:isNoteOptionSelected,setIsAttachmentsVisible:setIsAttachmentsVisible,__self:_this,__source:{fileName:_jsxFileName,lineNumber:333,columnNumber:13}}),_react.default.createElement(_.Container,{alignItems:"center",flexDirection:"row",justifyContent:"space-between",mt:(0,_reactNativeSizeMatters.moderateScale)(10),__self:_this,__source:{fileName:_jsxFileName,lineNumber:340,columnNumber:13}},_react.default.createElement(_.Container,{flexDirection:"row",justifyContent:"space-between",__self:_this,__source:{fileName:_jsxFileName,lineNumber:346,columnNumber:15}},_react.default.createElement(_IconButton.IconButton,{Icon:_reply.default,opacity:isReplyOptionSelected?1:0.5,pl:(0,_reactNativeSizeMatters.moderateScale)(10),onPress:onReplyClickHandler,__self:_this,__source:{fileName:_jsxFileName,lineNumber:347,columnNumber:17}}),_react.default.createElement(_IconButton.IconButton,{Icon:_note.default,opacity:isNoteOptionSelected?1:0.5,onPress:onAddNoteClickHandler,__self:_this,__source:{fileName:_jsxFileName,lineNumber:353,columnNumber:17}}),onForward&&_react.default.createElement(_IconButton.IconButton,{Icon:_forward.default,opacity:isForwardOptionSelected?1:0.5,onPress:onAddForwardClickHandler,__self:_this,__source:{fileName:_jsxFileName,lineNumber:359,columnNumber:19}}),_react.default.createElement(_.Container,{bg:"background.grey400",mx:(0,_reactNativeSizeMatters.moderateScale)(5),p:(0,_reactNativeSizeMatters.moderateScale)(0.4),__self:_this,__source:{fileName:_jsxFileName,lineNumber:365,columnNumber:17}}),onCannedResponse&&showCannedResponsesFor.includes(selectedOption)&&_react.default.createElement(_IconButton.IconButton,{Icon:_cannedResponse.default,opacity:0.5,onPress:onCannedResponse,__self:_this,__source:{fileName:_jsxFileName,lineNumber:372,columnNumber:21}}),_react.default.createElement(_IconButton.IconButton,{Icon:_attachment.default,opacity:0.5,onPress:onAddAttachmentsClickHandler,__self:_this,__source:{fileName:_jsxFileName,lineNumber:378,columnNumber:17}})),_react.default.createElement(_.Container,{alignItems:"center",flexDirection:"row",__self:_this,__source:{fileName:_jsxFileName,lineNumber:384,columnNumber:15}},_react.default.createElement(_.Button,{height:(0,_reactNativeSizeMatters.moderateScale)(30),label:labels[selectedOption],pr:0,variant:"text",disabled:shouldDisableWhenForwardAndToFieldMissing||disabled,labelStyle:{mx:(0,_reactNativeSizeMatters.moderateScale)(0)},onPress:onActionHandler,__self:_this,__source:{fileName:_jsxFileName,lineNumber:385,columnNumber:17}}),showReplyMenuOptions&&isReplyOptionSelected&&_react.default.createElement(_.Popover,{data:moreReplyOptions,from:_react.default.createElement(_.Button,{disabled:disabled,height:(0,_reactNativeSizeMatters.moderateScale)(30),label:"",p:0,variant:"text",RightIcon:function RightIcon(){return _react.default.createElement(_reactNativeRemixIcon.default,{color:_theme.theme.colors.background.grey800,name:"ri-arrow-down-s-line",size:(0,_reactNativeSizeMatters.moderateScale)(30),__self:_this,__source:{fileName:_jsxFileName,lineNumber:409,columnNumber:27}});},__self:_this,__source:{fileName:_jsxFileName,lineNumber:402,columnNumber:23}}),__self:_this,__source:{fileName:_jsxFileName,lineNumber:399,columnNumber:19}}))))));});exports.ChatInput=ChatInput;ChatInput.displayName="ChatInput";ChatInput.propTypes={isLoading:_propTypes.default.bool,shouldShowEmailFields:_propTypes.default.bool,showReplyMenuOptions:_propTypes.default.bool,value:_propTypes.default.string,initialSelectedOption:_propTypes.default.oneOf(Object.values(OPTION_TYPES)),onOptionChange:_propTypes.default.func,onChangeText:_propTypes.default.func,onForward:_propTypes.default.func,onCannedResponse:_propTypes.default.func,toEmails:_propTypes.default.arrayOf(_propTypes.default.string),onReply:_propTypes.default.func,onAddNote:_propTypes.default.func,onAttachment:_propTypes.default.func,attachmentsCount:_propTypes.default.number,Attachments:_propTypes.default.any,showCannedResponsesFor:_propTypes.default.arrayOf(_propTypes.default.oneOf(Object.values(OPTION_TYPES))),disabled:_propTypes.default.bool};
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.ChatInput=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _react=_interopRequireWildcard(require("react"));var _nodeHtmlParser=require("node-html-parser");var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _reactNativeSizeMatters=require("react-native-size-matters");var _attachment=_interopRequireDefault(require("../../../assets/icons/attachment.svg"));var _cannedResponse=_interopRequireDefault(require("../../../assets/icons/canned-response.svg"));var _expand=_interopRequireDefault(require("../../../assets/icons/expand.svg"));var _forward=_interopRequireDefault(require("../../../assets/icons/forward.svg"));var _minimize=_interopRequireDefault(require("../../../assets/icons/minimize.svg"));var _note=_interopRequireDefault(require("../../../assets/icons/note.svg"));var _reply=_interopRequireDefault(require("../../../assets/icons/reply.svg"));var _=require("./..");var _AttachmentsView=require("./AttachmentsView");var _EmailFields=require("./EmailFields");var _IconButton=require("./IconButton");var _MentionsInputWrapper=require("./MentionsInputWrapper");var _theme=require("../../theme");var _excluded=["shouldShowEmailFields","showReplyMenuOptions","value","onChangeText","onForward","onCannedResponse","toEmails","onReply","onAddNote","onAttachment","attachmentsCount","Attachments","showCannedResponsesFor","showSuggestionsFor","disabled","isLoading","onOptionChange","initialSelectedOption","suggestions"];var _placeholders,_labels,_this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/ChatInput/ChatInput.jsx";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}function _createForOfIteratorHelperLoose(o,allowArrayLike){var it=typeof Symbol!=="undefined"&&o[Symbol.iterator]||o["@@iterator"];if(it)return(it=it.call(o)).next.bind(it);if(Array.isArray(o)||(it=_unsupportedIterableToArray(o))||allowArrayLike&&o&&typeof o.length==="number"){if(it)o=it;var i=0;return function(){if(i>=o.length)return{done:true};return{done:false,value:o[i++]};};}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(o,minLen){if(!o)return;if(typeof o==="string")return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(o);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen);}function _arrayLikeToArray(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++){arr2[i]=arr[i];}return arr2;}var OPTION_TYPES={REPLY:"REPLY",NOTE:"NOTE",FORWARD:"FORWARD"};var placeholders=(_placeholders={},(0,_defineProperty2.default)(_placeholders,OPTION_TYPES.REPLY,"Type here to reply…"),(0,_defineProperty2.default)(_placeholders,OPTION_TYPES.NOTE,"Add note here…"),(0,_defineProperty2.default)(_placeholders,OPTION_TYPES.FORWARD,"Type here to forward…"),_placeholders);var labels=(_labels={},(0,_defineProperty2.default)(_labels,OPTION_TYPES.REPLY,"Reply"),(0,_defineProperty2.default)(_labels,OPTION_TYPES.NOTE,"Add note"),(0,_defineProperty2.default)(_labels,OPTION_TYPES.FORWARD,"Forward"),_labels);var convertMentionsToHTMLAndPlainText=function convertMentionsToHTMLAndPlainText(_ref){var suggestions=_ref.suggestions,value=_ref.value;var mentionsRegex=new RegExp(/@\[[^)]*\)/g);var html="<p>"+value+"</p>";var plainText=value;var allMentions=html.matchAll(mentionsRegex);var _loop=function _loop(mentionObject){var mention=mentionObject[0];var id=/\((.*)\)/.exec(mention)[1];var suggestion=suggestions.find(function(suggestion){return suggestion.id===id;});var rootNode=(0,_nodeHtmlParser.parse)("<span></span>");var spanNode=rootNode.querySelector("span");spanNode.setAttribute("data-type","mention");spanNode.setAttribute("data-id",id);spanNode.setAttribute("data-label",suggestion.name);spanNode.set_content("@"+suggestion.name);var rootNodeString=rootNode.toString();html=html.replace(mention,rootNodeString);var plainTextMention="@"+suggestion.name;plainText=plainText.replace(mention,plainTextMention);};for(var _iterator=_createForOfIteratorHelperLoose(allMentions),_step;!(_step=_iterator()).done;){var mentionObject=_step.value;_loop(mentionObject);}return{html:html,plainText:plainText};};var ChatInput=(0,_react.forwardRef)(function(_ref2,ref){var shouldShowEmailFields=_ref2.shouldShowEmailFields,showReplyMenuOptions=_ref2.showReplyMenuOptions,_ref2$value=_ref2.value,value=_ref2$value===void 0?"":_ref2$value,_ref2$onChangeText=_ref2.onChangeText,onChangeText=_ref2$onChangeText===void 0?function(){}:_ref2$onChangeText,onForward=_ref2.onForward,onCannedResponse=_ref2.onCannedResponse,initialToEmails=_ref2.toEmails,_ref2$onReply=_ref2.onReply,onReply=_ref2$onReply===void 0?function(){}:_ref2$onReply,_ref2$onAddNote=_ref2.onAddNote,onAddNote=_ref2$onAddNote===void 0?function(){}:_ref2$onAddNote,_ref2$onAttachment=_ref2.onAttachment,onAttachment=_ref2$onAttachment===void 0?function(){}:_ref2$onAttachment,attachmentsCount=_ref2.attachmentsCount,Attachments=_ref2.Attachments,_ref2$showCannedRespo=_ref2.showCannedResponsesFor,showCannedResponsesFor=_ref2$showCannedRespo===void 0?[OPTION_TYPES.REPLY]:_ref2$showCannedRespo,_ref2$showSuggestions=_ref2.showSuggestionsFor,showSuggestionsFor=_ref2$showSuggestions===void 0?[OPTION_TYPES.NOTE]:_ref2$showSuggestions,disabled=_ref2.disabled,_ref2$isLoading=_ref2.isLoading,isLoading=_ref2$isLoading===void 0?true:_ref2$isLoading,_ref2$onOptionChange=_ref2.onOptionChange,onOptionChange=_ref2$onOptionChange===void 0?function(){}:_ref2$onOptionChange,_ref2$initialSelected=_ref2.initialSelectedOption,initialSelectedOption=_ref2$initialSelected===void 0?OPTION_TYPES.REPLY:_ref2$initialSelected,suggestions=_ref2.suggestions,rest=(0,_objectWithoutProperties2.default)(_ref2,_excluded);var inputRef=(0,_react.useRef)();var _useState=(0,_react.useState)(initialSelectedOption),_useState2=(0,_slicedToArray2.default)(_useState,2),selectedOption=_useState2[0],setSelectedOption=_useState2[1];var _useState3=(0,_react.useState)(false),_useState4=(0,_slicedToArray2.default)(_useState3,2),isEmailFieldsVisible=_useState4[0],setIsEmailFieldsVisible=_useState4[1];var _useState5=(0,_react.useState)(false),_useState6=(0,_slicedToArray2.default)(_useState5,2),isAttachmentsVisible=_useState6[0],setIsAttachmentsVisible=_useState6[1];var isReplyOptionSelected=selectedOption===OPTION_TYPES.REPLY;var isNoteOptionSelected=selectedOption===OPTION_TYPES.NOTE;var isForwardOptionSelected=selectedOption===OPTION_TYPES.FORWARD;var _useState7=(0,_react.useState)(initialToEmails!=null?initialToEmails:[]),_useState8=(0,_slicedToArray2.default)(_useState7,2),toEmails=_useState8[0],setToEmails=_useState8[1];var _useState9=(0,_react.useState)([]),_useState10=(0,_slicedToArray2.default)(_useState9,2),toEmailsForForward=_useState10[0],setToEmailsForForward=_useState10[1];var _useState11=(0,_react.useState)([]),_useState12=(0,_slicedToArray2.default)(_useState11,2),ccEmails=_useState12[0],setCcEmails=_useState12[1];var _useState13=(0,_react.useState)([]),_useState14=(0,_slicedToArray2.default)(_useState13,2),bccEmails=_useState14[0],setBccEmails=_useState14[1];var moreReplyOptions=[{label:"Send and set as closed",Icon:function Icon(){return null;},onPress:function onPress(){onReply((0,_extends2.default)({toEmails:toEmails,ccEmails:ccEmails,bccEmails:bccEmails,status:"closed"},convertMentionsToHTMLAndPlainText({suggestions:suggestions,value:value})));}}];(0,_react.useImperativeHandle)(ref,function(){return{clearEmailFields:function clearEmailFields(){setToEmails(initialToEmails!=null?initialToEmails:[]);setToEmailsForForward([]);setCcEmails([]);setBccEmails([]);inputRef.current.blur();}};},[initialToEmails,isReplyOptionSelected]);(0,_react.useEffect)(function(){onOptionChange(selectedOption);},[selectedOption]);(0,_react.useEffect)(function(){setSelectedOption(initialSelectedOption);},[initialSelectedOption]);(0,_react.useEffect)(function(){setToEmails(initialToEmails!=null?initialToEmails:[]);},[initialToEmails]);var showEmailFieldsAndAttachments=function showEmailFieldsAndAttachments(){setIsAttachmentsVisible(true);setIsEmailFieldsVisible(true);};var hideEmailFieldsAndAttachments=function hideEmailFieldsAndAttachments(){setIsAttachmentsVisible(false);setIsEmailFieldsVisible(false);};var onReplyClickHandler=function onReplyClickHandler(){hideEmailFieldsAndAttachments();inputRef.current.focus();setSelectedOption(OPTION_TYPES.REPLY);};var onAddNoteClickHandler=function onAddNoteClickHandler(){hideEmailFieldsAndAttachments();inputRef.current.focus();setIsEmailFieldsVisible(false);setSelectedOption(OPTION_TYPES.NOTE);};var onAddForwardClickHandler=function onAddForwardClickHandler(){inputRef.current.focus();setIsEmailFieldsVisible(true);setIsAttachmentsVisible(false);setSelectedOption(OPTION_TYPES.FORWARD);};var onAddAttachmentsClickHandler=function onAddAttachmentsClickHandler(){if(!isAttachmentsVisible&&attachmentsCount>0){}else{onAttachment();}setIsEmailFieldsVisible(false);setIsAttachmentsVisible(true);};var onActionHandler=(0,_react.useCallback)(function(){var _OPTION_TYPES$REPLY$O;(_OPTION_TYPES$REPLY$O={},(0,_defineProperty2.default)(_OPTION_TYPES$REPLY$O,OPTION_TYPES.REPLY,function(){onReply((0,_extends2.default)({toEmails:toEmails,ccEmails:ccEmails,bccEmails:bccEmails},convertMentionsToHTMLAndPlainText({suggestions:suggestions,value:value})));}),(0,_defineProperty2.default)(_OPTION_TYPES$REPLY$O,OPTION_TYPES.NOTE,function(){onAddNote((0,_extends2.default)({toEmails:toEmails,ccEmails:ccEmails,bccEmails:bccEmails},convertMentionsToHTMLAndPlainText({suggestions:suggestions,value:value})));}),(0,_defineProperty2.default)(_OPTION_TYPES$REPLY$O,OPTION_TYPES.FORWARD,function(){onForward((0,_extends2.default)({toEmails:toEmailsForForward,ccEmails:ccEmails,bccEmails:bccEmails},convertMentionsToHTMLAndPlainText({suggestions:suggestions,value:value})));}),_OPTION_TYPES$REPLY$O)[selectedOption]();},[bccEmails,ccEmails,onAddNote,onForward,onReply,selectedOption,suggestions,toEmails,value]);var shouldShowExpandAndMinimizeButton=attachmentsCount>0||toEmails.length>0;var shouldDisableWhenForwardAndToFieldMissing=isForwardOptionSelected&&toEmailsForForward.length===0;return _react.default.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:309,columnNumber:7}},_react.default.createElement(_.LineLoader,{backgroundColor:_theme.theme.colors.background.grey400,isLoading:isLoading,__self:_this,__source:{fileName:_jsxFileName,lineNumber:310,columnNumber:9}}),_react.default.createElement(_.Container,{bg:isNoteOptionSelected?"background.oldLace":"transparent",p:(0,_reactNativeSizeMatters.moderateScale)(5),pt:0,px:(0,_reactNativeSizeMatters.moderateScale)(16),__self:_this,__source:{fileName:_jsxFileName,lineNumber:314,columnNumber:9}},_react.default.createElement(_.Container,{pt:(0,_reactNativeSizeMatters.moderateScale)(8),__self:_this,__source:{fileName:_jsxFileName,lineNumber:320,columnNumber:11}},_react.default.createElement(_EmailFields.EmailFields,{bccEmails:bccEmails,ccEmails:ccEmails,isEmailFieldsVisible:isEmailFieldsVisible,isForwardOptionSelected:isForwardOptionSelected,isNoteOptionSelected:isNoteOptionSelected,isReplyOptionSelected:isReplyOptionSelected,setBccEmails:setBccEmails,setCcEmails:setCcEmails,setIsEmailFieldsVisible:setIsEmailFieldsVisible,setToEmails:setToEmails,setToEmailsForForward:setToEmailsForForward,shouldShowEmailFields:shouldShowEmailFields,toEmails:toEmails,toEmailsForForward:toEmailsForForward,__self:_this,__source:{fileName:_jsxFileName,lineNumber:321,columnNumber:13}}),_react.default.createElement(_.Container,{flexDirection:"row",justifyContent:"space-between",__self:_this,__source:{fileName:_jsxFileName,lineNumber:337,columnNumber:13}},_react.default.createElement(_MentionsInputWrapper.MentionsInputWrapper,(0,_extends2.default)({placeholder:placeholders[selectedOption],ref:inputRef,suggestions:suggestions,value:value,shouldShowSuggestions:showSuggestionsFor.includes(selectedOption),onChange:onChangeText,onTouchStart:hideEmailFieldsAndAttachments},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:338,columnNumber:15}})),_react.default.createElement(_.Container,{alignSelf:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:350,columnNumber:15}},shouldShowExpandAndMinimizeButton&&(isEmailFieldsVisible||isAttachmentsVisible?_react.default.createElement(_IconButton.IconButton,{Icon:_minimize.default,height:(0,_reactNativeSizeMatters.moderateScale)(30),pt:(0,_reactNativeSizeMatters.moderateScale)(8),width:(0,_reactNativeSizeMatters.moderateScale)(30),onPress:hideEmailFieldsAndAttachments,__self:_this,__source:{fileName:_jsxFileName,lineNumber:353,columnNumber:21}}):_react.default.createElement(_IconButton.IconButton,{Icon:_expand.default,height:(0,_reactNativeSizeMatters.moderateScale)(30),pt:(0,_reactNativeSizeMatters.moderateScale)(8),width:(0,_reactNativeSizeMatters.moderateScale)(30),onPress:showEmailFieldsAndAttachments,__self:_this,__source:{fileName:_jsxFileName,lineNumber:361,columnNumber:21}})))),_react.default.createElement(_AttachmentsView.AttachmentsView,{Attachments:Attachments,attachmentsCount:attachmentsCount,isAttachmentsVisible:isAttachmentsVisible,isNoteOptionSelected:isNoteOptionSelected,setIsAttachmentsVisible:setIsAttachmentsVisible,__self:_this,__source:{fileName:_jsxFileName,lineNumber:371,columnNumber:13}}),_react.default.createElement(_.Container,{alignItems:"center",flexDirection:"row",justifyContent:"space-between",mt:(0,_reactNativeSizeMatters.moderateScale)(10),__self:_this,__source:{fileName:_jsxFileName,lineNumber:378,columnNumber:13}},_react.default.createElement(_.Container,{flexDirection:"row",justifyContent:"space-between",__self:_this,__source:{fileName:_jsxFileName,lineNumber:384,columnNumber:15}},_react.default.createElement(_IconButton.IconButton,{Icon:_reply.default,opacity:isReplyOptionSelected?1:0.5,pl:(0,_reactNativeSizeMatters.moderateScale)(10),onPress:onReplyClickHandler,__self:_this,__source:{fileName:_jsxFileName,lineNumber:385,columnNumber:17}}),_react.default.createElement(_IconButton.IconButton,{Icon:_note.default,opacity:isNoteOptionSelected?1:0.5,onPress:onAddNoteClickHandler,__self:_this,__source:{fileName:_jsxFileName,lineNumber:391,columnNumber:17}}),onForward&&_react.default.createElement(_IconButton.IconButton,{Icon:_forward.default,opacity:isForwardOptionSelected?1:0.5,onPress:onAddForwardClickHandler,__self:_this,__source:{fileName:_jsxFileName,lineNumber:397,columnNumber:19}}),_react.default.createElement(_.Container,{bg:"background.grey400",mx:(0,_reactNativeSizeMatters.moderateScale)(5),p:(0,_reactNativeSizeMatters.moderateScale)(0.4),__self:_this,__source:{fileName:_jsxFileName,lineNumber:403,columnNumber:17}}),onCannedResponse&&showCannedResponsesFor.includes(selectedOption)&&_react.default.createElement(_IconButton.IconButton,{Icon:_cannedResponse.default,opacity:0.5,onPress:onCannedResponse,__self:_this,__source:{fileName:_jsxFileName,lineNumber:410,columnNumber:21}}),_react.default.createElement(_IconButton.IconButton,{Icon:_attachment.default,opacity:0.5,onPress:onAddAttachmentsClickHandler,__self:_this,__source:{fileName:_jsxFileName,lineNumber:416,columnNumber:17}})),_react.default.createElement(_.Container,{alignItems:"center",flexDirection:"row",__self:_this,__source:{fileName:_jsxFileName,lineNumber:422,columnNumber:15}},_react.default.createElement(_.Button,{height:(0,_reactNativeSizeMatters.moderateScale)(30),label:labels[selectedOption],pr:0,variant:"text",disabled:shouldDisableWhenForwardAndToFieldMissing||disabled,labelStyle:{mx:(0,_reactNativeSizeMatters.moderateScale)(0)},onPress:onActionHandler,__self:_this,__source:{fileName:_jsxFileName,lineNumber:423,columnNumber:17}}),showReplyMenuOptions&&isReplyOptionSelected&&_react.default.createElement(_.Popover,{data:moreReplyOptions,from:_react.default.createElement(_.Button,{disabled:disabled,height:(0,_reactNativeSizeMatters.moderateScale)(30),label:"",p:0,variant:"text",RightIcon:function RightIcon(){return _react.default.createElement(_reactNativeRemixIcon.default,{color:_theme.theme.colors.background.grey800,name:"ri-arrow-down-s-line",size:(0,_reactNativeSizeMatters.moderateScale)(30),__self:_this,__source:{fileName:_jsxFileName,lineNumber:447,columnNumber:27}});},__self:_this,__source:{fileName:_jsxFileName,lineNumber:440,columnNumber:23}}),__self:_this,__source:{fileName:_jsxFileName,lineNumber:437,columnNumber:19}}))))));});exports.ChatInput=ChatInput;ChatInput.displayName="ChatInput";ChatInput.propTypes={isLoading:_propTypes.default.bool,shouldShowEmailFields:_propTypes.default.bool,showReplyMenuOptions:_propTypes.default.bool,value:_propTypes.default.string,initialSelectedOption:_propTypes.default.oneOf(Object.values(OPTION_TYPES)),onOptionChange:_propTypes.default.func,onChangeText:_propTypes.default.func,onForward:_propTypes.default.func,onCannedResponse:_propTypes.default.func,toEmails:_propTypes.default.arrayOf(_propTypes.default.string),onReply:_propTypes.default.func,onAddNote:_propTypes.default.func,onAttachment:_propTypes.default.func,attachmentsCount:_propTypes.default.number,Attachments:_propTypes.default.any,showCannedResponsesFor:_propTypes.default.arrayOf(_propTypes.default.oneOf(Object.values(OPTION_TYPES))),showSuggestionsFor:_propTypes.default.arrayOf(_propTypes.default.oneOf(Object.values(OPTION_TYPES))),disabled:_propTypes.default.bool,suggestions:_propTypes.default.arrayOf(_propTypes.default.shape({name:_propTypes.default.string,imageUrl:_propTypes.default.string,id:_propTypes.default.string}))};

package/lib/components/ChatInput/MentionsInputWrapper.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.MentionsInputWrapper=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeControlledMentions=require("react-native-controlled-mentions");var _reactNativeSizeMatters=require("react-native-size-matters");var _native=require("styled-components/native");var _=require("./..");var _excluded=["suggestions","shouldShowSuggestions"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/ChatInput/MentionsInputWrapper.jsx";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var MentionsInputWrapper=(0,_react.forwardRef)(function(_ref,ref){var suggestions=_ref.suggestions,shouldShowSuggestions=_ref.shouldShowSuggestions,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var _useState=(0,_react.useState)(0),_useState2=(0,_slicedToArray2.default)(_useState,2),visibleMentionsCount=_useState2[0],setVisibleMentionsCount=_useState2[1];var theme=(0,_react.useContext)(_native.ThemeContext);var heightOfMention=(0,_reactNativeSizeMatters.moderateScale)(50);var mentionsListHeight=visibleMentionsCount*heightOfMention;var renderSuggestions=function renderSuggestions(_ref2){var keyword=_ref2.keyword,onSuggestionPress=_ref2.onSuggestionPress;if(!shouldShowSuggestions)return null;if(keyword===null){if(visibleMentionsCount!==0)setVisibleMentionsCount(0);return null;}var filteredSuggestions=suggestions.filter(function(suggestion){return suggestion.name.toLocaleLowerCase().includes(keyword==null?void 0:keyword.toLocaleLowerCase());});setVisibleMentionsCount(filteredSuggestions.length>4?4:filteredSuggestions.length);return _react.default.createElement(_.Card,{elevation:4,__self:_this,__source:{fileName:_jsxFileName,lineNumber:46,columnNumber:9}},_react.default.createElement(_reactNative.ScrollView,{contentInset:{bottom:(0,_reactNativeSizeMatters.moderateScale)(20)},keyboardShouldPersistTaps:"always",contentContainerStyle:(0,_extends2.default)({},filteredSuggestions.length===0?{height:0}:{height:mentionsListHeight,justifyContent:"flex-end",borderRadius:(0,_reactNativeSizeMatters.moderateScale)(10),backgroundColor:theme.colors.background.grey100}),__self:_this,__source:{fileName:_jsxFileName,lineNumber:47,columnNumber:11}},filteredSuggestions.map(function(suggestion,index){var name=suggestion.name,imageUrl=suggestion.imageUrl;return _react.default.createElement(_.Touchable,(0,_extends2.default)({bg:"background.grey100",width:"100%"},index===0&&{borderTopLeftRadius:(0,_reactNativeSizeMatters.moderateScale)(10),borderTopRightRadius:(0,_reactNativeSizeMatters.moderateScale)(10)},index===filteredSuggestions.length-1&&{borderBottomLeftRadius:(0,_reactNativeSizeMatters.moderateScale)(10),borderBottomRightRadius:(0,_reactNativeSizeMatters.moderateScale)(10)},{height:heightOfMention,key:index,px:(0,_reactNativeSizeMatters.moderateScale)(10),onPress:function onPress(){return onSuggestionPress(suggestion);},__self:_this,__source:{fileName:_jsxFileName,lineNumber:65,columnNumber:17}}),_react.default.createElement(_.Container,{alignItems:"center",flex:1,flexDirection:"row",__self:_this,__source:{fileName:_jsxFileName,lineNumber:81,columnNumber:19}},_react.default.createElement(_.Avatar,{imageUrl:imageUrl,mr:(0,_reactNativeSizeMatters.moderateScale)(8),name:name,variant:"extra-small",__self:_this,__source:{fileName:_jsxFileName,lineNumber:82,columnNumber:21}}),_react.default.createElement(_.Typography,{color:"font.primary",flex:1,fontFamily:"sf400",fontSize:"xs",__self:_this,__source:{fileName:_jsxFileName,lineNumber:88,columnNumber:21}},name)),index!==filteredSuggestions.length-1&&_react.default.createElement(_.Divider,{bg:"border.primary",width:"100%",__self:_this,__source:{fileName:_jsxFileName,lineNumber:98,columnNumber:21}}));})));};return _react.default.createElement(_reactNativeControlledMentions.MentionInput,(0,_extends2.default)({inputRef:ref,suggestions:suggestions,containerStyle:[styles.mentionsTextInputStyle,{minHeight:(0,_reactNativeSizeMatters.moderateScale)(60)+mentionsListHeight}],partTypes:[{isInsertSpaceAfterMention:true,allowedSpacesCount:0,trigger:"@",renderSuggestions:renderSuggestions,textStyle:{fontFamily:theme.fonts.sf700,color:theme.colors.font.base}}]},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:109,columnNumber:7}}));});exports.MentionsInputWrapper=MentionsInputWrapper;MentionsInputWrapper.displayName="MentionsInputWrapper";var styles=_reactNative.StyleSheet.create({mentionsTextInputStyle:{marginVertical:(0,_reactNativeSizeMatters.moderateScale)(10),flex:1,width:"100%"}});MentionsInputWrapper.propTypes={shouldShowSuggestions:_propTypes.default.bool,suggestions:_propTypes.default.arrayOf(_propTypes.default.shape({name:_propTypes.default.string,imageUrl:_propTypes.default.string}))};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.252",
+  "version": "0.0.254",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",
@@ -55,8 +55,10 @@
     "@shopify/flash-list": "^1.2.0",
     "@styled-system/prop-types": "^5.1.5",
     "dayjs": "^1.11.4",
+    "node-html-parser": "^6.1.5",
     "react-content-loader": "^6.2.0",
     "react-native-calendars": "^1.1285.0",
+    "react-native-controlled-mentions": "^2.2.5",
     "react-native-gesture-handler": "^2.4.0",
     "react-native-modal": "^13.0.0",
     "react-native-pell-rich-editor": "^1.8.6",

package/src/components/AnimatedImage.jsx

@@ -128,7 +128,7 @@ AnimatedImage.propTypes = {
   /**
    * Height for image.
    */
-  imageHeight: PropTypes.number,
+  imageHeight: PropTypes.number | PropTypes.string,
   /**
    * Width for image.
    */
@@ -136,5 +136,5 @@ AnimatedImage.propTypes = {
   /**
    * Url to display the Image. It accepts a standard React Native Image source prop Or a function that returns an Image.
    */
-  imageUrl: PropTypes.string.isRequired,
+  imageUrl: PropTypes.string,
 };

package/src/components/ChatInput/ChatInput.jsx

@@ -7,18 +7,10 @@ import React, {
   useImperativeHandle,
 } from "react";
 
+import { parse } from "node-html-parser";
 import PropTypes from "prop-types";
 import Icon from "react-native-remix-icon";
 import { moderateScale } from "react-native-size-matters";
-import styled from "styled-components/native";
-import {
-  flexbox,
-  space,
-  border,
-  buttonStyle,
-  typography,
-  color,
-} from "styled-system";
 
 import AttachmentSVG from "@assets/icons/attachment.svg";
 import CannedResponseSVG from "@assets/icons/canned-response.svg";
@@ -32,15 +24,10 @@ import { Container, LineLoader, Popover, Button } from "@components";
 import { AttachmentsView } from "./AttachmentsView";
 import { EmailFields } from "./EmailFields";
 import { IconButton } from "./IconButton";
+import { MentionsInputWrapper } from "./MentionsInputWrapper";
 
 import { theme } from "../../theme";
 
-const placeholders = {
-  reply: "Type here to reply...",
-  note: "Add note here...",
-  forward: "Type here to forward...",
-};
-
 // eslint-disable-next-line @bigbinary/neeto/no-dangling-constants
 const OPTION_TYPES = {
   REPLY: "REPLY",
@@ -48,20 +35,18 @@ const OPTION_TYPES = {
   FORWARD: "FORWARD",
 };
 
+const placeholders = {
+  [OPTION_TYPES.REPLY]: "Type here to reply…",
+  [OPTION_TYPES.NOTE]: "Add note here…",
+  [OPTION_TYPES.FORWARD]: "Type here to forward…",
+};
+
 const labels = {
   [OPTION_TYPES.REPLY]: "Reply",
   [OPTION_TYPES.NOTE]: "Add note",
   [OPTION_TYPES.FORWARD]: "Forward",
 };
 
-const TextInput = styled.TextInput`
-  ${flexbox}
-  ${space}
-  ${border}
-  ${buttonStyle}
-  ${typography}
-  ${color}
-`;
 /**
  * ChatInput component supports various options like `REPLY`, `NOTE` and `FORWARD`.
  * This component supports below props categories from [styled-system ](/styled-system).
@@ -123,6 +108,35 @@ const TextInput = styled.TextInput`
  * ```
  */
 
+const convertMentionsToHTMLAndPlainText = ({ suggestions, value }) => {
+  const mentionsRegex = new RegExp(/@\[[^)]*\)/g);
+  let html = `<p>${value}</p>`;
+  let plainText = value;
+  const allMentions = html.matchAll(mentionsRegex);
+
+  for (const mentionObject of allMentions) {
+    const mention = mentionObject[0];
+    const id = /\((.*)\)/.exec(mention)[1];
+
+    const suggestion = suggestions.find(suggestion => suggestion.id === id);
+
+    const rootNode = parse("<span></span>");
+    const spanNode = rootNode.querySelector("span");
+
+    spanNode.setAttribute("data-type", "mention");
+    spanNode.setAttribute("data-id", id);
+    spanNode.setAttribute("data-label", suggestion.name);
+    spanNode.set_content(`@${suggestion.name}`);
+    const rootNodeString = rootNode.toString();
+    html = html.replace(mention, rootNodeString);
+
+    const plainTextMention = `@${suggestion.name}`;
+    plainText = plainText.replace(mention, plainTextMention);
+  }
+
+  return { html, plainText };
+};
+
 export const ChatInput = forwardRef(
   (
     {
@@ -139,10 +153,12 @@ export const ChatInput = forwardRef(
       attachmentsCount,
       Attachments,
       showCannedResponsesFor = [OPTION_TYPES.REPLY],
+      showSuggestionsFor = [OPTION_TYPES.NOTE],
       disabled,
       isLoading = true,
       onOptionChange = () => {},
       initialSelectedOption = OPTION_TYPES.REPLY,
+      suggestions,
       ...rest
     },
     ref
@@ -167,7 +183,13 @@ export const ChatInput = forwardRef(
         label: "Send and set as closed",
         Icon: () => null,
         onPress: () => {
-          onReply({ toEmails, ccEmails, bccEmails, status: "closed" });
+          onReply({
+            toEmails,
+            ccEmails,
+            bccEmails,
+            status: "closed",
+            ...convertMentionsToHTMLAndPlainText({ suggestions, value }),
+          });
         },
       },
     ];
@@ -241,13 +263,28 @@ export const ChatInput = forwardRef(
     const onActionHandler = useCallback(() => {
       ({
         [OPTION_TYPES.REPLY]: () => {
-          onReply({ toEmails, ccEmails, bccEmails });
+          onReply({
+            toEmails,
+            ccEmails,
+            bccEmails,
+            ...convertMentionsToHTMLAndPlainText({ suggestions, value }),
+          });
         },
         [OPTION_TYPES.NOTE]: () => {
-          onAddNote({ toEmails, ccEmails, bccEmails });
+          onAddNote({
+            toEmails,
+            ccEmails,
+            bccEmails,
+            ...convertMentionsToHTMLAndPlainText({ suggestions, value }),
+          });
         },
         [OPTION_TYPES.FORWARD]: () => {
-          onForward({ toEmails, ccEmails, bccEmails });
+          onForward({
+            toEmails: toEmailsForForward,
+            ccEmails,
+            bccEmails,
+            ...convertMentionsToHTMLAndPlainText({ suggestions, value }),
+          });
         },
       }[selectedOption]());
     }, [
@@ -257,7 +294,9 @@ export const ChatInput = forwardRef(
       onForward,
       onReply,
       selectedOption,
+      suggestions,
       toEmails,
+      value,
     ]);
 
     const shouldShowExpandAndMinimizeButton =
@@ -296,16 +335,15 @@ export const ChatInput = forwardRef(
               toEmailsForForward={toEmailsForForward}
             />
             <Container flexDirection="row" justifyContent="space-between">
-              <TextInput
-                multiline
-                flex={1}
-                maxHeight={moderateScale(150)}
-                my={moderateScale(12)}
-                overflow="hidden"
+              <MentionsInputWrapper
                 placeholder={placeholders[selectedOption]}
                 ref={inputRef}
+                suggestions={suggestions}
                 value={value}
-                onChangeText={onChangeText}
+                shouldShowSuggestions={showSuggestionsFor.includes(
+                  selectedOption
+                )}
+                onChange={onChangeText}
                 onTouchStart={hideEmailFieldsAndAttachments}
                 {...rest}
               />
@@ -488,13 +526,29 @@ ChatInput.propTypes = {
    */
   Attachments: PropTypes.any,
   /**
-   * Array for options to show canned responses. Example: ["reply","notes","forward"]
+   * Array for options to show canned responses. Example: ["REPLY","NOTES","FORWARD"]
    */
   showCannedResponsesFor: PropTypes.arrayOf(
     PropTypes.oneOf(Object.values(OPTION_TYPES))
   ),
+  /**
+   * Array for options to show suggestions. Example: ["REPLY","NOTES","FORWARD"]
+   */
+  showSuggestionsFor: PropTypes.arrayOf(
+    PropTypes.oneOf(Object.values(OPTION_TYPES))
+  ),
   /**
    * If true, Disables the reply, forward and add note button.
    */
   disabled: PropTypes.bool,
+  /**
+   * List of mentions
+   */
+  suggestions: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string,
+      imageUrl: PropTypes.string,
+      id: PropTypes.string,
+    })
+  ),
 };

package/src/components/ChatInput/MentionsInputWrapper.jsx

@@ -0,0 +1,153 @@
+import React, { forwardRef, useContext, useState } from "react";
+import { ScrollView, StyleSheet } from "react-native";
+
+import PropTypes from "prop-types";
+import { MentionInput } from "react-native-controlled-mentions";
+import { moderateScale } from "react-native-size-matters";
+import { ThemeContext } from "styled-components/native";
+
+import {
+  Touchable,
+  Avatar,
+  Typography,
+  Card,
+  Divider,
+  Container,
+} from "@components";
+
+export const MentionsInputWrapper = forwardRef(
+  ({ suggestions, shouldShowSuggestions, ...rest }, ref) => {
+    const [visibleMentionsCount, setVisibleMentionsCount] = useState(0);
+    const theme = useContext(ThemeContext);
+
+    const heightOfMention = moderateScale(50);
+    const mentionsListHeight = visibleMentionsCount * heightOfMention;
+
+    const renderSuggestions = ({ keyword, onSuggestionPress }) => {
+      if (!shouldShowSuggestions) return null;
+
+      if (keyword === null) {
+        if (visibleMentionsCount !== 0) setVisibleMentionsCount(0);
+
+        return null;
+      }
+
+      const filteredSuggestions = suggestions.filter(suggestion =>
+        suggestion.name
+          .toLocaleLowerCase()
+          .includes(keyword?.toLocaleLowerCase())
+      );
+
+      setVisibleMentionsCount(
+        filteredSuggestions.length > 4 ? 4 : filteredSuggestions.length
+      );
+
+      return (
+        <Card elevation={4}>
+          <ScrollView
+            contentInset={{ bottom: moderateScale(20) }}
+            keyboardShouldPersistTaps="always"
+            contentContainerStyle={{
+              ...(filteredSuggestions.length === 0
+                ? { height: 0 }
+                : {
+                    height: mentionsListHeight,
+                    justifyContent: "flex-end",
+                    borderRadius: moderateScale(10),
+                    backgroundColor: theme.colors.background.grey100,
+                  }),
+            }}
+          >
+            {filteredSuggestions.map((suggestion, index) => {
+              const { name, imageUrl } = suggestion;
+
+              return (
+                <Touchable
+                  bg="background.grey100"
+                  width="100%"
+                  {...(index === 0 && {
+                    borderTopLeftRadius: moderateScale(10),
+                    borderTopRightRadius: moderateScale(10),
+                  })}
+                  {...(index === filteredSuggestions.length - 1 && {
+                    borderBottomLeftRadius: moderateScale(10),
+                    borderBottomRightRadius: moderateScale(10),
+                  })}
+                  height={heightOfMention}
+                  key={index}
+                  px={moderateScale(10)}
+                  onPress={() => onSuggestionPress(suggestion)}
+                >
+                  <Container alignItems="center" flex={1} flexDirection="row">
+                    <Avatar
+                      imageUrl={imageUrl}
+                      mr={moderateScale(8)}
+                      name={name}
+                      variant="extra-small"
+                    />
+                    <Typography
+                      color="font.primary"
+                      flex={1}
+                      fontFamily="sf400"
+                      fontSize="xs"
+                    >
+                      {name}
+                    </Typography>
+                  </Container>
+                  {index !== filteredSuggestions.length - 1 && (
+                    <Divider bg="border.primary" width="100%" />
+                  )}
+                </Touchable>
+              );
+            })}
+          </ScrollView>
+        </Card>
+      );
+    };
+
+    return (
+      <MentionInput
+        inputRef={ref}
+        suggestions={suggestions}
+        containerStyle={[
+          styles.mentionsTextInputStyle,
+          {
+            minHeight: moderateScale(60) + mentionsListHeight,
+          },
+        ]}
+        partTypes={[
+          {
+            isInsertSpaceAfterMention: true,
+            allowedSpacesCount: 0,
+            trigger: "@",
+            renderSuggestions,
+            textStyle: {
+              fontFamily: theme.fonts.sf700,
+              color: theme.colors.font.base,
+            },
+          },
+        ]}
+        {...rest}
+      />
+    );
+  }
+);
+
+MentionsInputWrapper.displayName = "MentionsInputWrapper";
+const styles = StyleSheet.create({
+  mentionsTextInputStyle: {
+    marginVertical: moderateScale(10),
+    flex: 1,
+    width: "100%",
+  },
+});
+
+MentionsInputWrapper.propTypes = {
+  shouldShowSuggestions: PropTypes.bool,
+  suggestions: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string,
+      imageUrl: PropTypes.string,
+    })
+  ),
+};