From 4d90bc87a515feced980d3df3ebcda6da30555dd Mon Sep 17 00:00:00 2001 From: lyf-coder <58352715+lyf-coder@users.noreply.github.com> Date: Mon, 12 Dec 2022 08:39:21 +0800 Subject: [PATCH] feat(client/popup): support set drawer and modal popup size (#1224) --- packages/core/client/src/locale/en_US.ts | 4 ++ packages/core/client/src/locale/zh_CN.ts | 4 ++ .../antd/action/Action.Designer.tsx | 37 ++++++++++++++++++- .../antd/action/Action.Drawer.tsx | 15 +++++++- .../antd/action/Action.Modal.tsx | 18 +++++++-- .../schema-component/antd/action/Action.tsx | 2 + .../schema-component/antd/action/context.tsx | 2 + 7 files changed, 75 insertions(+), 7 deletions(-) diff --git a/packages/core/client/src/locale/en_US.ts b/packages/core/client/src/locale/en_US.ts index 528c6bcd9..04eab19a4 100644 --- a/packages/core/client/src/locale/en_US.ts +++ b/packages/core/client/src/locale/en_US.ts @@ -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", diff --git a/packages/core/client/src/locale/zh_CN.ts b/packages/core/client/src/locale/zh_CN.ts index 4de63ef07..836179f5a 100644 --- a/packages/core/client/src/locale/zh_CN.ts +++ b/packages/core/client/src/locale/zh_CN.ts @@ -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': '目标', diff --git a/packages/core/client/src/schema-component/antd/action/Action.Designer.tsx b/packages/core/client/src/schema-component/antd/action/Action.Designer.tsx index 05d715128..46df87770 100644 --- a/packages/core/client/src/schema-component/antd/action/Action.Designer.tsx +++ b/packages/core/client/src/schema-component/antd/action/Action.Designer.tsx @@ -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']) && ( + + + {t('Set popup size')} + { + 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 }} + /> + + + )} {isUpdateModePopupAction && ( ([ + ['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) => { }} > { .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; } diff --git a/packages/core/client/src/schema-component/antd/action/Action.Modal.tsx b/packages/core/client/src/schema-component/antd/action/Action.Modal.tsx index 364eef5a2..8dbf7be72 100644 --- a/packages/core/client/src/schema-component/antd/action/Action.Modal.tsx +++ b/packages/core/client/src/schema-component/antd/action/Action.Modal.tsx @@ -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([ + ['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) => { }} > { .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; } diff --git a/packages/core/client/src/schema-component/antd/action/Action.tsx b/packages/core/client/src/schema-component/antd/action/Action.tsx index 95df54418..6283f668b 100644 --- a/packages/core/client/src/schema-component/antd/action/Action.tsx +++ b/packages/core/client/src/schema-component/antd/action/Action.tsx @@ -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 = () => ( { formValueChanged, setFormValueChanged, openMode, + openSize, containerRefKey, fieldSchema, }} diff --git a/packages/core/client/src/schema-component/antd/action/context.tsx b/packages/core/client/src/schema-component/antd/action/context.tsx index 7281a2c22..b682e9b82 100644 --- a/packages/core/client/src/schema-component/antd/action/context.tsx +++ b/packages/core/client/src/schema-component/antd/action/context.tsx @@ -3,11 +3,13 @@ import { createContext } from 'react'; export const ActionContext = createContext({}); +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;