chore: pass all properties to the value renderers, simplifying the co…

…de (see #493)
josdejong · Oct 23, 2024 · e640046 · e640046
1 parent 1f28038
commit e640046
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 177 deletions.
diff --git 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
@@ -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
@@ -635,7 +635,7 @@ export interface TreeModeContext extends JSONEditorContext {
   onDragEnd: () => void
 }
 
-export interface RenderValueProps {
+export interface RenderValueProps extends Record<string, unknown> {
   path: JSONPath
   value: unknown
   mode: Mode

diff --git 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
@@ -27,52 +27,25 @@
   ]
 
   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') {
       return [
         {
           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
@@ -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 }]
   }
 </script>