Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add panel footer to dropdown component #4027

Merged
merged 4 commits into from
May 9, 2023
Merged

feat: add panel footer to dropdown component #4027

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bcc9db8
feat: add panel footer to dropdown component
EmirBoyaci Feb 3, 2023
8206c2c
Merge branch 'master' into ISSUE-4026
EmirBoyaci May 9, 2023
b291759
Update DropdownBase.js
melloware May 9, 2023
4a4e59f
Merge branch 'master' into ISSUE-4026
EmirBoyaci May 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 56 additions & 5 deletions components/doc/dropdown/templatedoc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,23 @@ export function TemplateDoc(props) {
);
};

const panelFooterTemplate = () => {
return (
<div className="py-2 px-3">
{selectedCountry ? (
<span>
<b>{selectedCountry.name}</b> selected.
</span>
) : (
'No country selected.'
)}
</div>
);
};

const code = {
basic: `
<Dropdown value={selectedCountry} options={countries} onChange={onCountryChange} optionLabel="name" placeholder="Select a Country" valueTemplate={selectedCountryTemplate} itemTemplate={countryOptionTemplate} />
<Dropdown value={selectedCountry} options={countries} onChange={onCountryChange} optionLabel="name" placeholder="Select a Country" valueTemplate={selectedCountryTemplate} itemTemplate={countryOptionTemplate} panelFooterTemplate={panelFooterTemplate} />
`,
javascript: `
import React, { useState } from "react";
Expand Down Expand Up @@ -98,10 +112,24 @@ export default function TemplateDoc() {
);
}

const panelFooterTemplate = () => {
return (
<div className="py-2 px-3">
{selectedCountry ? (
<span>
<b>{selectedCountry.name}</b> selected.
</span>
) : (
'No country selected.'
)}
</div>
);
};

return (
<div className="card flex justify-content-center dropdown-demo">
<Dropdown value={selectedCountry} options={countries} onChange={onCountryChange} optionLabel="name" placeholder="Select a Country" valueTemplate={selectedCountryTemplate} itemTemplate={countryOptionTemplate} />
</div>
<Dropdown value={selectedCountry} options={countries} onChange={onCountryChange} optionLabel="name" placeholder="Select a Country" valueTemplate={selectedCountryTemplate} itemTemplate={countryOptionTemplate} panelFooterTemplate={panelFooterTemplate} />
</div>
)
}
`,
Expand Down Expand Up @@ -155,9 +183,23 @@ export default function TemplateDoc() {
);
}

const panelFooterTemplate = () => {
return (
<div className="py-2 px-3">
{selectedCountry ? (
<span>
<b>{selectedCountry.name}</b> selected.
</span>
) : (
'No country selected.'
)}
</div>
);
};

return (
<div className="card flex justify-content-center dropdown-demo">
<Dropdown value={selectedCountry} options={countries} onChange={onCountryChange} optionLabel="name" placeholder="Select a Country" valueTemplate={selectedCountryTemplate} itemTemplate={countryOptionTemplate} />
<Dropdown value={selectedCountry} options={countries} onChange={onCountryChange} optionLabel="name" placeholder="Select a Country" valueTemplate={selectedCountryTemplate} itemTemplate={countryOptionTemplate} panelFooterTemplate={panelFooterTemplate} />
</div>
)
}
Expand All @@ -184,7 +226,16 @@ export default function TemplateDoc() {
<p></p>
</DocSectionText>
<div className="card flex justify-content-center dropdown-demo">
<Dropdown value={selectedCountry} options={countries} onChange={onCountryChange} optionLabel="name" placeholder="Select a Country" valueTemplate={selectedCountryTemplate} itemTemplate={countryOptionTemplate} />
<Dropdown
value={selectedCountry}
options={countries}
onChange={onCountryChange}
optionLabel="name"
placeholder="Select a Country"
valueTemplate={selectedCountryTemplate}
itemTemplate={countryOptionTemplate}
panelFooterTemplate={panelFooterTemplate}
/>
</div>
<DocSectionCode code={code} />
</>
Expand Down
12 changes: 12 additions & 0 deletions components/lib/dropdown/DropdownPanel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,16 @@ export const DropdownPanel = React.memo(
props.onFilterInputChange && props.onFilterInputChange(event);
};

const createFooter = () => {
if (props.panelFooterTemplate) {
const content = ObjectUtils.getJSXElement(props.panelFooterTemplate, props, props.onOverlayHide);

return <div className="p-multiselect-footer">{content}</div>;
}

return null;
};

const createGroupChildren = (optionGroup, style) => {
const groupChildren = props.getOptionGroupChildren(optionGroup);

Expand Down Expand Up @@ -191,6 +201,7 @@ export const DropdownPanel = React.memo(
});
const filter = createFilter();
const content = createContent();
const footer = createFooter();

return (
<CSSTransition
Expand All @@ -209,6 +220,7 @@ export const DropdownPanel = React.memo(
<div ref={ref} className={className} style={props.panelStyle} onClick={props.onClick}>
{filter}
{content}
{footer}
</div>
</CSSTransition>
);
Expand Down
4 changes: 4 additions & 0 deletions components/lib/dropdown/dropdown.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,6 +210,10 @@ export interface DropdownProps extends Omit<React.DetailedHTMLProps<React.InputH
* Style class of the overlay panel element.
*/
panelClassName?: string | undefined;
/**
* Template of the panel footer.
*/
panelFooterTemplate?: React.ReactNode | ((props: DropdownProps, hide: () => void) => React.ReactNode);
/**
* Inline style of the overlay panel element.
*/
Expand Down