Commit 36fbfbe7 authored by afc163's avatar afc163

rename Countdown to CountDown

parent 05ca4cf8
---
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);
````
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;
---
category: Components
type: General
title: CountDown
subtitle: 倒计时
cols: 1
---
倒计时组件。
## API
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------------------------------|-------------|-------|
| format | 时间格式化显示显示 | Function(time) | |
| target | 目标时间 | Date | - |
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment