Usernames: Create/update/delete in profile editor

This commit is contained in:
Scott Nonnenberg 2021-11-01 12:13:35 -07:00 committed by GitHub
parent a9cb621eb6
commit 3190f95fac
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
38 changed files with 923 additions and 89 deletions

View file

@ -4,6 +4,7 @@
import React from 'react';
import classNames from 'classnames';
import { Spinner } from '../../Spinner';
import { bemGenerator } from './util';
export enum IconType {
@ -19,6 +20,7 @@ export enum IconType {
'notifications' = 'notifications',
'reset' = 'reset',
'share' = 'share',
'spinner' = 'spinner',
'timer' = 'timer',
'trash' = 'trash',
'verify' = 'verify',
@ -28,6 +30,7 @@ export type Props = {
ariaLabel: string;
disabled?: boolean;
icon: IconType;
fakeButton?: boolean;
onClick?: () => void;
};
@ -37,17 +40,50 @@ export const ConversationDetailsIcon: React.ComponentType<Props> = ({
ariaLabel,
disabled,
icon,
fakeButton,
onClick,
}) => {
const iconClassName = bem('icon', icon);
const content = (
<div
className={classNames(
iconClassName,
disabled && `${iconClassName}--disabled`
)}
/>
);
let content: React.ReactChild;
if (icon === IconType.spinner) {
content = <Spinner svgSize="small" size="24" />;
} else {
const iconClassName = bem('icon', icon);
content = (
<div
className={classNames(
iconClassName,
disabled && `${iconClassName}--disabled`
)}
/>
);
}
// We need this because sometimes this component is inside other buttons
if (onClick && fakeButton && !disabled) {
return (
<div
aria-label={ariaLabel}
role="button"
className={bem('button')}
tabIndex={0}
onClick={(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
event.preventDefault();
event.stopPropagation();
onClick();
}}
onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
event.stopPropagation();
onClick();
}
}}
>
{content}
</div>
);
}
if (onClick) {
return (
@ -56,7 +92,11 @@ export const ConversationDetailsIcon: React.ComponentType<Props> = ({
className={bem('button')}
disabled={disabled}
type="button"
onClick={onClick}
onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
event.preventDefault();
event.stopPropagation();
onClick();
}}
>
{content}
</button>