Update @vector-im/compound-web (#12718)
* deps: update `@vector-im/compound-web` * feat: use new EditInPlace * e2e: update snapshots
This commit is contained in:
parent
510fb1ba2f
commit
53ea045c54
11 changed files with 150 additions and 219 deletions
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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">
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue