diff --git a/CHANGELOG.md b/CHANGELOG.md index 7d2384262c..bf5613b206 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ## [Unreleased] +### BREAKING +- Rename `DropdownLabel` to `DropdownSelectedItem` and extract styles @layershifter ([#725](https://github.com/stardust-ui/react/pull/725)) + ### Documentation - Fix ignored initial state of knobs @layershifter ([#720](https://github.com/stardust-ui/react/pull/720)) - Fix unclearable example's code @layershifter ([#720](https://github.com/stardust-ui/react/pull/720)) diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx index 5791c740bb..1a0080ec5c 100644 --- a/src/components/Dropdown/Dropdown.tsx +++ b/src/components/Dropdown/Dropdown.tsx @@ -31,7 +31,7 @@ import Text from '../Text/Text' import Ref from '../Ref/Ref' import { UIComponentProps } from '../../lib/commonPropInterfaces' import DropdownItem from './DropdownItem' -import DropdownLabel, { DropdownLabelProps } from './DropdownLabel' +import DropdownSelectedItem, { DropdownSelectedItemProps } from './DropdownSelectedItem' import DropdownSearchInput, { DropdownSearchInputProps } from './DropdownSearchInput' import Button from '../Button/Button' @@ -70,7 +70,7 @@ export interface DropdownProps extends UIComponentProps) => string - /** Array of props for generating list options (Dropdown.Item[]) and selected item labels(Dropdown.Label[]), if it's a multiple selection. */ + /** Array of props for generating list options (Dropdown.Item[]) and selected item labels(Dropdown.SelectedItem[]), if it's a multiple selection. */ items?: ShorthandValue[] /** @@ -191,8 +191,8 @@ export default class Dropdown extends AutoControlledComponent< static autoControlledProps = ['searchQuery', 'value'] static Item = DropdownItem - static Label = DropdownLabel static SearchInput = DropdownSearchInput + static SelectedItem = DropdownSelectedItem getInitialAutoControlledState({ multiple, search }: DropdownProps): DropdownState { return { @@ -252,7 +252,7 @@ export default class Dropdown extends AutoControlledComponent< className={classes.container} onClick={multiple ? this.handleContainerClick.bind(this, isOpen) : undefined} > - {multiple && this.renderSelectedItems(styles)} + {multiple && this.renderSelectedItems()} {search ? this.renderSearchInput( accessibilityRootPropsRest, @@ -442,7 +442,7 @@ export default class Dropdown extends AutoControlledComponent< ] } - private renderSelectedItems(styles: ComponentSlotStylesInput) { + private renderSelectedItems() { const value = this.state.value as ShorthandValue[] if (value.length === 0) { @@ -450,15 +450,14 @@ export default class Dropdown extends AutoControlledComponent< } return value.map(item => - DropdownLabel.create(item, { + DropdownSelectedItem.create(item, { defaultProps: { - styles: styles.label, ...(typeof item === 'object' && !item.hasOwnProperty('key') && { key: (item as any).header, }), }, - overrideProps: (predefinedProps: DropdownLabelProps) => + overrideProps: (predefinedProps: DropdownSelectedItemProps) => this.handleSelectedItemOverrides(predefinedProps, item), }), ) @@ -552,16 +551,16 @@ export default class Dropdown extends AutoControlledComponent< }) private handleSelectedItemOverrides = ( - predefinedProps: DropdownLabelProps, + predefinedProps: DropdownSelectedItemProps, item: ShorthandValue, ) => ({ - onRemove: (e: React.SyntheticEvent, dropdownLabelProps: DropdownLabelProps) => { + onRemove: (e: React.SyntheticEvent, DropdownSelectedItemProps: DropdownSelectedItemProps) => { this.handleSelectedItemRemove(e, item) - _.invoke(predefinedProps, 'onRemove', e, dropdownLabelProps) + _.invoke(predefinedProps, 'onRemove', e, DropdownSelectedItemProps) }, - onClick: (e: React.SyntheticEvent, dropdownLabelProps: DropdownLabelProps) => { + onClick: (e: React.SyntheticEvent, DropdownSelectedItemProps: DropdownSelectedItemProps) => { e.stopPropagation() - _.invoke(predefinedProps, 'onClick', e, dropdownLabelProps) + _.invoke(predefinedProps, 'onClick', e, DropdownSelectedItemProps) }, }) diff --git a/src/components/Dropdown/DropdownLabel.tsx b/src/components/Dropdown/DropdownSelectedItem.tsx similarity index 65% rename from src/components/Dropdown/DropdownLabel.tsx rename to src/components/Dropdown/DropdownSelectedItem.tsx index 33954a8207..2978208f94 100644 --- a/src/components/Dropdown/DropdownLabel.tsx +++ b/src/components/Dropdown/DropdownSelectedItem.tsx @@ -15,7 +15,7 @@ import { import { Image, Icon, Label } from '../..' import { IconProps } from '../Icon/Icon' -export interface DropdownLabelProps extends UIComponentProps { +export interface DropdownSelectedItemProps extends UIComponentProps { /** Header of the selected item. */ header?: string @@ -31,7 +31,7 @@ export interface DropdownLabelProps extends UIComponentProps * @param {SyntheticEvent} event - React's original SyntheticEvent. * @param {object} data - All props and proposed value. */ - onClick?: ComponentEventHandler + onClick?: ComponentEventHandler /** * Called when item is removed from the selection list. @@ -39,19 +39,19 @@ export interface DropdownLabelProps extends UIComponentProps * @param {SyntheticEvent} event - React's original SyntheticEvent. * @param {object} data - All props and proposed value. */ - onRemove?: ComponentEventHandler + onRemove?: ComponentEventHandler } /** - * A DropdownLabel is a sub-component of a multiple selection Dropdown. + * A DropdownSelectedItem is a sub-component of a multiple selection Dropdown. * It is used to display selected item. */ -class DropdownLabel extends UIComponent, any> { - displayName = 'DropdownLabel' +class DropdownSelectedItem extends UIComponent, any> { + static displayName = 'DropdownSelectedItem' static create: Function - className = 'ui-dropdown__label' + static className = 'ui-dropdown__selected-item' static propTypes = { ...commonPropTypes.createCommon({ @@ -72,35 +72,7 @@ class DropdownLabel extends UIComponent, any> { _.invoke(this.props, 'onClick', e, this.props) } - public renderComponent({ unhandledProps, styles }: RenderResultConfig) { - const { header, icon, image } = this.props - - return ( -