All files / src/justify Justify.tsx

100% Statements 2/2
100% Branches 4/4
100% Functions 1/1
100% Lines 2/2

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                                                                          23x 23x                                                  
import React from "react";
import classNames from "classnames";
import { StyledProps } from "../_type";
import { useConfig } from "../_util/config-context";
 
export interface JustifyProps extends StyledProps {
  /**
   * 是否顶部对齐
   * @default false
   */
  top?: boolean;
 
  /**
   * 是否底部对齐
   * @default false
   */
  bottom?: boolean;
 
  /**
   * 左侧内容
   */
  left?: React.ReactNode;
 
  /**
   * 右侧内容
   */
  right?: React.ReactNode;
}
 
export function Justify({
  left,
  right,
  top,
  bottom,
  className,
  style,
}: JustifyProps) {
  const { classPrefix } = useConfig();
  return (
    <div
      className={classNames(`${classPrefix}-justify-grid`, className, {
        [`${classPrefix}-justify-grid--start`]: top,
        [`${classPrefix}-justify-grid--end`]: bottom,
      })}
      style={style}
    >
      {left != null && (
        <div
          className={`${classPrefix}-justify-grid__col ${classPrefix}-justify-grid__col--left`}
        >
          {left}
        </div>
      )}
      {right != null && (
        <div
          className={`${classPrefix}-justify-grid__col ${classPrefix}-justify-grid__col--right`}
        >
          {right}
        </div>
      )}
    </div>
  );
}