Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | 1x 2x 2x 2x 2x 1x 1x | import React from "react";
import classNames from "classnames";
import { BlankSteps } from "./BlankSteps";
import { MediaObject } from "../mediaobject";
import { StyledProps } from "../_type/StyledProps";
import { withStatics } from "../_util/with-statics";
import { useConfig } from "../_util/config-context";
import { H4 } from "../heading";
export interface BlankTheme {
image: { background: string; gif: string };
}
export interface BlankProps extends StyledProps {
/**
* 预置主题
*/
theme?: "error" | "open" | "arrears" | "permission" | BlankTheme;
/**
* 描述
*/
description?: React.ReactNode;
/**
* 操作区
*/
operation?: React.ReactNode;
/**
* 操作区下方内容
*/
extra?: React.ReactNode;
/**
* 描述与操作区间内容
*/
children?: React.ReactNode;
}
export const Blank = withStatics(
function Blank({
theme,
description,
operation,
extra,
children,
className,
style,
}: BlankProps) {
const { classPrefix } = useConfig();
const { image } = getCustomTheme(theme);
return (
<div
className={classNames(
`${classPrefix}-blank-page`,
{
"default-error": theme === "error",
"default-open": theme === "open",
"default-arrears": theme === "arrears",
"default-permission": theme === "permission",
},
className
)}
style={style}
>
<MediaObject
align="middle"
media={
<div className={`${classPrefix}-blank-page__media`}>
<span className={`${classPrefix}-blank-page__media-bg`}>
{image.background && <img src={image.background} alt="" />}
</span>
<span className={`${classPrefix}-blank-page__media-gif`}>
{image.gif && <img src={image.gif} alt="" />}
</span>
</div>
}
>
<H4 className={`${classPrefix}-mb-2n`}>{description}</H4>
{children}
{(operation || extra) && (
<div className={`${classPrefix}-blank-page__op`}>
{operation}
{extra && <div className={`${classPrefix}-mt-4n`}>{extra}</div>}
</div>
)}
</MediaObject>
</div>
);
},
{
Steps: BlankSteps,
}
);
function getCustomTheme(theme: BlankProps["theme"]): BlankTheme {
if (typeof theme === "string") {
return { image: { background: null, gif: null } };
}
return {
image: {},
...theme,
};
}
|