All files / src/jumper/_example JumperExample.jsx

65% Statements 13/20
33.33% Branches 2/6
20% Functions 1/5
65% Lines 13/20

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          1x 1x   1x 1x 1x 1x   1x 1x 1x           1x                 1x 1x   1x                                          
import React, { useState, Fragment } from "react";
import { Jumper } from "@tencent/tea-component/lib/jumper";
import { Switch } from "@tencent/tea-component/lib/switch";
 
export default function JumperExample() {
  const [page, setPage] = useState(1);
  const maxPage = 5;
 
  let prevDisabled = false;
  let nextDisabled = false;
  let prevTitle = "上一条";
  let nextTitle = "下一条";
 
  Eif (page === 1) {
    prevDisabled = true;
    prevTitle = "当前在第一条";
  } else if (page === maxPage) {
    nextDisabled = true;
    nextTitle = "当前在最后一条";
  }
 
  const jumperProps = {
    prevDisabled,
    nextDisabled,
    prevTitle,
    nextTitle,
    onNext: () => setPage(page + 1),
    onPrev: () => setPage(page - 1),
  };
 
  const [updown, setUpdown] = useState(false);
  const [noBordered, setNoBordered] = useState(false);
 
  return (
    <Fragment>
      <Jumper
        direction={updown ? "updown" : "leftright"}
        noBordered={noBordered}
        {...jumperProps}
      />
      <p>
        正在查看第 {page}/{maxPage} 条记录
      </p>
      <section>
        <Switch value={updown} onChange={value => setUpdown(value)}>
          使用上下箭头
        </Switch>
        <Switch value={noBordered} onChange={value => setNoBordered(value)}>
          无边框样式
        </Switch>
      </section>
    </Fragment>
  );
}