All files / src/jumper Jumper.tsx

100% Statements 2/2
66.67% Branches 8/12
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 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 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125                                                                                                                                                                          5x 5x                                                                            
import React from "react";
import classNames from "classnames";
import { PaginationButton } from "../pagination/Pagination";
import { StyledProps } from "../_type";
import { useConfig } from "../_util/config-context";
 
export interface JumperProps extends StyledProps {
  /**
   * 是否使用无边框样式
   * @default false
   */
  noBordered?: boolean;
 
  /**
   * 按钮方向
   * @default "leftright"
   */
  direction?: "updown" | "leftright";
 
  /**
   * 是否展示当前按钮
   * @default false
   */
  showCurrent?: boolean;
 
  /**
   * 是否处于当前状态
   * @default false
   */
  isCurrent?: boolean;
 
  /** 点击下一步回调函数 */
  onNext?: () => void;
 
  /** 点击上一步回调函数 */
  onPrev?: () => void;
 
  /** 点击当前回调函数 */
  onCurrent?: () => void;
 
  /**
   * 下一步按钮是否可用
   * @default false
   */
  nextDisabled?: boolean;
 
  /**
   * 上一步按钮是否可用
   * @default false
   */
  prevDisabled?: boolean;
 
  /**
   * 当前按钮是否可用
   * @default false
   */
  curDisabled?: boolean;
 
  /** 下一步提示文案 */
  nextTitle?: string;
 
  /** 上一步提示文案 */
  prevTitle?: string;
 
  /** 当前提示文案 */
  curTitle?: string;
}
 
export function Jumper({
  direction,
  noBordered,
  showCurrent = false,
  isCurrent,
  onNext,
  onPrev,
  onCurrent,
  nextDisabled = false,
  prevDisabled = false,
  curDisabled = false,
  nextTitle,
  prevTitle,
  curTitle,
  className,
  style,
}: JumperProps) {
  const { classPrefix } = useConfig();
  return (
    <div
      className={classNames(
        `${classPrefix}-pagination`,
        { [`${classPrefix}-pagination--bordernone`]: noBordered },
        className
      )}
      style={style}
    >
      <PaginationButton
        type="pre"
        icon={direction === "updown" ? "arrowup" : "arrowleft"}
        disabled={prevDisabled}
        title={prevTitle}
        onClick={onPrev}
        classPrefix={classPrefix}
      />
      {showCurrent && (
        <PaginationButton
          type="cur"
          icon={isCurrent ? "cur-active" : "cur"}
          disabled={curDisabled}
          title={curTitle}
          onClick={onCurrent}
          classPrefix={classPrefix}
        />
      )}
      <PaginationButton
        type="next"
        icon={direction === "updown" ? "arrowdown" : "arrowright"}
        disabled={nextDisabled}
        title={nextTitle}
        onClick={onNext}
        classPrefix={classPrefix}
      />
    </div>
  );
}