feat: inline mode

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

@@ -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>
   );
 };

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

@@ -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'> & {

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

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

packages/core/client/src/schema-settings/SchemaSettings.tsx

@@ -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) => {