tabs/date优化“

‘

scss/components/_tabs.scss

@@ -57,12 +57,12 @@
         border-style: solid;
         border-width: 0 $Tabs-borderWidth $Tabs-borderWidth;
         border-color: $Tabs-borderColor;
+    }
 
-        > .tab-pane {
+    &-pane {
-            display: none;
+        display: none;
-            &.active {
+        &.is-active {
-                display: block;
+            display: block;
-            }
         }
     }
 
@@ -71,7 +71,7 @@
             border-bottom-color: #e2e5ec;
 
             > li {
-                &.active {
+                &.is-active {
                     > a,
                     > a:hover,
                     > a:focus {
@@ -100,7 +100,7 @@
             border-top: px2rem(1px) solid #e2e5ec;
 
             > li {
-                &.active {
+                &.is-active {
                     > a,
                     > a:hover,
                     > a:focus {
@@ -135,7 +135,7 @@
                     line-height: px2rem(30px);
                 }
 
-                &.active {
+                &.is-active {
                     > a,
                     > a:hover,
                     > a:focus {
@@ -154,7 +154,7 @@
             }
         }
 
-        .tab-content {
+        > .#{$ns}Tabs-content {
             border-top: $Tabs-borderWidth solid $Tabs-borderColor;
         }
     }

src/components/Tabs.tsx

@@ -8,7 +8,6 @@ import React from 'react';
 import { Schema } from '../types';
 import Transition, { ENTERED, ENTERING } from 'react-transition-group/Transition';
 import { ClassNamesFn, themeable } from '../theme';
-import { RendererProps } from '../factory';
 
 const transitionStyles: {
     [propName: string]: string;
@@ -21,18 +20,24 @@ export interface TabProps extends Schema {
     title?: string; // 标题
     icon?: string;
     eventKey: string | number;
-    tabsMode?: '' | 'line' | 'card' | 'radio';
     tab?: Schema;
     className?: string;
-    location?: any;
+    classnames?: ClassNamesFn;
-    classnames: ClassNamesFn;
+    activeKey?: string | number;
-    activeKey?: string|number;
     reload?: boolean;
     mountOnEnter?: boolean;
     unmountOnExit?: boolean;
 };
 
-export interface TabsProps extends RendererProps {
+export interface TabsProps {
+    mode?: '' | 'line' | 'card' | 'radio';
+    tabsMode?: '' | 'line' | 'card' | 'radio';
+    handleSelect?: Function;
+    classPrefix: string;
+    classnames: ClassNamesFn;
+    activeKey: string | number;
+    contentClassName: string;
+    className?: string;
     tabs?: Array<TabProps>;
     tabRender?: (tab: TabProps, props?: TabsProps) => JSX.Element;
 }
@@ -59,8 +64,8 @@ export class Tabs extends React.Component<TabsProps> {
             <li
                 className={cx(
                     'Tabs-link',
-                    activeKey === eventKey ? 'active' : '',
+                    activeKey === eventKey ? 'is-active' : '',
-                    disabled  ? 'disabled' : ''
+                    disabled ? 'is-disabled' : ''
                 )}
                 key={index}
                 onClick={() => disabled ? '' : this.handleSelect(eventKey)}
@@ -124,7 +129,7 @@ export class Tabs extends React.Component<TabsProps> {
                 </ul>
 
                 <div
-                    className={cx('Tabs-content', contentClassName, 'tab-content')}
+                    className={cx('Tabs-content', contentClassName)}
                 >
                     {children.map((child, index) => {
                         return this.renderTab(child, index);
@@ -167,8 +172,8 @@ export class Tab extends React.PureComponent<TabProps> {
                             ref={this.contentRef}
                             className={cx && cx(
                                 transitionStyles[status],
-                                activeKey === eventKey ? 'active' : '',
+                                activeKey === eventKey ? 'is-active' : '',
-                                'tab-pane',
+                                'Tabs-pane',
                                 'fade',
                                 className
                             )}

src/renderers/Date.tsx

@@ -23,7 +23,7 @@ export class DateField extends React.Component<DateProps, DateState> {
         format: 'YYYY-MM-DD',
         valueFormat: 'X',
         fromNow: false,
-        updateFrequency: 0
+        updateFrequency: 60000
     };
 
     // 动态显示相对时间时，用来触发视图更新

src/renderers/Tabs.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import {Renderer, RendererProps} from '../factory';
 import { Schema } from '../types';
-import { evalExpression } from '../utils/tpl';
 import find = require('lodash/find');
-import { isVisible, autobind } from '../utils/helper';
+import { isVisible, autobind, isDisabled } from '../utils/helper';
 import findIndex = require('lodash/findIndex');
 import { Tabs as CTabs, Tab } from '../components/Tabs';
 import { ClassNamesFn } from '../theme';
@@ -12,18 +11,25 @@ export interface TabProps extends Schema {
     title?: string; // 标题
     icon?: string;
     hash?: string; // 通过 hash 来控制当前选择
-    tabsMode?: '' | 'line' | 'card' | 'radio';
     tab?: Schema;
     className?: string;
     classnames: ClassNamesFn;
-    location?: any;
+    eventKey?: string| number;
     activeKey?: string|number;
     reload?: boolean;
     mountOnEnter?: boolean;
     unmountOnExit?: boolean;
+    disabled?: string;
+    disabledOn?: string;
 };
 
 export interface TabsProps extends RendererProps {
+    mode?: '' | 'line' | 'card' | 'radio';
+    tabsMode?: '' | 'line' | 'card' | 'radio';
+    activeKey: string | number;
+    contentClassName: string;
+    handleSelect?: Function;
+    location?: any;
     tabs?: Array<TabProps>;
     tabRender?: (tab: TabProps, props?: TabsProps) => JSX.Element;
 }
@@ -205,7 +211,7 @@ 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.isDisabled = isDisabled(tab, data);
             return tab;
         });