diff --git a/src/lib/plugins/value/renderJSONSchemaEnum.ts b/src/lib/plugins/value/renderJSONSchemaEnum.ts index a4622aa3..b5bf1ec2 100644 --- a/src/lib/plugins/value/renderJSONSchemaEnum.ts +++ b/src/lib/plugins/value/renderJSONSchemaEnum.ts @@ -20,8 +20,6 @@ export function renderJSONSchemaEnum( const enumValues = getJSONSchemaOptions(schema, schemaDefinitions, props.path) if (enumValues) { - const { value, path, selection, parser, readOnly, onPatch } = props - const options = enumValues.map((enumValue) => ({ value: enumValue, text: enumValue @@ -31,18 +29,13 @@ export function renderJSONSchemaEnum( // else it would look as if the first option is the current value const optionsWithValue = enumValues.includes(props.value) ? options - : [{ value: value as unknown, text: value as unknown }].concat(options) + : [{ value: props.value, text: props.value }].concat(options) return [ { component: EnumValue, props: { - value, - path, - selection, - parser, - readOnly, - onPatch, + ...props, options: optionsWithValue } } diff --git a/src/lib/plugins/value/renderValue.ts b/src/lib/plugins/value/renderValue.ts index 16ea4159..18e1e115 100644 --- a/src/lib/plugins/value/renderValue.ts +++ b/src/lib/plugins/value/renderValue.ts @@ -6,73 +6,27 @@ import EditableValue from './components/EditableValue.svelte' import ReadonlyValue from './components/ReadonlyValue.svelte' import TimestampTag from './components/TimestampTag.svelte' -export function renderValue({ - path, - value, - mode, - readOnly, - selection, - enforceString, - searchResultItems, - isEditing, - parser, - normalization, - onPatch, - onPasteJson, - onSelect, - onFind, - findNextInside, - focus -}: RenderValueProps): RenderValueComponentDescription[] { +export function renderValue(props: RenderValueProps): RenderValueComponentDescription[] { const renderers: RenderValueComponentDescription[] = [] - if (!isEditing && isBoolean(value)) { - renderers.push({ - component: BooleanToggle, - props: { path, value, readOnly, onPatch, focus } - }) + if (!props.isEditing && isBoolean(props.value)) { + renderers.push({ component: BooleanToggle, props }) } - if (!isEditing && isColor(value)) { - renderers.push({ - component: ColorPicker, - props: { path, value, readOnly, onPatch, focus } - }) + if (!props.isEditing && isColor(props.value)) { + renderers.push({ component: ColorPicker, props }) } - if (isEditing) { - renderers.push({ - component: EditableValue, - props: { - path, - value, - selection, - mode, - enforceString, - parser, - normalization, - onPatch, - onPasteJson, - onSelect, - onFind, - findNextInside, - focus - } - }) + if (props.isEditing) { + renderers.push({ component: EditableValue, props }) } - if (!isEditing) { - renderers.push({ - component: ReadonlyValue, - props: { path, value, mode, readOnly, parser, normalization, searchResultItems, onSelect } - }) + if (!props.isEditing) { + renderers.push({ component: ReadonlyValue, props }) } - if (!isEditing && isTimestamp(value)) { - renderers.push({ - component: TimestampTag, - props: { value } - }) + if (!props.isEditing && isTimestamp(props.value)) { + renderers.push({ component: TimestampTag, props }) } return renderers diff --git a/src/lib/types.ts b/src/lib/types.ts index d3672c36..cd71bdcc 100644 --- a/src/lib/types.ts +++ b/src/lib/types.ts @@ -635,7 +635,7 @@ export interface TreeModeContext extends JSONEditorContext { onDragEnd: () => void } -export interface RenderValueProps { +export interface RenderValueProps extends Record { path: JSONPath value: unknown mode: Mode diff --git a/src/routes/development/+page.svelte b/src/routes/development/+page.svelte index afbc0794..520c37be 100644 --- a/src/routes/development/+page.svelte +++ b/src/routes/development/+page.svelte @@ -294,49 +294,10 @@ $: selectedValidator = $validate ? validator : $validateArray ? arrayValidator : undefined // only editable/readonly div, no color picker, boolean toggle, timestamp - function customRenderValue({ - path, - value, - readOnly, - enforceString, - searchResultItems, - isEditing, - parser, - normalization, - onPatch, - onPasteJson, - onSelect, - onFind, - focus - }: RenderValuePropsOptional): RenderValueComponentDescription[] { - const renderers: RenderValueComponentDescription[] = [] - - if (isEditing) { - renderers.push({ - component: EditableValue, - props: { - path, - value, - enforceString, - parser, - normalization, - onPatch, - onPasteJson, - onSelect, - onFind, - focus - } - }) - } - - if (!isEditing) { - renderers.push({ - component: ReadonlyValue, - props: { path, value, readOnly, parser, normalization, searchResultItems, onSelect } - }) - } - - return renderers + function customRenderValue(props: RenderValuePropsOptional): RenderValueComponentDescription[] { + return props.isEditing + ? [{ component: EditableValue, props }] + : [{ component: ReadonlyValue, props }] } function onRenderMenu(items: MenuItem[], { mode }: RenderMenuContext) { diff --git a/src/routes/examples/custom_value_renderer/+page.svelte b/src/routes/examples/custom_value_renderer/+page.svelte index dd0e7e43..e74a1093 100644 --- a/src/routes/examples/custom_value_renderer/+page.svelte +++ b/src/routes/examples/custom_value_renderer/+page.svelte @@ -27,21 +27,9 @@ ] function onRenderValue(props: RenderValueProps): RenderValueComponentDescription[] { - const { path, value, readOnly, parser, isEditing, selection, onSelect, onPatch } = props - const key = props.path[props.path.length - 1] - if (key === 'password' && !isEditing) { - return [ - { - component: ReadonlyPassword, - props: { - value, - path, - readOnly, - onSelect - } - } - ] + if (key === 'password' && !props.isEditing) { + return [{ component: ReadonlyPassword, props }] } if (key === 'gender') { @@ -49,30 +37,15 @@ { component: EnumValue, props: { - value, - path, - readOnly, - parser, - onPatch, - selection, + ...props, options: genderOptions } } ] } - if (key === 'evaluate' && !isEditing) { - return [ - { - action: EvaluatorAction, - props: { - value, - path, - readOnly, - onSelect - } - } - ] + if (key === 'evaluate' && !props.isEditing) { + return [{ action: EvaluatorAction, props }] } // fallback on the default render components diff --git a/src/routes/examples/custom_value_renderer2/+page.svelte b/src/routes/examples/custom_value_renderer2/+page.svelte index 6cde0576..f00b2723 100644 --- a/src/routes/examples/custom_value_renderer2/+page.svelte +++ b/src/routes/examples/custom_value_renderer2/+page.svelte @@ -21,43 +21,11 @@ } function onRenderValue(props: RenderValueProps): RenderValueComponentDescription[] { - const { - path, - value, - parser, - readOnly, - enforceString, - isEditing, - normalization, - searchResultItems, - onSelect, - onPatch, - focus - } = props - - if (isEditing && !readOnly) { - return [ - { - component: EditableValueInput, - props: { - value, - path, - enforceString, - normalization, - onSelect, - onPatch, - focus - } - } - ] + if (props.isEditing && !props.readOnly) { + return [{ component: EditableValueInput, props }] } - return [ - { - component: ReadonlyValue, - props: { path, value, readOnly, parser, normalization, searchResultItems, onSelect } - } - ] + return [{ component: ReadonlyValue, props }] }