fix: refactor chips delete callback handling

nexxtway · Jun 28, 2020 · 95fd79f · 95fd79f
1 parent f19835d
commit 95fd79f
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/src/components/MultiSelect/chips.js b/src/components/MultiSelect/chips.js
@@ -2,28 +2,30 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { StyledChip } from './styled';
 
-function Chips(props) {
+const Chips = props => {
     const { value, variant, onDelete, disabled, readOnly } = props;
+    const getDeleteCallback = val => {
+        return disabled || readOnly ? null : () => onDelete(val);
+    };
+
     if (!value) {
         return null;
     }
 
     if (Array.isArray(value)) {
         return value.map(val => {
-            const onDeleteCallback = disabled || readOnly ? null : () => onDelete(val);
             return (
                 <StyledChip
                     key={val.name}
                     label={val.label}
                     variant={variant}
-                    onDelete={onDeleteCallback}
+                    onDelete={getDeleteCallback(val)}
                 />
             );
         });
     }
-    const onDeleteCallback = disabled || readOnly ? null : () => onDelete(value);
-    return <StyledChip label={value.label} variant={variant} onDelete={onDeleteCallback} />;
-}
+    return <StyledChip label={value.label} variant={variant} onDelete={getDeleteCallback(value)} />;
+};
 
 Chips.propTypes = {
     value: PropTypes.oneOfType([

diff --git a/src/components/MultiSelect/content.js b/src/components/MultiSelect/content.js
@@ -6,7 +6,6 @@ import Chips from './chips';
 
 const Content = props => {
     const { variant, value, chipVariant, readOnly, disabled, onDelete } = props;
-    const onDeleteCallback = disabled || readOnly ? null : onDelete;
 
     if (variant === 'chip') {
         return (
@@ -15,7 +14,7 @@ const Content = props => {
                 variant={chipVariant}
                 readOnly={readOnly}
                 disabled={disabled}
-                onDelete={onDeleteCallback}
+                onDelete={onDelete}
             />
         );
     }