function add()

in desktop/flipper-ui-core/src/ui/components/Tabs.tsx [206:293]
79 lines of code
23 McCabe index (conditional complexity)

  function add(comps: React.ReactElement | React.ReactElement[]) {
    const compsArray: React.ReactElement<TabProps>[] = Array.isArray(comps)
      ? comps
      : [comps];
    for (const comp of compsArray) {
      if (Array.isArray(comp)) {
        add(comp);
        continue;
      }

      if (!comp) {
        continue;
      }

      if (comp.type !== Tab) {
        // if element isn't a tab then just push it into the tab list
        tabSiblings.push(comp);
        continue;
      }

      const {children, closable, label, onClose, width} = comp.props;

      const key = comp.key == null ? label : comp.key;
      if (typeof key !== 'string') {
        throw new Error('tab needs a string key or a label');
      }
      if (!keys.includes(key)) {
        keys.push(key);
      }

      const isActive: boolean = active === key;
      if (isActive || props.persist === true || comp.props.persist === true) {
        tabContents.push(
          <TabContent key={key} hidden={!isActive}>
            {children}
          </TabContent>,
        );
      }

      // this tab has been hidden from the tab bar but can still be selected if its key is active
      if (comp.props.hidden) {
        continue;
      }

      let closeButton: HTMLDivElement | undefined | null;

      tabs[key] = (
        <TabListItem
          key={key}
          width={width}
          active={isActive}
          container={tabsContainer}
          onMouseDown={
            !isActive && onActive
              ? _wrapInteractionHandler(
                  (event: React.MouseEvent<HTMLDivElement>) => {
                    if (event.target !== closeButton) {
                      onActive(key);
                    }
                  },
                  'Tabs',
                  'onTabClick',
                  scope as any,
                  'tab:' + key + ':' + comp.props.label,
                )
              : undefined
          }>
          {comp.props.label}
          {closable && (
            <CloseButton // eslint-disable-next-line react/jsx-no-bind
              ref={(ref) => (closeButton = ref)} // eslint-disable-next-line react/jsx-no-bind
              onMouseDown={() => {
                if (isActive && onActive) {
                  const index = keys.indexOf(key);
                  const newActive = keys[index + 1] || keys[index - 1] || null;
                  onActive(newActive);
                }
                if (onClose) {
                  onClose();
                }
              }}>
              X
            </CloseButton>
          )}
        </TabListItem>
      );
    }
  }