Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

Commit 476aa0c

Browse files
layershifterlayershifter
authored
refactor(Dropdown): rename DropdownLabel to DropdownSelectedItem (#725)
* add static * use correct type for predefined props * extract elements to variables * rename to DropdownSelectedItem * move upper * extract styles * add changelog entry * update classname * update section
1 parent 17575b9 commit 476aa0c

File tree

7 files changed

+74
-56
lines changed

7 files changed

+74
-56
lines changed

‎CHANGELOG.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
1717

1818
## [Unreleased]
1919

20+
### BREAKING
21+
- Rename `DropdownLabel` to `DropdownSelectedItem` and extract styles @layershifter ([#725](https://github.com/stardust-ui/react/pull/725))
22+
2023
### Documentation
2124
- Fix ignored initial state of knobs @layershifter ([#720](https://github.com/stardust-ui/react/pull/720))
2225
- Fix unclearable example's code @layershifter ([#720](https://github.com/stardust-ui/react/pull/720))

‎src/components/Dropdown/Dropdown.tsx

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ import Text from '../Text/Text'
3131
import Ref from '../Ref/Ref'
3232
import { UIComponentProps } from '../../lib/commonPropInterfaces'
3333
import DropdownItem from './DropdownItem'
34-
import DropdownLabel, { DropdownLabelProps } from './DropdownLabel'
34+
import DropdownSelectedItem, { DropdownSelectedItemProps } from './DropdownSelectedItem'
3535
import DropdownSearchInput, { DropdownSearchInputProps } from './DropdownSearchInput'
3636
import Button from '../Button/Button'
3737

@@ -70,7 +70,7 @@ export interface DropdownProps extends UIComponentProps<DropdownProps, DropdownS
7070
*/
7171
getA11yStatusMessage?: (options: A11yStatusMessageOptions<ShorthandValue>) => string
7272

73-
/** Array of props for generating list options (Dropdown.Item[]) and selected item labels(Dropdown.Label[]), if it's a multiple selection. */
73+
/** Array of props for generating list options (Dropdown.Item[]) and selected item labels(Dropdown.SelectedItem[]), if it's a multiple selection. */
7474
items?: ShorthandValue[]
7575

7676
/**
@@ -191,8 +191,8 @@ export default class Dropdown extends AutoControlledComponent<
191191
static autoControlledProps = ['searchQuery', 'value']
192192

193193
static Item = DropdownItem
194-
static Label = DropdownLabel
195194
static SearchInput = DropdownSearchInput
195+
static SelectedItem = DropdownSelectedItem
196196

197197
getInitialAutoControlledState({ multiple, search }: DropdownProps): DropdownState {
198198
return {
@@ -252,7 +252,7 @@ export default class Dropdown extends AutoControlledComponent<
252252
className={classes.container}
253253
onClick={multiple ? this.handleContainerClick.bind(this, isOpen) : undefined}
254254
>
255-
{multiple && this.renderSelectedItems(styles)}
255+
{multiple && this.renderSelectedItems()}
256256
{search
257257
? this.renderSearchInput(
258258
accessibilityRootPropsRest,
@@ -442,23 +442,22 @@ export default class Dropdown extends AutoControlledComponent<
442442
]
443443
}
444444

445-
private renderSelectedItems(styles: ComponentSlotStylesInput) {
445+
private renderSelectedItems() {
446446
const value = this.state.value as ShorthandValue[]
447447

448448
if (value.length === 0) {
449449
return null
450450
}
451451

452452
return value.map(item =>
453-
DropdownLabel.create(item, {
453+
DropdownSelectedItem.create(item, {
454454
defaultProps: {
455-
styles: styles.label,
456455
...(typeof item === 'object' &&
457456
!item.hasOwnProperty('key') && {
458457
key: (item as any).header,
459458
}),
460459
},
461-
overrideProps: (predefinedProps: DropdownLabelProps) =>
460+
overrideProps: (predefinedProps: DropdownSelectedItemProps) =>
462461
this.handleSelectedItemOverrides(predefinedProps, item),
463462
}),
464463
)
@@ -552,16 +551,16 @@ export default class Dropdown extends AutoControlledComponent<
552551
})
553552

554553
private handleSelectedItemOverrides = (
555-
predefinedProps: DropdownLabelProps,
554+
predefinedProps: DropdownSelectedItemProps,
556555
item: ShorthandValue,
557556
) => ({
558-
onRemove: (e: React.SyntheticEvent, dropdownLabelProps: DropdownLabelProps) => {
557+
onRemove: (e: React.SyntheticEvent, DropdownSelectedItemProps: DropdownSelectedItemProps) => {
559558
this.handleSelectedItemRemove(e, item)
560-
_.invoke(predefinedProps, 'onRemove', e, dropdownLabelProps)
559+
_.invoke(predefinedProps, 'onRemove', e, DropdownSelectedItemProps)
561560
},
562-
onClick: (e: React.SyntheticEvent, dropdownLabelProps: DropdownLabelProps) => {
561+
onClick: (e: React.SyntheticEvent, DropdownSelectedItemProps: DropdownSelectedItemProps) => {
563562
e.stopPropagation()
564-
_.invoke(predefinedProps, 'onClick', e, dropdownLabelProps)
563+
_.invoke(predefinedProps, 'onClick', e, DropdownSelectedItemProps)
565564
},
566565
})
567566

‎src/components/Dropdown/DropdownLabel.tsx renamed to ‎src/components/Dropdown/DropdownSelectedItem.tsx

Lines changed: 44 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {
1515
import { Image, Icon, Label } from '../..'
1616
import { IconProps } from '../Icon/Icon'
1717

18-
export interface DropdownLabelProps extends UIComponentProps<DropdownLabelProps> {
18+
export interface DropdownSelectedItemProps extends UIComponentProps<DropdownSelectedItemProps> {
1919
/** Header of the selected item. */
2020
header?: string
2121

@@ -31,27 +31,27 @@ export interface DropdownLabelProps extends UIComponentProps<DropdownLabelProps>
3131
* @param {SyntheticEvent} event - React's original SyntheticEvent.
3232
* @param {object} data - All props and proposed value.
3333
*/
34-
onClick?: ComponentEventHandler<DropdownLabelProps>
34+
onClick?: ComponentEventHandler<DropdownSelectedItemProps>
3535

3636
/**
3737
* Called when item is removed from the selection list.
3838
*
3939
* @param {SyntheticEvent} event - React's original SyntheticEvent.
4040
* @param {object} data - All props and proposed value.
4141
*/
42-
onRemove?: ComponentEventHandler<DropdownLabelProps>
42+
onRemove?: ComponentEventHandler<DropdownSelectedItemProps>
4343
}
4444

4545
/**
46-
* A DropdownLabel is a sub-component of a multiple selection Dropdown.
46+
* A DropdownSelectedItem is a sub-component of a multiple selection Dropdown.
4747
* It is used to display selected item.
4848
*/
49-
class DropdownLabel extends UIComponent<ReactProps<DropdownLabelProps>, any> {
50-
displayName = 'DropdownLabel'
49+
class DropdownSelectedItem extends UIComponent<ReactProps<DropdownSelectedItemProps>, any> {
50+
static displayName = 'DropdownSelectedItem'
5151

5252
static create: Function
5353

54-
className = 'ui-dropdown__label'
54+
static className = 'ui-dropdown__selected-item'
5555

5656
static propTypes = {
5757
...commonPropTypes.createCommon({
@@ -72,35 +72,7 @@ class DropdownLabel extends UIComponent<ReactProps<DropdownLabelProps>, any> {
7272
_.invoke(this.props, 'onClick', e, this.props)
7373
}
7474

75-
public renderComponent({ unhandledProps, styles }: RenderResultConfig<DropdownLabelProps>) {
76-
const { header, icon, image } = this.props
77-
78-
return (
79-
<Label
80-
styles={styles.root}
81-
role="presentation"
82-
circular
83-
onClick={this.handleClick}
84-
content={header}
85-
icon={Icon.create(icon, {
86-
defaultProps: {
87-
'aria-label': `Remove ${header} from selection.`, // TODO: Extract this in a behaviour.
88-
'aria-hidden': false,
89-
role: 'button',
90-
},
91-
overrideProps: this.handleIconOverrides,
92-
})}
93-
image={Image.create(image, {
94-
defaultProps: {
95-
avatar: true,
96-
},
97-
})}
98-
{...unhandledProps}
99-
/>
100-
)
101-
}
102-
103-
private handleIconOverrides = (predefinedProps: DropdownLabelProps) => ({
75+
private handleIconOverrides = (predefinedProps: IconProps) => ({
10476
onClick: (e: React.SyntheticEvent, iconProps: IconProps) => {
10577
e.stopPropagation()
10678
_.invoke(this.props, 'onRemove', e, this.props)
@@ -114,8 +86,42 @@ class DropdownLabel extends UIComponent<ReactProps<DropdownLabelProps>, any> {
11486
_.invoke(predefinedProps, 'onKeyDown', e, iconProps)
11587
},
11688
})
89+
90+
public renderComponent({
91+
unhandledProps,
92+
styles,
93+
}: RenderResultConfig<DropdownSelectedItemProps>) {
94+
const { header, icon, image } = this.props
95+
96+
const iconElement = Icon.create(icon, {
97+
defaultProps: {
98+
'aria-label': `Remove ${header} from selection.`, // TODO: Extract this in a behaviour.
99+
'aria-hidden': false,
100+
role: 'button',
101+
},
102+
overrideProps: this.handleIconOverrides,
103+
})
104+
const imageElement = Image.create(image, {
105+
defaultProps: {
106+
avatar: true,
107+
},
108+
})
109+
110+
return (
111+
<Label
112+
styles={styles.root}
113+
role="presentation"
114+
circular
115+
onClick={this.handleClick}
116+
content={header}
117+
icon={iconElement}
118+
image={imageElement}
119+
{...unhandledProps}
120+
/>
121+
)
122+
}
117123
}
118124

119-
DropdownLabel.create = createShorthandFactory(DropdownLabel, 'header')
125+
DropdownSelectedItem.create = createShorthandFactory(DropdownSelectedItem, 'header')
120126

121-
export default DropdownLabel
127+
export default DropdownSelectedItem

‎src/index.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,10 @@ export {
3737

3838
export { default as DropdownItem, DropdownItemProps } from './components/Dropdown/DropdownItem'
3939

40-
export { default as DropdownLabel, DropdownLabelProps } from './components/Dropdown/DropdownLabel'
40+
export {
41+
default as DropdownSelectedItem,
42+
DropdownSelectedItemProps,
43+
} from './components/Dropdown/DropdownSelectedItem'
4144

4245
export {
4346
default as DropdownSearchInput,

‎src/themes/teams/componentStyles.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export { default as Divider } from './components/Divider/dividerStyles'
1717

1818
export { default as Dropdown } from './components/Dropdown/dropdownStyles'
1919
export { default as DropdownSearchInput } from './components/Dropdown/dropdownSearchInputStyles'
20+
export { default as DropdownSelectedItem } from './components/Dropdown/dropdownSelectedItemStyles'
2021
export { default as DropdownItem } from './components/Dropdown/dropdownItemStyles'
2122

2223
export { default as Form } from './components/Form/formStyles'

‎src/themes/teams/components/Dropdown/dropdownSelectedItemStyles.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { DropdownSelectedItemProps } from '../../../../components/Dropdown/DropdownSelectedItem'
2+
import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
3+
4+
const dropdownSelectedItemStyles: ComponentSlotStylesInput<DropdownSelectedItemProps> = {
5+
root: (): ICSSInJSStyle => ({
6+
margin: '.4rem 0 0 .4rem',
7+
}),
8+
}
9+
10+
export default dropdownSelectedItemStyles

‎src/themes/teams/components/Dropdown/dropdownStyles.ts

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -60,10 +60,6 @@ const dropdownStyles: ComponentSlotStylesInput<DropdownProps, DropdownVariables>
6060
}
6161
},
6262

63-
label: (): ICSSInJSStyle => ({
64-
margin: '.4rem 0 0 .4rem',
65-
}),
66-
6763
list: ({
6864
variables: { listMaxHeight, width, listBackgroundColor },
6965
props: { fluid },

0 commit comments

Comments
 (0)