Page MenuHomePhabricator
Differential D14007

[native] Move buttonsExpanded in ChatInputBar to function component
ClosedPublic
Actions

Authored by angelika on Nov 22 2024, 4:32 AM.
Tags
None
Referenced Files
Unknown Object (File)
Fri, Mar 7, 8:06 AM
Unknown Object (File)
Fri, Feb 28, 2:56 AM
Unknown Object (File)
Thu, Feb 27, 11:02 PM
Unknown Object (File)
Thu, Feb 20, 9:08 AM
Unknown Object (File)
Feb 6 2025, 11:17 AM
Unknown Object (File)
Feb 6 2025, 3:45 AM
Unknown Object (File)
Feb 6 2025, 3:45 AM
Unknown Object (File)
Feb 4 2025, 9:00 AM
View All 35 Files
Subscribers
ashoat
tomek

Details

Reviewers
kamil
bartek
ashoat
Commits
rCOMMafbdd826c734: [native] Move buttonsExpanded in ChatInputBar to function component
Summary

https://linear.app/comm/issue/ENG-8147/convert-chatinputbar-to-reanimated-2-syntax

Depends on D14006

Test Plan

Tested this diff stack by playing around with ChatInputBar on both iOS simulator and Android device:

  • focus the text input and verify the keyboard is up and the camera buttons are animated correctly
  • try to send the message, verify the send button is animated correctly
  • verify the text input can be unfocused and keyboard is hidden
  • verify the draft works: write text, navigate from the chat, navigate into the chat again, verify the text is kept and the $
  • verify the edit mode works by editing a message
  • try to close the chat while editing a message - the alert should be shown
  • try to join a thread
  • try to select typed text

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Revision Contents
Changeset List

PathSize
native/
chat/
23 lines

Diff 46111

View Options

native/chat/chat-input-bar.react.js

Show First 20 Lines • Show All 309 Lines • ▼ Show 20 Linestype Props = {
+currentUserCanJoin: boolean, +currentUserCanJoin: boolean,
+threadFrozen: boolean, +threadFrozen: boolean,
+text: string, +text: string,
+setText: (text: string) => void, +setText: (text: string) => void,
+textEdited: boolean, +textEdited: boolean,
+setTextEdited: (edited: boolean) => void, +setTextEdited: (edited: boolean) => void,
+buttonsExpanded: boolean, +buttonsExpanded: boolean,
+setButtonsExpanded: (expanded: boolean) => void, +setButtonsExpanded: (expanded: boolean) => void,
+isExitingDuringEditModeRef: { current: boolean },
}; };
type State = {
+isExitingDuringEditMode: boolean, class ChatInputBar extends React.PureComponent<Props> {
};
class ChatInputBar extends React.PureComponent<Props, State> {
textInput: ?React.ElementRef<typeof TextInput>; textInput: ?React.ElementRef<typeof TextInput>;
clearableTextInput: ?ClearableTextInput; clearableTextInput: ?ClearableTextInput;
selectableTextInput: ?React.ElementRef<typeof SelectableTextInput>; selectableTextInput: ?React.ElementRef<typeof SelectableTextInput>;
expandoButtonsOpen: Value; expandoButtonsOpen: Value;
targetExpandoButtonsOpen: Value; targetExpandoButtonsOpen: Value;
expandoButtonsStyle: AnimatedViewStyle; expandoButtonsStyle: AnimatedViewStyle;
cameraRollIconStyle: AnimatedViewStyle; cameraRollIconStyle: AnimatedViewStyle;
cameraIconStyle: AnimatedViewStyle; cameraIconStyle: AnimatedViewStyle;
expandIconStyle: AnimatedViewStyle; expandIconStyle: AnimatedViewStyle;
sendButtonContainerOpen: Value; sendButtonContainerOpen: Value;
targetSendButtonContainerOpen: Value; targetSendButtonContainerOpen: Value;
sendButtonContainerStyle: AnimatedViewStyle; sendButtonContainerStyle: AnimatedViewStyle;
clearBeforeRemoveListener: () => void; clearBeforeRemoveListener: () => void;
clearFocusListener: () => void; clearFocusListener: () => void;
clearBlurListener: () => void; clearBlurListener: () => void;
constructor(props: Props) { constructor(props: Props) {
super(props); super(props);
this.state = {
isExitingDuringEditMode: false,
};
this.setUpActionIconAnimations(); this.setUpActionIconAnimations();
this.setUpSendIconAnimations(); this.setUpSendIconAnimations();
} }
setUpActionIconAnimations() { setUpActionIconAnimations() {
this.expandoButtonsOpen = new Value(1); this.expandoButtonsOpen = new Value(1);
this.targetExpandoButtonsOpen = new Value(1); this.targetExpandoButtonsOpen = new Value(1);
const prevTargetExpandoButtonsOpen = new Value(1); const prevTargetExpandoButtonsOpen = new Value(1);
▲ Show 20 Lines • Show All 519 Lines • ▼ Show 20 Linesclass ChatInputBar extends React.PureComponent<Props> {
selectableTextInputRef = ( selectableTextInputRef = (
selectableTextInput: ?React.ElementRef<typeof SelectableTextInput>, selectableTextInput: ?React.ElementRef<typeof SelectableTextInput>,
) => { ) => {
this.selectableTextInput = selectableTextInput; this.selectableTextInput = selectableTextInput;
}; };
updateText = (text: string) => { updateText = (text: string) => {
if (this.state.isExitingDuringEditMode) { if (this.props.isExitingDuringEditModeRef.current) {
return; return;
} }
this.props.setText(text); this.props.setText(text);
this.props.setTextEdited(true); this.props.setTextEdited(true);
this.props.messageEditingContext?.setEditedMessageChanged( this.props.messageEditingContext?.setEditedMessageChanged(
this.isMessageEdited(text), this.isMessageEdited(text),
); );
if (this.isEditMode()) { if (this.isEditMode()) {
▲ Show 20 Lines • Show All 111 Lines • ▼ Show 20 Lines unblockNavigation = () => {
if (!navigation) { if (!navigation) {
return; return;
} }
navigation.setParams({ removeEditMode: null }); navigation.setParams({ removeEditMode: null });
}; };
removeEditMode: RemoveEditMode = action => { removeEditMode: RemoveEditMode = action => {
const { navigation } = this.props; const { navigation } = this.props;
if (!navigation || this.state.isExitingDuringEditMode) { if (!navigation || this.props.isExitingDuringEditModeRef.current) {
return 'ignore_action'; return 'ignore_action';
} }
if (!this.isMessageEdited()) { if (!this.isMessageEdited()) {
this.unblockNavigation(); this.unblockNavigation();
return 'reduce_action'; return 'reduce_action';
} }
const unblockAndDispatch = () => { const unblockAndDispatch = () => {
this.unblockNavigation(); this.unblockNavigation();
▲ Show 20 Lines • Show All 69 Lines • ▼ Show 20 Lines this.props.messageEditingContext?.setEditedMessage(null, () => {
this.unblockNavigation(); this.unblockNavigation();
this.updateText(this.props.draft); this.updateText(this.props.draft);
this.focusAndUpdateButtonsVisibility(); this.focusAndUpdateButtonsVisibility();
this.updateSendButton(this.props.draft); this.updateSendButton(this.props.draft);
}); });
}; };
onNavigationFocus = () => { onNavigationFocus = () => {
this.setState({ isExitingDuringEditMode: false }); this.props.isExitingDuringEditModeRef.current = false;
}; };
onNavigationBlur = () => { onNavigationBlur = () => {
if (!this.isEditMode()) { if (!this.isEditMode()) {
return; return;
} }
this.props.setText(this.props.draft); this.props.setText(this.props.draft);
this.setState({ isExitingDuringEditMode: true }, this.exitEditMode); this.props.isExitingDuringEditModeRef.current = true;
this.exitEditMode();
}; };
onNavigationBeforeRemove = (e: { onNavigationBeforeRemove = (e: {
+data: { +action: GenericNavigationAction }, +data: { +action: GenericNavigationAction },
+preventDefault: () => void, +preventDefault: () => void,
... ...
}) => { }) => {
if (!this.isEditMode()) { if (!this.isEditMode()) {
return; return;
} }
const { action } = e.data; const { action } = e.data;
e.preventDefault(); e.preventDefault();
const saveExit = () => { const saveExit = () => {
this.props.messageEditingContext?.setEditedMessage(null, () => { this.props.messageEditingContext?.setEditedMessage(null, () => {
this.setState({ isExitingDuringEditMode: true }, () => { this.props.isExitingDuringEditModeRef.current = true;
if (!this.props.navigation) { this.props.navigation?.dispatch(action);
return;
}
this.props.navigation.dispatch(action);
});
}); });
}; };
if (!this.isMessageEdited()) { if (!this.isMessageEdited()) {
saveExit(); saveExit();
return; return;
} }
exitEditAlert({ exitEditAlert({
onDiscard: saveExit, onDiscard: saveExit,
▲ Show 20 Lines • Show All 214 Lines • ▼ Show 20 Lines const currentUserIsVoiced = useThreadHasPermission(
threadPermissions.VOICED, threadPermissions.VOICED,
); );
const currentUserCanJoin = useThreadHasPermission( const currentUserCanJoin = useThreadHasPermission(
props.threadInfo, props.threadInfo,
threadPermissions.JOIN_THREAD, threadPermissions.JOIN_THREAD,
); );
const isExitingDuringEditModeRef = React.useRef(false);
return ( return (
<ChatInputBar <ChatInputBar
{...props} {...props}
viewerID={viewerID} viewerID={viewerID}
rawThreadInfo={rawThreadInfo} rawThreadInfo={rawThreadInfo}
draft={draft} draft={draft}
joinThreadLoadingStatus={joinThreadLoadingStatus} joinThreadLoadingStatus={joinThreadLoadingStatus}
threadCreationInProgress={threadCreationInProgress} threadCreationInProgress={threadCreationInProgress}
Show All 24 Lines <ChatInputBar
currentUserCanJoin={currentUserCanJoin} currentUserCanJoin={currentUserCanJoin}
threadFrozen={threadFrozen} threadFrozen={threadFrozen}
text={text} text={text}
setText={setText} setText={setText}
textEdited={textEdited} textEdited={textEdited}
setTextEdited={setTextEdited} setTextEdited={setTextEdited}
buttonsExpanded={buttonsExpanded} buttonsExpanded={buttonsExpanded}
setButtonsExpanded={setButtonsExpanded} setButtonsExpanded={setButtonsExpanded}
isExitingDuringEditModeRef={isExitingDuringEditModeRef}
/> />
); );
} }
type DummyChatInputBarProps = { type DummyChatInputBarProps = {
...BaseProps, ...BaseProps,
+onHeightMeasured: (height: number) => mixed, +onHeightMeasured: (height: number) => mixed,
}; };
▲ Show 20 Lines • Show All 109 Lines • Show Last 20 Lines