Skip to content

Commit fe37f51

Browse files
stomitastomita
authored
Merge pull request #505 from mashmatrix/update-lookup-list-header-footer
Delegate a part of `listHeader` and `listFooter` to props
2 parents 37fc73b + 2ff8942 commit fe37f51

2 files changed

Lines changed: 78 additions & 49 deletions

File tree

‎src/scripts/Lookup.tsx‎

Lines changed: 41 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -745,9 +745,13 @@ type LookupDropdownProps = {
745745
loading?: boolean;
746746
listboxId: string;
747747
dropdownRef: Ref<HTMLDivElement>;
748-
listHeader?: JSX.Element;
748+
listHeaderRenderer?: (
749+
rendererProps: React.HTMLAttributes<HTMLDivElement>
750+
) => JSX.Element;
749751
listHeaderIdSeed: string;
750-
listFooter?: JSX.Element;
752+
listFooterRenderer?: (
753+
rendererProps: React.HTMLAttributes<HTMLDivElement>
754+
) => JSX.Element;
751755
listFooterIdSeed: string;
752756
filteredData: LookupEntry[];
753757
focusedValue?: string;
@@ -767,9 +771,9 @@ const LookupDropdown: FC<LookupDropdownProps> = ({
767771
loading,
768772
listboxId,
769773
dropdownRef,
770-
listHeader,
774+
listHeaderRenderer,
771775
listHeaderIdSeed,
772-
listFooter,
776+
listFooterRenderer,
773777
listFooterIdSeed,
774778
filteredData,
775779
focusedValue,
@@ -794,24 +798,22 @@ const LookupDropdown: FC<LookupDropdownProps> = ({
794798
dropdownRef={dropdownRef}
795799
{...injectedProps}
796800
>
797-
{listHeader ? (
801+
{listHeaderRenderer ? (
798802
<ul
799803
className='slds-listbox slds-listbox_vertical'
800804
role='presentation'
801805
onKeyDown={onKeyDown}
802806
onBlur={onBlur}
803807
>
804808
<li role='presentation' className='slds-listbox__item'>
805-
<div
806-
id={getOptionId(listHeaderIdSeed)}
807-
className='slds-media slds-media_center slds-listbox__option slds-listbox__option_entity slds-listbox__option_term'
808-
role='option'
809-
aria-selected='true'
810-
tabIndex={0}
811-
onFocus={() => onOptionFocus(listHeaderIdSeed)}
812-
>
813-
{listHeader}
814-
</div>
809+
{listHeaderRenderer({
810+
id: getOptionId(listHeaderIdSeed),
811+
className: 'slds-listbox__option',
812+
role: 'option',
813+
'aria-selected': 'true',
814+
tabIndex: 0,
815+
onFocus: () => onOptionFocus(listHeaderIdSeed),
816+
})}
815817
</li>
816818
</ul>
817819
) : null}
@@ -839,23 +841,21 @@ const LookupDropdown: FC<LookupDropdownProps> = ({
839841
</li>
840842
) : null}
841843
</ul>
842-
{listFooter ? (
844+
{listFooterRenderer ? (
843845
<ul
844846
className='slds-listbox slds-listbox_vertical'
845847
role='presentation'
846848
onKeyDown={onKeyDown}
847849
onBlur={onBlur}
848850
>
849851
<li role='presentation' className='slds-listbox__item'>
850-
<div
851-
id={getOptionId(listFooterIdSeed)}
852-
className='slds-media slds-media_center slds-listbox__option slds-listbox__option_entity slds-listbox__option_term'
853-
role='option'
854-
tabIndex={0}
855-
onFocus={() => onOptionFocus(listFooterIdSeed)}
856-
>
857-
{listFooter}
858-
</div>
852+
{listFooterRenderer({
853+
id: getOptionId(listFooterIdSeed),
854+
className: 'slds-listbox__option',
855+
role: 'option',
856+
tabIndex: 0,
857+
onFocus: () => onOptionFocus(listFooterIdSeed),
858+
})}
859859
</li>
860860
</ul>
861861
) : null}
@@ -935,8 +935,12 @@ export type LookupProps = {
935935
lookupFilter?: Bivariant<
936936
(entry: LookupEntry, searchText?: string, scope?: string) => boolean
937937
>;
938-
listHeader?: JSX.Element;
939-
listFooter?: JSX.Element;
938+
listHeaderRenderer?: (
939+
rendererProps: React.HTMLAttributes<HTMLDivElement>
940+
) => JSX.Element;
941+
listFooterRenderer?: (
942+
rendererProps: React.HTMLAttributes<HTMLDivElement>
943+
) => JSX.Element;
940944
tooltip?: ReactNode;
941945
tooltipIcon?: string;
942946

@@ -987,8 +991,8 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
987991
disabled,
988992
loading,
989993
lookupFilter,
990-
listHeader,
991-
listFooter,
994+
listHeaderRenderer,
995+
listFooterRenderer,
992996
data = [],
993997
tooltip,
994998
tooltipIcon,
@@ -1064,18 +1068,18 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
10641068
? data.filter((entry) => lookupFilter(entry, searchText, targetScope))
10651069
: data;
10661070
return [
1067-
listHeader ? listHeaderIdSeed : undefined,
1071+
listHeaderRenderer ? listHeaderIdSeed : undefined,
10681072
...filteredData.map((entry) => entry.value),
1069-
listFooter ? listFooterIdSeed : undefined,
1073+
listFooterRenderer ? listFooterIdSeed : undefined,
10701074
].filter((value) => value !== undefined);
10711075
}, [
10721076
data,
10731077
lookupFilter,
10741078
searchText,
10751079
targetScope,
1076-
listHeader,
1080+
listHeaderRenderer,
10771081
listHeaderIdSeed,
1078-
listFooter,
1082+
listFooterRenderer,
10791083
listFooterIdSeed,
10801084
]);
10811085

@@ -1421,9 +1425,9 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
14211425
loading={loading}
14221426
listboxId={listboxId}
14231427
dropdownRef={dropdownRef}
1424-
listHeader={listHeader}
1428+
listHeaderRenderer={listHeaderRenderer}
14251429
listHeaderIdSeed={listHeaderIdSeed}
1426-
listFooter={listFooter}
1430+
listFooterRenderer={listFooterRenderer}
14271431
listFooterIdSeed={listFooterIdSeed}
14281432
filteredData={filteredData}
14291433
focusedValue={focusedValue}
@@ -1469,9 +1473,9 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
14691473
loading={loading}
14701474
listboxId={listboxId}
14711475
dropdownRef={dropdownRef}
1472-
listHeader={listHeader}
1476+
listHeaderRenderer={listHeaderRenderer}
14731477
listHeaderIdSeed={listHeaderIdSeed}
1474-
listFooter={listFooter}
1478+
listFooterRenderer={listFooterRenderer}
14751479
listFooterIdSeed={listFooterIdSeed}
14761480
filteredData={filteredData}
14771481
focusedValue={focusedValue}

‎stories/Lookup.stories.tsx‎

Lines changed: 37 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import CASES from './data/CASES';
1212
import SCOPES from './data/SCOPES';
1313
import { ComponentMeta, ComponentStoryObj } from '@storybook/react';
1414
import { containerDecorator } from './util';
15+
import classnames from 'classnames';
1516

1617
/**
1718
* example data set used for lookup datasource
@@ -373,8 +374,14 @@ export const OpenedWithListHeaderFooter: ComponentStoryObj<typeof Lookup> = {
373374
opened: true,
374375
data: COMPANY_DATA,
375376
selected: null,
376-
listHeader: (
377-
<>
377+
listHeaderRenderer: (rendererProps) => (
378+
<div
379+
{...rendererProps}
380+
className={classnames(
381+
rendererProps.className,
382+
'slds-listbox__option_term slds-media slds-media_center'
383+
)}
384+
>
378385
<span className='slds-media__figure slds-listbox__option-icon'>
379386
<Icon category='utility' icon='search' size='x-small' />
380387
</span>
@@ -383,10 +390,16 @@ export const OpenedWithListHeaderFooter: ComponentStoryObj<typeof Lookup> = {
383390
&quot;A&quot; in Account
384391
</span>
385392
</span>
386-
</>
393+
</div>
387394
),
388-
listFooter: (
389-
<>
395+
listFooterRenderer: (rendererProps) => (
396+
<div
397+
{...rendererProps}
398+
className={classnames(
399+
rendererProps.className,
400+
'slds-listbox__option_entity slds-media slds-media_center'
401+
)}
402+
>
390403
<span className='slds-media__figure slds-listbox__option-icon'>
391404
<Icon category='utility' icon='add' size='x-small' />
392405
</span>
@@ -395,7 +408,7 @@ export const OpenedWithListHeaderFooter: ComponentStoryObj<typeof Lookup> = {
395408
Add new Account
396409
</span>
397410
</span>
398-
</>
411+
</div>
399412
),
400413
},
401414
decorators: [containerDecorator({ height: 420 })],
@@ -467,8 +480,14 @@ export const DefaultOpenedWithListHeaderFooter: ComponentStoryObj<
467480
defaultOpened: true,
468481
data: COMPANY_DATA,
469482
selected: null,
470-
listHeader: (
471-
<>
483+
listHeaderRenderer: (rendererProps) => (
484+
<div
485+
{...rendererProps}
486+
className={classnames(
487+
rendererProps.className,
488+
'slds-listbox__option_term slds-media slds-media_center'
489+
)}
490+
>
472491
<span className='slds-media__figure slds-listbox__option-icon'>
473492
<Icon category='utility' icon='search' size='x-small' />
474493
</span>
@@ -477,10 +496,16 @@ export const DefaultOpenedWithListHeaderFooter: ComponentStoryObj<
477496
&quot;A&quot; in Account
478497
</span>
479498
</span>
480-
</>
499+
</div>
481500
),
482-
listFooter: (
483-
<>
501+
listFooterRenderer: (rendererProps) => (
502+
<div
503+
{...rendererProps}
504+
className={classnames(
505+
rendererProps.className,
506+
'slds-listbox__option_entity slds-media slds-media_center'
507+
)}
508+
>
484509
<span className='slds-media__figure slds-listbox__option-icon'>
485510
<Icon category='utility' icon='add' size='x-small' />
486511
</span>
@@ -489,7 +514,7 @@ export const DefaultOpenedWithListHeaderFooter: ComponentStoryObj<
489514
Add new Account
490515
</span>
491516
</span>
492-
</>
517+
</div>
493518
),
494519
},
495520
parameters: {

0 commit comments

Comments
 (0)