Just check immediate children for FormCheckLabel

react-bootstrap · Nov 6, 2021 · 0754b49 · 0754b49
1 parent 5343b0a
commit 0754b49
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 55 deletions.
diff --git a/.husky/pre-commit b/.husky/pre-commit
diff --git a/src/ElementChildren.tsx b/src/ElementChildren.tsx
@@ -36,36 +36,16 @@ function forEach<P = any>(
 }
 
 /**
- * Finds a child component by type (either a string for an HTML element or a
- * component for a React element) and separates it from the parent component's
- * other children.
+ * Finds whether a component's `children` prop includes a React element of the
+ * specified type.
  */
-function getChildOfType<P = any>(
-  children: React.ReactNode | React.ReactNode[],
+function hasChildOfType<P = any>(
+  children: React.ReactNode,
   type: string | React.JSXElementConstructor<P>,
-): {
-  matchingChild: React.ReactElement<
-    P,
-    string | React.JSXElementConstructor<P>
-  > | null;
-  otherChildren: React.ReactNode[];
-} {
-  const childrenList = Array.isArray(children)
-    ? children
-    : React.Children.toArray(children);
-  const childIndex = childrenList.findIndex(
-    (child) => React.isValidElement<P>(child) && child.type === type,
+): boolean {
+  return React.Children.toArray(children).some(
+    (child) => React.isValidElement(child) && child.type === type,
   );
-
-  return childIndex === -1
-    ? { matchingChild: null, otherChildren: childrenList }
-    : {
-        matchingChild: childrenList[childIndex] as React.ReactElement<P>,
-        otherChildren: [
-          ...childrenList.slice(0, childIndex),
-          ...childrenList.slice(childIndex + 1),
-        ],
-      };
 }
 
-export { map, forEach, getChildOfType };
+export { map, forEach, hasChildOfType };
diff --git a/src/FormCheck.tsx b/src/FormCheck.tsx
@@ -8,7 +8,7 @@ import FormCheckLabel from './FormCheckLabel';
 import FormContext from './FormContext';
 import { useBootstrapPrefix } from './ThemeProvider';
 import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
-import { getChildOfType } from './ElementChildren';
+import { hasChildOfType } from './ElementChildren';
 
 export type FormCheckType = 'checkbox' | 'radio' | 'switch';
 
@@ -153,9 +153,11 @@ const FormCheck: BsPrefixRefForwardingComponent<'input', FormCheckProps> =
         [controlId, id],
       );
 
-      const { matchingChild: inputChild, otherChildren: childrenAfterInput } =
-        getChildOfType(children, FormCheckInput);
-      const inputElement = inputChild ?? (
+      const hasLabel =
+        (!children && label != null && label !== false) ||
+        hasChildOfType(children, FormCheckInput);
+
+      const input = (
         <FormCheckInput
           {...props}
           type={type === 'switch' ? 'checkbox' : type}
@@ -167,25 +169,6 @@ const FormCheck: BsPrefixRefForwardingComponent<'input', FormCheckProps> =
         />
       );
 
-      const { matchingChild: labelChild, otherChildren: childrenAfterLabel } =
-        getChildOfType(childrenAfterInput, FormCheckLabel);
-      const labelElement = labelChild ?? (
-        <FormCheckLabel title={title}>{label}</FormCheckLabel>
-      );
-      const hasLabel = (label != null && label !== false) || labelChild != null;
-
-      const { matchingChild: feedbackChild, otherChildren } = getChildOfType(
-        childrenAfterLabel,
-        Feedback,
-      );
-      const feedbackElement =
-        feedbackChild ??
-        (feedback && (
-          <Feedback type={feedbackType} tooltip={feedbackTooltip}>
-            {feedback}
-          </Feedback>
-        ));
-
       return (
         <FormContext.Provider value={innerFormContext}>
           <div
@@ -197,10 +180,19 @@ const FormCheck: BsPrefixRefForwardingComponent<'input', FormCheckProps> =
               type === 'switch' && bsSwitchPrefix,
             )}
           >
-            {inputElement}
-            {labelElement}
-            {feedbackElement}
-            {otherChildren}
+            {children || (
+              <>
+                {input}
+                {hasLabel && (
+                  <FormCheckLabel title={title}>{label}</FormCheckLabel>
+                )}
+                {feedback && (
+                  <Feedback type={feedbackType} tooltip={feedbackTooltip}>
+                    {feedback}
+                  </Feedback>
+                )}
+              </>
+            )}
           </div>
         </FormContext.Provider>
       );