feat(Dropdown): add support for images, icons and flags in selected values (#4003)

* updating icon shown when option selected

* updated icons to show with selected item in dropdown elements.

* finalize changes

* fix UT

Co-authored-by: reefman001 <[email protected]>

Author: layershifter

docs/src/examples/modules/Dropdown/Types/DropdownExampleClearableMultiple.js

@@ -2,29 +2,29 @@ import React from 'react'
 import { Dropdown } from 'semantic-ui-react'
 
 const countryOptions = [
-  { key: 'af', value: 'af', text: 'Afghanistan' },
-  { key: 'ax', value: 'ax', text: 'Aland Islands' },
-  { key: 'al', value: 'al', text: 'Albania' },
-  { key: 'dz', value: 'dz', text: 'Algeria' },
-  { key: 'as', value: 'as', text: 'American Samoa' },
-  { key: 'ad', value: 'ad', text: 'Andorra' },
-  { key: 'ao', value: 'ao', text: 'Angola' },
-  { key: 'ai', value: 'ai', text: 'Anguilla' },
-  { key: 'ag', value: 'ag', text: 'Antigua' },
-  { key: 'ar', value: 'ar', text: 'Argentina' },
-  { key: 'am', value: 'am', text: 'Armenia' },
-  { key: 'aw', value: 'aw', text: 'Aruba' },
-  { key: 'au', value: 'au', text: 'Australia' },
-  { key: 'at', value: 'at', text: 'Austria' },
-  { key: 'az', value: 'az', text: 'Azerbaijan' },
-  { key: 'bs', value: 'bs', text: 'Bahamas' },
-  { key: 'bh', value: 'bh', text: 'Bahrain' },
-  { key: 'bd', value: 'bd', text: 'Bangladesh' },
-  { key: 'bb', value: 'bb', text: 'Barbados' },
-  { key: 'by', value: 'by', text: 'Belarus' },
-  { key: 'be', value: 'be', text: 'Belgium' },
-  { key: 'bz', value: 'bz', text: 'Belize' },
-  { key: 'bj', value: 'bj', text: 'Benin' },
+  { key: 'af', value: 'af', flag: 'af', text: 'Afghanistan' },
+  { key: 'ax', value: 'ax', flag: 'ax', text: 'Aland Islands' },
+  { key: 'al', value: 'al', flag: 'al', text: 'Albania' },
+  { key: 'dz', value: 'dz', flag: 'dz', text: 'Algeria' },
+  { key: 'as', value: 'as', flag: 'as', text: 'American Samoa' },
+  { key: 'ad', value: 'ad', flag: 'ad', text: 'Andorra' },
+  { key: 'ao', value: 'ao', flag: 'ao', text: 'Angola' },
+  { key: 'ai', value: 'ai', flag: 'ai', text: 'Anguilla' },
+  { key: 'ag', value: 'ag', flag: 'ag', text: 'Antigua' },
+  { key: 'ar', value: 'ar', flag: 'ar', text: 'Argentina' },
+  { key: 'am', value: 'am', flag: 'am', text: 'Armenia' },
+  { key: 'aw', value: 'aw', flag: 'aw', text: 'Aruba' },
+  { key: 'au', value: 'au', flag: 'au', text: 'Australia' },
+  { key: 'at', value: 'at', flag: 'at', text: 'Austria' },
+  { key: 'az', value: 'az', flag: 'az', text: 'Azerbaijan' },
+  { key: 'bs', value: 'bs', flag: 'bs', text: 'Bahamas' },
+  { key: 'bh', value: 'bh', flag: 'bh', text: 'Bahrain' },
+  { key: 'bd', value: 'bd', flag: 'bd', text: 'Bangladesh' },
+  { key: 'bb', value: 'bb', flag: 'bb', text: 'Barbados' },
+  { key: 'by', value: 'by', flag: 'by', text: 'Belarus' },
+  { key: 'be', value: 'be', flag: 'be', text: 'Belgium' },
+  { key: 'bz', value: 'bz', flag: 'bz', text: 'Belize' },
+  { key: 'bj', value: 'bj', flag: 'bj', text: 'Benin' },
 ]
 
 const DropdownExampleClearableMultiple = () => (

src/index.js

@@ -134,6 +134,7 @@ export DropdownHeader from './modules/Dropdown/DropdownHeader'
 export DropdownItem from './modules/Dropdown/DropdownItem'
 export DropdownMenu from './modules/Dropdown/DropdownMenu'
 export DropdownSearchInput from './modules/Dropdown/DropdownSearchInput'
+export DropdownText from './modules/Dropdown/DropdownText'
 
 export Embed from './modules/Embed'
 

src/modules/Dropdown/Dropdown.js

@@ -21,11 +21,14 @@ import {
 } from '../../lib'
 import Icon from '../../elements/Icon'
 import Label from '../../elements/Label'
+import Flag from '../../elements/Flag'
+import Image from '../../elements/Image'
 import DropdownDivider from './DropdownDivider'
 import DropdownItem from './DropdownItem'
 import DropdownHeader from './DropdownHeader'
 import DropdownMenu from './DropdownMenu'
 import DropdownSearchInput from './DropdownSearchInput'
+import DropdownText from './DropdownText'
 import getMenuOptions from './utils/getMenuOptions'
 import getSelectedIndex from './utils/getSelectedIndex'
 
@@ -35,6 +38,27 @@ const getKeyOrValue = (key, value) => (_.isNil(key) ? value : key)
 const getKeyAndValues = (options) =>
   options ? options.map((option) => _.pick(option, ['key', 'value'])) : options
 
+function renderItemContent(item) {
+  const { flag, image, text } = item
+
+  // TODO: remove this in v2
+  // This maintains compatibility with Shorthand API in v1 as this might be called in "Label.create()"
+  if (React.isValidElement(text) || _.isFunction(text)) {
+    return text
+  }
+
+  return {
+    content: (
+      <>
+        {Flag.create(flag)}
+        {Image.create(image)}
+
+        {text}
+      </>
+    ),
+  }
+}
+
 /**
  * A dropdown allows a user to select a value from a series of options.
  * @see Form
@@ -842,20 +866,21 @@ export default class Dropdown extends Component {
       search && searchQuery && 'filtered',
     )
     let _text = placeholder
+    let selectedItem
 
     if (text) {
       _text = text
     } else if (open && !multiple) {
-      _text = _.get(this.getSelectedItem(selectedIndex), 'text')
+      selectedItem = this.getSelectedItem(selectedIndex)
     } else if (hasValue) {
-      _text = _.get(this.getItemByValue(value), 'text')
+      selectedItem = this.getItemByValue(value)
     }
 
-    return (
-      <div className={classes} role='alert' aria-live='polite' aria-atomic>
-        {_text}
-      </div>
-    )
+    return DropdownText.create(selectedItem ? renderItemContent(selectedItem) : _text, {
+      defaultProps: {
+        className: classes,
+      },
+    })
   }
 
   renderSearchInput = () => {
@@ -1398,7 +1423,7 @@ Dropdown.defaultProps = {
   minCharacters: 1,
   noResultsMessage: 'No results found.',
   openOnFocus: true,
-  renderLabel: ({ text }) => text,
+  renderLabel: renderItemContent,
   searchInput: 'text',
   selectOnBlur: true,
   selectOnNavigation: true,
@@ -1412,3 +1437,4 @@ Dropdown.Header = DropdownHeader
 Dropdown.Item = DropdownItem
 Dropdown.Menu = DropdownMenu
 Dropdown.SearchInput = DropdownSearchInput
+Dropdown.Text = DropdownText

src/modules/Dropdown/DropdownText.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { SemanticShorthandContent } from '../../generic'
+
+export interface DropdownTextProps extends StrictDropdownTextProps {
+  [key: string]: any
+}
+
+export interface StrictDropdownTextProps {
+  /** An element type to render as (string or function). */
+  as?: any
+
+  /** Primary content. */
+  children?: React.ReactNode
+
+  /** Additional classes. */
+  className?: string
+
+  /** Shorthand for primary content. */
+  content?: SemanticShorthandContent
+}
+
+declare const DropdownText: React.FunctionComponent<DropdownTextProps>
+
+export default DropdownText

src/modules/Dropdown/DropdownText.js

@@ -0,0 +1,45 @@
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import {
+  childrenUtils,
+  createShorthandFactory,
+  customPropTypes,
+  getElementType,
+  getUnhandledProps,
+} from '../../lib'
+
+/**
+ * A dropdown contains a selected value.
+ */
+function DropdownText(props) {
+  const { children, className, content } = props
+  const classes = cx('divider', className)
+  const rest = getUnhandledProps(DropdownText, props)
+  const ElementType = getElementType(DropdownText, props)
+
+  return (
+    <ElementType aria-atomic aria-live='polite' role='alert' {...rest} className={classes}>
+      {childrenUtils.isNil(children) ? content : children}
+    </ElementType>
+  )
+}
+
+DropdownText.propTypes = {
+  /** An element type to render as (string or function). */
+  as: PropTypes.elementType,
+
+  /** Primary content. */
+  children: PropTypes.node,
+
+  /** Additional classes. */
+  className: PropTypes.string,
+
+  /** Shorthand for primary content. */
+  content: customPropTypes.contentShorthand,
+}
+
+DropdownText.create = createShorthandFactory(DropdownText, (val) => ({ content: val }))
+
+export default DropdownText

test/specs/modules/Dropdown/Dropdown-test.js

@@ -4,12 +4,14 @@ import React from 'react'
 
 import * as common from 'test/specs/commonTests'
 import { consoleUtil, domEvent, sandbox } from 'test/utils'
+import Label from 'src/elements/Label/Label'
 import Dropdown from 'src/modules/Dropdown/Dropdown'
 import DropdownDivider from 'src/modules/Dropdown/DropdownDivider'
 import DropdownHeader from 'src/modules/Dropdown/DropdownHeader'
 import DropdownItem from 'src/modules/Dropdown/DropdownItem'
 import DropdownMenu from 'src/modules/Dropdown/DropdownMenu'
 import DropdownSearchInput from 'src/modules/Dropdown/DropdownSearchInput'
+import DropdownText from 'src/modules/Dropdown/DropdownText'
 
 let attachTo
 let options
@@ -92,6 +94,7 @@ describe('Dropdown', () => {
     DropdownItem,
     DropdownMenu,
     DropdownSearchInput,
+    DropdownText,
   ])
 
   common.implementsIconProp(Dropdown, {
@@ -290,13 +293,6 @@ describe('Dropdown', () => {
       wrapperMount(<Dropdown />)
       wrapper.find('div').at(0).should.have.prop('role', 'listbox')
     })
-    it('should render an aria-live region with aria-atomic', () => {
-      wrapperMount(<Dropdown />)
-      wrapper
-        .find('div')
-        .at(1)
-        .should.have.props({ 'aria-live': 'polite', 'aria-atomic': true, role: 'alert' })
-    })
     it('should label search dropdown as a combobox', () => {
       wrapperMount(<Dropdown search />)
       wrapper.find('div').at(0).should.have.prop('role', 'combobox')
@@ -1103,13 +1099,10 @@ describe('Dropdown', () => {
       const nextItem = _.sample(_.without(options, initialItem))
 
       wrapperMount(<Dropdown options={options} selection value={initialItem.value} />)
-        .find('div.text')
-        .should.contain.text(initialItem.text)
+      wrapper.find(DropdownText).should.contain.text(initialItem.text)
 
-      wrapper
-        .setProps({ value: nextItem.value })
-        .find('div.text')
-        .should.contain.text(nextItem.text)
+      wrapper.setProps({ value: nextItem.value })
+      wrapper.find(DropdownText).should.contain.text(nextItem.text)
     })
 
     it('updates value on down arrow', () => {
@@ -1487,18 +1480,43 @@ describe('Dropdown', () => {
     it('filters active options out of the list', () => {
       // make all the items active, expect to see none in the list
       const value = _.map(options, 'value')
-      wrapperShallow(
-        <Dropdown options={options} selection value={value} multiple />,
-      ).should.not.have.descendants('DropdownItem')
+
+      wrapperShallow(<Dropdown options={options} selection value={value} multiple />)
+      wrapper.should.not.have.descendants('DropdownItem')
     })
     it('displays a label for active items', () => {
       // select a random item, expect a label with the item's text
-      const activeItem = _.sample(options)
-      wrapperShallow(
-        <Dropdown options={options} selection value={[activeItem.value]} multiple />,
-      ).should.have.descendants('Label')
+      const testOptions = [
+        { value: 'foo', text: 'foo' },
+        { value: 'bar', text: 'bar', image: 'bar.jpg' },
+        { value: 'baz', text: <span className='baz'>baz</span> },
+        {
+          value: 'qux',
+          text: () => (
+            <span className='qux' key='qux'>
+              qux
+            </span>
+          ),
+        },
+      ]
+
+      consoleUtil.disableOnce()
+      wrapperMount(
+        <Dropdown
+          multiple
+          options={testOptions}
+          selection
+          value={testOptions.map((option) => option.value)}
+        />,
+      )
+
+      expect(wrapper.find(Label).at(0).getDOMNode().innerText).to.include('foo')
+
+      expect(wrapper.find(Label).at(1).getDOMNode().innerText).to.include('bar')
+      wrapper.find(Label).at(1).find('Image').should.have.prop('src', 'bar.jpg')
 
-      wrapper.find('Label').should.have.prop('content', activeItem.text)
+      wrapper.find('span.baz').should.contain.text('baz')
+      wrapper.find('span.qux').should.contain.text('qux')
     })
     it('keeps the selection within the range of remaining options', () => {
       // items are removed as they are made active
@@ -2031,7 +2049,7 @@ describe('Dropdown', () => {
         <Dropdown minCharacters={3} options={options} placeholder='foo' selection search />,
       )
 
-      wrapper.find('.default.text').simulate('click')
+      wrapper.find(DropdownText).simulate('click')
 
       const activeElement = document.activeElement
       const searchIsFocused = activeElement === document.querySelector('input.search')

test/specs/modules/Dropdown/DropdownText-test.js

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import DropdownText from 'src/modules/Dropdown/DropdownText'
+import * as common from 'test/specs/commonTests'
+
+describe('DropdownText', () => {
+  common.isConformant(DropdownText)
+  common.rendersChildren(DropdownText)
+
+  it('aria attributes', () => {
+    const wrapper = shallow(<DropdownText />)
+
+    wrapper.should.have.prop('aria-live', 'polite')
+    wrapper.should.have.prop('aria-atomic', true)
+    wrapper.should.have.prop('role', 'alert')
+  })
+})