Skip to content

Commit

Permalink
fix: action modal icon and Initializer menu close when click (nocobas…
Browse files Browse the repository at this point in the history 
…e#4664)

* fix: action modal icon and Initializer menu close when click

* fix: bug

* fix: bug

* feat: bug

* fix: e2e bug
  • Loading branch information
@dream2023
dream2023 authored Jun 15, 2024
1 parent 6c431ca commit c66744d
Show file tree
Hide file tree
Showing 21 changed files with 160 additions and 36 deletions.
32 changes: 32 additions & 0 deletions ...e/client/docs/en-US/core/ui-schema/demos/schema-initializer-components-action-modal-2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
} from '@nocobase/client';
import React from 'react';
import { appOptions } from './schema-initializer-common';
import { MenuOutlined } from '@ant-design/icons';

const myInitializer = new SchemaInitializer({
name: 'myInitializer',
Expand All @@ -31,6 +32,7 @@ const myInitializer = new SchemaInitializer({
title="Add Card"
buttonText="Add Card"
isItem
icon={<MenuOutlined />}
onSubmit={({ title }) => {
insert({
type: 'void',
Expand All @@ -52,6 +54,36 @@ const myInitializer = new SchemaInitializer({
);
},
},
{
name: 'b',
type: 'actionModal',
useComponentProps() {
const { insert } = useSchemaInitializer();
return {
isItem: true,
icon: <MenuOutlined />,
buttonText: 'Add Card 2',
title: 'Add Card Form 2',
schema: {
title: {
type: 'string',
title: 'Title',
required: true,
'x-component': 'Input',
'x-decorator': 'FormItem',
},
},
onSubmit({ title }) {
insert({
type: 'void',
title,
'x-decorator': 'CardItem',
'x-component': 'Hello',
});
},
}
},
}
],
});

Expand Down
32 changes: 32 additions & 0 deletions ...e/client/docs/zh-CN/core/ui-schema/demos/schema-initializer-components-action-modal-2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
} from '@nocobase/client';
import React from 'react';
import { appOptions } from './schema-initializer-common';
import { MenuOutlined } from '@ant-design/icons';

const myInitializer = new SchemaInitializer({
name: 'myInitializer',
Expand All @@ -31,6 +32,7 @@ const myInitializer = new SchemaInitializer({
title="Add Card"
buttonText="Add Card"
isItem
icon={<MenuOutlined />}
onSubmit={({ title }) => {
insert({
type: 'void',
Expand All @@ -52,6 +54,36 @@ const myInitializer = new SchemaInitializer({
);
},
},
{
name: 'b',
type: 'actionModal',
useComponentProps() {
const { insert } = useSchemaInitializer();
return {
isItem: true,
icon: <MenuOutlined />,
buttonText: 'Add Card 2',
title: 'Add Card Form 2',
schema: {
title: {
type: 'string',
title: 'Title',
required: true,
'x-component': 'Input',
'x-decorator': 'FormItem',
},
},
onSubmit({ title }) {
insert({
type: 'void',
title,
'x-decorator': 'CardItem',
'x-component': 'Hello',
});
},
}
},
}
],
});

Expand Down
39 changes: 22 additions & 17 deletions ...ore/client/src/application/schema-initializer/components/SchemaInitializerActionModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,11 @@ import React, { FC, useCallback, useMemo } from 'react';
import { useActionContext, SchemaComponent } from '../../../schema-component';
import { useSchemaInitializerItem } from '../context';
import { SchemaInitializerItem } from './SchemaInitializerItem';
import { uid } from '@formily/shared';

export interface SchemaInitializerActionModalProps {
title: string;
icon?: string | React.ReactNode;
schema: any;
onCancel?: () => void;
onSubmit?: (values: any) => void;
Expand All @@ -23,21 +25,13 @@ export interface SchemaInitializerActionModalProps {
isItem?: boolean;
}

const SchemaInitializerActionModalItemComponent = React.forwardRef((props: any, ref) => {
const { onClick, title, ...others } = props;
return (
<SchemaInitializerItem
ref={ref}
{...others}
onClick={(e) => {
onClick?.(e.event);
}}
></SchemaInitializerItem>
);
const SchemaInitializerActionModalItemComponent = React.forwardRef((props: any, ref: any) => {
const { onClick, ...others } = props;
return <SchemaInitializerItem ref={ref} {...others} onClick={(e) => onClick?.(e.event, false)} />;
});

export const SchemaInitializerActionModal: FC<SchemaInitializerActionModalProps> = (props) => {
const { title, schema, buttonText, isItem, component, onCancel, onSubmit } = props;
const { title, icon, schema, buttonText, isItem, component, onCancel, onSubmit } = props;
const useCancelAction = useCallback(() => {
// eslint-disable-next-line react-hooks/rules-of-hooks
const form = useForm();
Expand Down Expand Up @@ -66,24 +60,35 @@ export const SchemaInitializerActionModal: FC<SchemaInitializerActionModalProps>
},
};
}, [onSubmit]);

const ItemComponent = useMemo(
() =>
React.forwardRef(({ onClick }: any, ref) => {
return <SchemaInitializerActionModalItemComponent onClick={onClick} ref={ref} title={buttonText} icon={icon} />;
}),
[buttonText, icon],
);

const schemaId = useMemo(() => uid(), []);

const defaultSchema = useMemo(() => {
return {
type: 'void',
properties: {
action1: {
[schemaId]: {
type: 'void',
'x-component': 'Action',
'x-component-props': component
? {
component,
icon,
}
: isItem
? {
title: buttonText,
component: SchemaInitializerActionModalItemComponent,
component: ItemComponent,
}
: {
icon: 'PlusOutlined',
icon: icon || 'PlusOutlined',
style: {
borderColor: 'var(--colorSettings)',
color: 'var(--colorSettings)',
Expand Down Expand Up @@ -132,7 +137,7 @@ export const SchemaInitializerActionModal: FC<SchemaInitializerActionModalProps>
},
},
};
}, [buttonText, component, schema, title, useCancelAction, useSubmitAction]);
}, [buttonText, component, schemaId, schema, title, useCancelAction, useSubmitAction]);

return <SchemaComponent schema={defaultSchema as any} />;
};
Expand Down
34 changes: 28 additions & 6 deletions packages/core/client/src/application/schema-initializer/components/SchemaInitializerItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import classNames from 'classnames';
import React, { ReactNode, memo, useMemo } from 'react';
import { Icon } from '../../../icon';
import { useCompile } from '../../../schema-component';
import { useSchemaInitializerItem } from '../context';
import { useSchemaInitializer, useSchemaInitializerItem } from '../context';
import { useAriaAttributeOfMenuItem, useSchemaInitializerMenuItems } from '../hooks';
import { SchemaInitializerMenu } from './SchemaInitializerSubMenu';
import { useSchemaInitializerStyles } from './style';
Expand All @@ -27,16 +27,31 @@ export interface SchemaInitializerItemProps {
onClick?: (args?: any) => any;
applyMenuStyle?: boolean;
children?: ReactNode;
/**
* @internal
*/
closeInitializerMenuWhenClick?: boolean;
}

export const SchemaInitializerItem = memo(
React.forwardRef<any, SchemaInitializerItemProps>((props, ref) => {
const { style, name = uid(), applyMenuStyle = true, className, items, icon, title, onClick, children } = props;
const {
style,
closeInitializerMenuWhenClick = true,
name = uid(),
applyMenuStyle = true,
className,
items,
icon,
title,
onClick,
children,
} = props;
const compile = useCompile();
const childrenItems = useSchemaInitializerMenuItems(items, name, onClick);
const { componentCls, hashId } = useSchemaInitializerStyles();
const { attribute } = useAriaAttributeOfMenuItem();

const { setVisible } = useSchemaInitializer();
const menuItems = useMemo(() => {
if (!(items && items.length > 0)) return undefined;
return [
Expand All @@ -47,6 +62,9 @@ export const SchemaInitializerItem = memo(
label: children || compile(title),
onClick: (info) => {
if (info.key !== name) return;
if (closeInitializerMenuWhenClick) {
setVisible?.(false);
}
onClick?.({ ...info, item: props });
},
icon: typeof icon === 'string' ? <Icon type={icon as string} /> : icon,
Expand All @@ -58,12 +76,14 @@ export const SchemaInitializerItem = memo(
if (items && items.length > 0) {
return <SchemaInitializerMenu items={menuItems}></SchemaInitializerMenu>;
}

return (
<div
ref={ref}
onClick={(event) => {
event.stopPropagation();
if (closeInitializerMenuWhenClick) {
setVisible?.(false);
}
onClick?.({ event, item: props });
}}
>
Expand All @@ -74,8 +94,10 @@ export const SchemaInitializerItem = memo(
>
{children || (
<>
{icon && typeof icon === 'string' ? <Icon type={icon as string} /> : icon}
<span className={classNames({ [`${hashId} ${componentCls}-item-content`]: icon })}>{compile(title)}</span>
{typeof icon === 'string' ? <Icon type={icon} /> : icon}
<span className={classNames({ [`${hashId} ${componentCls}-item-content`]: !!icon })}>
{compile(title)}
</span>
</>
)}
</div>
Expand Down
2 changes: 1 addition & 1 deletion ...ges/core/client/src/application/schema-initializer/components/SchemaInitializerSwitch.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export const SchemaInitializerSwitch: FC<SchemaInitializerSwitchItemProps> = (pr
const { title, checked, ...resets } = props;
const compile = useCompile();
return (
<SchemaInitializerItem {...resets}>
<SchemaInitializerItem {...resets} closeInitializerMenuWhenClick={false}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
{compile(title)} <Switch style={{ marginLeft: 20 }} size={'small'} checked={checked} />
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/core/client/src/application/schema-initializer/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ type SchemaInitializerItemBuiltInType<T = {}> = T & {

export interface SchemaInitializerItemComponentType<T = {}> {
name: string;
Component: ComponentType<T> | string;
Component?: ComponentType<T> | string;
sort?: number;
componentProps?: Omit<T, 'children'>;
useComponentProps?: () => Omit<T, 'children'>;
Expand Down
1 change: 1 addition & 0 deletions ...ore/client/src/modules/blocks/data-blocks/details-multi/__e2e__/schemaInitializer.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,7 @@ test.describe('configure actions', () => {

await page.getByLabel('schema-initializer-ActionBar-detailsWithPaging:configureActions-general').hover();
await page.getByRole('menuitem', { name: 'Edit' }).click();
await page.getByLabel('schema-initializer-ActionBar-detailsWithPaging:configureActions-general').hover();
await page.getByRole('menuitem', { name: 'Delete' }).click();

await page.mouse.move(300, 0);
Expand Down
1 change: 1 addition & 0 deletions ...s/core/client/src/modules/blocks/data-blocks/details-multi/__e2e__/schemaSettings.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ test.describe('actions schema settings', () => {
// 创建 Edit & Delete 两个按钮
await page.getByLabel('schema-initializer-ActionBar-detailsWithPaging:configureActions-general').hover();
await page.getByRole('menuitem', { name: 'Edit' }).click();
await page.getByLabel('schema-initializer-ActionBar-detailsWithPaging:configureActions-general').hover();
await page.getByRole('menuitem', { name: 'Delete' }).click();
await page.mouse.move(0, 300);

Expand Down
5 changes: 5 additions & 0 deletions ...es/core/client/src/modules/blocks/data-blocks/grid-card/__e2e__/schemaInitializer.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,9 @@ test.describe('configure global actions', () => {

await page.getByLabel('schema-initializer-ActionBar-gridCard:configureActions-general').hover();
await page.getByRole('menuitem', { name: 'Filter' }).click();
await page.getByLabel('schema-initializer-ActionBar-gridCard:configureActions-general').hover();
await page.getByRole('menuitem', { name: 'Add new' }).click();
await page.getByLabel('schema-initializer-ActionBar-gridCard:configureActions-general').hover();
await page.getByRole('menuitem', { name: 'Refresh' }).click();

await page.mouse.move(300, 0);
Expand Down Expand Up @@ -95,7 +97,9 @@ test.describe('configure item actions', () => {

await page.getByLabel('schema-initializer-ActionBar-gridCard:configureItemActions-general').first().hover();
await page.getByRole('menuitem', { name: 'View' }).click();
await page.getByLabel('schema-initializer-ActionBar-gridCard:configureItemActions-general').first().hover();
await page.getByRole('menuitem', { name: 'Edit' }).click();
await page.getByLabel('schema-initializer-ActionBar-gridCard:configureItemActions-general').first().hover();
await page.getByRole('menuitem', { name: 'Delete' }).click();

await page.mouse.move(300, 0);
Expand All @@ -121,6 +125,7 @@ test.describe('configure item actions', () => {

await page.getByLabel('schema-initializer-ActionBar-gridCard:configureItemActions-general').first().hover();
await page.getByRole('menuitem', { name: 'Popup' }).click();
await page.getByLabel('schema-initializer-ActionBar-gridCard:configureItemActions-general').first().hover();
await page.getByRole('menuitem', { name: 'Update record' }).click();

await page.mouse.move(300, 0);
Expand Down
5 changes: 5 additions & 0 deletions packages/core/client/src/modules/blocks/data-blocks/list/__e2e__/schemaInitializer.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,9 @@ test.describe('configure global actions', () => {

await page.getByLabel('schema-initializer-ActionBar-list:configureActions-general').hover();
await page.getByRole('menuitem', { name: 'Filter' }).click();
await page.getByLabel('schema-initializer-ActionBar-list:configureActions-general').hover();
await page.getByRole('menuitem', { name: 'Add new' }).click();
await page.getByLabel('schema-initializer-ActionBar-list:configureActions-general').hover();
await page.getByRole('menuitem', { name: 'Refresh' }).click();

await page.mouse.move(300, 0);
Expand Down Expand Up @@ -92,7 +94,9 @@ test.describe('configure item actions', () => {

await page.getByLabel('schema-initializer-ActionBar-list:configureItemActions-general').first().hover();
await page.getByRole('menuitem', { name: 'View' }).click();
await page.getByLabel('schema-initializer-ActionBar-list:configureItemActions-general').first().hover();
await page.getByRole('menuitem', { name: 'Edit' }).click();
await page.getByLabel('schema-initializer-ActionBar-list:configureItemActions-general').first().hover();
await page.getByRole('menuitem', { name: 'Delete' }).click();

await page.mouse.move(300, 0);
Expand All @@ -118,6 +122,7 @@ test.describe('configure item actions', () => {

await page.getByLabel('schema-initializer-ActionBar-list:configureItemActions-general').first().hover();
await page.getByRole('menuitem', { name: 'Popup' }).click();
await page.getByLabel('schema-initializer-ActionBar-list:configureItemActions-general').first().hover();
await page.getByRole('menuitem', { name: 'Update record' }).click();

await page.mouse.move(300, 0);
Expand Down
3 changes: 3 additions & 0 deletions ...re/client/src/modules/blocks/data-blocks/table-selector/__e2e__/schemaInitializer.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,11 @@ test.describe('configure actions', () => {
// add buttons
await page.getByLabel('schema-initializer-ActionBar-table:configureActions-users').hover();
await page.getByRole('menuitem', { name: 'Filter' }).click();
await page.getByLabel('schema-initializer-ActionBar-table:configureActions-users').hover();
await page.getByRole('menuitem', { name: 'Add new' }).click();
await page.getByLabel('schema-initializer-ActionBar-table:configureActions-users').hover();
await page.getByRole('menuitem', { name: 'Delete' }).click();
await page.getByLabel('schema-initializer-ActionBar-table:configureActions-users').hover();
await page.getByRole('menuitem', { name: 'Refresh' }).click();

await page.mouse.move(300, 0);
Expand Down
2 changes: 0 additions & 2 deletions packages/core/client/src/modules/blocks/data-blocks/table/TableActionColumnInitializers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,10 @@ export const Resizable = () => {
title={t('Column width')}
component={React.forwardRef<any, any>((props, ref) => {
const { children, onClick, ...others } = props;
const { setVisible } = useSchemaInitializer();
return (
<SchemaInitializerItem
ref={ref}
onClick={({ event }) => {
setVisible(false);
onClick(event);
}}
{...others}
Expand Down
Loading

0 comments on commit c66744d

Please sign in to comment.