[
], Dropdo
)
: this.renderTriggerButton(styles, rtl, getToggleButtonProps)}
- {Indicator.create(toggleIndicator, {
- defaultProps: {
- direction: isOpen ? 'top' : 'bottom',
- onClick: getToggleButtonProps().onClick,
- styles: styles.toggleIndicator,
- },
- })}
+ {showClearIndicator
+ ? Icon.create(clearIndicator, {
+ defaultProps: {
+ className: Dropdown.slotClassNames.clearIndicator,
+ styles: styles.clearIndicator,
+ xSpacing: 'none',
+ },
+ overrideProps: (predefinedProps: IconProps) => ({
+ onClick: (e, iconProps: IconProps) => {
+ _.invoke(predefinedProps, 'onClick', e, iconProps)
+ this.handleClear()
+ },
+ }),
+ })
+ : Indicator.create(toggleIndicator, {
+ defaultProps: {
+ direction: isOpen ? 'top' : 'bottom',
+ styles: styles.toggleIndicator,
+ },
+ overrideProps: (predefinedProps: IndicatorProps) => ({
+ onClick: (e, indicatorProps: IndicatorProps) => {
+ _.invoke(predefinedProps, 'onClick', e, indicatorProps)
+ getToggleButtonProps().onClick(e)
+ },
+ }),
+ })}
{this.renderItemsList(
styles,
variables,
@@ -392,7 +433,7 @@ class Dropdown extends AutoControlledComponent, Dropdo
const { searchQuery, value } = this.state
const noPlaceholder =
- searchQuery.length > 0 || (multiple && (value as ShorthandValue[]).length > 0)
+ searchQuery.length > 0 || (multiple && (value as ShorthandCollection).length > 0)
return DropdownSearchInput.create(searchInput || {}, {
defaultProps: {
@@ -510,7 +551,7 @@ class Dropdown extends AutoControlledComponent, Dropdo
private renderSelectedItems(variables, rtl: boolean) {
const { renderSelectedItem } = this.props
- const value = this.state.value as ShorthandValue[]
+ const value = this.state.value as ShorthandCollection
if (value.length === 0) {
return null
@@ -570,10 +611,10 @@ class Dropdown extends AutoControlledComponent, Dropdo
}
}
- private getItemsFilteredBySearchQuery = (): ShorthandValue[] => {
+ private getItemsFilteredBySearchQuery = (): ShorthandCollection => {
const { items, itemToString, multiple, search } = this.props
const { searchQuery, value } = this.state
- const filteredItems = multiple ? _.difference(items, value as ShorthandValue[]) : items
+ const filteredItems = multiple ? _.difference(items, value as ShorthandCollection) : items
if (search) {
if (_.isFunction(search)) {
@@ -627,7 +668,7 @@ class Dropdown extends AutoControlledComponent, Dropdo
this.handleSelectedItemRemove(e, item, predefinedProps, DropdownSelectedItemProps)
},
onClick: (e: React.SyntheticEvent, DropdownSelectedItemProps: DropdownSelectedItemProps) => {
- const { value } = this.state as { value: ShorthandValue[] }
+ const { value } = this.state as { value: ShorthandCollection }
this.trySetState({
activeSelectedIndex: value.indexOf(item),
})
@@ -729,7 +770,7 @@ class Dropdown extends AutoControlledComponent, Dropdo
) {
return
}
- const { value } = this.state as { value: ShorthandValue[] }
+ const { value } = this.state as { value: ShorthandCollection }
if (value.length > 0) {
this.trySetState({ activeSelectedIndex: value.length - 1 })
}
@@ -742,12 +783,21 @@ class Dropdown extends AutoControlledComponent, Dropdo
if (
multiple &&
(searchQuery === '' || this.inputRef.current.selectionStart === 0) &&
- (value as ShorthandValue[]).length > 0
+ (value as ShorthandCollection).length > 0
) {
this.removeItemFromValue()
}
}
+ private handleClear = () => {
+ const initialState = this.getInitialAutoControlledState(this.props)
+
+ this.setState({ value: initialState.value })
+
+ this.tryFocusSearchInput()
+ this.tryFocusTriggerButton()
+ }
+
private handleContainerClick = () => {
this.tryFocusSearchInput()
}
@@ -797,7 +847,7 @@ class Dropdown extends AutoControlledComponent, Dropdo
private handleSelectedChange = (item: ShorthandValue) => {
const { items, multiple, getA11ySelectionMessage } = this.props
const newState = {
- value: multiple ? [...(this.state.value as ShorthandValue[]), item] : item,
+ value: multiple ? [...(this.state.value as ShorthandCollection), item] : item,
searchQuery: this.getSelectedItemAsString(item),
}
@@ -834,7 +884,7 @@ class Dropdown extends AutoControlledComponent, Dropdo
) {
const { activeSelectedIndex, value } = this.state as {
activeSelectedIndex: number
- value: ShorthandValue[]
+ value: ShorthandCollection
}
const previousKey = rtl ? keyboardKey.ArrowRight : keyboardKey.ArrowLeft
const nextKey = rtl ? keyboardKey.ArrowLeft : keyboardKey.ArrowRight
@@ -894,7 +944,7 @@ class Dropdown extends AutoControlledComponent, Dropdo
private removeItemFromValue(item?: ShorthandValue) {
const { getA11ySelectionMessage } = this.props
- let value = this.state.value as ShorthandValue[]
+ let value = this.state.value as ShorthandCollection
let poppedItem = item
if (poppedItem) {
@@ -932,9 +982,8 @@ class Dropdown extends AutoControlledComponent, Dropdo
*/
private getSelectedItemAsString = (value: ShorthandValue): string => {
const { itemToString, multiple, placeholder } = this.props
- const isValueEmpty = _.isArray(value) ? value.length < 1 : !value
- if (isValueEmpty) {
+ if (this.isValueEmpty(value)) {
return placeholder
}
@@ -944,10 +993,15 @@ class Dropdown extends AutoControlledComponent, Dropdo
return itemToString(value)
}
+
+ private isValueEmpty = (value: ShorthandValue | ShorthandCollection) => {
+ return _.isArray(value) ? value.length < 1 : !value
+ }
}
Dropdown.slotClassNames = {
container: `${Dropdown.className}__container`,
+ clearIndicator: `${Dropdown.className}__clear-indicator`,
triggerButton: `${Dropdown.className}__trigger-button`,
itemsList: `${Dropdown.className}__items-list`,
selectedItems: `${Dropdown.className}__selected-items`,
diff --git a/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts b/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts
index 38c06c13ac..18d9ca09a9 100644
--- a/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts
+++ b/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts
@@ -1,4 +1,4 @@
-import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
+import { ComponentSlotStyle, ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
import { DropdownProps, DropdownState } from '../../../../components/Dropdown/Dropdown'
import { DropdownVariables } from './dropdownVariables'
import { pxToRem } from '../../../../lib'
@@ -21,6 +21,24 @@ const transparentColorStyleObj: ICSSInJSStyle = {
},
}
+const getIndicatorStyles: ComponentSlotStyle = ({
+ variables: v,
+}): ICSSInJSStyle => ({
+ alignItems: 'center',
+ display: 'flex',
+ justifyContent: 'center',
+
+ backgroundColor: 'transparent',
+ cursor: 'pointer',
+ userSelect: 'none',
+
+ margin: 0,
+ position: 'absolute',
+ right: pxToRem(5),
+ height: v.toggleIndicatorSize,
+ width: v.toggleIndicatorSize,
+})
+
const getWidth = (p: DropdownPropsAndState, v: DropdownVariables): string => {
if (p.fluid) {
return '100%'
@@ -40,6 +58,8 @@ const dropdownStyles: ComponentSlotStylesInput ({
display: 'flex',
flexWrap: 'wrap',
@@ -117,19 +137,7 @@ const dropdownStyles: ComponentSlotStylesInput ({
- position: 'absolute',
- height: v.toggleIndicatorSize,
- width: v.toggleIndicatorSize,
- cursor: 'pointer',
- backgroundColor: 'transparent',
- margin: 0,
- display: 'flex',
- justifyContent: 'center',
- alignItems: 'center',
- userSelect: 'none',
- right: pxToRem(5),
- }),
+ toggleIndicator: getIndicatorStyles,
}
export default dropdownStyles