[PickerInput]: fixed '+N' toggler tag tooltip content with custom `ge…

…tName` callback
epam · Jul 22, 2024 · c3d6060 · c3d6060
1 parent 9c1e1c8
commit c3d6060
Show file tree

Hide file tree

Showing 23 changed files with 67 additions and 21 deletions.
diff --git a/app/src/docs/_examples/pickerInput/ArrayPickerInput.example.tsx b/app/src/docs/_examples/pickerInput/ArrayPickerInput.example.tsx
@@ -30,6 +30,7 @@ export default function ArrayPickerInputExample() {
                     selectionMode="multi"
                     valueType="id"
                     sorting={ { field: 'level', direction: 'asc' } }
+                    maxItems={ 3 }
                 />
                 <PickerInput
                     dataSource={ dataSource }

diff --git a/app/src/docs/_examples/pickerInput/AsyncPickerInput.example.tsx b/app/src/docs/_examples/pickerInput/AsyncPickerInput.example.tsx
@@ -24,6 +24,7 @@ export default function AsyncPickerInputExample() {
                 entityName="location"
                 selectionMode="multi"
                 valueType="id"
+                maxItems={ 3 }
             />
         </FlexCell>
     );

diff --git a/app/src/docs/_examples/pickerInput/CascadeSelectionModes.example.tsx b/app/src/docs/_examples/pickerInput/CascadeSelectionModes.example.tsx
@@ -46,6 +46,7 @@ export default function CascadeSelectionModesExample() {
                 entityName="location"
                 selectionMode="multi"
                 valueType="id"
+                maxItems={ 3 }
                 cascadeSelection={ cascadeSelection }
             />
         </FlexCell>

diff --git a/app/src/docs/_examples/pickerInput/ConfigurePortalTargetAndPlacement.example.tsx b/app/src/docs/_examples/pickerInput/ConfigurePortalTargetAndPlacement.example.tsx
@@ -38,6 +38,7 @@ export default function ConfigurePortalTargetAndPlacement() {
                             selectionMode="multi"
                             valueType="id"
                             dropdownPlacement="right-start"
+                            maxItems={ 3 }
                             portalTarget={ portalTargetRef.current }
                         />
                     </FlexCell>

diff --git a/...kerInput/PickerTogglerTagDemo.example.tsx → ...rInput/CustomPickerTogglerTag.example.tsx b/...kerInput/PickerTogglerTagDemo.example.tsx → ...rInput/CustomPickerTogglerTag.example.tsx
@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
 import { DataQueryFilter, useLazyDataSource, useUuiContext } from '@epam/uui-core';
-import { FlexCell, PickerInput, PickerTogglerTag, PickerTogglerTagProps, Tooltip } from '@epam/uui';
+import { FlexCell, PickerInput, PickerTogglerTag, Tooltip } from '@epam/uui';
+import { PickerTogglerRenderItemParams } from '@epam/uui-components';
 import { Location } from '@epam/uui-docs';
 
-export default function PickerTogglerTagDemoExample() {
+export default function CustomPickerTogglerTagExample() {
     const svc = useUuiContext();
-    const [value, onValueChange] = useState<string[]>(['225284', '2747351', '3119841', '3119746']);
+    const [value, onValueChange] = useState<string[]>(['625144', '703448', '756135', '2950159', '4717560']);
 
     const dataSource = useLazyDataSource<Location, string, DataQueryFilter<Location>>(
         {
@@ -23,20 +24,20 @@ export default function PickerTogglerTagDemoExample() {
         [],
     );
 
-    const renderTag = (props: PickerTogglerTagProps<Location, string>) => {
+    const renderTag = (props: PickerTogglerRenderItemParams<Location, string>) => {
         const { isCollapsed, rowProps } = props;
 
         if (isCollapsed) {
             // rendering '+ N items selected' Tag, tooltip is present here by default
-            return <PickerTogglerTag { ...props } key="collapsed" />;
+            return <PickerTogglerTag { ...props } key="collapsed" getName={ (i) => i?.name } />;
         } else {
             // rendering all other Tags with Tooltip
             const continent = rowProps?.value?.tz ? rowProps?.value?.tz.split('/')[0].concat('/') : '';
             const country = rowProps?.value?.countryName ? rowProps?.value?.countryName.concat('/') : '';
             const tooltipContent = `${continent}${country}${props.caption}`;
             return (
                 <Tooltip key={ props.rowProps?.id } content={ tooltipContent }>
-                    <PickerTogglerTag { ...props } />
+                    <PickerTogglerTag { ...props } getName={ (i) => i?.name } />
                 </Tooltip>
             );
         }

diff --git a/app/src/docs/_examples/pickerInput/CustomUserRow.example.tsx b/app/src/docs/_examples/pickerInput/CustomUserRow.example.tsx
@@ -38,6 +38,7 @@ export default function LazyPersonsMultiPickerWithCustomUserRow() {
                 entityName="person"
                 selectionMode="multi"
                 valueType="id"
+                maxItems={ 3 }
             />
         </FlexCell>
     );

diff --git a/app/src/docs/_examples/pickerInput/EditMode.example.tsx b/app/src/docs/_examples/pickerInput/EditMode.example.tsx
@@ -15,7 +15,16 @@ export default function EditModePickerExample() {
 
     return (
         <FlexCell width={ 300 }>
-            <PickerInput dataSource={ dataSource } value={ value } onValueChange={ onValueChange } entityName="person" selectionMode="multi" valueType="id" editMode="modal" />
+            <PickerInput
+                dataSource={ dataSource }
+                value={ value }
+                onValueChange={ onValueChange }
+                entityName="person"
+                selectionMode="multi"
+                valueType="id"
+                editMode="modal"
+                maxItems={ 3 }
+            />
         </FlexCell>
     );
 }
diff --git a/app/src/docs/_examples/pickerInput/GetRowOptions.example.tsx b/app/src/docs/_examples/pickerInput/GetRowOptions.example.tsx
@@ -53,6 +53,7 @@ export default function GetRowOptionsExample() {
                     entityName="Product"
                     selectionMode="multi"
                     valueType="id"
+                    maxItems={ 3 }
                 />
             </FlexRow>
         </FlexCell>

diff --git a/app/src/docs/_examples/pickerInput/LazyPickerInput.example.tsx b/app/src/docs/_examples/pickerInput/LazyPickerInput.example.tsx
@@ -15,7 +15,15 @@ export default function LazyPersonsMultiPicker() {
 
     return (
         <FlexCell width={ 300 }>
-            <PickerInput dataSource={ dataSource } value={ value } onValueChange={ onValueChange } entityName="person" selectionMode="multi" valueType="id" />
+            <PickerInput
+                dataSource={ dataSource }
+                value={ value }
+                onValueChange={ onValueChange }
+                entityName="person"
+                selectionMode="multi"
+                valueType="id"
+                maxItems={ 3 }
+            />
         </FlexCell>
     );
 }
diff --git a/app/src/docs/_examples/pickerInput/LazyTreeInput.example.tsx b/app/src/docs/_examples/pickerInput/LazyTreeInput.example.tsx
@@ -31,6 +31,7 @@ export default function LazyTreePicker() {
                 selectionMode="multi"
                 valueType="id"
                 cascadeSelection="implicit"
+                maxItems={ 3 }
             />
         </FlexCell>
     );

diff --git a/app/src/docs/_examples/pickerInput/LazyTreeSearch.example.tsx b/app/src/docs/_examples/pickerInput/LazyTreeSearch.example.tsx
@@ -56,6 +56,7 @@ export default function LazyTreeSearch() {
                     entityName="location"
                     selectionMode="multi"
                     valueType="id"
+                    maxItems={ 3 }
                     placeholder="Flatten search results"
                 />
                 <PickerInput
@@ -65,6 +66,7 @@ export default function LazyTreeSearch() {
                     entityName="location"
                     selectionMode="multi"
                     valueType="id"
+                    maxItems={ 3 }
                     placeholder="Tree search results"
                 />
             </FlexRow>

diff --git a/app/src/docs/_examples/pickerInput/LinkedPickers.example.tsx b/app/src/docs/_examples/pickerInput/LinkedPickers.example.tsx
@@ -44,6 +44,7 @@ export default function ArrayLinkedPickers() {
                     entityName="City"
                     selectionMode="multi"
                     valueType="id"
+                    maxItems={ 3 }
                     filter={ { country: country?.id } } // Your filter object, which will be send to the server
                 />
             </LabeledInput>

diff --git a/app/src/docs/_examples/pickerInput/PickerInputTurnOffSelectAll.example.tsx b/app/src/docs/_examples/pickerInput/PickerInputTurnOffSelectAll.example.tsx
@@ -26,6 +26,7 @@ export default function AsyncPickerInputExample() {
                 entityName="location"
                 selectionMode="multi"
                 valueType="id"
+                maxItems={ 3 }
             />
         </FlexCell>
     );

diff --git a/app/src/docs/_examples/pickerInput/PickerInputWithCustomFooter.example.tsx b/app/src/docs/_examples/pickerInput/PickerInputWithCustomFooter.example.tsx
@@ -38,6 +38,7 @@ export default function PickerInputWithCustomFooter() {
                     selectionMode="single"
                     valueType="id"
                     sorting={ { field: 'level', direction: 'asc' } }
+                    maxItems={ 3 }
                     renderFooter={ () => {
                         return (
                             <FlexRow padding="12">

diff --git a/app/src/docs/_examples/pickerInput/SearchPositions.example.tsx b/app/src/docs/_examples/pickerInput/SearchPositions.example.tsx
@@ -25,6 +25,7 @@ export default function SearchPositionsExample() {
                     onValueChange={ onValueChange }
                     entityName="person"
                     selectionMode="multi"
+                    maxItems={ 3 }
                     searchPosition="input"
                     valueType="id"
                 />
@@ -36,6 +37,7 @@ export default function SearchPositionsExample() {
                     onValueChange={ onValueChange }
                     entityName="person"
                     selectionMode="multi"
+                    maxItems={ 3 }
                     searchPosition="none"
                     valueType="id"
                 />

diff --git a/app/src/docs/_examples/pickerInput/TogglerConfiguration.example.tsx b/app/src/docs/_examples/pickerInput/TogglerConfiguration.example.tsx
@@ -6,9 +6,7 @@ import css from './TogglerConfiguration.module.scss';
 
 export default function PickerTogglerConfigurationExample() {
     const svc = useUuiContext();
-    const [value, onValueChange] = useState<string[]>([
-        '225284', '2747351', '3119841', '3119746',
-    ]);
+    const [value, onValueChange] = useState<string[]>(['625144', '703448', '756135', '2950159']);
 
     const loadCities = useCallback((request: LazyDataSourceApiRequest<City, string>) => {
         return svc.api.demo.cities(request);

diff --git a/app/src/docs/_examples/pickerInput/ValueType.example.tsx b/app/src/docs/_examples/pickerInput/ValueType.example.tsx
@@ -23,6 +23,7 @@ export default function ValueTypeExamplePicker() {
                 selectionMode="multi"
                 emptyValue={ [] }
                 valueType="entity"
+                maxItems={ 3 }
             />
             <Text>
                 Selected users:

diff --git a/app/src/docs/pickerInput/PickerInput.doc.tsx b/app/src/docs/pickerInput/PickerInput.doc.tsx
@@ -85,7 +85,7 @@ export class PickerInputDoc extends BaseDocsBlock {
                 <DocExample title="Picker with changed array of items" path="./_examples/pickerInput/PickerWithChangingItemsArray.example.tsx" />
                 <DocExample title="Linked pickers" path="./_examples/pickerInput/LinkedPickers.example.tsx" />
                 <DocExample title="Change portal target and dropdown placement" path="./_examples/pickerInput/ConfigurePortalTargetAndPlacement.example.tsx" />
-                <DocExample title="Custom toggler tag render" path="./_examples/pickerInput/PickerTogglerTagDemo.example.tsx" />
+                <DocExample title="Custom toggler tag render" path="./_examples/pickerInput/CustomPickerTogglerTag.example.tsx" />
             </>
         );
     }

diff --git a/app/src/docs/pickerInput/pickerInputExamples.tsx b/app/src/docs/pickerInput/pickerInputExamples.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import * as uui from '@epam/uui';
-import { PickerTogglerTag, PickerTogglerTagProps, Tooltip } from '@epam/uui';
+import { PickerInputProps, PickerTogglerTag, Tooltip } from '@epam/uui';
+import { PickerTogglerRenderItemParams } from '@epam/uui-components';
+import { IPropSamplesCreationContext } from '@epam/uui-docs';
 
 type TRenderTogglerParam = Parameters<uui.PickerInputProps<any, any>['renderToggler']>[0];
 
@@ -25,20 +27,20 @@ export const renderTogglerExamples = [
     },
 ];
 
-export const renderTagExamples = [
+export const renderTagExamples = (ctx: IPropSamplesCreationContext<PickerInputProps<any, any>>) => [
     {
-        value: (props: PickerTogglerTagProps<any, any>) => {
+        value: (props: PickerTogglerRenderItemParams<any, any>) => {
             if (props.isCollapsed) {
                 // rendering '+ N items selected' Tag, tooltip is present here by default
-                return <PickerTogglerTag { ...props } key="collapsed" />;
+                return <PickerTogglerTag { ...props } key="collapsed" getName={ (i) => ctx.getSelectedProps().getName(i) } />;
             } else {
                 // rendering all other Tags with Tooltip
                 const continent = props.rowProps?.value?.tz ? props.rowProps?.value?.tz.split('/')[0].concat('/') : '';
                 const country = props.rowProps?.value?.countryName ? props.rowProps?.value?.countryName.concat('/') : '';
                 const tooltipContent = `${continent}${country}${props.caption}`;
                 return (
                     <Tooltip key={ props.rowProps?.id } content={ tooltipContent }>
-                        <PickerTogglerTag { ...props } />
+                        <PickerTogglerTag { ...props } getName={ (i) => ctx.getSelectedProps().getName(i) } />
                     </Tooltip>
                 );
             }

diff --git a/changelog.md b/changelog.md
@@ -1,3 +1,8 @@
+# 5.8.4 - 22.07.2024
+
+**What's Fixed**
+* [PickerInput]: fixed '+N' toggler tag tooltip content with custom `getName` callback
+
 # 5.8.3 - 19.07.2024
 
 **What's New**

diff --git a/...les-pickerInput-PickerTogglerTagDemo.json → ...s-pickerInput-CustomPickerTogglerTag.json b/...les-pickerInput-PickerTogglerTagDemo.json → ...s-pickerInput-CustomPickerTogglerTag.json
diff --git a/uui/components/pickers/PickerToggler.tsx b/uui/components/pickers/PickerToggler.tsx
@@ -37,7 +37,13 @@ function PickerTogglerComponent<TItem extends string, TId>(
         if (!!props.renderItem) {
             return props.renderItem(itemPropsWithSize);
         }
-        return <PickerTogglerTag { ...itemPropsWithSize } />;
+
+        return (
+            <PickerTogglerTag
+                { ...itemPropsWithSize }
+                getName={ props.getName }
+            />
+        );
     };
 
     return (
@@ -46,7 +52,7 @@ function PickerTogglerComponent<TItem extends string, TId>(
             ref={ ref }
             cx={ [applyPickerTogglerMods(props), props.cx] }
             renderItem={ renderItem }
-            getName={ (item) => (props.getName ? props.getName(item) : item) }
+            getName={ props.getName }
             cancelIcon={ systemIcons.clear }
             dropdownIcon={ systemIcons.foldingArrow }
         />

diff --git a/uui/components/pickers/PickerTogglerTag.tsx b/uui/components/pickers/PickerTogglerTag.tsx
@@ -15,7 +15,9 @@ interface PickerTogglerTagMods {
     size?: types.ControlSize;
 }
 
-export interface PickerTogglerTagProps<TItem, TId> extends Overwrite<PickerTogglerTagMods, PickerTogglerTagModsOverride>, PickerTogglerRenderItemParams<TItem, TId>, Omit<TagProps, 'size'> {}
+export interface PickerTogglerTagProps<TItem, TId> extends Overwrite<PickerTogglerTagMods, PickerTogglerTagModsOverride>, PickerTogglerRenderItemParams<TItem, TId>, Omit<TagProps, 'size'> {
+    getName: (item: TItem) => string;
+}
 
 export const PickerTogglerTag = React.forwardRef((props: PickerTogglerTagProps<any, any>, ref: React.Ref<HTMLElement>) => {
     const tagProps = {
@@ -26,7 +28,7 @@ export const PickerTogglerTag = React.forwardRef((props: PickerTogglerTagProps<a
     };
 
     if (props.isCollapsed) {
-        const collapsedRows = props.collapsedRows.map((row) => row.value?.name).join(', ');
+        const collapsedRows = props.collapsedRows.map((row) => props.getName(row.value)).join(', ');
         return (
             <Tooltip
                 key="selected"