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.

Sign up for GitHub

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

refactor: countdown #1040

Merged
merged 5 commits into from
May 25, 2023
Merged

refactor: countdown #1040

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b8313b8
refactor: countdown组件2.0 开发中
irisSong May 17, 2023
fdd2130
refactor: countdown
irisSong May 22, 2023
ccf0cba
refactor: 更新doc和单元测试
irisSong May 23, 2023
cacd21f
refactor: countdown pr 修改
irisSong May 24, 2023
b83a1d4
Merge branch 'next' into next-countdowm
irisSong May 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions migrate-from-v1.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,7 +248,11 @@
- `circleColor` 重名为 `color`
- `pathColor` 重名为 `background`
#### Collapse

#### CountDown

- 新增 `remainingTime`, 支持剩余毫秒时间倒计时。

#### Ellipsis
#### Empty
#### ImagePreview
Expand Down
2 changes: 1 addition & 1 deletion src/config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -891,7 +891,7 @@
"author": "zhenyulei"
},
{
"version": "1.0.0",
"version": "2.0.0",
"name": "CountDown",
"type": "component",
"cName": "倒计时",
Expand Down
2 changes: 2 additions & 0 deletions src/packages/countdown/countdown.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
.nut-countdown {
display: $countdown-display;
color: $countdown-color;
font-size: $countdown-font-size;
}
38 changes: 25 additions & 13 deletions src/packages/countdown/countdown.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,24 @@
import React, {
CSSProperties,
useState,
useRef,
useEffect,
ReactNode,
ForwardRefRenderFunction,
useImperativeHandle,
} from 'react'
import bem from '@/utils/bem'
import { useConfig } from '@/packages/configprovider/configprovider.taro'
import { useConfig } from '@/packages/configprovider'
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

改成 configprovider.taro

import { BasicComponent, ComponentDefaults } from '@/utils/typings'

export interface CountDownProps {
className?: string
style?: CSSProperties
export interface CountDownProps extends BasicComponent {
paused: boolean
startTime: number
endTime: number
remainingTime: number
millisecond: boolean
format: string
autoStart: boolean
time: number
destroy: boolean
onEnd: () => void
onPaused: (restTime: number) => void
onRestart: (restTime: number) => void
Expand All @@ -28,13 +27,16 @@ export interface CountDownProps {
}

const defaultProps = {
...ComponentDefaults,
paused: false,
startTime: Date.now(),
endTime: Date.now(),
remainingTime: 0,
millisecond: false,
format: 'HH:mm:ss',
autoStart: true,
time: 0,
destroy: false,
} as CountDownProps

const InternalCountDown: ForwardRefRenderFunction<
Expand All @@ -46,10 +48,12 @@ const InternalCountDown: ForwardRefRenderFunction<
paused,
startTime,
endTime,
remainingTime,
millisecond,
format,
autoStart,
time,
destroy,
className,
style,
onEnd,
Expand All @@ -59,7 +63,7 @@ const InternalCountDown: ForwardRefRenderFunction<
children,
...rest
} = { ...defaultProps, ...props }
const b = bem('countdown')
const classPrefix = 'nut-countdown'
const [restTimeStamp, setRestTime] = useState(0)
const stateRef = useRef({
pauseTime: 0,
Expand All @@ -83,8 +87,12 @@ const InternalCountDown: ForwardRefRenderFunction<

// 倒计时 interval
const initTime = () => {
stateRef.current.handleEndTime = endTime
stateRef.current.diffTime = Date.now() - getTimeStamp(startTime) // 时间差
if (remainingTime) {
stateRef.current.handleEndTime = Date.now() + Number(remainingTime)
} else {
stateRef.current.handleEndTime = endTime
stateRef.current.diffTime = Date.now() - getTimeStamp(startTime) // 时间差
}
if (!stateRef.current.counting) stateRef.current.counting = true
tick()
}
Expand Down Expand Up @@ -258,7 +266,7 @@ const InternalCountDown: ForwardRefRenderFunction<
if (stateRef.current.isIninted) {
initTime()
}
}, [endTime, startTime])
}, [endTime, startTime, remainingTime])

// 初始化
useEffect(() => {
Expand All @@ -275,18 +283,22 @@ const InternalCountDown: ForwardRefRenderFunction<
}, [])

const componentWillUnmount = () => {
clearInterval(stateRef.current.timer)
destroy && cancelAnimationFrame(stateRef.current.timer)
}

const renderTime = (() => {
return formatRemainTime(stateRef.current.restTime)
})()

return (
<div className={`${b()} ${className || ''}`} style={{ ...style }} {...rest}>
<div
className={`${classPrefix} ${className}`}
style={{ ...style }}
{...rest}
>
{children || (
<div
className={b('block')}
className={`${classPrefix}__block`}
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{
__html: `${renderTime}`,
Expand Down
36 changes: 24 additions & 12 deletions src/packages/countdown/countdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,24 @@
import React, {
CSSProperties,
useState,
useRef,
useEffect,
ReactNode,
ForwardRefRenderFunction,
useImperativeHandle,
} from 'react'
import bem from '@/utils/bem'
import { useConfig } from '@/packages/configprovider'
import { BasicComponent, ComponentDefaults } from '@/utils/typings'

export interface CountDownProps {
className?: string
style?: CSSProperties
export interface CountDownProps extends BasicComponent {
paused: boolean
startTime: number
endTime: number
remainingTime: number
millisecond: boolean
format: string
autoStart: boolean
time: number
destroy: boolean
onEnd: () => void
onPaused: (restTime: number) => void
onRestart: (restTime: number) => void
Expand All @@ -28,13 +27,16 @@ export interface CountDownProps {
}

const defaultProps = {
...ComponentDefaults,
paused: false,
startTime: Date.now(),
endTime: Date.now(),
remainingTime: 0,
millisecond: false,
format: 'HH:mm:ss',
autoStart: true,
time: 0,
destroy: false,
} as CountDownProps

const InternalCountDown: ForwardRefRenderFunction<
Expand All @@ -46,10 +48,12 @@ const InternalCountDown: ForwardRefRenderFunction<
paused,
startTime,
endTime,
remainingTime,
millisecond,
format,
autoStart,
time,
destroy,
className,
style,
onEnd,
Expand All @@ -59,7 +63,7 @@ const InternalCountDown: ForwardRefRenderFunction<
children,
...rest
} = { ...defaultProps, ...props }
const b = bem('countdown')
const classPrefix = 'nut-countdown'
const [restTimeStamp, setRestTime] = useState(0)
const stateRef = useRef({
pauseTime: 0,
Expand All @@ -83,8 +87,12 @@ const InternalCountDown: ForwardRefRenderFunction<

// 倒计时 interval
const initTime = () => {
stateRef.current.handleEndTime = endTime
stateRef.current.diffTime = Date.now() - getTimeStamp(startTime) // 时间差
if (remainingTime) {
stateRef.current.handleEndTime = Date.now() + Number(remainingTime)
} else {
stateRef.current.handleEndTime = endTime
stateRef.current.diffTime = Date.now() - getTimeStamp(startTime) // 时间差
}
if (!stateRef.current.counting) stateRef.current.counting = true
tick()
}
Expand Down Expand Up @@ -258,7 +266,7 @@ const InternalCountDown: ForwardRefRenderFunction<
if (stateRef.current.isIninted) {
initTime()
}
}, [endTime, startTime])
}, [endTime, startTime, remainingTime])

// 初始化
useEffect(() => {
Expand All @@ -275,18 +283,22 @@ const InternalCountDown: ForwardRefRenderFunction<
}, [])

const componentWillUnmount = () => {
clearInterval(stateRef.current.timer)
destroy && cancelAnimationFrame(stateRef.current.timer)
}

const renderTime = (() => {
return formatRemainTime(stateRef.current.restTime)
})()

return (
<div className={`${b()} ${className || ''}`} style={{ ...style }} {...rest}>
<div
className={`${classPrefix} ${className}`}
style={{ ...style }}
{...rest}
>
{children || (
<div
className={b('block')}
className={`${classPrefix}__block`}
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{
__html: `${renderTime}`,
Expand Down
35 changes: 22 additions & 13 deletions src/packages/countdown/demo.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ interface T {
millisecond: string
serverTime: string
async: string
remainingTime: string
controlTime: string
customStyle: string
handleControl: string
Expand All @@ -36,6 +37,7 @@ const CountDownDemo = () => {
const [translated] = useTranslate<T>({
'zh-CN': {
basic: '基本用法',
remainingTime: '剩余时间用法',
format: '自定义格式',
millisecond: '毫秒级渲染',
serverTime: '以服务端的时间为准',
Expand All @@ -53,23 +55,25 @@ const CountDownDemo = () => {
},
'zh-TW': {
basic: '基本用法',
format: '自定义格式',
millisecond: '毫秒级渲染',
serverTime: '以服务端的时间为准',
async: '异步更新结束时间',
controlTime: '控制开始和暂停的倒计时',
customStyle: '自定义展示样式',
handleControl: '手动控制',
start: '开始',
pause: '暂停',
remainingTime: '剩余時間用法',
format: '自定義格式',
millisecond: '毫秒級渲染',
serverTime: '以服務端的時間為準',
async: '異步更新結束時間',
controlTime: '控製開始和暫停的倒計時',
customStyle: '自定義展示樣式',
handleControl: '手動控製',
start: '開始',
pause: '暫停',
reset: '重置',
day: '天',
hour: '时',
hour: '時',
minute: '分',
second: '秒',
},
'en-US': {
basic: 'Basic Usage',
remainingTime: 'Remaining time Usage',
format: 'Custom Format',
millisecond: 'Millisecond',
serverTime: 'Server Time Prevails',
Expand All @@ -88,8 +92,9 @@ const CountDownDemo = () => {
})
const stateRef = useRef({
timer: -1,
serverTime: Date.now() - 30 * 1000,
endTime: Date.now() + 50 * 1000,
serverTime: Date.now() - 20 * 1000,
endTime: Date.now() + 60 * 1000,
remainingTime: 60 * 1000,
})

const countDownRef = useRef<countdownRefState>(null)
Expand Down Expand Up @@ -143,9 +148,9 @@ const CountDownDemo = () => {
console.log('restart: ', v)
}
const onUpdate = (v: any) => {
console.log('restTime: ', v)
setResetTime(v)
}

const start = () => {
console.log(countDownRef.current)
countDownRef.current && countDownRef.current.start()
Expand All @@ -170,6 +175,10 @@ const CountDownDemo = () => {
onEnd={onEnd}
/>
</Cell>
<h2>{translated.remainingTime}</h2>
<Cell>
<CountDown remainingTime={stateRef.current.remainingTime} />
</Cell>
<h2>{translated.format}</h2>
<Cell>
<CountDown
Expand Down
Loading