Broken in production or just in your stack? If that latter, might be better to hold off on submitting this diff until you have your stack straightened out.

I just noticed modal styling broke during a rebase.

Are you planning changes to this diff, or did you want it to be reviewed as is?

In D3809#105846, @ashoat wrote:

I just noticed modal styling broke during a rebase

Broken in production or just in your stack? If that latter, might be better to hold off on submitting this diff until you have your stack straightened out.

Production has been broken for quite some time, this is just in the stack. The stack will get fixed. I'm not going to land it without updated styling.

In D3809#106403, @atul wrote:

I just noticed modal styling broke during a rebase.

Are you planning changes to this diff, or did you want it to be reviewed as is?

Reviewed as is. I'll follow up with styling changes in a future diff, since they're difference concerns being addressed.

I'm wondering if, instead of creating separate SidebarPromoteModal component, shouldn't we use existing logic already implemented in ConfirmLeaveThreadModal and create universal ConfirmModal component, that can receive e.g. title, message (content), and confirm action name? I think, there are quite many places, where something like this could be used in web app. What do you think?

web/chat/thread-menu.react.js
100–111 ↗	(On Diff #11738)	I think it should be defined closer to where it's used. Every item is next to its callback in this file.
web/modals/chat/sidebar-promote-modal.react.js
13 ↗	(On Diff #11738)	It probably doesn't matter much, but I'm wondering if it's better to pass the whole `ThreadInfo` object in the props, or only the value, that is used (`uiName`). Passing more complex object makes the component rerender more often due to props changes, but from the other side, it's harder to make mistake by passing wrong type accidentally. @palys-swm what approach is better?
31–36 ↗	(On Diff #11738)	I think the sequence should be reversed here. I'm not sure if we have a Figma design for the modal, but in all modals I've seen, confirming action (marked with primary, or danger button) is on the right, and the secondary cancel button is on the left:

This revision now requires changes to proceed.Apr 26 2022, 4:33 AM

In D3809#106845, @def-au1t wrote:

I'm wondering if, instead of creating separate SidebarPromoteModal component, shouldn't we use existing logic already implemented in ConfirmLeaveThreadModal and create universal ConfirmModal component, that can receive e.g. title, message (content), and confirm action name? I think, there are quite many places, where something like this could be used in web app. What do you think?

I like the idea, maybe we could still implement it here and after getting this diff in then create a ConfirmModal component that will get used across the app.

diff review fixes.

• benschac added inline comments.Apr 26 2022, 10:42 AM

web/chat/thread-menu.react.js
100–111 ↗	(On Diff #11738)	updated
web/modals/chat/sidebar-promote-modal.react.js
13 ↗	(On Diff #11738)	I don't think it's that big of a deal since this modal isn't persisted on the page. I was just following what the convention was in the codebase. Happy to update or leave it, I don't have a strong opinion either way. curious what @palys-swm thinks.
31–36 ↗	(On Diff #11738)	That's what's here now! I agree the HTML order is a bit misleading. We should clean up the modal CSS a bit more.

Harbormaster completed remote builds in B8572: Diff 11951.Apr 26 2022, 10:46 AM

Adding @ashoat as the copy is updated

web/modals/chat/sidebar-promote-modal.react.js
29 ↗	(On Diff #11951)	This doesn't sound great, but maybe it's just me
13 ↗	(On Diff #11738)	That's true that we're using only `uiName`, so passing only this sounds like a good idea. On the other hand, passing the whole `threadInfo` also makes sense and better expresses the intention - we're upgrading the whole thread. Although the modal isn't persisted, when we use `uiName` then the dependencies of `onClickPromoteSidebarToThread` would change, which is beneficial. So overall, I don't have a strong opinion. Really slightly prefer passing just the name, but don't think it's worth breaking the consistency.
31–36 ↗	(On Diff #11738)	Agree, we should improve the maintainability here

I'm wondering if, instead of creating separate SidebarPromoteModal component, shouldn't we use existing logic already implemented in ConfirmLeaveThreadModal and create universal ConfirmModal component, that can receive e.g. title, message (content), and confirm action name? I think, there are quite many places, where something like this could be used in web app. What do you think?

Ah there's a task for something like this: https://linear.app/comm/issue/ENG-1003/[web]-introduce-prompt-component. It's taken me longer to get to it than I'd have hoped

• jacek requested changes to this revision.Apr 27 2022, 2:08 AM

• jacek added inline comments.

web/modals/chat/sidebar-promote-modal.react.js
29 ↗	(On Diff #11951)	I think, there was already a language issue in this sentence: https://linear.app/comm/issue/ENG-1016/add-prompt-to-user-that-sidebar-promotion-cant-be-undone https://phabricator.ashoat.com/D3755#inline-22663 https://phabricator.ashoat.com/D3819
31–36 ↗	(On Diff #11738)	It's a different component on the screenshot you sent - `ConfirmLeaveThreadModal`, isn't it? The sequence used there is reversed - https://github.com/CommE2E/comm/blob/master/web/modals/threads/confirm-leave-thread-modal.react.js#L34-L41 Shouldn't it be the same order here, or am I missing something?

This revision now requires changes to proceed.Apr 27 2022, 2:08 AM

rebase fix

• benschac planned changes to this revision.Apr 27 2022, 8:24 AM

• benschac added inline comments.

web/modals/chat/sidebar-promote-modal.react.js
29 ↗	(On Diff #11951)	@palys-swm @def-au1t -- I should have caught this copy beforehand. 100% this needs to be changed.

Harbormaster completed remote builds in B8607: Diff 11991.Apr 27 2022, 8:27 AM

fix modal

remove file

revert

Harbormaster completed remote builds in B8655: Diff 12046.Apr 28 2022, 10:23 AM

remove file

Harbormaster completed remote builds in B8656: Diff 12047.Apr 28 2022, 10:26 AM

Harbormaster completed remote builds in B8657: Diff 12048.

Harbormaster completed remote builds in B8658: Diff 12049.Apr 28 2022, 10:30 AM

• benschac planned changes to this revision.Apr 28 2022, 10:49 AM

• benschac edited the summary of this revision. (Show Details)

change copy

• benschac added inline comments.Apr 28 2022, 11:00 AM

web/modals/chat/sidebar-promote-modal.react.js
35 ↗	(On Diff #12051)	took this copy from `thread-settings-promote-sidebar.react` in `native`. cc: @ashoat if you think we should use different copy on web.
13 ↗	(On Diff #11738)	I'm going to just leave the `threadInfo` for now then if there's no strong preference.
31–36 ↗	(On Diff #11738)	nope, this is my fault. I was looking at the wrong component. I've edited and screen shot the correct one. Thanks for catching this.

Harbormaster completed remote builds in B8660: Diff 12051.Apr 28 2022, 11:02 AM

Looks good

• jacek accepted this revision.Apr 29 2022, 2:35 AM

This revision is now accepted and ready to land.Apr 29 2022, 2:35 AM

Fix formatting of content, remove unneeded quotes

Harbormaster completed remote builds in B8700: Diff 12119.Apr 29 2022, 10:26 AM

Closed by commit rCOMM3263b7e9a3f0: [web] [feat] [ENG-991] add modal prompt (authored by • benschac). · Explain WhyMay 4 2022, 4:41 AM

This revision was automatically updated to reflect the committed changes.

• benschac added a commit: rCOMM3263b7e9a3f0: [web] [feat] [ENG-991] add modal prompt.

Revision Contents
Changeset List

Path

Size

web/

chat/

thread-menu.react.js

17 lines

modals/

chat/

sidebar-promote-modal.css

16 lines

sidebar-promote-modal.react.js

49 lines

Diff 12119

View Options

web/chat/thread-menu.react.js

Show First 20 Lines • Show All 77 Lines • ▼ Show 20 Lines
import Button from '../components/button.react.js';		import Button from '../components/button.react.js';
// eslint-disable-next-line import/extensions		// eslint-disable-next-line import/extensions
import ClearableTextInput from '../components/clearable-text-input.react';		import ClearableTextInput from '../components/clearable-text-input.react';
import type { SyncedSelectionData } from '../components/selectable-text-input.js';		import type { SyncedSelectionData } from '../components/selectable-text-input.js';
// eslint-disable-next-line import/extensions		// eslint-disable-next-line import/extensions
import SelectableTextInput from '../components/selectable-text-input.react';		import SelectableTextInput from '../components/selectable-text-input.react';
import { SingleLine } from '../components/single-line.react.js';		import { SingleLine } from '../components/single-line.react.js';
import SWMansionIcon from '../components/swmansion-icon.react.js';		import SWMansionIcon from '../components/swmansion-icon.react.js';
import { type InputState, InputStateContext } from '../input/input-state.js';		import {
		type InputState,
		InputStateContext,
		type EditInputBarMessageParameters,
		} from '../input/input-state.js';
import KeyboardInputHost from '../keyboard/keyboard-input-host.react.js';		import KeyboardInputHost from '../keyboard/keyboard-input-host.react.js';
import {		import {
type KeyboardState,		type KeyboardState,
KeyboardContext,		KeyboardContext,
} from '../keyboard/keyboard-state.js';		} from '../keyboard/keyboard-state.js';
import { getKeyboardHeight } from '../keyboard/keyboard.js';		import { getKeyboardHeight } from '../keyboard/keyboard.js';
import { getDefaultTextMessageRules } from '../markdown/rules.react.js';		import { getDefaultTextMessageRules } from '../markdown/rules.react.js';
import {		import {
▲ Show 20 Lines • Show All 213 Lines • ▼ Show 20 Lines	if (this.shouldShowTextInput) {
this.targetSendButtonContainerOpen.setValue(currentText === '' ? 0 : 1);		this.targetSendButtonContainerOpen.setValue(currentText === '' ? 0 : 1);
} else {		} else {
this.setUpSendIconAnimations();		this.setUpSendIconAnimations();
}		}
}		}

componentDidMount() {		componentDidMount() {
if (this.props.isActive) {		if (this.props.isActive) {
this.addReplyListener();		this.addEditInputMessageListener();
}		}
}		}

componentWillUnmount() {		componentWillUnmount() {
if (this.props.isActive) {		if (this.props.isActive) {
this.removeReplyListener();		this.removeEditInputMessageListener();
}		}
}		}

componentDidUpdate(prevProps: Props, prevState: State) {		componentDidUpdate(prevProps: Props, prevState: State) {
if (		if (
this.state.textEdited &&		this.state.textEdited &&
this.state.text &&		this.state.text &&
this.props.threadInfo.id !== prevProps.threadInfo.id		this.props.threadInfo.id !== prevProps.threadInfo.id
) {		) {
this.props.dispatch({		this.props.dispatch({
type: moveDraftActionType,		type: moveDraftActionType,
payload: {		payload: {
oldKey: draftKeyFromThreadID(prevProps.threadInfo.id),		oldKey: draftKeyFromThreadID(prevProps.threadInfo.id),
newKey: draftKeyFromThreadID(this.props.threadInfo.id),		newKey: draftKeyFromThreadID(this.props.threadInfo.id),
},		},
});		});
} else if (!this.state.textEdited && this.props.draft !== prevProps.draft) {		} else if (!this.state.textEdited && this.props.draft !== prevProps.draft) {
this.setState({ text: this.props.draft });		this.setState({ text: this.props.draft });
}		}
if (this.props.isActive && !prevProps.isActive) {		if (this.props.isActive && !prevProps.isActive) {
this.addReplyListener();		this.addEditInputMessageListener();
} else if (!this.props.isActive && prevProps.isActive) {		} else if (!this.props.isActive && prevProps.isActive) {
this.removeReplyListener();		this.removeEditInputMessageListener();
}		}

const currentText = trimMessage(this.state.text);		const currentText = trimMessage(this.state.text);
const prevText = trimMessage(prevState.text);		const prevText = trimMessage(prevState.text);

if (		if (
(currentText === '' && prevText !== '') \|\|		(currentText === '' && prevText !== '') \|\|
(currentText !== '' && prevText === '')		(currentText !== '' && prevText === '')
Show All 17 Lines	componentDidUpdate(prevProps: Props, prevState: State) {
if (!imageGalleryIsOpen && imageGalleryWasOpen) {		if (!imageGalleryIsOpen && imageGalleryWasOpen) {
this.hideButtons();		this.hideButtons();
} else if (imageGalleryIsOpen && !imageGalleryWasOpen) {		} else if (imageGalleryIsOpen && !imageGalleryWasOpen) {
this.expandButtons();		this.expandButtons();
this.setIOSKeyboardHeight();		this.setIOSKeyboardHeight();
}		}
}		}

addReplyListener() {		addEditInputMessageListener() {
invariant(		invariant(
this.props.inputState,		this.props.inputState,
'inputState should be set in addReplyListener',		'inputState should be set in addEditInputMessageListener',
);		);
this.props.inputState.addReplyListener(this.focusAndUpdateText);		this.props.inputState.addEditInputMessageListener(this.focusAndUpdateText);
}		}

removeReplyListener() {		removeEditInputMessageListener() {
invariant(		invariant(
this.props.inputState,		this.props.inputState,
'inputState should be set in removeReplyListener',		'inputState should be set in removeEditInputMessageListener',
		);
		this.props.inputState.removeEditInputMessageListener(
		this.focusAndUpdateText,
);		);
this.props.inputState.removeReplyListener(this.focusAndUpdateText);
}		}

setIOSKeyboardHeight() {		setIOSKeyboardHeight() {
if (Platform.OS !== 'ios') {		if (Platform.OS !== 'ios') {
return;		return;
}		}
const { textInput } = this;		const { textInput } = this;
if (!textInput) {		if (!textInput) {
▲ Show 20 Lines • Show All 310 Lines • ▼ Show 20 Lines	this.setState({
textEdited: true,		textEdited: true,
selectionState: { text, selection },		selectionState: { text, selection },
});		});
this.saveDraft(text);		this.saveDraft(text);

this.focusAndUpdateButtonsVisibility();		this.focusAndUpdateButtonsVisibility();
};		};

focusAndUpdateText = (text: string) => {		focusAndUpdateText = (params: EditInputBarMessageParameters) => {
		const { message: text, mode } = params;
const currentText = this.state.text;		const currentText = this.state.text;
if (!currentText.startsWith(text)) {		if (mode === 'replace') {
		this.updateText(text);
		} else if (!currentText.startsWith(text)) {
const prependedText = text.concat(currentText);		const prependedText = text.concat(currentText);
this.updateText(prependedText);		this.updateText(prependedText);
}		}

this.focusAndUpdateButtonsVisibility();		this.focusAndUpdateButtonsVisibility();
};		};

focusAndUpdateButtonsVisibility = () => {		focusAndUpdateButtonsVisibility = () => {
▲ Show 20 Lines • Show All 439 Lines • Show Last 20 Lines

View Options

web/modals/chat/sidebar-promote-modal.css

Show First 20 Lines • Show All 77 Lines • ▼ Show 20 Lines
import Button from '../components/button.react.js';		import Button from '../components/button.react.js';
// eslint-disable-next-line import/extensions		// eslint-disable-next-line import/extensions
import ClearableTextInput from '../components/clearable-text-input.react';		import ClearableTextInput from '../components/clearable-text-input.react';
import type { SyncedSelectionData } from '../components/selectable-text-input.js';		import type { SyncedSelectionData } from '../components/selectable-text-input.js';
// eslint-disable-next-line import/extensions		// eslint-disable-next-line import/extensions
import SelectableTextInput from '../components/selectable-text-input.react';		import SelectableTextInput from '../components/selectable-text-input.react';
import { SingleLine } from '../components/single-line.react.js';		import { SingleLine } from '../components/single-line.react.js';
import SWMansionIcon from '../components/swmansion-icon.react.js';		import SWMansionIcon from '../components/swmansion-icon.react.js';
import { type InputState, InputStateContext } from '../input/input-state.js';		import {
		type InputState,
		InputStateContext,
		type EditInputBarMessageParameters,
		} from '../input/input-state.js';
import KeyboardInputHost from '../keyboard/keyboard-input-host.react.js';		import KeyboardInputHost from '../keyboard/keyboard-input-host.react.js';
import {		import {
type KeyboardState,		type KeyboardState,
KeyboardContext,		KeyboardContext,
} from '../keyboard/keyboard-state.js';		} from '../keyboard/keyboard-state.js';
import { getKeyboardHeight } from '../keyboard/keyboard.js';		import { getKeyboardHeight } from '../keyboard/keyboard.js';
import { getDefaultTextMessageRules } from '../markdown/rules.react.js';		import { getDefaultTextMessageRules } from '../markdown/rules.react.js';
import {		import {
▲ Show 20 Lines • Show All 213 Lines • ▼ Show 20 Lines	if (this.shouldShowTextInput) {
this.targetSendButtonContainerOpen.setValue(currentText === '' ? 0 : 1);		this.targetSendButtonContainerOpen.setValue(currentText === '' ? 0 : 1);
} else {		} else {
this.setUpSendIconAnimations();		this.setUpSendIconAnimations();
}		}
}		}

componentDidMount() {		componentDidMount() {
if (this.props.isActive) {		if (this.props.isActive) {
this.addReplyListener();		this.addEditInputMessageListener();
}		}
}		}

componentWillUnmount() {		componentWillUnmount() {
if (this.props.isActive) {		if (this.props.isActive) {
this.removeReplyListener();		this.removeEditInputMessageListener();
}		}
}		}

componentDidUpdate(prevProps: Props, prevState: State) {		componentDidUpdate(prevProps: Props, prevState: State) {
if (		if (
this.state.textEdited &&		this.state.textEdited &&
this.state.text &&		this.state.text &&
this.props.threadInfo.id !== prevProps.threadInfo.id		this.props.threadInfo.id !== prevProps.threadInfo.id
) {		) {
this.props.dispatch({		this.props.dispatch({
type: moveDraftActionType,		type: moveDraftActionType,
payload: {		payload: {
oldKey: draftKeyFromThreadID(prevProps.threadInfo.id),		oldKey: draftKeyFromThreadID(prevProps.threadInfo.id),
newKey: draftKeyFromThreadID(this.props.threadInfo.id),		newKey: draftKeyFromThreadID(this.props.threadInfo.id),
},		},
});		});
} else if (!this.state.textEdited && this.props.draft !== prevProps.draft) {		} else if (!this.state.textEdited && this.props.draft !== prevProps.draft) {
this.setState({ text: this.props.draft });		this.setState({ text: this.props.draft });
}		}
if (this.props.isActive && !prevProps.isActive) {		if (this.props.isActive && !prevProps.isActive) {
this.addReplyListener();		this.addEditInputMessageListener();
} else if (!this.props.isActive && prevProps.isActive) {		} else if (!this.props.isActive && prevProps.isActive) {
this.removeReplyListener();		this.removeEditInputMessageListener();
}		}

const currentText = trimMessage(this.state.text);		const currentText = trimMessage(this.state.text);
const prevText = trimMessage(prevState.text);		const prevText = trimMessage(prevState.text);

if (		if (
(currentText === '' && prevText !== '') \|\|		(currentText === '' && prevText !== '') \|\|
(currentText !== '' && prevText === '')		(currentText !== '' && prevText === '')
Show All 17 Lines	componentDidUpdate(prevProps: Props, prevState: State) {
if (!imageGalleryIsOpen && imageGalleryWasOpen) {		if (!imageGalleryIsOpen && imageGalleryWasOpen) {
this.hideButtons();		this.hideButtons();
} else if (imageGalleryIsOpen && !imageGalleryWasOpen) {		} else if (imageGalleryIsOpen && !imageGalleryWasOpen) {
this.expandButtons();		this.expandButtons();
this.setIOSKeyboardHeight();		this.setIOSKeyboardHeight();
}		}
}		}

addReplyListener() {		addEditInputMessageListener() {
invariant(		invariant(
this.props.inputState,		this.props.inputState,
'inputState should be set in addReplyListener',		'inputState should be set in addEditInputMessageListener',
);		);
this.props.inputState.addReplyListener(this.focusAndUpdateText);		this.props.inputState.addEditInputMessageListener(this.focusAndUpdateText);
}		}

removeReplyListener() {		removeEditInputMessageListener() {
invariant(		invariant(
this.props.inputState,		this.props.inputState,
'inputState should be set in removeReplyListener',		'inputState should be set in removeEditInputMessageListener',
		);
		this.props.inputState.removeEditInputMessageListener(
		this.focusAndUpdateText,
);		);
this.props.inputState.removeReplyListener(this.focusAndUpdateText);
}		}

setIOSKeyboardHeight() {		setIOSKeyboardHeight() {
if (Platform.OS !== 'ios') {		if (Platform.OS !== 'ios') {
return;		return;
}		}
const { textInput } = this;		const { textInput } = this;
if (!textInput) {		if (!textInput) {
▲ Show 20 Lines • Show All 310 Lines • ▼ Show 20 Lines	this.setState({
textEdited: true,		textEdited: true,
selectionState: { text, selection },		selectionState: { text, selection },
});		});
this.saveDraft(text);		this.saveDraft(text);

this.focusAndUpdateButtonsVisibility();		this.focusAndUpdateButtonsVisibility();
};		};

focusAndUpdateText = (text: string) => {		focusAndUpdateText = (params: EditInputBarMessageParameters) => {
		const { message: text, mode } = params;
const currentText = this.state.text;		const currentText = this.state.text;
if (!currentText.startsWith(text)) {		if (mode === 'replace') {
		this.updateText(text);
		} else if (!currentText.startsWith(text)) {
const prependedText = text.concat(currentText);		const prependedText = text.concat(currentText);
this.updateText(prependedText);		this.updateText(prependedText);
}		}

this.focusAndUpdateButtonsVisibility();		this.focusAndUpdateButtonsVisibility();
};		};

focusAndUpdateButtonsVisibility = () => {		focusAndUpdateButtonsVisibility = () => {
▲ Show 20 Lines • Show All 439 Lines • Show Last 20 Lines

View Options

web/modals/chat/sidebar-promote-modal.react.js

Show First 20 Lines • Show All 77 Lines • ▼ Show 20 Lines
import Button from '../components/button.react.js';		import Button from '../components/button.react.js';
// eslint-disable-next-line import/extensions		// eslint-disable-next-line import/extensions
import ClearableTextInput from '../components/clearable-text-input.react';		import ClearableTextInput from '../components/clearable-text-input.react';
import type { SyncedSelectionData } from '../components/selectable-text-input.js';		import type { SyncedSelectionData } from '../components/selectable-text-input.js';
// eslint-disable-next-line import/extensions		// eslint-disable-next-line import/extensions
import SelectableTextInput from '../components/selectable-text-input.react';		import SelectableTextInput from '../components/selectable-text-input.react';
import { SingleLine } from '../components/single-line.react.js';		import { SingleLine } from '../components/single-line.react.js';
import SWMansionIcon from '../components/swmansion-icon.react.js';		import SWMansionIcon from '../components/swmansion-icon.react.js';
import { type InputState, InputStateContext } from '../input/input-state.js';		import {
		type InputState,
		InputStateContext,
		type EditInputBarMessageParameters,
		} from '../input/input-state.js';
import KeyboardInputHost from '../keyboard/keyboard-input-host.react.js';		import KeyboardInputHost from '../keyboard/keyboard-input-host.react.js';
import {		import {
type KeyboardState,		type KeyboardState,
KeyboardContext,		KeyboardContext,
} from '../keyboard/keyboard-state.js';		} from '../keyboard/keyboard-state.js';
import { getKeyboardHeight } from '../keyboard/keyboard.js';		import { getKeyboardHeight } from '../keyboard/keyboard.js';
import { getDefaultTextMessageRules } from '../markdown/rules.react.js';		import { getDefaultTextMessageRules } from '../markdown/rules.react.js';
import {		import {
▲ Show 20 Lines • Show All 213 Lines • ▼ Show 20 Lines	if (this.shouldShowTextInput) {
this.targetSendButtonContainerOpen.setValue(currentText === '' ? 0 : 1);		this.targetSendButtonContainerOpen.setValue(currentText === '' ? 0 : 1);
} else {		} else {
this.setUpSendIconAnimations();		this.setUpSendIconAnimations();
}		}
}		}

componentDidMount() {		componentDidMount() {
if (this.props.isActive) {		if (this.props.isActive) {
this.addReplyListener();		this.addEditInputMessageListener();
}		}
}		}

componentWillUnmount() {		componentWillUnmount() {
if (this.props.isActive) {		if (this.props.isActive) {
this.removeReplyListener();		this.removeEditInputMessageListener();
}		}
}		}

componentDidUpdate(prevProps: Props, prevState: State) {		componentDidUpdate(prevProps: Props, prevState: State) {
if (		if (
this.state.textEdited &&		this.state.textEdited &&
this.state.text &&		this.state.text &&
this.props.threadInfo.id !== prevProps.threadInfo.id		this.props.threadInfo.id !== prevProps.threadInfo.id
) {		) {
this.props.dispatch({		this.props.dispatch({
type: moveDraftActionType,		type: moveDraftActionType,
payload: {		payload: {
oldKey: draftKeyFromThreadID(prevProps.threadInfo.id),		oldKey: draftKeyFromThreadID(prevProps.threadInfo.id),
newKey: draftKeyFromThreadID(this.props.threadInfo.id),		newKey: draftKeyFromThreadID(this.props.threadInfo.id),
},		},
});		});
} else if (!this.state.textEdited && this.props.draft !== prevProps.draft) {		} else if (!this.state.textEdited && this.props.draft !== prevProps.draft) {
this.setState({ text: this.props.draft });		this.setState({ text: this.props.draft });
}		}
if (this.props.isActive && !prevProps.isActive) {		if (this.props.isActive && !prevProps.isActive) {
this.addReplyListener();		this.addEditInputMessageListener();
} else if (!this.props.isActive && prevProps.isActive) {		} else if (!this.props.isActive && prevProps.isActive) {
this.removeReplyListener();		this.removeEditInputMessageListener();
}		}

const currentText = trimMessage(this.state.text);		const currentText = trimMessage(this.state.text);
const prevText = trimMessage(prevState.text);		const prevText = trimMessage(prevState.text);

if (		if (
(currentText === '' && prevText !== '') \|\|		(currentText === '' && prevText !== '') \|\|
(currentText !== '' && prevText === '')		(currentText !== '' && prevText === '')
Show All 17 Lines	componentDidUpdate(prevProps: Props, prevState: State) {
if (!imageGalleryIsOpen && imageGalleryWasOpen) {		if (!imageGalleryIsOpen && imageGalleryWasOpen) {
this.hideButtons();		this.hideButtons();
} else if (imageGalleryIsOpen && !imageGalleryWasOpen) {		} else if (imageGalleryIsOpen && !imageGalleryWasOpen) {
this.expandButtons();		this.expandButtons();
this.setIOSKeyboardHeight();		this.setIOSKeyboardHeight();
}		}
}		}

addReplyListener() {		addEditInputMessageListener() {
invariant(		invariant(
this.props.inputState,		this.props.inputState,
'inputState should be set in addReplyListener',		'inputState should be set in addEditInputMessageListener',
);		);
this.props.inputState.addReplyListener(this.focusAndUpdateText);		this.props.inputState.addEditInputMessageListener(this.focusAndUpdateText);
}		}

removeReplyListener() {		removeEditInputMessageListener() {
invariant(		invariant(
this.props.inputState,		this.props.inputState,
'inputState should be set in removeReplyListener',		'inputState should be set in removeEditInputMessageListener',
		);
		this.props.inputState.removeEditInputMessageListener(
		this.focusAndUpdateText,
);		);
this.props.inputState.removeReplyListener(this.focusAndUpdateText);
}		}

setIOSKeyboardHeight() {		setIOSKeyboardHeight() {
if (Platform.OS !== 'ios') {		if (Platform.OS !== 'ios') {
return;		return;
}		}
const { textInput } = this;		const { textInput } = this;
if (!textInput) {		if (!textInput) {
▲ Show 20 Lines • Show All 310 Lines • ▼ Show 20 Lines	this.setState({
textEdited: true,		textEdited: true,
selectionState: { text, selection },		selectionState: { text, selection },
});		});
this.saveDraft(text);		this.saveDraft(text);

this.focusAndUpdateButtonsVisibility();		this.focusAndUpdateButtonsVisibility();
};		};

focusAndUpdateText = (text: string) => {		focusAndUpdateText = (params: EditInputBarMessageParameters) => {
		const { message: text, mode } = params;
const currentText = this.state.text;		const currentText = this.state.text;
if (!currentText.startsWith(text)) {		if (mode === 'replace') {
		this.updateText(text);
		} else if (!currentText.startsWith(text)) {
const prependedText = text.concat(currentText);		const prependedText = text.concat(currentText);
this.updateText(prependedText);		this.updateText(prependedText);
}		}

this.focusAndUpdateButtonsVisibility();		this.focusAndUpdateButtonsVisibility();
};		};

focusAndUpdateButtonsVisibility = () => {		focusAndUpdateButtonsVisibility = () => {
▲ Show 20 Lines • Show All 439 Lines • Show Last 20 Lines

[web] [feat] [ENG-991] add modal promptClosedPublicActions

Details

Diff Detail

Event Timeline

Revision ContentsChangeset List

Diff 12119

web/chat/thread-menu.react.js

web/modals/chat/sidebar-promote-modal.css

web/modals/chat/sidebar-promote-modal.react.js

[web] [feat] [ENG-991] add modal prompt
ClosedPublic
Actions

Revision Contents
Changeset List