mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-02-19 15:04:10 +00:00
refactor: 还是恢复使用 next/tab
This commit is contained in:
parent
8edc2af7ea
commit
5b148c1199
@ -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",
|
||||||
|
|||||||
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user