优化tabs/date

src/components/Tabs.tsx

@@ -20,7 +20,7 @@ const transitionStyles: {
 export interface TabProps extends Schema {
     title?: string; // 标题
     icon?: string;
-    hash?: string; // 通过 hash 来控制当前选择
+    eventKey: string | number;
     tabsMode?: '' | 'line' | 'card' | 'radio';
     tab?: Schema;
     className?: string;
@@ -30,7 +30,6 @@ export interface TabProps extends Schema {
     reload?: boolean;
     mountOnEnter?: boolean;
     unmountOnExit?: boolean;
-    index: string|number;
 };
 
 export interface TabsProps extends RendererProps {
@@ -54,17 +53,17 @@ export class Tabs extends React.Component<TabsProps> {
         }
 
         const { classnames: cx, activeKey } = this.props;
-        const { hash, disabled, icon, title, visible } = child.props;
+        const { eventKey, disabled, icon, title } = child.props;
 
-        return visible !== false ? (
+        return (
             <li
                 className={cx(
                     'Tabs-link',
-                    activeKey === hash || activeKey === index ? 'active' : '',
+                    activeKey === eventKey ? 'active' : '',
                     disabled  ? 'disabled' : ''
                 )}
                 key={index}
-                onClick={() => disabled ? '' : this.handleSelect(hash || index)}
+                onClick={() => disabled ? '' : this.handleSelect(eventKey)}
             >
                 {icon ? (
                     <div>
@@ -74,7 +73,7 @@ export class Tabs extends React.Component<TabsProps> {
                     <a>{title}</a>
                 )}
             </li>
-        ) : null;
+        );
     }
 
     renderTab(child:any, index:number) {
@@ -82,11 +81,10 @@ export class Tabs extends React.Component<TabsProps> {
             return;
         }
 
-        const { activeKey, classnames } = this.props;
+        const { activeKey, classnames} = this.props;
 
         return React.cloneElement(child, {
             ...child.props,
-            index: index,
             key: index,
             classnames: classnames,
             activeKey: activeKey
@@ -147,8 +145,7 @@ export class Tab extends React.PureComponent<TabProps> {
             mountOnEnter,
             reload,
             unmountOnExit,
-            index,
-            hash,
+            eventKey,
             activeKey,
             children,
             className
@@ -156,7 +153,7 @@ export class Tab extends React.PureComponent<TabProps> {
 
         return (
             <Transition
-                in={activeKey === hash || activeKey == index}
+                in={activeKey === eventKey}
                 mountOnEnter={mountOnEnter}
                 unmountOnExit={typeof reload === 'boolean' ? reload : unmountOnExit}
                 timeout={500}
@@ -170,7 +167,7 @@ export class Tab extends React.PureComponent<TabProps> {
                             ref={this.contentRef}
                             className={cx && cx(
                                 transitionStyles[status],
-                                activeKey === hash || activeKey == index ? 'active' : '',
+                                activeKey === eventKey ? 'active' : '',
                                 'tab-pane',
                                 'fade',
                                 className

src/renderers/Date.tsx

@@ -16,6 +16,8 @@ export interface DateState {
 }
 
 export class DateField extends React.Component<DateProps, DateState> {
+    refreshInterval: number;
+
     static defaultProps: Partial<DateProps> = {
         placeholder: '-',
         format: 'YYYY-MM-DD',
@@ -25,34 +27,44 @@ export class DateField extends React.Component<DateProps, DateState> {
     };
 
     // 动态显示相对时间时，用来触发视图更新
-    state = {
+    state: DateState = {
         random: 0
     }
 
-    render() {
-        const {className, value, valueFormat, format, placeholder, classnames: cx, fromNow, updateFrequency} = this.props;
+    componentDidMount() {
+        const { fromNow, updateFrequency } = this.props;
 
+        if (fromNow && updateFrequency) {
+            this.refreshInterval = setInterval(() => {
+                this.setState({
+                    random: Math.random()
+                });
+            }, updateFrequency);
+        }
+    }
+
+    componentWillUnmount() {
+        clearInterval(this.refreshInterval);
+    }
+
+    render() {
+        const { value, valueFormat, format, placeholder, fromNow, className, classnames: cx } = this.props;
         let viewValue: React.ReactNode = <span className="text-muted">{placeholder}</span>;
 
         if (value) {
             let ISODate = moment(value, moment.ISO_8601);
             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);
+            viewValue = ISODate.isValid()
+                ? ISODate.format(format)
+                : (
+                    NormalDate.isValid()
+                        ? NormalDate.format(format)
+                        : false
+                );
         }
 
-        if (fromNow && viewValue) {
-            if (updateFrequency) {
-                setTimeout(() => {
-                    this.setState({
-                        random: Math.random()
-                    });
-                }, updateFrequency);
-            }
+        if (fromNow) {
             viewValue = moment(viewValue as string).fromNow();
         }
 

src/renderers/Tabs.tsx

@@ -3,7 +3,7 @@ import {Renderer, RendererProps} from '../factory';
 import { Schema } from '../types';
 import { evalExpression } from '../utils/tpl';
 import find = require('lodash/find');
-import { isVisible } from '../utils/helper';
+import { isVisible, autobind } from '../utils/helper';
 import findIndex = require('lodash/findIndex');
 import { Tabs as CTabs, Tab } from '../components/Tabs';
 import { ClassNamesFn } from '../theme';
@@ -21,7 +21,6 @@ export interface TabProps extends Schema {
     reload?: boolean;
     mountOnEnter?: boolean;
     unmountOnExit?: boolean;
-    index: string|number;
 };
 
 export interface TabsProps extends RendererProps {
@@ -59,10 +58,8 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
 
         this.state = {
             prevKey: undefined,
-            activeKey: activeKey,
+            activeKey: activeKey
         };
-
-        this.handleSelect = this.handleSelect.bind(this);
     }
 
     componentDidMount() {
@@ -115,6 +112,7 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
         this.autoJumpToNeighbour();
     }
 
+    @autobind
     autoJumpToNeighbour() {
         const {
             tabs,
@@ -148,6 +146,7 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
         }
     }
 
+    @autobind
     handleSelect(key: any) {
         const {env} = this.props;
 
@@ -164,6 +163,28 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
         });
     }
 
+    @autobind
+    switchTo(index: number) {
+        const {tabs} = this.props;
+
+        Array.isArray(tabs) &&
+        tabs[index] &&
+        this.setState({
+            activeKey: tabs[index].hash || index,
+        });
+    }
+
+    @autobind
+    currentIndex(): number {
+        const {tabs} = this.props;
+
+        return Array.isArray(tabs)
+            ? findIndex(tabs, (tab: TabProps, index) =>
+                tab.hash ? tab.hash === this.state.activeKey : index === this.state.activeKey
+            )
+            : -1;
+    }
+
     render() {
         const {
             classnames: cx,
@@ -185,7 +206,6 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
         const mode = tabsMode || dMode;
         const finallyTabs = tabs.map(tab => {
             tab.disabled = tab.disabled || (tab.disabledOn && evalExpression(tab.disabledOn, data));
-            tab.visible = isVisible(tab, data);
             return tab;
         });
 
@@ -200,14 +220,18 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
                 activeKey={this.state.activeKey}
             >
                 {finallyTabs.map((tab, index) => (
-                    <Tab
-                        key={index}
-                        {...tab}
-                    >
-                        {tabRender
-                            ? tabRender(tab, this.props)
-                            : render(`tab/${index}`, tab.tab || tab.body || '')}
-                    </Tab>
+                    isVisible(tab, data)
+                        ? (
+                            <Tab
+                                {...tab}
+                                key={index}
+                                eventKey={tab.hash || index}
+                            >
+                                {tabRender
+                                    ? tabRender(tab, this.props)
+                                    : render(`tab/${index}`, tab.tab || tab.body || '')}
+                            </Tab>
+                        ) : null
                 ))}
             </CTabs>
         );