@bigbinary/neetoui-rn 0.0.248 → 0.0.249

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 _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","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=function ChatInput(_ref){var shouldShowEmailFields=_ref.shouldShowEmailFields,_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),ccEmails=_useState10[0],setCcEmails=_useState10[1];var _useState11=(0,_react.useState)(""),_useState12=(0,_slicedToArray2.default)(_useState11,2),bccEmails=_useState12[0],setBccEmails=_useState12[1];(0,_react.useEffect)(function(){onOptionChange(selectedOption);},[selectedOption]);(0,_react.useEffect)(function(){setSelectedOption(initialSelectedOption);},[initialSelectedOption]);(0,_react.useEffect)(function(){if(isReplyOptionSelected){setToEmails(initialToEmails!=null?initialToEmails:"");}else{setToEmails("");}},[initialToEmails,isReplyOptionSelected]);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 shouldExpandAndMinimizeButton=attachmentsCount>0||toEmails;return _react.default.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:232,columnNumber:5}},_react.default.createElement(_.LineLoader,{backgroundColor:_theme.theme.colors.background.grey400,isLoading:isLoading,__self:_this,__source:{fileName:_jsxFileName,lineNumber:233,columnNumber:7}}),_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:237,columnNumber:7}},_react.default.createElement(_.Container,{pt:(0,_reactNativeSizeMatters.moderateScale)(8),__self:_this,__source:{fileName:_jsxFileName,lineNumber:243,columnNumber:9}},_react.default.createElement(_EmailFields.EmailFields,{bccEmails:bccEmails,ccEmails:ccEmails,isEmailFieldsVisible:isEmailFieldsVisible,setBccEmails:setBccEmails,setCcEmails:setCcEmails,setIsEmailFieldsVisible:setIsEmailFieldsVisible,setToEmails:setToEmails,shouldShowEmailFields:shouldShowEmailFields,toEmails:toEmails,__self:_this,__source:{fileName:_jsxFileName,lineNumber:244,columnNumber:11}}),_react.default.createElement(_.Container,{flexDirection:"row",justifyContent:"space-between",__self:_this,__source:{fileName:_jsxFileName,lineNumber:255,columnNumber:11}},_react.default.createElement(TextInput,(0,_extends2.default)({multiline:true,flex:1,placeholder:placeholders[selectedOption],py:(0,_reactNativeSizeMatters.moderateScale)(12),ref:inputRef,value:value,onChangeText:onChangeText,onTouchStart:hideEmailFieldsAndAttachments},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:256,columnNumber:13}})),_react.default.createElement(_.Container,{alignSelf:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:267,columnNumber:13}},shouldExpandAndMinimizeButton&&(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:270,columnNumber:19}}):_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:278,columnNumber:19}})))),_react.default.createElement(_AttachmentsView.AttachmentsView,{Attachments:Attachments,attachmentsCount:attachmentsCount,isAttachmentsVisible:isAttachmentsVisible,isNoteOptionSelected:isNoteOptionSelected,setIsAttachmentsVisible:setIsAttachmentsVisible,__self:_this,__source:{fileName:_jsxFileName,lineNumber:288,columnNumber:11}}),_react.default.createElement(_.Container,{alignItems:"center",flexDirection:"row",justifyContent:"space-between",mt:(0,_reactNativeSizeMatters.moderateScale)(10),__self:_this,__source:{fileName:_jsxFileName,lineNumber:295,columnNumber:11}},_react.default.createElement(_.Container,{flexDirection:"row",justifyContent:"space-between",__self:_this,__source:{fileName:_jsxFileName,lineNumber:301,columnNumber:13}},_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:302,columnNumber:15}}),_react.default.createElement(_IconButton.IconButton,{Icon:_note.default,opacity:isNoteOptionSelected?1:0.5,onPress:onAddNoteClickHandler,__self:_this,__source:{fileName:_jsxFileName,lineNumber:308,columnNumber:15}}),onForward&&_react.default.createElement(_IconButton.IconButton,{Icon:_forward.default,opacity:isForwardOptionSelected?1:0.5,onPress:onAddForwardClickHandler,__self:_this,__source:{fileName:_jsxFileName,lineNumber:314,columnNumber:17}}),_react.default.createElement(_.Container,{bg:"background.grey400",mx:(0,_reactNativeSizeMatters.moderateScale)(5),p:(0,_reactNativeSizeMatters.moderateScale)(0.4),__self:_this,__source:{fileName:_jsxFileName,lineNumber:320,columnNumber:15}}),onCannedResponse&&showCannedResponsesFor.includes(selectedOption)&&_react.default.createElement(_IconButton.IconButton,{Icon:_cannedResponse.default,opacity:0.5,onPress:onCannedResponse,__self:_this,__source:{fileName:_jsxFileName,lineNumber:327,columnNumber:19}}),_react.default.createElement(_IconButton.IconButton,{Icon:_attachment.default,opacity:0.5,onPress:onAddAttachmentsClickHandler,__self:_this,__source:{fileName:_jsxFileName,lineNumber:333,columnNumber:15}})),_react.default.createElement(_.Button,{disabled:disabled,height:(0,_reactNativeSizeMatters.moderateScale)(30),label:labels[selectedOption],pr:0,variant:"text",labelStyle:{mx:(0,_reactNativeSizeMatters.moderateScale)(0)},onPress:onActionHandler,__self:_this,__source:{fileName:_jsxFileName,lineNumber:339,columnNumber:13}})))));};exports.ChatInput=ChatInput;ChatInput.propTypes={isLoading:_propTypes.default.bool,shouldShowEmailFields:_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.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.string),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 _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};

package/lib/components/ChatInput/EmailFields.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.EmailFields=void 0;var _react=_interopRequireDefault(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _reactNativeSizeMatters=require("react-native-size-matters");var _2=require("./..");var _Badge=require("./Badge");var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/ChatInput/EmailFields.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 EmailFields=function EmailFields(_ref){var _;var shouldShowEmailFields=_ref.shouldShowEmailFields,setIsEmailFieldsVisible=_ref.setIsEmailFieldsVisible,isEmailFieldsVisible=_ref.isEmailFieldsVisible,ccEmails=_ref.ccEmails,toEmails=_ref.toEmails,bccEmails=_ref.bccEmails,setBccEmails=_ref.setBccEmails,setCcEmails=_ref.setCcEmails,setToEmails=_ref.setToEmails;var firstToEmail=(_=(toEmails.trim()?toEmails.split(","):[])[0])!=null?_:"";var totalEmailsMinus1=(toEmails.trim()?toEmails.split(","):[]).length+(ccEmails.trim()?ccEmails.split(","):[]).length+(bccEmails.trim()?bccEmails.split(","):[]).length-1;if(!shouldShowEmailFields)return null;return isEmailFieldsVisible?_react.default.createElement(_reactNativeReanimated.default.View,{entering:_reactNativeReanimated.FadeInDown,key:isEmailFieldsVisible,pb:(0,_reactNativeSizeMatters.moderateScale)(10),__self:_this,__source:{fileName:_jsxFileName,lineNumber:33,columnNumber:5}},_react.default.createElement(_2.InputEmailChip,{disabled:false,emails:toEmails.trim()?toEmails.split(","):[],label:"To:",onUpdate:function onUpdate(emails){setToEmails(emails.join(","));},__self:_this,__source:{fileName:_jsxFileName,lineNumber:38,columnNumber:7}}),_react.default.createElement(_2.InputEmailChip,{disabled:false,emails:ccEmails.trim()?ccEmails.split(","):[],label:"Cc:",onUpdate:function onUpdate(emails){setCcEmails(emails.join(","));},__self:_this,__source:{fileName:_jsxFileName,lineNumber:46,columnNumber:7}}),_react.default.createElement(_2.InputEmailChip,{disabled:false,emails:bccEmails.trim()?bccEmails.split(","):[],label:"Bcc:",onUpdate:function onUpdate(emails){setBccEmails(emails.join(","));},__self:_this,__source:{fileName:_jsxFileName,lineNumber:54,columnNumber:7}})):_react.default.createElement(_reactNativeReanimated.default.View,{alignItems:"flex-start",entering:_reactNativeReanimated.FadeInUp,flexDirection:"row",flexWrap:"wrap",key:isEmailFieldsVisible,onTouchStart:function onTouchStart(){return setIsEmailFieldsVisible(true);},__self:_this,__source:{fileName:_jsxFileName,lineNumber:64,columnNumber:5}},toEmails.length>0&&_react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_Badge.Badge,{text:"To "+firstToEmail,__self:_this,__source:{fileName:_jsxFileName,lineNumber:74,columnNumber:11}}),totalEmailsMinus1>1&&_react.default.createElement(_Badge.Badge,{text:"+ "+totalEmailsMinus1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:75,columnNumber:37}})));};exports.EmailFields=EmailFields;EmailFields.propTypes={shouldShowEmailFields:_propTypes.default.bool,isEmailFieldsVisible:_propTypes.default.bool,setIsEmailFieldsVisible:_propTypes.default.func,ccEmails:_propTypes.default.string,toEmails:_propTypes.default.string,bccEmails:_propTypes.default.string,setBccEmails:_propTypes.default.func,setCcEmails:_propTypes.default.func,setToEmails:_propTypes.default.func};
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.EmailFields=void 0;var _react=_interopRequireDefault(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _reactNativeSizeMatters=require("react-native-size-matters");var _=require("./..");var _Badge=require("./Badge");var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/ChatInput/EmailFields.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 EmailFields=function EmailFields(_ref){var shouldShowEmailFields=_ref.shouldShowEmailFields,setIsEmailFieldsVisible=_ref.setIsEmailFieldsVisible,isEmailFieldsVisible=_ref.isEmailFieldsVisible,toEmails=_ref.toEmails,toEmailsForForward=_ref.toEmailsForForward,ccEmails=_ref.ccEmails,bccEmails=_ref.bccEmails,setToEmails=_ref.setToEmails,setToEmailsForForward=_ref.setToEmailsForForward,setBccEmails=_ref.setBccEmails,setCcEmails=_ref.setCcEmails,isReplyOptionSelected=_ref.isReplyOptionSelected,isNoteOptionSelected=_ref.isNoteOptionSelected,isForwardOptionSelected=_ref.isForwardOptionSelected;var firstToEmail=isReplyOptionSelected?toEmails[0]:toEmailsForForward[0];var badge="";if(firstToEmail){badge="To "+firstToEmail;}else if(isForwardOptionSelected){badge="Click here to enter email id.";}var totalEmailsMinus1=toEmails.length+toEmailsForForward.length+ccEmails.length+bccEmails.length-1;if(!shouldShowEmailFields)return null;return isEmailFieldsVisible?_react.default.createElement(_reactNativeReanimated.default.View,{entering:_reactNativeReanimated.FadeInDown,key:isEmailFieldsVisible,pb:(0,_reactNativeSizeMatters.moderateScale)(10),__self:_this,__source:{fileName:_jsxFileName,lineNumber:48,columnNumber:5}},isReplyOptionSelected&&_react.default.createElement(_.InputEmailChip,{disabled:true,emails:toEmails,label:"To:",onUpdate:setToEmails,__self:_this,__source:{fileName:_jsxFileName,lineNumber:54,columnNumber:9}}),isForwardOptionSelected&&_react.default.createElement(_.InputEmailChip,{disabled:false,emails:toEmailsForForward,label:"To:",onUpdate:setToEmailsForForward,__self:_this,__source:{fileName:_jsxFileName,lineNumber:62,columnNumber:9}}),_react.default.createElement(_.InputEmailChip,{disabled:false,emails:ccEmails,label:"Cc:",onUpdate:setCcEmails,__self:_this,__source:{fileName:_jsxFileName,lineNumber:69,columnNumber:7}}),_react.default.createElement(_.InputEmailChip,{disabled:false,emails:bccEmails,label:"Bcc:",onUpdate:setBccEmails,__self:_this,__source:{fileName:_jsxFileName,lineNumber:75,columnNumber:7}})):_react.default.createElement(_reactNativeReanimated.default.View,{alignItems:"flex-start",entering:_reactNativeReanimated.FadeInUp,flexDirection:"row",flexWrap:"wrap",key:isEmailFieldsVisible,style:isNoteOptionSelected&&{height:(0,_reactNativeSizeMatters.moderateScale)(0),width:(0,_reactNativeSizeMatters.moderateScale)(0)},onTouchStart:function onTouchStart(){return setIsEmailFieldsVisible(true);},__self:_this,__source:{fileName:_jsxFileName,lineNumber:83,columnNumber:5}},toEmails.length>0&&_react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_Badge.Badge,{text:badge,__self:_this,__source:{fileName:_jsxFileName,lineNumber:99,columnNumber:11}}),totalEmailsMinus1>1&&_react.default.createElement(_Badge.Badge,{text:"+ "+totalEmailsMinus1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:100,columnNumber:37}})));};exports.EmailFields=EmailFields;EmailFields.propTypes={shouldShowEmailFields:_propTypes.default.bool,isEmailFieldsVisible:_propTypes.default.bool,setIsEmailFieldsVisible:_propTypes.default.func,ccEmails:_propTypes.default.arrayOf(_propTypes.default.string),toEmails:_propTypes.default.arrayOf(_propTypes.default.string),toEmailsForForward:_propTypes.default.arrayOf(_propTypes.default.string),bccEmails:_propTypes.default.arrayOf(_propTypes.default.string),setBccEmails:_propTypes.default.func,setCcEmails:_propTypes.default.func,setToEmails:_propTypes.default.func,setToEmailsForForward:_propTypes.default.func,isReplyOptionSelected:_propTypes.default.bool,isNoteOptionSelected:_propTypes.default.bool,isForwardOptionSelected:_propTypes.default.bool};

package/lib/components/Popover.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.TouchableOpacity=exports.Popover=void 0;var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativePopoverView=_interopRequireDefault(require("react-native-popover-view"));var _reactNativeSizeMatters=require("react-native-size-matters");var _native=_interopRequireDefault(require("styled-components/native"));var _styledSystem=require("styled-system");var _=require("./");var _excluded=["children","data","fontFamily","fontSize"];var _templateObject,_this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Popover.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 TouchableOpacity=_native.default.TouchableOpacity(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.space,_styledSystem.border,_styledSystem.color,_styledSystem.flexbox,_styledSystem.layout);exports.TouchableOpacity=TouchableOpacity;var PopOverItem=function PopOverItem(_ref){var item=_ref.item,onPress=_ref.onPress,fontFamily=_ref.fontFamily,fontSize=_ref.fontSize;var Icon=item.Icon,label=item.label,labelProps=item.labelProps;return _react.default.createElement(TouchableOpacity,{alignItems:"center",flexDirection:"row",p:(0,_reactNativeSizeMatters.moderateScale)(2),px:(0,_reactNativeSizeMatters.moderateScale)(3),onPress:onPress,__self:_this,__source:{fileName:_jsxFileName,lineNumber:24,columnNumber:5}},_react.default.createElement(Icon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:31,columnNumber:7}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontColor:"font.primary",fontFamily:fontFamily,fontSize:fontSize,px:(0,_reactNativeSizeMatters.moderateScale)(2)},labelProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:32,columnNumber:7}}),label));};PopOverItem.propTypes={item:_propTypes.default.object,onPress:_propTypes.default.func,fontFamily:_propTypes.default.string,fontSize:_propTypes.default.oneOfType([_propTypes.default.number,_propTypes.default.oneOf(["3xs","2xs","xs","s","m","l","xl","2xl","3xl","4xl","5xl"])])};var Popover=function Popover(_ref2){var children=_ref2.children,data=_ref2.data,_ref2$fontFamily=_ref2.fontFamily,fontFamily=_ref2$fontFamily===void 0?null:_ref2$fontFamily,_ref2$fontSize=_ref2.fontSize,fontSize=_ref2$fontSize===void 0?"l":_ref2$fontSize,rest=(0,_objectWithoutProperties2.default)(_ref2,_excluded);var popoverRef=(0,_react.useRef)();var onPressItemRef=(0,_react.useRef)(function(){});return _react.default.createElement(_reactNativePopoverView.default,(0,_extends2.default)({popoverStyle:styles.popoverStyle,ref:popoverRef,onCloseComplete:function onCloseComplete(){return onPressItemRef.current();},onOpenStart:function onOpenStart(){onPressItemRef.current=function(){};}},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:159,columnNumber:5}}),data==null?void 0:data.map(function(item,index){return _react.default.createElement(PopOverItem,{fontFamily:fontFamily,fontSize:fontSize,item:item,key:index,onPress:function onPress(){var _popoverRef$current;popoverRef==null?void 0:(_popoverRef$current=popoverRef.current)==null?void 0:_popoverRef$current.setState({isVisible:false});onPressItemRef.current=item.onPress;},__self:_this,__source:{fileName:_jsxFileName,lineNumber:169,columnNumber:9}});}),children);};exports.Popover=Popover;Popover.propTypes={children:_propTypes.default.node,data:_propTypes.default.array,fontFamily:_propTypes.default.string,fontSize:_propTypes.default.oneOfType([_propTypes.default.number,_propTypes.default.oneOf(["xs","s","m","l","xl","xxl"])])};var styles=_reactNative.StyleSheet.create({popoverStyle:{borderRadius:(0,_reactNativeSizeMatters.moderateScale)(15),padding:(0,_reactNativeSizeMatters.moderateScale)(5)}});
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.TouchableOpacity=exports.Popover=void 0;var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativePopoverView=_interopRequireDefault(require("react-native-popover-view"));var _reactNativeSizeMatters=require("react-native-size-matters");var _native=_interopRequireDefault(require("styled-components/native"));var _styledSystem=require("styled-system");var _=require("./");var _excluded=["children","data","fontFamily","fontSize"];var _templateObject,_this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Popover.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 TouchableOpacity=_native.default.TouchableOpacity(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.space,_styledSystem.border,_styledSystem.color,_styledSystem.flexbox,_styledSystem.layout);exports.TouchableOpacity=TouchableOpacity;var PopOverItem=function PopOverItem(_ref){var item=_ref.item,onPress=_ref.onPress,fontFamily=_ref.fontFamily,fontSize=_ref.fontSize,shouldShowDivider=_ref.shouldShowDivider;var Icon=item.Icon,label=item.label,labelProps=item.labelProps;return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(TouchableOpacity,{alignItems:"center",flexDirection:"row",p:(0,_reactNativeSizeMatters.moderateScale)(2),px:(0,_reactNativeSizeMatters.moderateScale)(8),py:(0,_reactNativeSizeMatters.moderateScale)(8),onPress:onPress,__self:_this,__source:{fileName:_jsxFileName,lineNumber:31,columnNumber:7}},_react.default.createElement(Icon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:39,columnNumber:9}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontColor:"font.primary",fontFamily:fontFamily,fontSize:fontSize,px:(0,_reactNativeSizeMatters.moderateScale)(2)},labelProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:40,columnNumber:9}}),label)),shouldShowDivider&&_react.default.createElement(_.Divider,{backgroundColor:"background.grey200",mx:(0,_reactNativeSizeMatters.moderateScale)(8),__self:_this,__source:{fileName:_jsxFileName,lineNumber:51,columnNumber:9}}));};PopOverItem.propTypes={shouldShowDivider:_propTypes.default.bool,item:_propTypes.default.object,onPress:_propTypes.default.func,fontFamily:_propTypes.default.string,fontSize:_propTypes.default.oneOfType([_propTypes.default.number,_propTypes.default.oneOf(["3xs","2xs","xs","s","m","l","xl","2xl","3xl","4xl","5xl"])])};var Popover=function Popover(_ref2){var children=_ref2.children,data=_ref2.data,_ref2$fontFamily=_ref2.fontFamily,fontFamily=_ref2$fontFamily===void 0?null:_ref2$fontFamily,_ref2$fontSize=_ref2.fontSize,fontSize=_ref2$fontSize===void 0?"l":_ref2$fontSize,rest=(0,_objectWithoutProperties2.default)(_ref2,_excluded);var popoverRef=(0,_react.useRef)();var onPressItemRef=(0,_react.useRef)(function(){});return _react.default.createElement(_reactNativePopoverView.default,(0,_extends2.default)({popoverStyle:styles.popoverStyle,ref:popoverRef,onCloseComplete:function onCloseComplete(){return onPressItemRef.current();},onOpenStart:function onOpenStart(){onPressItemRef.current=function(){};}},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:172,columnNumber:5}}),data==null?void 0:data.map(function(item,index){return _react.default.createElement(PopOverItem,{fontFamily:fontFamily,fontSize:fontSize,item:item,key:index,shouldShowDivider:index!==data.length-1,onPress:function onPress(){var _popoverRef$current;popoverRef==null?void 0:(_popoverRef$current=popoverRef.current)==null?void 0:_popoverRef$current.setState({isVisible:false});onPressItemRef.current=item.onPress;},__self:_this,__source:{fileName:_jsxFileName,lineNumber:182,columnNumber:9}});}),children);};exports.Popover=Popover;Popover.propTypes={children:_propTypes.default.node,data:_propTypes.default.array,fontFamily:_propTypes.default.string,fontSize:_propTypes.default.oneOfType([_propTypes.default.number,_propTypes.default.oneOf(["xs","s","m","l","xl","xxl"])])};var styles=_reactNative.StyleSheet.create({popoverStyle:{borderRadius:(0,_reactNativeSizeMatters.moderateScale)(10),padding:(0,_reactNativeSizeMatters.moderateScale)(5)}});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.248",
+  "version": "0.0.249",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",

package/src/components/ChatInput/ChatInput.jsx

@@ -1,6 +1,14 @@
-import React, { useEffect, useRef, useCallback, useState } from "react";
+import React, {
+  useEffect,
+  useRef,
+  useCallback,
+  useState,
+  forwardRef,
+  useImperativeHandle,
+} from "react";
 
 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 {
@@ -19,7 +27,7 @@ import ForwardSVG from "@assets/icons/forward.svg";
 import MinimizeSVG from "@assets/icons/minimize.svg";
 import NoteSVG from "@assets/icons/note.svg";
 import ReplySVG from "@assets/icons/reply.svg";
-import { Container, LineLoader, Button } from "@components";
+import { Container, LineLoader, Popover, Button } from "@components";
 
 import { AttachmentsView } from "./AttachmentsView";
 import { EmailFields } from "./EmailFields";
@@ -115,245 +123,309 @@ const TextInput = styled.TextInput`
  * ```
  */
 
-export const ChatInput = ({
-  shouldShowEmailFields,
-  value = "",
-  onChangeText = () => {},
-  onForward,
-  onCannedResponse,
-  toEmails: initialToEmails,
-  onReply = () => {},
-  onAddNote = () => {},
-  onAttachment = () => {},
-  attachmentsCount,
-  Attachments,
-  showCannedResponsesFor = [OPTION_TYPES.REPLY],
-  disabled,
-  isLoading = true,
-  onOptionChange = () => {},
-  initialSelectedOption = OPTION_TYPES.REPLY,
-  ...rest
-}) => {
-  const inputRef = useRef();
+export const ChatInput = forwardRef(
+  (
+    {
+      shouldShowEmailFields,
+      showReplyMenuOptions,
+      value = "",
+      onChangeText = () => {},
+      onForward,
+      onCannedResponse,
+      toEmails: initialToEmails,
+      onReply = () => {},
+      onAddNote = () => {},
+      onAttachment = () => {},
+      attachmentsCount,
+      Attachments,
+      showCannedResponsesFor = [OPTION_TYPES.REPLY],
+      disabled,
+      isLoading = true,
+      onOptionChange = () => {},
+      initialSelectedOption = OPTION_TYPES.REPLY,
+      ...rest
+    },
+    ref
+  ) => {
+    const inputRef = useRef();
 
-  const [selectedOption, setSelectedOption] = useState(initialSelectedOption);
-  const [isEmailFieldsVisible, setIsEmailFieldsVisible] = useState(false);
-  const [isAttachmentsVisible, setIsAttachmentsVisible] = useState(false);
+    const [selectedOption, setSelectedOption] = useState(initialSelectedOption);
+    const [isEmailFieldsVisible, setIsEmailFieldsVisible] = useState(false);
+    const [isAttachmentsVisible, setIsAttachmentsVisible] = useState(false);
 
-  const isReplyOptionSelected = selectedOption === OPTION_TYPES.REPLY;
-  const isNoteOptionSelected = selectedOption === OPTION_TYPES.NOTE;
-  const isForwardOptionSelected = selectedOption === OPTION_TYPES.FORWARD;
+    const isReplyOptionSelected = selectedOption === OPTION_TYPES.REPLY;
+    const isNoteOptionSelected = selectedOption === OPTION_TYPES.NOTE;
+    const isForwardOptionSelected = selectedOption === OPTION_TYPES.FORWARD;
 
-  const [toEmails, setToEmails] = useState(initialToEmails ?? "");
-  const [ccEmails, setCcEmails] = useState("");
-  const [bccEmails, setBccEmails] = useState("");
+    const [toEmails, setToEmails] = useState(initialToEmails ?? []);
+    const [toEmailsForForward, setToEmailsForForward] = useState([]);
+    const [ccEmails, setCcEmails] = useState([]);
+    const [bccEmails, setBccEmails] = useState([]);
 
-  useEffect(() => {
-    onOptionChange(selectedOption);
-  }, [selectedOption]);
+    const moreReplyOptions = [
+      {
+        label: "Send and set as closed",
+        Icon: () => null,
+        onPress: () => {
+          onReply({ toEmails, ccEmails, bccEmails, status: "closed" });
+        },
+      },
+    ];
 
-  useEffect(() => {
-    setSelectedOption(initialSelectedOption);
-  }, [initialSelectedOption]);
+    useImperativeHandle(
+      ref,
+      () => ({
+        clearEmailFields: () => {
+          setToEmails(initialToEmails ?? []);
+          setToEmailsForForward([]);
+          setCcEmails([]);
+          setBccEmails([]);
+          inputRef.current.blur();
+        },
+      }),
+      [initialToEmails, isReplyOptionSelected]
+    );
 
-  useEffect(() => {
-    if (isReplyOptionSelected) {
-      setToEmails(initialToEmails ?? "");
-    } else {
-      setToEmails("");
-    }
-  }, [initialToEmails, isReplyOptionSelected]);
+    useEffect(() => {
+      onOptionChange(selectedOption);
+    }, [selectedOption]);
 
-  const showEmailFieldsAndAttachments = () => {
-    setIsAttachmentsVisible(true);
-    setIsEmailFieldsVisible(true);
-  };
+    useEffect(() => {
+      setSelectedOption(initialSelectedOption);
+    }, [initialSelectedOption]);
 
-  const hideEmailFieldsAndAttachments = () => {
-    setIsAttachmentsVisible(false);
-    setIsEmailFieldsVisible(false);
-  };
+    useEffect(() => {
+      setToEmails(initialToEmails ?? []);
+    }, [initialToEmails]);
 
-  const onReplyClickHandler = () => {
-    hideEmailFieldsAndAttachments();
-    inputRef.current.focus();
-    setSelectedOption(OPTION_TYPES.REPLY);
-  };
+    const showEmailFieldsAndAttachments = () => {
+      setIsAttachmentsVisible(true);
+      setIsEmailFieldsVisible(true);
+    };
 
-  const onAddNoteClickHandler = () => {
-    hideEmailFieldsAndAttachments();
-    inputRef.current.focus();
-    setIsEmailFieldsVisible(false);
-    setSelectedOption(OPTION_TYPES.NOTE);
-  };
+    const hideEmailFieldsAndAttachments = () => {
+      setIsAttachmentsVisible(false);
+      setIsEmailFieldsVisible(false);
+    };
 
-  const onAddForwardClickHandler = () => {
-    inputRef.current.focus();
-    setIsEmailFieldsVisible(true);
-    setIsAttachmentsVisible(false);
-    setSelectedOption(OPTION_TYPES.FORWARD);
-  };
+    const onReplyClickHandler = () => {
+      hideEmailFieldsAndAttachments();
+      inputRef.current.focus();
+      setSelectedOption(OPTION_TYPES.REPLY);
+    };
 
-  const onAddAttachmentsClickHandler = () => {
-    if (!isAttachmentsVisible && attachmentsCount > 0) {
-      // When attachments are not visible but there are few attachments then we no need to show the upload modal.
-    } else {
-      onAttachment();
-    }
-    setIsEmailFieldsVisible(false);
-    setIsAttachmentsVisible(true);
-  };
+    const onAddNoteClickHandler = () => {
+      hideEmailFieldsAndAttachments();
+      inputRef.current.focus();
+      setIsEmailFieldsVisible(false);
+      setSelectedOption(OPTION_TYPES.NOTE);
+    };
 
-  const onActionHandler = useCallback(() => {
-    ({
-      [OPTION_TYPES.REPLY]: () => {
-        onReply({ toEmails, ccEmails, bccEmails });
-      },
-      [OPTION_TYPES.NOTE]: () => {
-        onAddNote({ toEmails, ccEmails, bccEmails });
-      },
-      [OPTION_TYPES.FORWARD]: () => {
-        onForward({ toEmails, ccEmails, bccEmails });
-      },
-    }[selectedOption]());
-  }, [
-    bccEmails,
-    ccEmails,
-    onAddNote,
-    onForward,
-    onReply,
-    selectedOption,
-    toEmails,
-  ]);
+    const onAddForwardClickHandler = () => {
+      inputRef.current.focus();
+      setIsEmailFieldsVisible(true);
+      setIsAttachmentsVisible(false);
+      setSelectedOption(OPTION_TYPES.FORWARD);
+    };
 
-  const shouldExpandAndMinimizeButton = attachmentsCount > 0 || toEmails;
+    const onAddAttachmentsClickHandler = () => {
+      if (!isAttachmentsVisible && attachmentsCount > 0) {
+        // When attachments are not visible but there are few attachments then we no need to show the upload modal.
+      } else {
+        onAttachment();
+      }
+      setIsEmailFieldsVisible(false);
+      setIsAttachmentsVisible(true);
+    };
 
-  return (
-    <Container>
-      <LineLoader
-        backgroundColor={theme.colors.background.grey400}
-        isLoading={isLoading}
-      />
-      <Container
-        bg={isNoteOptionSelected ? "background.oldLace" : "transparent"}
-        p={moderateScale(5)}
-        pt={0}
-        px={moderateScale(16)}
-      >
-        <Container pt={moderateScale(8)}>
-          <EmailFields
-            bccEmails={bccEmails}
-            ccEmails={ccEmails}
-            isEmailFieldsVisible={isEmailFieldsVisible}
-            setBccEmails={setBccEmails}
-            setCcEmails={setCcEmails}
-            setIsEmailFieldsVisible={setIsEmailFieldsVisible}
-            setToEmails={setToEmails}
-            shouldShowEmailFields={shouldShowEmailFields}
-            toEmails={toEmails}
-          />
-          <Container flexDirection="row" justifyContent="space-between">
-            <TextInput
-              multiline
-              flex={1}
-              placeholder={placeholders[selectedOption]}
-              py={moderateScale(12)}
-              ref={inputRef}
-              value={value}
-              onChangeText={onChangeText}
-              onTouchStart={hideEmailFieldsAndAttachments}
-              {...rest}
+    const onActionHandler = useCallback(() => {
+      ({
+        [OPTION_TYPES.REPLY]: () => {
+          onReply({ toEmails, ccEmails, bccEmails });
+        },
+        [OPTION_TYPES.NOTE]: () => {
+          onAddNote({ toEmails, ccEmails, bccEmails });
+        },
+        [OPTION_TYPES.FORWARD]: () => {
+          onForward({ toEmails, ccEmails, bccEmails });
+        },
+      }[selectedOption]());
+    }, [
+      bccEmails,
+      ccEmails,
+      onAddNote,
+      onForward,
+      onReply,
+      selectedOption,
+      toEmails,
+    ]);
+
+    const shouldShowExpandAndMinimizeButton =
+      attachmentsCount > 0 || toEmails.length > 0;
+
+    const shouldDisableWhenForwardAndToFieldMissing =
+      isForwardOptionSelected && toEmailsForForward.length === 0;
+
+    return (
+      <Container>
+        <LineLoader
+          backgroundColor={theme.colors.background.grey400}
+          isLoading={isLoading}
+        />
+        <Container
+          bg={isNoteOptionSelected ? "background.oldLace" : "transparent"}
+          p={moderateScale(5)}
+          pt={0}
+          px={moderateScale(16)}
+        >
+          <Container pt={moderateScale(8)}>
+            <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}
             />
-            <Container alignSelf="center">
-              {shouldExpandAndMinimizeButton &&
-                (isEmailFieldsVisible || isAttachmentsVisible ? (
-                  <IconButton
-                    Icon={MinimizeSVG}
-                    height={moderateScale(30)}
-                    pt={moderateScale(8)}
-                    width={moderateScale(30)}
-                    onPress={hideEmailFieldsAndAttachments}
-                  />
-                ) : (
-                  <IconButton
-                    Icon={ExpandSVG}
-                    height={moderateScale(30)}
-                    pt={moderateScale(8)}
-                    width={moderateScale(30)}
-                    onPress={showEmailFieldsAndAttachments}
-                  />
-                ))}
-            </Container>
-          </Container>
-          <AttachmentsView
-            Attachments={Attachments}
-            attachmentsCount={attachmentsCount}
-            isAttachmentsVisible={isAttachmentsVisible}
-            isNoteOptionSelected={isNoteOptionSelected}
-            setIsAttachmentsVisible={setIsAttachmentsVisible}
-          />
-          <Container
-            alignItems="center"
-            flexDirection="row"
-            justifyContent="space-between"
-            mt={moderateScale(10)}
-          >
             <Container flexDirection="row" justifyContent="space-between">
-              <IconButton
-                Icon={ReplySVG}
-                opacity={isReplyOptionSelected ? 1 : 0.5}
-                pl={moderateScale(10)}
-                onPress={onReplyClickHandler}
-              />
-              <IconButton
-                Icon={NoteSVG}
-                opacity={isNoteOptionSelected ? 1 : 0.5}
-                onPress={onAddNoteClickHandler}
+              <TextInput
+                multiline
+                flex={1}
+                maxHeight={moderateScale(150)}
+                my={moderateScale(12)}
+                overflow="hidden"
+                placeholder={placeholders[selectedOption]}
+                ref={inputRef}
+                value={value}
+                onChangeText={onChangeText}
+                onTouchStart={hideEmailFieldsAndAttachments}
+                {...rest}
               />
-              {onForward && (
+              <Container alignSelf="center">
+                {shouldShowExpandAndMinimizeButton &&
+                  (isEmailFieldsVisible || isAttachmentsVisible ? (
+                    <IconButton
+                      Icon={MinimizeSVG}
+                      height={moderateScale(30)}
+                      pt={moderateScale(8)}
+                      width={moderateScale(30)}
+                      onPress={hideEmailFieldsAndAttachments}
+                    />
+                  ) : (
+                    <IconButton
+                      Icon={ExpandSVG}
+                      height={moderateScale(30)}
+                      pt={moderateScale(8)}
+                      width={moderateScale(30)}
+                      onPress={showEmailFieldsAndAttachments}
+                    />
+                  ))}
+              </Container>
+            </Container>
+            <AttachmentsView
+              Attachments={Attachments}
+              attachmentsCount={attachmentsCount}
+              isAttachmentsVisible={isAttachmentsVisible}
+              isNoteOptionSelected={isNoteOptionSelected}
+              setIsAttachmentsVisible={setIsAttachmentsVisible}
+            />
+            <Container
+              alignItems="center"
+              flexDirection="row"
+              justifyContent="space-between"
+              mt={moderateScale(10)}
+            >
+              <Container flexDirection="row" justifyContent="space-between">
                 <IconButton
-                  Icon={ForwardSVG}
-                  opacity={isForwardOptionSelected ? 1 : 0.5}
-                  onPress={onAddForwardClickHandler}
+                  Icon={ReplySVG}
+                  opacity={isReplyOptionSelected ? 1 : 0.5}
+                  pl={moderateScale(10)}
+                  onPress={onReplyClickHandler}
                 />
-              )}
-              <Container
-                bg="background.grey400"
-                mx={moderateScale(5)}
-                p={moderateScale(0.4)}
-              />
-              {onCannedResponse &&
-                showCannedResponsesFor.includes(selectedOption) && (
+                <IconButton
+                  Icon={NoteSVG}
+                  opacity={isNoteOptionSelected ? 1 : 0.5}
+                  onPress={onAddNoteClickHandler}
+                />
+                {onForward && (
                   <IconButton
-                    Icon={CannedResponseSVG}
-                    opacity={0.5}
-                    onPress={onCannedResponse}
+                    Icon={ForwardSVG}
+                    opacity={isForwardOptionSelected ? 1 : 0.5}
+                    onPress={onAddForwardClickHandler}
                   />
                 )}
-              <IconButton
-                Icon={AttachmentSVG}
-                opacity={0.5}
-                onPress={onAddAttachmentsClickHandler}
-              />
+                <Container
+                  bg="background.grey400"
+                  mx={moderateScale(5)}
+                  p={moderateScale(0.4)}
+                />
+                {onCannedResponse &&
+                  showCannedResponsesFor.includes(selectedOption) && (
+                    <IconButton
+                      Icon={CannedResponseSVG}
+                      opacity={0.5}
+                      onPress={onCannedResponse}
+                    />
+                  )}
+                <IconButton
+                  Icon={AttachmentSVG}
+                  opacity={0.5}
+                  onPress={onAddAttachmentsClickHandler}
+                />
+              </Container>
+              <Container alignItems="center" flexDirection="row">
+                <Button
+                  height={moderateScale(30)}
+                  label={labels[selectedOption]}
+                  pr={0}
+                  variant="text"
+                  disabled={
+                    shouldDisableWhenForwardAndToFieldMissing || disabled
+                  }
+                  labelStyle={{
+                    mx: moderateScale(0),
+                  }}
+                  onPress={onActionHandler}
+                />
+                {showReplyMenuOptions && isReplyOptionSelected && (
+                  <Popover
+                    data={moreReplyOptions}
+                    from={
+                      <Button
+                        disabled={disabled}
+                        height={moderateScale(30)}
+                        label=""
+                        p={0}
+                        variant="text"
+                        RightIcon={() => (
+                          <Icon
+                            color={theme.colors.background.grey800}
+                            name="ri-arrow-down-s-line"
+                            size={moderateScale(30)}
+                          />
+                        )}
+                      />
+                    }
+                  />
+                )}
+              </Container>
             </Container>
-            <Button
-              disabled={disabled}
-              height={moderateScale(30)}
-              label={labels[selectedOption]}
-              pr={0}
-              variant="text"
-              labelStyle={{
-                mx: moderateScale(0),
-              }}
-              onPress={onActionHandler}
-            />
           </Container>
         </Container>
       </Container>
-    </Container>
-  );
-};
+    );
+  }
+);
 
+ChatInput.displayName = "ChatInput";
 ChatInput.propTypes = {
   /**
    * If true, Shows loader
@@ -363,6 +435,10 @@ ChatInput.propTypes = {
    * If true, Shows to, cc and bcc email inputs.
    */
   shouldShowEmailFields: PropTypes.bool,
+  /**
+   * If true, Shows reply menu options
+   */
+  showReplyMenuOptions: PropTypes.bool,
   /**
    * Value to make input component controllable.
    */
@@ -390,7 +466,7 @@ ChatInput.propTypes = {
   /**
    * Email list separated by comma.
    */
-  toEmails: PropTypes.string,
+  toEmails: PropTypes.arrayOf(PropTypes.string),
   /**
    * Callback to be called on click of reply icon.
    */
@@ -414,7 +490,9 @@ ChatInput.propTypes = {
   /**
    * Array for options to show canned responses. Example: ["reply","notes","forward"]
    */
-  showCannedResponsesFor: PropTypes.arrayOf(PropTypes.string),
+  showCannedResponsesFor: PropTypes.arrayOf(
+    PropTypes.oneOf(Object.values(OPTION_TYPES))
+  ),
   /**
    * If true, Disables the reply, forward and add note button.
    */

package/src/components/ChatInput/EmailFields.jsx

@@ -12,19 +12,34 @@ export const EmailFields = ({
   shouldShowEmailFields,
   setIsEmailFieldsVisible,
   isEmailFieldsVisible,
-  ccEmails,
   toEmails,
+  toEmailsForForward,
+  ccEmails,
   bccEmails,
+  setToEmails,
+  setToEmailsForForward,
   setBccEmails,
   setCcEmails,
-  setToEmails,
+  isReplyOptionSelected,
+  isNoteOptionSelected,
+  isForwardOptionSelected,
 }) => {
-  const firstToEmail = (toEmails.trim() ? toEmails.split(",") : [])[0] ?? "";
+  const firstToEmail = isReplyOptionSelected
+    ? toEmails[0]
+    : toEmailsForForward[0];
+
+  let badge = "";
+  if (firstToEmail) {
+    badge = `To ${firstToEmail}`;
+  } else if (isForwardOptionSelected) {
+    badge = "Click here to enter email id.";
+  }
 
   const totalEmailsMinus1 =
-    (toEmails.trim() ? toEmails.split(",") : []).length +
-    (ccEmails.trim() ? ccEmails.split(",") : []).length +
-    (bccEmails.trim() ? bccEmails.split(",") : []).length -
+    toEmails.length +
+    toEmailsForForward.length +
+    ccEmails.length +
+    bccEmails.length -
     1;
 
   if (!shouldShowEmailFields) return null;
@@ -35,29 +50,33 @@ export const EmailFields = ({
       key={isEmailFieldsVisible}
       pb={moderateScale(10)}
     >
+      {isReplyOptionSelected && (
+        <InputEmailChip
+          disabled
+          emails={toEmails}
+          label="To:"
+          onUpdate={setToEmails}
+        />
+      )}
+      {isForwardOptionSelected && (
+        <InputEmailChip
+          disabled={false}
+          emails={toEmailsForForward}
+          label="To:"
+          onUpdate={setToEmailsForForward}
+        />
+      )}
       <InputEmailChip
         disabled={false}
-        emails={toEmails.trim() ? toEmails.split(",") : []}
-        label="To:"
-        onUpdate={emails => {
-          setToEmails(emails.join(","));
-        }}
-      />
-      <InputEmailChip
-        disabled={false}
-        emails={ccEmails.trim() ? ccEmails.split(",") : []}
+        emails={ccEmails}
         label="Cc:"
-        onUpdate={emails => {
-          setCcEmails(emails.join(","));
-        }}
+        onUpdate={setCcEmails}
       />
       <InputEmailChip
         disabled={false}
-        emails={bccEmails.trim() ? bccEmails.split(",") : []}
+        emails={bccEmails}
         label="Bcc:"
-        onUpdate={emails => {
-          setBccEmails(emails.join(","));
-        }}
+        onUpdate={setBccEmails}
       />
     </Animated.View>
   ) : (
@@ -67,11 +86,17 @@ export const EmailFields = ({
       flexDirection="row"
       flexWrap="wrap"
       key={isEmailFieldsVisible}
+      style={
+        isNoteOptionSelected && {
+          height: moderateScale(0),
+          width: moderateScale(0),
+        }
+      }
       onTouchStart={() => setIsEmailFieldsVisible(true)}
     >
       {toEmails.length > 0 && (
         <>
-          <Badge text={`To ${firstToEmail}`} />
+          <Badge text={badge} />
           {totalEmailsMinus1 > 1 && <Badge text={`+ ${totalEmailsMinus1}`} />}
         </>
       )}
@@ -83,10 +108,15 @@ EmailFields.propTypes = {
   shouldShowEmailFields: PropTypes.bool,
   isEmailFieldsVisible: PropTypes.bool,
   setIsEmailFieldsVisible: PropTypes.func,
-  ccEmails: PropTypes.string,
-  toEmails: PropTypes.string,
-  bccEmails: PropTypes.string,
+  ccEmails: PropTypes.arrayOf(PropTypes.string),
+  toEmails: PropTypes.arrayOf(PropTypes.string),
+  toEmailsForForward: PropTypes.arrayOf(PropTypes.string),
+  bccEmails: PropTypes.arrayOf(PropTypes.string),
   setBccEmails: PropTypes.func,
   setCcEmails: PropTypes.func,
   setToEmails: PropTypes.func,
+  setToEmailsForForward: PropTypes.func,
+  isReplyOptionSelected: PropTypes.bool,
+  isNoteOptionSelected: PropTypes.bool,
+  isForwardOptionSelected: PropTypes.bool,
 };

package/src/components/Popover.jsx

@@ -7,7 +7,7 @@ import { moderateScale } from "react-native-size-matters";
 import styled from "styled-components/native";
 import { flexbox, space, border, color, layout } from "styled-system";
 
-import { Typography } from "@components";
+import { Typography, Divider } from "@components";
 
 export const TouchableOpacity = styled.TouchableOpacity`
   ${space}
@@ -17,32 +17,45 @@ export const TouchableOpacity = styled.TouchableOpacity`
   ${layout}
 `;
 
-const PopOverItem = ({ item, onPress, fontFamily, fontSize }) => {
+const PopOverItem = ({
+  item,
+  onPress,
+  fontFamily,
+  fontSize,
+  shouldShowDivider,
+}) => {
   const { Icon, label, labelProps } = item;
 
   return (
-    <TouchableOpacity
-      alignItems="center"
-      flexDirection="row"
-      p={moderateScale(2)}
-      px={moderateScale(3)}
-      onPress={onPress}
-    >
-      <Icon />
-      <Typography
-        fontColor="font.primary"
-        fontFamily={fontFamily}
-        fontSize={fontSize}
-        px={moderateScale(2)}
-        {...labelProps}
+    <>
+      <TouchableOpacity
+        alignItems="center"
+        flexDirection="row"
+        p={moderateScale(2)}
+        px={moderateScale(8)}
+        py={moderateScale(8)}
+        onPress={onPress}
       >
-        {label}
-      </Typography>
-    </TouchableOpacity>
+        <Icon />
+        <Typography
+          fontColor="font.primary"
+          fontFamily={fontFamily}
+          fontSize={fontSize}
+          px={moderateScale(2)}
+          {...labelProps}
+        >
+          {label}
+        </Typography>
+      </TouchableOpacity>
+      {shouldShowDivider && (
+        <Divider backgroundColor="background.grey200" mx={moderateScale(8)} />
+      )}
+    </>
   );
 };
 
 PopOverItem.propTypes = {
+  shouldShowDivider: PropTypes.bool,
   item: PropTypes.object,
   onPress: PropTypes.func,
   fontFamily: PropTypes.string,
@@ -171,6 +184,7 @@ export const Popover = ({
           fontSize={fontSize}
           item={item}
           key={index}
+          shouldShowDivider={index !== data.length - 1}
           onPress={() => {
             popoverRef?.current?.setState({ isVisible: false });
             onPressItemRef.current = item.onPress;
@@ -201,5 +215,8 @@ Popover.propTypes = {
 };
 
 const styles = StyleSheet.create({
-  popoverStyle: { borderRadius: moderateScale(15), padding: moderateScale(5) },
+  popoverStyle: {
+    borderRadius: moderateScale(10),
+    padding: moderateScale(5),
+  },
 });