refactor: simplify code (react-bootstrap#5676)

* refactor: simplify code

Use optional chaining with function calls
Avoid destructuring params if not needed
Shorten TabContent to use createWithBsPrefix

* Fix nested classNames

Author: kyletsang

src/AbstractNav.tsx

@@ -77,7 +77,7 @@ const AbstractNav: BsPrefixRefForwardingComponent<
 
     const listNode = useRef<HTMLElement>(null);
 
-    const getNextActiveChild = (offset) => {
+    const getNextActiveChild = (offset: number) => {
       const currentListNode = listNode.current;
       if (!currentListNode) return null;
 
@@ -96,12 +96,12 @@ const AbstractNav: BsPrefixRefForwardingComponent<
 
     const handleSelect = (key, event) => {
       if (key == null) return;
-      if (onSelect) onSelect(key, event);
-      if (parentOnSelect) parentOnSelect(key, event);
+      onSelect?.(key, event);
+      parentOnSelect?.(key, event);
     };
 
     const handleKeyDown = (event) => {
-      if (onKeyDown) onKeyDown(event);
+      onKeyDown?.(event);
 
       let nextActiveChild;
       switch (event.key) {
@@ -130,7 +130,7 @@ const AbstractNav: BsPrefixRefForwardingComponent<
           '[data-rb-event-key].active',
         );
 
-        if (activeChild) activeChild.focus();
+        activeChild?.focus();
       }
 
       needsRefocusRef.current = false;

src/AbstractNavItem.tsx

@@ -88,10 +88,10 @@ const AbstractNavItem: BsPrefixRefForwardingComponent<
     }
 
     const handleOnclick = useEventCallback((e) => {
-      if (onClick) onClick(e);
+      onClick?.(e);
       if (navKey == null) return;
-      if (onSelect) onSelect(navKey, e);
-      if (parentOnSelect) parentOnSelect(navKey, e);
+      onSelect?.(navKey, e);
+      parentOnSelect?.(navKey, e);
     });
 
     return (

src/Accordion.tsx

@@ -50,7 +50,6 @@ const Accordion: BsPrefixRefForwardingComponent<
     as: Component = 'div',
     activeKey,
     bsPrefix,
-    children,
     className,
     onSelect,
     flush,
@@ -74,9 +73,7 @@ const Accordion: BsPrefixRefForwardingComponent<
         ref={ref}
         {...controlledProps}
         className={classNames(className, prefix, flush && `${prefix}-flush`)}
-      >
-        {children}
-      </Component>
+      />
     </AccordionContext.Provider>
   );
 });

src/AccordionButton.tsx

@@ -54,7 +54,6 @@ const AccordionButton: BsPrefixRefForwardingComponent<
       as: Component = 'button',
       bsPrefix,
       className,
-      children,
       onClick,
       ...props
     },
@@ -80,9 +79,7 @@ const AccordionButton: BsPrefixRefForwardingComponent<
           bsPrefix,
           eventKey !== activeEventKey && 'collapsed',
         )}
-      >
-        {children}
-      </Component>
+      />
     );
   },
 );

src/Carousel.tsx

@@ -305,10 +305,7 @@ const Carousel: BsPrefixRefForwardingComponent<
       }
 
       nextDirectionRef.current = 'prev';
-
-      if (onSelect) {
-        onSelect(nextActiveIndex, event);
-      }
+      onSelect?.(nextActiveIndex, event);
     },
     [isSliding, renderedActiveIndex, onSelect, wrap, numChildren],
   );
@@ -330,9 +327,7 @@ const Carousel: BsPrefixRefForwardingComponent<
 
     nextDirectionRef.current = 'next';
 
-    if (onSelect) {
-      onSelect(nextActiveIndex, event);
-    }
+    onSelect?.(nextActiveIndex, event);
   });
 
   const elementRef = useRef<HTMLElement>();
@@ -358,12 +353,8 @@ const Carousel: BsPrefixRefForwardingComponent<
       return;
     }
 
-    if (onSlide) {
-      onSlide(renderedActiveIndex, slideDirection);
-    }
-    if (onSlid) {
-      onSlid(renderedActiveIndex, slideDirection);
-    }
+    onSlide?.(renderedActiveIndex, slideDirection);
+    onSlid?.(renderedActiveIndex, slideDirection);
   }, [renderedActiveIndex]);
 
   const orderClassName = `${prefix}-item-${direction}`;
@@ -373,19 +364,15 @@ const Carousel: BsPrefixRefForwardingComponent<
     (node) => {
       triggerBrowserReflow(node);
 
-      if (onSlide) {
-        onSlide(renderedActiveIndex, slideDirection);
-      }
+      onSlide?.(renderedActiveIndex, slideDirection);
     },
     [onSlide, renderedActiveIndex, slideDirection],
   );
 
   const handleEntered = useCallback(() => {
     setIsSliding(false);
 
-    if (onSlid) {
-      onSlid(renderedActiveIndex, slideDirection);
-    }
+    onSlid?.(renderedActiveIndex, slideDirection);
   }, [onSlid, renderedActiveIndex, slideDirection]);
 
   const handleKeyDown = useCallback(
@@ -404,9 +391,7 @@ const Carousel: BsPrefixRefForwardingComponent<
         }
       }
 
-      if (onKeyDown) {
-        onKeyDown(event);
-      }
+      onKeyDown?.(event);
     },
     [keyboard, onKeyDown, prev, next],
   );
@@ -417,9 +402,7 @@ const Carousel: BsPrefixRefForwardingComponent<
         setPaused(true);
       }
 
-      if (onMouseOver) {
-        onMouseOver(event);
-      }
+      onMouseOver?.(event);
     },
     [pause, onMouseOver],
   );
@@ -428,9 +411,7 @@ const Carousel: BsPrefixRefForwardingComponent<
     (event) => {
       setPaused(false);
 
-      if (onMouseOut) {
-        onMouseOut(event);
-      }
+      onMouseOut?.(event);
     },
     [onMouseOut],
   );
@@ -448,9 +429,7 @@ const Carousel: BsPrefixRefForwardingComponent<
         setPaused(true);
       }
 
-      if (onTouchStart) {
-        onTouchStart(event);
-      }
+      onTouchStart?.(event);
     },
     [pause, onTouchStart],
   );
@@ -464,9 +443,7 @@ const Carousel: BsPrefixRefForwardingComponent<
           event.touches[0].clientX - touchStartXRef.current;
       }
 
-      if (onTouchMove) {
-        onTouchMove(event);
-      }
+      onTouchMove?.(event);
     },
     [onTouchMove],
   );
@@ -491,9 +468,7 @@ const Carousel: BsPrefixRefForwardingComponent<
         }, interval || undefined);
       }
 
-      if (onTouchEnd) {
-        onTouchEnd(event);
-      }
+      onTouchEnd?.(event);
     },
     [touch, pause, prev, next, touchUnpauseTimeout, interval, onTouchEnd],
   );
@@ -523,9 +498,7 @@ const Carousel: BsPrefixRefForwardingComponent<
     () =>
       indicators &&
       Array.from({ length: numChildren }, (_, index) => (event) => {
-        if (onSelect) {
-          onSelect(index, event);
-        }
+        onSelect?.(index, event);
       }),
     [indicators, numChildren, onSelect],
   );

src/Dropdown.tsx

@@ -144,15 +144,13 @@ const Dropdown: BsPrefixRefForwardingComponent<
   const handleToggle = useEventCallback(
     (nextShow, event, source = event.type) => {
       if (event.currentTarget === document) source = 'rootClose';
-      if (onToggle) {
-        onToggle(nextShow, event, { source });
-      }
+      onToggle?.(nextShow, event, { source });
     },
   );
 
   const handleSelect = useEventCallback((key, event) => {
-    if (onSelectCtx) onSelectCtx(key, event);
-    if (onSelect) onSelect(key, event);
+    onSelectCtx?.(key, event);
+    onSelect?.(key, event);
     handleToggle(false, event, 'select');
   });
 

src/DropdownItem.tsx

@@ -77,7 +77,6 @@ const DropdownItem: BsPrefixRefForwardingComponent<
     {
       bsPrefix,
       className,
-      children,
       eventKey,
       disabled,
       href,
@@ -106,9 +105,9 @@ const DropdownItem: BsPrefixRefForwardingComponent<
       // SafeAnchor handles the disabled case, but we handle it here
       // for other components
       if (disabled) return;
-      if (onClick) onClick(event);
-      if (onSelectCtx) onSelectCtx(key, event);
-      if (onSelect) onSelect(key, event);
+      onClick?.(event);
+      onSelectCtx?.(key, event);
+      onSelect?.(key, event);
     });
 
     return (
@@ -126,9 +125,7 @@ const DropdownItem: BsPrefixRefForwardingComponent<
           disabled && 'disabled',
         )}
         onClick={handleClick}
-      >
-        {children}
-      </Component>
+      />
     );
   },
 );

src/DropdownMenu.tsx

@@ -218,11 +218,11 @@ const DropdownMenu: BsPrefixRefForwardingComponent<
       (menuProps as any).alignRight = alignEnd;
     }
 
-    let style = (props as any).style;
+    let style = props.style;
     if (placement) {
       // we don't need the default popper style,
       // menus are display: none when not shown.
-      style = { ...(props as any).style, ...menuProps.style };
+      style = { ...props.style, ...menuProps.style };
       props['x-placement'] = placement;
     }
 

src/Feedback.tsx

@@ -39,7 +39,7 @@ const Feedback: BsPrefixRefForwardingComponent<
       type = 'valid',
       tooltip = false,
       ...props
-    }: FeedbackProps,
+    },
     ref,
   ) => (
     <Component

src/FormContext.tsx

@@ -2,12 +2,9 @@ import React from 'react';
 
 // TODO
 interface FormContextType {
-  controlId: any;
-  custom?: boolean; // TODO delete
+  controlId?: any;
 }
 
-const FormContext = React.createContext<FormContextType>({
-  controlId: undefined,
-});
+const FormContext = React.createContext<FormContextType>({});
 
 export default FormContext;