Focus group description input when editing it

This commit is contained in:
Josh Perez 2021-06-02 20:07:37 -04:00 committed by GitHub
parent c986a1c644
commit 66d9bb8418
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 52 additions and 25 deletions

View file

@ -2614,21 +2614,19 @@ button.module-conversation-details__action-button {
.module-conversation-details { .module-conversation-details {
&-header { &-header {
&__root, &__root {
&__root--editable {
align-items: center; align-items: center;
background: none;
border: none;
color: inherit;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0; margin: 0 0 24px 0;
outline: inherit;
padding: 0 0 24px 0;
text-align: center; text-align: center;
width: 100%; width: 100%;
} }
&__root--editable {
@include button-reset();
}
&__root--editable { &__root--editable {
cursor: pointer; cursor: pointer;
} }

View file

@ -36,7 +36,8 @@ import { getCustomColorStyle } from '../../../util/getCustomColorStyle';
enum ModalState { enum ModalState {
NothingOpen, NothingOpen,
EditingGroupAttributes, EditingGroupDescription,
EditingGroupTitle,
AddingGroupMembers, AddingGroupMembers,
CustomDisappearingTimeout, CustomDisappearingTimeout,
} }
@ -142,10 +143,12 @@ export const ConversationDetails: React.ComponentType<Props> = ({
case ModalState.NothingOpen: case ModalState.NothingOpen:
modalNode = undefined; modalNode = undefined;
break; break;
case ModalState.EditingGroupAttributes: case ModalState.EditingGroupDescription:
case ModalState.EditingGroupTitle:
modalNode = ( modalNode = (
<EditConversationAttributesModal <EditConversationAttributesModal
avatarPath={conversation.avatarPath} avatarPath={conversation.avatarPath}
focusDescription={modalState === ModalState.EditingGroupDescription}
groupDescription={conversation.groupDescription} groupDescription={conversation.groupDescription}
i18n={i18n} i18n={i18n}
makeRequest={async ( makeRequest={async (
@ -269,8 +272,12 @@ export const ConversationDetails: React.ComponentType<Props> = ({
conversation={conversation} conversation={conversation}
i18n={i18n} i18n={i18n}
memberships={memberships} memberships={memberships}
startEditing={() => { startEditing={(isGroupTitle: boolean) => {
setModalState(ModalState.EditingGroupAttributes); setModalState(
isGroupTitle
? ModalState.EditingGroupTitle
: ModalState.EditingGroupDescription
);
}} }}
/> />

View file

@ -16,7 +16,7 @@ export type Props = {
conversation: ConversationType; conversation: ConversationType;
i18n: LocalizerType; i18n: LocalizerType;
memberships: Array<GroupV2Membership>; memberships: Array<GroupV2Membership>;
startEditing: () => void; startEditing: (isGroupTitle: boolean) => void;
}; };
const bem = bemGenerator('module-conversation-details-header'); const bem = bemGenerator('module-conversation-details-header');
@ -58,24 +58,36 @@ export const ConversationDetailsHeader: React.ComponentType<Props> = ({
<div className={bem('title')}> <div className={bem('title')}>
<Emojify text={conversation.title} /> <Emojify text={conversation.title} />
</div> </div>
<div className={bem('subtitle')}>{subtitle}</div>
</div> </div>
</> </>
); );
if (canEdit) { if (canEdit) {
return ( return (
<button <div className={bem('root')}>
type="button" <button
onClick={ev => { type="button"
ev.preventDefault(); onClick={ev => {
ev.stopPropagation(); ev.preventDefault();
startEditing(); ev.stopPropagation();
}} startEditing(true);
className={bem('root', 'editable')} }}
> className={bem('root', 'editable')}
{contents} >
</button> {contents}
</button>
<button
type="button"
onClick={ev => {
ev.preventDefault();
ev.stopPropagation();
startEditing(false);
}}
className={bem('root', 'editable')}
>
<div className={bem('subtitle')}>{subtitle}</div>
</button>
</div>
); );
} }

View file

@ -25,6 +25,7 @@ const TEMPORARY_AVATAR_VALUE = new ArrayBuffer(0);
type PropsType = { type PropsType = {
avatarPath?: string; avatarPath?: string;
focusDescription?: boolean;
groupDescription?: string; groupDescription?: string;
i18n: LocalizerType; i18n: LocalizerType;
makeRequest: ( makeRequest: (
@ -39,8 +40,15 @@ type PropsType = {
title: string; title: string;
}; };
function focusRef(el: HTMLElement | null) {
if (el) {
el.focus();
}
}
export const EditConversationAttributesModal: FunctionComponent<PropsType> = ({ export const EditConversationAttributesModal: FunctionComponent<PropsType> = ({
avatarPath: externalAvatarPath, avatarPath: externalAvatarPath,
focusDescription = false,
groupDescription: externalGroupDescription = '', groupDescription: externalGroupDescription = '',
i18n, i18n,
makeRequest, makeRequest,
@ -156,6 +164,7 @@ export const EditConversationAttributesModal: FunctionComponent<PropsType> = ({
disabled={isRequestActive} disabled={isRequestActive}
i18n={i18n} i18n={i18n}
onChangeValue={setRawTitle} onChangeValue={setRawTitle}
ref={!focusDescription ? focusRef : undefined}
value={rawTitle} value={rawTitle}
/> />
@ -163,6 +172,7 @@ export const EditConversationAttributesModal: FunctionComponent<PropsType> = ({
disabled={isRequestActive} disabled={isRequestActive}
i18n={i18n} i18n={i18n}
onChangeValue={setRawGroupDescription} onChangeValue={setRawGroupDescription}
ref={focusDescription ? focusRef : undefined}
value={rawGroupDescription} value={rawGroupDescription}
/> />