mirror of https://github.com/usememos/memos
chore: add data empty placeholder (#1913)
boojack
2 years ago
committed by
GitHub
parent
7e391bd53d
commit
0292f472e0
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
@ -0,0 +1,9 @@
|
||||
const Empty = () => {
|
||||
return (
|
||||
<div className="mx-auto">
|
||||
<img className="w-24 h-auto dark:opacity-40" src="/assets/empty.png" alt="" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Empty;
|
||||
@ -1,283 +0,0 @@
|
||||
import { ReactNode } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Button, IconButton, Tooltip } from "@mui/joy";
|
||||
import { generateDialog } from "../Dialog";
|
||||
import Icon from "../Icon";
|
||||
|
||||
const openUrl = (url?: string) => {
|
||||
window.open(url, "_blank");
|
||||
};
|
||||
|
||||
/** Options for {@link HelpButton} */
|
||||
interface HelpProps {
|
||||
/**
|
||||
* Plain text to show in the dialog.
|
||||
*
|
||||
* If the text contains "\n", it will be split to multiple paragraphs.
|
||||
*/
|
||||
text?: string;
|
||||
/**
|
||||
* The title of the dialog.
|
||||
*
|
||||
* If not provided, the title will be set according to the `icon` prop.
|
||||
*/
|
||||
title?: string;
|
||||
/**
|
||||
* External documentation URL.
|
||||
*
|
||||
* If provided, this will be shown as a link button in the bottom of the dialog.
|
||||
*
|
||||
* If provided alone, the button will just open the URL in a new tab.
|
||||
*
|
||||
* @param {string} url - External URL to the documentation.
|
||||
*/
|
||||
url?: string;
|
||||
/**
|
||||
* The tooltip of the button.
|
||||
*/
|
||||
hint?: string | "none";
|
||||
/**
|
||||
* The placement of the hovering hint.
|
||||
* @defaultValue "top"
|
||||
*/
|
||||
hintPlacement?: "top" | "bottom" | "left" | "right";
|
||||
/**
|
||||
* The icon to show in the button.
|
||||
*
|
||||
* Also used to infer `title` and `hint`, if they are not provided.
|
||||
*
|
||||
* @defaultValue Icon.HelpCircle
|
||||
* @see {@link Icon.LucideIcon}
|
||||
*/
|
||||
icon?: Icon.LucideIcon | "link" | "info" | "help" | "alert" | "warn";
|
||||
/**
|
||||
* The className for the button.
|
||||
* @defaultValue `!-mt-2` (aligns the button vertically with nearby text)
|
||||
*/
|
||||
className?: string;
|
||||
/**
|
||||
* The color of the button.
|
||||
* @defaultValue "neutral"
|
||||
*/
|
||||
color?: "primary" | "neutral" | "danger" | "info" | "success" | "warning";
|
||||
/**
|
||||
* The variant of the button.
|
||||
* @defaultValue "plain"
|
||||
*/
|
||||
variant?: "plain" | "outlined" | "soft" | "solid";
|
||||
/**
|
||||
* The size of the button.
|
||||
* @defaultValue "md"
|
||||
*/
|
||||
size?: "sm" | "md" | "lg";
|
||||
/**
|
||||
* `ReactNode` HTML content to show in the dialog.
|
||||
*
|
||||
* If provided, will be shown before `text`.
|
||||
*
|
||||
* You'll probably want to use `text` instead.
|
||||
*/
|
||||
children?: ReactNode | undefined;
|
||||
}
|
||||
|
||||
interface HelpDialogProps extends HelpProps, DialogProps {}
|
||||
|
||||
const HelpfulDialog: React.FC<HelpDialogProps> = (props: HelpDialogProps) => {
|
||||
const { t } = useTranslation();
|
||||
const { children, destroy, icon } = props;
|
||||
const LucideIcon = icon as Icon.LucideIcon;
|
||||
const handleCloseBtnClick = () => {
|
||||
destroy();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="dialog-header-container">
|
||||
<LucideIcon size="24" />
|
||||
<p className="title-text text-left">{props.title}</p>
|
||||
<button className="btn close-btn" onClick={handleCloseBtnClick}>
|
||||
<Icon.X />
|
||||
</button>
|
||||
</div>
|
||||
<div className="dialog-content-container max-w-sm">
|
||||
{children}
|
||||
{props.text
|
||||
? props.text.split(/\n|\\n/).map((text) => {
|
||||
return (
|
||||
<p key={text} className="mt-2 break-words text-justify">
|
||||
{text}
|
||||
</p>
|
||||
);
|
||||
})
|
||||
: null}
|
||||
<div className="mt-2 w-full flex flex-row justify-end space-x-2">
|
||||
{props.url ? (
|
||||
<Button className="btn-normal" variant="outlined" color={props.color} onClick={() => openUrl(props.url)}>
|
||||
{t("common.learn-more")}
|
||||
<Icon.ExternalLink className="ml-1 w-4 h-4 opacity-80" />
|
||||
</Button>
|
||||
) : null}
|
||||
<Button className="btn-normal" variant="outlined" color={props.color} onClick={handleCloseBtnClick}>
|
||||
{t("common.close")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
function showHelpDialog(props: HelpProps) {
|
||||
generateDialog(
|
||||
{
|
||||
className: "help-dialog",
|
||||
dialogName: "help-dialog",
|
||||
clickSpaceDestroy: true,
|
||||
},
|
||||
HelpfulDialog,
|
||||
props
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Show a helpful `IconButton` that behaves differently depending on the props.
|
||||
*
|
||||
* The main purpose of this component is to avoid UI clutter.
|
||||
*
|
||||
* Use the property `icon` to set the icon and infer the title and hint automatically.
|
||||
*
|
||||
* Use cases:
|
||||
* - Button with just a hover hint
|
||||
* - Button with a hover hint and link
|
||||
* - Button with a hover hint that opens a dialog with text and a link.
|
||||
*
|
||||
* @example
|
||||
* <Helpful hint="Hint" />
|
||||
* <Helpful hint="This is a hint with a link" url="https://usememos.com/" />
|
||||
* <Helpful icon="warn" text={t("i18n.key.long-dialog-text")} url="https://usememos.com/" />
|
||||
* <Helpful />
|
||||
*
|
||||
* <div className="flex flex-row">
|
||||
* <span className="ml-2">Sample alignment</span>
|
||||
* <Helpful hint="Button with hint" />
|
||||
* </div>
|
||||
|
||||
* @param props.title - The title of the dialog. Defaults to "Learn more" i18n key.
|
||||
* @param props.text - Plain text to show in the dialog. Line breaks are supported.
|
||||
* @param props.url - External memos documentation URL.
|
||||
* @param props.hint - The hint when hovering the button.
|
||||
* @param props.hintPlacement - The placement of the hovering hint. Defaults to "top".
|
||||
* @param props.icon - The icon to show in the button.
|
||||
* @param props.className - The class name for the button.
|
||||
* @param {HelpProps} props - See {@link HelpDialogProps} for all exposed props.
|
||||
*/
|
||||
const HelpButton = (props: HelpProps): JSX.Element => {
|
||||
const { t } = useTranslation();
|
||||
const color = props.color ?? "neutral";
|
||||
const variant = props.variant ?? "plain";
|
||||
const className = props.className ?? "";
|
||||
const hintPlacement = props.hintPlacement ?? "top";
|
||||
const iconButtonSize = "sm";
|
||||
|
||||
const dialogAvailable = props.text || props.children;
|
||||
const clickActionAvailable = props.url || dialogAvailable;
|
||||
const onlyUrlAvailable = props.url && !dialogAvailable;
|
||||
|
||||
let LucideIcon = (() => {
|
||||
switch (props.icon) {
|
||||
case "info":
|
||||
return Icon.Info;
|
||||
case "help":
|
||||
return Icon.HelpCircle;
|
||||
case "warn":
|
||||
case "alert":
|
||||
return Icon.AlertTriangle;
|
||||
case "link":
|
||||
return Icon.ExternalLink;
|
||||
default:
|
||||
return Icon.HelpCircle;
|
||||
}
|
||||
})() as Icon.LucideIcon;
|
||||
|
||||
const hint = (() => {
|
||||
switch (props.hint) {
|
||||
case undefined:
|
||||
return t(
|
||||
(() => {
|
||||
if (!dialogAvailable) {
|
||||
LucideIcon = Icon.ExternalLink;
|
||||
}
|
||||
switch (LucideIcon) {
|
||||
case Icon.Info:
|
||||
return "common.dialog.info";
|
||||
case Icon.AlertTriangle:
|
||||
return "common.dialog.warning";
|
||||
case Icon.ExternalLink:
|
||||
return "common.learn-more";
|
||||
case Icon.HelpCircle:
|
||||
default:
|
||||
return "common.dialog.help";
|
||||
}
|
||||
})()
|
||||
);
|
||||
case "":
|
||||
case "none":
|
||||
case "false":
|
||||
case "disabled":
|
||||
return undefined;
|
||||
default:
|
||||
return props.hint;
|
||||
}
|
||||
})();
|
||||
|
||||
const sizePx = (() => {
|
||||
switch (props.size) {
|
||||
case "sm":
|
||||
return 14;
|
||||
case "lg":
|
||||
return 18;
|
||||
case "md":
|
||||
default:
|
||||
return 16;
|
||||
}
|
||||
})();
|
||||
|
||||
if (!dialogAvailable && !clickActionAvailable && !props.hint) {
|
||||
return (
|
||||
<IconButton className={className} color={color} variant={variant} size={iconButtonSize}>
|
||||
<LucideIcon size={sizePx} />
|
||||
</IconButton>
|
||||
);
|
||||
}
|
||||
|
||||
const wrapInTooltip = (element: JSX.Element) => {
|
||||
if (!hint) {
|
||||
return element;
|
||||
}
|
||||
return (
|
||||
<Tooltip placement={hintPlacement} title={hint} color={color} variant={variant} size={props.size}>
|
||||
{element}
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
||||
if (clickActionAvailable) {
|
||||
props = { ...props, title: props.title ?? hint, hint: hint, color: color, variant: variant, icon: LucideIcon };
|
||||
const clickAction = () => {
|
||||
dialogAvailable ? showHelpDialog(props) : openUrl(props.url);
|
||||
};
|
||||
LucideIcon = dialogAvailable || onlyUrlAvailable ? LucideIcon : Icon.ExternalLink;
|
||||
return wrapInTooltip(
|
||||
<IconButton className={className} color={color} variant={variant} size={iconButtonSize} onClick={clickAction}>
|
||||
<LucideIcon size={sizePx} />
|
||||
</IconButton>
|
||||
);
|
||||
}
|
||||
|
||||
return wrapInTooltip(
|
||||
<IconButton className={className} color={color} variant={variant} size={iconButtonSize}>
|
||||
<LucideIcon size={sizePx} />
|
||||
</IconButton>
|
||||
);
|
||||
};
|
||||
|
||||
export default HelpButton;
|
||||
Loading…
Reference in New Issue