feat(Kanban): the card support open mode (#1601)
This commit is contained in:
parent
22498d8fc6
commit
bb9b72e0d7
@ -8,6 +8,7 @@ import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings'
|
|||||||
import { useCollection, useCollectionManager } from '../../../collection-manager';
|
import { useCollection, useCollectionManager } from '../../../collection-manager';
|
||||||
import { useRecord } from '../../../record-provider';
|
import { useRecord } from '../../../record-provider';
|
||||||
import { useFormBlockContext } from '../../../block-provider/FormBlockProvider';
|
import { useFormBlockContext } from '../../../block-provider/FormBlockProvider';
|
||||||
|
import { OpenModeSchemaItems } from '../../../schema-items';
|
||||||
|
|
||||||
import { requestSettingsSchema } from './utils';
|
import { requestSettingsSchema } from './utils';
|
||||||
|
|
||||||
@ -139,62 +140,7 @@ export const ActionDesigner = (props) => {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
{isLinkageAction && <SchemaSettings.LinkageRules collectionName={name} />}
|
{isLinkageAction && <SchemaSettings.LinkageRules collectionName={name} />}
|
||||||
{isPopupAction && (
|
<OpenModeSchemaItems openMode={isPopupAction} openSize={isPopupAction}></OpenModeSchemaItems>
|
||||||
<SchemaSettings.SelectItem
|
|
||||||
title={t('Open mode')}
|
|
||||||
options={[
|
|
||||||
{ label: t('Drawer'), value: 'drawer' },
|
|
||||||
{ label: t('Dialog'), value: 'modal' },
|
|
||||||
]}
|
|
||||||
value={fieldSchema?.['x-component-props']?.['openMode']}
|
|
||||||
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'],
|
|
||||||
'x-component-props': fieldSchema['x-component-props'],
|
|
||||||
},
|
|
||||||
});
|
|
||||||
dn.refresh();
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{isPopupAction && ['modal', 'drawer'].includes(fieldSchema?.['x-component-props']?.['openMode']) && (
|
|
||||||
<SchemaSettings.Item>
|
|
||||||
<div style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
|
|
||||||
{t('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 && (
|
{isUpdateModePopupAction && (
|
||||||
<SchemaSettings.SelectItem
|
<SchemaSettings.SelectItem
|
||||||
title={t('Data will be updated')}
|
title={t('Data will be updated')}
|
||||||
|
@ -12,6 +12,7 @@ import {
|
|||||||
useAssociatedFormItemInitializerFields,
|
useAssociatedFormItemInitializerFields,
|
||||||
useFormItemInitializerFields,
|
useFormItemInitializerFields,
|
||||||
} from '../../../schema-initializer/utils';
|
} from '../../../schema-initializer/utils';
|
||||||
|
import { OpenModeSchemaItems } from '../../../schema-items';
|
||||||
|
|
||||||
const titleCss = css`
|
const titleCss = css`
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
@ -97,6 +98,10 @@ export const KanbanCardDesigner = (props: any) => {
|
|||||||
component: 'Kanban.Card.Designer.TitleSwitch',
|
component: 'Kanban.Card.Designer.TitleSwitch',
|
||||||
enable: true,
|
enable: true,
|
||||||
} as SchemaInitializerItemOptions,
|
} as SchemaInitializerItemOptions,
|
||||||
|
{
|
||||||
|
type: 'item',
|
||||||
|
component: OpenModeSchemaItems,
|
||||||
|
} as SchemaInitializerItemOptions,
|
||||||
);
|
);
|
||||||
|
|
||||||
if (!designable) {
|
if (!designable) {
|
||||||
|
@ -4,16 +4,12 @@ import { observer, RecursionField, useFieldSchema } from '@formily/react';
|
|||||||
import { Card } from 'antd';
|
import { Card } from 'antd';
|
||||||
import React, { useContext, useState } from 'react';
|
import React, { useContext, useState } from 'react';
|
||||||
import cls from 'classnames';
|
import cls from 'classnames';
|
||||||
import { ActionContext, BlockItem } from '..';
|
import { ActionContext } from '..';
|
||||||
import { DndContext } from '../..';
|
import { DndContext } from '../..';
|
||||||
import { RecordProvider } from '../../../record-provider';
|
import { RecordProvider } from '../../../record-provider';
|
||||||
import { SchemaComponentOptions } from '../../core/SchemaComponentOptions';
|
import { SchemaComponentOptions } from '../../core/SchemaComponentOptions';
|
||||||
import { KanbanCardContext } from './context';
|
import { KanbanCardContext } from './context';
|
||||||
|
|
||||||
const FormItem = observer((props) => {
|
|
||||||
return <BlockItem {...props} />;
|
|
||||||
});
|
|
||||||
|
|
||||||
export const KanbanCard: any = observer((props: any) => {
|
export const KanbanCard: any = observer((props: any) => {
|
||||||
const { setDisableCardDrag, cardViewerSchema, card, cardField, columnIndex, cardIndex } =
|
const { setDisableCardDrag, cardViewerSchema, card, cardField, columnIndex, cardIndex } =
|
||||||
useContext(KanbanCardContext);
|
useContext(KanbanCardContext);
|
||||||
@ -89,7 +85,14 @@ export const KanbanCard: any = observer((props: any) => {
|
|||||||
</DndContext>
|
</DndContext>
|
||||||
</Card>
|
</Card>
|
||||||
{cardViewerSchema && (
|
{cardViewerSchema && (
|
||||||
<ActionContext.Provider value={{ openMode: 'drawer', visible, setVisible }}>
|
<ActionContext.Provider
|
||||||
|
value={{
|
||||||
|
openMode: fieldSchema['x-component-props']?.['openMode'] || 'drawer',
|
||||||
|
openSize: fieldSchema['x-component-props']?.['openSize'],
|
||||||
|
visible,
|
||||||
|
setVisible,
|
||||||
|
}}
|
||||||
|
>
|
||||||
<RecordProvider record={card}>
|
<RecordProvider record={card}>
|
||||||
<RecursionField
|
<RecursionField
|
||||||
basePath={cardField.address.concat(`${columnIndex}.cardViewer.${cardIndex}`)}
|
basePath={cardField.address.concat(`${columnIndex}.cardViewer.${cardIndex}`)}
|
||||||
|
@ -10,7 +10,7 @@ import {
|
|||||||
SchemaInitializerButtonProps,
|
SchemaInitializerButtonProps,
|
||||||
SchemaInitializerItemComponent,
|
SchemaInitializerItemComponent,
|
||||||
SchemaInitializerItemOptions,
|
SchemaInitializerItemOptions,
|
||||||
SchemaInitializerItemProps
|
SchemaInitializerItemProps,
|
||||||
} from './types';
|
} from './types';
|
||||||
|
|
||||||
const defaultWrap = (s: ISchema) => s;
|
const defaultWrap = (s: ISchema) => s;
|
||||||
@ -56,7 +56,7 @@ SchemaInitializer.Button = observer((props: SchemaInitializerButtonProps) => {
|
|||||||
return <Menu.Divider key={item.key || `item-${indexA}`} />;
|
return <Menu.Divider key={item.key || `item-${indexA}`} />;
|
||||||
}
|
}
|
||||||
if (item.type === 'item' && item.component) {
|
if (item.type === 'item' && item.component) {
|
||||||
const Component = findComponent(item.component);
|
const Component = typeof item.component === 'string' ? findComponent(item.component) : item.component;
|
||||||
item.key = `${item.key || item.title}-${indexA}`;
|
item.key = `${item.key || item.title}-${indexA}`;
|
||||||
return (
|
return (
|
||||||
Component && (
|
Component && (
|
||||||
|
@ -1339,6 +1339,9 @@ export const createKanbanBlockSchema = (options) => {
|
|||||||
'x-label-disabled': true,
|
'x-label-disabled': true,
|
||||||
'x-decorator': 'BlockItem',
|
'x-decorator': 'BlockItem',
|
||||||
'x-component': 'Kanban.Card',
|
'x-component': 'Kanban.Card',
|
||||||
|
'x-component-props': {
|
||||||
|
openMode: 'drawer',
|
||||||
|
},
|
||||||
'x-designer': 'Kanban.Card.Designer',
|
'x-designer': 'Kanban.Card.Designer',
|
||||||
properties: {
|
properties: {
|
||||||
grid: {
|
grid: {
|
||||||
@ -1353,6 +1356,7 @@ export const createKanbanBlockSchema = (options) => {
|
|||||||
title: '{{ t("View") }}',
|
title: '{{ t("View") }}',
|
||||||
'x-designer': 'Action.Designer',
|
'x-designer': 'Action.Designer',
|
||||||
'x-component': 'Kanban.CardViewer',
|
'x-component': 'Kanban.CardViewer',
|
||||||
|
'x-action': 'view',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
openMode: 'drawer',
|
openMode: 'drawer',
|
||||||
},
|
},
|
||||||
|
@ -0,0 +1,79 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { useField, useFieldSchema } from '@formily/react';
|
||||||
|
import { SchemaSettings } from '../schema-settings';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Select } from 'antd';
|
||||||
|
import { useDesignable } from '../schema-component';
|
||||||
|
|
||||||
|
interface Options {
|
||||||
|
openMode?: boolean;
|
||||||
|
openSize?: boolean;
|
||||||
|
}
|
||||||
|
export const OpenModeSchemaItems: React.FC<Options> = (options) => {
|
||||||
|
const { openMode = true, openSize = true } = options;
|
||||||
|
const fieldSchema = useFieldSchema();
|
||||||
|
const field = useField();
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const { dn } = useDesignable();
|
||||||
|
const openModeValue = fieldSchema?.['x-component-props']?.['openMode'] || 'drawer';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{openMode ? (
|
||||||
|
<SchemaSettings.SelectItem
|
||||||
|
title={t('Open mode')}
|
||||||
|
options={[
|
||||||
|
{ label: t('Drawer'), value: 'drawer' },
|
||||||
|
{ label: t('Dialog'), value: 'modal' },
|
||||||
|
]}
|
||||||
|
value={openModeValue}
|
||||||
|
onChange={(value) => {
|
||||||
|
field.componentProps.openMode = value;
|
||||||
|
fieldSchema['x-component-props'] = field.componentProps;
|
||||||
|
|
||||||
|
// when openMode change, set openSize value to default
|
||||||
|
Reflect.deleteProperty(fieldSchema['x-component-props'], 'openSize');
|
||||||
|
dn.emit('patch', {
|
||||||
|
schema: {
|
||||||
|
'x-uid': fieldSchema['x-uid'],
|
||||||
|
'x-component-props': fieldSchema['x-component-props'],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
dn.refresh();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
{openSize && ['modal', 'drawer'].includes(openModeValue) ? (
|
||||||
|
<SchemaSettings.Item>
|
||||||
|
<div style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
|
||||||
|
{t('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'] = field.componentProps;
|
||||||
|
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>
|
||||||
|
) : null}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
1
packages/core/client/src/schema-items/index.ts
Normal file
1
packages/core/client/src/schema-items/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export * from './OpenModeSchemaItems';
|
Loading…
Reference in New Issue
Block a user