feat(client/popup): support set drawer and modal popup size (#1224)
This commit is contained in:
parent
41f8e6a285
commit
4d90bc87a5
@ -338,6 +338,10 @@ export default {
|
||||
"Operation succeeded": "Operation succeeded",
|
||||
"Operation failed": "Operation failed",
|
||||
"Open mode": "Open mode",
|
||||
"Set popup size": "Set popup size",
|
||||
"Small": "Small",
|
||||
"Middle": "Middle",
|
||||
"Large": "Large",
|
||||
"Menu item title": "Menu item title",
|
||||
"Menu item icon": "Menu item icon",
|
||||
"Target": "Target",
|
||||
|
@ -425,6 +425,10 @@ export default {
|
||||
"Operation succeeded": "操作成功",
|
||||
"Operation failed": "操作失败",
|
||||
"Open mode": "打开方式",
|
||||
"Set popup size": "设置弹窗尺寸",
|
||||
"Small": "较窄",
|
||||
"Middle": "中等",
|
||||
"Large": "较宽",
|
||||
'Menu item title': '菜单项名称',
|
||||
'Menu item icon': '菜单项图标',
|
||||
'Target': '目标',
|
||||
|
@ -1,6 +1,6 @@
|
||||
import { ISchema, useField, useFieldSchema } from '@formily/react';
|
||||
import { isValid, uid } from '@formily/shared';
|
||||
import { Menu } from 'antd';
|
||||
import { Menu, Select } from 'antd';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useActionContext, useCompile, useDesignable } from '../..';
|
||||
@ -143,6 +143,10 @@ export const ActionDesigner = (props) => {
|
||||
onChange={(value) => {
|
||||
field.componentProps.openMode = value;
|
||||
fieldSchema['x-component-props']['openMode'] = value;
|
||||
|
||||
// when openMode change, set openSize value to default
|
||||
delete fieldSchema['x-component-props']['openSize'];
|
||||
|
||||
dn.emit('patch', {
|
||||
schema: {
|
||||
'x-uid': fieldSchema['x-uid'],
|
||||
@ -153,6 +157,37 @@ export const ActionDesigner = (props) => {
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{isPopupAction && ['modal', 'drawer'].includes(fieldSchema?.['x-component-props']?.['openMode']) && (
|
||||
<SchemaSettings.Item>
|
||||
<div style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
|
||||
{t('Set popup size')}
|
||||
<Select
|
||||
bordered={false}
|
||||
options={[
|
||||
{ label: t('Small'), value: 'small' },
|
||||
{ label: t('Middle'), value: 'middle' },
|
||||
{ label: t('Large'), value: 'large' },
|
||||
]}
|
||||
value={
|
||||
fieldSchema?.['x-component-props']?.['openSize'] ??
|
||||
(fieldSchema?.['x-component-props']?.['openMode'] == 'modal' ? 'large' : 'middle')
|
||||
}
|
||||
onChange={(value) => {
|
||||
field.componentProps.openSize = value;
|
||||
fieldSchema['x-component-props']['openSize'] = value;
|
||||
dn.emit('patch', {
|
||||
schema: {
|
||||
'x-uid': fieldSchema['x-uid'],
|
||||
'x-component-props': fieldSchema['x-component-props'],
|
||||
},
|
||||
});
|
||||
dn.refresh();
|
||||
}}
|
||||
style={{ textAlign: 'right', minWidth: 100 }}
|
||||
/>
|
||||
</div>
|
||||
</SchemaSettings.Item>
|
||||
)}
|
||||
{isUpdateModePopupAction && (
|
||||
<SchemaSettings.SelectItem
|
||||
title={t('Data will be updated')}
|
||||
|
@ -7,11 +7,17 @@ import { createPortal } from 'react-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useActionContext } from './hooks';
|
||||
import { ComposedActionDrawer } from './types';
|
||||
import { OpenSize } from './';
|
||||
|
||||
const openSizeWidthMap = new Map<OpenSize, string>([
|
||||
['small', '30%'],
|
||||
['middle', '50%'],
|
||||
['large', '70%'],
|
||||
]);
|
||||
export const ActionDrawer: ComposedActionDrawer = observer((props) => {
|
||||
const { footerNodeName = 'Action.Drawer.Footer', ...others } = props;
|
||||
const { t } = useTranslation();
|
||||
const { visible, setVisible } = useActionContext();
|
||||
const { visible, setVisible, openSize = 'middle' } = useActionContext();
|
||||
const schema = useFieldSchema();
|
||||
const field = useField();
|
||||
const footerSchema = schema.reduceProperties((buf, s) => {
|
||||
@ -29,7 +35,7 @@ export const ActionDrawer: ComposedActionDrawer = observer((props) => {
|
||||
}}
|
||||
>
|
||||
<Drawer
|
||||
width={'50%'}
|
||||
width={openSizeWidthMap.get(openSize)}
|
||||
title={field.title}
|
||||
{...others}
|
||||
destroyOnClose
|
||||
@ -42,16 +48,20 @@ export const ActionDrawer: ComposedActionDrawer = observer((props) => {
|
||||
.ant-drawer-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ant-drawer-body {
|
||||
padding-top: 14px;
|
||||
}
|
||||
|
||||
.ant-drawer-content {
|
||||
background: #f0f2f5;
|
||||
}
|
||||
}
|
||||
|
||||
&.nb-record-picker-selector {
|
||||
.nb-block-item {
|
||||
margin-bottom: 24px;
|
||||
|
||||
.general-schema-designer {
|
||||
top: -8px;
|
||||
bottom: -8px;
|
||||
@ -69,6 +79,7 @@ export const ActionDrawer: ComposedActionDrawer = observer((props) => {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
|
||||
.ant-btn {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
@ -4,12 +4,18 @@ import { Modal } from 'antd';
|
||||
import classNames from 'classnames';
|
||||
import React from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { useActionContext } from '.';
|
||||
import { OpenSize, useActionContext } from '.';
|
||||
import { ComposedActionDrawer } from './types';
|
||||
|
||||
const openSizeWidthMap = new Map<OpenSize, string>([
|
||||
['small', '40%'],
|
||||
['middle', '60%'],
|
||||
['large', '80%'],
|
||||
]);
|
||||
export const ActionModal: ComposedActionDrawer = observer((props) => {
|
||||
const { footerNodeName = 'Action.Modal.Footer', width = '80%', ...others } = props;
|
||||
const { visible, setVisible } = useActionContext();
|
||||
const { footerNodeName = 'Action.Modal.Footer', width, ...others } = props;
|
||||
const { visible, setVisible, openSize = 'large' } = useActionContext();
|
||||
const actualWidth = width ?? openSizeWidthMap.get(openSize);
|
||||
const schema = useFieldSchema();
|
||||
const field = useField();
|
||||
const footerSchema = schema.reduceProperties((buf, s) => {
|
||||
@ -27,7 +33,7 @@ export const ActionModal: ComposedActionDrawer = observer((props) => {
|
||||
}}
|
||||
>
|
||||
<Modal
|
||||
width={width}
|
||||
width={actualWidth}
|
||||
title={field.title}
|
||||
{...others}
|
||||
destroyOnClose
|
||||
@ -40,12 +46,15 @@ export const ActionModal: ComposedActionDrawer = observer((props) => {
|
||||
.ant-modal-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
background: #f0f2f5;
|
||||
}
|
||||
|
||||
.ant-modal-close-x {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
@ -61,6 +70,7 @@ export const ActionModal: ComposedActionDrawer = observer((props) => {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
|
||||
.ant-btn {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
@ -89,6 +89,7 @@ export const Action: ComposedAction = observer((props: any) => {
|
||||
const form = useForm();
|
||||
const designerProps = fieldSchema['x-designer-props'];
|
||||
const openMode = fieldSchema?.['x-component-props']?.['openMode'];
|
||||
const openSize = fieldSchema?.['x-component-props']?.['openSize'];
|
||||
const renderButton = () => (
|
||||
<SortableItem
|
||||
{...others}
|
||||
@ -128,6 +129,7 @@ export const Action: ComposedAction = observer((props: any) => {
|
||||
formValueChanged,
|
||||
setFormValueChanged,
|
||||
openMode,
|
||||
openSize,
|
||||
containerRefKey,
|
||||
fieldSchema,
|
||||
}}
|
||||
|
@ -3,11 +3,13 @@ import { createContext } from 'react';
|
||||
|
||||
export const ActionContext = createContext<ActionContextProps>({});
|
||||
|
||||
export type OpenSize = 'small' | 'middle' | 'large';
|
||||
export interface ActionContextProps {
|
||||
button?: any;
|
||||
visible?: boolean;
|
||||
setVisible?: (v: boolean) => void;
|
||||
openMode?: 'drawer' | 'modal' | 'page';
|
||||
openSize?: OpenSize;
|
||||
containerRefKey?: string;
|
||||
formValueChanged?: boolean;
|
||||
setFormValueChanged?: (v: boolean) => void;
|
||||
|
Loading…
Reference in New Issue
Block a user