Merge pull request #904 from ynput/903-settings-default-values-of-ite…

…m-in-list-are-not-propagated

fix(Settings): Using default value for new/unset fields

package.json

@@ -27,9 +27,9 @@
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/sortable": "^8.0.0",
     "@reduxjs/toolkit": "^2.2.7",
-    "@rjsf/core": "^5.21.2",
-    "@rjsf/utils": "^5.21.2",
-    "@rjsf/validator-ajv8": "^5.21.2",
+    "@rjsf/core": "^5.22.1",
+    "@rjsf/utils": "^5.22.1",
+    "@rjsf/validator-ajv8": "^5.22.1",
     "@rtk-query/codegen-openapi": "^1.2.0",
     "@rtk-query/graphql-request-base-query": "^2.3.1",
     "@uiw/react-textarea-code-editor": "^2.1.9",

src/containers/AddonSettings/searchTools.ts

@@ -72,7 +72,6 @@ const attachLabels = (settings: $Any, relSchema: $Any, globalSchema: $Any): $Any
     }
   }
 
-  console.log('hydrated object', hydratedObject)
   return hydratedObject
 }
 

src/containers/SettingsEditor/SettingsPanel.jsx

@@ -125,9 +125,11 @@ const SettingsPanel = ({
   const [expandedObjects, setExpandedObjects] = useLocalStorage('expanded-settings-keys', [])
 
   const onToggle = () => {
-    if (expandedObjects.includes(objId))
+    if (expandedObjects.includes(objId)) {
       setExpandedObjects(expandedObjects.filter((id) => id !== objId))
-    else setExpandedObjects([...expandedObjects, objId])
+    } else {
+      setExpandedObjects([...expandedObjects, objId])
+    }
   }
 
   const expanded = expandedObjects.includes(objId)

src/containers/SettingsEditor/Widgets/CheckboxWidget.tsx

@@ -1,12 +1,12 @@
 import { useState, useEffect } from 'react'
 import { InputSwitch } from '@ynput/ayon-react-components'
 
-import { updateChangedKeys, parseContext } from '../helpers'
+import { updateChangedKeys, parseContext, getDefaultValue } from '../helpers'
 import { $Any } from '@types'
 
 const CheckboxWidget = function (props: $Any) {
   const { originalValue, path } = parseContext(props)
-  const [value, setValue] = useState(null)
+  const [value, setValue] = useState(props.value || getDefaultValue(props))
   const [initialized, setInitialized] = useState(false)
 
   useEffect(() => {
@@ -17,6 +17,9 @@ const CheckboxWidget = function (props: $Any) {
     if (value === null) return
     if (value === props.value) return
     if (initialized) return
+    if (props.value === undefined && value === getDefaultValue(props)) {
+      return
+    }
 
     setInitialized(true)
     if (path?.length) return
@@ -27,9 +30,11 @@ const CheckboxWidget = function (props: $Any) {
 
   useEffect(() => {
     // Sync the local state with the formData
-    if (props.value === undefined) return
-    if (value === props.value) return
-    setValue(props.value || false)
+    if (value === props.value) {
+      return
+    }
+
+    setValue(props.value || getDefaultValue(props))
   }, [props.value])
 
   useEffect(() => {
@@ -44,6 +49,9 @@ const CheckboxWidget = function (props: $Any) {
     if (!props.onChange) return
     if (value === null) return
     if (value === props.value) return
+    if (props.value === undefined && value === getDefaultValue(props)) {
+      return
+    }
     // this timeout must be here. idk why. if not,
     // the value will be set to the original value or smth
     props.onChange(value)

src/containers/SettingsEditor/Widgets/SelectWidget.tsx

@@ -28,9 +28,18 @@ const SelectWidget = (props: $Any) => {
 
   useEffect(() => {
     // Sync the local state with the formData
-    if (props.value === undefined) return
-    if (equiv(value, props.value)) return
-    setValue(props.value || (props.multiple ? [] : ''))
+    if (equiv(value, props.value)) {
+      return
+    }
+
+    let defaultValue
+    if (props.multiple) {
+      defaultValue = props.schema.default || []
+    } else {
+      defaultValue = props.schema.default || ''
+    }
+
+    setValue(props.value || defaultValue)
   }, [props.value])
 
   useEffect(() => {

src/containers/SettingsEditor/Widgets/TextWidget.tsx

@@ -92,7 +92,7 @@ export const TextWidget = (props: $Any) => {
 
   if (['integer', 'number'].includes(props.schema.type)) {
     Input = InputNumber
-    opts.value = value === undefined || value === null ? '' : value
+    opts.value = value === undefined || value === null ? getDefaultValue(props) : value
     opts.onBlur = () => onChangeCommit(props.schema.type)
     opts.onChange = (e: $Any) => {
       // ensure that the value is a number. decimal points are allowed
@@ -147,7 +147,7 @@ export const TextWidget = (props: $Any) => {
   } else {
     // Default text input
     Input = InputText
-    opts.value = value || ''
+    opts.value = value || getDefaultValue(props)
     opts.onBlur = onChangeCommit
     opts.onChange = (e: $Any) => {
       onChange(e.target.value)

src/containers/SettingsEditor/helpers.ts

@@ -35,13 +35,29 @@ const updateChangedKeys = (props: $Any, changed: $Any, path: $Any) => {
 }
 
 const getDefaultValue = (props: $Any) => {
-  //console.log("Creating default value for", props.id)
   if (props.schema.widget === 'color' && !props.value) {
-    if (props.schema.colorFormat === 'hex') return props.schema.colorAlpha ? '#00000000' : '#000000'
+    if (props.schema.default) {
+      return props.schema.default
+    }
+    if (props.schema.colorFormat === 'hex') {
+      return props.schema.colorAlpha ? '#00000000' : '#000000'
+    }
     return props.schema.colorAlpha ? [0, 0, 0, 0] : [0, 0, 0]
   }
-  if (props.value !== undefined) return props.value
-  if (props.schema.type === 'string') return ''
-  if (props.schema.type === 'integer') return 0
+  if (props.value !== undefined) {
+    return props.value
+  }
+
+  if (props.schema.type === 'boolean') {
+    return props.schema.default || false
+  }
+
+  if (props.schema.type === 'string') {
+    return props.schema.default || ''
+  }
+
+  if (props.schema.type === 'integer') {
+    return props.schema.default || 0
+  }
 }
 export { getDefaultValue, equiv, parseContext, updateChangedKeys }

src/hooks/useLocalStorage.ts

@@ -8,17 +8,15 @@
 import { useEffect, useState } from 'react'
 
 export default function useLocalStorage<T>(key: string, defaultValue: T): [T, (value: T) => void] {
-  const [value, setValue] = useState(defaultValue)
+  const item = localStorage.getItem(key)
+  const [value, setValue] = useState(item ? JSON.parse(item) : defaultValue)
 
   useEffect(() => {
-    const item = localStorage.getItem(key)
 
     if (!item) {
       localStorage.setItem(key, JSON.stringify(defaultValue))
     }
 
-    setValue(item ? JSON.parse(item) : defaultValue)
-
     function handler(e: StorageEvent) {
       if (e.key !== key) return