fm453/nocobase
1
0
Fork 0
mirror of https://gitee.com/nocobase/nocobase.git synced 2025-05-05 13:39:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: inline mode

Browse Source
This commit is contained in:
chenos 2025-02-16 12:17:16 +08:00
parent 9b412b1a23
commit 4b4231781f
4 changed files with 30 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/core/client/docs/zh-CN/core/ui-schema/demos/schema-settings-render.tsx
View File

@ -101,7 +101,7 @@ const Demo = () => {
return (
<div>
<div>{render()}</div>
<div>可以进行参数的二次覆盖：{render({ style: { color: 'red' } })}</div>
<div>可以进行参数的二次覆盖：{render({ mode: 'inline', style: { color: 'red' } })}</div>
</div>
);
};

13
packages/core/client/src/application/schema-settings/hooks/useSchemaSettingsRender.tsx
View File

@ -7,16 +7,15 @@
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import { useMemo } from 'react';
import { useApp } from '../../hooks';
import { SchemaSettingOptions } from '../types';
import React from 'react';
import { SchemaSettingsWrapper } from '../components';
import { SchemaSettingsProps } from '../../../schema-settings';
import { Schema } from '@formily/json-schema';
import { GeneralField } from '@formily/core';
import { Schema } from '@formily/json-schema';
import React, { useMemo } from 'react';
import { Designable } from '../../../schema-component';
import { SchemaSettingsProps } from '../../../schema-settings';
import { useApp } from '../../hooks';
import { SchemaSettingsWrapper } from '../components';
import { SchemaSettings } from '../SchemaSettings';
import { SchemaSettingOptions } from '../types';
type UseSchemaSettingsRenderOptions<T = {}> = Omit<SchemaSettingOptions<T>, 'name' | 'items'> &
Omit<SchemaSettingsProps, 'title' | 'children'> & {

1
packages/core/client/src/application/schema-settings/types.ts
View File

@ -22,6 +22,7 @@ import {
export interface SchemaSettingOptions<T = {}> {
name: string;
mode?: 'inline' | 'dropdown';
Component?: ComponentType<T>;
componentProps?: T;
items: SchemaSettingsItemType[];

23
packages/core/client/src/schema-settings/SchemaSettings.tsx
View File

@ -22,6 +22,7 @@ import {
CascaderProps,
ConfigProvider,
Dropdown,
Menu,
MenuItemProps,
MenuProps,
Modal,
@ -119,6 +120,7 @@ export interface SchemaSettingsProps {
field?: GeneralField;
fieldSchema?: Schema;
children?: ReactNode;
mode?: 'inline' | 'dropdown';
}
interface SchemaSettingsContextProps<T = any> {
@ -167,7 +169,7 @@ export const SchemaSettingsProvider: React.FC<SchemaSettingsProviderProps> = (pr
return <SchemaSettingsContext.Provider value={value}>{children}</SchemaSettingsContext.Provider>;
};
export const SchemaSettingsDropdown: React.FC<SchemaSettingsProps> = React.memo((props) => {
const InternalSchemaSettingsDropdown: React.FC<SchemaSettingsProps> = React.memo((props) => {
const { title, dn, ...others } = props;
const [visible, setVisible] = useState(false);
const { Component, getMenuItems } = useMenuItem();
@ -232,6 +234,25 @@ export const SchemaSettingsDropdown: React.FC<SchemaSettingsProps> = React.memo(
);
});
const InternalSchemaSettingsMenu: React.FC<SchemaSettingsProps> = React.memo((props) => {
const { title, dn, ...others } = props;
const [visible, setVisible] = useState(true);
const { Component, getMenuItems } = useMenuItem();
const items = getMenuItems(() => props.children);
return (
<SchemaSettingsProvider visible={visible} setVisible={setVisible} dn={dn} {...others}>
<Component />
<Menu items={items} />
</SchemaSettingsProvider>
);
});
export const SchemaSettingsDropdown: React.FC<SchemaSettingsProps> = React.memo((props) => {
const { mode } = props;
return mode === 'inline' ? <InternalSchemaSettingsMenu {...props} /> : <InternalSchemaSettingsDropdown {...props} />;
});
SchemaSettingsDropdown.displayName = 'SchemaSettingsDropdown';
const findGridSchema = (fieldSchema) => {