@bigbinary/neetoui-rn 0.0.253 → 0.0.255

package/index.d.ts

@@ -334,6 +334,7 @@ type ChatInputProps = {
   attachmentsCount?: number;
   Attachments?:  React.FC;
   showCannedResponsesFor?: Array<"REPLY" | "NOTE" | "FORWARD">;
+  showSuggestionsFor?: Array<"REPLY" | "NOTE" | "FORWARD">;
   disabled?: boolean;
   suggestions: Array<{
     name: 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 _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","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 convertToMentions=function convertToMentions(_ref){var suggestions=_ref.suggestions,value=_ref.value;var mentionsRegex=new RegExp(/@\[[^)]*\)/g);var html="<p>"+value+"</p>";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);};for(var _iterator=_createForOfIteratorHelperLoose(allMentions),_step;!(_step=_iterator()).done;){var mentionObject=_step.value;_loop(mentionObject);}return html;};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,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({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,html:convertToMentions({suggestions:suggestions,value:value})});}),(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,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:292,columnNumber:7}},_react.default.createElement(_.LineLoader,{backgroundColor:_theme.theme.colors.background.grey400,isLoading:isLoading,__self:_this,__source:{fileName:_jsxFileName,lineNumber:293,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:297,columnNumber:9}},_react.default.createElement(_.Container,{pt:(0,_reactNativeSizeMatters.moderateScale)(8),__self:_this,__source:{fileName:_jsxFileName,lineNumber:303,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:304,columnNumber:13}}),_react.default.createElement(_.Container,{flexDirection:"row",justifyContent:"space-between",__self:_this,__source:{fileName:_jsxFileName,lineNumber:320,columnNumber:13}},_react.default.createElement(_MentionsInputWrapper.MentionsInputWrapper,(0,_extends2.default)({placeholder:placeholders[selectedOption],ref:inputRef,suggestions:suggestions,value:value,onChange:onChangeText,onTouchStart:hideEmailFieldsAndAttachments},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:321,columnNumber:15}})),_react.default.createElement(_.Container,{alignSelf:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:330,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:333,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:341,columnNumber:21}})))),_react.default.createElement(_AttachmentsView.AttachmentsView,{Attachments:Attachments,attachmentsCount:attachmentsCount,isAttachmentsVisible:isAttachmentsVisible,isNoteOptionSelected:isNoteOptionSelected,setIsAttachmentsVisible:setIsAttachmentsVisible,__self:_this,__source:{fileName:_jsxFileName,lineNumber:351,columnNumber:13}}),_react.default.createElement(_.Container,{alignItems:"center",flexDirection:"row",justifyContent:"space-between",mt:(0,_reactNativeSizeMatters.moderateScale)(10),__self:_this,__source:{fileName:_jsxFileName,lineNumber:358,columnNumber:13}},_react.default.createElement(_.Container,{flexDirection:"row",justifyContent:"space-between",__self:_this,__source:{fileName:_jsxFileName,lineNumber:364,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:365,columnNumber:17}}),_react.default.createElement(_IconButton.IconButton,{Icon:_note.default,opacity:isNoteOptionSelected?1:0.5,onPress:onAddNoteClickHandler,__self:_this,__source:{fileName:_jsxFileName,lineNumber:371,columnNumber:17}}),onForward&&_react.default.createElement(_IconButton.IconButton,{Icon:_forward.default,opacity:isForwardOptionSelected?1:0.5,onPress:onAddForwardClickHandler,__self:_this,__source:{fileName:_jsxFileName,lineNumber:377,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:383,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:390,columnNumber:21}}),_react.default.createElement(_IconButton.IconButton,{Icon:_attachment.default,opacity:0.5,onPress:onAddAttachmentsClickHandler,__self:_this,__source:{fileName:_jsxFileName,lineNumber:396,columnNumber:17}})),_react.default.createElement(_.Container,{alignItems:"center",flexDirection:"row",__self:_this,__source:{fileName:_jsxFileName,lineNumber:402,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:403,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:427,columnNumber:27}});},__self:_this,__source:{fileName:_jsxFileName,lineNumber:420,columnNumber:23}}),__self:_this,__source:{fileName:_jsxFileName,lineNumber:417,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,suggestions:_propTypes.default.arrayOf(_propTypes.default.shape({name:_propTypes.default.string,imageUrl:_propTypes.default.string,id:_propTypes.default.string}))};
+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

@@ -1 +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"];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,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(keyword===null){if(visibleMentionsCount!==false)setVisibleMentionsCount(false);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:44,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:45,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:63,columnNumber:17}}),_react.default.createElement(_.Container,{alignItems:"center",flex:1,flexDirection:"row",__self:_this,__source:{fileName:_jsxFileName,lineNumber:79,columnNumber:19}},_react.default.createElement(_.Avatar,{imageUrl:imageUrl,mr:(0,_reactNativeSizeMatters.moderateScale)(8),name:name,variant:"extra-small",__self:_this,__source:{fileName:_jsxFileName,lineNumber:80,columnNumber:21}}),_react.default.createElement(_.Typography,{color:"font.primary",flex:1,fontFamily:"sf400",fontSize:"xs",__self:_this,__source:{fileName:_jsxFileName,lineNumber:86,columnNumber:21}},name)),index!==filteredSuggestions.length-1&&_react.default.createElement(_.Divider,{bg:"border.primary",width:"100%",__self:_this,__source:{fileName:_jsxFileName,lineNumber:96,columnNumber:21}}));})));};return _react.default.createElement(_reactNativeControlledMentions.MentionInput,(0,_extends2.default)({inputRef:ref,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:107,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={suggestions:_propTypes.default.arrayOf(_propTypes.default.shape({name:_propTypes.default.string,imageUrl:_propTypes.default.string}))};
+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/lib/components/LineLoader.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.LineLoader=void 0;var _react=_interopRequireDefault(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _native=_interopRequireWildcard(require("react-content-loader/native"));var _reactNativeSizeMatters=require("react-native-size-matters");var _theme=require("../theme");var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/LineLoader.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 LineLoader=function LineLoader(_ref){var isLoading=_ref.isLoading,_ref$backgroundColor=_ref.backgroundColor,backgroundColor=_ref$backgroundColor===void 0?_theme.theme.colors.background.primary:_ref$backgroundColor,_ref$foregroundColor=_ref.foregroundColor,foregroundColor=_ref$foregroundColor===void 0?_theme.theme.colors.background.base:_ref$foregroundColor,_ref$height=_ref.height,height=_ref$height===void 0?(0,_reactNativeSizeMatters.moderateScale)(1.5):_ref$height;return _react.default.createElement(_native.default,{animate:isLoading,backgroundColor:backgroundColor,foregroundColor:foregroundColor,height:height,interval:0,key:isLoading,speed:1,width:"100%",__self:_this,__source:{fileName:_jsxFileName,lineNumber:15,columnNumber:3}},_react.default.createElement(_native.Rect,{height:height,width:"100%",x:0,y:0,__self:_this,__source:{fileName:_jsxFileName,lineNumber:25,columnNumber:5}}));};exports.LineLoader=LineLoader;LineLoader.propTypes={isLoading:_propTypes.default.bool,backgroundColor:_propTypes.default.string,foregroundColor:_propTypes.default.string,height:_propTypes.default.number};
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.LineLoader=void 0;var _react=_interopRequireDefault(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _native=_interopRequireWildcard(require("react-content-loader/native"));var _reactNativeSizeMatters=require("react-native-size-matters");var _theme=require("../theme");var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/LineLoader.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 LineLoader=function LineLoader(_ref){var isLoading=_ref.isLoading,_ref$backgroundColor=_ref.backgroundColor,backgroundColor=_ref$backgroundColor===void 0?_theme.theme.colors.background.primary:_ref$backgroundColor,_ref$foregroundColor=_ref.foregroundColor,foregroundColor=_ref$foregroundColor===void 0?_theme.theme.colors.background.base:_ref$foregroundColor,_ref$height=_ref.height,height=_ref$height===void 0?(0,_reactNativeSizeMatters.moderateScale)(3):_ref$height;return _react.default.createElement(_native.default,{animate:isLoading,backgroundColor:backgroundColor,foregroundColor:foregroundColor,height:height,interval:0,key:isLoading,speed:1,width:"100%",__self:_this,__source:{fileName:_jsxFileName,lineNumber:15,columnNumber:3}},_react.default.createElement(_native.Rect,{height:height,width:"100%",x:0,y:0,__self:_this,__source:{fileName:_jsxFileName,lineNumber:25,columnNumber:5}}));};exports.LineLoader=LineLoader;LineLoader.propTypes={isLoading:_propTypes.default.bool,backgroundColor:_propTypes.default.string,foregroundColor:_propTypes.default.string,height:_propTypes.default.number};

package/package.json

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

package/src/components/ChatInput/ChatInput.jsx

@@ -108,9 +108,10 @@ const labels = {
  * ```
  */
 
-const convertToMentions = ({ suggestions, value }) => {
+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) {
@@ -128,9 +129,12 @@ const convertToMentions = ({ suggestions, value }) => {
     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;
+  return { html, plainText };
 };
 
 export const ChatInput = forwardRef(
@@ -149,6 +153,7 @@ export const ChatInput = forwardRef(
       attachmentsCount,
       Attachments,
       showCannedResponsesFor = [OPTION_TYPES.REPLY],
+      showSuggestionsFor = [OPTION_TYPES.NOTE],
       disabled,
       isLoading = true,
       onOptionChange = () => {},
@@ -178,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 }),
+          });
         },
       },
     ];
@@ -256,6 +267,7 @@ export const ChatInput = forwardRef(
             toEmails,
             ccEmails,
             bccEmails,
+            ...convertMentionsToHTMLAndPlainText({ suggestions, value }),
           });
         },
         [OPTION_TYPES.NOTE]: () => {
@@ -263,11 +275,16 @@ export const ChatInput = forwardRef(
             toEmails,
             ccEmails,
             bccEmails,
-            html: convertToMentions({ suggestions, value }),
+            ...convertMentionsToHTMLAndPlainText({ suggestions, value }),
           });
         },
         [OPTION_TYPES.FORWARD]: () => {
-          onForward({ toEmails, ccEmails, bccEmails });
+          onForward({
+            toEmails: toEmailsForForward,
+            ccEmails,
+            bccEmails,
+            ...convertMentionsToHTMLAndPlainText({ suggestions, value }),
+          });
         },
       }[selectedOption]());
     }, [
@@ -323,6 +340,9 @@ export const ChatInput = forwardRef(
                 ref={inputRef}
                 suggestions={suggestions}
                 value={value}
+                shouldShowSuggestions={showSuggestionsFor.includes(
+                  selectedOption
+                )}
                 onChange={onChangeText}
                 onTouchStart={hideEmailFieldsAndAttachments}
                 {...rest}
@@ -506,11 +526,17 @@ 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.
    */

package/src/components/ChatInput/MentionsInputWrapper.jsx

@@ -16,7 +16,7 @@ import {
 } from "@components";
 
 export const MentionsInputWrapper = forwardRef(
-  ({ suggestions, ...rest }, ref) => {
+  ({ suggestions, shouldShowSuggestions, ...rest }, ref) => {
     const [visibleMentionsCount, setVisibleMentionsCount] = useState(0);
     const theme = useContext(ThemeContext);
 
@@ -24,8 +24,10 @@ export const MentionsInputWrapper = forwardRef(
     const mentionsListHeight = visibleMentionsCount * heightOfMention;
 
     const renderSuggestions = ({ keyword, onSuggestionPress }) => {
+      if (!shouldShowSuggestions) return null;
+
       if (keyword === null) {
-        if (visibleMentionsCount !== false) setVisibleMentionsCount(false);
+        if (visibleMentionsCount !== 0) setVisibleMentionsCount(0);
 
         return null;
       }
@@ -106,6 +108,7 @@ export const MentionsInputWrapper = forwardRef(
     return (
       <MentionInput
         inputRef={ref}
+        suggestions={suggestions}
         containerStyle={[
           styles.mentionsTextInputStyle,
           {
@@ -140,6 +143,7 @@ const styles = StyleSheet.create({
 });
 
 MentionsInputWrapper.propTypes = {
+  shouldShowSuggestions: PropTypes.bool,
   suggestions: PropTypes.arrayOf(
     PropTypes.shape({
       name: PropTypes.string,

package/src/components/LineLoader.jsx

@@ -10,7 +10,7 @@ export const LineLoader = ({
   isLoading,
   backgroundColor = theme.colors.background.primary,
   foregroundColor = theme.colors.background.base,
-  height = moderateScale(1.5),
+  height = moderateScale(3),
 }) => (
   <ContentLoader
     animate={isLoading}