date支持显示相对时间

src/renderers/Date.tsx

@@ -1,9 +1,5 @@
 import React from 'react';
 import {Renderer, RendererProps} from '../factory';
-import {ServiceStore, IServiceStore} from '../store/service';
-import {Api, SchemaNode} from '../types';
-import {filter} from '../utils/tpl';
-import cx from 'classnames';
 import moment from 'moment';
 
 export interface DateProps extends RendererProps {
@@ -11,25 +7,57 @@ export interface DateProps extends RendererProps {
     placeholder?: string;
     format?: string;
     valueFormat?: string;
+    fromNow?: boolean;
+    updateFrequency?: number;
 }
 
-export class DateField extends React.Component<DateProps, object> {
+export interface DateState {
+    random?: number;
+}
+
+export class DateField extends React.Component<DateProps, DateState> {
     static defaultProps: Partial<DateProps> = {
         placeholder: '-',
         format: 'YYYY-MM-DD',
         valueFormat: 'X',
+        fromNow: false,
+        updateFrequency: 0
     };
 
+    // 动态显示相对时间时，用来触发视图更新
+    state = {
+        random: 0
+    }
+
     render() {
-        const {className, value, valueFormat, format, placeholder, classnames: cx} = this.props;
+        const {className, value, valueFormat, format, placeholder, classnames: cx, fromNow, updateFrequency} = this.props;
 
         let viewValue: React.ReactNode = <span className="text-muted">{placeholder}</span>;
 
         if (value) {
-            let date = moment(value, valueFormat);
+            let ISODate = moment(value, moment.ISO_8601);
-            viewValue = date.isValid() ? date.format(format) : <span className="text-danger">日期无效</span>;
+            let NormalDate = moment(value, valueFormat);
+
+            // ISO_8601 格式数据（如 2014-09-08T08:02:17-05:00）使用正常格式解析会解析成1970年但是isValid=true，所以需要提前检测
+            viewValue = !ISODate.isValid() ? (
+                NormalDate.isValid() ?
+                    NormalDate.format(format) : false
+            ) : ISODate.format(format);
         }
 
+        if (fromNow && viewValue) {
+            if (updateFrequency) {
+                setTimeout(() => {
+                    this.setState({
+                        random: Math.random()
+                    });
+                }, updateFrequency);
+            }
+            viewValue = moment(viewValue as string).fromNow();
+        }
+
+        viewValue = !viewValue ? <span className="text-danger">日期无效</span> : viewValue;
+
         return <span className={cx('DateField', className)}>{viewValue}</span>;
     }
 }