From e416f48719622a9e2ccb5b6333035298269c6939 Mon Sep 17 00:00:00 2001 From: catchonme Date: Tue, 13 Aug 2019 11:12:42 +0800 Subject: [PATCH] =?UTF-8?q?tabs/date=E4=BC=98=E5=8C=96=E2=80=9C=20?= =?UTF-8?q?=E2=80=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- scss/components/_tabs.scss | 18 +++++++++--------- src/components/Tabs.tsx | 27 ++++++++++++++++----------- src/renderers/Date.tsx | 2 +- src/renderers/Tabs.tsx | 16 +++++++++++----- 4 files changed, 37 insertions(+), 26 deletions(-) diff --git a/scss/components/_tabs.scss b/scss/components/_tabs.scss index 2c8a4e8f..9349b8a0 100644 --- a/scss/components/_tabs.scss +++ b/scss/components/_tabs.scss @@ -57,12 +57,12 @@ border-style: solid; border-width: 0 $Tabs-borderWidth $Tabs-borderWidth; border-color: $Tabs-borderColor; + } - > .tab-pane { - display: none; - &.active { - display: block; - } + &-pane { + display: none; + &.is-active { + 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; } } diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx index f8d9d2ca..7ff9202e 100644 --- a/src/components/Tabs.tsx +++ b/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; - activeKey?: string|number; + classnames?: ClassNamesFn; + 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; tabRender?: (tab: TabProps, props?: TabsProps) => JSX.Element; } @@ -59,8 +64,8 @@ export class Tabs extends React.Component {
  • disabled ? '' : this.handleSelect(eventKey)} @@ -124,7 +129,7 @@ export class Tabs extends React.Component {
    {children.map((child, index) => { return this.renderTab(child, index); @@ -167,8 +172,8 @@ export class Tab extends React.PureComponent { ref={this.contentRef} className={cx && cx( transitionStyles[status], - activeKey === eventKey ? 'active' : '', - 'tab-pane', + activeKey === eventKey ? 'is-active' : '', + 'Tabs-pane', 'fade', className )} diff --git a/src/renderers/Date.tsx b/src/renderers/Date.tsx index 89e23ce5..bc3c9c71 100644 --- a/src/renderers/Date.tsx +++ b/src/renderers/Date.tsx @@ -23,7 +23,7 @@ export class DateField extends React.Component { format: 'YYYY-MM-DD', valueFormat: 'X', fromNow: false, - updateFrequency: 0 + updateFrequency: 60000 }; // 动态显示相对时间时,用来触发视图更新 diff --git a/src/renderers/Tabs.tsx b/src/renderers/Tabs.tsx index 4ceaf10e..53f45639 100644 --- a/src/renderers/Tabs.tsx +++ b/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; tabRender?: (tab: TabProps, props?: TabsProps) => JSX.Element; } @@ -205,7 +211,7 @@ export default class Tabs extends React.Component { 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; });