Merge branch 'develop' of github.com:RocketChat/Rocket.Chat.Livechat into develop

ggazzo · ggazzo · commit 5498c56fe535 · 2021-04-21T00:34:37.000-03:00
diff --git a/src/components/Composer/index.js b/src/components/Composer/index.js
@@ -63,6 +63,9 @@ export class Composer extends Component {
 	}
 
 	handleInput = (onChange) => () => {
+		if (this.state.inputLock) {
+			return;
+		}
 		onChange && onChange(sanitize(this.el.innerText));
 	}
 
@@ -147,6 +150,9 @@ export class Composer extends Component {
 
 	constructor(props) {
 		super(props);
+		this.state = {
+			inputLock: false,
+		};
 		this.value = this.props.value;
 		this.handleNotifyEmojiSelect = this.handleNotifyEmojiSelect.bind(this);
 
@@ -228,7 +234,13 @@ export class Composer extends Component {
 		return 0;
 	}
 
+	handleInputLock(locked) {
+		this.setState({ inputLock: locked });
+		return 0;
+	}
+
 	render = ({ pre, post, value, placeholder, onChange, onSubmit, onUpload, className, style }) => (
+
 		<div className={createClassName(styles, 'composer', { }, [className])} style={style}>
 			{pre}
 			<div
@@ -247,6 +259,17 @@ export class Composer extends Component {
 						onClick: this.handleClick,
 					}
 				)}
+
+				onCompositionStart={() => {
+					this.handleInputLock(true);
+				}}
+
+				onCompositionEnd={() => {
+					this.handleInputLock(false);
+					onChange && onChange(this.el.innerText);
+				}}
+
+
 				className={createClassName(styles, 'composer__input')}
 			/>
 			{post}
diff --git a/src/components/Messages/MessageText/emoji.js b/src/components/Messages/MessageText/emoji.js
@@ -1,6 +1,6 @@
 import shortnameToUnicode from '../../Emoji/shortnameToUnicode';
 
-const emojiUnicode = '\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff]'; // unicode emoji from https://www.regextester.com/106421
+const emojiUnicode = '\u00a9|\u00ae|[\u2000-\u3039]|[\u3100-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff]'; // unicode emoji from https://www.regextester.com/106421
 
 const emojiRanges = [
 	emojiUnicode, // unicode emoji from https://www.regextester.com/106421
diff --git a/src/components/Tooltip/index.js b/src/components/Tooltip/index.js
@@ -55,17 +55,29 @@ const TooltipContext = createContext();
 export class TooltipContainer extends Component {
 	state = {
 		tooltip: null,
+		activeChild: null,
+		event: null,
+		placement: null,
 	}
 
-	showTooltip = (event, { content, placement = 'bottom' }) => {
+	showTooltip = (event, { content, placement = 'bottom', childIndex }) => {
 		const triggerBounds = event.target.getBoundingClientRect();
-		this.setState({ tooltip: <Tooltip floating placement={placement} triggerBounds={triggerBounds}>{content}</Tooltip> });
+		this.setState({ tooltip: <Tooltip floating placement={placement} triggerBounds={triggerBounds}>{content}</Tooltip>, activeChild: childIndex, event, placement, content });
 	}
 
 	hideTooltip = () => {
 		this.setState({ tooltip: null });
 	}
 
+	UNSAFE_componentWillReceiveProps(props) {
+		if (this.state.tooltip) {
+			const activeChildren = props?.children?.props?.children[this.state.activeChild];
+			if (activeChildren && activeChildren.props.content !== this.state.content) {
+				this.showTooltip(this.state.event, { content: activeChildren.props.content, placement: this.state.placement, childIndex: this.state.activeChild });
+			}
+		}
+	}
+
 	render({ children }) {
 		return (
 			<TooltipContext.Provider value={{ ...this.state, showTooltip: this.showTooltip, hideTooltip: this.hideTooltip }}>
@@ -81,11 +93,12 @@ export class TooltipContainer extends Component {
 
 export const TooltipTrigger = ({ children, content, placement }) => (
 	<TooltipContext.Consumer>
-		{({ showTooltip, hideTooltip }) => toChildArray(children).map((child) => cloneElement(child, {
-			onMouseEnter: (event) => showTooltip(event, { content, placement }),
+		{({ showTooltip, hideTooltip }) => toChildArray(children).map((child, index) => cloneElement(child, {
+			onMouseEnter: (event) => showTooltip(event, { content, placement, childIndex: index }),
 			onMouseLeave: (event) => hideTooltip(event),
-			onFocusCapture: (event) => showTooltip(event, { content, placement }),
+			onFocusCapture: (event) => showTooltip(event, { content, placement, childIndex: index }),
 			onBlurCapture: (event) => hideTooltip(event),
+			content,
 		}))}
 	</TooltipContext.Consumer>
 );
