Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[RFC] useTimer #2625

Open
jacksyk opened this issue Aug 10, 2024 · 0 comments
Open

[RFC] useTimer #2625

jacksyk opened this issue Aug 10, 2024 · 0 comments

Comments

@jacksyk
Copy link

jacksyk commented Aug 10, 2024

针对时间管理的一些方法,如倒计时和计时器。将关于时间的操作统一收敛到一个hooks里面。例如,可以毫无心智负担地去做倒计时功能,从而在此基础上去完善其业务逻辑,业务逻辑不用包含过多的倒计时功能

API

const returnValue= useTimer<T extends number| Date >(
  time: number | Date,
  options: Options,
  deps: DependencyList = [],
):ReturnValue<T>;

Demo

const { seconds, minutes, hours, days, start, pause, reset, isPaused } = useTimer<number>(
    1000 * 3,
    {
      onComplete: () => {
        Message.info('计时完成');
      },
      auto: false
    },
  );

  return (
    <>
      {isPaused && <span>暂停中</span>}
      <div>
        {days ? <span>{days}天 </span> : null}
        <span style={{ fontSize: 20 }}>
          {hours}:{minutes}:{seconds}
        </span>
      </div>
      <Button style={{marginRight: 10}} type="primary" onClick={() => start()}>
        开始/恢复
      </Button>
      <Button style={{marginRight: 10}} type="primary" onClick={() => pause()}>
        暂停
      </Button>
      <Button style={{marginRight: 10}} type="primary" onClick={() => reset()}>
        复位
      </Button>
    </>
  );

pr #2626

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant