refactor: 还是恢复使用 next/tab

This commit is contained in:
力皓 2020-06-11 22:35:18 +08:00
parent 8edc2af7ea
commit 5b148c1199
3 changed files with 7 additions and 43 deletions

View File

@ -23,11 +23,10 @@
"@ali/lowcode-editor-core": "^0.8.15", "@ali/lowcode-editor-core": "^0.8.15",
"@ali/lowcode-types": "^0.8.5", "@ali/lowcode-types": "^0.8.5",
"@ali/lowcode-utils": "^0.8.6", "@ali/lowcode-utils": "^0.8.6",
"@alifd/next": "^1.x", "@alifd/next": "^1.20.12",
"classnames": "^2.2.6", "classnames": "^2.2.6",
"react": "^16.8.1", "react": "^16.8.1",
"react-dom": "^16.8.1", "react-dom": "^16.8.1"
"react-tabs": "^3.1.1"
}, },
"devDependencies": { "devDependencies": {
"@alib/build-scripts": "^0.1.3", "@alib/build-scripts": "^0.1.3",

View File

@ -1,12 +1,10 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Breadcrumb } from '@alifd/next'; import { Tab, Breadcrumb } from '@alifd/next';
import { Tabs, Tab, TabList, TabPanel } from 'react-tabs';
import { Title, observer, Editor, obx } from '@ali/lowcode-editor-core'; import { Title, observer, Editor, obx } from '@ali/lowcode-editor-core';
import { Node, isSettingField, SettingField } from '@ali/lowcode-designer'; import { Node, isSettingField, SettingField } from '@ali/lowcode-designer';
import { SettingsMain } from './main'; import { SettingsMain } from './main';
import { SettingsPane } from './settings-pane'; import { SettingsPane } from './settings-pane';
import { createIcon } from '@ali/lowcode-utils'; import { createIcon } from '@ali/lowcode-utils';
import 'react-tabs/style/react-tabs.css';
@observer @observer
export class SettingsPrimaryPane extends Component<{ editor: Editor }> { export class SettingsPrimaryPane extends Component<{ editor: Editor }> {
@ -116,33 +114,7 @@ export class SettingsPrimaryPane extends Component<{ editor: Editor }> {
return ( return (
<div className="lc-settings-main"> <div className="lc-settings-main">
<Tabs <Tab
selectedKey={activeKey}
onSelect={(tabKey) => {
this._activeKey = tabKey;
}}
className="lc-settings-tabs"
>
<TabList>
{
(items as SettingField[]).map((field) => {
return <Tab><Title title={field.title} /></Tab>
})
}
</TabList>
{
(items as SettingField[]).map((field) => {
return (
<TabPanel className="lc-settings-tabs-content">
{ this.renderBreadcrumb() }
<SettingsPane target={field} key={field.id} />
</TabPanel>
)
})
}
</Tabs>
{/* <Tab
activeKey={activeKey} activeKey={activeKey}
onChange={(tabKey) => { onChange={(tabKey) => {
this._activeKey = tabKey; this._activeKey = tabKey;
@ -151,10 +123,11 @@ export class SettingsPrimaryPane extends Component<{ editor: Editor }> {
animation={false} animation={false}
excessMode="dropdown" excessMode="dropdown"
contentClassName="lc-settings-tabs-content" contentClassName="lc-settings-tabs-content"
disableKeyboard={true}
extra={this.renderBreadcrumb()} extra={this.renderBreadcrumb()}
> >
{tabs} {tabs}
</Tab> */} </Tab>
</div> </div>
); );
} }

View File

@ -345,7 +345,6 @@ body {
display: block; display: block;
} }
.lc-settings-tabs{ .lc-settings-tabs{
padding-top: 12px;
> .next-tabs-nav-extra{ > .next-tabs-nav-extra{
top: 36px !important; top: 36px !important;
} }
@ -355,20 +354,13 @@ body {
line-height: 12px; line-height: 12px;
} }
} }
> ul {
padding-left: 8px;
border-bottom: 1px solid #ddd !important;
li.react-tabs__tab--selected {
border-color: #ddd !important;
}
}
.lc-title{ .lc-title{
color: inherit; color: inherit;
line-height: inherit !important; line-height: inherit !important;
} }
} }
.lc-settings-tabs-content{ .lc-settings-tabs-content{
top: 43px; top: 66px;
} }
} }
} }