@tyx1703/json-schema-editor-visual 1.0.0

package/dist/components/SchemaComponents/SchemaJson.js

@@ -0,0 +1,634 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import react, { useCallback, useMemo } from "react";
+import { Button, Checkbox, Col, Dropdown, Input, Row, Select, Space, Tooltip, message } from "antd";
+import { CaretDownOutlined, CaretRightOutlined, CloseOutlined, EditOutlined, PlusOutlined, SettingOutlined } from "@ant-design/icons";
+import { JSONPATH_JOIN_CHAR, SCHEMA_TYPE, getData, isEqual, isNil } from "../../utils.js";
+import FieldInput from "./FieldInput.js";
+import { useLocalProvider } from "../LocalProvider/index.js";
+import MockSelect from "../MockSelect/index.js";
+import { useAppDispatch, useAppSelector } from "../../store/index.js";
+import { addChildFieldAction, addFieldAction, changeNameAction, changeTypeAction, changeValueAction, deleteItemAction, enableRequireAction, setOpenValueAction } from "../../store/schemaSlice.js";
+import "./schemaJson.css";
+const { Option: Option } = Select;
+const mapping = (name, data, showEdit, showAdv, mock)=>{
+    switch(data.type){
+        case 'array':
+            return /*#__PURE__*/ jsx(SchemaArray, {
+                prefix: name,
+                data: data,
+                showEdit: showEdit,
+                showAdv: showAdv,
+                mock: mock
+            });
+        case 'object':
+            {
+                const nameArray = [
+                    ...name,
+                    'properties'
+                ];
+                return /*#__PURE__*/ jsx(SchemaObject, {
+                    prefix: nameArray,
+                    data: data,
+                    showEdit: showEdit,
+                    showAdv: showAdv,
+                    mock: mock
+                });
+            }
+        default:
+            return null;
+    }
+};
+const SchemaArray = /*#__PURE__*/ react.memo(({ data, prefix, showEdit, showAdv, mock })=>{
+    const isMock = Boolean(mock);
+    const dispatch = useAppDispatch();
+    const open = useAppSelector((state)=>state.schema.open);
+    const LocaleProvider = useLocalProvider();
+    const tagPaddingLeftStyle = useMemo(()=>{
+        const length = prefix.filter((name)=>'properties' !== name).length;
+        return {
+            paddingLeft: `${20 * (length + 1)}px`
+        };
+    }, [
+        prefix
+    ]);
+    const getPrefix = useCallback(()=>[
+            ...prefix,
+            'items'
+        ], [
+        prefix
+    ]);
+    const handleChangeType = (value)=>{
+        const key = [
+            ...getPrefix(),
+            'type'
+        ];
+        dispatch(changeTypeAction({
+            key,
+            value
+        }));
+    };
+    const handleChangeDesc = (e)=>{
+        const key = [
+            ...getPrefix(),
+            "description"
+        ];
+        dispatch(changeValueAction({
+            key,
+            value: e.target.value
+        }));
+    };
+    const handleChangeMock = (e)=>{
+        const key = [
+            ...getPrefix(),
+            'mock'
+        ];
+        const value = e ? {
+            mock: e
+        } : '';
+        dispatch(changeValueAction({
+            key,
+            value
+        }));
+    };
+    const handleChangeTitle = (e)=>{
+        const key = [
+            ...getPrefix(),
+            'title'
+        ];
+        dispatch(changeValueAction({
+            key,
+            value: e.target.value
+        }));
+    };
+    const handleAddChildField = ()=>{
+        const keyArr = [
+            ...getPrefix(),
+            'properties'
+        ];
+        dispatch(addChildFieldAction({
+            key: keyArr
+        }));
+        dispatch(setOpenValueAction({
+            key: keyArr,
+            value: true
+        }));
+    };
+    const handleClickIcon = ()=>{
+        const keyArr = [
+            ...getPrefix(),
+            'properties'
+        ];
+        dispatch(setOpenValueAction({
+            key: keyArr
+        }));
+    };
+    const handleShowEdit = (name, type)=>{
+        showEdit(getPrefix(), name, data.items?.[name], type);
+    };
+    const handleShowAdv = ()=>{
+        showAdv(getPrefix(), data.items);
+    };
+    if (isNil(data.items)) return null;
+    const items = data.items;
+    const prefixArray = getPrefix();
+    const prefixArrayStr = [
+        ...prefixArray,
+        'properties'
+    ].join(JSONPATH_JOIN_CHAR);
+    const showIcon = getData(open, [
+        prefixArrayStr
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        className: "array-type",
+        children: [
+            /*#__PURE__*/ jsxs(Row, {
+                className: "array-item-type",
+                justify: "space-around",
+                align: "middle",
+                children: [
+                    /*#__PURE__*/ jsx(Col, {
+                        span: 8,
+                        className: "col-item name-item col-item-name",
+                        style: tagPaddingLeftStyle,
+                        children: /*#__PURE__*/ jsxs(Row, {
+                            justify: "space-around",
+                            align: "middle",
+                            children: [
+                                /*#__PURE__*/ jsx(Col, {
+                                    span: 2,
+                                    className: "down-style-col",
+                                    children: 'object' === items.type && /*#__PURE__*/ jsx("span", {
+                                        className: "down-style",
+                                        onClick: handleClickIcon,
+                                        children: showIcon ? /*#__PURE__*/ jsx(CaretDownOutlined, {
+                                            className: "icon-object"
+                                        }) : /*#__PURE__*/ jsx(CaretRightOutlined, {
+                                            className: "icon-object"
+                                        })
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(Col, {
+                                    span: 22,
+                                    children: /*#__PURE__*/ jsxs(Space.Compact, {
+                                        children: [
+                                            /*#__PURE__*/ jsx(Input, {
+                                                disabled: true,
+                                                value: "Items"
+                                            }),
+                                            /*#__PURE__*/ jsx(Button, {
+                                                type: "text",
+                                                disabled: true,
+                                                icon: /*#__PURE__*/ jsx(Checkbox, {
+                                                    disabled: true
+                                                })
+                                            })
+                                        ]
+                                    })
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Col, {
+                        span: 3,
+                        className: "col-item col-item-type",
+                        children: /*#__PURE__*/ jsx(Select, {
+                            className: "type-select-style",
+                            onChange: handleChangeType,
+                            value: items.type,
+                            children: SCHEMA_TYPE.map((item, index)=>/*#__PURE__*/ jsx(Option, {
+                                    value: item,
+                                    children: item
+                                }, index))
+                        })
+                    }),
+                    isMock && /*#__PURE__*/ jsx(Col, {
+                        span: 3,
+                        className: "col-item col-item-mock",
+                        children: /*#__PURE__*/ jsx(MockSelect, {
+                            schema: items,
+                            showEdit: ()=>handleShowEdit('mock', items.type),
+                            onChange: handleChangeMock,
+                            mock: mock
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Col, {
+                        span: isMock ? 4 : 5,
+                        className: "col-item col-item-mock",
+                        children: /*#__PURE__*/ jsxs(Space.Compact, {
+                            children: [
+                                /*#__PURE__*/ jsx(Input, {
+                                    placeholder: LocaleProvider('title'),
+                                    value: items.title,
+                                    onChange: handleChangeTitle
+                                }),
+                                /*#__PURE__*/ jsx(Button, {
+                                    icon: /*#__PURE__*/ jsx(EditOutlined, {}),
+                                    onClick: ()=>handleShowEdit('title')
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Col, {
+                        span: isMock ? 4 : 5,
+                        className: "col-item col-item-desc",
+                        children: /*#__PURE__*/ jsxs(Space.Compact, {
+                            children: [
+                                /*#__PURE__*/ jsx(Input, {
+                                    placeholder: LocaleProvider("description"),
+                                    value: items.description,
+                                    onChange: handleChangeDesc
+                                }),
+                                /*#__PURE__*/ jsx(Button, {
+                                    icon: /*#__PURE__*/ jsx(EditOutlined, {}),
+                                    onClick: ()=>handleShowEdit("description")
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsxs(Col, {
+                        span: isMock ? 2 : 3,
+                        className: "col-item col-item-setting",
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: "adv-set",
+                                onClick: handleShowAdv,
+                                children: /*#__PURE__*/ jsx(Tooltip, {
+                                    placement: "top",
+                                    title: LocaleProvider('adv_setting'),
+                                    children: /*#__PURE__*/ jsx(SettingOutlined, {})
+                                })
+                            }),
+                            'object' === items.type && /*#__PURE__*/ jsx("span", {
+                                onClick: handleAddChildField,
+                                children: /*#__PURE__*/ jsx(Tooltip, {
+                                    placement: "top",
+                                    title: LocaleProvider('add_child_node'),
+                                    children: /*#__PURE__*/ jsx(PlusOutlined, {
+                                        className: "plus"
+                                    })
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "option-formStyle",
+                children: mapping(prefixArray, items, showEdit, showAdv, mock)
+            })
+        ]
+    });
+});
+const SchemaItem = /*#__PURE__*/ react.memo(({ name, data, prefix, showEdit, showAdv, mock })=>{
+    const dispatch = useAppDispatch();
+    const open = useAppSelector((state)=>state.schema.open);
+    const LocaleProvider = useLocalProvider();
+    const tagPaddingLeftStyle = useMemo(()=>{
+        const length = prefix.filter((n)=>'properties' !== n).length;
+        return {
+            paddingLeft: `${20 * (length + 1)}px`
+        };
+    }, [
+        prefix
+    ]);
+    const getPrefix = useCallback(()=>[
+            ...prefix,
+            name
+        ], [
+        prefix,
+        name
+    ]);
+    const handleChangeName = (e)=>{
+        const value = e.target.value;
+        if (data.properties[value] && 'object' == typeof data.properties[value]) return message.error(`The field "${value}" already exists.`);
+        dispatch(changeNameAction({
+            value,
+            prefix,
+            name
+        }));
+    };
+    const handleChangeDesc = (e)=>{
+        const key = [
+            ...getPrefix(),
+            "description"
+        ];
+        dispatch(changeValueAction({
+            key,
+            value: e.target.value
+        }));
+    };
+    const handleChangeMock = (e)=>{
+        const key = [
+            ...getPrefix(),
+            'mock'
+        ];
+        const value = e ? {
+            mock: e
+        } : '';
+        dispatch(changeValueAction({
+            key,
+            value
+        }));
+    };
+    const handleChangeTitle = (e)=>{
+        const key = [
+            ...getPrefix(),
+            'title'
+        ];
+        dispatch(changeValueAction({
+            key,
+            value: e.target.value
+        }));
+    };
+    const handleChangeType = (value)=>{
+        const key = [
+            ...getPrefix(),
+            'type'
+        ];
+        dispatch(changeTypeAction({
+            key,
+            value
+        }));
+    };
+    const handleDeleteItem = ()=>{
+        const keyArr = getPrefix();
+        dispatch(deleteItemAction({
+            key: keyArr
+        }));
+        dispatch(enableRequireAction({
+            prefix,
+            name,
+            required: false
+        }));
+    };
+    const handleShowEdit = (editorName, type)=>{
+        showEdit(getPrefix(), editorName, data.properties[name][editorName], type);
+    };
+    const handleShowAdv = ()=>{
+        showAdv(getPrefix(), data.properties[name]);
+    };
+    const handleAddField = ()=>{
+        dispatch(addFieldAction({
+            prefix,
+            name
+        }));
+    };
+    const handleClickIcon = ()=>{
+        const keyArr = [
+            ...getPrefix(),
+            'properties'
+        ];
+        dispatch(setOpenValueAction({
+            key: keyArr
+        }));
+    };
+    const handleEnableRequire = (e)=>{
+        const required = e.target.checked;
+        dispatch(enableRequireAction({
+            prefix,
+            name,
+            required
+        }));
+    };
+    const value = data.properties[name];
+    const prefixArray = getPrefix();
+    const prefixStr = prefix.join(JSONPATH_JOIN_CHAR);
+    const prefixArrayStr = [
+        ...prefixArray,
+        'properties'
+    ].join(JSONPATH_JOIN_CHAR);
+    const show = getData(open, [
+        prefixStr
+    ]);
+    const showIcon = getData(open, [
+        prefixArrayStr
+    ]);
+    if (!show) return null;
+    return /*#__PURE__*/ jsxs("div", {
+        "data-testid": null,
+        children: [
+            /*#__PURE__*/ jsxs(Row, {
+                justify: "space-around",
+                align: "middle",
+                children: [
+                    /*#__PURE__*/ jsx(Col, {
+                        span: 8,
+                        className: "col-item name-item col-item-name",
+                        style: tagPaddingLeftStyle,
+                        children: /*#__PURE__*/ jsxs(Row, {
+                            justify: "space-around",
+                            align: "middle",
+                            children: [
+                                /*#__PURE__*/ jsx(Col, {
+                                    span: 2,
+                                    className: "down-style-col",
+                                    children: 'object' === value.type && /*#__PURE__*/ jsx("span", {
+                                        className: "down-style",
+                                        onClick: handleClickIcon,
+                                        children: showIcon ? /*#__PURE__*/ jsx(CaretDownOutlined, {
+                                            className: "icon-object"
+                                        }) : /*#__PURE__*/ jsx(CaretRightOutlined, {
+                                            className: "icon-object"
+                                        })
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(Col, {
+                                    span: 22,
+                                    children: /*#__PURE__*/ jsxs(Space.Compact, {
+                                        children: [
+                                            /*#__PURE__*/ jsx(FieldInput, {
+                                                onChange: handleChangeName,
+                                                value: name,
+                                                "data-testid": null
+                                            }),
+                                            /*#__PURE__*/ jsx(Tooltip, {
+                                                placement: "top",
+                                                title: LocaleProvider('required'),
+                                                children: /*#__PURE__*/ jsx(Button, {
+                                                    type: "text",
+                                                    children: /*#__PURE__*/ jsx(Checkbox, {
+                                                        onChange: handleEnableRequire,
+                                                        checked: isNil(data.required) ? false : data.required.includes(name)
+                                                    })
+                                                })
+                                            })
+                                        ]
+                                    })
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Col, {
+                        span: 3,
+                        className: "col-item col-item-type",
+                        children: /*#__PURE__*/ jsx(Select, {
+                            className: "type-select-style",
+                            onChange: handleChangeType,
+                            value: value.type,
+                            children: SCHEMA_TYPE.map((item, index)=>/*#__PURE__*/ jsx(Option, {
+                                    value: item,
+                                    children: item
+                                }, index))
+                        })
+                    }),
+                    mock && /*#__PURE__*/ jsx(Col, {
+                        span: 3,
+                        className: "col-item col-item-mock",
+                        children: /*#__PURE__*/ jsx(MockSelect, {
+                            schema: value,
+                            showEdit: ()=>handleShowEdit('mock', value.type),
+                            onChange: handleChangeMock,
+                            mock: mock
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Col, {
+                        span: mock ? 4 : 5,
+                        className: "col-item col-item-mock",
+                        children: /*#__PURE__*/ jsxs(Space.Compact, {
+                            children: [
+                                /*#__PURE__*/ jsx(Input, {
+                                    placeholder: LocaleProvider('title'),
+                                    value: value.title,
+                                    onChange: handleChangeTitle,
+                                    "data-testid": null
+                                }),
+                                /*#__PURE__*/ jsx(Button, {
+                                    icon: /*#__PURE__*/ jsx(EditOutlined, {}),
+                                    onClick: ()=>handleShowEdit('title')
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Col, {
+                        span: mock ? 4 : 5,
+                        className: "col-item col-item-desc",
+                        children: /*#__PURE__*/ jsxs(Space.Compact, {
+                            children: [
+                                /*#__PURE__*/ jsx(Input, {
+                                    placeholder: LocaleProvider("description"),
+                                    value: value.description,
+                                    onChange: handleChangeDesc,
+                                    "data-testid": null
+                                }),
+                                /*#__PURE__*/ jsx(Button, {
+                                    icon: /*#__PURE__*/ jsx(EditOutlined, {}),
+                                    onClick: ()=>handleShowEdit("description")
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsxs(Col, {
+                        span: mock ? 2 : 3,
+                        className: "col-item col-item-setting",
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: "adv-set",
+                                onClick: handleShowAdv,
+                                "data-testid": null,
+                                children: /*#__PURE__*/ jsx(Tooltip, {
+                                    placement: "top",
+                                    title: LocaleProvider('adv_setting'),
+                                    children: /*#__PURE__*/ jsx(SettingOutlined, {})
+                                })
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: "delete-item",
+                                onClick: handleDeleteItem,
+                                children: /*#__PURE__*/ jsx(CloseOutlined, {
+                                    className: "close"
+                                })
+                            }),
+                            'object' === value.type ? /*#__PURE__*/ jsx(DropPlus, {
+                                prefix: prefix,
+                                name: name
+                            }) : /*#__PURE__*/ jsx("span", {
+                                onClick: handleAddField,
+                                children: /*#__PURE__*/ jsx(Tooltip, {
+                                    placement: "top",
+                                    title: LocaleProvider('add_sibling_node'),
+                                    children: /*#__PURE__*/ jsx(PlusOutlined, {
+                                        className: "plus"
+                                    })
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "option-formStyle",
+                children: mapping(prefixArray, value, showEdit, showAdv, mock)
+            })
+        ]
+    });
+});
+const SchemaObjectComponent = ({ data, prefix, showEdit, showAdv, mock })=>{
+    useAppSelector((state)=>state.schema.open);
+    return /*#__PURE__*/ jsx("div", {
+        className: "object-style",
+        children: Object.keys(data.properties || {}).map((name)=>/*#__PURE__*/ jsx(SchemaItem, {
+                data: data,
+                name: name,
+                prefix: prefix,
+                showEdit: showEdit,
+                showAdv: showAdv,
+                mock: mock
+            }, name))
+    });
+};
+const SchemaObject = /*#__PURE__*/ react.memo(SchemaObjectComponent, (prevProps, nextProps)=>isEqual(prevProps.data, nextProps.data) && isEqual(prevProps.prefix, nextProps.prefix));
+const DropPlus = ({ prefix, name })=>{
+    const dispatch = useAppDispatch();
+    const LocaleProvider = useLocalProvider();
+    const menuItems = [
+        {
+            key: 'sibling',
+            label: LocaleProvider('sibling_node'),
+            onClick: ()=>dispatch(addFieldAction({
+                    prefix,
+                    name
+                }))
+        },
+        {
+            key: 'child',
+            label: LocaleProvider('child_node'),
+            onClick: ()=>{
+                dispatch(setOpenValueAction({
+                    key: [
+                        ...prefix,
+                        name,
+                        'properties'
+                    ],
+                    value: true
+                }));
+                dispatch(addChildFieldAction({
+                    key: [
+                        ...prefix,
+                        name,
+                        'properties'
+                    ]
+                }));
+            }
+        }
+    ];
+    return /*#__PURE__*/ jsx(Tooltip, {
+        placement: "top",
+        title: LocaleProvider('add_node'),
+        children: /*#__PURE__*/ jsx(Dropdown, {
+            menu: {
+                items: menuItems
+            },
+            children: /*#__PURE__*/ jsx(PlusOutlined, {
+                className: "plus"
+            })
+        })
+    });
+};
+function SchemaJson({ data, showEdit, showAdv, mock }) {
+    const item = mapping([], data, showEdit, showAdv, mock);
+    return /*#__PURE__*/ jsx("div", {
+        className: "schema-content",
+        children: item
+    });
+}
+export default SchemaJson;

package/dist/components/SchemaComponents/SchemaOther.d.ts

@@ -0,0 +1,9 @@
+import './schemaJson.css';
+import { JsonSchema, Format } from '../../types';
+interface CustomItemProps {
+    data: string;
+    changeCustomValue: (data: JsonSchema) => void;
+    format: Format;
+}
+export default function CustomItem({ data, changeCustomValue, format, }: CustomItemProps): import("react/jsx-runtime").JSX.Element;
+export {};