iconName: isDeviceSelected()

in packages/react-composites/src/composites/common/Drawer/MoreDrawer.tsx [317:480]
149 lines of code
37 McCabe index (conditional complexity)

          iconName: isDeviceSelected(mic, props.selectedMicrophone) ? selectedIconName : iconName
        },
        text: mic.name,
        onItemClick: onMicrophoneItemClick,
        secondaryIconProps: isDeviceSelected(mic, props.selectedMicrophone) ? { iconName: 'Accept' } : undefined,
        disabled: drawerSelectionOptions !== false ? isDisabled(drawerSelectionOptions.microphoneButton) : undefined
      })),
      secondaryText: props.selectedMicrophone?.name
    });
  }

  const dtmfDialerScreenOption = {
    itemKey: 'dtmfDialerScreenKey',
    text: !dtmfDialerChecked
      ? localeStrings.strings.call.dtmfDialerMoreButtonLabelOn
      : localeStrings.strings.call.dtmfDialerMoreButtonLabelOff,
    onItemClick: () => {
      if (props.onSetDialpadPage) {
        props.onSetDialpadPage();
      }
      setDtmfDialerChecked(!dtmfDialerChecked);
      onLightDismiss();
    },
    iconProps: {
      iconName: 'DtmfDialpadButton',
      styles: { root: { lineHeight: 0 } }
    }
  };
  /**
   * Only render the dtmf dialer if the dialpad for PSTN calls is not present
   */
  if (
    props.onSetDialpadPage &&
    allowDtmfDialer &&
    drawerSelectionOptions !== false &&
    isEnabled(drawerSelectionOptions.dtmfDialerButton)
  ) {
    drawerMenuItems.push(dtmfDialerScreenOption);
  }

  const galleryLayoutOptions = {
    itemKey: 'galleryPositionKey',
    iconProps: {
      iconName: 'GalleryOptions',
      styles: { root: { lineHeight: 0 } }
    },
    disabled: props.disableButtonsForHoldScreen,
    text: localeStrings.strings.call.moreButtonGalleryControlLabel,
    subMenuProps: [
      {
        itemKey: 'dynamicSelectionKey',
        text: localeStrings.strings.call.moreButtonGalleryFloatingLocalLayoutLabel,
        onItemClick: () => {
          props.onUserSetGalleryLayout && props.onUserSetGalleryLayout('floatingLocalVideo');
          onLightDismiss();
        },
        iconProps: {
          iconName: 'FloatingLocalVideoGalleryLayout',
          styles: { root: { lineHeight: 0 } }
        },
        secondaryIconProps: props.userSetGalleryLayout === 'floatingLocalVideo' ? { iconName: 'Accept' } : undefined
      },
      {
        itemKey: 'focusedContentSelectionKey',
        text: localeStrings.strings.call.moreButtonGalleryFocusedContentLayoutLabel,
        onItemClick: () => {
          props.onUserSetGalleryLayout && props.onUserSetGalleryLayout('focusedContent');
          onLightDismiss();
        },
        iconProps: {
          iconName: 'FocusedContentGalleryLayout',
          styles: { root: { lineHeight: 0 } }
        },
        secondaryIconProps: props.userSetGalleryLayout === 'focusedContent' ? { iconName: 'Accept' } : undefined
      }
    ]
  };

  /* @conditional-compile-remove(gallery-layout-composite) */
  const galleryOption = {
    itemKey: 'defaultSelectionKey',
    text: localeStrings.strings.call.moreButtonGalleryDefaultLayoutLabel,
    onItemClick: () => {
      props.onUserSetGalleryLayout && props.onUserSetGalleryLayout('default');
      onLightDismiss();
    },
    iconProps: {
      iconName: 'DefaultGalleryLayout',
      styles: { root: { lineHeight: 0 } }
    },
    secondaryIconProps: props.userSetGalleryLayout === 'default' ? { iconName: 'Accept' } : undefined
  };

  /* @conditional-compile-remove(together-mode) */
  const togetherModeOption = {
    itemKey: 'togetherModeSelectionKey',
    text: localeStrings.strings.call.moreButtonTogetherModeLayoutLabel,
    onItemClick: () => {
      props.onUserSetGalleryLayout && props.onUserSetGalleryLayout('togetherMode');
      onLightDismiss();
    },
    iconProps: {
      iconName: 'TogetherModeLayout',
      styles: { root: { lineHeight: 0 } }
    },
    disabled: !(
      (participantId?.kind === 'microsoftTeamsUser' && participantCapability?.startTogetherMode?.isPresent) ||
      isTogetherModeActive
    ),
    secondaryIconProps: props.userSetGalleryLayout === 'default' ? { iconName: 'Accept' } : undefined
  };

  /* @conditional-compile-remove(gallery-layout-composite) */
  galleryLayoutOptions.subMenuProps?.push(galleryOption);
  /* @conditional-compile-remove(together-mode) */
  if (isTeamsCall || isTeamsMeeting) {
    galleryLayoutOptions.subMenuProps?.push(togetherModeOption);
  }

  if (drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions?.galleryControlsButton)) {
    drawerMenuItems.push(galleryLayoutOptions);
  }
  if (drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions?.peopleButton)) {
    drawerMenuItems.push({
      itemKey: 'people',
      id: 'call-composite-drawer-people-button',
      text: props.strings.peopleButtonLabel,
      iconProps: { iconName: 'MoreDrawerPeople' },
      onItemClick: props.onPeopleButtonClicked,
      disabled: isDisabled(drawerSelectionOptions.peopleButton) || props.disableButtonsForHoldScreen
    });
  }

  if (drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions?.holdButton)) {
    drawerMenuItems.push({
      itemKey: 'holdButtonKey',
      disabled: props.disableButtonsForHoldScreen || isDisabled(drawerSelectionOptions.holdButton),
      text: localeStrings.component.strings.holdButton.tooltipOffContent,
      onItemClick: () => {
        holdButtonProps.onToggleHold();
        onLightDismiss();
      },
      iconProps: { iconName: 'HoldCallContextualMenuItem', styles: { root: { lineHeight: 0 } } }
    });
  }

  const role = callAdapter.getState().call?.role;
  const hideRaiseHandButtonInRoomsCall =
    callAdapter.getState().isRoomsCall && role && ['Consumer', 'Unknown'].includes(role);

  if (
    drawerSelectionOptions !== false &&
    isEnabled(drawerSelectionOptions?.raiseHandButton) &&
    !hideRaiseHandButtonInRoomsCall
  ) {
    const raiseHandIcon = raiseHandButtonProps.checked ? 'LowerHandContextualMenuItem' : 'RaiseHandContextualMenuItem';
    drawerMenuItems.push({
      itemKey: 'raiseHandButtonKey',
      disabled: props.disableButtonsForHoldScreen || isDisabled(drawerSelectionOptions.raiseHandButton),
      text: raiseHandButtonProps.checked
        ? localeStrings.component.strings.raiseHandButton.onLabel
        : localeStrings.component.strings.raiseHandButton.offLabel,
      onItemClick: () => {
        if (raiseHandButtonProps.onToggleRaiseHand) {