feat: hide if set (hide background color from container if background image is set)

Author: anujdecoder

src/lib/assets/Container.tsx

@@ -93,7 +93,12 @@ const defaultContainer: DndContainerItem = {
                 { id: 'style.backgroundImage', type: 'image', grid: 12 },
                 { id: 'style.padding', type: 'imagePadding', grid: 12 },
                 { id: 'style.textAlign', type: 'align', grid: 12 },
-                { id: 'style.backgroundColor', type: 'backgroundColor', grid: 12 }
+                {
+                    id: 'style.backgroundColor',
+                    type: 'backgroundColor',
+                    grid: 12,
+                    hideIfSet: 'style.backgroundImage'
+                }
             ],
             label: <Trans>Container</Trans>,
             type: 'container'

src/lib/components/preferences/items/Field.tsx

@@ -67,16 +67,20 @@ interface Props {
     name: string
     type?: SettingComponentType
     Component?: React.ComponentType<any>
+    hideIfSet?: string
     [key: string]: any
 }
 
-const Field: React.FC<Props> = ({ name, type, Component: _Component, ...props }) => {
+const Field: React.FC<Props> = ({ name, type, Component: _Component, hideIfSet, ...props }) => {
     const Component = _Component || (type && fields[type])
     const formik = useFormikContext()
     let formikProps: any = {}
     if (formik) {
         formikProps.value = get(formik.values, name)
         formikProps.onChange = (value: Primitive) => formik.setFieldValue(name, value, true)
+        if (hideIfSet && Boolean(get(formik.values, hideIfSet))) {
+            return null
+        }
     }
     if (Component) {
         return <Component {...props} {...formikProps} />

src/lib/types.ts

@@ -85,6 +85,8 @@ export type DndComponentSetting = {
     grid?: GridSize
     id: string
     label?: React.ReactElement
+    //hideIfSet hides the settings if other setting is set. Container uses this field
+    hideIfSet?: string
 }
 
 export type DndItemSetting = {