tweak(Picker): allowing to pass custom tag options to selected items (#…

…1392)
livechat · Oct 10, 2024 · 4da057b · 4da057b
1 parent 1deea99
commit 4da057b
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 1 deletion.
diff --git a/packages/react-components/src/components/Picker/Picker.stories.tsx b/packages/react-components/src/components/Picker/Picker.stories.tsx
@@ -9,6 +9,7 @@ import {
   DEFAULT_PICKER_OPTIONS,
   DEFAULT_EXTENDED_OPTIONS,
   DEFAULT_MORE_PICKER_OPTIONS,
+  CUSTOM_ITEMS,
 } from './constants';
 import { Picker } from './Picker';
 import { IPickerListItem, IPickerProps } from './types';
@@ -293,3 +294,16 @@ export const PickerWithCustomSelectedItem = (): React.ReactElement => (
     </StoryDescriptor>
   </div>
 );
+
+export const MultiPickerWithCustomSelectedTagProps = (): React.ReactElement => (
+  <div style={{ ...commonWidth, marginBottom: 320 }}>
+    <StoryDescriptor title="Multi select + Custom option selected">
+      <PickerComponent
+        options={CUSTOM_ITEMS}
+        selected={CUSTOM_ITEMS}
+        onSelect={noop}
+        type="multi"
+      />
+    </StoryDescriptor>
+  </div>
+);
diff --git a/packages/react-components/src/components/Picker/components/PickerTriggerBody.tsx b/packages/react-components/src/components/Picker/components/PickerTriggerBody.tsx
@@ -190,6 +190,7 @@ export const PickerTriggerBody: React.FC<ITriggerBodyProps> = ({
                     e.stopPropagation();
                     onItemRemove(item.key);
                   }}
+                  {...item.selectedTagOptions}
                 >
                   {getSingleItem(item)}
                 </Tag>

diff --git a/...onents/src/components/Picker/constants.ts → ...nents/src/components/Picker/constants.tsx b/...onents/src/components/Picker/constants.ts → ...nents/src/components/Picker/constants.tsx
@@ -1,12 +1,40 @@
 import { DayMode } from '@livechat/design-system-icons';
 
+import { Icon } from '../Icon';
+import { TagKind } from '../Tag';
+
 import { IPickerListItem } from './types';
 
 export const ITEM_GAP_HEIGHT = 2;
 export const MIN_LIST_HEIGHT = 200;
 export const DEFAULT_LIST_HEIGHT = 400;
 
-export const DEFAULT_PICKER_OPTIONS = [
+export const CUSTOM_ITEMS: IPickerListItem[] = [
+  {
+    key: 'custom-option',
+    name: 'Gradient 01',
+    selectedTagOptions: {
+      kind: 'gradient01' as TagKind,
+    },
+  },
+  {
+    key: 'custom-option-2',
+    name: 'Gradient 02',
+    selectedTagOptions: {
+      kind: 'success' as TagKind,
+    },
+  },
+  {
+    key: 'custom-option-3',
+    name: 'Cyan',
+    selectedTagOptions: {
+      kind: 'error' as TagKind,
+      leftNode: <Icon source={DayMode} />,
+    },
+  },
+];
+
+export const DEFAULT_PICKER_OPTIONS: IPickerListItem[] = [
   { key: 'one', name: 'Option one' },
   { key: 'groupA', name: 'Group A title header', groupHeader: true },
   { key: 'two', name: 'Option two' },

diff --git a/packages/react-components/src/components/Picker/types.ts b/packages/react-components/src/components/Picker/types.ts
@@ -11,6 +11,7 @@ import { VirtuosoProps } from 'react-virtuoso';
 import { Size } from '../../utils';
 import { ComponentCoreProps } from '../../utils/types';
 import { IconSource } from '../Icon';
+import { TagProps } from '../Tag';
 
 export interface IPickerListItem {
   key: string;
@@ -25,6 +26,7 @@ export interface IPickerListItem {
   avatarSrc?: string;
   secondaryText?: string;
   showCheckbox?: boolean;
+  selectedTagOptions?: TagProps;
 }
 
 export type PickerType = 'single' | 'multi';