Fixed #2345 - Add removable property to Chips

primefaces · Nov 4, 2021 · eedb022 · eedb022
1 parent 2eb20fa
commit eedb022
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 2 deletions.
diff --git a/src/components/chips/Chips.d.ts b/src/components/chips/Chips.d.ts
@@ -1,6 +1,14 @@
 import * as React from 'react';
 import TooltipOptions from '../tooltip/tooltipoptions';
 
+type ChipsRemovableType = boolean | ((options: ChipsRemovableOptions) => boolean);
+
+interface ChipsRemovableOptions {
+    value: any;
+    index: number;
+    props: ChipsProps;
+}
+
 interface ChipsAddParams {
     originalEvent: React.SyntheticEvent;
     value: any;
@@ -30,6 +38,7 @@ export interface ChipsProps {
     value?: any[];
     max?: number;
     disabled?: boolean;
+    removable?: ChipsRemovableType;
     style?: object;
     className?: string;
     tooltip?: string;

diff --git a/src/components/chips/Chips.js b/src/components/chips/Chips.js
@@ -1,6 +1,6 @@
 import React, { Component, createRef } from 'react';
 import PropTypes from 'prop-types';
-import { classNames } from '../utils/Utils';
+import { classNames, ObjectUtils } from '../utils/Utils';
 import { tip } from '../tooltip/Tooltip';
 
 export class Chips extends Component {
@@ -13,6 +13,7 @@ export class Chips extends Component {
         value: null,
         max: null,
         disabled: null,
+        removable: true,
         style: null,
         className: null,
         tooltip: null,
@@ -36,6 +37,7 @@ export class Chips extends Component {
         value: PropTypes.array,
         max: PropTypes.number,
         disabled: PropTypes.bool,
+        removable: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
         style: PropTypes.object,
         className: PropTypes.string,
         tooltip: PropTypes.string,
@@ -75,6 +77,10 @@ export class Chips extends Component {
         let values = [...this.props.value];
         const removedItem = values.splice(index, 1);
 
+        if (!this.isRemovable(removedItem, index)) {
+            return;
+        }
+
         if (this.props.onRemove) {
             this.props.onRemove({
                 originalEvent: event,
@@ -216,6 +222,10 @@ export class Chips extends Component {
         return (this.props.value && this.props.value.length) || (this.inputRef && this.inputRef.current && this.inputRef.current.value && this.inputRef.current.value.length);
     }
 
+    isRemovable(value, index) {
+        return ObjectUtils.getPropValue(this.props.removable, { value, index, props: this.props })
+    }
+
     updateInputRef() {
         let ref = this.props.inputRef;
 
@@ -269,9 +279,19 @@ export class Chips extends Component {
         });
     }
 
+    renderRemoveIcon(value, index) {
+        if (!this.props.disabled && this.isRemovable(value, index)) {
+            return (
+                <span className="p-chips-token-icon pi pi-times-circle" onClick={(event) => this.removeItem(event, index)}></span>
+            )
+        }
+
+        return null;
+    }
+
     renderItem(value, index) {
         const content = this.props.itemTemplate ? this.props.itemTemplate(value) : value;
-        const icon = this.props.disabled ? null : <span className="p-chips-token-icon pi pi-times-circle" onClick={(event) => this.removeItem(event, index)}></span>;
+        const icon = this.renderRemoveIcon(value, index);
 
         return (
             <li key={index} className="p-chips-token p-highlight">

diff --git a/src/showcase/chips/ChipsDoc.js b/src/showcase/chips/ChipsDoc.js
@@ -267,6 +267,12 @@ customChip(item) {
                                         <td>false</td>
                                         <td>When present, it specifies that the element should be disabled.</td>
                                     </tr>
+                                    <tr>
+                                        <td>removable</td>
+                                        <td>boolean</td>
+                                        <td>true</td>
+                                        <td>Whether an item is removable.</td>
+                                    </tr>
                                     <tr>
                                         <td>style</td>
                                         <td>string</td>