diff --git a/lib/src/Dropdown/Dropdown.test.tsx b/lib/src/Dropdown/Dropdown.test.tsx index dbab47f87..3f677ba46 100644 --- a/lib/src/Dropdown/Dropdown.test.tsx +++ b/lib/src/Dropdown/Dropdown.test.tsx @@ -181,6 +181,66 @@ describe("Component: Dropdown", () => { expect(container.querySelector("select").multiple).toBe(true); }); + it("Should render custom static label", () => { + const hardcodedLabel: string = "Always show this text"; + act(() => { + render( + + {testOptions} + , + container + ); + }); + + expect(container.querySelector(".rc.custom-dropdown > .dropdown > .btn.dropdown-toggle > span").textContent).toBe(hardcodedLabel); + }); + + it("Should render custom label for selected element", () => { + const customLabels: { [k: string]: string } = { + 1: "One", + 2: "Two", + 3: "Three", + }; + + const getLabel = (value: string) => { + return customLabels[value]; + }; + + act(() => { + render( + + {testOptions} + , + container + ); + }); + + expect(container.querySelector(".rc.custom-dropdown > .dropdown > .btn.dropdown-toggle > span").textContent).toBe(customLabels["3"]); + }); + + it("Should render custom label and separator for selected elements", () => { + const customLabels: { [k: string]: string } = { + 1: "One", + 2: "Two", + 3: "Three", + }; + + const getLabel = (value: string[]) => { + return value.map((e) => customLabels[e]).join(" + "); + }; + + act(() => { + render( + + {testOptions} + , + container + ); + }); + + expect(container.querySelector(".rc.custom-dropdown > .dropdown > .btn.dropdown-toggle > span").textContent).toBe("One + Two"); + }); + it("Should render native only when used in a mobile device", () => { const userAgent: string = window.navigator.userAgent; const onChange: jest.Mock = jest.fn(); diff --git a/lib/src/Dropdown/Dropdown.tsx b/lib/src/Dropdown/Dropdown.tsx index 0e3fbf89d..e242794b5 100644 --- a/lib/src/Dropdown/Dropdown.tsx +++ b/lib/src/Dropdown/Dropdown.tsx @@ -42,11 +42,13 @@ export type DropdownProps = Omit & { searchable?: boolean; /** Allows clearing the dropdown with a clear button */ clearable?: boolean; + /** Allows setting custom label to be displayed for selected item */ + selectedLabel?: string | ((value: string | string[]) => string | string[]); /** Custom texts to be dispalyed in different parts of the dropdown */ text?: DropdownText; }; -export const Dropdown: React.FC = React.forwardRef(({ wrapperProps = {}, text = {}, onMultipleChange, searchable, clearable, ...props }: DropdownProps, ref) => { +export const Dropdown: React.FC = React.forwardRef(({ wrapperProps = {}, text = {}, onMultipleChange, searchable, clearable, selectedLabel, ...props }: DropdownProps, ref) => { const [toggleId] = React.useState(randomId("ddt-")); const [selectAllId] = React.useState(randomId("sa-")); const [show, setShow] = React.useState(false); @@ -210,8 +212,15 @@ export const Dropdown: React.FC = React.forwardRef(({ wrapperProp }, [show]); React.useEffect(() => { - !isMobile && setLabel((Array.isArray(props.value) ? props.value.join(", ") : props.value) || props.placeholder); - }, [props.value, props.placeholder]); + if (selectedLabel && typeof selectedLabel === "string") { + !isMobile && setLabel(selectedLabel || props.placeholder); + } else if (selectedLabel && typeof selectedLabel === "function") { + const newLabel: string | string[] = selectedLabel(props.value); + !isMobile && setLabel((Array.isArray(newLabel) ? newLabel.join(", ") : newLabel) || props.placeholder); + } else { + !isMobile && setLabel((Array.isArray(props.value) ? props.value.join(", ") : props.value) || props.placeholder); + } + }, [props.value, props.placeholder, selectedLabel]); return (