3 changed files with 137 additions and 0 deletions
@ -0,0 +1,16 @@ |
|||
--- |
|||
order: 0 |
|||
title: Simple |
|||
--- |
|||
|
|||
简单的页头。 |
|||
|
|||
````jsx |
|||
import CountDown from 'ant-design-pro/lib/CountDown'; |
|||
|
|||
const targetTime = new Date().getTime() + 3900000; |
|||
|
|||
ReactDOM.render( |
|||
<CountDown target={targetTime} /> |
|||
, mountNode); |
|||
```` |
|||
@ -0,0 +1,105 @@ |
|||
import React, { Component } from 'react'; |
|||
|
|||
function fixedZero(val) { |
|||
return val * 1 < 10 ? `0${val}` : val; |
|||
} |
|||
|
|||
class CountDown extends Component { |
|||
constructor(props) { |
|||
super(props); |
|||
|
|||
const { lastTime } = this.initTime(props); |
|||
|
|||
this.state = { |
|||
lastTime, |
|||
}; |
|||
} |
|||
|
|||
componentDidMount() { |
|||
this.tick(); |
|||
} |
|||
|
|||
componentWillReceiveProps(nextProps) { |
|||
if (this.props.target !== nextProps.target) { |
|||
const { lastTime } = this.initTime(nextProps); |
|||
this.setState({ |
|||
lastTime, |
|||
}); |
|||
} |
|||
} |
|||
|
|||
componentWillUnmount() { |
|||
clearTimeout(this.timer); |
|||
} |
|||
|
|||
timer = 0; |
|||
interval = 1000; |
|||
initTime = (props) => { |
|||
let lastTime = 0; |
|||
let targetTime = 0; |
|||
try { |
|||
if (Object.prototype.toString.call(props.target) === '[object Date]') { |
|||
targetTime = props.target.getTime(); |
|||
} else { |
|||
targetTime = new Date(props.target).getTime(); |
|||
} |
|||
} catch (e) { |
|||
throw new Error('invalid target prop', e); |
|||
} |
|||
|
|||
lastTime = targetTime - new Date().getTime(); |
|||
|
|||
return { |
|||
lastTime, |
|||
}; |
|||
} |
|||
// defaultFormat = time => (
|
|||
// <span>{moment(time).format('hh:mm:ss')}</span>
|
|||
// );
|
|||
defaultFormat = (time) => { |
|||
const hours = 60 * 60 * 1000; |
|||
const minutes = 60 * 1000; |
|||
|
|||
const h = fixedZero(Math.floor(time / hours)); |
|||
const m = fixedZero(Math.floor((time - (h * hours)) / minutes)); |
|||
const s = fixedZero(Math.floor((time - (h * hours) - (m * minutes)) / 1000)); |
|||
return ( |
|||
<span>{h}:{m}:{s}</span> |
|||
); |
|||
} |
|||
tick = () => { |
|||
const { onEnd } = this.props; |
|||
let { lastTime } = this.state; |
|||
|
|||
this.timer = setTimeout(() => { |
|||
if (lastTime < this.interval) { |
|||
clearTimeout(this.timer); |
|||
this.setState({ |
|||
lastTime: 0, |
|||
}); |
|||
|
|||
if (onEnd) { |
|||
onEnd(); |
|||
} |
|||
} else { |
|||
lastTime -= this.interval; |
|||
this.setState({ |
|||
lastTime, |
|||
}); |
|||
|
|||
this.tick(); |
|||
} |
|||
}, this.interval); |
|||
} |
|||
|
|||
render() { |
|||
const { format = this.defaultFormat } = this.props; |
|||
const { lastTime } = this.state; |
|||
|
|||
const result = format(lastTime); |
|||
|
|||
return result; |
|||
} |
|||
} |
|||
|
|||
export default CountDown; |
|||
@ -0,0 +1,16 @@ |
|||
--- |
|||
category: Components |
|||
type: General |
|||
title: CountDown |
|||
subtitle: 倒计时 |
|||
cols: 1 |
|||
--- |
|||
|
|||
倒计时组件。 |
|||
|
|||
## API |
|||
|
|||
| 参数 | 说明 | 类型 | 默认值 | |
|||
|----------|------------------------------------------|-------------|-------| |
|||
| format | 时间格式化显示显示 | Function(time) | | |
|||
| target | 目标时间 | Date | - | |
|||
Loading…
Reference in new issue