michael/cinny
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity

Added cancel button and support for empty display name (#91)

Browse source
This commit is contained in:
Ajay Bura 2021-09-13 13:33:24 +05:30
parent 09f7225eb7
commit 872e2f9753
2 changed files with 44 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
src/app/organisms/profile-editor/ProfileEditor.jsx
View file

@ -37,20 +37,27 @@ function ProfileEditor({
} }
function saveDisplayName() { function saveDisplayName() {
if (displayNameRef.current.value !== null && displayNameRef.current.value !== '') { const newDisplayName = displayNameRef.current.value;
mx.setDisplayName(displayNameRef.current.value); if (newDisplayName !== null && newDisplayName !== username) {
username = displayNameRef.current.value; mx.setDisplayName(newDisplayName);
username = newDisplayName;
setDisabled(true); setDisabled(true);
} }
} }
// Enables/disables button depending on if the typed displayname is different than the current.
function onDisplayNameInputChange() { function onDisplayNameInputChange() {
setDisabled((username === displayNameRef.current.value) || displayNameRef.current.value === '' || displayNameRef.current.value == null); setDisabled(username === displayNameRef.current.value || displayNameRef.current.value == null);
}
function cancelDisplayNameChanges() {
displayNameRef.current.value = username;
onDisplayNameInputChange();
} }
return ( return (
<form className="profile-editor"> <form
className="profile-editor"
onSubmit={(e) => { e.preventDefault(); saveDisplayName(); }}
>
<ImageUpload <ImageUpload
text={username} text={username}
bgColor={bgColor} bgColor={bgColor}
@ -58,14 +65,16 @@ function ProfileEditor({
onUpload={handleAvatarUpload} onUpload={handleAvatarUpload}
onRequestRemove={() => handleAvatarUpload(null)} onRequestRemove={() => handleAvatarUpload(null)}
/> />
<div className="profile-editor__input-container"> <div className="profile-editor__input-wrapper">
<Text variant="b3"> <Input
Display name of&nbsp; label={`Display name of ${mx.getUserId()}`}
{mx.getUserId()} onChange={onDisplayNameInputChange}
</Text> value={mx.getUser(mx.getUserId()).displayName}
<Input id="profile-editor__input" onChange={onDisplayNameInputChange} placeholder={mx.getUser(mx.getUserId()).displayName} forwardRef={displayNameRef} /> forwardRef={displayNameRef}
/>
<Button variant="primary" type="submit" disabled={disabled}>Save</Button>
<Button onClick={cancelDisplayNameChanges}>Cancel</Button>
</div> </div>
<Button variant="primary" onClick={saveDisplayName} disabled={disabled}>Save</Button>
</form> </form>
); );
} }

34
src/app/organisms/profile-editor/ProfileEditor.scss
View file

@ -1,20 +1,30 @@
.profile-editor { .profile-editor {
display: flex; display: flex;
align-items: end; align-items: flex-start;
} }
.profile-editor__input-container { .profile-editor__input-wrapper {
flex: 1;
min-width: 0;
margin-top: 10px;
display: flex; display: flex;
flex-direction: column; align-items: flex-end;
margin: 0 var(--sp-normal); flex-wrap: wrap;
width: 100%;
max-width: 400px;
}
.profile-editor__input-container > .text-b3 { & > .input-container {
margin-bottom: var(--sp-ultra-tight) flex: 1;
} }
& > button {
height: 46px;
margin-top: var(--sp-normal);
}
.profile-editor > .btn-primary { & > * {
height: 46px; margin-left: var(--sp-normal);
[dir=rtl] & {
margin-left: 0;
margin-right: var(--sp-normal);
}
}
} }