react/src/components/dropdown/SprkDropdown.js
// TODO: Remove deprecated props as part of Issue 3798
Remove deprecated props as part of Issue 3798
Remove deprecated props as part of Issue 3798
render() {
    const {
      additionalClasses,
      additionalIconClasses,
      iconAdditionalClasses = additionalIconClasses,
      additionalTriggerClasses,
      triggerAdditionalClasses = additionalTriggerClasses,
      additionalTriggerTextClasses,
      triggerTextAdditionalClasses = additionalTriggerTextClasses,
      analyticsString,
      choices,
      iconName,
      idString,
      screenReaderText,
      title,
      heading = title,
      variant,
      defaultTriggerText,
      openedEvent,
      closedEvent,
      ...rest
    } = this.props;
    const { choiceFunction, footer } = choices;
    const { choiceItems, isOpen, triggerText } = this.state;
    return (
      <div ref={this.dropdownRef}>
        <SprkLink
          element="a"
          variant="plain"
          additionalClasses={classNames(
            'sprk-c-Dropdown__trigger',
            {
              'sprk-c-Dropdown__trigger--informational':
                variant === 'informational',
            },
            triggerAdditionalClasses,
          )}
          aria-expanded={isOpen}
          aria-haspopup="listbox"
          aria-label={screenReaderText || triggerText}
          data-analytics={analyticsString}
          data-id={idString}
          onClick={this.toggleDropdownOpen}
          {...rest}
        >
          {variant === 'informational' && (
            <>
              <span className={classNames(triggerTextAdditionalClasses)}>
                {triggerText}
              </span>
              <SprkIcon
                additionalClasses={classNames(
                  iconAdditionalClasses,
                  `
                  sprk-c-Icon--filled-current-color
                  sprk-c-Icon--stroke-current-color
                  sprk-c-Dropdown__trigger-icon
                `,
                )}
                iconName={iconName}
              />
            </>
          )}
          {variant !== 'informational' && (
            <>
              <span
                className={classNames(
                  'sprk-u-ScreenReaderText',
                  triggerTextAdditionalClasses,
                )}
              >
                {screenReaderText}
              </span>
              <SprkIcon
                iconName={iconName}
                additionalClasses={iconAdditionalClasses}
              />
            </>
          )}
        </SprkLink>
        {isOpen && (
          <div className={classNames('sprk-c-Dropdown', additionalClasses)}>
            {heading !== '' && (
              <div className="sprk-c-Dropdown__header">
                <SprkText
                  element="h2"
                  variant="bodyTwo"
                  additionalClasses="sprk-c-Dropdown__title"
                >
                  {heading}
                </SprkText>
              </div>
            )}
            <ul
              className="sprk-c-Dropdown__links"
              aria-label={heading || screenReaderText || 'My Choices'}
              role="listbox"
            >
              {choiceItems.map((choice) => {
                const {
                  content,
                  element,
                  href,
                  isActive,
                  text,
                  value,
                  idString,
                  isDefault,
                  ...choicesRest
                } = choice;
                const TagName = element || 'a';
                return (
                  <li
                    className="sprk-c-Dropdown__item"
                    aria-selected={isActive}
                    role="option"
                    key={choice.id}
                  >
                    {variant !== 'informational' && (
                      <TagName
                        className="sprk-c-Dropdown__link"
                        href={TagName === 'a' ? href || '#' : undefined}
                        aria-label={text}
                        onClick={() => {
                          this.selectChoice(choice.id, text);
                          this.closeDropdown();
                          if (choiceFunction) {
                            choiceFunction(value);
                          }
                        }}
                        data-id={idString}
                        {...choicesRest}
                      >
                        {text}
                      </TagName>
                    )}
                    {variant === 'informational' && (
                      <>
                        <TagName
                          className={classNames('sprk-c-Dropdown__link', {
                            'sprk-c-Dropdown__link--active': isActive,
                          })}
                          href={TagName === 'a' ? href || '#' : undefined}
                          aria-label={content.title}
                          onClick={() => {
                            this.selectChoice(choice.id, content.title);
                            this.closeDropdown();
                            if (choiceFunction) {
                              choiceFunction(value);
                            }
                          }}
                          {...choicesRest}
                        >
                          <SprkText variant="bodyOne">{content.title}</SprkText>
                          {content.infoLine1 && (
                            <SprkText variant="bodyTwo">
                              {content.infoLine1}
                            </SprkText>
                          )}
                          {content.infoLine2 && (
                            <SprkText variant="bodyTwo">
                              {content.infoLine2}
                            </SprkText>
                          )}
                        </TagName>
                      </>
                    )}
                  </li>
                );
              })}
            </ul>
            {footer && (
              <div className="sprk-c-Dropdown__footer sprk-b-Type--center">
                {footer}
              </div>
            )}
          </div>
        )}
      </div>
    );
  }
render ( ) { const { additionalClasses , additionalIconClasses , iconAdditionalClasses = additionalIconClasses , additionalTriggerClasses , triggerAdditionalClasses = additionalTriggerClasses , additionalTriggerTextClasses , triggerTextAdditionalClasses = additionalTriggerTextClasses , analyticsString , choices , iconName , idString , screenReaderText , title , heading = title , variant , defaultTriggerText , openedEvent , closedEvent , ... rest } = this . props ; const { choiceFunction , footer } = choices ; const { choiceItems , isOpen , triggerText } = this . state ; return ( < div ref = { this . dropdownRef } > < SprkLink element = "a" variant = "plain" additionalClasses = { classNames ( 'sprk-c-Dropdown__trigger' , { 'sprk-c-Dropdown__trigger--informational' : variant === 'informational' , } , triggerAdditionalClasses , ) } aria-expanded = { isOpen } aria-haspopup = "listbox" aria-label = { screenReaderText || triggerText } data-analytics = { analyticsString } data-id = { idString } onClick = { this . toggleDropdownOpen } { ... rest } > { variant === 'informational' && ( < > < span className = { classNames ( triggerTextAdditionalClasses ) } > { triggerText } < / span > < SprkIcon additionalClasses = { classNames ( iconAdditionalClasses , ` ` , ) } iconName = { iconName } / > < / > ) } { variant !== 'informational' && ( < > < span className = { classNames ( 'sprk-u-ScreenReaderText' , triggerTextAdditionalClasses , ) } > { screenReaderText } < / span > < SprkIcon iconName = { iconName } additionalClasses = { iconAdditionalClasses } / > < / > ) } < / SprkLink > { isOpen && ( < div className = { classNames ( 'sprk-c-Dropdown' , additionalClasses ) } > { heading !== '' && ( < div className = "sprk-c-Dropdown__header" > < SprkText element = "h2" variant = "bodyTwo" additionalClasses = "sprk-c-Dropdown__title" > { heading } < / SprkText > < / div > ) } < ul className = "sprk-c-Dropdown__links" aria-label = { heading || screenReaderText || 'My Choices' } role = "listbox" > { choiceItems . map ( ( choice ) => { const { content , element , href , isActive , text , value , idString , isDefault , ... choicesRest } = choice ; const TagName = element || 'a' ; return ( < li className = "sprk-c-Dropdown__item" aria-selected = { isActive } role = "option" key = { choice . id } > { variant !== 'informational' && ( < TagName className = "sprk-c-Dropdown__link" href = { TagName === 'a' ? href || '#' : undefined } aria-label = { text } onClick = { ( ) => { this . selectChoice ( choice . id , text ) ; this . closeDropdown ( ) ; if ( choiceFunction ) { choiceFunction ( value ) ; } } } data-id = { idString } { ... choicesRest } > { text } < / TagName > ) } { variant === 'informational' && ( < > < TagName className = { classNames ( 'sprk-c-Dropdown__link' , { 'sprk-c-Dropdown__link--active' : isActive , } ) } href = { TagName === 'a' ? href || '#' : undefined } aria-label = { content . title } onClick = { ( ) => { this . selectChoice ( choice . id , content . title ) ; this . closeDropdown ( ) ; if ( choiceFunction ) { choiceFunction ( value ) ; } } } { ... choicesRest } > < SprkText variant = "bodyOne" > { content . title } < / SprkText > { content . infoLine1 && ( < SprkText variant = "bodyTwo" > { content . infoLine1 } < / SprkText > ) } { content . infoLine2 && ( < SprkText variant = "bodyTwo" > { content . infoLine2 } < / SprkText > ) } < / TagName > < / > ) } < / li > ) ; } ) } < / ul > { footer && ( < div className = "sprk-c-Dropdown__footer sprk-b-Type--center" > { footer } < / div > ) } < / div > ) } < / div > ) ; }
TODO: Remove deprecated props as part of Issue 3798
TODO : Remove deprecated props as part of Issue 3798
// eslint-disable-next-line no-shadow