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

feat!: rewrite use-countdown #18

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Conversation

fengzilong
Copy link

@fengzilong fengzilong commented Nov 16, 2021

Usage

import { createElement, useEffect } from 'rax';
import useCountDown from 'rax-use-countdown';

function Example() {
  // countdown 10s with 100ms interval
  const [timeLeft, { start, pause, resume, reset }] = useCountDown(10 * 1000, 100);

  useEffect(() => {
    start();
  }, []);

  // you can format timeLeft by yourself
  return <div>There only left { timeLeft } milliseconds</div>;
}

实现上使用了 requestAnimationFrame,但是小程序兼容好像不太好,使用了 setTimeout 作为降级

入参有两项:

  1. 需要倒计时的总时间(单位:毫秒,默认值 60000,也就是 60 秒)
  2. 每次更新的间隔(单位:毫秒,默认值 1000,也就是 1 秒)

出参是数组形式,包含两项:

  1. 剩余的毫秒数,可以自行处理成任意格式
  2. 倒计时的控制函数(start/pause/resume/reset,用户可以自行控制什么时机开始/暂停/恢复/重置倒计时)

@SoloJiang
Copy link
Contributor

天、小时、分钟的倒计交给 rax-countdown 这个组件来承载?

@fengzilong
Copy link
Author

fengzilong commented Nov 16, 2021

天、小时、分钟的倒计交给 rax-countdown 这个组件来承载?

嗯,timeLeft 可以格式化成 天、小时、分钟 的形式,交给外部去处理格式化比较灵活,countdown 就只负责倒计时,加上 hook 可以组合,用户可以自己基于这个再封装

而且 rax-countdown 本身也有暴露 formatFunc,那里的 formatFunc 需要传个剩余毫秒数进去;目前格式化相关的工作原本也是包含在 rax-countdown 里面的,这块不是很想动,因为 https://github.com/raxjs/rax-components/tree/43ff08d89ed37c1529723d6a1ee9a666ae81ed93/packages/rax-countdown/src 这里还有 miniappbytedance-microapp 两个目录,如果把格式化放 hook 里面,格式化代码这个仓库需要有一份,rax-countdown 仓库也需要有一份,miniappbytedance-microapp 没法用 hook,格式化都放 rax-countdown 那边的话好维护点,这里的 hook 只提供基础功能,npm 上也有一些专门用于格式化的包,比如 format-duration-time,可以在文档中提示给用户作为参考

如果抛开上面这些问题,use-countdown 的签名也可以设计成这样:

const [timeLeft, { start, pause, resume, reset, format }] = useCountDown(10 * 1000, 100);

useEffect(() => {
  start();
}, []);

return <div>There only left { format(timeLeft, '{d}天{h}时{m}分{s}秒{ms}') }</div>;

多暴露一个 format 方法,问题也不大

@fengzilong fengzilong changed the title feat!: rewrite use-countdown [WIP] feat!: rewrite use-countdown Nov 16, 2021
@fengzilong
Copy link
Author

fengzilong commented Nov 16, 2021

可能还得再支持两个属性,onTick 和 onComplete,rax-countdown 那边需要,暂时加上 WIP 了 orz

@fengzilong fengzilong changed the title [WIP] feat!: rewrite use-countdown feat!: rewrite use-countdown Nov 22, 2021
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

Successfully merging this pull request may close these issues.

2 participants