@@ -5,41 +5,41 @@ import { ToolbarContentContext, ToolbarContext } from './ToolbarUtils';
55import { PickOptional } from '../../helpers/typeUtils' ;
66import { Label , LabelGroup } from '../Label' ;
77
8- export interface ToolbarChipGroup {
9- /** A unique key to identify this chip group category */
8+ export interface ToolbarLabelGroup {
9+ /** A unique key to identify this label group category */
1010 key : string ;
11- /** The category name to display for the chip group */
11+ /** The category name to display for the label group */
1212 name : string ;
1313}
1414
15- export interface ToolbarChip {
16- /** A unique key to identify this chip */
15+ export interface ToolbarLabel {
16+ /** A unique key to identify this label */
1717 key : string ;
18- /** The ReactNode to display in the chip */
18+ /** The ReactNode to display in the label */
1919 node : React . ReactNode ;
2020}
2121
2222export interface ToolbarFilterProps extends ToolbarItemProps {
2323 /** Flag indicating when toolbar toggle group is expanded for non-managed toolbar toggle groups. */
2424 isExpanded ?: boolean ;
25- /** An array of strings to be displayed as chips in the expandable content */
26- chips ?: ( string | ToolbarChip ) [ ] ;
27- /** Callback passed by consumer used to close the entire chip group */
28- deleteChipGroup ?: ( category : string | ToolbarChipGroup ) => void ;
29- /** Callback passed by consumer used to delete a chip from the chips [] */
30- deleteChip ?: ( category : string | ToolbarChipGroup , chip : ToolbarChip | string ) => void ;
31- /** Customizable "Show Less" text string for the chip group */
32- chipGroupExpandedText ?: string ;
33- /** Customizeable template string for the chip group. Use variable "${remaining}" for the overflow chip count. */
34- chipGroupCollapsedText ?: string ;
35- /** Content to be rendered inside the data toolbar item associated with the chip group */
25+ /** An array of strings to be displayed as labels in the expandable content */
26+ labels ?: ( string | ToolbarLabel ) [ ] ;
27+ /** Callback passed by consumer used to close the entire label group */
28+ deleteLabelGroup ?: ( category : string | ToolbarLabelGroup ) => void ;
29+ /** Callback passed by consumer used to delete a label from the labels [] */
30+ deleteLabel ?: ( category : string | ToolbarLabelGroup , label : ToolbarLabel | string ) => void ;
31+ /** Customizable "Show Less" text string for the label group */
32+ labelGroupExpandedText ?: string ;
33+ /** Customizeable template string for the label group. Use variable "${remaining}" for the overflow label count. */
34+ labelGroupCollapsedText ?: string ;
35+ /** Content to be rendered inside the data toolbar item associated with the label group */
3636 children : React . ReactNode ;
37- /** Unique category name to be used as a label for the chip group */
38- categoryName : string | ToolbarChipGroup ;
37+ /** Unique category name to be used as a label for the label group */
38+ categoryName : string | ToolbarLabelGroup ;
3939 /** Flag to show the toolbar item */
4040 showToolbarItem ?: boolean ;
41- /** Reference to a chip container created with a custom expandable content group, for non-managed multiple toolbar toggle groups. */
42- expandableChipContainerRef ?: React . RefObject < HTMLDivElement > ;
41+ /** Reference to a label container created with a custom expandable content group, for non-managed multiple toolbar toggle groups. */
42+ expandableLabelContainerRef ?: React . RefObject < HTMLDivElement > ;
4343}
4444
4545interface ToolbarFilterState {
@@ -51,7 +51,7 @@ class ToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFilterSta
5151 static contextType = ToolbarContext ;
5252 context ! : React . ContextType < typeof ToolbarContext > ;
5353 static defaultProps : PickOptional < ToolbarFilterProps > = {
54- chips : [ ] as ( string | ToolbarChip ) [ ] ,
54+ labels : [ ] as ( string | ToolbarLabel ) [ ] ,
5555 showToolbarItem : true
5656 } ;
5757
@@ -63,65 +63,65 @@ class ToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFilterSta
6363 }
6464
6565 componentDidMount ( ) {
66- const { categoryName, chips } = this . props ;
66+ const { categoryName, labels } = this . props ;
6767 this . context . updateNumberFilters (
6868 typeof categoryName !== 'string' && categoryName . hasOwnProperty ( 'key' )
6969 ? categoryName . key
7070 : categoryName . toString ( ) ,
71- chips . length
71+ labels . length
7272 ) ;
7373 this . setState ( { isMounted : true } ) ;
7474 }
7575
7676 componentDidUpdate ( ) {
77- const { categoryName, chips } = this . props ;
77+ const { categoryName, labels } = this . props ;
7878 this . context . updateNumberFilters (
7979 typeof categoryName !== 'string' && categoryName . hasOwnProperty ( 'key' )
8080 ? categoryName . key
8181 : categoryName . toString ( ) ,
82- chips . length
82+ labels . length
8383 ) ;
8484 }
8585
8686 render ( ) {
8787 const {
8888 children,
89- chips ,
90- deleteChipGroup ,
91- deleteChip ,
92- chipGroupExpandedText ,
93- chipGroupCollapsedText ,
89+ labels ,
90+ deleteLabelGroup ,
91+ deleteLabel ,
92+ labelGroupExpandedText ,
93+ labelGroupCollapsedText ,
9494 categoryName,
9595 showToolbarItem,
9696 isExpanded,
97- expandableChipContainerRef ,
97+ expandableLabelContainerRef ,
9898 ...props
9999 } = this . props ;
100- const { isExpanded : managedIsExpanded , chipGroupContentRef } = this . context ;
100+ const { isExpanded : managedIsExpanded , labelGroupContentRef } = this . context ;
101101 const _isExpanded = isExpanded !== undefined ? isExpanded : managedIsExpanded ;
102102 const categoryKey =
103103 typeof categoryName !== 'string' && categoryName . hasOwnProperty ( 'key' )
104104 ? categoryName . key
105105 : categoryName . toString ( ) ;
106106
107- const chipGroup = chips . length ? (
108- < ToolbarItem variant = "chip -group" >
107+ const labelGroup = labels . length ? (
108+ < ToolbarItem variant = "label -group" >
109109 < LabelGroup
110110 key = { categoryKey }
111111 categoryName = { typeof categoryName === 'string' ? categoryName : categoryName . name }
112- isClosable = { deleteChipGroup !== undefined }
113- onClick = { ( ) => deleteChipGroup ( categoryName ) }
114- collapsedText = { chipGroupCollapsedText }
115- expandedText = { chipGroupExpandedText }
112+ isClosable = { deleteLabelGroup !== undefined }
113+ onClick = { ( ) => deleteLabelGroup ( categoryName ) }
114+ collapsedText = { labelGroupCollapsedText }
115+ expandedText = { labelGroupExpandedText }
116116 >
117- { chips . map ( ( chip ) =>
118- typeof chip === 'string' ? (
119- < Label variant = "outline" key = { chip } onClose = { ( ) => deleteChip ( categoryKey , chip ) } >
120- { chip }
117+ { labels . map ( ( label ) =>
118+ typeof label === 'string' ? (
119+ < Label variant = "outline" key = { label } onClose = { ( ) => deleteLabel ( categoryKey , label ) } >
120+ { label }
121121 </ Label >
122122 ) : (
123- < Label key = { chip . key } onClose = { ( ) => deleteChip ( categoryKey , chip ) } >
124- { chip . node }
123+ < Label key = { label . key } onClose = { ( ) => deleteLabel ( categoryKey , label ) } >
124+ { label . node }
125125 </ Label >
126126 )
127127 ) }
@@ -133,20 +133,20 @@ class ToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFilterSta
133133 return (
134134 < React . Fragment >
135135 { showToolbarItem && < ToolbarItem { ...props } > { children } </ ToolbarItem > }
136- { ReactDOM . createPortal ( chipGroup , chipGroupContentRef . current . firstElementChild ) }
136+ { ReactDOM . createPortal ( labelGroup , labelGroupContentRef . current . firstElementChild ) }
137137 </ React . Fragment >
138138 ) ;
139139 }
140140
141141 return (
142142 < ToolbarContentContext . Consumer >
143- { ( { chipContainerRef } ) => (
143+ { ( { labelContainerRef } ) => (
144144 < React . Fragment >
145145 { showToolbarItem && < ToolbarItem { ...props } > { children } </ ToolbarItem > }
146- { chipContainerRef . current && ReactDOM . createPortal ( chipGroup , chipContainerRef . current ) }
147- { expandableChipContainerRef &&
148- expandableChipContainerRef . current &&
149- ReactDOM . createPortal ( chipGroup , expandableChipContainerRef . current ) }
146+ { labelContainerRef . current && ReactDOM . createPortal ( labelGroup , labelContainerRef . current ) }
147+ { expandableLabelContainerRef &&
148+ expandableLabelContainerRef . current &&
149+ ReactDOM . createPortal ( labelGroup , expandableLabelContainerRef . current ) }
150150 </ React . Fragment >
151151 ) }
152152 </ ToolbarContentContext . Consumer >
0 commit comments