Update @vector-im/compound-web (#12718)

* deps: update `@vector-im/compound-web`

* feat: use new EditInPlace

* e2e: update snapshots
This commit is contained in:
Florian Duros 2024-07-02 14:35:13 +02:00 committed by GitHub
parent 510fb1ba2f
commit 53ea045c54
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 150 additions and 219 deletions

View file

@ -23,6 +23,8 @@ import {
RadioControl,
EditInPlace,
IconButton,
ErrorMessage,
HelpMessage,
} from "@vector-im/compound-web";
import { Icon as DeleteIcon } from "@vector-im/compound-design-tokens/icons/delete.svg";
import classNames from "classnames";
@ -231,10 +233,9 @@ function CustomTheme({ theme }: CustomThemeProps): JSX.Element {
<EditInPlace
className="mx_ThemeChoicePanel_CustomTheme_EditInPlace"
label={_t("settings|appearance|custom_theme_add")}
cancelButtonLabel={_t("action|cancel")}
saveButtonLabel={_t("settings|appearance|custom_theme_add")}
savingLabel={_t("settings|appearance|custom_theme_downloading")}
helpLabel={_t("settings|appearance|custom_theme_help")}
error={error}
value={customTheme}
onChange={(e: ChangeEvent<HTMLInputElement>) => {
setError(undefined);
@ -281,7 +282,10 @@ function CustomTheme({ theme }: CustomThemeProps): JSX.Element {
await SettingsStore.setValue("custom_themes", null, SettingLevel.ACCOUNT, currentThemes);
}}
onCancel={clear}
/>
>
<HelpMessage>{_t("settings|appearance|custom_theme_help")}</HelpMessage>
{error && <ErrorMessage>{error}</ErrorMessage>}
</EditInPlace>
<CustomThemeList theme={theme} />
</div>
);

View file

@ -16,7 +16,7 @@ limitations under the License.
import React, { ChangeEvent, useCallback, useEffect, useMemo, useState } from "react";
import { logger } from "matrix-js-sdk/src/logger";
import { EditInPlace, Alert } from "@vector-im/compound-web";
import { EditInPlace, Alert, ErrorMessage } from "@vector-im/compound-web";
import { _t } from "../../../languageHandler";
import { OwnProfileStore } from "../../../stores/OwnProfileStore";
@ -68,7 +68,6 @@ interface UserProfileSettingsProps {
const UserProfileSettings: React.FC<UserProfileSettingsProps> = ({ canSetDisplayName, canSetAvatar }) => {
const [avatarURL, setAvatarURL] = useState(OwnProfileStore.instance.avatarMxc);
const [displayName, setDisplayName] = useState(OwnProfileStore.instance.displayName ?? "");
const [initialDisplayName, setInitialDisplayName] = useState(OwnProfileStore.instance.displayName ?? "");
const [avatarError, setAvatarError] = useState<boolean>(false);
const [maxUploadSize, setMaxUploadSize] = useState<number | undefined>();
const [displayNameError, setDisplayNameError] = useState<boolean>(false);
@ -135,7 +134,6 @@ const UserProfileSettings: React.FC<UserProfileSettingsProps> = ({ canSetDisplay
try {
setDisplayNameError(false);
await client.setDisplayName(displayName);
setInitialDisplayName(displayName);
} catch (e) {
setDisplayNameError(true);
throw e;
@ -174,7 +172,6 @@ const UserProfileSettings: React.FC<UserProfileSettingsProps> = ({ canSetDisplay
className="mx_UserProfileSettings_profile_displayName"
label={_t("settings|general|display_name")}
value={displayName}
disableSaveButton={displayName === initialDisplayName}
saveButtonLabel={_t("common|save")}
cancelButtonLabel={_t("common|cancel")}
savedLabel={_t("common|saved")}
@ -182,9 +179,10 @@ const UserProfileSettings: React.FC<UserProfileSettingsProps> = ({ canSetDisplay
onChange={onDisplayNameChanged}
onCancel={onDisplayNameCancel}
onSave={onDisplayNameSave}
error={displayNameError ? _t("settings|general|display_name_error") : undefined}
disabled={!canSetDisplayName}
/>
>
{displayNameError && <ErrorMessage>{_t("settings|general|display_name_error")}</ErrorMessage>}
</EditInPlace>
</div>
{avatarError && (
<Alert title={_t("settings|general|avatar_upload_error_title")} type="critical">