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

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

@ -1,20 +1,30 @@
.profile-editor {
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;
flex-direction: column;
margin: 0 var(--sp-normal);
width: 100%;
max-width: 400px;
}
align-items: flex-end;
flex-wrap: wrap;
.profile-editor__input-container > .text-b3 {
margin-bottom: var(--sp-ultra-tight)
}
& > .input-container {
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);
}
}
}