Merge pull request #16 from lin-mt/develop

feat: 支持自定义点击高级设置按钮后的行为，支持修改指定路径下的JsonSchema

Author: lin-mt

src/JsonSchemaEditor/SchemaItem/index.tsx

@@ -46,7 +46,11 @@ type SchemaItemProps = {
   isArrayItems?: boolean;
   isRequire?: boolean;
   schema: JSONSchema7;
-  changeSchema?: (namePath: number[], value: any, propertyName: string) => void;
+  changeSchema?: (
+    namePath: number[],
+    value: any,
+    propertyName?: string,
+  ) => void;
   renameProperty?: (namePath: number[], name: string) => void;
   removeProperty?: (namePath: number[]) => void;
   addProperty?: (path: number[], isChild: boolean) => void;
@@ -55,6 +59,11 @@ type SchemaItemProps = {
     requiredProperty: string,
     removed: boolean,
   ) => void;
+  handleAdvancedSettingClick?: (
+    namePath: number[],
+    schema: JSONSchema7,
+    propertyName?: string,
+  ) => boolean;
 };
 
 function SchemaItem(props: SchemaItemProps) {
@@ -70,6 +79,7 @@ function SchemaItem(props: SchemaItemProps) {
     removeProperty,
     addProperty,
     isRequire,
+    handleAdvancedSettingClick,
   } = props;
 
   const [schema, setSchema] = useState(props.schema);
@@ -273,6 +283,18 @@ function SchemaItem(props: SchemaItemProps) {
                 icon={<SettingOutlined />}
                 style={{ color: 'green' }}
                 onClick={() => {
+                  if (
+                    handleAdvancedSettingClick &&
+                    !handleAdvancedSettingClick(
+                      namePath,
+                      schema,
+                      isRoot || schema.type === 'object'
+                        ? undefined
+                        : propertyName,
+                    )
+                  ) {
+                    return;
+                  }
                   setFormSchema(schema);
                   setAdvancedModal(!advancedModal);
                 }}
@@ -410,7 +432,7 @@ function SchemaItem(props: SchemaItemProps) {
             return;
           }
           if (isRoot || schema.type === 'object') {
-            changeSchema(namePath, { ...schema, ...formSchema }, 'root');
+            changeSchema(namePath, { ...schema, ...formSchema });
             setAdvancedModal(!advancedModal);
             return;
           }
@@ -821,7 +843,7 @@ function SchemaItem(props: SchemaItemProps) {
               break;
           }
           if (changeSchema) {
-            changeSchema([], schema, 'root');
+            changeSchema([], schema);
             setImportModal(!importModal);
             setImportValue(undefined);
           }

src/JsonSchemaEditor/index.md

@@ -33,7 +33,48 @@ loader.config({ monaco });
 
 ## API
 
-| 参数名称 | 描述                  | 类型                               | 默认值                                                            |
-| -------- | --------------------- | ---------------------------------- | ----------------------------------------------------------------- |
-| onChange | JsonSchema 变更的回调 | (schema: JSONSchema7) => void      | -                                                                 |
-| data     | 初始化组件数据        | JSONSchema7 \| string \| undefined | `{"type": "object", "properties": {"field": {"type": "string"}}}` |
+### onChange
+
+JsonSchema 变更的回调。
+
+类型：`(schema: JSONSchema7) => void`
+
+默认值： `-`
+
+### data
+
+初始化组件数据。
+
+类型：`JSONSchema7 | string | undefined`
+
+默认值：
+
+```json
+{
+  "type": "object",
+  "properties": {
+    "field": {
+      "type": "string"
+    }
+  }
+}
+```
+
+### handleAdvancedSettingClick
+
+点击`高级设置`按钮的回调，返回`false`：不使用默认表单，返回`true`：使用默认表单。
+
+类型：`(namePath: number[], schema: JSONSchema7, propertyName?: string) => boolean`
+
+默认值：`-`
+
+说明：一般结合`组件引用`实现点击高级设置按钮后的自定义需求。
+
+## 组件引用（ref）
+
+```ts
+export interface JsonSchemaEditorHandle {
+  /* 更新指定路径下的 JsonSchema */
+  changeSchema: (namePath: number[], value: any, propertyName?: string) => void;
+}
+```