test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-30 11:07:52 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat(amis-saas-9364): 布局相关容器组件设置固定宽高后支持宽高可拖拽调整

Browse Source 
Change-Id: Id4b83bbef0d3cbd390efe0fc8dc6161dd37ade35
This commit is contained in:
wibetter 2023-02-01 16:30:48 +08:00
parent ba6cc212e1
commit d157f6a08c
4 changed files with 51 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
packages/amis-editor/src/plugin/Container.tsx
View File

@ -1,8 +1,16 @@
import {registerEditorPlugin} from 'amis-editor-core';
import {BaseEventContext, BasePlugin, RegionConfig} from 'amis-editor-core';
import {defaultValue, getSchemaTpl, tipedLabel} from 'amis-editor-core';
import {
ActiveEventContext,
BaseEventContext,
LayoutBasePlugin,
RegionConfig,
PluginEvent,
ResizeMoveEventContext,
registerEditorPlugin,
defaultValue,
getSchemaTpl
} from 'amis-editor-core';
export class ContainerPlugin extends BasePlugin {
export class ContainerPlugin extends LayoutBasePlugin {
// 关联渲染器名字
rendererName = 'container';
$schema = '/schemas/ContainerSchema.json';
@ -22,7 +30,8 @@ export class ContainerPlugin extends BasePlugin {
style: {
position: 'static',
display: 'block'
}
},
wrapperBody: false
};
previewSchema = {
...this.scaffold
@ -258,7 +267,10 @@ export class ContainerPlugin extends BasePlugin {
}),
getSchemaTpl('layout:isFixedHeight', {
visibleOn: `${!isFlexItem || !isFlexColumnItem}`
visibleOn: `${!isFlexItem || !isFlexColumnItem}`,
onChange: (value: boolean) => {
context?.node.setHeightMutable(value);
}
}),
getSchemaTpl('layout:height', {
visibleOn: `${!isFlexItem || !isFlexColumnItem}`
@ -278,7 +290,10 @@ export class ContainerPlugin extends BasePlugin {
}),
getSchemaTpl('layout:isFixedWidth', {
visibleOn: `${!isFlexItem || isFlexColumnItem}`
visibleOn: `${!isFlexItem || isFlexColumnItem}`,
onChange: (value: boolean) => {
context?.node.setWidthMutable(value);
}
}),
getSchemaTpl('layout:width', {
visibleOn: `${!isFlexItem || isFlexColumnItem}`

14
packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx
View File

@ -1,7 +1,7 @@
/**
* @file Flex 常见布局 1:3
*/
import {BasePlugin, PluginEvent} from 'amis-editor-core';
import {LayoutBasePlugin, PluginEvent} from 'amis-editor-core';
import {getSchemaTpl, tipedLabel} from 'amis-editor-core';
import type {
BaseEventContext,
@ -47,7 +47,7 @@ const defaultFlexContainerSchema = {
alignItems: 'stretch'
};
export class FlexPluginBase extends BasePlugin {
export class FlexPluginBase extends LayoutBasePlugin {
rendererName = 'flex';
$schema = '/schemas/FlexSchema.json';
disabledRendererPlugin = false;
@ -260,7 +260,10 @@ export class FlexPluginBase extends BasePlugin {
}),
getSchemaTpl('layout:isFixedHeight', {
visibleOn: `${!isFlexItem || !isFlexColumnItem}`
visibleOn: `${!isFlexItem || !isFlexColumnItem}`,
onChange: (value: boolean) => {
context?.node.setHeightMutable(value);
}
}),
getSchemaTpl('layout:height', {
visibleOn: `${!isFlexItem || !isFlexColumnItem}`
@ -281,7 +284,10 @@ export class FlexPluginBase extends BasePlugin {
}),
getSchemaTpl('layout:isFixedWidth', {
visibleOn: `${!isFlexItem || isFlexColumnItem}`
visibleOn: `${!isFlexItem || isFlexColumnItem}`,
onChange: (value: boolean) => {
context?.node.setWidthMutable(value);
}
}),
getSchemaTpl('layout:width', {
visibleOn: `${!isFlexItem || isFlexColumnItem}`

15
packages/amis-editor/src/plugin/Wrapper.tsx
View File

@ -1,8 +1,8 @@
import {registerEditorPlugin} from 'amis-editor-core';
import {BasePlugin, RegionConfig, BaseEventContext} from 'amis-editor-core';
import {LayoutBasePlugin, RegionConfig, BaseEventContext} from 'amis-editor-core';
import {defaultValue, getSchemaTpl} from 'amis-editor-core';
export class WrapperPlugin extends BasePlugin {
export class WrapperPlugin extends LayoutBasePlugin {
// 关联渲染器名字
rendererName = 'wrapper';
$schema = '/schemas/WrapperSchema.json';
@ -210,7 +210,10 @@ export class WrapperPlugin extends BasePlugin {
}),
getSchemaTpl('layout:isFixedHeight', {
visibleOn: `${!isFlexItem || !isFlexColumnItem}`
visibleOn: `${!isFlexItem || !isFlexColumnItem}`,
onChange: (value: boolean) => {
context?.node.setHeightMutable(value);
}
}),
getSchemaTpl('layout:height', {
visibleOn: `${!isFlexItem || !isFlexColumnItem}`
@ -230,7 +233,10 @@ export class WrapperPlugin extends BasePlugin {
}),
getSchemaTpl('layout:isFixedWidth', {
visibleOn: `${!isFlexItem || isFlexColumnItem}`
visibleOn: `${!isFlexItem || isFlexColumnItem}`,
onChange: (value: boolean) => {
context?.node.setWidthMutable(value);
}
}),
getSchemaTpl('layout:width', {
visibleOn: `${!isFlexItem || isFlexColumnItem}`
@ -284,6 +290,7 @@ export class WrapperPlugin extends BasePlugin {
])
];
};
}
registerEditorPlugin(WrapperPlugin);

8
packages/amis-editor/src/tpl/layout.tsx
View File

@ -690,6 +690,7 @@ setSchemaTpl(
visibleOn?: string;
pipeIn?: (value: any, data: any) => void;
pipeOut?: (value: any, data: any) => void;
onChange?: (value: boolean) => void;
}) => {
return {
type: 'button-group-select',
@ -720,6 +721,9 @@ setSchemaTpl(
// 非固定宽度时，剔除宽度数值
form.setValueByName('style.width', undefined);
}
if (config?.onChange) {
config.onChange(value);
}
}
};
}
@ -926,6 +930,7 @@ setSchemaTpl(
visibleOn?: string;
pipeIn?: (value: any, data: any) => void;
pipeOut?: (value: any, data: any) => void;
onChange?: (value: boolean) => void;
}) => {
return {
type: 'button-group-select',
@ -956,6 +961,9 @@ setSchemaTpl(
// 非固定高度时，剔除高度数值
form.setValueByName('style.height', undefined);
}
if (config?.onChange) {
config.onChange(value);
}
}
};
}