Introduce a new design for the left pane

This commit is contained in:
Evan Hahn 2021-10-12 18:59:08 -05:00 committed by GitHub
parent d60600d6fb
commit 35a54cdc02
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
63 changed files with 1205 additions and 576 deletions

View file

@ -1,17 +1,22 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React, { ReactNode } from 'react';
import React, { ReactChild, ReactNode } from 'react';
import classNames from 'classnames';
import { Tooltip, TooltipPlacement } from './Tooltip';
import { WidthBreakpoint } from './_util';
const BASE_CLASS_NAME = 'LeftPaneDialog';
const TOOLTIP_CLASS_NAME = `${BASE_CLASS_NAME}__tooltip`;
export type PropsType = {
type?: 'warning' | 'error';
icon?: 'update' | 'relink' | 'network' | ReactNode;
icon?: 'update' | 'relink' | 'network' | 'warning' | ReactChild;
title?: string;
subtitle?: string;
children?: ReactNode;
hoverText?: string;
containerWidthBreakpoint: WidthBreakpoint;
} & (
| {
onClick?: undefined;
@ -38,7 +43,7 @@ export type PropsType = {
);
export const LeftPaneDialog: React.FC<PropsType> = ({
icon,
icon = 'warning',
type,
onClick,
clickLabel,
@ -48,6 +53,7 @@ export const LeftPaneDialog: React.FC<PropsType> = ({
hoverText,
hasAction,
containerWidthBreakpoint,
hasXButton,
onClose,
closeLabel,
@ -123,23 +129,28 @@ export const LeftPaneDialog: React.FC<PropsType> = ({
onClick === undefined ? undefined : `${BASE_CLASS_NAME}--clickable`,
]);
const message = (
<>
{title === undefined ? undefined : <h3>{title}</h3>}
{subtitle === undefined ? undefined : <div>{subtitle}</div>}
{children}
{action}
</>
);
const content = (
<>
<div className={`${BASE_CLASS_NAME}__container`}>
{typeof icon === 'string' ? <div className={iconClassName} /> : icon}
<div className={`${BASE_CLASS_NAME}__message`}>
{title === undefined ? undefined : <h3>{title}</h3>}
{subtitle === undefined ? undefined : <div>{subtitle}</div>}
{children}
{action}
</div>
<div className={`${BASE_CLASS_NAME}__message`}>{message}</div>
</div>
{xButton}
</>
);
let dialogNode: ReactChild;
if (onClick) {
return (
dialogNode = (
<div
className={className}
role="button"
@ -152,11 +163,28 @@ export const LeftPaneDialog: React.FC<PropsType> = ({
{content}
</div>
);
} else {
dialogNode = (
<div className={className} title={hoverText}>
{content}
</div>
);
}
return (
<div className={className} title={hoverText}>
{content}
</div>
);
if (containerWidthBreakpoint === WidthBreakpoint.Narrow) {
return (
<Tooltip
content={message}
direction={TooltipPlacement.Right}
className={classNames(
TOOLTIP_CLASS_NAME,
type && `${TOOLTIP_CLASS_NAME}--${type}`
)}
>
{dialogNode}
</Tooltip>
);
}
return dialogNode;
};