diff --git a/components/doc/multiselect/pt/ptdoc.js b/components/doc/multiselect/pt/ptdoc.js index 9027e70c2f..f51d2fc4d6 100644 --- a/components/doc/multiselect/pt/ptdoc.js +++ b/components/doc/multiselect/pt/ptdoc.js @@ -20,13 +20,23 @@ export function PTDoc(props) { onChange={(e) => setSelectedCities(e.value)} showClear={true} options={cities} + display="chip" optionLabel="name" placeholder="Select Cities" maxSelectedLabels={3} inputId="multiselect" pt={{ - root: { className: 'w-full md:w-14rem' }, - item: ({ context }) => ({ className: context.selected ? 'bg-blue-100' : undefined }) + root: { className: 'w-full md:w-20rem' }, + item: ({ context }) => ({ className: context.selected ? 'bg-blue-100' : undefined }), + token: ({ context }) => { + switch (context.value.code) { + case 'NY': + return 'bg-red-300'; + case 'RM': + return 'bg-green-300'; + } + return 'bg-gray-100'; + } }} /> `, @@ -51,13 +61,23 @@ export default function PTDemo() { onChange={(e) => setSelectedCities(e.value)} showClear={true} options={cities} + display="chip" optionLabel="name" placeholder="Select Cities" maxSelectedLabels={3} inputId="multiselect" pt={{ - root: { className: 'w-full md:w-14rem' }, - item: ({ context }) => ({ className: context.selected ? 'bg-blue-100' : undefined }) + root: { className: 'w-full md:w-20rem' }, + item: ({ context }) => ({ className: context.selected ? 'bg-blue-100' : undefined }), + token: ({ context }) => { + switch (context.value.code) { + case 'NY': + return 'bg-red-300'; + case 'RM': + return 'bg-green-300'; + } + return 'bg-gray-100'; + } }} /> @@ -90,13 +110,23 @@ export default function PTDemo() { onChange={(e: MultiSelectChangeEvent) => setSelectedCities(e.value)} showClear={true} options={cities} + display="chip" optionLabel="name" placeholder="Select Cities" maxSelectedLabels={3} inputId="multiselect" pt={{ - root: { className: 'w-full md:w-14rem' }, - item: ({ context }) => ({ className: context.selected ? 'bg-blue-100' : undefined }) + root: { className: 'w-full md:w-20rem' }, + item: ({ context }) => ({ className: context.selected ? 'bg-blue-100' : undefined }), + token: ({ context }) => { + switch (context.value.code) { + case 'NY': + return 'bg-red-300'; + case 'RM': + return 'bg-green-300'; + } + return 'bg-gray-100'; + } }} /> @@ -114,13 +144,24 @@ export default function PTDemo() { onChange={(e) => setSelectedCities(e.value)} showClear={true} options={cities} + display="chip" optionLabel="name" placeholder="Select Cities" maxSelectedLabels={3} inputId="multiselect" pt={{ - root: { className: 'w-full md:w-14rem' }, - item: ({ context }) => ({ className: context.selected ? 'bg-blue-100' : undefined }) + root: { className: 'w-full md:w-20rem' }, + item: ({ context }) => ({ className: context.selected ? 'bg-blue-100' : undefined }), + token: ({ context }) => { + switch (context.value.code) { + case 'NY': + return 'bg-red-300'; + case 'RM': + return 'bg-green-300'; + } + + return 'bg-gray-100'; + } }} /> diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js index 5582c33456..91b49de08a 100644 --- a/components/lib/multiselect/MultiSelect.js +++ b/components/lib/multiselect/MultiSelect.js @@ -837,6 +837,12 @@ export const MultiSelect = React.memo( const value = props.value.slice(0, props.maxSelectedLabels || props.value.length); return value.map((val, i) => { + const context = { + context: { + value: val, + index: i + } + }; const label = getLabelByValue(val); const iconProps = mergeProps( { @@ -844,7 +850,7 @@ export const MultiSelect = React.memo( className: cx('removeTokenIcon'), onClick: (e) => removeChip(e, val) }, - ptm('removeTokenIcon') + ptm('removeTokenIcon', context) ); const icon = !props.disabled && (props.removeIcon ? IconUtils.getJSXIcon(props.removeIcon, { ...iconProps }, { props }) : ); @@ -852,7 +858,7 @@ export const MultiSelect = React.memo( { className: cx('token') }, - ptm('token') + ptm('token', context) ); const tokenLabelProps = mergeProps( @@ -860,7 +866,7 @@ export const MultiSelect = React.memo( key: label + i, className: cx('tokenLabel') }, - ptm('tokenLabel') + ptm('tokenLabel', context) ); return ( diff --git a/components/lib/multiselect/MultiSelectBase.js b/components/lib/multiselect/MultiSelectBase.js index 9eb06ae3e7..24f640da70 100644 --- a/components/lib/multiselect/MultiSelectBase.js +++ b/components/lib/multiselect/MultiSelectBase.js @@ -237,6 +237,7 @@ export const MultiSelectBase = ComponentBase.extend({ itemCheckboxIcon: null, itemClassName: null, itemTemplate: null, + loading: false, maxSelectedLabels: null, name: null, onBlur: null,