Usernames: Create/update/delete in profile editor
This commit is contained in:
parent
a9cb621eb6
commit
3190f95fac
38 changed files with 923 additions and 89 deletions
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue