fix: where builder behavior

payloadcms · May 23, 2024 · c400b11 · c400b11
1 parent 78579ed
commit c400b11
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 43 deletions.
diff --git a/packages/ui/src/elements/RenderCustomClientComponent/index.tsx b/packages/ui/src/elements/RenderCustomClientComponent/index.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+
+export type RenderCustomComponentProps = {
+  CustomComponent?: React.ComponentType<any>
+  DefaultComponent: React.ComponentType<any>
+  componentProps?: Record<string, any>
+}
+
+export const RenderCustomClientComponent: React.FC<RenderCustomComponentProps> = (props) => {
+  const { CustomComponent, DefaultComponent, componentProps = {} } = props
+
+  if (CustomComponent) {
+    return <CustomComponent {...componentProps} />
+  }
+
+  if (DefaultComponent) {
+    return <DefaultComponent {...componentProps} />
+  }
+
+  return null
+}
diff --git a/packages/ui/src/elements/RenderCustomComponent/index.tsx b/packages/ui/src/elements/RenderCustomComponent/index.tsx
@@ -14,6 +14,11 @@ export type RenderCustomComponentProps = {
   serverOnlyProps?: ServerProps
 }
 
+/**
+ * If you are passing dynamic props or function props to this component,
+ * you should instead use the <RenderCustomClientComponent/>
+ */
+
 export const RenderCustomComponent: React.FC<RenderCustomComponentProps> = (props) => {
   const { CustomComponent, DefaultComponent, componentProps, serverOnlyProps } = props
 

diff --git a/packages/ui/src/elements/WhereBuilder/Condition/index.tsx b/packages/ui/src/elements/WhereBuilder/Condition/index.tsx
@@ -36,7 +36,7 @@ export type Props = {
   }) => void
 }
 
-import { RenderCustomComponent } from '../../../elements/RenderCustomComponent/index.js'
+import { RenderCustomClientComponent } from '../../../elements/RenderCustomClientComponent/index.js'
 import { useDebounce } from '../../../hooks/useDebounce.js'
 import { Button } from '../../Button/index.js'
 import { ReactSelect } from '../../ReactSelect/index.js'
@@ -148,7 +148,7 @@ export const Condition: React.FC<Props> = (props) => {
             />
           </div>
           <div className={`${baseClass}__value`}>
-            <RenderCustomComponent
+            <RenderCustomClientComponent
               CustomComponent={internalField?.props?.admin?.components?.Filter}
               DefaultComponent={ValueComponent}
               componentProps={{
@@ -190,8 +190,8 @@ export const Condition: React.FC<Props> = (props) => {
             iconStyle="with-border"
             onClick={() =>
               addCondition({
-                andIndex,
-                fieldName,
+                andIndex: andIndex + 1,
+                fieldName: fields[0].value,
                 orIndex,
                 relation: 'and',
               })

diff --git a/packages/ui/src/elements/WhereBuilder/index.tsx b/packages/ui/src/elements/WhereBuilder/index.tsx
@@ -131,7 +131,6 @@ export const WhereBuilder: React.FC<WhereBuilderProps> = (props) => {
     setConditions((prevConditions) => {
       const newConditions = [...prevConditions]
       newConditions[orIndex].and.splice(andIndex, 1)
-
       if (newConditions[orIndex].and.length === 0) {
         newConditions.splice(orIndex, 1)
       }
@@ -156,44 +155,48 @@ export const WhereBuilder: React.FC<WhereBuilderProps> = (props) => {
             {t('general:filterWhere', { label: getTranslation(collectionPluralLabel, i18n) })}
           </div>
           <ul className={`${baseClass}__or-filters`}>
-            {conditions.map((or, orIndex) => (
-              <li key={orIndex}>
-                {orIndex !== 0 && <div className={`${baseClass}__label`}>{t('general:or')}</div>}
-                <ul className={`${baseClass}__and-filters`}>
-                  {Array.isArray(or?.and) &&
-                    or.and.map((_, andIndex) => {
-                      const initialFieldName = Object.keys(conditions[orIndex].and[andIndex])[0]
-                      const initialOperator =
-                        Object.keys(
-                          conditions[orIndex].and[andIndex]?.[initialFieldName] || {},
-                        )?.[0] || undefined
-                      const initialValue =
-                        conditions[orIndex].and[andIndex]?.[initialFieldName]?.[initialOperator] ||
-                        ''
-
-                      return (
-                        <li key={andIndex}>
-                          {andIndex !== 0 && (
-                            <div className={`${baseClass}__label`}>{t('general:and')}</div>
-                          )}
-                          <Condition
-                            addCondition={addCondition}
-                            andIndex={andIndex}
-                            fieldName={initialFieldName}
-                            fields={reducedFields}
-                            initialValue={initialValue}
-                            key={andIndex}
-                            operator={initialOperator}
-                            orIndex={orIndex}
-                            removeCondition={removeCondition}
-                            updateCondition={updateCondition}
-                          />
-                        </li>
-                      )
-                    })}
-                </ul>
-              </li>
-            ))}
+            {conditions.map((or, orIndex) => {
+              const compoundOrKey = `${orIndex}_${Array.isArray(or?.and) ? or.and.length : ''}`
+
+              return (
+                <li key={compoundOrKey}>
+                  {orIndex !== 0 && <div className={`${baseClass}__label`}>{t('general:or')}</div>}
+                  <ul className={`${baseClass}__and-filters`}>
+                    {Array.isArray(or?.and) &&
+                      or.and.map((_, andIndex) => {
+                        const initialFieldName = Object.keys(conditions[orIndex].and[andIndex])[0]
+                        const initialOperator =
+                          Object.keys(
+                            conditions[orIndex].and[andIndex]?.[initialFieldName] || {},
+                          )?.[0] || undefined
+                        const initialValue =
+                          conditions[orIndex].and[andIndex]?.[initialFieldName]?.[
+                            initialOperator
+                          ] || ''
+
+                        return (
+                          <li key={andIndex}>
+                            {andIndex !== 0 && (
+                              <div className={`${baseClass}__label`}>{t('general:and')}</div>
+                            )}
+                            <Condition
+                              addCondition={addCondition}
+                              andIndex={andIndex}
+                              fieldName={initialFieldName}
+                              fields={reducedFields}
+                              initialValue={initialValue}
+                              operator={initialOperator}
+                              orIndex={orIndex}
+                              removeCondition={removeCondition}
+                              updateCondition={updateCondition}
+                            />
+                          </li>
+                        )
+                      })}
+                  </ul>
+                </li>
+              )
+            })}
           </ul>
           <Button
             buttonStyle="icon-label"