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