@ -1,11 +1,15 @@
import Select from '@atlaskit/single-select' ;
import AKButton from '@atlaskit/button' ;
import AKDropdownMenu from '@atlaskit/dropdown-menu' ;
import ExpandIcon from '@atlaskit/icon/glyph/expand' ;
import React , { Component } from 'react' ;
import { translate } from '../../base/i18n' ;
const EXPAND _ICON = < ExpandIcon label = 'expand' / > ;
/ * *
* React component for selecting a device from a select element . Wraps Select
* with device selection specific logic .
* React component for selecting a device from a select element . Wraps
* AKDropdownMenu with device selection specific logic .
*
* @ extends Component
* /
@ -26,6 +30,11 @@ class DeviceSelector extends Component {
* /
hasPermission : React . PropTypes . bool ,
/ * *
* CSS class for the icon to the left of the dropdown trigger .
* /
icon : React . PropTypes . string ,
/ * *
* If true , will render the selector disabled with a default selection .
* /
@ -79,12 +88,12 @@ class DeviceSelector extends Component {
return this . _renderNoDevices ( ) ;
}
const items = this . props . devices . map ( this . _createSelect Item ) ;
const items = this . props . devices . map ( this . _createDropdown Item ) ;
const defaultSelected = items . find ( item =>
item . value === this . props . selectedDeviceId
) ;
return this . _createSelector ( {
return this . _createDropdown ( {
defaultSelected ,
isDisabled : this . props . isDisabled ,
items ,
@ -93,14 +102,44 @@ class DeviceSelector extends Component {
}
/ * *
* Creates an object in the format expected by Select for an option element .
* Creates an AtlasKit Button .
*
* @ param { string } buttonText - The text to display within the button .
* @ private
* @ returns { ReactElement }
* /
_createDropdownTrigger ( buttonText ) {
return (
< AKButton
className = 'device-selector-trigger'
iconAfter = { EXPAND _ICON }
iconBefore = { this . _createDropdownIcon ( ) } >
{ buttonText }
< / A K B u t t o n >
) ;
}
/ * *
* Creates a ReactComponent for displaying an icon .
*
* @ private
* @ returns { ReactElement }
* /
_createDropdownIcon ( ) {
return (
< span className = { ` device-selector-icon ${ this . props . icon } ` } / >
) ;
}
/ * *
* Creates an object in the format expected by AKDropdownMenu for an option .
*
* @ param { MediaDeviceInfo } device - An object with a label and a deviceId .
* @ private
* @ returns { Object } The passed in media device description converted to a
* format recognized as a valid Select item .
* format recognized as a valid AKDropdownMenu item .
* /
_createSelectItem ( device ) {
_createDropdown Item ( device ) {
return {
content : device . label ,
value : device . deviceId
@ -108,44 +147,49 @@ class DeviceSelector extends Component {
}
/ * *
* Creates a Select Component using passed in props and options .
* Creates a AKDropdownMenu Component using passed in props and options .
*
* @ param { Object } options - Additional configuration for display Select .
* @ param { Object } options - Additional configuration for display .
* @ param { Object } options . defaultSelected - The option that should be set
* as currently chosen .
* @ param { boolean } options . isDisabled - If true Select will not open on
* click .
* @ param { boolean } options . isDisabled - If true , AKDropdownMenu will not
* open on click .
* @ param { Array } options . items - All the selectable options to display .
* @ param { string } options . placeholder - The translation key to display when
* no selection has been made .
* @ private
* @ returns { ReactElement }
* /
_createSelector ( options ) {
_createDropdown ( options ) {
const triggerText
= ( options . defaultSelected && options . defaultSelected . content )
|| options . placeholder ;
return (
< Select
defaultSelected = { options . defaultSelected }
isDisabled = { options . isDisabled }
isFirstChild = { true }
< AKDropdownMenu
{ ... ( options . isDisabled && { isOpen : ! options . isDisabled } ) }
items = { [ { items : options . items || [ ] } ] }
label = { this . props . t ( this . props . label ) }
noMatchesFound
= { this . props . t ( 'deviceSelection.noOtherDevices' ) }
onSelec ted = { this . _onSelect }
placeholder = { this . props . t ( options . placeholder ) }
shouldFitContainer = { true } / >
onItemActiva ted = { this . _onSelect } >
{ this . _createDropdownTrigger ( triggerText ) }
< / A K D r o p d o w n M e n u >
) ;
}
/ * *
* Invokes the passed in callback to notify of selection changes .
*
* @ param { Object } selection - Event returned from Select .
* @ param { Object } selection - Event from choosing a AKDropdownMenu option .
* @ private
* @ returns { void }
* /
_onSelect ( selection ) {
this . props . onSelect ( selection . item . value ) ;
const newDeviceId = selection . item . value ;
if ( this . props . selectedDeviceId !== newDeviceId ) {
this . props . onSelect ( selection . item . value ) ;
}
}
/ * *
@ -156,23 +200,23 @@ class DeviceSelector extends Component {
* @ returns { ReactElement }
* /
_renderNoDevices ( ) {
return this . _createSelector ( {
return this . _createDropdown ( {
isDisabled : true ,
placeholder :
placeholder : this . props . t ( )
} ) ;
}
/ * *
* Creates a Select Component that is disabled and has a placeholder stating
* there is no permission to display the devices .
* Creates a AKDropdownMenu Component that is disabled and has a placeholder
* stating there is no permission to display the devices .
*
* @ private
* @ returns { ReactElement }
* /
_renderNoPermission ( ) {
return this . _createSelector ( {
return this . _createDropdown ( {
isDisabled : true ,
placeholder :
placeholder : this . props . t ( )
} ) ;
}
}
Leonard Kim
8 years ago
committed by