All files / src/blank Blank.tsx

100% Statements 7/7
90.91% Branches 10/11
100% Functions 2/2
100% Lines 7/7

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,
  };
}