mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-16 01:40:53 +08:00
amis-saas-7237 [Bug] dropdown-button组件在使用时传入 popOverContainer: null情况下，buttons属性内容会渲染在当前层级下
Change-Id: I1909b4e11b2b8efff0ee37221c42753d9ee15419
This commit is contained in:
jiatianqi
parent
90381320db
commit
f543c7027e
@ -312,13 +312,19 @@ export class DateShortCutControl extends React.PureComponent<
|
||||
</header>
|
||||
{this.renderContent()}
|
||||
<div className={klass + '-footer'}>
|
||||
{render('inner', {
|
||||
type: 'dropdown-button',
|
||||
label: '添加选项',
|
||||
closeOnClick: true,
|
||||
closeOnOutside: true,
|
||||
buttons: optionList
|
||||
})}
|
||||
{render(
|
||||
'inner',
|
||||
{
|
||||
type: 'dropdown-button',
|
||||
label: '添加选项',
|
||||
closeOnClick: true,
|
||||
closeOnOutside: true,
|
||||
buttons: optionList
|
||||
},
|
||||
{
|
||||
popOverContainer: null // amis 渲染挂载节点会使用 this.target
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -236,12 +236,17 @@ export default class FeatureControl extends React.Component<
|
||||
className: `${klass}-action`,
|
||||
btnClassName: `${klass}-action--btn`,
|
||||
menuClassName: `${klass}-action--menus`,
|
||||
buttons: this.state.unUseFeat.map(item => {
|
||||
return {
|
||||
label: item.label,
|
||||
onClick: () => this.handleAdd(item)
|
||||
};
|
||||
})
|
||||
buttons: this.state.unUseFeat.map(
|
||||
item => {
|
||||
return {
|
||||
label: item.label,
|
||||
onClick: () => this.handleAdd(item)
|
||||
};
|
||||
},
|
||||
{
|
||||
popOverContainer: null // amis 渲染挂载节点会使用 this.target
|
||||
}
|
||||
)
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -624,17 +624,23 @@ export default class OptionControl extends React.Component<
|
||||
clearable={false}
|
||||
onChange={(value: string) => this.handleEditLabel(index, value)}
|
||||
/>
|
||||
{render('dropdown', {
|
||||
type: 'dropdown-button',
|
||||
className: 'ae-OptionControlItem-dropdown',
|
||||
btnClassName: 'px-2',
|
||||
icon: 'fa fa-ellipsis-h',
|
||||
hideCaret: true,
|
||||
closeOnClick: true,
|
||||
align: 'right',
|
||||
menuClassName: 'ae-OptionControlItem-ulmenu',
|
||||
buttons: operationBtn
|
||||
})}
|
||||
{render(
|
||||
'dropdown',
|
||||
{
|
||||
type: 'dropdown-button',
|
||||
className: 'ae-OptionControlItem-dropdown',
|
||||
btnClassName: 'px-2',
|
||||
icon: 'fa fa-ellipsis-h',
|
||||
hideCaret: true,
|
||||
closeOnClick: true,
|
||||
align: 'right',
|
||||
menuClassName: 'ae-OptionControlItem-ulmenu',
|
||||
buttons: operationBtn
|
||||
},
|
||||
{
|
||||
popOverContainer: null // amis 渲染挂载节点会使用 this.target
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
{editDom}
|
||||
</li>
|
||||
|
||||
@ -421,60 +421,65 @@ export default class TimelineItemControl extends React.Component<
|
||||
}
|
||||
)} */}
|
||||
|
||||
{amisRender({
|
||||
type: 'dropdown-button',
|
||||
className: 'ae-TimelineItemControlItem-dropdown',
|
||||
btnClassName: 'px-2',
|
||||
icon: 'fa fa-ellipsis-h',
|
||||
hideCaret: true,
|
||||
closeOnClick: true,
|
||||
align: 'right',
|
||||
menuClassName: 'ae-TimelineItemControlItem-ulmenu',
|
||||
buttons: [
|
||||
{
|
||||
type: 'action',
|
||||
className: 'ae-TimelineItemControlItem-action',
|
||||
label: '编辑',
|
||||
actionType: 'dialog',
|
||||
dialog: {
|
||||
title: '节点配置',
|
||||
headerClassName: 'font-bold',
|
||||
closeOnEsc: true,
|
||||
closeOnOutside: false,
|
||||
showCloseButton: true,
|
||||
body: [
|
||||
{
|
||||
type: 'form',
|
||||
wrapWithPanel: false,
|
||||
wrapperComponent: 'div',
|
||||
resetAfterSubmit: true,
|
||||
autoFocus: true,
|
||||
preventEnterSubmit: true,
|
||||
horizontal: {
|
||||
justify: true,
|
||||
left: 3,
|
||||
right: 9
|
||||
},
|
||||
body: this.buildAddOrEditSchema(props),
|
||||
onSubmit: (e: any) => this.toggleEdit(e, index)
|
||||
}
|
||||
]
|
||||
{amisRender(
|
||||
{
|
||||
type: 'dropdown-button',
|
||||
className: 'ae-TimelineItemControlItem-dropdown',
|
||||
btnClassName: 'px-2',
|
||||
icon: 'fa fa-ellipsis-h',
|
||||
hideCaret: true,
|
||||
closeOnClick: true,
|
||||
align: 'right',
|
||||
menuClassName: 'ae-TimelineItemControlItem-ulmenu',
|
||||
buttons: [
|
||||
{
|
||||
type: 'action',
|
||||
className: 'ae-TimelineItemControlItem-action',
|
||||
label: '编辑',
|
||||
actionType: 'dialog',
|
||||
dialog: {
|
||||
title: '节点配置',
|
||||
headerClassName: 'font-bold',
|
||||
closeOnEsc: true,
|
||||
closeOnOutside: false,
|
||||
showCloseButton: true,
|
||||
body: [
|
||||
{
|
||||
type: 'form',
|
||||
wrapWithPanel: false,
|
||||
wrapperComponent: 'div',
|
||||
resetAfterSubmit: true,
|
||||
autoFocus: true,
|
||||
preventEnterSubmit: true,
|
||||
horizontal: {
|
||||
justify: true,
|
||||
left: 3,
|
||||
right: 9
|
||||
},
|
||||
body: this.buildAddOrEditSchema(props),
|
||||
onSubmit: (e: any) => this.toggleEdit(e, index)
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
className: 'ae-TimelineItemControlItem-action',
|
||||
label: '复制',
|
||||
onClick: () => this.toggleCopy(index)
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
className: 'ae-TimelineItemControlItem-action',
|
||||
label: '删除',
|
||||
onClick: () => this.toggleDelete(index)
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
className: 'ae-TimelineItemControlItem-action',
|
||||
label: '复制',
|
||||
onClick: () => this.toggleCopy(index)
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
className: 'ae-TimelineItemControlItem-action',
|
||||
label: '删除',
|
||||
onClick: () => this.toggleDelete(index)
|
||||
}
|
||||
]
|
||||
})}
|
||||
]
|
||||
},
|
||||
{
|
||||
popOverContainer: null // amis 渲染挂载节点会使用 this.target
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
<div className="ae-TimelineItemControlItem-Main">
|
||||
<InputBox
|
||||
|
||||
@ -8,15 +8,7 @@ import cloneDeep from 'lodash/cloneDeep';
|
||||
import get from 'lodash/get';
|
||||
import set from 'lodash/set';
|
||||
import Sortable from 'sortablejs';
|
||||
import {
|
||||
render as amisRender,
|
||||
FormItem,
|
||||
Button,
|
||||
Icon,
|
||||
InputBox,
|
||||
Modal,
|
||||
toast
|
||||
} from 'amis';
|
||||
import {FormItem, Button, Icon, InputBox, Modal, toast} from 'amis';
|
||||
|
||||
import {autobind} from 'amis-editor-core';
|
||||
import {getSchemaTpl, tipedLabel} from 'amis-editor-core';
|
||||
@ -355,36 +347,41 @@ export default class TreeOptionControl extends React.Component<
|
||||
}}
|
||||
/>
|
||||
<div className="ae-TreeOptionControlItem-btns">
|
||||
{amisRender({
|
||||
// {render('dropdown', { 这里 通过 renderChid 方法渲染出来的 dropdown-button 有 bug FIXME: jiatianqi
|
||||
type: 'dropdown-button',
|
||||
className: 'ae-TreeOptionControlItem-dropdown fa-sm',
|
||||
btnClassName: 'px-2',
|
||||
icon: 'add',
|
||||
hideCaret: true,
|
||||
closeOnClick: true,
|
||||
trigger: 'hover',
|
||||
align: 'right',
|
||||
menuClassName: 'ae-TreeOptionControlItem-ulmenu',
|
||||
buttons: [
|
||||
{
|
||||
type: 'button',
|
||||
className: 'ae-OptionControlItem-action',
|
||||
label: '添加选项',
|
||||
onClick: () => {
|
||||
this.addOption(path);
|
||||
{render(
|
||||
'dropdown',
|
||||
{
|
||||
type: 'dropdown-button',
|
||||
className: 'ae-TreeOptionControlItem-dropdown fa-sm',
|
||||
btnClassName: 'px-2',
|
||||
icon: 'add',
|
||||
hideCaret: true,
|
||||
closeOnClick: true,
|
||||
trigger: 'hover',
|
||||
align: 'right',
|
||||
menuClassName: 'ae-TreeOptionControlItem-ulmenu',
|
||||
buttons: [
|
||||
{
|
||||
type: 'button',
|
||||
className: 'ae-OptionControlItem-action',
|
||||
label: '添加选项',
|
||||
onClick: () => {
|
||||
this.addOption(path);
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
className: 'ae-OptionControlItem-action',
|
||||
label: '添加子选项',
|
||||
onClick: () => {
|
||||
this.addChildOption(path);
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
className: 'ae-OptionControlItem-action',
|
||||
label: '添加子选项',
|
||||
onClick: () => {
|
||||
this.addChildOption(path);
|
||||
}
|
||||
}
|
||||
]
|
||||
})}
|
||||
]
|
||||
},
|
||||
{
|
||||
popOverContainer: null // amis 渲染挂载节点会使用 this.target
|
||||
}
|
||||
)}
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
|
||||
@ -651,27 +651,33 @@ export class EventControl extends React.Component<
|
||||
'no-bd-btm': !eventKeys.length
|
||||
})}
|
||||
>
|
||||
{render('dropdown', {
|
||||
type: 'dropdown-button',
|
||||
level: 'enhance',
|
||||
label: '添加事件',
|
||||
disabled: false,
|
||||
className: 'block w-full add-event-dropdown',
|
||||
closeOnClick: true,
|
||||
buttons: events.map(item => ({
|
||||
type: 'button',
|
||||
disabledTip: '您已添加该事件',
|
||||
tooltipPlacement: 'left',
|
||||
disabled: Object.keys(onEvent).includes(item.eventName),
|
||||
actionType: '',
|
||||
label: item.eventLabel,
|
||||
onClick: this.addEvent.bind(
|
||||
this,
|
||||
item,
|
||||
Object.keys(onEvent).includes(item.eventName)
|
||||
)
|
||||
}))
|
||||
})}
|
||||
{render(
|
||||
'dropdown',
|
||||
{
|
||||
type: 'dropdown-button',
|
||||
level: 'enhance',
|
||||
label: '添加事件',
|
||||
disabled: false,
|
||||
className: 'block w-full add-event-dropdown',
|
||||
closeOnClick: true,
|
||||
buttons: events.map(item => ({
|
||||
type: 'button',
|
||||
disabledTip: '您已添加该事件',
|
||||
tooltipPlacement: 'left',
|
||||
disabled: Object.keys(onEvent).includes(item.eventName),
|
||||
actionType: '',
|
||||
label: item.eventLabel,
|
||||
onClick: this.addEvent.bind(
|
||||
this,
|
||||
item,
|
||||
Object.keys(onEvent).includes(item.eventName)
|
||||
)
|
||||
}))
|
||||
},
|
||||
{
|
||||
popOverContainer: null // amis 渲染挂载节点会使用 this.target
|
||||
}
|
||||
)}
|
||||
</header>
|
||||
<ul
|
||||
className={cx({
|
||||
|
||||
Loading…
Reference in New Issue
Block a user