Fix #5935: Multiselect allow multi-color chips PT (#5936)

primefaces · Feb 10, 2024 · ad01273 · ad01273
1 parent d8aead8
commit ad01273
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 11 deletions.
diff --git 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';
+                    }
                 }}
             />
         </div>
@@ -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';
+                    }
                 }}
             />
         </div>
@@ -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';
+                        }
                     }}
                 />
             </div>

diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js
@@ -837,30 +837,36 @@ 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(
                             {
                                 key: i,
                                 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 }) : <TimesCircleIcon {...iconProps} />);
 
                         const tokenProps = mergeProps(
                             {
                                 className: cx('token')
                             },
-                            ptm('token')
+                            ptm('token', context)
                         );
 
                         const tokenLabelProps = mergeProps(
                             {
                                 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
@@ -237,6 +237,7 @@ export const MultiSelectBase = ComponentBase.extend({
         itemCheckboxIcon: null,
         itemClassName: null,
         itemTemplate: null,
+        loading: false,
         maxSelectedLabels: null,
         name: null,
         onBlur: null,