Skip to content

Commit 12005af

Browse files
jaywcjlovejaywcjlove
committed
feat(Timestamp): Add Timestamp Component.
1 parent b9a67de commit 12005af

10 files changed

Lines changed: 216 additions & 1 deletion

File tree

‎docs/Routers.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import affix from 'bundle-loader?lazy&name=affix!./pages/affix';
99
import Color from 'bundle-loader?lazy&name=color!./pages/color';
1010
import Collapse from 'bundle-loader?lazy&name=collapse!./pages/collapse';
1111
import changelog from 'bundle-loader?lazy&name=changelog!./pages/changelog';
12-
import CopyToClipboard from 'bundle-loader?lazy&name=changelog!./pages/copy-to-clipboard';
12+
import CopyToClipboard from 'bundle-loader?lazy&name=copy-to-clipboard!./pages/copy-to-clipboard';
1313
import Layout from 'bundle-loader?lazy&name=layout!./pages/layout';
1414
import icon from 'bundle-loader?lazy&name=icon!./pages/icon';
1515
import button from 'bundle-loader?lazy&name=button!./pages/button';
@@ -47,6 +47,7 @@ import notification from 'bundle-loader?lazy&name=notification!./pages/notificat
4747
import carousel from 'bundle-loader?lazy&name=carousel!./pages/carousel';
4848
import loading from 'bundle-loader?lazy&name=loading!./pages/loading';
4949
import transition from 'bundle-loader?lazy&name=transition!./pages/transition';
50+
import timestamp from 'bundle-loader?lazy&name=timestamp!./pages/timestamp';
5051
/* eslint import/no-webpack-loader-syntax: off */
5152

5253
const getLang = (key) => {
@@ -113,6 +114,7 @@ const routes = {
113114
{ path: "/:lang/tag", component: asyncComponent(tag) },
114115
{ path: "/:lang/tree", component: asyncComponent(tree) },
115116
{ path: "/:lang/tooltip", component: asyncComponent(tooltip) },
117+
{ path: "/:lang/timestamp", component: asyncComponent(timestamp) },
116118
],
117119
'Navigation': [
118120
{ path: "/:lang/affix", component: asyncComponent(affix) },

‎docs/locales/cn.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ module.exports = {
3434
'notification': 'Notification 通知提醒框',
3535
'carousel': 'Carousel 走马灯',
3636
'transition': 'Transition 过渡动画',
37+
'timestamp': 'Timestamp 时间戳',
3738
'calendar': 'Calendar 日历',
3839
'table': 'Table 表格',
3940
'tabs': 'Tabs 标签页',

‎docs/locales/en.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ module.exports = {
3434
'notification': 'Notification',
3535
'carousel': 'Carousel',
3636
'transition': 'Transition',
37+
'timestamp': 'Timestamp',
3738
'calendar': 'Calendar',
3839
'table': 'Tables',
3940
'tabs': 'Tabs',

‎docs/md/cn/timestamp.md‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
Timestamp 时间戳
2+
===
3+
4+
用于时间格式化。
5+
6+
## 基础实例
7+
8+
<!--DemoStart-->
9+
```js
10+
class Demo extends Component {
11+
constructor(props) {
12+
super(props);
13+
this.state = {
14+
value: 20
15+
}
16+
}
17+
render() {
18+
return (
19+
<Timestamp value="Wed Nov 22 2017 02:06:01 GMT+0800 (CST)"/>
20+
)
21+
}
22+
}
23+
```
24+
<!--End-->
25+
26+
## 格式化时间
27+
28+
<!--DemoStart-->
29+
```js
30+
class Demo extends Component {
31+
render() {
32+
return (
33+
<div>
34+
<div><Timestamp format="yyyy年MM月dd日 hh:mm:ss" value="Wed Nov 22 2017 02:06:01 GMT+0800 (CST)"/></div>
35+
<div><Timestamp format="yyyy年MM月dd日" value="Wed Nov 22 2017 02:06:01 GMT+0800 (CST)"/></div>
36+
<div><Timestamp format="hh:mm:ss" value="Wed Nov 22 2017 02:06:01 GMT+0800 (CST)"/></div>
37+
<div><Timestamp format="yyyy" value="Wed Nov 22 2017 02:06:01 GMT+0800 (CST)"/></div>
38+
<div><Timestamp format="MM月" value="Wed Nov 22 2017 02:06:01 GMT+0800 (CST)"/></div>
39+
<div><Timestamp format="dd日" value="Wed Nov 22 2017 02:06:01 GMT+0800 (CST)"/></div>
40+
</div>
41+
)
42+
}
43+
}
44+
```
45+
<!--End-->
46+
47+
48+
## 安装和使用
49+
50+
```bash
51+
npm install uiw --save
52+
```
53+
54+
```js
55+
import { CopyToClipboard } from 'uiw';
56+
// or
57+
import Timestamp from 'uiw/lib/timestamp';
58+
```
59+
60+
### Props
61+
62+
| 参数 | 说明 | 类型 | 默认值 |
63+
|--------- |-------- |--------- |-------- |
64+
| value | 日期值作为ISO8601字符串或Date对象 | String | - |
65+
| format | 格式化时间 | String | - |

‎docs/md/en/timestamp.md‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
Timestamp 时间戳
2+
===
3+
4+
用于时间格式化。
5+
6+
## 基础实例
7+
8+
<!--DemoStart-->
9+
```js
10+
class Demo extends Component {
11+
constructor(props) {
12+
super(props);
13+
this.state = {
14+
value: 20
15+
}
16+
}
17+
render() {
18+
return (
19+
<Timestamp value="Wed Nov 22 2017 02:06:01 GMT+0800 (CST)"/>
20+
)
21+
}
22+
}
23+
```
24+
<!--End-->
25+
26+
## 格式化时间
27+
28+
<!--DemoStart-->
29+
```js
30+
class Demo extends Component {
31+
render() {
32+
return (
33+
<div>
34+
<div><Timestamp format="yyyy年MM月dd日 hh:mm:ss" value="Wed Nov 22 2017 02:06:01 GMT+0800 (CST)"/></div>
35+
<div><Timestamp format="yyyy年MM月dd日" value="Wed Nov 22 2017 02:06:01 GMT+0800 (CST)"/></div>
36+
<div><Timestamp format="hh:mm:ss" value="Wed Nov 22 2017 02:06:01 GMT+0800 (CST)"/></div>
37+
<div><Timestamp format="yyyy" value="Wed Nov 22 2017 02:06:01 GMT+0800 (CST)"/></div>
38+
<div><Timestamp format="MM月" value="Wed Nov 22 2017 02:06:01 GMT+0800 (CST)"/></div>
39+
<div><Timestamp format="dd日" value="Wed Nov 22 2017 02:06:01 GMT+0800 (CST)"/></div>
40+
</div>
41+
)
42+
}
43+
}
44+
```
45+
<!--End-->
46+
47+
48+
## 安装和使用
49+
50+
```bash
51+
npm install uiw --save
52+
```
53+
54+
```js
55+
import { CopyToClipboard } from 'uiw';
56+
// or
57+
import Timestamp from 'uiw/lib/timestamp';
58+
```
59+
60+
### Props
61+
62+
| 参数 | 说明 | 类型 | 默认值 |
63+
|--------- |-------- |--------- |-------- |
64+
| value | 日期值作为ISO8601字符串或Date对象 | String | - |
65+
| format | 格式化时间 | String | - |

‎docs/pages/timestamp/index.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import Markdown from '../../libs/markdown/';
2+
3+
export default class Layout extends Markdown {
4+
5+
}

‎src/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ export { default as Tooltip } from './tooltip/'
2525
export { default as Tree } from './tree/'
2626
export { default as TimePicker } from './time-picker/';
2727
export { default as TimeSelect } from './time-select/';
28+
export { default as Timestamp } from './timestamp';
2829
export { default as Switch } from './switch/';
2930
export { default as Select } from './select/';
3031
export { default as Slider } from './slider/';

‎src/timestamp/Timestamp.js‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import React from 'react';
2+
import { Component, PropTypes } from '../utils/';
3+
4+
function formatDate(date, formatStr) {
5+
date = new Date(date)
6+
let timeFormat = {
7+
"M+": date.getMonth() + 1, //month
8+
"d+": date.getDate(), //day
9+
"h+": date.getHours(), //hour
10+
"m+": date.getMinutes(), //minute
11+
"s+": date.getSeconds(), //second
12+
"q+": Math.floor((date.getMonth() + 3) / 3), //quarter
13+
"S": date.getMilliseconds() //millisecond
14+
}
15+
if (/(y+)/.test(formatStr)) formatStr = formatStr.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
16+
for (let k in timeFormat) {
17+
if (new RegExp("(" + k + ")").test(formatStr)) {
18+
formatStr = formatStr.replace(RegExp.$1, RegExp.$1.length === 1 ? timeFormat[k] : ("00" + timeFormat[k]).substr(("" + timeFormat[k]).length));
19+
}
20+
}
21+
return formatStr;
22+
}
23+
24+
export default class Timestamp extends Component {
25+
constructor(props) {
26+
super(props);
27+
this.state = {
28+
date: ""
29+
}
30+
}
31+
componentDidMount() {
32+
const { value, format } = this.props
33+
this.setState({
34+
date: formatDate(value, format)
35+
})
36+
}
37+
componentWillReceiveProps(nextProps) {
38+
if (nextProps.value !== this.props.value || nextProps.format !== this.props.format) {
39+
this.setState({
40+
date: formatDate(nextProps.value, nextProps.format)
41+
})
42+
}
43+
}
44+
render() {
45+
const { prefixCls, className, ...resetProps } = this.props;
46+
const { date } = this.state;
47+
return (
48+
<span className={this.classNames(`${prefixCls}`, className)} {...resetProps}>
49+
{date}
50+
</span>
51+
)
52+
}
53+
}
54+
55+
Timestamp.propTypes = {
56+
prefixCls: PropTypes.string,
57+
value: PropTypes.oneOfType([
58+
PropTypes.string, // ISO-8601 string
59+
PropTypes.object // Date object
60+
]).isRequired,
61+
format: PropTypes.string,
62+
}
63+
64+
Timestamp.defaultProps = {
65+
prefixCls: 'w-timestamp',
66+
format: 'yyyy-MM-dd hh:mm:ss',
67+
}

‎src/timestamp/index.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import Timestamp from './Timestamp';
2+
import "./style/index.less";
3+
export default Timestamp;

‎src/timestamp/style/index.less‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@timestamp:~"w-timestamp";
2+
3+
.@{timestamp} {
4+
font-size: 12px;
5+
}

0 commit comments

Comments
 (0)