feat: param schema support readonly

This commit is contained in:
Joel 2025-05-28 16:35:52 +08:00
parent f2a8af0680
commit 9adda90227
4 changed files with 13 additions and 7 deletions

View File

@ -113,9 +113,7 @@ const SchemaModal: FC<Props> = ({
<VisualEditorContextProvider> <VisualEditorContextProvider>
<VisualEditor <VisualEditor
schema={testSchema} schema={testSchema}
onChange={(schema: SchemaRoot) => { readOnly
console.log('Schema changed:', schema)
}}
></VisualEditor> ></VisualEditor>
</VisualEditorContextProvider> </VisualEditorContextProvider>
</MittProvider> </MittProvider>

View File

@ -6,6 +6,7 @@ import type { EditData } from './edit-card'
import { ArrayType, type Field, Type } from '../../../types' import { ArrayType, type Field, Type } from '../../../types'
import Toast from '@/app/components/base/toast' import Toast from '@/app/components/base/toast'
import { findPropertyWithPath } from '../../../utils' import { findPropertyWithPath } from '../../../utils'
import _ from 'lodash'
type ChangeEventParams = { type ChangeEventParams = {
path: string[], path: string[],
@ -19,7 +20,8 @@ type AddEventParams = {
} }
export const useSchemaNodeOperations = (props: VisualEditorProps) => { export const useSchemaNodeOperations = (props: VisualEditorProps) => {
const { schema: jsonSchema, onChange } = props const { schema: jsonSchema, onChange: doOnChange } = props
const onChange = doOnChange || _.noop
const backupSchema = useVisualEditorStore(state => state.backupSchema) const backupSchema = useVisualEditorStore(state => state.backupSchema)
const setBackupSchema = useVisualEditorStore(state => state.setBackupSchema) const setBackupSchema = useVisualEditorStore(state => state.setBackupSchema)
const isAddingNewField = useVisualEditorStore(state => state.isAddingNewField) const isAddingNewField = useVisualEditorStore(state => state.isAddingNewField)

View File

@ -5,11 +5,12 @@ import { useSchemaNodeOperations } from './hooks'
export type VisualEditorProps = { export type VisualEditorProps = {
schema: SchemaRoot schema: SchemaRoot
onChange: (schema: SchemaRoot) => void readOnly?: boolean
onChange?: (schema: SchemaRoot) => void
} }
const VisualEditor: FC<VisualEditorProps> = (props) => { const VisualEditor: FC<VisualEditorProps> = (props) => {
const { schema } = props const { schema, readOnly } = props
useSchemaNodeOperations(props) useSchemaNodeOperations(props)
return ( return (
@ -20,6 +21,7 @@ const VisualEditor: FC<VisualEditorProps> = (props) => {
required={false} required={false}
path={[]} path={[]}
depth={0} depth={0}
readOnly={readOnly}
/> />
</div> </div>
) )

View File

@ -19,6 +19,7 @@ type SchemaNodeProps = {
path: string[] path: string[]
parentPath?: string[] parentPath?: string[]
depth: number depth: number
readOnly?: boolean
} }
// Support 10 levels of indentation // Support 10 levels of indentation
@ -57,6 +58,7 @@ const SchemaNode: FC<SchemaNodeProps> = ({
path, path,
parentPath, parentPath,
depth, depth,
readOnly,
}) => { }) => {
const [isExpanded, setIsExpanded] = useState(true) const [isExpanded, setIsExpanded] = useState(true)
const hoveringProperty = useVisualEditorStore(state => state.hoveringProperty) const hoveringProperty = useVisualEditorStore(state => state.hoveringProperty)
@ -77,11 +79,13 @@ const SchemaNode: FC<SchemaNodeProps> = ({
} }
const handleMouseEnter = () => { const handleMouseEnter = () => {
if(!readOnly) return
if (advancedEditing || isAddingNewField) return if (advancedEditing || isAddingNewField) return
setHoveringPropertyDebounced(path.join('.')) setHoveringPropertyDebounced(path.join('.'))
} }
const handleMouseLeave = () => { const handleMouseLeave = () => {
if(!readOnly) return
if (advancedEditing || isAddingNewField) return if (advancedEditing || isAddingNewField) return
setHoveringPropertyDebounced(null) setHoveringPropertyDebounced(null)
} }
@ -183,7 +187,7 @@ const SchemaNode: FC<SchemaNodeProps> = ({
)} )}
{ {
depth === 0 && !isAddingNewField && ( !readOnly && depth === 0 && !isAddingNewField && (
<AddField /> <AddField />
) )
} }